erudit 2.0.0-dev.7

package/app/composables/formatText.ts

@@ -0,0 +1,86 @@
+import eruditConfig from '#erudit/config';
+
+let formatFunction: FormatFunction;
+
+export function useFormatText() {
+    if (!formatFunction) {
+        const language = eruditConfig?.language;
+        formatFunction = createFormatFunction(language);
+    }
+
+    return formatFunction;
+}
+
+type FormatFunction = (text: string) => string;
+
+function createFormatFunction(language?: string): FormatFunction {
+    const formatters: FormatFunction[] = [];
+
+    //
+    // Em Dashes
+    //
+
+    formatters.push((text) => text.replace(/(^| )--($| )/gm, '$1—$2'));
+
+    //
+    // Quotes
+    //
+
+    {
+        const quoteSymbols: [string, string] = (() => {
+            switch (language) {
+                case 'ru':
+                    return ['«', '»'];
+                default:
+                    return ['“', '”'];
+            }
+        })();
+
+        formatters.push((text) => {
+            let open = false;
+            return text.replaceAll(/"/gm, () => {
+                return (open = !open) ? quoteSymbols[0] : quoteSymbols[1];
+            });
+        });
+    }
+
+    //
+    // Ellipsis
+    //
+
+    formatters.push((text) => text.replace(/\.\.\./gm, '…'));
+
+    //
+    // Language specific formatters
+    //
+
+    if (language === 'ru') formatters.push(ruStickyPrepositions);
+
+    //
+    //
+    //
+
+    function formatText(text: string): string {
+        if (!text) return text;
+
+        for (const formatter of formatters) text = formatter(text);
+
+        return text;
+    }
+
+    return formatText;
+}
+
+//
+//
+//
+
+/**
+ * Formats prepositions in Russian text so that they are always adjacent to the next word and are not left hanging “in the air” when the line breaks.
+ */
+function ruStickyPrepositions(text: string): string {
+    return text.replace(
+        / (в|не|без|для|до|за|из|к|на|над|о|об|от|по|под|при|про|с|у|через|вокруг|около|после|перед|между|внутри|вне|из-за|из-под|ради|сквозь|среди|насчёт|вследствие|благодаря|несмотря|наперекор|вопреки|подле|возле|рядом|навстречу) /gimu,
+        ' $1\xa0',
+    );
+}

package/app/composables/majorPane.ts

@@ -0,0 +1,60 @@
+import type { Component } from 'vue';
+
+import type { MyIconName } from '#my-icons';
+
+import Nav from '@app/components/aside/major/panes/nav/Nav.vue';
+import Pages from '@app/components/aside/major/panes/Pages.vue';
+import Search from '@app/components/aside/major/panes/Search.vue';
+import Language from '@app/components/aside/major/panes/Language.vue';
+import Other from '@app/components/aside/major/panes/other/Other.vue';
+
+interface MajorPane {
+    icon: MyIconName;
+    phrase: EruditPhraseId;
+    content: Component;
+}
+
+function definePane<TPane extends MajorPane>(pane: TPane) {
+    return pane;
+}
+
+export const majorPanes = {
+    index: definePane({ icon: 'book', phrase: 'index', content: Nav }),
+    pages: definePane({ icon: 'file-lines', phrase: 'pages', content: Pages }),
+    search: definePane({ icon: 'search', phrase: 'search', content: Search }),
+    language: definePane({
+        icon: 'globe',
+        phrase: 'language',
+        content: Language,
+    }),
+    other: definePane({
+        icon: 'ellipsis-vertical',
+        phrase: 'other',
+        content: Other,
+    }),
+};
+
+function getPaneOrder(paneKey: MajorPaneKey) {
+    return Object.keys(majorPanes).indexOf(paneKey);
+}
+
+export type MajorPaneKey = keyof typeof majorPanes;
+
+export function useMajorPane() {
+    const route = useRoute();
+
+    const activePane = useState<MajorPaneKey>('major-pane', () => {
+        switch (route.path) {
+            case '/members':
+                return 'pages';
+            default:
+                return 'index';
+        }
+    });
+
+    return {
+        panes: majorPanes,
+        activePane,
+        getPaneOrder,
+    };
+}

package/app/composables/phrases.ts

@@ -0,0 +1,80 @@
+type PhraseCaller<T extends EruditPhraseId[]> = {
+    [K in T[number]]: EruditPhrases[K];
+};
+
+const payloadKey = 'language';
+
+interface LanguagePayload {
+    strPhrases: Partial<Record<EruditPhraseId, string>>;
+    strFunctions: Record<string, string>;
+}
+
+const functions: Record<string, Function> = {};
+const functionPhrases: Record<string, Function> = {};
+
+const phraseApiRoute = (phraseId: EruditPhraseId) =>
+    `/api/language/phrase/${phraseId}`;
+const functionsApiRoute = '/api/language/functions';
+const phraseIdsApiRoute = '/api/language/phraseIds';
+
+export function usePhrases<T extends EruditPhraseId[]>(
+    ...phraseIds: T
+): Promise<PhraseCaller<T>> {
+    const nuxt = useNuxtApp();
+    const payload: LanguagePayload =
+        (nuxt.static.data[payloadKey] ||=
+        nuxt.payload.data[payloadKey] ||=
+            {});
+
+    const prerenderAllPromise = prerenderAllPhrases();
+    const prepareFunctionsPromise = prepareFunctions(payload);
+
+    return (async () => {
+        await prerenderAllPromise;
+        await prepareFunctionsPromise;
+
+        payload.strPhrases ||= {};
+        const phraseCaller: any = {};
+
+        for (const phraseId of phraseIds) {
+            const apiRoute = phraseApiRoute(phraseId);
+            const strPhrase = (payload.strPhrases[phraseId] ||= (await $fetch(
+                apiRoute,
+            )) as string);
+
+            if (strPhrase.startsWith('~!~FUNC~!~')) {
+                const strFunction = strPhrase.replace('~!~FUNC~!~', '');
+                functionPhrases[phraseId] ||= new Function(strFunction).bind(
+                    functions,
+                )();
+                phraseCaller[phraseId] = functionPhrases[phraseId];
+            } else {
+                phraseCaller[phraseId] = strPhrase;
+            }
+        }
+
+        return phraseCaller as PhraseCaller<T>;
+    })();
+}
+
+async function prerenderAllPhrases() {
+    if (import.meta.dev) return;
+
+    if (import.meta.client) return;
+
+    const nuxt = useNuxtApp();
+
+    const phraseIds = await $fetch(phraseIdsApiRoute);
+    nuxt.runWithContext(() =>
+        prerenderRoutes(phraseIds.map((phraseId) => phraseApiRoute(phraseId))),
+    );
+}
+
+async function prepareFunctions(payload: LanguagePayload) {
+    if (payload?.strFunctions) return;
+
+    payload.strFunctions = await $fetch(functionsApiRoute);
+
+    for (const [funcName, strFunc] of Object.entries(payload.strFunctions))
+        functions[funcName] = new Function(strFunc)();
+}

package/app/composables/theme.ts

@@ -0,0 +1,29 @@
+const themes = ['auto', 'light', 'dark'] as const;
+
+export type Theme = (typeof themes)[number];
+export type BinaryTheme = 'light' | 'dark';
+
+export function useTheme() {
+    const theme = useState<Theme>('theme', () => {
+        return localStorage.getItem('theme') ?? ('auto' as any);
+    });
+
+    const binaryTheme = computed(() => {
+        return theme.value === 'auto'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : theme.value;
+    });
+
+    const cycle = () => {
+        theme.value =
+            themes[(themes.indexOf(theme.value) + 1) % themes.length]!;
+    };
+
+    return {
+        theme,
+        binaryTheme,
+        cycle,
+    };
+}

package/app/composables/url.ts

@@ -0,0 +1,33 @@
+import eruditConfig from '#erudit/config';
+
+export function useBaseUrlPath() {
+    const runtimeConfig = useRuntimeConfig();
+    return (path: string) => {
+        const baseURL = runtimeConfig.app.baseURL;
+        if (path.startsWith(baseURL)) return path;
+        else if (path.startsWith('/')) return baseURL + path.substring(1);
+        else return path;
+    };
+}
+
+export function useSiteUrl() {
+    const runtimeConfig = useRuntimeConfig();
+    const baseUrl = runtimeConfig.app.baseURL;
+    const url = useRequestURL();
+
+    if (!import.meta.dev && eruditConfig.site?.buildUrl)
+        return eruditConfig.site.buildUrl + baseUrl.slice(0, -1);
+
+    return url.origin;
+}
+
+export function usePageUrl() {
+    const siteUrl = useSiteUrl();
+    const route = useRoute();
+
+    return computed(() => {
+        if (route.path === '/') return siteUrl;
+
+        return siteUrl + route.path;
+    });
+}

package/app/pages/_test/preview.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { PreviewDataType } from '@app/scripts/preview/data';
+import { createPreviewError } from '@app/scripts/preview/data/alert';
+import { PreviewRequestType } from '@app/scripts/preview/request';
+import {
+    PreviewThemeName,
+    showPreview,
+    togglePreview,
+} from '@app/scripts/preview/state';
+
+function showCustom() {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: {
+            type: PreviewDataType.Custom,
+            message: 'This is custom message for preview!',
+            footer: {
+                //iconName: 'arrow-left',
+                iconSvg:
+                    '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42436 0H9.57565L14.995 16H11.8276L10.8115 13H5.18855L4.17242 16H1.005L6.42436 0ZM6.20468 10H9.79533L8 4.69952L6.20468 10Z"></path> </g></svg>',
+                secondary: 'Secondary raw text',
+                primary: 'Primary raw text',
+                href: 'https://google.com',
+            },
+        },
+    });
+}
+
+function showAlert(theme: PreviewThemeName) {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: createPreviewError({
+            theme,
+            message: 'This is message!',
+            title: 'Custom Title',
+            pre: JSON.stringify(
+                {
+                    foo: 1337,
+                    bar: 'Some text',
+                },
+                null,
+                4,
+            ),
+        }),
+    });
+}
+</script>
+
+<template>
+    <button @click="() => togglePreview()">Toggle Preview</button>
+    <div>
+        Show:
+        <br />
+        <button :class="$style.button" @click="showCustom">Custom</button>
+        <br />
+        <button
+            :class="$style.button"
+            v-for="theme in PreviewThemeName"
+            @click="() => showAlert(theme)"
+        >
+            Alert {{ theme }}
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                })
+            "
+        >
+            Missing element
+        </button>
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                    hashMismatch: { current: 'bar', expected: 'baz' },
+                })
+            "
+        >
+            Missing element + hash mismatch
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.HashMismatch,
+                    currentHash: 'foo',
+                    expectedHash: 'bar',
+                })
+            "
+        >
+            Hash mismatch
+        </button>
+    </div>
+</template>
+
+<style lang="scss" module>
+.button {
+    border: 2px solid var(--border);
+    border-radius: 3px;
+    padding: 3px;
+    margin: 3px;
+}
+</style>

package/app/pages/article/[...articleId].vue

@@ -0,0 +1,3 @@
+<template>
+    <MainTopic />
+</template>

package/app/pages/book/[...bookId].vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { ContentBookData } from '@erudit/shared/content/data/type/book';
+import type { MyIconName } from '#my-icons';
+
+import ContentDecoration from '@app/components/main/utils/ContentDecoration.vue';
+import Breadcrumb from '@app/components/main/utils/Breadcrumb.vue';
+import ContentTitle from '@app/components/main/utils/ContentTitle.vue';
+import ContentDescription from '@app/components/main/utils/ContentDescription.vue';
+import ContentPopovers from '@app/components/main/utils/ContentPopovers.vue';
+
+const bookData = await useContentData<ContentBookData>();
+await useContentPage(bookData);
+
+const phrase = await usePhrases('book');
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="bookData.generic.decoration"
+        :decoration="bookData.generic.decoration"
+    />
+
+    <Breadcrumb
+        v-if="bookData.generic.context?.length > 1"
+        :context="bookData.generic.context"
+    />
+
+    <ContentTitle
+        :title="
+            bookData.generic?.title ||
+            bookData.generic.contentId.split('/').pop()!
+        "
+        :icon="<MyIconName>'outline/book'"
+        :hint="phrase.book"
+    />
+
+    <ContentDescription
+        v-if="bookData.generic?.description"
+        :description="bookData.generic?.description"
+    />
+
+    <ContentPopovers :generic="bookData.generic" />
+
+    <!-- Counters, fancy "GO LEARN" button and etc. -->
+
+    <div style="clear: both"></div>
+</template>

package/app/pages/group/[...groupId].vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { type ContentGroupData } from '@shared/content/data/type/group';
+import eruditConfig from '#erudit/config';
+
+import ContentDecoration from '@app/components/main/utils/ContentDecoration.vue';
+import Breadcrumb from '@app/components/main/utils/Breadcrumb.vue';
+import ContentTitle from '@app/components/main/utils/ContentTitle.vue';
+import ContentDescription from '@app/components/main/utils/ContentDescription.vue';
+import ContentPopovers from '@app/components/main/utils/ContentPopovers.vue';
+import ContentSection from '@app/components/main/utils/ContentSection.vue';
+import { NO_ALIASES } from '@erudit/shared/bitran/alias';
+import { locationIcon } from '@erudit/shared/icons';
+
+const location = useBitranLocation();
+
+const groupData = await useContentData<ContentGroupData>();
+await useContentPage(groupData);
+
+const content = await useBitranContent(location);
+const phrase = await usePhrases('group');
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="groupData.generic.decoration"
+        :decoration="groupData.generic.decoration"
+    />
+
+    <Breadcrumb
+        v-if="groupData.generic.context?.length > 1"
+        :context="groupData.generic.context"
+    />
+
+    <ContentTitle
+        :title="
+            groupData.generic?.title ||
+            groupData.generic.contentId.split('/').pop()!
+        "
+        :icon="locationIcon(location!)"
+        :hint="phrase.group"
+    />
+
+    <ContentDescription
+        v-if="groupData.generic?.description"
+        :description="groupData.generic?.description"
+    />
+
+    <ContentPopovers :generic="groupData.generic" />
+
+    <!-- TODO: List of materials in group -->
+
+    <div style="clear: both"></div>
+
+    <hr style="display: none" />
+
+    <ContentSection>
+        <BitranContent
+            :content
+            :context="{ location, aliases: NO_ALIASES() }"
+        />
+    </ContentSection>
+
+    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
+</template>

package/app/pages/index.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const phrase = await usePhrases('seo_index_title', 'seo_index_description');
+
+const seoTitle =
+    eruditConfig.seo?.indexTitle ||
+    eruditConfig.seo?.title ||
+    phrase.seo_index_title;
+const seoDescription =
+    eruditConfig.seo?.indexDescription || phrase.seo_index_description;
+
+useSeoMeta({
+    title: seoTitle,
+    ogTitle: seoTitle,
+    description: seoDescription,
+    ogDescription: seoDescription,
+});
+</script>
+
+<template>
+    <div style="padding: var(--_pMainY) var(--_pMainX)">
+        <h1>
+            {{
+                eruditConfig.seo?.title ||
+                eruditConfig.site?.title ||
+                phrase.seo_index_title
+            }}
+        </h1>
+        <p>TODO</p>
+    </div>
+</template>

package/app/pages/members.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+    <p>Members</p>
+    <NuxtLink to="/practice/topic-b">Погнали епты!</NuxtLink>
+</template>

package/app/pages/practice/[...practice].vue

@@ -0,0 +1,3 @@
+<template>
+    <MainTopic />
+</template>

package/app/pages/summary/[...summaryId].vue

@@ -0,0 +1,3 @@
+<template>
+    <MainTopic />
+</template>

package/app/public/favicon/article.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="gradient" x1="74.98" y1="423.02" x2="437.02" y2="60.98" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6fa552"/>
+      <stop offset="1" stop-color="#4475bc"/>
+    </linearGradient>
+  </defs>
+  <circle cx="256" cy="256" r="256" fill="url(#gradient)"/>
+  <path d="M124.13,354.9c-4.67,0-8.59-1.58-11.74-4.74-3.16-3.16-4.74-7.07-4.74-11.74s1.58-8.59,4.74-11.74c3.16-3.16,7.07-4.74,11.74-4.74h164.84c4.67,0,8.59,1.58,11.74,4.74,3.16,3.16,4.74,7.07,4.74,11.74s-1.58,8.59-4.74,11.74c-3.16,3.16-7.07,4.74-11.74,4.74H124.13ZM124.13,272.48c-4.67,0-8.59-1.58-11.74-4.74-3.16-3.16-4.74-7.07-4.74-11.74s1.58-8.59,4.74-11.74c3.16-3.16,7.07-4.74,11.74-4.74h263.74c4.67,0,8.59,1.58,11.74,4.74,3.16,3.16,4.74,7.07,4.74,11.74s-1.58,8.59-4.74,11.74c-3.16,3.16-7.07,4.74-11.74,4.74H124.13ZM124.13,190.07c-4.67,0-8.59-1.58-11.74-4.74-3.16-3.16-4.74-7.07-4.74-11.74s1.58-8.59,4.74-11.74c3.16-3.16,7.07-4.74,11.74-4.74h263.74c4.67,0,8.59,1.58,11.74,4.74,3.16,3.16,4.74,7.07,4.74,11.74s-1.58,8.59-4.74,11.74c-3.16,3.16-7.07,4.74-11.74,4.74H124.13Z" fill="#fff"/>
+</svg>

package/app/public/favicon/default.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="gradient" x1="75" y1="423" x2="437" y2="61" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6fa552"/>
+      <stop offset="1" stop-color="#4475bc"/>
+    </linearGradient>
+  </defs>
+  <circle fill="url(#gradient)" class="cls-2" cx="256" cy="256" r="256"/>
+  <path fill="white" d="M385.2,317.4v-91.1l-122.9,61.9c-5.5,2.8-11.4,4.3-17.5,4.3s-12-1.4-17.4-4.3l-126.5-63.9c-3.3-1.7-5.9-4.1-7.9-7s-2.9-6.1-2.9-9.6,1-6.6,2.9-9.6c2-3,4.6-5.4,7.9-7.2l126.5-63.9c2.8-1.5,5.7-2.6,8.6-3.3,2.9-.7,5.9-1,8.9-1s5.9.4,8.9,1c2.9.7,5.8,1.8,8.6,3.3l149.2,75.2c3.1,1.7,5.6,4,7.6,6.9,1.9,2.9,2.9,6.1,2.9,9.8v98.7c0,5-1.8,9.3-5.4,12.9-3.6,3.6-7.8,5.4-12.9,5.4s-9.3-1.8-13-5.4c-3.6-3.6-5.5-7.9-5.5-13h0ZM235.8,388.5c3,.5,5.9.8,8.9.8s5.9-.3,8.9-.8c2.9-.5,5.9-1.6,8.6-3.1l67.9-34.1c6.2-3.1,11.2-7.7,14.9-13.7,3.8-6.1,5.6-12.6,5.6-19.6v-37.9l-88.4,44.6c-5.4,2.9-11.3,4.3-17.4,4.3s-12-1.5-17.5-4.3l-88.4-44.6v37.9c0,7,1.9,13.6,5.6,19.6,3.8,6,8.7,10.6,14.9,13.7l67.9,34.1h0c2.8,1.5,5.7,2.6,8.6,3.1Z"/>
+</svg>

package/app/public/favicon/practice.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="gradient" x1="74.98" y1="423.02" x2="437.02" y2="60.98" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6fa552"/>
+      <stop offset="1" stop-color="#4475bc"/>
+    </linearGradient>
+  </defs>
+  <circle cx="256" cy="256" r="256" fill="url(#gradient)"/>
+  <path d="M216.29,267.91l129.71-129.71,52.94,52.94-182.66,182.66-103.24-103.24,52.94-52.94,50.3,50.3Z" fill="#fff"/>
+</svg>

package/app/public/favicon/summary.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="gradient" x1="74.98" y1="423.02" x2="437.02" y2="60.98" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6fa552"/>
+      <stop offset="1" stop-color="#4475bc"/>
+    </linearGradient>
+  </defs>
+  <circle cx="256" cy="256" r="256" fill="url(#gradient)"/>
+  <path d="M271.03,131.48c-2.77-5.75-8.63-9.42-15.07-9.42s-12.24,3.66-15.07,9.42l-33.64,69.21-75.12,11.09c-6.28.94-11.51,5.34-13.44,11.35s-.37,12.66,4.13,17.11l54.51,53.93-12.87,76.22c-1.05,6.28,1.57,12.66,6.75,16.37,5.18,3.71,12.03,4.18,17.68,1.2l67.12-35.83,67.12,35.83c5.65,2.98,12.5,2.56,17.68-1.2,5.18-3.77,7.79-10.1,6.75-16.37l-12.92-76.22,54.51-53.93c4.5-4.45,6.12-11.09,4.13-17.11-1.99-6.02-7.17-10.41-13.44-11.35l-75.17-11.09-33.64-69.21Z" fill="#fff"/>
+</svg>

package/app/public/logotype.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 135">
+  <defs>
+    <linearGradient id="gradient" x1="19.77" y1="115.23" x2="115.23" y2="19.77" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#4475bc"/>
+      <stop offset="1" stop-color="#6fa552"/>
+      <animateTransform
+        attributeName="gradientTransform"
+        type="rotate"
+        from="0 70 70"
+        to="360 70 70"
+        dur="5s"
+        repeatCount="indefinite"
+      />
+    </linearGradient>
+  </defs>
+  <path d="M95.99,81.04v-20.08l-27.1,13.64c-1.22.62-2.51.94-3.86.94-1.36,0-2.64-.31-3.84-.94l-27.89-14.1c-.73-.38-1.31-.9-1.74-1.55-.43-.65-.65-1.35-.65-2.11,0-.75.21-1.46.64-2.11.43-.66,1.01-1.18,1.74-1.58l27.89-14.09c.61-.33,1.25-.57,1.9-.73.65-.15,1.3-.23,1.96-.23s1.3.08,1.96.23c.65.15,1.28.39,1.9.73l32.89,16.57c.69.38,1.24.89,1.67,1.52.42.63.64,1.35.64,2.15v21.76c0,1.11-.39,2.06-1.18,2.85-.79.79-1.73,1.18-2.84,1.18s-2.06-.4-2.87-1.19c-.8-.8-1.21-1.75-1.21-2.86ZM61.18,96.02l-14.97-7.51c-1.37-.69-2.46-1.7-3.29-3.03-.83-1.33-1.24-2.77-1.24-4.32v-8.36l19.5,9.83c1.22.63,2.51.95,3.86.95s2.64-.32,3.84-.95l19.5-9.83v8.36c0,1.54-.41,2.98-1.24,4.32-.83,1.33-1.92,2.34-3.29,3.03l-14.97,7.51c-.61.34-1.25.58-1.9.69-.65.12-1.3.18-1.96.18s-1.3-.06-1.96-.18c-.65-.12-1.28-.35-1.9-.69ZM19.5,67.5C19.5,36.11,39.79,9.52,67.87,0c-.13,0-.25,0-.37,0C30.22,0,0,30.22,0,67.5s30.22,67.5,67.5,67.5c.13,0,.25,0,.37,0-28.09-9.51-48.37-36.1-48.37-67.49ZM67.93.01c28.18,9.51,48.37,36.1,48.37,67.49s-20.19,57.98-48.37,67.49c37.08-.23,67.07-30.35,67.07-67.49S105.01.24,67.93.01Z" fill="url(#gradient)"/>
+</svg>

package/app/public/user.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <defs>
+    <linearGradient id="gradient" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#bcbcbc"/>
+      <stop offset="1" stop-color="#e6e6e6"/>
+    </linearGradient>
+  </defs>
+  <rect width="500" height="500" fill="url(#gradient)"/>
+  <path d="M250,224c-20.62,0-38.28-7.34-52.97-22.03-14.69-14.69-22.03-32.34-22.03-52.97s7.34-38.28,22.03-52.97,32.34-22.03,52.97-22.03,38.28,7.34,52.97,22.03,22.03,32.34,22.03,52.97-7.34,38.28-22.03,52.97c-14.69,14.69-32.34,22.03-52.97,22.03ZM100,374v-52.5c0-10.62,2.73-20.39,8.2-29.3,5.47-8.91,12.73-15.7,21.8-20.39,19.38-9.69,39.06-16.95,59.06-21.8,20-4.84,40.31-7.27,60.94-7.27s40.94,2.42,60.94,7.27c20,4.84,39.69,12.11,59.06,21.8,9.06,4.69,16.33,11.48,21.8,20.39,5.47,8.91,8.2,18.67,8.2,29.3v52.5H100ZM137.5,336.5h225v-15c0-3.44-.86-6.56-2.58-9.37-1.72-2.81-3.98-5-6.8-6.56-16.87-8.44-33.91-14.77-51.09-18.98-17.19-4.22-34.53-6.33-52.03-6.33s-34.84,2.11-52.03,6.33c-17.19,4.22-34.22,10.55-51.09,18.98-2.81,1.56-5.08,3.75-6.8,6.56s-2.58,5.94-2.58,9.37v15ZM250,186.5c10.31,0,19.14-3.67,26.48-11.02,7.34-7.34,11.02-16.17,11.02-26.48s-3.67-19.14-11.02-26.48c-7.34-7.34-16.17-11.02-26.48-11.02s-19.14,3.67-26.48,11.02c-7.34,7.34-11.02,16.17-11.02,26.48s3.67,19.14,11.02,26.48c7.34,7.34,16.17,11.02,26.48,11.02Z" fill="#666"/>
+</svg>

package/app/scripts/_immediate.js

@@ -0,0 +1,4 @@
+// Instant color theme setup
+const theme = localStorage.getItem('theme') ?? 'auto';
+const binaryTheme = theme === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : theme;
+document.documentElement.setAttribute('data-theme', binaryTheme);