erudit 3.0.0-dev.23 → 3.0.0-dev.25

package/app/components/preview/PreviewDisplay.vue

@@ -1,139 +0,0 @@
-<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

@@ -1,73 +0,0 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    icon: MyIconName;
-    link?: string;
-    brand?: boolean;
-}>();
-
-const nuxtLink = defineNuxtLink({ prefetch: false, trailingSlash: 'append' });
-</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/display/Alert.vue

@@ -1,50 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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">
-            {{ data.description || phrase.internal_link_warn }}
-        </div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.wrapper {
-    padding: var(--gapBig);
-}
-</style>

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

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { headingName } from '@erudit-js/bitran-elements/heading/shared';
-
-import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
-</script>
-
-<template>
-    <PreviewDisplay :footer="data.footer">
-        <div
-            :class="[
-                $style.bitranPreviewContent,
-                data.elementName === headingName && $style.heading,
-            ]"
-        >
-            <BitranContent :rawContent="data.rawBitranContent" />
-        </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>

package/app/components/sponsor/SponsorTier1.vue

@@ -1,89 +0,0 @@
-<script lang="ts" setup>
-import type { Tier1Sponsor } from '@erudit-js/cog/schema';
-
-const props = defineProps<{
-    sponsor: Tier1Sponsor;
-}>();
-
-const sponsorColor = computed(() => {
-    return props.sponsor.color ?? stringColor(props.sponsor.sponsorId);
-});
-</script>
-
-<template>
-    <a
-        :href="props.sponsor.link"
-        target="_blank"
-        rel="noopener noreferrer"
-        :class="$style.sponsorItem"
-        :style="{ '--sponsorColor': sponsorColor }"
-    >
-        <Avatar
-            icon="diamond"
-            :src="sponsor.avatar"
-            :color="sponsorColor"
-            :class="$style.avatar"
-            :styling="{ glow: true }"
-        />
-        <div>
-            <div :class="$style.main">
-                <MyRuntimeIcon
-                    v-if="sponsor.icon"
-                    name="sponsor-icon"
-                    :svg="sponsor.icon"
-                    :class="$style.icon"
-                />
-                <span :class="$style.name">{{ sponsor.name }}</span>
-            </div>
-            <div v-if="sponsor.slogan" :class="$style.slogan">
-                {{ sponsor.slogan }}
-            </div>
-        </div>
-    </a>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.sponsorItem {
-    display: flex;
-    gap: var(--gap);
-    align-items: center;
-    padding: var(--gap);
-    font-size: 0.9em;
-    border-radius: 5px;
-    background: transparent;
-    text-decoration: none;
-
-    @include transition(background);
-
-    @include bp.below('mobile') {
-        border-radius: 0;
-    }
-
-    &:hover {
-        background: color-mix(in srgb, var(--bgMain), var(--sponsorColor) 12%);
-    }
-
-    .avatar {
-        --avatarSize: 50px;
-        flex-shrink: 0;
-    }
-
-    .main {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-weight: 600;
-        color: color-mix(in srgb, var(--text), var(--sponsorColor) 50%);
-
-        .icon {
-            opacity: 0.6;
-        }
-    }
-
-    .slogan {
-        color: var(--textMuted);
-    }
-}
-</style>

package/app/components/sponsor/SponsorTier2.vue

@@ -1,109 +0,0 @@
-<script lang="ts" setup>
-import type { Tier2Sponsor } from '@erudit-js/cog/schema';
-
-const props = defineProps<{
-    sponsor: Tier2Sponsor;
-}>();
-
-const sponsorColor = computed(() => {
-    return props.sponsor.color ?? stringColor(props.sponsor.sponsorId);
-});
-</script>
-
-<template>
-    <a
-        :href="props.sponsor.link"
-        target="_blank"
-        rel="noopener noreferrer"
-        :class="$style.sponsorItem"
-        :style="{ '--sponsorColor': sponsorColor }"
-    >
-        <div :class="$style.avatarWrapper">
-            <Avatar
-                icon="diamond"
-                :src="sponsor.avatar"
-                :color="sponsorColor"
-                :class="$style.avatar"
-                :styling="{ glow: true, border: true }"
-            />
-            <MyRuntimeIcon
-                v-if="sponsor.icon"
-                name="sponsor-icon"
-                :svg="sponsor.icon"
-                :class="$style.icon"
-            />
-        </div>
-        <div :class="$style.info">
-            <div :class="$style.name">{{ sponsor.name }}</div>
-            <div v-if="sponsor.slogan" :class="$style.slogan">
-                {{ sponsor.slogan }}
-            </div>
-        </div>
-    </a>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.sponsorItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 22px;
-    padding: var(--gap);
-    border-radius: 5px;
-    background: transparent;
-    text-decoration: none;
-    text-align: center;
-
-    @include transition(background);
-
-    @include bp.below('mobile') {
-        border-radius: 0;
-    }
-
-    &:hover {
-        background: color-mix(in srgb, var(--bgMain), var(--sponsorColor) 10%);
-    }
-
-    .avatarWrapper {
-        position: relative;
-
-        .avatar {
-            --avatarSize: 100px;
-        }
-
-        .icon {
-            --iconSize: 26px;
-
-            position: absolute;
-            bottom: calc(-1 * var(--iconSize) / 2);
-            left: 50%;
-            transform: translateX(-50%);
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            color: var(--sponsorColor);
-            font-size: calc(var(--iconSize) / 1.8);
-            width: var(--iconSize);
-            height: var(--iconSize);
-            border-radius: 50%;
-            border: 1.5px solid var(--sponsorColor);
-            background: var(--bgMain);
-        }
-    }
-
-    .info {
-        .name {
-            font-weight: 600;
-            color: color-mix(in srgb, var(--text), var(--sponsorColor) 50%);
-        }
-
-        .slogan {
-            color: var(--textMuted);
-        }
-    }
-}
-</style>

package/app/components/stats/Stats.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { Stats } from '@shared/stat';
-
-defineProps<{ stats: Stats }>();
-</script>
-
-<template>
-    <section :class="$style.stats">
-        <template v-for="stat of stats">
-            <StatsItem v-if="stat.type === 'custom'" v-bind:stat />
-            <StatsItemElement v-else v-bind:stat />
-        </template>
-    </section>
-</template>
-
-<style lang="scss" module>
-.stats {
-    display: flex;
-    flex-wrap: wrap;
-}
-</style>

package/app/components/stats/StatsGroupLike.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import type { Stats } from '@shared/stat';
-
-defineProps<{ stats: Stats }>();
-</script>
-
-<template>
-    <Stats :stats :class="$style.bookGroupStats" />
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.bookGroupStats {
-    gap: var(--gapBig);
-    padding: var(--_pMainY) var(--_pMainX);
-    font-size: 1.2em;
-
-    @include bp.below('mobile') {
-        justify-content: center;
-        gap: var(--gap);
-    }
-}
-</style>

package/app/components/stats/StatsItem.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { isMyIcon, type MyIconName } from '#my-icons';
-import type { CustomStat } from '@shared/stat';
-
-defineProps<{ stat: CustomStat }>();
-</script>
-
-<template>
-    <div :class="$style.statsItem" :title="stat.label">
-        <MyIcon v-if="isMyIcon(stat.icon)" :name="stat.icon as MyIconName" />
-        <MyRuntimeIcon v-else name="stats-item-icon" :svg="stat.icon" />
-        <span :class="$style.statsItemCount">{{ stat.count }}</span>
-    </div>
-</template>
-
-<style lang="scss" module>
-.statsItem {
-    display: flex;
-    gap: var(--gapSmall);
-    align-items: center;
-    color: var(--textMuted);
-    cursor: help;
-
-    .statsItemCount {
-        font-weight: 600;
-    }
-
-    [my-icon] {
-        font-size: 0.9em;
-        color: var(--textDimmed);
-    }
-}
-</style>

package/app/components/stats/StatsItemElement.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import type { ElementStat } from '@shared/stat';
-
-const props = defineProps<{ stat: ElementStat }>();
-
-const icon = await useBitranElementIcon(props.stat.elementName);
-const language = await useBitranElementLanguage(props.stat.elementName);
-const label = language('_element_title');
-</script>
-
-<template>
-    <StatsItem :stat="{ type: 'custom', icon, label, count: stat.count }" />
-</template>