cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: theme switch web component

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-27 13:47:04 -08:00
parent d4dda8061e
commit d2f00d4ca0
No known key found for this signature in database
6 changed files with 82 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/_includes/base.liquid
View file

@ -13,9 +13,7 @@
<meta property="og:url" content="{{ fullUrl }}" />
<meta
property="og:image"
content="{%- if schema == 'blog' %}{{ meta.url }}/assets/img/social-preview/{{
title | slugify
}}-preview.jpeg{%- else -%}{{ meta.meta_data.opengraph_default }}{% endif -%}"
content="{%- if schema == 'blog' %}{{ meta.url }}/assets/img/social-preview/{{ title | slugify }}-preview.jpeg{%- else -%}{{ meta.meta_data.opengraph_default }}{% endif -%}"
/>
<meta property="og:image" content="{{ image | getPostImage }}">
<meta name="theme-color" content="{{ meta.themeColor }}" />
@ -82,28 +80,10 @@
</script>
{% endif %}
<script defer data-domain="coryd.dev" src="/js/script.js"></script>
<script>
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
</script>
<script>window.plausible = window.plausible || function() {(window.plausible.q = window.plausible.q || []).push(arguments)}</script>
<noscript>
<style>
.client-side {
display: none
}
</style>
<style>.client-side {display:none}</style>
</noscript>
</head>
<body>
{% capture theme %}
{% render "../assets/scripts/theme.js" %}
{% endcapture %}
<script>{{ theme }}</script>
{{ content }}
{% capture js %}
{% render "../assets/scripts/theme-handler.js" %}
{% endcapture %}
<script>
{{ js }}
</script>
</body>
<body>{{ content }}</body>
</html>

26
src/_includes/partials/nav/theme.liquid
View file

@ -1,11 +1,17 @@
<li class="theme__toggle client-side">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>
<span class="dark">
{% tablericon "moon" "Toggle dark theme" %}
</span>
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
<template id="theme-toggle-template">
<div class="theme__toggle">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>
<span class="dark">
{% tablericon "moon" "Toggle dark theme" %}
</span>
</div>
</template>
<li class="client-side">
<theme-toggle></theme-toggle>
</li>