refactor: rename class .icon to .gblog-icon (#232)

BREAKING CHANGE: The class `.icon` was renamed to `.gblog-icon` to avoid conflicts.
thegeeklab · Apr 30, 2022 · 3ccc891 · 3ccc891
1 parent f0ca894
commit 3ccc891
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 50 deletions.
diff --git a/exampleSite/layouts/shortcodes/sprites.html b/exampleSite/layouts/shortcodes/sprites.html
@@ -1,12 +1,12 @@
 <div class="flex flex-wrap justify-center">
-    {{ range $key, $value := .Site.Data.sprites.geekblog }}
+  {{ range $key, $value := .Site.Data.sprites.geekblog }}
     <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>
-        </div>
-        <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
-            <span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span>
-        </div>
+      <div class="flex align-center justify-center icon-grid__line">
+        <svg class="gblog-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>
+      </div>
     </div>
-    {{ end }}
+  {{ end }}
 </div>
diff --git a/exampleSite/static/custom.css b/exampleSite/static/custom.css
@@ -14,7 +14,7 @@
   height: 4rem;
 }
 
-.icon-grid__line .icon {
+.icon-grid__line svg.gblog-icon {
   font-size: 3em;
 }
 

diff --git a/layouts/404.html b/layouts/404.html
@@ -19,7 +19,7 @@
       <main class="gblog-error flex-even">
         <div class="flex align-center justify-center">
           <div class="gblog-error__icon">
-            <svg class="icon gblog_cloud_off"><use xlink:href="#gblog_cloud_off"></use></svg>
+            <svg class="gblog-icon gblog_cloud_off"><use xlink:href="#gblog_cloud_off"></use></svg>
           </div>
           <div class="gblog-error__message">
             <div class="gblog-error__line gblog-error__title">Lost?</div>

diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -8,7 +8,7 @@
         {{ .Text | safeHTML }}
     </h{{ .Level }}>
     <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor gblog-post__anchor--right clip" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
-        <svg class="icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
+        <svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
     </a>
 </div>
 {{- else -}}

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -11,15 +11,15 @@ <h1 class="gblog-post__title">
       <footer class="gblog-post__meta flex align-center">
         <span class="flex align-center no-wrap">
           {{ $pageCount := len .Pages }}
-          <svg class="icon gblog_tag"><use xlink:href="#gblog_tag"></use></svg>
+          <svg class="gblog-icon gblog_tag"><use xlink:href="#gblog_tag"></use></svg>
           <span class="gblog-post__tag">
             {{ $pageCount }}
             post{{ if ne $pageCount 1 }}s{{ end }}
           </span>
         </span>
 
         <span class="flex align-center no-wrap">
-          <svg class="icon gblog_star"><use xlink:href="#gblog_star"></use></svg>
+          <svg class="gblog-icon gblog_star"><use xlink:href="#gblog_star"></use></svg>
           <span>
             {{ $latet := index .Pages.ByDate 0 }}
             {{ with $latet }}

diff --git a/layouts/partials/menu-extra.html b/layouts/partials/menu-extra.html
@@ -17,7 +17,7 @@
       {{ if eq $target "footer" }}
         <span class="gblog-footer__item gblog-footer__item--row">
           {{ if $icon }}
-            <svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
+            <svg class="gblog-icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
           {{ end }}
           <a
             href="{{ if .external -}}
@@ -42,7 +42,7 @@
           >
             <span class="flex align-center">
               {{ if $icon }}
-                <svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
+                <svg class="gblog-icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>
               {{ end }}
               <span>
                 {{ .name }}

diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
@@ -1,5 +1,5 @@
 <span class="flex align-center no-wrap">
-  <svg class="icon gblog_date"><use xlink:href="#gblog_date"></use></svg>
+  <svg class="gblog-icon gblog_date"><use xlink:href="#gblog_date"></use></svg>
   <span class="gblog-post__tag">
     <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
       {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
@@ -11,13 +11,13 @@
 </span>
 
 <span class="flex align-center no-wrap">
-  <svg class="icon gblog_timer"><use xlink:href="#gblog_timer"></use></svg>
+  <svg class="gblog-icon gblog_timer"><use xlink:href="#gblog_timer"></use></svg>
   <span class="gblog-post__tag">{{ .ReadingTime }} min read</span>
 </span>
 
 {{ if eq .Params.weight 1 }}
   <span class="flex align-center no-wrap">
-    <svg class="icon gblog_pin"><use xlink:href="#gblog_pin"></use></svg>
+    <svg class="gblog-icon gblog_pin"><use xlink:href="#gblog_pin"></use></svg>
     <span class="gblog-post__tag">Pinned</span>
   </span>
 {{ end }}
@@ -29,7 +29,7 @@
     {{ with $.Site.GetPage (printf "/authors/%s" . | urlize) }}
       {{ if eq $ac 0 }}
         <span class="flex align-center no-wrap">
-          <svg class="icon gblog_person"><use xlink:href="#gblog_person"></use></svg>
+          <svg class="gblog-icon gblog_person"><use xlink:href="#gblog_person"></use></svg>
           {{ template "post-author" dict "name" $author.name "page" . }}
         </span>
       {{ else }}
@@ -49,7 +49,7 @@
     {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
       {{ if eq $tc 0 }}
         <span class="flex align-center no-wrap">
-          <svg class="icon gblog_bookmark"><use xlink:href="#gblog_bookmark"></use></svg>
+          <svg class="gblog-icon gblog_bookmark"><use xlink:href="#gblog_bookmark"></use></svg>
           {{ template "post-tag" dict "name" $name "page" . }}
         </span>
       {{ else }}

diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html
@@ -4,7 +4,7 @@
       <section class="flex flex-wrap align-center">
         {{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
           <span class="gblog-footer__item gblog-footer__item--row">
-            <svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
+            <svg class="gblog-icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
             <a href="{{ .Permalink | relURL }}" class="gblog-footer__link">Atom Feed</a>
           </span>
         {{ end }}
@@ -25,7 +25,7 @@
       <section class="flex flex-wrap align-center">
         <span class="gblog-footer__item">
           Built with <a href="https://gohugo.io/" class="gblog-footer__link">Hugo</a> and
-          <svg class="icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
+          <svg class="gblog-icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
         </span>
       </section>
       {{ with .Site.Params.GeekblogHostedOn }}
@@ -48,7 +48,7 @@
       <div class="flex flex-25 justify-end">
         <span class="gblog-footer__item text-right">
           <a class="gblog-footer__link fake-link" href="#" aria-label="Back to top">
-            <svg class="icon gblog_keyboard_arrow_up">
+            <svg class="gblog-icon gblog_keyboard_arrow_up">
               <use xlink:href="#gblog_keyboard_arrow_up"></use>
             </svg>
             <span class="hidden-mobile">Back to top</span>

diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
@@ -18,15 +18,15 @@
     </div>
     <div class="gblog-header__col-3 flex justify-end">
       <span id="gblog-dark-mode">
-        <svg class="icon gblog_brightness_dark">
+        <svg class="gblog-icon gblog_brightness_dark">
           <title>{{ i18n "button_toggle_dark" }}</title>
           <use xlink:href="#gblog_brightness_dark"></use>
         </svg>
-        <svg class="icon gblog_brightness_light">
+        <svg class="gblog-icon gblog_brightness_light">
           <title>{{ i18n "button_toggle_dark" }}</title>
           <use xlink:href="#gblog_brightness_light"></use>
         </svg>
-        <svg class="icon gblog_brightness_auto">
+        <svg class="gblog-icon gblog_brightness_auto">
           <title>{{ i18n "button_toggle_dark" }}</title>
           <use xlink:href="#gblog_brightness_auto"></use>
         </svg>
@@ -38,8 +38,8 @@
   <input type="checkbox" id="menu-control" class="hidden" />
   <div class="gblog-nav__control">
     <label for="menu-control" class="flex align-center justify-center">
-      <svg class="icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg>
-      <svg class="icon gblog_clear"><use xlink:href="#gblog_clear"></use></svg>
+      <svg class="gblog-icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg>
+      <svg class="gblog-icon gblog_clear"><use xlink:href="#gblog_clear"></use></svg>
       <span>Navigation</span>
     </label>
   </div>

diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html
@@ -1,5 +1,5 @@
 {{ $id := .Get 0 }}
 
 {{- with $id -}}
-  <svg class="icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
+  <svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
 {{- end -}}
diff --git a/src/js/app.js b/src/js/app.js
@@ -14,13 +14,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
     if (trigger.hasAttribute("data-copy-feedback")) {
       trigger.classList.add("gblog-post__codecopy--success")
-      trigger.querySelector(".icon.copy").classList.add("hidden")
-      trigger.querySelector(".icon.check").classList.remove("hidden")
+      trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
+      trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
 
       setTimeout(function () {
         trigger.classList.remove("gblog-post__codecopy--success")
-        trigger.querySelector(".icon.copy").classList.remove("hidden")
-        trigger.querySelector(".icon.check").classList.add("hidden")
+        trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
+        trigger.querySelector(".gblog-icon.check").classList.add("hidden")
       }, 3000)
     }
 

diff --git a/src/js/copycode.js b/src/js/copycode.js
@@ -11,8 +11,8 @@ export function createCopyButton(highlightDiv) {
   button.classList.add("flex", "align-center", "justify-center", "clip", "gblog-post__codecopy")
   button.type = "button"
   button.innerHTML =
-    '<svg class="icon copy"><use xlink:href="#gblog_copy"></use></svg>' +
-    '<svg class="icon check hidden"><use xlink:href="#gblog_check"></use></svg>'
+    '<svg class="gblog-icon copy"><use xlink:href="#gblog_copy"></use></svg>' +
+    '<svg class="gblog-icon check hidden"><use xlink:href="#gblog_check"></use></svg>'
   button.setAttribute("data-clipboard-text", codeToCopy)
   button.setAttribute("data-copy-feedback", "Copied!")
   button.setAttribute("role", "button")

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -144,7 +144,7 @@ img {
 #gblog-dark-mode {
   cursor: pointer;
 
-  .icon {
+  svg.gblog-icon {
     width: 2.5rem;
     height: 2.5rem;
   }
@@ -171,7 +171,7 @@ img {
   padding: $padding-16;
 }
 
-.icon {
+svg.gblog-icon {
   display: inline-block;
   width: 1.3em;
   height: 1.3em;
@@ -267,14 +267,14 @@ img {
       }
     }
 
-    .icon {
+    svg.gblog-icon {
       margin-right: $padding-4;
     }
 
-    .icon.gblog_menu {
+    svg.gblog-icon.gblog_menu {
       display: inline-block;
     }
-    .icon.gblog_clear {
+    svg.gblog-icon.gblog_clear {
       display: none;
     }
   }
@@ -325,7 +325,7 @@ img {
   }
 
   &__anchorwrap {
-    &:hover .gblog-post__anchor .icon {
+    &:hover .gblog-post__anchor svg.gblog-icon {
       color: var(--control-icons);
     }
   }
@@ -343,7 +343,7 @@ img {
       text-align: right;
     }
 
-    .icon {
+    svg.gblog-icon {
       font-size: $font-size-20;
       color: transparent;
     }
@@ -395,7 +395,7 @@ img {
   }
 
   &__meta {
-    span .icon {
+    span svg.gblog-icon {
       margin-left: -5px;
     }
 
@@ -406,7 +406,7 @@ img {
       }
     }
 
-    .icon {
+    svg.gblog-icon {
       font-size: 1.2em;
     }
 
@@ -463,7 +463,7 @@ img {
     width: 2.2rem;
     height: 2.2rem;
 
-    .icon {
+    svg.gblog-icon {
       top: 0;
       width: $font-size-20;
       height: $font-size-20;
@@ -477,7 +477,7 @@ img {
     &--success {
       border-color: var(--code-copy-success-color);
 
-      .icon {
+      svg.gblog-icon {
         color: var(--code-copy-success-color);
       }
     }
@@ -546,7 +546,7 @@ img {
   margin: 0 auto;
   max-width: 45em;
 
-  .icon {
+  svg.gblog-icon {
     font-size: $font-size-128;
     color: var(--body-font-color);
   }

diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
@@ -60,7 +60,7 @@
   .gblog-error {
     padding: $padding-16 * 6 $padding-16;
 
-    .icon {
+    svg.gblog-icon {
       font-size: $font-size-96;
     }
 
@@ -97,10 +97,10 @@
   }
 
   #menu-control:checked ~ .gblog-nav__control {
-    .icon.gblog_menu {
+    svg.gblog-icon.gblog_menu {
       display: none;
     }
-    .icon.gblog_clear {
+    svg.gblog-icon.gblog_clear {
       display: inline-block;
     }
   }