diff --git a/public/assets/js/detect-theme.js b/public/assets/js/detect-theme.js index bf46454..27e2bce 100644 --- a/public/assets/js/detect-theme.js +++ b/public/assets/js/detect-theme.js @@ -5,14 +5,13 @@ * and body markup to prevent FOUC (Flash of unstyled content). */ -const getTheme = () => { +window.theme = (() => { const local = localStorage.getItem('theme'); if (local && (local === 'dark' || local === 'light')) return local; const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; return isDark ? 'dark' : 'light'; -}; +})(); -window.theme = getTheme(); document.documentElement.setAttribute('data-theme', window.theme); /* Sync with OS theme */ diff --git a/public/assets/js/load-code-highlight.js b/public/assets/js/load-code-highlight.js new file mode 100644 index 0000000..4640734 --- /dev/null +++ b/public/assets/js/load-code-highlight.js @@ -0,0 +1,48 @@ +/** + * This script will load the properly code highlithing theme based on user theme + * It is important to insert it after detecting a user theme + * and assigning the `window.theme` property + */ + +if (window.theme) { + /* the {theme} in the path will be dynamically changed */ + const PATH = `assets/css/prism-one-{theme}.min.css`; + const $head = document.getElementsByTagName('head')[0]; + const getPath = (theme) => PATH.replace(`{theme}`, theme); + const createLink = (theme, media) => { + const $link = document.createElement('link'); + $link.rel = 'stylesheet'; + $link.type = 'text/css'; + $link.href = getPath(theme); + $link.media = media; + return $link; + }; + + /* init links to load them first */ + const $light = createLink('light', 'none'); + const $dark = createLink('dark', 'none'); + + const toggleMedia = (theme) => { + switch (theme) { + case 'light': + $light.media = 'all'; + $dark.media = 'none'; + break; + case 'dark': + $light.media = 'none'; + $dark.media = 'all'; + break; + default: + break; + } + }; + + toggleMedia(window.theme); + $head.appendChild($light); + $head.appendChild($dark); + + window.addEventListener('onthemetoggled', ({ detail: newTheme }) => toggleMedia(newTheme)); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => { + return isDark ? toggleMedia('dark') : toggleMedia('light'); + }); +} diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index 9f5723f..ad8a32c 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -1,12 +1,12 @@ -import type { Component } from 'solid-js'; +import { Component } from 'solid-js'; import { createSignal, createEffect, For } from 'solid-js'; import { search, selectedTags } from '@stores/searchStore'; +import { findArticlesBySearch, findArticlesByTags, sortArtcilesByDate } from '@utils/articles'; import { ArticleItem } from '@components/ArticleItem'; -import * as utils from '@utils/articles'; +import SearchInput from '@components/SearchInput'; +import TagsList from '@components/TagsList'; import './ArticlesList.scss'; -import SearchInput from '../SearchInput'; -import TagsList from '../TagsList'; type ArticlesListProps = { data: { @@ -39,7 +39,7 @@ const ArticlesList: Component = (props) => { * Find articles by title */ if (search()) { - filtered = utils.findArticlesBySearch(search(), filtered); + filtered = findArticlesBySearch(search(), filtered); setArticles(filtered); } @@ -47,7 +47,7 @@ const ArticlesList: Component = (props) => { * Find articles by selected tags */ if (selectedTags().length !== 0) { - filtered = utils.findArticlesByTags(selectedTags(), filtered); + filtered = findArticlesByTags(selectedTags(), filtered); setArticles(filtered); return; @@ -78,7 +78,7 @@ const ArticlesList: Component = (props) => { return (

{year}

- } /> + } />
); }} diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 6a5b9e0..842e33b 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,17 +1,18 @@ --- -import { SITE_METADATA } from '@root/config'; + import { SITE_METADATA } from '@root/config'; -export interface Props { - title?: string | undefined; - description?: string | undefined; -} + export interface Props { + title?: string | undefined; + description?: string | undefined; + } -const { title = SITE_METADATA.title, description } = Astro.props as Props; + const { title = SITE_METADATA.title, description } = Astro.props as Props; --- - + @@ -21,4 +22,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;