erudit 3.0.0-dev.2 → 3.0.0-dev.21

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

@@ -1,20 +1,22 @@
-<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>
+<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,49 +1,46 @@
-<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.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>
+<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

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

@@ -0,0 +1,109 @@
+<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/transition/Fade.vue

@@ -1,19 +1,19 @@
-<template>
-    <Transition name="EruditTransitionFade">
-        <slot></slot>
-    </Transition>
-</template>
-
-<style lang="scss">
-.EruditTransitionFade {
-    &-enter-active,
-    &-leave-active {
-        transition: opacity var(--transitionSpeed) var(--transitionFunction);
-    }
-
-    &-enter-from,
-    &-leave-to {
-        opacity: 0;
-    }
-}
-</style>
+<template>
+    <Transition name="EruditTransitionFade">
+        <slot></slot>
+    </Transition>
+</template>
+
+<style lang="scss">
+.EruditTransitionFade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity var(--transitionSpeed) var(--transitionFunction);
+    }
+
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+    }
+}
+</style>

package/app/components/tree/TreeContainer.vue

@@ -1,11 +1,11 @@
-<template>
-    <div :class="$style.treeContainer">
-        <slot></slot>
-    </div>
-</template>
-
-<style lang="scss" module>
-.treeContainer {
-    padding: calc(var(--gap) / 2) 0;
-}
-</style>
+<template>
+    <div :class="$style.treeContainer">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" module>
+.treeContainer {
+    padding: calc(var(--gap) / 2) 0;
+}
+</style>

package/app/components/tree/TreeItem.vue

@@ -1,89 +1,93 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    label: string;
-    icon?: MyIconName;
-    svg?: string;
-    level?: number;
-    link?: string;
-    active?: boolean;
-    accent?: boolean;
-}>();
-</script>
-
-<template>
-    <NuxtLink
-        :prefetch="false"
-        :to="link"
-        :class="[
-            $style.treeItem,
-            active && $style.active,
-            accent && $style.accent,
-        ]"
-        :style="{ ['--_level']: level ?? 0 }"
-    >
-        <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
-        <MyRuntimeIcon v-else :class="$style.icon" name="tree-item-icon" :svg />
-        <div :class="$style.main">{{ label }}</div>
-        <div v-if="$slots.default" :class="$style.after">
-            <slot></slot>
-        </div>
-    </NuxtLink>
-</template>
-
-<style lang="scss" module>
-.treeItem {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: calc(var(--gap) / 1.6);
-    padding: calc(var(--gap) / 2) var(--gap);
-    padding-left: calc((var(--_level) + 1) * var(--gap));
-    font-size: 0.95em;
-    color: var(--textMuted);
-    text-decoration: none;
-    cursor: pointer;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-        .icon,
-        .main {
-            color: var(--text);
-        }
-    }
-
-    &.active {
-        .icon,
-        .main {
-            color: var(--brand);
-        }
-    }
-    &.accent {
-        .icon,
-        .main {
-            color: var(--text);
-        }
-    }
-
-    .icon,
-    .main {
-        @include transition(color);
-    }
-
-    .main {
-        flex: 1;
-    }
-
-    .icon,
-    .after {
-        flex-shrink: 0;
-    }
-
-    .icon {
-        font-size: 16px;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    label: string;
+    icon?: MyIconName;
+    svg?: string;
+    level?: number;
+    link?: string;
+    active?: boolean;
+    accent?: boolean;
+}>();
+</script>
+
+<template>
+    <EruditLink
+        :to="link"
+        :class="[
+            $style.treeItem,
+            active && $style.active,
+            accent && $style.accent,
+        ]"
+        :style="{ ['--_level']: level ?? 0 }"
+    >
+        <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
+        <MyRuntimeIcon
+            v-else
+            :class="$style.icon"
+            name="tree-item-icon"
+            :svg="svg!"
+        />
+        <div :class="$style.main">{{ label }}</div>
+        <div v-if="$slots.default" :class="$style.after">
+            <slot></slot>
+        </div>
+    </EruditLink>
+</template>
+
+<style lang="scss" module>
+.treeItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--gap) / 1.6);
+    padding: calc(var(--gap) / 2) var(--gap);
+    padding-left: calc((var(--_level) + 1) * var(--gap));
+    font-size: 0.95em;
+    color: var(--textMuted);
+    text-decoration: none;
+    cursor: pointer;
+
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    &.active {
+        .icon,
+        .main {
+            color: var(--brand);
+        }
+    }
+    &.accent {
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    .icon,
+    .main {
+        @include transition(color);
+    }
+
+    .main {
+        flex: 1;
+    }
+
+    .icon,
+    .after {
+        flex-shrink: 0;
+    }
+
+    .icon {
+        font-size: 16px;
+    }
+}
+</style>

package/app/composables/adsAllowed.ts

@@ -0,0 +1,11 @@
+import eruditConfig from '#erudit/config';
+
+export function adsAllowed() {
+    if (typeof eruditConfig?.debug?.ads === 'undefined') {
+        return import.meta.dev ? false : true;
+    } else if (!Boolean(eruditConfig?.debug?.ads)) {
+        return false;
+    }
+
+    return true;
+}

package/app/composables/asset.ts

@@ -0,0 +1,12 @@
+/**
+ * @param path Path relative to `PROJECT_DIR`
+ */
+export function useAssetRoute() {
+    const useBaseUrl = useBaseUrlPath();
+    return (path: string) => {
+        if (!path.startsWith('/asset/')) {
+            path = '/asset/' + path.replace(/^\/+/, '');
+        }
+        return useBaseUrl(path);
+    };
+}