Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Logo and Cards #28

Open
captn3m0 opened this issue May 30, 2019 · 6 comments · Fixed by #1900
Open

Site Logo and Cards #28

captn3m0 opened this issue May 30, 2019 · 6 comments · Fixed by #1900
Labels
enhancement New feature or request Hacktoberfest Issues that are good first picks for Hacktoberfest participants help wanted Extra attention is needed

Comments

@captn3m0
Copy link
Member

Wanted: A logo design that can help create an identify for the website. Something that fits with the color scheme is preferred.

I'd also want to see if generic cards can be designed for social media platforms. So sharing the Alpine Linux page gets you a social card with the alpine logo alongside endoflife.date logo.

Do these cards support SVG format that we can generate using Jekyll?

@captn3m0 captn3m0 added enhancement New feature or request help wanted Extra attention is needed labels May 30, 2019
@usta usta added the Hacktoberfest Issues that are good first picks for Hacktoberfest participants label Oct 6, 2022
@adriens
Copy link
Contributor

adriens commented Nov 17, 2022

yes please 🙏

@marcwrobel
Copy link
Member

For the twitter card the jekyll-seo-tag plugin may already handle it (https://maxchadwick.xyz/blog/twitter-cards-for-jekyll-with-jekyll-seo-tag).

As you can see at the end of the documentation, only one image can be added on a given page. Having two images does not seem possible, but that's something that can be tested anyway.

If I read the doc correctly the SVG format is not supported : see https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image.

marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used. Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon).

A new section has been added to the README in order to give credits to the softwares used in the project.
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and site.webmanifest were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. site.webmanifest is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 24, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 25, 2022
Material's 'update' icon (https://fonts.google.com/icons?selected=Material+Icons+Outlined:update:) was used, as permitted by Google (https://developers.google.com/fonts/faq#can_i_use_the_font_in_a_logo).

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/a/21359390/374236).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of a Material icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 25, 2022
Material's 'update' icon (https://fonts.google.com/icons?selected=Material+Icons+Outlined:update:) was used, as permitted by Google (https://developers.google.com/fonts/faq#can_i_use_the_font_in_a_logo).

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/a/21359390/374236).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of a Material icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 25, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 28, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Nov 28, 2022
Material's 'update' icon (https://fonts.google.com/icons?selected=Material+Icons+Outlined:update:) was used, as permitted by Google (https://developers.google.com/fonts/faq#can_i_use_the_font_in_a_logo).

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/a/21359390/374236).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of a Material icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
@marcwrobel marcwrobel linked a pull request Dec 22, 2022 that will close this issue
marcwrobel added a commit that referenced this issue Dec 22, 2022
The 'hourglass not done' icon from Openmoji (https://openmoji.org/library/emoji-23F3/) was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated by at least the use of an Openmoji icon as this site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Dec 26, 2022
A handmade icon derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

Site logo has been injected before the site name. It has to be done using CSS : the Just the Docs theme does not offer an extension point for doing this.

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated at least by the use of the Wikimedia icon as the site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Dec 27, 2022
A handmade icon derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used.

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

Site logo has been injected before the site name. It has to be done using CSS : the Just the Docs theme does not offer an extension point for doing this.

A new section has been added to the README in order to give credits to the softwares used in the project. This is mandated at least by the use of the Wikimedia icon as the site logo.

Note that I would have prefer to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link). But those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Dec 27, 2022
A handmade logo, derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used. It represents the concepts of time (with the hourglass) and EOL/cycles (with the colored split circle).

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

Site logo has been injected before the site name using CSS. It had to be done that way because the Just the Docs theme does not offer an extension point for doing it.

A new section has been added to the README in order to give credits to the softwares used in the project. The human.txt has been updated too. This is mandated at least by the use of the Wikimedia icon as the site logo.

Note that I would have prefered to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link), but those are slowing down significantly the build (10s -> 40s).
marcwrobel added a commit that referenced this issue Dec 27, 2022
A handmade logo, derived from https://commons.wikimedia.org/wiki/File:Hourglass_icon_%28orange%29.svg was used. It represents the concepts of time (with the hourglass) and EOL/cycles (with the colored split circle).

Derived icons for various usage were generated using https://realfavicongenerator.net/ (from the SVG icon). All icons were placed in the 'assets' directory, except favicon.ico. The theme mandates its path to be /favicon.ico, and it seems a lot of browsers assume this location anyway (https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea/21359390#21359390).

New files, browserconfig.xml and manifest.json were also added. It is not clear if browserconfig.xml is still useful (https://webmasters.stackexchange.com/q/131077) but it does not hurt. manifest.json is useful for PWA (https://developer.mozilla.org/en-US/docs/Web/Manifest).

Site logo has been injected before the site name using CSS. It had to be done that way because the Just the Docs theme does not offer an extension point for doing it.

A new section has been added to the README in order to give credits to the softwares used in the project. The human.txt has been updated too. This is mandated at least by the use of the Wikimedia icon as the site logo.

Note that I would have prefered to use the 'link' tag to generate image URLs (https://jekyllrb.com/docs/liquid/tags/#link), but those are slowing down significantly the build (10s -> 40s).
@marcwrobel marcwrobel reopened this Dec 27, 2022
@marcwrobel
Copy link
Member

Reopened: automatically closed by #1900 .

marcwrobel added a commit that referenced this issue Dec 27, 2022
@marcwrobel
Copy link
Member

A preview with the new logo can be seen on https://renderform.io/tools/twitter-card-preview-tool/ :
Screenshot from 2022-12-27 17-26-57

Still not perfect, but better than what it was before:
Screenshot from 2022-12-27 17-27-06

@marcwrobel
Copy link
Member

I'd also want to see if generic cards can be designed for social media platforms. So sharing the Alpine Linux page gets you a social card with the alpine logo alongside endoflife.date logo. Do these cards support SVG format that we can generate using Jekyll?

SVG is not supported on twitter cards, but it should be possible to generate a cover with both endoflife logo and the product logo similar to what you shared on #978 (comment) :

card

marcwrobel added a commit that referenced this issue Dec 28, 2022
marcwrobel added a commit that referenced this issue Dec 28, 2022
marcwrobel added a commit that referenced this issue Feb 24, 2023
Product pages description was broken since the introduction of the 'product' layout. Moreover, jekyll-seo-tag already handles description and og:description meta tags, so there is no need to override them using the head_custom template.

All pages descriptions were also simplified in the process.
marcwrobel added a commit that referenced this issue Feb 24, 2023
Product pages description was broken since the introduction of the 'product' layout. Moreover, jekyll-seo-tag already handles description and og:description meta tags, so there is no need to override them using the head_custom template.

All pages descriptions were also simplified in the process.
captn3m0 pushed a commit that referenced this issue Mar 1, 2023
Product pages description was broken since the introduction of the 'product' layout. Moreover, jekyll-seo-tag already handles description and og:description meta tags, so there is no need to override them using the head_custom template.

All pages descriptions were also simplified in the process.
@marcwrobel
Copy link
Member

#2007 provide some information about Open Graph, worth a look for anybody wanting to work on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Hacktoberfest Issues that are good first picks for Hacktoberfest participants help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants