From 473ea2c66f9122cec2647c281ca47cc073ca5fd0 Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Mon, 27 Jun 2022 22:04:32 +0200 Subject: [PATCH 1/5] feat(layouts/partials/head.html): Adds general favicon support with dict and string input format --- layouts/partials/head.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b3ad28d..7b8bb4e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -10,7 +10,17 @@ end }} - + + + {{ $favicon := $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }} + {{ $type := (printf "%T" $favicon) }} + {{ if eq $type "string" }} + {{ $favicon | safeHTML }} + {{ else }} + {{ range $favicon }} + + {{- end }} + {{ end }} Date: Mon, 27 Jun 2022 22:05:35 +0200 Subject: [PATCH 2/5] docs(content/notes/config.md): Adds documentation for the new favicon support --- content/notes/config.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/content/notes/config.md b/content/notes/config.md index d04b152..691e187 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -23,6 +23,40 @@ links: # Links to show in footer link: https://github.com/jackyzha0 ``` +### HTML Favicons + +If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The default without any set `favicon` key is: + +```html + +``` + +The default can be overridden by defining a value to the `favicon` key in your `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is equivalent to the default: + +```yaml +favicon: + - { rel: "shortcut icon", href: "icon.png", type: "image/png" } +``` + +In this format, the following keys are available: +- `rel`: The `rel` attribute of the `` tag. +- `type`: The `type` attribute of the `` tag. +- `href` (optional): The `href` attribute of the `` tag. +- `sizes` (optional): The `sizes` attribute of the `` tag. + +If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML: + +```yaml +favicon: | + +``` + +Some websites that **generate favicons** for you (ordered alphabetically) include: +- [`favicon.io`](https://favicon.io/) +- [`realfavicongenerator.net`](https://realfavicongenerator.net/) +- [`www.favicon.cc`](https://www.favicon.cc/) + + ### Graph View To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. From 997937af5a6dc317da56ae294dce927ec5930a4b Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Tue, 28 Jun 2022 00:45:48 +0200 Subject: [PATCH 3/5] docs(config.md): Added short explainer on favicons --- content/notes/config.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/content/notes/config.md b/content/notes/config.md index 691e187..8c758ed 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -25,7 +25,13 @@ links: # Links to show in footer ### HTML Favicons -If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The default without any set `favicon` key is: +A Favicon is most commonly seen preceding the URL in a browser. Some +other examples include (but are not limited to) bookmarks, search history, and +app icons (i.e. "save page to homescreen" on mobile devices). [File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support) +and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) differ +across the combination of platforms and browsers. + +If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The **default** without any set `favicon` key is: ```html From 7070a1992a6c9462d50afcc7139f8f97e1dce2b8 Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Tue, 28 Jun 2022 01:15:33 +0200 Subject: [PATCH 4/5] docs(config.md): Fixed multi-favicon examples and general favicon explanation throughout --- content/notes/config.md | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/content/notes/config.md b/content/notes/config.md index 8c758ed..c9cbd0a 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -25,23 +25,29 @@ links: # Links to show in footer ### HTML Favicons -A Favicon is most commonly seen preceding the URL in a browser. Some -other examples include (but are not limited to) bookmarks, search history, and -app icons (i.e. "save page to homescreen" on mobile devices). [File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support) -and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) differ -across the combination of platforms and browsers. +A Favicon is most commonly seen as the **image preceding the URL in a browser**. +Some other examples include (but are not limited to) bookmarks, search history, +and app icons (i.e. "save page to home screen" on mobile devices). +[File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support) +and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon) +differ across the combination of platforms and browsers. -If you would like to customize the favicons of your website, you can add them to the `data/config.yaml` file. The **default** without any set `favicon` key is: +If you would like to customize the favicons of your quartz-based website, you +can add them to the `data/config.yaml` file. The **default** without any set +`favicon` key is: ```html ``` -The default can be overridden by defining a value to the `favicon` key in your `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is equivalent to the default: +The default can be overridden by defining a value to the `favicon` key in your +`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is +equivalent to the default: ```yaml favicon: - { rel: "shortcut icon", href: "icon.png", type: "image/png" } +# - { ... } # Repeat for each additional favicon you want to add ``` In this format, the following keys are available: @@ -50,18 +56,34 @@ In this format, the following keys are available: - `href` (optional): The `href` attribute of the `` tag. - `sizes` (optional): The `sizes` attribute of the `` tag. -If you plan to add multiple favicons generated by a website, it may be easier to define it as HTML: +If you plan to add multiple favicons generated by a website (see list below), it +may be easier to define it as HTML. Here is an example which appends the +**Apple touch icon** to quartz's default favicon: ```yaml favicon: | + ``` +This second favicon will now be used as a web page icon when someone adds your +webpage to the home screen of their Apple device. If you are interested in more +information about the current, and past, standards of favicons, you can read +[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/). + Some websites that **generate favicons** for you (ordered alphabetically) include: - [`favicon.io`](https://favicon.io/) - [`realfavicongenerator.net`](https://realfavicongenerator.net/) - [`www.favicon.cc`](https://www.favicon.cc/) +These sites will take a base image and generate a set of favicons for you, +one of which will be, for example, the `apple-touch-icon` favicon. These sites +will often **also provide the HTML** for the favicon, which can be simply +added to the `data/config.yaml` using the HTML format of the `favicon` +argument. + +**Note** that all generated favicon paths, defined by the `href` +attribute, are relative to the `static/` directory. ### Graph View To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. From b732293f65999e9a1d3a40a5ddeccf53a385b1f3 Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Tue, 28 Jun 2022 01:21:22 +0200 Subject: [PATCH 5/5] fix(head.html): Adds robustness to `config.yaml` favicon definitions Initially assumed that `href` definitions should have `/...` as their pattern, and `baseURL` would always end with `/`, however the omission of `/` as the prefix of the former and suffix of the latter simultaneously, would result in broken favicon paths. Final comment: `..///...` is not breaking, which is worst case scenario with this fix. --- layouts/partials/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7b8bb4e..d33a0c7 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -18,7 +18,7 @@ {{ $favicon | safeHTML }} {{ else }} {{ range $favicon }} - + {{- end }} {{ end }}