Upgrade to FontAwesome 6 (#1102)

google · Aug 15, 2022 · e3c0360 · e3c0360
1 parent 1779a8c
commit e3c0360
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 63 deletions.
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
@@ -121,13 +121,13 @@
             font-variant: normal;
             text-rendering: auto;
             -webkit-font-smoothing: antialiased;
-            font-family: "Font Awesome 5 Free";
-            font-weight: 900; 
+            font-family: "Font Awesome 6 Free";
+            font-weight: 900;
             content: "\f0d9";
             padding-left: 0.5em;
             padding-right: 0.5em;
         }
-    }  
+    }
 }
 
 // Foldable sidebar menu
@@ -136,18 +136,18 @@ nav.foldable-nav {
     &#td-section-nav {
         position: relative;
     }
-    
+
     &#td-section-nav label {
         margin-bottom: 0;
         width: 100%;
     }
-    
+
     .td-sidebar-nav__section, .with-child ul {
         list-style: none;
         padding: 0;
         margin: 0;
     }
-    
+
     .ul-1 > li {
         padding-left: 1.5em;
     }
@@ -162,8 +162,8 @@ nav.foldable-nav {
 
     input[type=checkbox] { display: none; }
 
-    .with-child, .without-child { 
-        position: relative; 
+    .with-child, .without-child {
+        position: relative;
         padding-left: 1.5em;
     }
 
@@ -173,7 +173,7 @@ nav.foldable-nav {
         font-variant: normal;
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
-        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0da";
+        font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0da";
         position: absolute;
         left: 0.1em;
         padding-left: 0.4em;
@@ -186,30 +186,30 @@ nav.foldable-nav {
         }
     }
 
-    .ul-1 .with-child > input:checked ~ label:before { 
+    .ul-1 .with-child > input:checked ~ label:before {
         color: $primary;
         transform: rotate(90deg);
-        transition: transform 0.5s; 
+        transition: transform 0.5s;
     }
 
     .with-child ul { margin-top: 0.1em; }
-    
-}    
+
+}
 
 @media (hover: hover) and (pointer: fine) {
-    
+
     nav.foldable-nav {
 
-        .ul-1 .with-child > label:hover:before { 
+        .ul-1 .with-child > label:hover:before {
             color: $primary;
             transform: rotate(30deg);
-            transition: transform 0.5s; 
+            transition: transform 0.5s;
         }
 
-        .ul-1 .with-child > input:checked ~ label:hover:before { 
+        .ul-1 .with-child > input:checked ~ label:hover:before {
             color: $primary;
             transform: rotate(60deg) !important;
-            transition: transform 0.5s; 
+            transition: transform 0.5s;
         }
     }
 }
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
@@ -14,7 +14,7 @@
         border-radius: 1rem;
     }
 
-    font-family: "Font Awesome 5 Free", $font-family-base;
+    font-family: "Font Awesome 6 Free", $font-family-base;
 }
 
 .popover.offline-search-result {

diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss
@@ -207,7 +207,7 @@
     font-variant: normal;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 6 Free";
     // font-weight: 900;
     padding-right: 0.5em;
     font-size: 2em;
@@ -298,7 +298,7 @@
   font-variant: normal;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
-  font-family: "Font Awesome 5 Free";
+  font-family: "Font Awesome 6 Free";
   content: "\f02d";
   padding-right: 0.5em;
 }
@@ -309,7 +309,7 @@
   font-variant: normal;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
-  font-family: "Font Awesome 5 Free";
+  font-family: "Font Awesome 6 Free";
   content: "\f781";
   padding-right: 0.5em;
 }
@@ -325,7 +325,7 @@
     font-variant: normal;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 6 Free";
     content: "\f122";
     padding-right: 0.5em;
   }

diff --git a/assets/scss/support/_functions.scss b/assets/scss/support/_functions.scss
@@ -5,7 +5,6 @@
 }
 
 
-
 // See https://www.sitepoint.com/using-sass-build-color-palettes/
 @function color-diff($a, $b) {
   $sat: saturation($a) - saturation($b);

diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -21,7 +21,7 @@
           <main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main">
             {{ with .CurrentSection.OutputFormats.Get "rss" -}}
             <a class="btn btn-lg -bg-orange td-rss-button d-none d-lg-block" href="{{ .Permalink | safeURL }}" target="_blank">
-              RSS <i class="fa fa-rss ml-2 "></i>
+              RSS <i class="fa-solid fa-rss"></i>
             </a>
             {{ end -}}
             {{ block "main" . }}{{ end }}

diff --git a/layouts/partials/page-meta-links.html b/layouts/partials/page-meta-links.html
@@ -8,7 +8,7 @@
 <div class="td-page-meta ml-2 pb-1 pt-2 mb-0">
 {{ if $gh_url -}}
   {{ warnf "Warning: use of `github_url` is deprecated. For details see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}}
-  <a href="{{ $gh_url }}" target="_blank"><i class="fa fa-edit fa-fw"></i> {{ T "post_edit_this" }}</a>
+  <a href="{{ $gh_url }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
 {{ else if $gh_repo -}}
   {{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted -}}
   {{ if and ($gh_subdir) (.Site.Language.Lang) -}}
@@ -37,18 +37,18 @@
   {{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL -}}
   {{ $newPageURL := printf "%s/new/%s?%s"  $gh_repo $gh_repo_path $newPageQS -}}
 
-  <a href="{{ $viewURL }}" class="td-page-meta--view" target="_blank" rel="noopener"><i class="fa fa-file-alt fa-fw"></i> {{ T "post_view_this" }}</a>
-  <a href="{{ $editURL }}" class="td-page-meta--edit" target="_blank" rel="noopener"><i class="fa fa-edit fa-fw"></i> {{ T "post_edit_this" }}</a>
-  <a href="{{ $newPageURL }}" class="td-page-meta--child" target="_blank" rel="noopener"><i class="fa fa-edit fa-fw"></i> {{ T "post_create_child_page" }}</a>
-  <a href="{{ $issuesURL }}" class="td-page-meta--issue" target="_blank" rel="noopener"><i class="fas fa-tasks fa-fw"></i> {{ T "post_create_issue" }}</a>
+  <a href="{{ $viewURL }}" class="td-page-meta--view" target="_blank" rel="noopener"><i class="fa-solid fa-file-lines fa-fw"></i> {{ T "post_view_this" }}</a>
+  <a href="{{ $editURL }}" class="td-page-meta--edit" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
+  <a href="{{ $newPageURL }}" class="td-page-meta--child" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_create_child_page" }}</a>
+  <a href="{{ $issuesURL }}" class="td-page-meta--issue" target="_blank" rel="noopener"><i class="fa-solid fa-list-check fa-fw"></i> {{ T "post_create_issue" }}</a>
   {{ with $gh_project_repo -}}
     {{ $project_issueURL := printf "%s/issues/new" . -}}
-    <a href="{{ $project_issueURL }}" class="td-page-meta--project-issue" target="_blank" rel="noopener"><i class="fas fa-tasks fa-fw"></i> {{ T "post_create_project_issue" }}</a>
+    <a href="{{ $project_issueURL }}" class="td-page-meta--project-issue" target="_blank" rel="noopener"><i class="fa-solid fa-list-check fa-fw"></i> {{ T "post_create_project_issue" }}</a>
   {{ end -}}
 
 {{ end -}}
 {{ with .CurrentSection.AlternativeOutputFormats.Get "print" -}}
-  <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
+  <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa-solid fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
 {{ end }}
 </div>
 {{ end -}}
diff --git a/layouts/partials/reading-time.html b/layouts/partials/reading-time.html
@@ -1 +1 @@
-<p class="reading-time"><i class="fa fa-clock" aria-hidden="true"></i>&nbsp;{{ if gt .ReadingTime 1 }} {{ .ReadingTime }} {{ T "post_reading_time" }} {{ else }} {{ T "post_less_than_a_minute_read" }} {{ end }}&nbsp;</p>
+<p class="reading-time"><i class="fa-solid fa-clock" aria-hidden="true"></i>&nbsp;{{ if gt .ReadingTime 1 }} {{ .ReadingTime }} {{ T "post_reading_time" }} {{ else }} {{ T "post_less_than_a_minute_read" }} {{ end }}&nbsp;</p>
diff --git a/layouts/shortcodes/blocks/link-down.html b/layouts/shortcodes/blocks/link-down.html
@@ -1,7 +1,7 @@
 {{ with .Parent }}
 {{ $id := $.Get "id" | default (printf "td-block-%d" ( add .Ordinal 1 ))  }}
 {{ $color := $.Get "color" | default "blue" }}
-<a class="btn btn-link text-{{ $color }}" href="#{{ $id }}" aria-label="{{ T "ui_read_more"}}"><i class="fa fa-chevron-circle-down" style="font-size: 400%"></i></a>
+<a class="btn btn-link text-{{ $color }}" href="#{{ $id }}" aria-label="{{ T "ui_read_more"}}"><i class="fa-solid fa-circle-chevron-down" style="font-size: 400%"></i></a>
 {{ else }}
 {{ errorf "The link-down shortcode is supposed to be nested inside a shortcode"}}
 {{ end }}
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "proseWrap": "always"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "bootstrap": "^4.6.1"
   },
   "devDependencies": {

diff --git a/userguide/config.toml b/userguide/config.toml
@@ -40,7 +40,7 @@ anchor = "smart"
     name = "Example Site"
     weight = 40
     url = "https://example.docsy.dev"
-    post = '<sup><i class="pl-1 fas fa-external-link-alt fa-xs" aria-hidden="true"></i></sup>'
+    post = '<sup><i class="pl-1 fa-solid fa-up-right-from-square fa-xs" aria-hidden="true"></i></sup>'
 
 [services]
 [services.googleAnalytics]
@@ -150,38 +150,38 @@ enable = false
 [[params.links.user]]
   name ="GitHub Discussions"
   url = "https://github.com/google/docsy/discussions"
-  icon = "fab fa-github"
+  icon = "fa-brands fa-github"
   desc = "Discussion and help from your fellow users"
 [[params.links.user]]
   name = "User mailing list"
   url = "https://groups.google.com/forum/#!forum/docsy-users"
-  icon = "fa fa-envelope"
+  icon = "fa-solid fa-envelope"
   desc = "Sign up for Docsy announcements"
 [[params.links.user]]
   name ="Twitter"
   url = "https://twitter.com/docsydocs"
-  icon = "fab fa-twitter"
+  icon = "fa-brands fa-twitter"
   desc = "Follow us on Twitter to get the latest news!"
 [[params.links.user]]
   name = "Stack Overflow"
   url = "https://stackoverflow.com/questions/tagged/docsy"
-  icon = "fab fa-stack-overflow"
+  icon = "fa-brands fa-stack-overflow"
   desc = "Practical questions and curated answers"
 # Developer relevant links. These will show up on right side of footer and in the community page if you have one.
 [[params.links.developer]]
   name = "GitHub"
   url = "https://github.com/google/docsy"
-  icon = "fab fa-github"
+  icon = "fa-brands fa-github"
   desc = "Development takes place here!"
 # [[params.links.developer]]
   # name = "Slack"
   # url = "https://example.org/slack"
-  # icon = "fab fa-slack"
+  # icon = "fa-brands fa-slack"
   # desc = "Chat with other project developers"
 # [[params.links.developer]]
   # name = "Developer mailing list"
   # url = "https://example.org/mail"
-  # icon = "fa fa-envelope"
+  # icon = "fa-solid fa-envelope"
   # desc = "Discuss development issues around the project"
 
 [params.mermaid]

diff --git a/userguide/content/en/_index.html b/userguide/content/en/_index.html
@@ -5,10 +5,10 @@
 {{< blocks/cover title="Welcome to Docsy!" image_anchor="top" height="full" color="orange" >}}
 <div class="mx-auto">
 	<a class="btn btn-lg btn-primary mr-3 mb-4" href="{{< relref "/about" >}}">
-		Learn More <i class="fas fa-arrow-alt-circle-right ml-2"></i>
+		Learn More <i class="fa-solid fa-circle-right ml-2"></i>
 	</a>
 	<a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/google/docsy">
-		Download <i class="fab fa-github ml-2 "></i>
+		Download <i class="fa-brands fa-github ml-2 "></i>
 	</a>
 	<p class="lead mt-5">A Hugo theme for creating great technical documentation sites</p>
 	{{< blocks/link-down color="info" >}}
@@ -32,12 +32,12 @@
 {{% /blocks/feature %}}
 
 
-{{% blocks/feature icon="fab fa-github" title="Contributions welcome!" url="https://github.com/google/docsy" %}}
+{{% blocks/feature icon="fa-brands fa-github" title="Contributions welcome!" url="https://github.com/google/docsy" %}}
 We do a [Pull Request](https://github.com/google/docsy/pulls) contributions workflow on **GitHub**. New users are always welcome!
 {{% /blocks/feature %}}
 
 
-{{% blocks/feature icon="fab fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/docsydocs" %}}
+{{% blocks/feature icon="fa-brands fa-twitter" title="Follow us on Twitter!" url="https://twitter.com/docsydocs" %}}
 Find out about new features and how our users are using Docsy.
 {{% /blocks/feature %}}
 

diff --git a/userguide/content/en/docs/adding-content/content.md b/userguide/content/en/docs/adding-content/content.md
@@ -561,27 +561,27 @@ params:
         {
           "name": "Twitter",
           "url": "https://example.org/twitter",
-          "icon": "fab fa-twitter",
+          "icon": "fa-brands fa-twitter",
           "desc": "Follow us on Twitter to get the latest news!"
         },
         {
           "name": "Stack Overflow",
           "url": "https://example.org/stack",
-          "icon": "fab fa-stack-overflow",
+          "icon": "fa-brands fa-stack-overflow",
           "desc": "Practical questions and curated answers"
         }
       ],
       "developer": [
         {
           "name": "GitHub",
           "url": "https://github.com/google/docsy",
-          "icon": "fab fa-github",
+          "icon": "fa-brands fa-github",
           "desc": "Development takes place here!"
         },
         {
           "name": "Slack",
           "url": "https://example.org/slack",
-          "icon": "fab fa-slack",
+          "icon": "fa-brands fa-slack",
           "desc": "Chat with other project developers"
         },
         {

diff --git a/userguide/content/en/docs/adding-content/navigation.md b/userguide/content/en/docs/adding-content/navigation.md
@@ -21,7 +21,7 @@ linkTitle = "Documentation"
 
 [menu.main]
 weight = 20
-pre = "<i class='fas fa-book'></i>"
+pre = "<i class='fa-solid fa-book'></i>"
 +++
 {{< /tab >}}
 {{< tab header="yaml" lang="yaml" >}}
@@ -31,7 +31,7 @@ linkTitle: "Documentation"
 menu:
   main:
     weight: 20
-    pre: <i class='fas fa-book'></i>
+    pre: <i class='fa-solid fa-book'></i>
 ---
 {{< /tab >}}
 {{< tab header="json" lang="json" >}}
@@ -41,7 +41,7 @@ menu:
   "menu": {
     "main": {
       "weight": 20,
-      "pre": "<i class='fas fa-book'></i>"
+      "pre": "<i class='fa-solid fa-book'></i>"
     }
   }
 }
@@ -93,7 +93,7 @@ As described in the [Hugo docs](https://gohugo.io/content-management/menus/#add-
     name = "GitHub"
     weight = 50
     url = "https://github.com/google/docsy/"
-    pre = "<i class='fab fa-github'></i>"
+    pre = "<i class="fa-brands fa-github"></i>"
     post = "<span class='alert'>New!</span>"
 {{< /tab >}}
 {{< tab header="config.yaml" lang="yaml" >}}
@@ -102,7 +102,7 @@ menu:
     - name: GitHub
       weight: 50
       url: 'https://github.com/google/docsy/'
-      pre: <i class='fab fa-github'></i>
+      pre: <i class="fa-brands fa-github"></i>
       post: <span class='alert'>New!</span>
 {{< /tab >}}
 {{< tab header="config.json" lang="json" >}}
@@ -113,7 +113,7 @@ menu:
         "name": "GitHub",
         "weight": 50,
         "url": "https://github.com/google/docsy/",
-        "pre": "<i class='fab fa-github'></i>",
+        "pre": "<i class="fa-brands fa-github"></i>",
         "post": "<span class='alert'>New!</span>"
       }
     ]
@@ -227,7 +227,7 @@ On large sites (default: > 2000 pages) the section menu is not generated for eac
 
 ### Add icons to the section menu
 
-You can add icons to the section menu in the sidebar by setting the `icon` parameter in the page front matter (e.g. `icon: fas fa-tools`).
+You can add icons to the section menu in the sidebar by setting the `icon` parameter in the page front matter (e.g. `icon: fa-solid fa-screwdriver-wrench`).
 
 You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default.