erudit 3.0.0-dev.9 → 4.0.0-dev.1

package/app/components/main/utils/Breadcrumb.vue

@@ -1,70 +0,0 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-import type { Context } from '@erudit/shared/content/context';
-
-defineProps<{ context: Context }>();
-
-const Link = defineNuxtLink({ prefetch: false });
-
-function getIcon(contextIcon: string) {
-    return contextIcon as MyIconName;
-}
-</script>
-
-<template>
-    <section :class="$style.breadcrumb">
-        <template v-for="contextItem of context.slice(0, -1)">
-            <Link :to="contextItem.href" :class="$style.breadcrumbItem">
-                <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
-                {{ contextItem.title }}
-            </Link>
-            <MyIcon :class="$style.sep" name="angle-right" />
-        </template>
-    </section>
-</template>
-
-<style lang="scss" module>
-.breadcrumb {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--gapSmall);
-    padding: var(--_pMainY) var(--_pMainX);
-    color: var(--textDimmed);
-    overflow: hidden;
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 30px;
-        height: 100%;
-        background: linear-gradient(to right, transparent, var(--bgMain));
-    }
-
-    .breadcrumbItem {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        gap: var(--gapSmall);
-
-        line-height: 0;
-        font-weight: 450;
-        color: var(--textDimmed);
-        text-decoration: none;
-
-        @include transition(color);
-
-        &:hover {
-            color: var(--textMuted);
-        }
-    }
-
-    .sep {
-        flex-shrink: 0;
-        position: relative;
-        top: 0.5px;
-    }
-}
-</style>

package/app/components/main/utils/ContentDecoration.vue

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-defineProps<{ decoration: string }>();
-const baseUrlPath = useBaseUrlPath();
-</script>
-
-<template>
-    <div :class="$style.contentDecoration">
-        <img :src="baseUrlPath(contentAsset(decoration))" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.contentDecoration {
-    float: right;
-    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
-
-    @media (max-width: 800px) {
-        display: none;
-    }
-
-    img {
-        display: block;
-        aspect-ratio: 1;
-        width: 100%;
-        max-width: 125px;
-        max-height: 125px;
-    }
-}
-</style>

package/app/components/main/utils/ContentDescription.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-defineProps<{ description: string }>();
-const pretty = await useFormatText();
-</script>
-
-<template>
-    <section :class="$style.contentDescription">
-        {{ pretty(description) }}
-    </section>
-</template>
-
-<style lang="scss" module>
-.contentDescription {
-    padding: var(--_pMainY) var(--_pMainX);
-    font-weight: 500;
-    font-size: 1.1em;
-    color: var(--text);
-}
-</style>

package/app/components/main/utils/ContentPopover.vue

@@ -1,188 +0,0 @@
-<script lang="ts" setup>
-import { useFloating, autoUpdate, arrow, shift } from '@floating-ui/vue';
-
-import type { PopoverData } from '@shared/popover';
-import { isMyIcon } from '#my-icons';
-
-defineProps<{ data: PopoverData }>();
-
-const referenceElement = useTemplateRef('reference');
-const popoverElement = useTemplateRef('popover');
-const arrowElement = useTemplateRef('popover-arrow');
-
-const { floatingStyles, middlewareData } = useFloating(
-    referenceElement,
-    popoverElement,
-    {
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            shift({
-                boundary: document?.querySelector('[erudit-main]') || undefined,
-            }),
-            arrow({ element: arrowElement }),
-        ],
-    },
-);
-
-const popoverVisible = ref(false);
-
-const showDelay = 400;
-const hideDelay = 100;
-let showTimeout: any;
-let hideTimeout: any;
-
-function showPopover(immediate?: boolean) {
-    clearTimeout(hideTimeout);
-    clearTimeout(showTimeout);
-
-    if (immediate) {
-        popoverVisible.value = true;
-    } else {
-        showTimeout = setTimeout(() => {
-            popoverVisible.value = true;
-        }, showDelay);
-    }
-}
-
-function hidePopover() {
-    clearTimeout(showTimeout);
-    hideTimeout = setTimeout(() => {
-        popoverVisible.value = false;
-    }, hideDelay);
-}
-</script>
-
-<template>
-    <div
-        ref="reference"
-        :class="$style.reference"
-        :style="`--popoverColor: ${data.color}`"
-        @mouseenter="() => showPopover()"
-        @mouseleave="hidePopover"
-        @click="() => showPopover(true)"
-    >
-        <MyIcon v-if="isMyIcon(data.icon)" :name="data.icon as any" />
-        <MyRuntimeIcon v-else name="popover-icon" :svg="data.icon" />
-
-        {{ data.title }}
-
-        <TransitionFade>
-            <div
-                v-if="popoverVisible"
-                ref="popover"
-                :class="$style.popover"
-                :style="floatingStyles"
-            >
-                <div
-                    ref="popover-arrow"
-                    :class="$style.arrow"
-                    :style="{
-                        position: 'absolute',
-                        top:
-                            middlewareData.arrow?.y != null
-                                ? `${middlewareData.arrow.y}px`
-                                : '',
-                        left:
-                            middlewareData.arrow?.x != null
-                                ? `${middlewareData.arrow.x}px`
-                                : '',
-                    }"
-                ></div>
-
-                <div :class="$style.inner">
-                    <MyIcon
-                        :class="$style.floatIcon"
-                        v-if="isMyIcon(data.icon)"
-                        :name="data.icon as any"
-                    />
-                    <MyRuntimeIcon
-                        :class="$style.floatIcon"
-                        v-else
-                        name="popover-icon"
-                        :svg="data.icon"
-                    />
-
-                    <div :class="$style.title">{{ data.title }}</div>
-                    <div v-if="data.description">{{ data.description }}</div>
-
-                    <slot></slot>
-                </div>
-            </div>
-        </TransitionFade>
-    </div>
-</template>
-
-<style lang="scss" module>
-.reference {
-    --_baseColor: color-mix(in srgb, var(--popoverColor), var(--invert) 35%);
-    --_bgColor: color-mix(in srgb, var(--popoverColor), var(--bgAside) 85%);
-}
-
-.reference {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: var(--gapSmall);
-    padding: var(--gapSmall);
-
-    background: var(--_bgColor);
-    color: var(--_baseColor);
-    font-size: 0.9em;
-    line-height: 0;
-
-    border: 1px solid var(--_baseColor);
-    border-radius: 3px;
-    cursor: help;
-}
-
-.popover {
-    cursor: auto;
-
-    position: absolute;
-    z-index: 999;
-    max-width: 320px;
-    padding-top: var(--gap);
-    padding-left: var(--gap);
-    padding-right: var(--gap);
-    line-height: normal;
-
-    .arrow {
-        position: absolute;
-        top: 14px;
-        left: 0;
-        background: var(--_baseColor);
-        width: 32px;
-        height: 32px;
-        transform: rotate(45deg);
-    }
-
-    .inner {
-        position: relative;
-        z-index: 1;
-        box-shadow: 0 0 18px
-            color-mix(
-                in srgb,
-                color-mix(in srgb, var(--popoverColor), var(--invert) 50%),
-                transparent 70%
-            );
-        padding: var(--gapSmall);
-        border: 2px solid var(--_baseColor);
-        border-radius: 3px;
-        background: linear-gradient(45deg, var(--bgAside), var(--_bgColor) 70%);
-
-        font-size: 0.9em;
-
-        .floatIcon {
-            float: right;
-            margin: 5px 5px 10px 10px;
-            font-size: 30px;
-            opacity: 0.3;
-        }
-
-        .title {
-            font-weight: 600;
-            margin-bottom: var(--gapSmall);
-        }
-    }
-}
-</style>

package/app/components/main/utils/ContentPopovers.vue

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import type { ContentFlag } from '@erudit-js/cog/schema';
-
-import type { ContentGenericData } from '@shared/content/data/base';
-
-import ContentPopover from './ContentPopover.vue';
-import type { PopoverData } from '@shared/popover';
-import { type MyIconName } from '#my-icons';
-
-const props = defineProps<{
-    generic: ContentGenericData /* TODO: customPopovers[] */;
-}>();
-
-const phrase = await usePhrases(
-    'flag_dev',
-    'flag_dev_description',
-    'flag_advanced',
-    'flag_advanced_description',
-    'flag_secondary',
-    'flag_secondary_description',
-    'popover_dependencies',
-    'popover_dependencies_description',
-);
-
-const flagData: Record<ContentFlag, PopoverData> = {
-    dev: {
-        icon: <MyIconName>'construction',
-        color: 'var(--warn)',
-        title: phrase.flag_dev,
-        description: phrase.flag_dev_description,
-    },
-    advanced: {
-        icon: <MyIconName>'asterisk',
-        color: '#7c67ac',
-        title: phrase.flag_advanced,
-        description: phrase.flag_advanced_description,
-    },
-    secondary: {
-        icon: <MyIconName>'puzzle',
-        color: '#7faf35',
-        title: phrase.flag_secondary,
-        description: phrase.flag_secondary_description,
-    },
-};
-
-const dependenciesData: PopoverData = {
-    icon: <MyIconName>'shuffle',
-    color: '#47baa9',
-    title: phrase.popover_dependencies,
-    description: phrase.popover_dependencies_description,
-};
-
-const hasPopovers = computed(() => {
-    if (props.generic?.flags && Object.keys(props.generic.flags)?.length)
-        return true;
-
-    if (props.generic?.dependencies) return true;
-
-    return false;
-});
-</script>
-
-<template>
-    <section v-if="hasPopovers" :class="$style.popovers">
-        <ContentPopover
-            v-for="flagName of Object.keys(generic.flags) as ContentFlag[]"
-            :data="flagData[flagName]"
-        />
-
-        <ContentPopover v-if="generic?.dependencies" :data="dependenciesData">
-            <ul :class="$style.dependenciesList">
-                <li v-for="(value, key) in generic.dependencies">
-                    <MyIcon :name="'arrow-left'" wrapper="span" />
-                    <NuxtLink :prefetch="false" :to="key">{{ value }}</NuxtLink>
-                </li>
-            </ul>
-        </ContentPopover>
-    </section>
-</template>
-
-<style lang="scss" module>
-.popovers {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--gap);
-    padding: var(--_pMainY) var(--_pMainX);
-}
-
-.dependenciesList {
-    margin-top: var(--gapSmall);
-    list-style-type: none;
-    list-style-position: inside;
-    padding-inline-start: 0;
-
-    li {
-        display: flex;
-        gap: var(--gapSmall);
-        align-items: center;
-
-        [my-icon] {
-            flex-shrink: 0;
-            font-size: 0.95em;
-            transform: scaleX(-1);
-        }
-
-        a {
-            color: inherit;
-        }
-    }
-}
-</style>

package/app/components/main/utils/ContentReferences.vue

@@ -1,70 +0,0 @@
-<script lang="ts" setup>
-import type { ContentReferences } from '@package';
-
-import ReferenceGroup from './reference/ReferenceGroup.vue';
-
-const props = defineProps<{ references: ContentReferences }>();
-
-const count = computed(() => {
-    return props.references.reduce(
-        (sum, referenceGroup) => sum + (referenceGroup.references.length || 0),
-        0,
-    );
-});
-
-const phrase = await usePhrases('references', 'references_description');
-</script>
-
-<template>
-    <h2 :class="$style.heading">
-        <MyIcon name="link-external" :class="$style.icon" />
-        <span :class="$style.title">{{ phrase.references }}</span>
-        <span :class="$style.count">{{ count }}</span>
-    </h2>
-
-    <p :class="$style.description">{{ phrase.references_description }}</p>
-
-    <section :class="$style.referenceGroups">
-        <ReferenceGroup v-for="group of references" :group />
-    </section>
-</template>
-
-<style lang="scss" module>
-.heading {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--_pMainY) var(--_pMainX);
-
-    .icon {
-        font-size: 0.9em;
-        color: var(--textMuted);
-    }
-
-    .count {
-        position: relative;
-        top: 1px;
-        font-weight: 550;
-        font-size: 0.6em;
-        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
-        border-radius: 20px;
-        padding: 2px 10px;
-    }
-}
-
-.description {
-    padding: var(--_pMainY) var(--_pMainX);
-}
-
-.referenceGroups {
-    display: flex;
-    flex-direction: column;
-    padding: var(--_pMainY) var(--_pMainX);
-
-    > *:not(:last-of-type) {
-        padding-bottom: var(--gap);
-        margin-bottom: var(--gap);
-        border-bottom: 1px solid var(--border);
-    }
-}
-</style>

package/app/components/main/utils/ContentSection.vue

@@ -1,45 +0,0 @@
-<template>
-    <hr :class="$style.hr" />
-    <slot></slot>
-</template>
-
-<style lang="scss" module>
-@mixin shade {
-    height: 50px;
-    border-bottom: 2px solid var(--border);
-    background: linear-gradient(to bottom, transparent, var(--bgAside));
-}
-
-@mixin simple {
-    height: var(--gap);
-}
-
-.hr {
-    border: none;
-
-    &::before,
-    &::after {
-        display: block;
-        content: '';
-    }
-
-    &:nth-of-type(even) {
-        &::before {
-            @include shade;
-        }
-        &::after {
-            @include simple;
-        }
-    }
-
-    &:nth-of-type(odd) {
-        &::before {
-            @include simple;
-        }
-        &::after {
-            @include shade;
-            transform: scaleY(-1);
-        }
-    }
-}
-</style>

package/app/components/main/utils/ContentTitle.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { isMyIcon } from '#my-icons';
-
-defineProps<{ icon: string; title: string; hint?: string }>();
-</script>
-
-<template>
-    <section :class="$style.contentTitle">
-        <MyIcon v-if="isMyIcon(icon)" :name="icon as any" :title="hint" />
-        <MyRuntimeIcon
-            v-else
-            name="content-title-icon"
-            :svg="icon"
-            :title="hint"
-        />
-        <h1>{{ title }}</h1>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.contentTitle {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: 0 var(--_pMainX);
-
-    [my-icon] {
-        flex-shrink: 0;
-        font-size: 1.65em;
-        color: var(--textMuted);
-        position: relative;
-        top: 1px;
-        cursor: help;
-    }
-
-    h1 {
-        font-size: 1.925em;
-    }
-
-    @include bp.below('mobile') {
-        padding-top: var(--gap);
-        flex-direction: column;
-
-        [my-icon] {
-            padding: 16px;
-            background: color-mix(
-                in srgb,
-                var(--textDisabled),
-                transparent 50%
-            );
-            color: var(--text);
-            border-radius: 50%;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 1.8em;
-        }
-    }
-}
-</style>

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

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import type { ContentReferenceGroup } from '@package';
-
-import ReferenceSource from './ReferenceSource.vue';
-import ReferenceItem from './ReferenceItem.vue';
-
-defineProps<{ group: ContentReferenceGroup }>();
-</script>
-
-<template>
-    <div :class="$style.group">
-        <ReferenceSource :source="group.source" />
-        <div :class="$style.references">
-            <ReferenceItem v-for="reference of group.references" :reference />
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-}
-
-.references {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-    margin-left: 34px;
-
-    @include bp.below(mobile) {
-        margin-left: 0;
-    }
-}
-</style>

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

@@ -1,68 +0,0 @@
-<script lang="ts" setup>
-import type { ContentReferenceItem } from '@package';
-
-defineProps<{ reference: ContentReferenceItem }>();
-</script>
-
-<template>
-    <div :class="$style.reference">
-        <MyIcon name="arrow-up-to-right" :class="$style.icon" />
-        <div :class="$style.body">
-            <div :class="$style.header">
-                <a :href="reference.link" target="_blank">{{
-                    reference.title
-                }}</a>
-                <MyIcon
-                    v-if="reference.link"
-                    name="link-external"
-                    :class="$style.linkIcon"
-                />
-            </div>
-            <div v-if="reference.description" :class="$style.description">
-                {{ reference.description }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.reference {
-    font-size: 0.92em;
-    display: flex;
-    align-items: start;
-    gap: var(--gap);
-
-    .icon {
-        position: relative;
-        top: 4px;
-        flex-shrink: 0;
-        color: var(--textMuted);
-    }
-
-    .body {
-        .header {
-            display: flex;
-            align-items: center;
-            gap: var(--gap);
-            font-weight: 550;
-
-            a[href] {
-                @include hoverLink;
-            }
-
-            .linkIcon {
-                position: relative;
-                left: -3px;
-                flex-shrink: 0;
-                color: var(--textDimmed);
-                font-size: 0.85em;
-                opacity: 0.6;
-            }
-        }
-
-        .description {
-            color: var(--textMuted);
-        }
-    }
-}
-</style>