refactor: rename class .icon to .gdoc-icon (#379)

BREAKING CHANGE: The class `.icon` was renamed to `.gdoc-icon` to avoid conflicts.

exampleSite/layouts/shortcodes/sprites.html

@@ -2,7 +2,7 @@
   {{ range $key, $value := .Site.Data.sprites.geekdoc }}
     <div class="flex flex-grid icon-grid">
       <div class="flex align-center justify-center icon-grid__line">
-        <svg class="icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg>
+        <svg class="gdoc-icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg>
       </div>
       <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
         <span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span>

i18n/de.yaml

@@ -36,7 +36,7 @@ posts_tagged_with: Alle Artikel mit dem Tag '{{ . }}'
 
 footer_build_with: >
   Entwickelt mit <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> und
-  <svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
+  <svg class="gdoc-icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
 footer_legal_notice: Impressum
 footer_privacy_policy: Datenschutzerklärung
 footer_content_license_prefix: >

i18n/en.yaml

@@ -36,7 +36,7 @@ posts_tagged_with: All posts tagged with '{{ . }}'
 
 footer_build_with: >
   Built with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
-  <svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
+  <svg class="gdoc-icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
 footer_legal_notice: Legal Notice
 footer_privacy_policy: Privacy Policy
 footer_content_license_prefix: >

i18n/zh-cn.yaml

@@ -35,9 +35,9 @@ posts_count:
 posts_tagged_with: 所有带有“{{ . }}”标签的帖子。
 
 footer_build_with: >
-  基于 <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> 
-  <svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg> 制作
-  
+  基于 <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a>
+  <svg class="gdoc-icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg> 制作
+
 footer_legal_notice: "法律声明"
 footer_privacy_policy: "隐私政策"
 footer_content_license_prefix: >

layouts/404.html

@@ -21,7 +21,7 @@
       <main class="gdoc-error flex-even">
         <div class="flex align-center justify-center">
           <div class="gdoc-error__icon">
-            <svg class="icon gdoc_cloud_off"><use xlink:href="#gdoc_cloud_off"></use></svg>
+            <svg class="gdoc-icon gdoc_cloud_off"><use xlink:href="#gdoc_cloud_off"></use></svg>
           </div>
           <div class="gdoc-error__message">
             <div class="gdoc-error__line gdoc-error__title">{{ i18n "error_message_title" }}</div>

layouts/_default/_markup/render-heading.html

@@ -7,7 +7,7 @@
     <h{{ .Level }} id="{{ .Anchor | safeURL }}">
         {{ .Text | safeHTML }}
         <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
-            <svg class="icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
+            <svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
         </a>
     </h{{ .Level }}>
 </div>

layouts/_default/terms.html

@@ -10,14 +10,14 @@
       <footer class="gdoc-post__meta flex align-center">
         <span class="flex align-center no-wrap">
           {{ $pageCount := len .Pages }}
-          <svg class="icon gdoc_tag"><use xlink:href="#gdoc_tag"></use></svg>
+          <svg class="gdoc-icon gdoc_tag"><use xlink:href="#gdoc_tag"></use></svg>
           <span class="gdoc-post__tag">
             {{ i18n "posts_count" $pageCount }}
           </span>
         </span>
 
         <span class="flex align-center no-wrap">
-          <svg class="icon gdoc_star"><use xlink:href="#gdoc_star"></use></svg>
+          <svg class="gdoc-icon gdoc_star"><use xlink:href="#gdoc_star"></use></svg>
           <span>
             {{ $latet := index .Pages.ByDate 0 }}
             {{ with $latet }}

layouts/partials/language.html

@@ -5,7 +5,7 @@
         {{ range .Site.Languages }}
           {{ if eq . $.Site.Language }}
             <span class="flex align-center">
-              <svg class="icon gdoc_language"><use xlink:href="#gdoc_language"></use></svg>
+              <svg class="gdoc-icon gdoc_language"><use xlink:href="#gdoc_language"></use></svg>
               <span>{{ .Lang | upper }}</span>
             </span>
           {{ end }}

layouts/partials/menu-bundle.html

@@ -44,7 +44,7 @@
           >
             <span class="flex">
               {{ if $icon }}
-                <svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
+                <svg class="gdoc-icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
               {{ end }}
               <a
                 href="{{ if .external }}
@@ -60,10 +60,10 @@
               </a>
             </span>
             {{ if $doCollapse }}
-              <svg class="icon toggle gdoc_keyboard_arrow_left">
+              <svg class="gdoc-icon toggle gdoc_keyboard_arrow_left">
                 <use xlink:href="#gdoc_keyboard_arrow_left"></use>
               </svg>
-              <svg class="icon toggle gdoc_keyboard_arrow_down hidden">
+              <svg class="gdoc-icon toggle gdoc_keyboard_arrow_down hidden">
                 <use xlink:href="#gdoc_keyboard_arrow_down"></use>
               </svg>
             {{ end }}

layouts/partials/menu-extra.html

@@ -34,7 +34,7 @@
             {{ end }}"
             class="gdoc-header__link"
           >
-            <svg class="icon {{ .icon }}">
+            <svg class="gdoc-icon {{ .icon }}">
               <title>{{ $name }}</title>
               <use xlink:href="#{{ .icon }}"></use>
             </svg>

layouts/partials/menu-filetree.html

@@ -79,10 +79,10 @@
                 <span class="flex">{{ partial "utils/title" . }}</span>
               {{ end }}
               {{ if $doCollapse }}
-                <svg class="icon toggle gdoc_keyboard_arrow_left">
+                <svg class="gdoc-icon toggle gdoc_keyboard_arrow_left">
                   <use xlink:href="#gdoc_keyboard_arrow_left"></use>
                 </svg>
-                <svg class="icon toggle gdoc_keyboard_arrow_down">
+                <svg class="gdoc-icon toggle gdoc_keyboard_arrow_down">
                   <use xlink:href="#gdoc_keyboard_arrow_down"></use>
                 </svg>
               {{ end }}

layouts/partials/page-header.html

@@ -33,7 +33,7 @@
 >
   {{ if $showBreadcrumb }}
     <div>
-      <svg class="icon gdoc_path hidden-mobile"><use xlink:href="#gdoc_path"></use></svg>
+      <svg class="gdoc-icon gdoc_path hidden-mobile"><use xlink:href="#gdoc_path"></use></svg>
       <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
         {{ $position := sub (len (split .RelPermalink "/")) 1 }}
         {{ $name := (partial "utils/title" .) }}
@@ -45,7 +45,7 @@
   {{ if $showEdit }}
     <div>
       <span class="editpage">
-        <svg class="icon gdoc_code"><use xlink:href="#gdoc_code"></use></svg>
+        <svg class="gdoc-icon gdoc_code"><use xlink:href="#gdoc_code"></use></svg>
         <a
           href="{{ $geekdocRepo }}/{{ path.Join $geekdocEditPath ($.Scratch.Get "geekdocFilePath") }}"
         >

layouts/partials/posts/metadata.html

@@ -1,5 +1,5 @@
 <span class="flex align-center no-wrap">
-  <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
+  <svg class="gdoc-icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
   <span class="gdoc-post__tag">
     <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
       {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
@@ -11,7 +11,7 @@
 </span>
 
 <span class="flex align-center no-wrap">
-  <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
+  <svg class="gdoc-icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
   <span class="gdoc-post__tag">{{ i18n "posts_read_time" .ReadingTime }}</span>
 </span>
 
@@ -22,7 +22,7 @@
     {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
       {{ if eq $tc 0 }}
         <span class="flex align-center no-wrap">
-          <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
+          <svg class="gdoc-icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
           {{ template "post-tag" dict "name" $name "page" . }}
         </span>
       {{ else }}

layouts/partials/search.html

@@ -1,6 +1,6 @@
 {{ if default true .Site.Params.GeekdocSearch }}
   <div class="gdoc-search">
-    <svg class="icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg>
+    <svg class="gdoc-icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg>
     <input
       type="text"
       id="gdoc-search-input"

layouts/partials/site-footer.html

@@ -33,7 +33,7 @@
       <div class="flex flex-25 justify-end">
         <span class="gdoc-footer__item text-right">
           <a class="gdoc-footer__link fake-link" href="#" aria-label="{{ i18n "nav_top" }}">
-            <svg class="icon gdoc_keyboard_arrow_up">
+            <svg class="gdoc-icon gdoc_keyboard_arrow_up">
               <use xlink:href="#gdoc_keyboard_arrow_up"></use>
             </svg>
             <span class="hidden-mobile">{{ i18n "nav_top" }}</span>

layouts/partials/site-header.html

@@ -2,11 +2,11 @@
   <div class="container flex align-center justify-between">
     {{ if .MenuEnabled }}
       <label for="menu-control" class="gdoc-nav__control" tabindex="0">
-        <svg class="icon gdoc_menu">
+        <svg class="gdoc-icon gdoc_menu">
           <title>{{ i18n "button_nav_open" }}</title>
           <use xlink:href="#gdoc_menu"></use>
         </svg>
-        <svg class="icon gdoc_arrow_back">
+        <svg class="gdoc-icon gdoc_arrow_back">
           <title>{{ i18n "button_nav_close" }}</title>
           <use xlink:href="#gdoc_arrow_back"></use>
         </svg>
@@ -32,15 +32,15 @@
 
 
         <span id="gdoc-dark-mode">
-          <svg class="icon gdoc_brightness_dark">
+          <svg class="gdoc-icon gdoc_brightness_dark">
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_dark"></use>
           </svg>
-          <svg class="icon gdoc_brightness_light">
+          <svg class="gdoc-icon gdoc_brightness_light">
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_light"></use>
           </svg>
-          <svg class="icon gdoc_brightness_auto">
+          <svg class="gdoc-icon gdoc_brightness_auto">
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_auto"></use>
           </svg>
@@ -48,7 +48,7 @@
 
         <span class="gdoc-menu-header__home">
           <a href="{{ .Root.Site.BaseURL }}" class="gdoc-header__link">
-            <svg class="icon gdoc_home">
+            <svg class="gdoc-icon gdoc_home">
               <title>{{ i18n "button_homepage" }}</title>
               <use xlink:href="#gdoc_home"></use>
             </svg>
@@ -60,7 +60,7 @@
 
         <span class="gdoc-menu-header__control">
           <label for="menu-header-control">
-            <svg class="icon gdoc_keyboard_arrow_right">
+            <svg class="gdoc-icon gdoc_keyboard_arrow_right">
               <use xlink:href="#gdoc_keyboard_arrow_right"></use>
               <title>{{ i18n "button_menu_close" }}</title>
             </svg>
@@ -68,7 +68,7 @@
         </span>
       </span>
       <label for="menu-header-control" class="gdoc-menu-header__control">
-        <svg class="icon gdoc_keyboard_arrow_left">
+        <svg class="gdoc-icon gdoc_keyboard_arrow_left">
           <use xlink:href="#gdoc_keyboard_arrow_left"></use>
           <title>{{ i18n "button_menu_open" }}</title>
         </svg>

layouts/shortcodes/icon.html

@@ -1,5 +1,5 @@
 {{ $id := .Get 0 }}
 
 {{- with $id -}}
-  <svg class="icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
+  <svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
 {{- end -}}

src/js/copycode.js

@@ -11,8 +11,8 @@ export function createCopyButton(highlightDiv) {
   button.classList.add("flex", "align-center", "justify-center", "clip", "gdoc-post__codecopy")
   button.type = "button"
   button.innerHTML =
-    '<svg class="icon copy"><use xlink:href="#gdoc_copy"></use></svg>' +
-    '<svg class="icon check hidden"><use xlink:href="#gdoc_check"></use></svg>'
+    '<svg class="gdoc-icon copy"><use xlink:href="#gdoc_copy"></use></svg>' +
+    '<svg class="gdoc-icon check hidden"><use xlink:href="#gdoc_check"></use></svg>'
   button.setAttribute("data-clipboard-text", codeToCopy)
   button.setAttribute("data-copy-feedback", "Copied!")
   button.setAttribute("role", "button")

src/sass/_base.scss

@@ -161,7 +161,7 @@ img {
   padding: $padding-16;
 }
 
-.icon {
+svg.gdoc-icon {
   display: inline-block;
   width: 1.3em;
   height: 1.3em;
@@ -186,7 +186,7 @@ img {
     text-decoration: none;
   }
 
-  .icon {
+  svg.gdoc-icon {
     width: $font-size-32;
     height: $font-size-32;
   }
@@ -216,7 +216,7 @@ img {
   &__home {
     display: none;
 
-    .icon {
+    svg.gdoc-icon {
       cursor: pointer;
     }
   }
@@ -249,15 +249,15 @@ img {
     margin: 0;
     padding: 0;
 
-    .icon {
+    svg.gdoc-icon {
       cursor: pointer;
     }
 
-    .icon.gdoc_menu {
+    svg.gdoc-icon.gdoc_menu {
       display: inline-block;
     }
 
-    .icon.gdoc_arrow_back {
+    svg.gdoc-icon.gdoc_arrow_back {
       display: none;
     }
   }
@@ -277,7 +277,7 @@ img {
       margin: $padding-8 0;
     }
 
-    .icon {
+    svg.gdoc-icon {
       margin-right: $padding-4;
     }
   }
@@ -288,28 +288,28 @@ img {
     & ~ label {
       cursor: pointer;
 
-      .icon.toggle {
+      svg.gdoc-icon.toggle {
         font-size: $font-size-12;
       }
     }
 
     &:not(:checked) {
       & ~ ul,
-      & ~ label .icon.gdoc_keyboard_arrow_down {
+      & ~ label svg.gdoc-icon.gdoc_keyboard_arrow_down {
         display: none;
       }
-      & ~ label .icon.gdoc_keyboard_arrow_left {
+      & ~ label svg.gdoc-icon.gdoc_keyboard_arrow_left {
         display: block;
       }
     }
 
     &:checked {
       & ~ ul,
-      & ~ label .icon.gdoc_keyboard_arrow_down {
+      & ~ label svg.gdoc-icon.gdoc_keyboard_arrow_down {
         display: block;
       }
 
-      & ~ label .icon.gdoc_keyboard_arrow_left {
+      & ~ label svg.gdoc-icon.gdoc_keyboard_arrow_left {
         display: none;
       }
     }
@@ -371,7 +371,7 @@ img {
   &__footer {
     margin-bottom: $padding-16 * 1.2;
 
-    .icon {
+    svg.gdoc-icon {
       color: var(--control-icons);
     }
 
@@ -397,7 +397,7 @@ img {
   }
 
   &__anchorwrap {
-    &:hover .gdoc-page__anchor .icon {
+    &:hover .gdoc-page__anchor svg.gdoc-icon {
       color: var(--control-icons);
     }
   }
@@ -415,7 +415,7 @@ img {
       text-align: right;
     }
 
-    .icon {
+    svg.gdoc-icon {
       width: 1.4rem;
       height: 1.4rem;
       color: transparent;
@@ -478,7 +478,7 @@ img {
   }
 
   &__meta {
-    span .icon {
+    span svg.gdoc-icon {
       margin-left: -5px;
     }
 
@@ -489,7 +489,7 @@ img {
       }
     }
 
-    .icon {
+    svg.gdoc-icon {
       font-size: 1.2em;
     }
 
@@ -522,7 +522,7 @@ img {
     width: 2.2rem;
     height: 2.2rem;
 
-    .icon {
+    svg.gdoc-icon {
       top: 0;
       width: $font-size-20;
       height: $font-size-20;
@@ -536,7 +536,7 @@ img {
     &--success {
       border-color: var(--code-copy-success-color);
 
-      .icon {
+      svg.gdoc-icon {
         color: var(--code-copy-success-color);
       }
     }
@@ -571,7 +571,7 @@ img {
 .gdoc-search {
   position: relative;
 
-  .icon {
+  svg.gdoc-icon {
     position: absolute;
     top: 0.625em;
     left: $padding-16 * 0.5;
@@ -641,7 +641,7 @@ img {
       margin-top: $padding-8;
     }
 
-    .icon {
+    svg.gdoc-icon {
       margin-right: $padding-4;
     }
   }
@@ -684,7 +684,7 @@ img {
   margin: 0 auto;
   max-width: 45em;
 
-  .icon {
+  svg.gdoc-icon {
     width: $font-size-128;
     height: $font-size-128;
     color: var(--body-font-color);

src/sass/_mobile.scss

@@ -9,7 +9,7 @@
   }
 
   .gdoc-header {
-    .icon {
+    svg.gdoc-icon {
       width: $font-size-24;
       height: $font-size-24;
     }
@@ -38,7 +38,7 @@
   .gdoc-error {
     padding: $padding-16 * 6 $padding-16;
 
-    .icon {
+    svg.gdoc-icon {
       width: $font-size-96;
       height: $font-size-96;
     }
@@ -77,11 +77,11 @@
   }
 
   #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
-    .icon.gdoc_menu {
+    svg.gdoc-icon.gdoc_menu {
       display: none;
     }
 
-    .icon.gdoc_arrow_back {
+    svg.gdoc-icon.gdoc_arrow_back {
       display: inline-block;
     }
   }
@@ -97,7 +97,7 @@
       }
 
       &__control {
-        .icon.gdoc_keyboard_arrow_left {
+        svg.gdoc-icon.gdoc_keyboard_arrow_left {
           display: none;
         }
       }