Skip to content

Commit

Permalink
Update Theme Toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@radito
radito committed Apr 3, 2024
1 parent 96eb5c5 commit 89ab08f
Showing 1 changed file with 139 additions and 129 deletions.
268 changes: 139 additions & 129 deletions layouts/_default/single.html
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,158 @@
{{- define "main" }}
<link rel="preload" href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.css" as="style" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.css" />

<link href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.js" rel="preload" as="script">
<script defer src="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.js"></script>

<script type="application/ld+json" class="reviews-schema" data-ref="{{ md5 .Page.Title }}"> {
"@context": "http://schema.org",
"@type": "Product",
"name": "Embed Social",
"aggregateRating":
{
"@type": "AggregateRating",
"ratingValue": "5",
"reviewCount": "100"
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.css"
as="style"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.css"
/>

<link
href="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.js"
rel="preload"
as="script"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/viewerjs@latest/dist/viewer.min.js"
></script>

<script
type="application/ld+json"
class="reviews-schema"
data-ref="{{ md5 .Page.Title }}"
>
{
"@context": "http://schema.org",
"@type": "Product",
"name": "Embed Social",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"reviewCount": "100"
}
} </script>
}
</script>

<article class="post-single">
<header class="post-header">
{{ partial "breadcrumbs.html" . }}
<h1 class="post-title">
{{ .Title }}
{{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
</h1>
{{- if .Description }}
<div class="post-description">
{{ .Description }}
</div>
{{- end }}
{{- if not (.Param "hideMeta") }}
<div class="post-meta">
{{- partial "post_meta.html" . -}}
{{- partial "translation_list.html" . -}}
{{- partial "edit_post.html" . -}}
{{- partial "post_canonical.html" . -}}
</div>
{{- end }}
</header>
{{- $isHidden := .Params.cover.hidden | default site.Params.cover.hiddenInSingle | default site.Params.cover.hidden
}}
{{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }}
{{- if (.Param "ShowToc") }}
{{- partial "toc.html" . }}
{{- end }}

{{- if .Content }}
<div class="post-content">
{{- if not (.Param "disableAnchoredHeadings") }}
{{- partial "anchored_headings.html" .Content -}}
{{- else }}{{ .Content }}{{ end }}
<header class="post-header">
{{ partial "breadcrumbs.html" . }}
<h1 class="post-title">
{{ .Title }} {{- if .Draft }}<sup
><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup
>{{- end }}
</h1>
{{- if .Description }}
<div class="post-description">{{ .Description }}</div>
{{- end }} {{- if not (.Param "hideMeta") }}
<div class="post-meta">
{{- partial "post_meta.html" . -}} {{- partial "translation_list.html" .
-}} {{- partial "edit_post.html" . -}} {{- partial "post_canonical.html" .
-}}
</div>
{{- end }}
</header>
{{- $isHidden := .Params.cover.hidden | default
site.Params.cover.hiddenInSingle | default site.Params.cover.hidden }} {{-
partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }} {{-
if (.Param "ShowToc") }} {{- partial "toc.html" . }} {{- end }} {{- if
.Content }}
<div class="post-content">
{{- if not (.Param "disableAnchoredHeadings") }} {{- partial
"anchored_headings.html" .Content -}} {{- else }}{{ .Content }}{{ end }}
</div>
{{- end }}

<footer class="post-footer">
<div id="comments" class="thin">
<script
src="https://utteranc.es/client.js"
repo="radito/radito.github.io"
issue-term="Blog Post - {{ .Page.Title }}"
theme="github-light"
crossorigin="anonymous"
async
></script>
</div>

<footer class="post-footer">

<div id="comments" class="thin">
<script src="https://utteranc.es/client.js" repo="radito/radito.github.io"
issue-term="Blog Post - {{ .Page.Title }}" theme="github-light" crossorigin="anonymous" async></script>
</div>

{{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
<ul class="post-tags">
{{- range ($.GetTerms $tags) }}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
{{- if (.Param "ShowPostNavLinks") }}
{{- partial "post_nav_links.html" . }}
{{- end }}
{{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
{{- partial "share_icons.html" . -}}
{{- end }}
</footer>

{{- if (.Param "comments") }}
{{- partial "comments.html" . }}
{{- end }}
{{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
<ul class="post-tags">
{{- range ($.GetTerms $tags) }}
<li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
{{- if (.Param "ShowPostNavLinks") }} {{- partial "post_nav_links.html" . }}
{{- end }} {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare
true)) }} {{- partial "share_icons.html" . -}} {{- end }}
</footer>

{{- if (.Param "comments") }} {{- partial "comments.html" . }} {{- end }}
</article>

<script>
window.onload = async () => {
await new Promise(r => setTimeout(r, 100));
const choosedTheme = localStorage.getItem("pref-theme");
window.addEventListener("load", function () {
document.querySelectorAll("img").forEach((v, i) => {
const view = new Viewer(v, {
movable: false,
navbar: false,
toolbar: false,
focus: true,
transition: false,
});

v.addEventListener("show", function () {
document.getElementsByTagName("html")[0].style.overflow = "hidden";
});

v.addEventListener("hide", function () {
document.getElementsByTagName("html")[0].style.overflow = "scroll";
});
});
});

document
.getElementById("theme-toggle")
.addEventListener("click", async () => {
const choosedTheme = localStorage.getItem("pref-theme");

setSyntaxMode(choosedTheme);
const utterances = document.querySelector(".utterances-frame");
let utterancesUrl = new URL(utterances.getAttribute("src"));
const utterances = document.querySelector(".utterances-frame");
let utterancesUrl = new URL(utterances.getAttribute("src"));

if (!choosedTheme) {
utterancesUrl.searchParams.set('theme', 'github-light');
} else if (choosedTheme == "light") {
utterancesUrl.searchParams.set('theme', 'github-light');
} else {
utterancesUrl.searchParams.set('theme', 'github-dark');
}
if (choosedTheme == "light") {
setSyntaxMode("dark");
utterancesUrl.searchParams.set("theme", "github-dark");
document.documentElement.classList.remove("c_darkmode");
} else {
setSyntaxMode("light");
utterancesUrl.searchParams.set("theme", "github-light");

utterances.setAttribute("src", utterancesUrl.toString());
}
document.documentElement.classList.remove("c_darkmode");
document.documentElement.classList.add("c_darkmode");
}

window.addEventListener('load', function () {
document.querySelectorAll('img').forEach((v, i) => {
const view = new Viewer(v, {
movable: false,
navbar: false,
toolbar: false,
focus: true,
transition: false
});

v.addEventListener("show", function () {
document.getElementsByTagName('html')[0].style.overflow = "hidden";
});

v.addEventListener("hide", function () {
document.getElementsByTagName('html')[0].style.overflow = "scroll";
});
});

document.getElementById("theme-toggle").addEventListener("click", async () => {
await new Promise(r => setTimeout(r, 100));

const choosedTheme = localStorage.getItem("pref-theme");

const utterances = document.querySelector(".utterances-frame");
let utterancesUrl = new URL(utterances.getAttribute("src"));

if (choosedTheme == "light") {
setSyntaxMode("light");
utterancesUrl.searchParams.set('theme', 'github-light');
document.documentElement.classList.remove('c_darkmode');
} else {
setSyntaxMode("dark");
utterancesUrl.searchParams.set('theme', 'github-dark');

document.documentElement.classList.remove('c_darkmode');
document.documentElement.classList.add('c_darkmode');
}

utterances.setAttribute("src", utterancesUrl.toString());
});
utterances.setAttribute("src", utterancesUrl.toString());
});

window.onload = async () => {
const choosedTheme = localStorage.getItem("pref-theme");

setSyntaxMode(choosedTheme);
const utterances = document.querySelector(".utterances-frame");
let utterancesUrl = new URL(utterances.getAttribute("src"));

if (!choosedTheme) {
utterancesUrl.searchParams.set("theme", "github-light");
} else if (choosedTheme == "light") {
utterancesUrl.searchParams.set("theme", "github-light");
} else {
utterancesUrl.searchParams.set("theme", "github-dark");
}

await new Promise((r) => setTimeout(r, 1000));
utterances.setAttribute("src", utterancesUrl.toString());
};
</script>

{{- end }}{{/* end main */}}
{{- end }}{{/* end main */}}

0 comments on commit 89ab08f

Please sign in to comment.