From 0ff3eb3aab58b99be88d297cc9dc0e2332bb762a Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Thu, 25 Jan 2024 12:26:59 +0100 Subject: [PATCH] hugo: migrate font icons to svg Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- assets/css/global.css | 4 ++-- assets/css/icons.css | 19 +------------------ content/admin/organization/_index.md | 4 ++-- content/compose/compose-file/_index.md | 4 ++-- content/contribute/components/icons.md | 8 ++++---- content/reference.md | 2 +- content/release-notes.md | 2 +- .../_default/_markup/render-codeblock.html | 11 ++++++----- layouts/_default/_markup/render-image.html | 4 ++-- layouts/_default/_markup/render-link.html | 8 +++++--- layouts/partials/components/accordion.html | 6 ++---- layouts/partials/components/card.html | 2 +- layouts/partials/github-links.html | 13 ++++++++----- layouts/partials/head.html | 1 - layouts/partials/header.html | 12 +++++++----- 15 files changed, 44 insertions(+), 56 deletions(-) diff --git a/assets/css/global.css b/assets/css/global.css index 5ceb76c5b9..d9276ba8af 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -19,8 +19,8 @@ } .external-link { - .icon:after { - @apply text-base ml-1; + .icon-svg svg { + @apply text-base ml-1 align-top; } } diff --git a/assets/css/icons.css b/assets/css/icons.css index 59a4ef47ca..d68025ee32 100644 --- a/assets/css/icons.css +++ b/assets/css/icons.css @@ -4,25 +4,8 @@ font-size: 24px; width: 1em; height: 1em; + display: inline-block; fill: currentColor; } } - - .icon { - font-family: "Material Symbols Rounded"; - font-weight: normal; - font-style: normal; - font-size: 24px; /* Preferred icon size */ - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - } - - .icon:after { - content: attr(data-icon); - } } diff --git a/content/admin/organization/_index.md b/content/admin/organization/_index.md index 8f5e3ee1ff..0390af1037 100644 --- a/content/admin/organization/_index.md +++ b/content/admin/organization/_index.md @@ -21,7 +21,7 @@ grid: link: /admin/organization/registry-access/ - title: General settings description: Configure general information or create a company. - icon: settings_suggest + icon: settings link: /admin/organization/general-settings/ - title: SSO & SCIM description: 'Set up [Single Sign-On](/security/for-admins/single-sign-on/) @@ -45,4 +45,4 @@ To create an organization, see [Create your organization](../organization/orgs.m Learn how to administer an organization in the following sections. -{{< grid >}} \ No newline at end of file +{{< grid >}} diff --git a/content/compose/compose-file/_index.md b/content/compose/compose-file/_index.md index bca420d361..13e0478c97 100644 --- a/content/compose/compose-file/_index.md +++ b/content/compose/compose-file/_index.md @@ -26,7 +26,7 @@ grid: link: /compose/compose-file/07-volumes/ - title: Configs top-level element description: Find out about configs in Compose. - icon: settings_suggest + icon: settings link: /compose/compose-file/08-configs/ - title: Secrets top-level element description: Learn about secrets in Compose. @@ -57,4 +57,4 @@ The Compose Specification on Docker Docs is the Docker Compose implementation. I Use the following links to navigate key sections of the Compose Specification. -{{< grid >}} \ No newline at end of file +{{< grid >}} diff --git a/content/contribute/components/icons.md b/content/contribute/components/icons.md index 0f3c7aad9e..e32937495f 100644 --- a/content/contribute/components/icons.md +++ b/content/contribute/components/icons.md @@ -51,8 +51,8 @@ grid: icon: "publish" description: Icon name = publish - title: "Interacting" - icon: "multiple_stops" - description: Icon name = multiple_stops + icon: "multiple_stop" + description: Icon name = multiple_stop - title: "Storage" icon: "database" description: Icon name = database @@ -141,8 +141,8 @@ grid: description: Icon name = supervised_user_circle icon: supervised_user_circle - title: "General settings" - icon: "settings_suggest" - description: Icon name = settings_suggest + icon: "settings" + description: Icon name = settings --- Below is an inventory of the icons we use to represent different topics or features across docs. To be used with the [cards component](cards.md). diff --git a/content/reference.md b/content/reference.md index 8d25a0e622..fc7d6b7934 100644 --- a/content/reference.md +++ b/content/reference.md @@ -41,7 +41,7 @@ grid_apis: link: /docker-hub/api/latest/ - title: DVP Data API description: API for Docker Verified Publishers to fetch analytics data. - icon: auto_graph + icon: area_chart link: /docker-hub/api/dvp/ grid_specs: - title: Image specification diff --git a/content/release-notes.md b/content/release-notes.md index 81421da14c..63d9f6226a 100644 --- a/content/release-notes.md +++ b/content/release-notes.md @@ -7,7 +7,7 @@ grid: icon: web_asset link: /desktop/release-notes/ - title: Docker Engine - icon: settings_suggest + icon: developer_board link: /engine/release-notes/ - title: Docker Compose icon: storage diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index 61b27132d2..09dc6afcf4 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -1,13 +1,14 @@
{{ $result := transform.HighlightCodeBlock . }}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 8d112c6c12..b9d646b15e 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -34,9 +34,9 @@ class="fixed z-20 inset-0 flex items-center justify-center bg-black/70 p-6" > {{ .Text | safeHTML }} + rel="noopener"> + {{- .Text | safeHTML -}} + + {{- partial "icon" "open_in_new" -}} + {{- else if (strings.HasPrefix $url "/") -}} {{/* absolute link, use url as-is */}} {{ .Text | safeHTML }} diff --git a/layouts/partials/components/accordion.html b/layouts/partials/components/accordion.html index 545bd0d1ad..bddf790473 100644 --- a/layouts/partials/components/accordion.html +++ b/layouts/partials/components/accordion.html @@ -1,10 +1,8 @@
diff --git a/layouts/partials/components/card.html b/layouts/partials/components/card.html index d01656f3cb..4603ffb09c 100644 --- a/layouts/partials/components/card.html +++ b/layouts/partials/components/card.html @@ -33,7 +33,7 @@ {{ else }} {{/* icon ligature */}} - {{ . }} + {{ partial "icon" . }} {{ end }} {{ end }}
diff --git a/layouts/partials/github-links.html b/layouts/partials/github-links.html index b981d2514a..d2e8a7e5d0 100644 --- a/layouts/partials/github-links.html +++ b/layouts/partials/github-links.html @@ -2,19 +2,22 @@ {{ with .File }} {{ if not (in .Filename "/_vendor/") }}

- edit + {{ partial "icon" "edit" }} {{ T "editPage" }} - - + + {{- partial "icon" "open_in_new" -}} +

{{ end }} {{ end }}

- done + {{ partial "icon" "done" }} {{ T "requestChanges" }} - + + {{- partial "icon" "open_in_new" -}} +

{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 810cbd9473..99bdf9ebaa 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -39,7 +39,6 @@ - {{ partial "utils/css.html" . }} {{ $theme := resources.Get "js/theme.js" | js.Build (dict "minify" true) }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c330341b1c..62d21834ec 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -9,9 +9,8 @@ } else { sidebar.classList.replace('md:block', 'md:hidden'); } - }" class="btn-icon-round menu-btn material-symbols-rounded hidden h-full px-4 md:block" aria-label="Menu" - id="menu-btn"> - menu + }" class="icon-svg hidden px-4 md:block" aria-label="Menu"> + {{ partial "icon" "menu" }}
{{/* main logo */}} @@ -25,11 +24,14 @@
- + })" @click="theme = (theme === 'dark' ? 'light' : 'dark')"> + {{ partial "icon" "light_mode"}} + +