erudit 2.0.0-dev.7

package/app/scripts/aside/index.ts

@@ -0,0 +1,59 @@
+// TODO: Push this shit into <SiteAside /> or make composable or make something...
+
+export enum AsideType {
+    Major = 'major',
+    Minor = 'minor',
+}
+
+export const switchVisible = ref<boolean>(true);
+export const forcedAside = ref<AsideType>();
+
+export const clickTargets: {
+    major: HTMLElement[];
+    minor: HTMLElement[];
+} = {
+    major: [],
+    minor: [],
+};
+
+if (import.meta.client) {
+    //
+    // Switch visibility logic
+    //
+
+    let lastY = window.scrollY;
+    let sumDelta = 0;
+    let scrollTimeout: any;
+
+    window.addEventListener('scroll', () => {
+        const currentY = window.scrollY;
+        const delta = currentY - lastY;
+
+        sumDelta += delta;
+
+        switchVisible.value = sumDelta <= -1;
+
+        lastY = currentY;
+
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+            sumDelta = 0;
+        }, 200);
+    });
+
+    //
+    // Unpin forced asides when click outside logic
+    //
+
+    window.addEventListener('click', (e) => {
+        if (forcedAside.value) {
+            const toIgnoreTargets = clickTargets[forcedAside.value]; // Ignore currently pinned aside elements
+
+            for (const target of toIgnoreTargets)
+                if (target.contains(e.target as Element)) return;
+
+            forcedAside.value = undefined;
+            switchVisible.value = true;
+        }
+    });
+}

package/app/scripts/aside/major/nav.ts

@@ -0,0 +1,26 @@
+import type { InjectionKey, ShallowRef } from 'vue';
+import type { FrontNav } from '@shared/frontNav';
+
+export const insideNavBook = ref(false);
+export const navBookId = ref<string>();
+
+export const navBookVisible = computed(() => {
+    return insideNavBook.value && navBookId.value;
+});
+
+type AsideMajorNav = {
+    booksIds: string[];
+    globalNav: FrontNav;
+};
+
+export function getAsideMajorNavPayload() {
+    const key = 'aside-major-nav';
+    const nuxtApp = useNuxtApp();
+    return (nuxtApp.static.data[key] ||= nuxtApp.payload.data[key] ||=
+        {}) as AsideMajorNav;
+}
+
+export type NavStateValue = ShallowRef<null | 'active' | 'activePart'>;
+export type NavState = { [contentId: string]: NavStateValue };
+
+export const navStateKey = Symbol() as InjectionKey<ShallowRef<NavState>>;

package/app/scripts/aside/minor/state.ts

@@ -0,0 +1,37 @@
+import type { InjectionKey, ShallowRef } from 'vue';
+import type {
+    AsideMinorData,
+    AsideMinorNews,
+    AsideMinorTopic,
+    AsideMinorType,
+} from '@shared/asideMinor';
+
+export const asideMinorKey = Symbol() as InjectionKey<
+    ShallowRef<AsideMinorData>
+>;
+
+export function injectAsideData<T extends AsideMinorData>() {
+    return inject(asideMinorKey) as ShallowRef<T>;
+}
+
+// export function injectTopicData(): Ref<AsideMinorTopic>
+// {
+//     const dataRef = inject(asideMinorKey);
+//     return createTypeSafeDataComputed(dataRef, 'topic') as any;
+// }
+
+// export function injectNewsData(): Ref<AsideMinorNews>
+// {
+//     const dataRef = inject(asideMinorKey);
+//     return createTypeSafeDataComputed(dataRef, 'news') as any;
+// }
+
+// function createTypeSafeDataComputed(dataRef: Ref<AsideMinorData>, targetType: AsideMinorType)
+// {
+//     return computed(() => {
+//         if (dataRef.value.type !== targetType)
+//             throw new Error(`Aside minor data type mismatch! Expected "${targetType}", got "${dataRef.value.type}"!`);
+
+//         return dataRef.value;
+//     });
+// }

package/app/scripts/aside/minor/topic.ts

@@ -0,0 +1,3 @@
+import type { Location } from '@shared/location';
+
+export const topicLocation = ref<Location>();

package/app/scripts/flag.ts

@@ -0,0 +1,28 @@
+import type { MyIconName } from '#my-icons';
+import type { ContentFlag } from 'erudit-cog/schema';
+
+interface FlagData {
+    icon: MyIconName;
+    title: EruditPhraseId;
+}
+
+export const flagsData: Record<ContentFlag, FlagData> = {
+    //
+    // Global Content Flags
+    //
+
+    dev: {
+        icon: 'construction',
+        title: 'flag_dev',
+    },
+
+    advanced: {
+        icon: 'asterisk',
+        title: 'flag_advanced',
+    },
+
+    secondary: {
+        icon: 'puzzle',
+        title: 'flag_secondary',
+    },
+};

package/app/scripts/og.ts

@@ -0,0 +1,27 @@
+import eruditConfig from '#erudit/config';
+import type { ImageData } from '@erudit/shared/image';
+
+export const defaultOgImage = eruditConfig.seo?.defaultOgImage || {
+    src: eruditAsset('og-default.png'),
+    width: 300,
+    height: 300,
+};
+
+export function createOgImageTags(siteUrl: string, data: ImageData | string) {
+    const tags = [];
+    const isImage = typeof data !== 'string';
+
+    tags.push({
+        name: 'og:image',
+        content: siteUrl + (isImage ? data.src : data),
+    });
+
+    if (isImage) {
+        tags.push(
+            { name: 'og:image:width', content: data.width },
+            { name: 'og:image:height', content: data.height },
+        );
+    }
+
+    return tags;
+}

package/app/scripts/preview/build.ts

@@ -0,0 +1,84 @@
+import { PreviewDataType, type PreviewData } from './data';
+import { PreviewRequestType, type PreviewRequest } from './request';
+
+import { buildGenericLink } from './data/genericLink';
+import { buildPageLink } from './data/pageLink';
+import { buildUnique } from './data/unique';
+import { createPreviewError } from './data/alert';
+import { PreviewThemeName } from './state';
+
+const builders = [
+    buildGenericLink,
+    buildPageLink,
+    buildUnique,
+];
+
+export async function buildPreviewData(request: PreviewRequest): Promise<PreviewData>
+{
+    if (request.type === PreviewRequestType.Data)
+        return request.data;
+
+    if (request.type === PreviewRequestType.MissingElement)
+    {
+        if (request.hashMismatch)
+        {
+            const phrase = await usePhrases(
+                'preview_missing_title',
+                'preview_missing_explain_mismatch',
+                'element_id',
+                'current_page_hash',
+                'expected_page_hash',
+            );
+
+            return createPreviewError({
+                title: phrase.preview_missing_title,
+                message: phrase.preview_missing_explain_mismatch,
+                pre: `${phrase.element_id}: ${request.elementId}\n${phrase.current_page_hash}: ${request.hashMismatch.current}\n${phrase.expected_page_hash}: ${request.hashMismatch.expected}`,
+            });
+        }
+        else
+        {
+            const phrase = await usePhrases(
+                'preview_missing_title',
+                'preview_missing_explain',
+                'element_id',
+            );
+
+            return createPreviewError({
+                title: phrase.preview_missing_title,
+                message: phrase.preview_missing_explain,
+                pre: `${phrase.element_id}: ${request.elementId}`,
+            });
+        }
+    }
+
+    if (request.type === PreviewRequestType.HashMismatch)
+    {
+        const phrase = await usePhrases(
+            'preview_hash_mismatch_title',
+            'preview_hash_mismatch_explain',
+            'current_page_hash',
+            'expected_page_hash',
+        );
+
+        return {
+            type:       PreviewDataType.Alert,
+            theme:      PreviewThemeName.Warn,
+            title:      phrase.preview_hash_mismatch_title,
+            message:    phrase.preview_hash_mismatch_explain,
+            pre:        `${phrase.current_page_hash}: ${request.currentHash}\n${phrase.expected_page_hash}: ${request.expectedHash}`,
+        };
+    }
+
+    for (const build of builders)
+    {
+        const result = await build(request);
+        if (result)
+            return result;
+    }
+
+    throw createPreviewError({
+        message: `Unable to build preview data for request!`,
+        pre: JSON.stringify(request, null, 4),
+    });
+}

package/app/scripts/preview/data/alert.ts

@@ -0,0 +1,19 @@
+import { PreviewDataType, type PreviewDataBase } from '../data';
+import { PreviewThemeName } from '../state';
+
+export type AlertData = Partial<{
+    theme: PreviewThemeName;
+    title: string;
+    message: string;
+    pre: string;
+}>;
+
+export type PreviewDataAlert = PreviewDataBase & AlertData;
+
+export function createPreviewError(alertData: AlertData): PreviewDataAlert {
+    return {
+        type: PreviewDataType.Alert,
+        theme: PreviewThemeName.Error,
+        ...alertData,
+    };
+}

package/app/scripts/preview/data/custom.ts

@@ -0,0 +1,8 @@
+import type { PreviewDataBase, PreviewDataType } from '../data';
+import type { PreviewFooter } from '../footer';
+
+export interface PreviewDataCustom extends PreviewDataBase {
+    type: PreviewDataType.Custom;
+    message: string;
+    footer?: PreviewFooter;
+}

package/app/scripts/preview/data/genericLink.ts

@@ -0,0 +1,24 @@
+import { PreviewDataType, type PreviewDataBase } from '../data';
+import { PreviewRequestType, type PreviewRequest } from '../request';
+
+export interface PreviewDataGenericLink extends PreviewDataBase {
+    type: PreviewDataType.GenericLink;
+    external: boolean;
+    href: string;
+}
+
+export async function buildGenericLink(
+    request: PreviewRequest,
+): Promise<PreviewDataGenericLink> {
+    if (request.type !== PreviewRequestType.Link) return;
+
+    const { linkTarget } = request;
+
+    if (!['external', 'absolute'].includes(linkTarget.type)) return;
+
+    return {
+        type: PreviewDataType.GenericLink,
+        external: linkTarget.type === 'external',
+        href: linkTarget.href,
+    };
+}

package/app/scripts/preview/data/pageLink.ts

@@ -0,0 +1,20 @@
+import { PreviewDataType, type PreviewDataBase } from '../data';
+import { PreviewRequestType, type PreviewRequest } from '../request';
+import type { PreviewFooter } from '../footer';
+
+export interface PreviewDataPageLink extends PreviewDataBase {
+    type: PreviewDataType.PageLink;
+    footer: PreviewFooter;
+}
+
+export async function buildPageLink(
+    request: PreviewRequest,
+): Promise<PreviewDataPageLink> {
+    if (request.type !== PreviewRequestType.Link) return;
+
+    const { linkTarget } = request;
+
+    if (linkTarget.type !== 'page') return;
+
+    return await $fetch(`/api/preview/page${linkTarget._href}`);
+}

package/app/scripts/preview/data/unique.ts

@@ -0,0 +1,70 @@
+import type { BitranContent } from 'bitran';
+
+import type { BitranContext } from '@erudit/shared/bitran/context';
+
+import { PreviewDataType, type PreviewDataBase } from '../data';
+import type { PreviewFooter } from '../footer';
+import { PreviewRequestType, type PreviewRequest } from '../request';
+import { encodeBitranLocation } from '@erudit/shared/bitran/location';
+
+export interface PreviewDataUnique extends PreviewDataBase {
+    type: PreviewDataType.Unique;
+    productName: string;
+    bitran: {
+        context: BitranContext;
+        content: BitranContent;
+    };
+    footer: PreviewFooter;
+}
+
+export async function buildUnique(
+    request: PreviewRequest,
+): Promise<PreviewDataUnique> {
+    if (request.type !== PreviewRequestType.Link) return;
+
+    const { linkTarget } = request;
+
+    if (linkTarget.type !== 'unique') return;
+
+    const serverData = (await $fetch(
+        `/api/preview/unique/${encodeBitranLocation(linkTarget._absoluteStrLocation!)}`,
+    )) as any;
+    const productName = serverData.bitran.productName;
+    const customTitle = serverData.productTitle;
+
+    const icon = await useBitranProductIcon(productName);
+
+    const productPhraseName = await (async () => {
+        const productPhrase = await useBitranProductLanguage(productName);
+        try {
+            return productPhrase('_name');
+        } catch {
+            return productName;
+        }
+    })();
+
+    let secondary = serverData.context
+        .filter((i) => !i.hidden)
+        .map((i) => i.title)
+        .join(' / ');
+    secondary += customTitle
+        ? (secondary ? ' • ' : '') + productPhraseName
+        : '';
+
+    const primary = customTitle || productPhraseName || productName;
+
+    return {
+        type: PreviewDataType.Unique,
+        productName,
+        bitran: {
+            context: serverData.bitran.context,
+            content: serverData.bitran.content as any,
+        },
+        footer: {
+            iconSvg: icon,
+            primary,
+            secondary,
+            href: linkTarget._href,
+        },
+    };
+}

package/app/scripts/preview/data.ts

@@ -0,0 +1,26 @@
+import type { PreviewDataAlert } from './data/alert';
+import type { PreviewDataCustom } from './data/custom';
+import type { PreviewDataGenericLink } from './data/genericLink';
+import type { PreviewDataPageLink } from './data/pageLink';
+import type { PreviewDataUnique } from './data/unique';
+
+export enum PreviewDataType
+{
+    Alert =         'alert',
+    Custom =        'custom',
+    GenericLink =   'generic-link',
+    PageLink =      'page-link',
+    Unique =        'unique',
+}
+
+export interface PreviewDataBase
+{
+    type: `${PreviewDataType}`;
+}
+
+export type PreviewData =
+    PreviewDataAlert |
+    PreviewDataCustom |
+    PreviewDataGenericLink |
+    PreviewDataPageLink |
+    PreviewDataUnique;

package/app/scripts/preview/display.ts

@@ -0,0 +1,39 @@
+import type { Component } from 'vue';
+
+import { PreviewDataType, type PreviewData } from './data';
+
+import {
+    LazyPreviewDisplayAlert,
+    LazyPreviewDisplayCustom,
+    LazyPreviewDisplayGenericLink,
+    LazyPreviewDisplayPageLink,
+    LazyPreviewDisplayUnique,
+} from '#components';
+import { createPreviewError } from './data/alert';
+
+export interface PreviewDisplayProps<T extends PreviewData>
+{
+    data: T;
+}
+
+export function getPreviewDisplayComponent(data: PreviewData): Component
+{
+    switch (data.type)
+    {
+        case PreviewDataType.Alert:
+            return LazyPreviewDisplayAlert;
+        case PreviewDataType.Custom:
+            return LazyPreviewDisplayCustom;
+        case PreviewDataType.GenericLink:
+            return LazyPreviewDisplayGenericLink;
+        case PreviewDataType.PageLink:
+            return LazyPreviewDisplayPageLink;
+        case PreviewDataType.Unique:
+            return LazyPreviewDisplayUnique;
+    }
+
+    throw createPreviewError({
+        message: `Unable to build preview data for request!`,
+        pre: JSON.stringify(data, null, 4),
+    });
+}

package/app/scripts/preview/footer.ts

@@ -0,0 +1,9 @@
+import type { MyIconName } from '#my-icons';
+
+export type PreviewFooter = Partial<{
+    iconName:   MyIconName;
+    iconSvg:    string;
+    secondary:  string;
+    primary:    string;
+    href:       string;
+}>;

package/app/scripts/preview/request.ts

@@ -0,0 +1,51 @@
+import type { LinkData } from '@erudit/shared/bitran/products/link/shared';
+import type { LinkTarget } from '@erudit/shared/bitran/products/link/target';
+
+import type { PreviewData } from './data';
+
+export enum PreviewRequestType {
+    Link = 'link',
+    Data = 'data',
+    MissingElement = 'missing-element',
+    HashMismatch = 'hash-mismatch',
+}
+
+export interface PreviewRequestData extends PreviewRequestBase {
+    type: PreviewRequestType.Data;
+    data: PreviewData;
+}
+
+export interface PreviewRequestLink extends PreviewRequestBase {
+    type: PreviewRequestType.Link;
+    linkData: LinkData;
+    linkTarget: LinkTarget;
+}
+
+export interface PreviewRequestMissingElement extends PreviewRequestBase {
+    type: PreviewRequestType.MissingElement;
+    elementId: string;
+    hashMismatch?: {
+        current: string;
+        expected: string;
+    };
+}
+
+export interface PreviewRequestHashMismatch extends PreviewRequestBase {
+    type: PreviewRequestType.HashMismatch;
+    currentHash: string;
+    expectedHash: string;
+}
+
+export type PreviewRequest =
+    | PreviewRequestData
+    | PreviewRequestLink
+    | PreviewRequestMissingElement
+    | PreviewRequestHashMismatch;
+
+//
+//
+//
+
+interface PreviewRequestBase {
+    type: `${PreviewRequestType}`;
+}

package/app/scripts/preview/state.ts

@@ -0,0 +1,63 @@
+import { objectsEqual } from '@shared/utils/objectsEqual';
+import { PreviewRequestType, type PreviewRequest } from './request';
+
+export enum PreviewThemeName {
+    Error = 'error',
+    Warn = 'warn',
+    Success = 'success',
+    Brand = 'brand',
+}
+
+//
+
+const _request = ref<PreviewRequest>();
+const _visible = ref(false);
+const _history = ref<PreviewRequest[]>([]);
+const _theme = ref<PreviewThemeName>();
+const _blinki = ref(0);
+
+//
+
+export const previewRequest = readonly(_request);
+export const previewVisible = readonly(_visible);
+export const previewTheme = readonly(_theme);
+export const previewBlinkTrigger = readonly(_blinki);
+
+export const hasPreviewHistory = computed(() => _history.value.length > 0);
+
+export function showPreviousPreview() {
+    if (!hasPreviewHistory.value) return;
+
+    _request.value = _history.value.pop();
+}
+
+export function showPreview(request: PreviewRequest) {
+    if (objectsEqual(_request.value, request)) {
+        if (_visible.value) _blinki.value++;
+        else _visible.value = true;
+        return;
+    }
+
+    if (_request.value) _history.value.push(_request.value);
+
+    _request.value = request;
+    _visible.value = true;
+}
+
+export function closePreview() {
+    _visible.value = false;
+    _request.value = undefined;
+    _history.value.length = 0;
+}
+
+export function togglePreview(visible?: boolean) {
+    _visible.value = visible === undefined ? !_visible.value : visible;
+}
+
+export function setPreviewTheme(newTheme: PreviewThemeName) {
+    _theme.value = newTheme;
+}
+
+export function unsetPreviewTheme() {
+    _theme.value = undefined;
+}

package/app/styles/_immediate.css

@@ -0,0 +1,3 @@
+/* Instant color theme setup */
+:root { color-scheme: light; }
+:root[data-theme='dark'] { color-scheme: dark; }

package/app/styles/_util.scss

@@ -0,0 +1,50 @@
+@mixin transition($properties...)
+{
+    transition: all var(--transitionSpeed) var(--transitionFunction);
+    transition-property: $properties;
+}
+
+@mixin dark
+{
+    :root[data-theme='dark'] &
+    {
+        @content;
+    }
+}
+
+@mixin hoverLink
+{
+    cursor: pointer;
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    @include transition(text-decoration-color);
+
+    &:hover
+    {
+        text-decoration: underline;
+    }
+}
+
+@mixin scroll
+{
+    -webkit-overflow-scrolling: auto;
+
+    &::-webkit-scrollbar
+    {
+        -webkit-appearance: none;
+        height: 5px;
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb
+    {
+        background: var(--scrollbar);
+        &:hover { background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%); }
+    }
+
+    &::-webkit-scrollbar-corner
+    {
+        background: var(--border);
+    }
+}