erudit 2.0.0-dev.7

package/app/components/preview/Preview.vue

@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import type { PreviewRequest } from '@app/scripts/preview/request';
+import {
+    previewBlinkTrigger,
+    previewRequest,
+    previewTheme,
+    previewVisible,
+    unsetPreviewTheme,
+} from '@app/scripts/preview/state';
+
+import PreviewScreen from './PreviewScreen.vue';
+
+const height = ref<number>(0);
+const request = shallowRef<PreviewRequest>();
+const screenKey = ref(0); // Need to change this every time for Vue transition to work
+
+watch(previewRequest, () => {
+    if (previewRequest.value) {
+        request.value = structuredClone(toRaw(previewRequest.value));
+        unsetPreviewTheme();
+        screenKey.value++;
+    }
+});
+</script>
+
+<template>
+    <div :class="$style.previewSticky">
+        <div :class="$style.previewOverlay">
+            <section
+                :class="[$style.preview, previewVisible && $style.visible]"
+                :style="{
+                    '--_previewHeightInner': `min(${height}px, var(--_previewMaxHeight))`,
+                }"
+                :data-erudit-preview-theme="previewTheme"
+            >
+                <TransitionFade>
+                    <PreviewScreen
+                        v-if="request"
+                        :request
+                        :key="screenKey"
+                        v-model:height="height"
+                    />
+                </TransitionFade>
+                <div
+                    :key="previewBlinkTrigger"
+                    :class="$style.blinkOverlay"
+                ></div>
+            </section>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/def/z';
+@use '$/def/bp';
+
+.previewSticky {
+    position: sticky;
+    top: 0;
+    z-index: z.$preview;
+}
+
+.previewOverlay {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100dvh;
+    //background: rgba(255, 0, 0, 0.121);
+    overflow: hidden;
+    pointer-events: none;
+    touch-action: none;
+}
+
+.preview {
+    --previewBorderRadius: 15px;
+
+    --_previewMaxHeight: 70dvh;
+    --_previewHeightInner: 0px;
+    --_previewHeight: calc(var(--_previewHeightInner) + 1px /* Top border */);
+
+    pointer-events: initial;
+    touch-action: initial;
+
+    overflow: hidden;
+
+    position: absolute;
+    bottom: 0;
+    height: var(--_previewHeight);
+    max-height: var(--_previewMaxHeight);
+    width: 100%;
+    background: var(--_previewThemeBg, var(--bgAside));
+
+    border: 1px solid var(--_previewThemeBorder, var(--border));
+    border-bottom: none;
+    border-top-left-radius: var(--previewBorderRadius);
+    border-top-right-radius: var(--previewBorderRadius);
+
+    box-shadow: 0px -10px 12px 0px
+        light-dark(rgba(black, 0.11), rgba(white, 0.03));
+
+    @include transition(bottom, height, box-shadow, background);
+
+    @media (max-height: 500px) {
+        --_previewMaxHeight: 85dvh;
+    }
+
+    @include bp.below('aside2') {
+        border-right: transparent;
+    }
+    @include bp.below('aside1') {
+        border-left: transparent;
+    }
+
+    &:not(.visible) {
+        bottom: calc(-1 * var(--_previewHeight));
+        box-shadow: none;
+        overflow: hidden;
+    }
+}
+
+.blinkOverlay {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    touch-action: none;
+    background: var(--brand);
+    opacity: 0;
+    animation: blink 0.5s ease-out;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.6;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+//
+// Themes
+//
+
+.preview {
+    --_previewThemeBg: var(--bgAside);
+    --_previewThemeBorder: var(--border);
+    --_previewThemeText: var(--text);
+
+    @mixin previewTheme($themeName, $baseColor) {
+        &[data-erudit-preview-theme='#{$themeName}'] {
+            --_previewThemeBg: color-mix(
+                in srgb,
+                #{$baseColor},
+                var(--bgAside) 92%
+            );
+            --_previewThemeBorder: color-mix(
+                in srgb,
+                #{$baseColor},
+                var(--border) 80%
+            );
+            --_previewThemeText: #{$baseColor};
+        }
+    }
+
+    @include previewTheme(error, var(--error));
+    @include previewTheme(warn, var(--warn));
+    @include previewTheme(success, var(--success));
+    @include previewTheme(brand, var(--brand));
+}
+</style>

package/app/components/preview/PreviewDisplay.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+import {
+    closePreview,
+    hasPreviewHistory,
+    showPreviousPreview,
+} from '@app/scripts/preview/state';
+
+const { footer } = defineProps<{ footer?: PreviewFooter }>();
+
+const phrase = await usePhrases('close', 'back', 'goto');
+</script>
+
+<template>
+    <section :class="$style.display">
+        <div v-if="$slots.default" :class="$style.content">
+            <slot></slot>
+        </div>
+
+        <div v-if="footer" :class="$style.footer">
+            <div :class="$style.icon" v-if="footer.iconName || footer.iconSvg">
+                <MyIcon v-if="footer.iconName" :name="footer.iconName" />
+                <MyRuntimeIcon
+                    v-else
+                    name="preview-footer-icon"
+                    :svg="footer.iconSvg!"
+                />
+            </div>
+
+            <div :class="$style.info">
+                <div v-if="footer.secondary" :class="$style.secondary">
+                    {{ footer.secondary }}
+                </div>
+                <div :class="$style.primary">{{ footer.primary }}</div>
+            </div>
+
+            <div :class="$style.actions">
+                <TransitionFade>
+                    <PreviewFooterAction
+                        v-if="hasPreviewHistory"
+                        icon="arrow-left"
+                        @click="showPreviousPreview"
+                        :title="phrase.back"
+                    />
+                </TransitionFade>
+                <PreviewFooterAction
+                    icon="cross"
+                    @click="closePreview"
+                    :title="phrase.close"
+                />
+                <PreviewFooterAction
+                    v-if="footer.href"
+                    :link="footer.href"
+                    icon="arrow-in-text"
+                    :brand="true"
+                    :title="phrase.goto"
+                />
+            </div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/preview';
+
+.display {
+    --_previewFooterHeight: 0px;
+
+    &:has(> .footer) {
+        --_previewFooterHeight: 70px;
+    }
+}
+
+.content {
+    max-height: calc(var(--_previewMaxHeight) - var(--_previewFooterHeight));
+    overflow: auto;
+    @include scroll;
+}
+
+.content + .footer {
+    border-top: 1px solid var(--_previewThemeBorder, var(--border));
+    @include transition(border);
+}
+
+.footer {
+    display: flex;
+    gap: var(--gap);
+    align-items: center;
+    height: var(--_previewFooterHeight);
+    padding: 0 var(--gap);
+
+    .icon {
+        flex-shrink: 0;
+        font-size: 30px;
+        color: var(--textMuted);
+
+        @include preview.hasTheme() {
+            color: color-mix(
+                in srgb,
+                var(--_previewThemeText),
+                var(--textMuted) 30%
+            );
+        }
+
+        @include transition(color);
+    }
+
+    .info {
+        flex: 1;
+        overflow: hidden;
+
+        .secondary,
+        .primary {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            @include transition(color);
+        }
+
+        .secondary {
+            color: var(--textMuted);
+            font-size: 0.775em;
+            margin-bottom: -2px;
+        }
+
+        .primary {
+            font-size: 0.9em;
+            font-weight: bold;
+            color: var(--_previewThemeText, var(--text));
+        }
+    }
+
+    .actions {
+        flex-shrink: 0;
+        display: flex;
+        gap: var(--gapSmall);
+    }
+}
+</style>

package/app/components/preview/PreviewFooterAction.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    icon: MyIconName;
+    link?: string;
+    brand?: boolean;
+}>();
+
+const nuxtLink = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <component
+        :is="link ? nuxtLink : 'button'"
+        :to="link || null"
+        :class="[$style.uiAction, brand && $style.brand]"
+        target="_blank"
+    >
+        <MyIcon :name="icon" />
+    </component>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/preview';
+
+.uiAction {
+    --size: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--size);
+    height: var(--size);
+
+    border: none;
+    border-radius: 3px;
+    background: transparent;
+
+    color: var(--textMuted);
+    font-size: 22px;
+    text-decoration: none;
+
+    @include transition(color, background, opacity);
+
+    &:hover,
+    &:active {
+        cursor: pointer;
+        color: var(--textColor);
+        background: var(--bgAccent);
+
+        @include preview.hasTheme() {
+            background: color-mix(
+                in srgb,
+                var(--_previewThemeText),
+                var(--bgAccent) 85%
+            );
+        }
+
+        &.brand {
+            //color: color-mix(in srgb, var(--brand), black 20%);
+            background: color-mix(in srgb, var(--brand), transparent 80%);
+        }
+    }
+
+    //
+
+    &.brand {
+        color: var(--brand);
+    }
+}
+</style>

package/app/components/preview/PreviewLoading.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="$style.loadingContainer">
+        <Loading />
+    </div>
+</template>
+
+<style lang="scss" module>
+.loadingContainer
+{
+    height: 225px;
+    display: grid;
+    place-items: center;
+    font-size: 50px;
+}
+</style>

package/app/components/preview/PreviewScreen.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { PreviewRequest } from '@app/scripts/preview/request';
+import { type PreviewData } from '@app/scripts/preview/data';
+import { buildPreviewData } from '@app/scripts/preview/build';
+import { getPreviewDisplayComponent } from '@app/scripts/preview/display';
+import { createPreviewError } from '@app/scripts/preview/data/alert';
+
+import { PreviewDisplayAlert } from '#components';
+
+const { request } = defineProps<{ request: PreviewRequest }>();
+const height = defineModel<number>('height');
+
+const loading = ref(true);
+
+const screenElem = useTemplateRef('screenElem');
+const screenSizeObserver = new ResizeObserver(updateContentHeight);
+
+const DisplayComponent = shallowRef<Component>();
+const previewData = shallowRef<PreviewData>();
+
+const setupDisplay = setTimeout(async () => {
+    //await new Promise(resolve => setTimeout(resolve, 5000));
+
+    try {
+        previewData.value = await buildPreviewData(request);
+        DisplayComponent.value = getPreviewDisplayComponent(previewData.value);
+    } catch (error) {
+        console.error(error);
+
+        previewData.value = createPreviewError({
+            // @ts-ignore
+            message: error?.message || error,
+        });
+
+        DisplayComponent.value = PreviewDisplayAlert;
+    }
+
+    await nextTick();
+    loading.value = false;
+});
+
+function updateContentHeight() {
+    if (!screenElem.value) return;
+
+    height.value = screenElem.value.offsetHeight;
+}
+
+onMounted(() => {
+    height.value = screenElem.value?.offsetHeight ?? 0;
+
+    watch(
+        screenElem,
+        () => {
+            if (screenElem.value) {
+                screenSizeObserver.disconnect();
+                screenSizeObserver.observe(screenElem.value);
+            }
+        },
+        { immediate: true },
+    );
+});
+
+onUnmounted(() => {
+    clearTimeout(setupDisplay);
+    screenSizeObserver.disconnect();
+});
+</script>
+
+<template>
+    <div :class="$style.screenContainer">
+        <TransitionFade>
+            <div
+                ref="screenElem"
+                :class="$style.screen"
+                :key="loading ? 'a' : 'b'"
+            >
+                <PreviewLoading v-if="loading" />
+                <component v-else :is="DisplayComponent" :data="previewData" />
+            </div>
+        </TransitionFade>
+    </div>
+</template>
+
+<style lang="scss" module>
+.screenContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.screen {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+</style>

package/app/components/preview/display/Alert.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { PreviewDataAlert } from '@app/scripts/preview/data/alert';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+import { setPreviewTheme } from '@app/scripts/preview/state';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataAlert>>();
+
+const phrase = await usePhrases('error');
+
+setPreviewTheme(data.theme!);
+
+const footer: PreviewFooter = {
+    iconName: 'alert',
+    primary: data.title || phrase.error,
+};
+</script>
+
+<template>
+    <PreviewDisplay :footer>
+        <div :class="$style.alertContent">
+            <div v-html="data.message"></div>
+            <pre v-if="data.pre" v-html="data.pre"></pre>
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.alertContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    padding: var(--gapBig);
+
+    color: var(--_previewThemeText);
+    font-size: 0.9em;
+
+    @include transition(color);
+
+    div {
+        font-weight: 500;
+    }
+
+    pre {
+        max-height: 100px;
+        overflow: auto;
+        @include scroll;
+    }
+}
+</style>

package/app/components/preview/display/Custom.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { PreviewDataCustom } from '@app/scripts/preview/data/custom';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataCustom>>();
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div :class="$style.message">{{ data.message }}</div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.message {
+    padding: var(--gapBig);
+}
+</style>

package/app/components/preview/display/GenericLink.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { PreviewDataGenericLink } from '@app/scripts/preview/data/genericLink';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataGenericLink>>();
+
+const phrase = await usePhrases(
+    'external_link',
+    'external_link_warn',
+    'internal_link',
+    'internal_link_warn',
+);
+
+const footer: PreviewFooter = {
+    iconName: data.external ? 'link-external' : 'link',
+    href: data.href,
+    primary: data.external ? phrase.external_link : phrase.internal_link,
+};
+
+const warnMessage = data.external
+    ? phrase.external_link_warn
+    : phrase.internal_link_warn;
+</script>
+
+<template>
+    <PreviewDisplay :footer>
+        <div :class="$style.wrapper">
+            <div :class="$style.warn">{{ warnMessage }}</div>
+            <pre>{{ data.href }}</pre>
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+    padding: var(--gapBig);
+
+    pre {
+        font-family: monospace;
+    }
+}
+
+.warn {
+    color: var(--textMuted);
+    margin-bottom: var(--gap);
+}
+</style>

package/app/components/preview/display/PageLink.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PreviewDataPageLink } from '@app/scripts/preview/data/pageLink';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataPageLink>>();
+
+const phrase = await usePhrases('internal_link_warn');
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div :class="$style.wrapper">{{ phrase.internal_link_warn }}</div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+    padding: var(--gapBig);
+}
+</style>

package/app/components/preview/display/Unique.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+import { headingName } from '@shared/bitran/products/heading/shared';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div
+            :class="[
+                $style.bitranPreviewContent,
+                data.productName === headingName && $style.heading,
+            ]"
+        >
+            <BitranContent
+                :content="data.bitran.content"
+                :context="data.bitran.context"
+            />
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.bitranPreviewContent {
+    position: relative;
+    padding: var(--gap) 0;
+}
+
+.heading {
+    max-height: 340px;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10;
+        background: linear-gradient(to bottom, transparent, var(--bgAside) 95%);
+        pointer-events: none;
+        touch-action: none;
+    }
+}
+</style>