github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 14:00:42 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
BREAKING CHANGE: The class `.icon` was renamed to `.gblog-icon` to avoid conflicts.
This commit is contained in:
Robert Kaussow 2022-04-30 13:36:39 +02:00 committed by GitHub
parent f0ca894b74
commit 3ccc8918bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
exampleSite/layouts/shortcodes/sprites.html
View File

@ -1,12 +1,12 @@
<div class="flex flex-wrap justify-center"> <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 flex-grid icon-grid">
<div class="flex align-center justify-center icon-grid__line"> <div class="flex align-center justify-center icon-grid__line">
<svg class="icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg> <svg class="gblog-icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg>
</div> </div>
<div class="flex align-center justify-center icon-grid__line icon-grid__line--text"> <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
<span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span> <span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span>
</div> </div>
</div> </div>
{{ end }} {{ end }}
</div> </div>

2
exampleSite/static/custom.css
View File

@ -14,7 +14,7 @@
height: 4rem; height: 4rem;
} }
.icon-grid__line .icon { .icon-grid__line svg.gblog-icon {
font-size: 3em; font-size: 3em;
} }

2
layouts/404.html
View File

@ -19,7 +19,7 @@
<main class="gblog-error flex-even"> <main class="gblog-error flex-even">
<div class="flex align-center justify-center"> <div class="flex align-center justify-center">
<div class="gblog-error__icon"> <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>
<div class="gblog-error__message"> <div class="gblog-error__message">
<div class="gblog-error__line gblog-error__title">Lost?</div> <div class="gblog-error__line gblog-error__title">Lost?</div>

2
layouts/_default/_markup/render-heading.html
View File

@ -8,7 +8,7 @@
{{ .Text | safeHTML }} {{ .Text | safeHTML }}
</h{{ .Level }}> </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 }}"> <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> </a>
</div> </div>
{{- else -}} {{- else -}}

4
layouts/_default/terms.html
View File

@ -11,7 +11,7 @@
<footer class="gblog-post__meta flex align-center"> <footer class="gblog-post__meta flex align-center">
<span class="flex align-center no-wrap"> <span class="flex align-center no-wrap">
{{ $pageCount := len .Pages }} {{ $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"> <span class="gblog-post__tag">
{{ $pageCount }} {{ $pageCount }}
post{{ if ne $pageCount 1 }}s{{ end }} post{{ if ne $pageCount 1 }}s{{ end }}
@ -19,7 +19,7 @@
</span> </span>
<span class="flex align-center no-wrap"> <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> <span>
{{ $latet := index .Pages.ByDate 0 }} {{ $latet := index .Pages.ByDate 0 }}
{{ with $latet }} {{ with $latet }}

4
layouts/partials/menu-extra.html
View File

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

10
layouts/partials/metadata.html
View File

@ -1,5 +1,5 @@
<span class="flex align-center no-wrap"> <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"> <span class="gblog-post__tag">
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}"> <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if .Lastmod.After (.Date.AddDate 0 0 1) }} {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
@ -11,13 +11,13 @@
</span> </span>
<span class="flex align-center no-wrap"> <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 class="gblog-post__tag">{{ .ReadingTime }} min read</span>
</span> </span>
{{ if eq .Params.weight 1 }} {{ if eq .Params.weight 1 }}
<span class="flex align-center no-wrap"> <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 class="gblog-post__tag">Pinned</span>
</span> </span>
{{ end }} {{ end }}
@ -29,7 +29,7 @@
{{ with $.Site.GetPage (printf "/authors/%s" . | urlize) }} {{ with $.Site.GetPage (printf "/authors/%s" . | urlize) }}
{{ if eq $ac 0 }} {{ if eq $ac 0 }}
<span class="flex align-center no-wrap"> <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" . }} {{ template "post-author" dict "name" $author.name "page" . }}
</span> </span>
{{ else }} {{ else }}
@ -49,7 +49,7 @@
{{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }} {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
{{ if eq $tc 0 }} {{ if eq $tc 0 }}
<span class="flex align-center no-wrap"> <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" . }} {{ template "post-tag" dict "name" $name "page" . }}
</span> </span>
{{ else }} {{ else }}

6
layouts/partials/site-footer.html
View File

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

10
layouts/partials/site-header.html
View File

@ -18,15 +18,15 @@
</div> </div>
<div class="gblog-header__col-3 flex justify-end"> <div class="gblog-header__col-3 flex justify-end">
<span id="gblog-dark-mode"> <span id="gblog-dark-mode">
<svg class="icon gblog_brightness_dark"> <svg class="gblog-icon gblog_brightness_dark">
<title>{{ i18n "button_toggle_dark" }}</title> <title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_dark"></use> <use xlink:href="#gblog_brightness_dark"></use>
</svg> </svg>
<svg class="icon gblog_brightness_light"> <svg class="gblog-icon gblog_brightness_light">
<title>{{ i18n "button_toggle_dark" }}</title> <title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_light"></use> <use xlink:href="#gblog_brightness_light"></use>
</svg> </svg>
<svg class="icon gblog_brightness_auto"> <svg class="gblog-icon gblog_brightness_auto">
<title>{{ i18n "button_toggle_dark" }}</title> <title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_auto"></use> <use xlink:href="#gblog_brightness_auto"></use>
</svg> </svg>
@ -38,8 +38,8 @@
<input type="checkbox" id="menu-control" class="hidden" /> <input type="checkbox" id="menu-control" class="hidden" />
<div class="gblog-nav__control"> <div class="gblog-nav__control">
<label for="menu-control" class="flex align-center justify-center"> <label for="menu-control" class="flex align-center justify-center">
<svg class="icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg> <svg class="gblog-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_clear"><use xlink:href="#gblog_clear"></use></svg>
<span>Navigation</span> <span>Navigation</span>
</label> </label>
</div> </div>

2
layouts/shortcodes/icon.html
View File

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

8
src/js/app.js
View File

@ -14,13 +14,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
if (trigger.hasAttribute("data-copy-feedback")) { if (trigger.hasAttribute("data-copy-feedback")) {
trigger.classList.add("gblog-post__codecopy--success") trigger.classList.add("gblog-post__codecopy--success")
trigger.querySelector(".icon.copy").classList.add("hidden") trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
trigger.querySelector(".icon.check").classList.remove("hidden") trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
setTimeout(function () { setTimeout(function () {
trigger.classList.remove("gblog-post__codecopy--success") trigger.classList.remove("gblog-post__codecopy--success")
trigger.querySelector(".icon.copy").classList.remove("hidden") trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
trigger.querySelector(".icon.check").classList.add("hidden") trigger.querySelector(".gblog-icon.check").classList.add("hidden")
}, 3000) }, 3000)
} }

4
src/js/copycode.js
View File

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

24
src/sass/_base.scss
View File

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

6
src/sass/_mobile.scss
View File

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