Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-05-31 11:16:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

enh: bootstrap 5.3 update, hljs dark mode

Browse Source
This commit is contained in:
Ben Allfree 2023-06-15 04:34:48 -07:00
parent 992b905b5d
commit 447c5f06a3
7 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/pockethost.io/src/app.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en" data-bs-theme="light">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -8,12 +8,13 @@
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
id="hljs-link"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous" crossorigin="anonymous"
/> />
@ -37,8 +38,8 @@
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
<script <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
</body> </body>

1
packages/pockethost.io/src/components/CodeSample.svelte
View File

@ -3,7 +3,6 @@
import { dbg } from '$util/logger' import { dbg } from '$util/logger'
import { Highlight } from 'svelte-highlight' import { Highlight } from 'svelte-highlight'
import { typescript, type LanguageType } from 'svelte-highlight/languages' import { typescript, type LanguageType } from 'svelte-highlight/languages'
import 'svelte-highlight/styles/github.css'
export let code: string export let code: string
export let language: LanguageType<'typescript' | 'bash'> = typescript export let language: LanguageType<'typescript' | 'bash'> = typescript

50
packages/pockethost.io/src/components/ThemeToggle.svelte
View File

@ -1,38 +1,13 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment' import { browser } from '$app/environment'
import { assertTruthy } from '@pockethost/common'
import { find } from '@s-libs/micro-dash'
import Cookies from 'js-cookie'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import {
// Set some default values to be referenced later THEME_ICONS,
enum ThemeNames { ThemeNames,
Light = 'light', currentIcon,
Dark = 'dark' getCurrentTheme,
} setCurrentTheme
const ALLOWED_THEMES: ThemeNames[] = [ThemeNames.Light, ThemeNames.Dark] } from './helpers/theme'
const DEFAULT_THEME: ThemeNames = ThemeNames.Light
const STORAGE_NAME: string = 'theme'
const THEME_ATTRIBUTE: string = 'data-theme'
const THEME_ICONS: { [_ in ThemeNames]: string } = {
[ThemeNames.Light]: 'bi bi-moon-stars',
[ThemeNames.Dark]: 'bi bi-brightness-high'
}
const html = () => {
const htmlElement = document.querySelector('html')
assertTruthy(htmlElement, `Expected <html> element to exist`)
return htmlElement
}
const currentTheme = () => {
const htmlElement = html()
const _att = htmlElement.getAttribute(THEME_ATTRIBUTE)
const currentTheme = find(ALLOWED_THEMES, (v) => _att === v) || DEFAULT_THEME
return currentTheme
}
const currentIcon = () => {
return THEME_ICONS[currentTheme()]
}
// This can change the CSS a bit depending on where the theme toggle is rendered // This can change the CSS a bit depending on where the theme toggle is rendered
export let navLink: boolean = false export let navLink: boolean = false
@ -42,25 +17,20 @@
// Wait for the DOM to be available // Wait for the DOM to be available
onMount(() => { onMount(() => {
updateTheme(currentTheme()) updateTheme(getCurrentTheme())
}) })
// Alternate the theme values on toggle click // Alternate the theme values on toggle click
const handleClick = () => { const handleClick = () => {
const newTheme = currentTheme() === ThemeNames.Light ? ThemeNames.Dark : ThemeNames.Light const newTheme = getCurrentTheme() === ThemeNames.Light ? ThemeNames.Dark : ThemeNames.Light
updateTheme(newTheme) updateTheme(newTheme)
} }
const updateTheme = (themeName: ThemeNames) => { const updateTheme = (themeName: ThemeNames) => {
const htmlElement = html()
// Update the icon class name to toggle between light and dark mode // Update the icon class name to toggle between light and dark mode
iconClass = THEME_ICONS[themeName] iconClass = THEME_ICONS[themeName]
// Update the HTML element to have the right data-theme value setCurrentTheme(themeName)
htmlElement.setAttribute(THEME_ATTRIBUTE, themeName)
Cookies.set(STORAGE_NAME, themeName)
} }
</script> </script>

13
packages/pockethost.io/src/components/helpers/Meta.svelte
View File

@ -11,19 +11,6 @@
<title>PocketHost</title> <title>PocketHost</title>
<meta name="description" content={tagline} /> <meta name="description" content={tagline} />
<script>
{
const THEME_ATTRIBUTE = 'data-theme'
const currentTheme =
document.cookie
.split('; ')
.find((row) => row.startsWith('theme='))
?.split('=')?.[1] || 'light'
document.querySelector('html')?.setAttribute(THEME_ATTRIBUTE, currentTheme)
}
</script>
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<!-- Facebook Meta Tags --> <!-- Facebook Meta Tags -->

10
packages/pockethost.io/src/components/helpers/ThemeDetector.svelte
View File

@ -1,7 +1,10 @@
<script>
</script>
<svelte:head> <svelte:head>
<script> <script>
{ {
const THEME_ATTRIBUTE = 'data-theme' const THEME_ATTRIBUTE = 'data-bs-theme'
const currentTheme = const currentTheme =
document.cookie document.cookie
.split('; ') .split('; ')
@ -9,6 +12,11 @@
?.split('=')?.[1] || 'light' ?.split('=')?.[1] || 'light'
document.querySelector('html')?.setAttribute(THEME_ATTRIBUTE, currentTheme) document.querySelector('html')?.setAttribute(THEME_ATTRIBUTE, currentTheme)
const theme = document.querySelector('#hljs-link')
if (currentTheme === 'light') {
theme.href =
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css'
}
} }
</script> </script>
</svelte:head> </svelte:head>

49
packages/pockethost.io/src/components/helpers/theme.ts Normal file
View File

@ -0,0 +1,49 @@
import { assertTruthy } from '@pockethost/common'
import { find } from '@s-libs/micro-dash'
import Cookies from 'js-cookie'
// Set some default values to be referenced later
export enum ThemeNames {
Light = 'light',
Dark = 'dark'
}
export const HLJS_THEMES = {
[ThemeNames.Light]:
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css',
[ThemeNames.Dark]:
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css'
}
export const ALLOWED_THEMES: ThemeNames[] = [ThemeNames.Light, ThemeNames.Dark]
export const DEFAULT_THEME: ThemeNames = ThemeNames.Light
export const STORAGE_NAME: string = 'theme'
export const THEME_ATTRIBUTE: string = 'data-bs-theme'
export const THEME_ICONS: { [_ in ThemeNames]: string } = {
[ThemeNames.Light]: 'bi bi-moon-stars',
[ThemeNames.Dark]: 'bi bi-brightness-high'
}
export const html = () => {
const htmlElement = document.querySelector('html')
assertTruthy(htmlElement, `Expected <html> element to exist`)
return htmlElement
}
export const getCurrentTheme = () => {
const savedTheme = Cookies.get(STORAGE_NAME)
const currentTheme = find(ALLOWED_THEMES, (v) => savedTheme === v) || DEFAULT_THEME
return currentTheme
}
export const currentIcon = () => {
return THEME_ICONS[getCurrentTheme()]
}
export const setCurrentTheme = (themeName: ThemeNames) => {
html().setAttribute(THEME_ATTRIBUTE, themeName)
const theme = document.querySelector<HTMLLinkElement>('#hljs-link')
if (theme) {
theme.href = HLJS_THEMES[themeName]
}
console.log(theme, themeName)
Cookies.set(STORAGE_NAME, themeName)
}

2
packages/pockethost.io/static/global.css
View File

@ -164,7 +164,7 @@ h6 {
} }
/* Dark Mode */ /* Dark Mode */
[data-theme='dark']:root { [data-bs-theme='dark']:root {
--bs-black: #fff; --bs-black: #fff;
--bs-white: #000; --bs-white: #000;
--bs-gray: #6c757d; --bs-gray: #6c757d;