erudit 3.0.0-dev.14 → 3.0.0-dev.16

package/app/components/main/utils/reference/ReferenceSource.vue

@@ -1,118 +1,120 @@
-<script lang="ts" setup>
-import type { ContentReferenceSource } from '@erudit-js/cog/schema';
-
-import { type MyIconName } from '#my-icons';
-
-const props = defineProps<{ source: ContentReferenceSource }>();
-
-const typeIcon = computed<MyIconName>(() => {
-    switch (props.source.type) {
-        case 'book':
-            return 'book';
-        case 'site':
-            return 'globe';
-        default:
-            return 'file-lines';
-    }
-});
-
-const pretty = useFormatText();
-const phrase = await usePhrases('reference_source_featured');
-</script>
-
-<template>
-    <div :class="$style.source">
-        <div :class="$style.typeIcon">
-            <MyIcon :name="typeIcon" />
-        </div>
-        <div :class="$style.body">
-            <div :class="$style.header">
-                <MyIcon :name="typeIcon" :class="$style.headerTypeIcon" />
-                <a :href="source.link" target="_blank">{{ pretty(source.title) }}</a>
-                <MyIcon
-                    v-if="source.featured"
-                    name="star"
-                    style="cursor: help"
-                    :title="phrase.reference_source_featured"
-                />
-                <MyIcon
-                    v-if="source.link"
-                    name="link-external"
-                    :class="$style.linkIcon"
-                />
-            </div>
-            <div v-if="source.description" :class="$style.description">
-                {{ pretty(source.description) }}
-            </div>
-            <div v-if="source.comment" :class="$style.comment">
-                {{ pretty(source.comment) }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.source {
-    display: flex;
-    align-items: start;
-    gap: var(--gap);
-
-    .typeIcon {
-        flex-shrink: 0;
-        position: relative;
-        top: 4px;
-        color: var(--textMuted);
-
-        @include bp.below(mobile) {
-            display: none;
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: var(--gapSmall);
-
-        .header {
-            display: flex;
-            align-items: center;
-            gap: var(--gap);
-            font-weight: 550;
-
-            a[href] {
-                @include hoverLink;
-            }
-
-            [my-icon] {
-                flex-shrink: 0;
-                font-size: 1em;
-                color: var(--textDimmed);
-            }
-
-            .headerTypeIcon {
-                color: var(--textMuted);
-                display: none;
-                @include bp.below(mobile) {
-                    display: initial;
-                }
-            }
-
-            .linkIcon {
-                font-size: 0.85em;
-                opacity: 0.6;
-            }
-        }
-
-        .description,
-        .comment {
-            color: var(--textMuted);
-        }
-
-        .comment {
-            font-style: italic;
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ContentReferenceSource } from '@erudit-js/cog/schema';
+
+import { type MyIconName } from '#my-icons';
+
+const props = defineProps<{ source: ContentReferenceSource }>();
+
+const typeIcon = computed<MyIconName>(() => {
+    switch (props.source.type) {
+        case 'book':
+            return 'book';
+        case 'site':
+            return 'globe';
+        default:
+            return 'file-lines';
+    }
+});
+
+const pretty = useFormatText();
+const phrase = await usePhrases('reference_source_featured');
+</script>
+
+<template>
+    <div :class="$style.source">
+        <div :class="$style.typeIcon">
+            <MyIcon :name="typeIcon" />
+        </div>
+        <div :class="$style.body">
+            <div :class="$style.header">
+                <MyIcon :name="typeIcon" :class="$style.headerTypeIcon" />
+                <a :href="source.link" target="_blank">{{
+                    pretty(source.title)
+                }}</a>
+                <MyIcon
+                    v-if="source.featured"
+                    name="star"
+                    style="cursor: help"
+                    :title="phrase.reference_source_featured"
+                />
+                <MyIcon
+                    v-if="source.link"
+                    name="link-external"
+                    :class="$style.linkIcon"
+                />
+            </div>
+            <div v-if="source.description" :class="$style.description">
+                {{ pretty(source.description) }}
+            </div>
+            <div v-if="source.comment" :class="$style.comment">
+                {{ pretty(source.comment) }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.source {
+    display: flex;
+    align-items: start;
+    gap: var(--gap);
+
+    .typeIcon {
+        flex-shrink: 0;
+        position: relative;
+        top: 4px;
+        color: var(--textMuted);
+
+        @include bp.below(mobile) {
+            display: none;
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gapSmall);
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: var(--gap);
+            font-weight: 550;
+
+            a[href] {
+                @include hoverLink;
+            }
+
+            [my-icon] {
+                flex-shrink: 0;
+                font-size: 1em;
+                color: var(--textDimmed);
+            }
+
+            .headerTypeIcon {
+                color: var(--textMuted);
+                display: none;
+                @include bp.below(mobile) {
+                    display: initial;
+                }
+            }
+
+            .linkIcon {
+                font-size: 0.85em;
+                opacity: 0.6;
+            }
+        }
+
+        .description,
+        .comment {
+            color: var(--textMuted);
+        }
+
+        .comment {
+            font-style: italic;
+        }
+    }
+}
+</style>

package/app/components/preview/Preview.vue

@@ -1,186 +1,186 @@
-<script lang="ts" setup>
-import type { PreviewRequest } from '@app/scripts/preview/request';
-import {
-    closePreview,
-    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
-const route = useRoute();
-
-watch(previewRequest, () => {
-    if (previewRequest.value) {
-        request.value = structuredClone(toRaw(previewRequest.value));
-        unsetPreviewTheme();
-        screenKey.value++;
-    }
-});
-
-watch(
-    () => route.path,
-    () => {
-        closePreview();
-    },
-);
-</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>
+<script lang="ts" setup>
+import type { PreviewRequest } from '@app/scripts/preview/request';
+import {
+    closePreview,
+    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
+const route = useRoute();
+
+watch(previewRequest, () => {
+    if (previewRequest.value) {
+        request.value = structuredClone(toRaw(previewRequest.value));
+        unsetPreviewTheme();
+        screenKey.value++;
+    }
+});
+
+watch(
+    () => route.path,
+    () => {
+        closePreview();
+    },
+);
+</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>