erudit 4.0.0-dev.1 → 4.0.0-dev.2

package/app/app.vue

@@ -22,8 +22,7 @@ initAsideMajorPaneWatcher();
         class="relative m-auto min-h-dvh max-w-(--w-max-content) overflow-clip
             border-x
             border-[light-dark(var(--color-neutral-300),var(--color-neutral-800))]
-            shadow-[0_0_3px_0px_light-dark(rgba(0,0,0,0.05),rgba(0,0,0,0.18))]
-            transition-[border]"
+            shadow-[0_0_3px_0px_light-dark(rgba(0,0,0,0.05),rgba(0,0,0,0.18))]"
     >
         <SiteMain>
             <NuxtPage></NuxtPage>

package/app/components/FancyBold.vue

@@ -9,7 +9,6 @@ const { color = 'var(--color-brand)' } = defineProps<{
     <span
         :style="{ '--titleColor': color }"
         class="text-text-deep leading-tight font-extrabold
-            transition-[color,text-shadow]
             text-shadow-[2px_2px_color-mix(in_srgb,var(--titleColor),transparent_65%)]"
     >
         {{ formatText(text) }}

package/app/components/FancyCard.vue

@@ -31,8 +31,7 @@ defineProps<{
             `p-small micro:p-normal not-last:mb-normal gap-small text-main-sm
             relative flex w-full break-inside-avoid-column flex-col items-center
             rounded border border-(--colorBorder) bg-linear-to-tr
-            from-(--colorBg)/30 to-(--colorBg)
-            transition-[background,border,box-shadow]`,
+            from-(--colorBg)/30 to-(--colorBg) transition-shadow`,
             link && 'hocus:ring-(--colorBorder) ring-2 ring-transparent',
         ]"
     >

package/app/components/ads/AdsBannerAside.vue

@@ -33,8 +33,7 @@ onMounted(() => {
 <template>
     <section
         v-if="adsData"
-        class="p-small border-border border-t transition-[border]
-            [@media(max-height:500px)]:hidden"
+        class="p-small border-border border-t [@media(max-height:500px)]:hidden"
     >
         <div
             class="relative max-h-[300px] overflow-hidden

package/app/components/ads/AdsReplacer.vue

@@ -11,8 +11,8 @@ const phrase = await usePhrases('ads_replacer');
                     h-full w-full flex-row items-center justify-center
                     bg-neutral-200
                     shadow-[inset_0px_0px_5px_0px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
-                    transition-[background,color] @max-[550px]:flex-col
-                    @max-[550px]:text-center dark:bg-neutral-800"
+                    @max-[550px]:flex-col @max-[550px]:text-center
+                    dark:bg-neutral-800"
             >
                 <MyIcon
                     name="handshake"

package/app/components/aside/AsideListItem.vue

@@ -19,7 +19,7 @@ const isExternalLink = computed(() => {
     <EruditLink
         :class="[
             `border-border block min-h-(--h-min-aside-item) border-b
-            bg-transparent text-sm transition-[background,color,border]`,
+            bg-transparent text-sm transition-[background,color]`,
             hoverable && 'hocus:bg-bg-accent cursor-pointer',
             active
                 ? 'text-brand'

package/app/components/aside/AsideSwitch.vue

@@ -41,17 +41,27 @@ if (import.meta.client) {
             `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
             [--_switchSize:80px]`,
             /* */
-            `absolute bottom-0 flex size-(--_switchSize) items-center
+            `fixed bottom-0 flex size-(--_switchSize) items-center
             justify-center pb-(--_switchGap) pl-(--_switchGap)
             transition-[left,right,opacity]`,
             {
-                '-scale-x-100': isMinor,
-                [`aside1:right-0 aside1:opacity-0 -right-(--_switchSize)
-                opacity-100`]: canShowSwitches && isMajor,
-                [`aside2:left-0 aside2:opacity-0 -left-(--_switchSize)
-                opacity-100`]: canShowSwitches && isMinor,
-                'right-0 opacity-0': !canShowSwitches && isMajor,
-                'left-0 opacity-0': !canShowSwitches && isMinor,
+                //
+                // Major Global
+                //
+                'aside1:opacity-0': isMajor,
+                // Major Can Show
+                'left-0 opacity-100': isMajor && canShowSwitches,
+                // Major Cannot Show
+                '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
+
+                //
+                // Minor Global
+                //
+                'aside2:opacity-0 -scale-x-100': isMinor,
+                // Minor Can Show
+                'right-0 opacity-100': isMinor && canShowSwitches,
+                // Minor Cannot Show
+                '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
             },
         ]"
     >

package/app/components/aside/major/PaneSwitcher.vue

@@ -22,7 +22,7 @@ const phrase = await usePhrases(
 </script>
 
 <template>
-    <section class="border-border z-1 border-b transition-[border]">
+    <section class="border-border z-1 border-b">
         <div
             style="--_button-size: 56px; --_underline-p: 6px"
             class="relative mx-auto flex w-max"

package/app/components/aside/minor/AsideMinorPlainHeader.vue

@@ -6,15 +6,14 @@ defineProps<{ icon: MyIconName; title: string; count?: number }>();
 <template>
     <section
         class="gap-normal p-normal border-border bg-bg-aside flex items-center
-            justify-center border-b transition-[border,background]"
+            justify-center border-b"
     >
         <MyIcon :name="icon" class="text-text-muted text-[1.3em]" />
         <span class="font-semibold">{{ formatText(title) }}</span>
         <span
             v-if="count"
             class="text-invert rounded-full bg-neutral-600 px-[8px] py-[2.5px]
-                text-xs font-semibold transition-[color,background]
-                dark:bg-neutral-300"
+                text-xs font-semibold dark:bg-neutral-300"
             >{{ count }}</span
         >
     </section>

package/app/components/aside/minor/content/AsideMinorContentTopic.vue

@@ -40,10 +40,7 @@ const contentRelativePath = computed(() => {
 <template>
     <AsideMinorPane>
         <div class="flex h-full w-full flex-col">
-            <div
-                class="border-border gap-normal flex justify-center border-b
-                    transition-[border]"
-            >
+            <div class="border-border gap-normal flex justify-center border-b">
                 <TopicPartButton
                     v-for="part of topicParts"
                     :part

package/app/components/aside/minor/content/ButtonPaneContributions.vue

@@ -37,8 +37,7 @@ const phrase = await usePhrases('contribution');
                 class="absolute top-0 left-0 z-10 h-full w-full"
             >
                 <div
-                    class="bg-bg-aside flex h-full w-full flex-col justify-end
-                        transition-[background]"
+                    class="bg-bg-aside flex h-full w-full flex-col justify-end"
                 >
                     <div
                         class="nice-scrollbars *:border-border overflow-auto
@@ -53,7 +52,7 @@ const phrase = await usePhrases('contribution');
                     </div>
                     <div
                         class="border-border flex items-center border-t py-1
-                            pr-0 transition-[border]"
+                            pr-0"
                     >
                         <div
                             class="pl-normal gap-small flex flex-1 items-center
@@ -63,7 +62,6 @@ const phrase = await usePhrases('contribution');
                             <span
                                 class="text-invert rounded-full bg-neutral-600
                                     px-[8px] py-[2.5px] text-xs font-semibold
-                                    transition-[color,background]
                                     dark:bg-neutral-300"
                                 >{{ contributions.length }}</span
                             >

package/app/components/aside/minor/content/ButtonPaneImprove.vue

@@ -55,8 +55,7 @@ const phrase = await usePhrases(
                 class="absolute top-0 left-0 z-10 h-full w-full"
             >
                 <div
-                    class="bg-bg-aside flex h-full w-full flex-col justify-end
-                        transition-[background]"
+                    class="bg-bg-aside flex h-full w-full flex-col justify-end"
                 >
                     <div
                         class="nice-scrollbars overflow-auto *:border-t
@@ -83,7 +82,7 @@ const phrase = await usePhrases(
                     </div>
                     <div
                         class="border-border flex items-center border-t py-1
-                            pr-0 transition-[border]"
+                            pr-0"
                     >
                         <div class="pl-normal flex-1 text-sm font-semibold">
                             {{ formatText(phrase.improve_material) }}

package/app/components/aside/minor/content/Contribution.vue

@@ -8,7 +8,7 @@ defineProps<{ contribution: ContentContribution }>();
     <EruditLink
         :to="PAGES.contributor(contribution.contributorId)"
         class="p-normal hocus:bg-bg-accent block bg-transparent
-            transition-[border,background]"
+            transition-[background]"
     >
         <div class="gap-normal flex items-center">
             <SmartMedia

package/app/components/aside/minor/content/TocItem.vue

@@ -51,27 +51,41 @@ onMounted(() => {
 </script>
 
 <template>
-    <TreeItem
-        :level
-        :icon="elementIcon"
-        :main="formatText(item.title)"
-        :state="active ? 'active' : undefined"
-        :to="'#' + item.elementId"
-    />
-    <div v-if="item.type === 'heading'" class="relative overflow-hidden">
-        <div
-            :style="{ '--level': level ? +level : 0 }"
-            :class="[
-                `absolute top-0
-                left-[calc(var(--spacing-normal)*(var(--level)+1)+8px)] h-full
-                border-l opacity-40 transition-[border]`,
-                [active ? 'border-brand' : 'border-text-dimmed'],
-            ]"
-        ></div>
-        <TocItem
-            v-for="child of item.children"
-            :item="child"
-            :level="item.level"
+    <div :class="[$style.item, active && $style.activeItem]">
+        <TreeItem
+            :level
+            :icon="elementIcon"
+            :main="formatText(item.title)"
+            :state="active ? 'active' : undefined"
+            :to="'#' + item.elementId"
         />
+        <div
+            v-if="item.type === 'heading'"
+            class="group/children relative overflow-hidden"
+        >
+            <div
+                :style="{ '--level': level ? +level : 0 }"
+                :class="[
+                    `border-text-dimmed absolute top-0
+                    left-[calc(var(--spacing-normal)*(var(--level)+1)+6.5px)]
+                    h-full border-l opacity-40 transition-[border]`,
+                    $style.leftLine,
+                ]"
+            ></div>
+            <TocItem
+                v-for="child of item.children"
+                :item="child"
+                :level="item.level"
+            />
+        </div>
     </div>
 </template>
+
+<style module>
+.item.activeItem,
+.item:has(.activeItem) {
+    .leftLine {
+        border-color: var(--color-brand);
+    }
+}
+</style>

package/app/components/aside/minor/news/AsideMinorNews.vue

@@ -120,8 +120,7 @@ const phrase = await usePhrases('news', 'no_news', 'show_more');
                         class="my-big px-normal py-small bg-bg-accent
                             hocus:border-text-disabled gap-normal m-auto flex
                             w-auto cursor-pointer items-center rounded border-2
-                            border-transparent text-sm
-                            transition-[border,background,color]"
+                            border-transparent text-sm transition-[border]"
                     >
                         <MyRuntimeIcon v-if="newsLoading" :svg="loadingSvg" />
                         <span>{{ phrase.show_more }}</span>

package/app/components/aside/minor/news/NewsItem.vue

@@ -37,9 +37,9 @@ await walkElements(item.content.proseElement, async (element) => {
 </script>
 
 <template>
-    <div class="p-normal border-border border-b text-sm transition-[border]">
+    <div class="p-normal border-border border-b text-sm">
         <div
-            class="mb-small gap-small flex items-center transition-[color]"
+            class="mb-small gap-small flex items-center"
             :class="
                 isNew
                     ? 'font-semibold text-orange-700 dark:text-orange-300'

package/app/components/aside/minor/news/elements/Ref.vue

@@ -51,7 +51,7 @@ function linkClick() {
             -mt-(--tGap) -mb-(--bGap) rounded-sm bg-transparent px-(--xGap)
             pt-(--tGap) pb-(--bGap) text-(--linkColor) underline
             decoration-[color-mix(in_srgb,var(--linkColor)30%,transparent)]
-            decoration-2 underline-offset-2 transition-[color,background]"
+            decoration-2 underline-offset-2 transition-[background]"
     >
         {{ formatText(element.data.label) }}
     </EruditLink>

package/app/components/main/MainContentChild.vue

@@ -8,7 +8,7 @@ const hasExtra = child.stats || child.quickLinks;
     <div
         class="border-border hocus:ring-brand/25 hocus:border-brand group
             dark:bg-bg-aside rounded border bg-neutral-100 ring-2
-            ring-transparent transition-[border,box-shadow,background]"
+            ring-transparent transition-[border,box-shadow]"
     >
         <EruditLink :to="child.link" class="p-normal gap-small flex flex-col">
             <div class="gap-small micro:gap-normal flex items-center">
@@ -31,8 +31,7 @@ const hasExtra = child.stats || child.quickLinks;
         </EruditLink>
         <div
             v-if="hasExtra"
-            class="border-t-border p-normal gap-normal flex flex-col border-t
-                transition-[border]"
+            class="border-t-border p-normal gap-normal flex flex-col border-t"
         >
             <div v-if="child.quickLinks" class="relative top-[1px]">
                 <MainQuickLinks

package/app/components/main/MainDescription.vue

@@ -6,7 +6,7 @@ defineProps<{ description: string | undefined }>();
     <section
         v-if="description"
         class="text-main-lg max-micro:text-center px-main py-main-half
-            font-semibold transition-[color]"
+            font-semibold"
     >
         {{ formatText(description) }}
     </section>

package/app/components/main/MainQuickLink.vue

@@ -40,6 +40,22 @@ onUnmounted(() => {
 });
 
 const elementIcon = await getElementIcon(quickLink.schemaName);
+
+const title = computed(() => {
+    if (quickLink.quick?.title) {
+        return quickLink.quick.title;
+    } else {
+        return quickLink.title;
+    }
+});
+
+const description = computed(() => {
+    if (quickLink.quick?.description) {
+        return quickLink.quick.description;
+    } else {
+        return quickLink.description;
+    }
+});
 </script>
 
 <template>
@@ -50,15 +66,14 @@ const elementIcon = await getElementIcon(quickLink.schemaName);
             class="gap-small border-border px-small text-text-muted text-main-sm
                 hocus:text-brand hocus:border-brand hocus:ring-brand/25 flex
                 items-center rounded border bg-(--quickBg) py-1 ring-2
-                ring-transparent
-                transition-[background,color,border,box-shadow]"
+                ring-transparent transition-[color,border,box-shadow]"
         >
             <MaybeMyIcon :name="elementIcon" class="-mr-0.5 text-[1.2em]" />
-            <span>{{ formatText(quickLink.title) }}</span>
+            <span>{{ formatText(title) }}</span>
         </EruditLink>
         <TransitionFade>
             <div
-                v-if="quickLink.description && popupVisible"
+                v-if="description && popupVisible"
                 :style="floatingStyles"
                 ref="popup"
                 class="z-10 max-w-[300px] p-2"
@@ -68,7 +83,7 @@ const elementIcon = await getElementIcon(quickLink.schemaName);
                         text-white shadow-lg/30 dark:bg-neutral-400
                         dark:text-black dark:shadow-neutral-500"
                 >
-                    {{ formatText(quickLink.description) }}
+                    {{ formatText(description) }}
                 </div>
             </div>
         </TransitionFade>

package/app/components/main/MainQuickLinks.vue

@@ -9,9 +9,7 @@ const quickLinks = (() => {
         return;
     }
 
-    const filtered = elementSnippets.filter(
-        (snippet) => snippet.quick === true,
-    );
+    const filtered = elementSnippets.filter((snippet) => !!snippet.quick);
 
     return filtered.length > 0 ? filtered : undefined;
 })();

package/app/components/main/MainQuote.vue

@@ -74,28 +74,25 @@ const phrase = await usePhrases('add_quote', 'next_quote');
                     :url="avatarUrl"
                     class="border-bg-main micro:size-[60px] size-[40px]
                         rounded-full border-2
-                        [box-shadow:0_0_16px_0_var(--color)] transition-[border]
+                        [box-shadow:0_0_16px_0_var(--color)]
                         [--mediaColor:var(--color)]"
                 />
             </EruditLink>
         </div>
         <div
             class="p-small micro:p-normal relative flex-1 rounded
-                rounded-tl-none border-2 border-(--colorBorder) bg-(--colorBg)
-                transition-[background,border]"
+                rounded-tl-none border-2 border-(--colorBorder) bg-(--colorBg)"
         >
             <div
                 class="micro:[--arrowSize:22px] absolute -top-[2px]
                     -left-(--arrowSize) h-(--arrowSize) w-(--arrowSize)
-                    bg-(--colorBorder) transition-[background]
-                    [--arrowSize:14px]
+                    bg-(--colorBorder) [--arrowSize:14px]
                     [--arrowSizeSmall:calc(var(--arrowSize)-2px)]
                     [clip-path:polygon(110%_0,110%_110%,0_0)]"
             >
                 <div
                     class="absolute top-[2px] -right-[3px] h-(--arrowSizeSmall)
                         w-(--arrowSizeSmall) bg-(--colorBg)
-                        transition-[background]
                         [clip-path:polygon(100%_0,100%_100%,0_0)]"
                 ></div>
             </div>

package/app/components/main/MainSection.vue

@@ -1,27 +1,12 @@
 <template>
-    <section :class="[$style.section, 'bg-bg-main transition-[background]']">
+    <section :class="[$style.section, 'bg-bg-main']">
         <!-- Section Header -->
-        <div
-            :class="[
-                $style.header,
-                'border-border relative border-b-2 transition-[border]',
-            ]"
-        >
+        <div :class="[$style.header, 'border-border relative border-b-2']">
             <!-- Header Shade -->
-            <div class="absolute bottom-0 h-[70px] w-full">
-                <!-- Light mode gradient -->
-                <div
-                    class="absolute inset-0 bg-linear-to-t from-[#f7f7f7]
-                        to-transparent opacity-100 transition-opacity
-                        dark:opacity-0"
-                ></div>
-                <!-- Dark mode gradient -->
-                <div
-                    class="absolute inset-0 bg-linear-to-t from-[#1b1b1b]
-                        to-transparent opacity-0 transition-opacity
-                        dark:opacity-100"
-                ></div>
-            </div>
+            <div
+                class="absolute bottom-0 h-[70px] w-full bg-linear-to-t
+                    from-[#f7f7f7] to-transparent dark:from-[#1b1b1b]"
+            ></div>
 
             <!-- Header Content -->
             <div :class="[$style.headerContent, 'relative z-1']">

package/app/components/main/MainTitle.vue

@@ -22,8 +22,7 @@ const { color = 'var(--color-brand)' } = defineProps<{
             <MaybeMyIcon
                 :name="icon"
                 class="max-micro:text-white micro:text-[38px] text-[30px]
-                    text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]
-                    transition-[color]"
+                    text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]"
             />
         </div>
         <h1 class="text-size-h1 max-micro:text-center">

package/app/components/main/MainTopicPartSwitch.vue

@@ -45,7 +45,7 @@ const data: Record<TopicPart, TopicPartSwitchData> = {
                 `micro:[--switchHeight:50px] micro:gap-small px-small
                 micro:px-normal border-border relative -bottom-[2px] flex
                 h-(--switchHeight) items-center gap-1 rounded rounded-b-none
-                border-2 transition-[border,color,background]`,
+                border-2 transition-[color]`,
                 partData.state === 'missing' &&
                     'text-text-disabled/75 border-b-border cursor-not-allowed',
                 partData.state === 'active' &&

package/app/components/main/connections/Deps.vue

@@ -5,7 +5,7 @@ defineProps<{ deps: ContentDep[] }>();
 </script>
 
 <template>
-    <ScrollPane>
+    <ScrollPane class="py-normal gap-main-half flex max-h-[500px] flex-col">
         <div v-for="dep of deps" class="gap-small flex">
             <MyIcon
                 :name="ICONS[dep.contentType]"

package/app/components/main/connections/Externals.vue

@@ -1,44 +1,102 @@
 <script setup lang="ts">
-import type { ContentExternal } from '@erudit-js/core/content/externals';
+import type { ContentExternals } from '@erudit-js/core/content/externals';
 import ScrollPane from './ScrollPane.vue';
 
-defineProps<{ externals: ContentExternal[] }>();
+defineProps<{ externals: ContentExternals }>();
+
+const phrase = await usePhrases('externals_own', 'externals_from');
 </script>
 
 <template>
-    <ScrollPane>
-        <div v-for="external of externals" class="gap-small flex">
-            <MyIcon
-                :name="external.type === 'physical' ? 'book' : 'globe'"
-                class="relative top-1 shrink-0"
-            />
-            <div class="flex flex-col gap-0.5">
-                <div>
-                    <template v-if="external.type === 'web'">
-                        <EruditLink
-                            external
-                            target="_blank"
-                            :to="external.link"
-                            :class="[external.link && 'text-hover-underline']"
+    <ScrollPane class="max-h-[800px]">
+        <div v-for="group of externals">
+            <div
+                :class="[
+                    `border-border gap-small pl-small py-small bg-bg-main
+                    relative sticky top-0 z-10 flex w-full items-center border-b
+                    border-dashed`,
+                    group.type === 'own'
+                        ? 'font-semibold text-amber-600 dark:text-amber-400'
+                        : 'text-text-muted',
+                ]"
+            >
+                <div
+                    :class="[
+                        `absolute top-0 left-0 h-full w-full bg-linear-to-t
+                        to-transparent`,
+                        group.type === 'own'
+                            ? 'from-amber-400/10'
+                            : 'from-bg-aside/50',
+                    ]"
+                ></div>
+                <MyIcon
+                    :name="
+                        group.type === 'own'
+                            ? 'arrow/left'
+                            : 'arrow/up-to-right'
+                    "
+                    :class="[
+                        'relative',
+                        group.type === 'own' && '-scale-x-100',
+                    ]"
+                />
+                <span>
+                    {{
+                        group.type === 'own'
+                            ? phrase.externals_own
+                            : phrase.externals_from
+                    }}
+                </span>
+                <span
+                    v-if="group.type === 'parent'"
+                    class="relative font-semibold"
+                >
+                    {{ formatText(`"${group.title}"`) }}
+                </span>
+            </div>
+            <div>
+                <div
+                    v-for="external of group.items"
+                    class="gap-small py-normal flex"
+                >
+                    <MyIcon
+                        :name="external.type === 'physical' ? 'book' : 'globe'"
+                        class="relative top-1 shrink-0"
+                    />
+                    <div class="flex flex-col gap-0.5">
+                        <div>
+                            <template v-if="external.link">
+                                <EruditLink
+                                    external
+                                    target="_blank"
+                                    :to="external.link"
+                                    :class="[
+                                        external.link && 'text-hover-underline',
+                                    ]"
+                                >
+                                    {{ formatText(external.title) }}
+                                    <MyIcon
+                                        v-if="external.link"
+                                        name="arrow/outward"
+                                        class="text-text-disabled text-main-sm
+                                            relative -top-1 inline"
+                                    />
+                                </EruditLink>
+                            </template>
+                            <template v-else>
+                                <span>{{ formatText(external.title) }}</span>
+                            </template>
+                        </div>
+                        <div
+                            v-if="external.info"
+                            class="text-text-muted text-main-sm"
                         >
-                            {{ formatText(external.title) }}
-                            <MyIcon
-                                v-if="external.link"
-                                name="arrow/outward"
-                                class="text-text-disabled text-main-sm relative
-                                    -top-1 inline"
-                            />
-                        </EruditLink>
-                    </template>
-                    <template v-else>
-                        <span>{{ formatText(external.title) }}</span>
-                    </template>
-                </div>
-                <div v-if="external.info" class="text-text-muted text-main-sm">
-                    {{ formatText(external.info) }}
-                </div>
-                <div class="text-text-muted text-main-sm italic">
-                    {{ formatText(external.reason) }}
+                            {{ formatText(external.info) }}
+                        </div>
+                        <div class="text-text-muted text-main-sm italic">
+                            {{ formatText(external.reason) }}
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>