erudit 4.0.0-dev.4 → 4.0.0-dev.5

package/app/components/main/MainTitle.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import type { MaybeMyIconName } from '#my-icons';
-
-const { color = 'var(--color-brand)' } = defineProps<{
-    icon: MaybeMyIconName;
-    title: string;
-    color?: string;
-}>();
-</script>
-
-<template>
-    <section
-        :style="{ '--titleColor': color }"
-        class="gap-small micro:gap-normal micro:flex-row micro:justify-start
-            px-main py-main-half not-first:micro:-my-3 not-first:micro:-top-1.5
-            relative flex flex-col items-center justify-center"
-    >
-        <div
-            class="max-micro:rounded-full max-micro:p-4
-                max-micro:bg-(--titleColor)/80"
-        >
-            <MaybeMyIcon
-                :name="icon"
-                class="max-micro:text-white micro:text-[38px] text-[30px]
-                    text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]"
-            />
-        </div>
-        <h1 class="text-size-h1 max-micro:text-center">
-            <FancyBold :text="title" :color="color" />
-        </h1>
-    </section>
-</template>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const { color = 'var(--color-brand)' } = defineProps<{
+  icon: MaybeMyIconName;
+  title: string;
+  color?: string;
+}>();
+</script>
+
+<template>
+  <section
+    :style="{ '--titleColor': color }"
+    class="gap-small micro:gap-normal micro:flex-row micro:justify-start px-main
+      py-main-half not-first:micro:-my-3 not-first:micro:-top-1.5 relative flex
+      flex-col items-center justify-center"
+  >
+    <div
+      class="max-micro:rounded-full max-micro:p-4
+        max-micro:bg-(--titleColor)/80"
+    >
+      <MaybeMyIcon
+        :name="icon"
+        class="max-micro:text-white micro:text-[38px] text-[30px]
+          text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]"
+      />
+    </div>
+    <h1 class="text-size-h1 max-micro:text-center">
+      <FancyBold :text="title" :color="color" />
+    </h1>
+  </section>
+</template>

package/app/components/main/MainTopicPartPage.vue

@@ -1,88 +1,88 @@
-<script lang="ts" setup>
-const { mainContent } = defineProps<{
-    mainContent: MainContentTopicPart;
-}>();
-
-const { showContentTopicAside } = useAsideMinor();
-
-async function proseMounted() {
-    await nextTick();
-    showContentTopicAside({
-        part: mainContent.part,
-        parts: mainContent.parts,
-        shortContentId: mainContent.shortId,
-        contentRelativePath: mainContent.contentRelativePath,
-        toc: mainContent.toc,
-        contributions: mainContent.contributions,
-    });
-}
-
-const phrase = await usePhrases(
-    'summary',
-    'practice',
-    'article_seo_description',
-    'summary_seo_description',
-    'practice_seo_description',
-);
-
-await useContentSeo({
-    title: mainContent.title,
-    bookTitle: mainContent.bookTitle,
-    contentTypeSuffix:
-        mainContent.part !== 'article' ? phrase[mainContent.part] : undefined,
-    contentTypePath: {
-        type: 'topic',
-        topicPart: mainContent.part,
-        contentId: mainContent.shortId,
-    },
-    description:
-        mainContent.part === 'article'
-            ? mainContent.description ||
-              phrase.article_seo_description(mainContent.title)
-            : mainContent.part === 'summary'
-              ? phrase.summary_seo_description(mainContent.title)
-              : mainContent.part === 'practice'
-                ? phrase.practice_seo_description(mainContent.title)
-                : undefined,
-    seo: mainContent.seo,
-    snippets: mainContent.snippets,
-});
-</script>
-
-<template>
-    <MainGlow />
-    <MainDecoration :decoration="mainContent.decoration" />
-    <MainSectionPreamble>
-        <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
-        <MainTitle :icon="ICONS[mainContent.part]" :title="mainContent.title" />
-        <MainFlags :flags="mainContent.flags" />
-        <MainDescription :description="mainContent.description" />
-        <MainQuickLinks mode="single" :elementSnippets="mainContent.snippets" />
-        <MainConnections :connections="mainContent.connections" />
-        <MainContentStats mode="single" :stats="mainContent.stats" />
-        <div class="h-main-half"></div>
-        <MainQuoteLoader />
-        <div class="h-main-half"></div>
-    </MainSectionPreamble>
-    <MainSection>
-        <template #header>
-            <MainTopicPartSwitch
-                :shortContentId="mainContent.shortId"
-                :parts="mainContent.parts"
-                :activePart="mainContent.part"
-            />
-        </template>
-        <template #default>
-            <Prose
-                :element="mainContent.proseElement"
-                :storage="mainContent.storage"
-                :urlPath="'/' + mainContent.fullId"
-                :useHashUrl="true"
-                @vue:mounted="proseMounted"
-            />
-        </template>
-    </MainSection>
-    <MainSection v-if="adsBottomAllowed()">
-        <AdsBannerBottom />
-    </MainSection>
-</template>
+<script lang="ts" setup>
+const { mainContent } = defineProps<{
+  mainContent: MainContentTopicPart;
+}>();
+
+const { showContentTopicAside } = useAsideMinor();
+
+async function proseMounted() {
+  await nextTick();
+  showContentTopicAside({
+    part: mainContent.part,
+    parts: mainContent.parts,
+    shortContentId: mainContent.shortId,
+    contentRelativePath: mainContent.contentRelativePath,
+    toc: mainContent.toc,
+    contributions: mainContent.contributions,
+  });
+}
+
+const phrase = await usePhrases(
+  'summary',
+  'practice',
+  'article_seo_description',
+  'summary_seo_description',
+  'practice_seo_description',
+);
+
+await useContentSeo({
+  title: mainContent.title,
+  bookTitle: mainContent.bookTitle,
+  contentTypeSuffix:
+    mainContent.part !== 'article' ? phrase[mainContent.part] : undefined,
+  contentTypePath: {
+    type: 'topic',
+    topicPart: mainContent.part,
+    contentId: mainContent.shortId,
+  },
+  description:
+    mainContent.part === 'article'
+      ? mainContent.description ||
+        phrase.article_seo_description(mainContent.title)
+      : mainContent.part === 'summary'
+        ? phrase.summary_seo_description(mainContent.title)
+        : mainContent.part === 'practice'
+          ? phrase.practice_seo_description(mainContent.title)
+          : undefined,
+  seo: mainContent.seo,
+  snippets: mainContent.snippets,
+});
+</script>
+
+<template>
+  <MainGlow />
+  <MainDecoration :decoration="mainContent.decoration" />
+  <MainSectionPreamble>
+    <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
+    <MainTitle :icon="ICONS[mainContent.part]" :title="mainContent.title" />
+    <MainFlags :flags="mainContent.flags" />
+    <MainDescription :description="mainContent.description" />
+    <MainQuickLinks mode="single" :elementSnippets="mainContent.snippets" />
+    <MainConnections :connections="mainContent.connections" />
+    <MainContentStats mode="single" :stats="mainContent.stats" />
+    <div class="h-main-half"></div>
+    <MainQuoteLoader />
+    <div class="h-main-half"></div>
+  </MainSectionPreamble>
+  <MainSection>
+    <template #header>
+      <MainTopicPartSwitch
+        :shortContentId="mainContent.shortId"
+        :parts="mainContent.parts"
+        :activePart="mainContent.part"
+      />
+    </template>
+    <template #default>
+      <Prose
+        :element="mainContent.proseElement"
+        :storage="mainContent.storage"
+        :urlPath="'/' + mainContent.fullId"
+        :useHashUrl="true"
+        @vue:mounted="proseMounted"
+      />
+    </template>
+  </MainSection>
+  <MainSection v-if="adsBottomAllowed()">
+    <AdsBannerBottom />
+  </MainSection>
+</template>

package/app/components/main/MainTopicPartSwitch.vue

@@ -1,71 +1,67 @@
-<script lang="ts" setup>
-import { type TopicPart } from '@erudit-js/core/content/topic';
-
-interface TopicPartSwitchData {
-    state: 'active' | 'inactive' | 'missing';
-    label: string;
-    link: string;
-}
-
-const { shortContentId, parts, activePart } = defineProps<{
-    shortContentId: string;
-    parts: TopicPart[];
-    activePart: TopicPart;
-}>();
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-
-const getPartData = (part: TopicPart): TopicPartSwitchData => ({
-    state:
-        activePart === part
-            ? 'active'
-            : parts.includes(part)
-              ? 'inactive'
-              : 'missing',
-    label: phrase[part],
-    link: PAGES.topic(part, shortContentId),
-});
-
-const data: Record<TopicPart, TopicPartSwitchData> = {
-    article: getPartData('article'),
-    summary: getPartData('summary'),
-    practice: getPartData('practice'),
-};
-</script>
-
-<template>
-    <div
-        :style="{ '--switchHeight': '45px' }"
-        class="gap-normal flex justify-center"
-    >
-        <EruditLink
-            v-for="(partData, partKey) of data"
-            :to="partData.state !== 'missing' ? partData.link : undefined"
-            :class="[
-                `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-[color]`,
-                partData.state === 'missing' &&
-                    'text-text-disabled/75 border-b-border cursor-not-allowed',
-                partData.state === 'active' &&
-                    'text-brand bg-bg-main border-b-transparent',
-                partData.state === 'inactive' &&
-                    `text-text-muted hocus:text-text bg-bg-aside
-                    border-b-[color-mix(in_srgb,var(--color-border),var(--color-bg-main)_65%)]`,
-            ]"
-        >
-            <MyIcon
-                :name="ICONS[partKey]"
-                class="max-micro:mx-1 text-[1.2em]"
-            />
-            <span
-                :class="[
-                    'micro:inline font-semibold',
-                    partData.state !== 'active' && 'max-micro:hidden',
-                ]"
-                >{{ partData.label }}</span
-            >
-        </EruditLink>
-    </div>
-</template>
+<script lang="ts" setup>
+import { type TopicPart } from '@erudit-js/core/content/topic';
+
+interface TopicPartSwitchData {
+  state: 'active' | 'inactive' | 'missing';
+  label: string;
+  link: string;
+}
+
+const { shortContentId, parts, activePart } = defineProps<{
+  shortContentId: string;
+  parts: TopicPart[];
+  activePart: TopicPart;
+}>();
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+
+const getPartData = (part: TopicPart): TopicPartSwitchData => ({
+  state:
+    activePart === part
+      ? 'active'
+      : parts.includes(part)
+        ? 'inactive'
+        : 'missing',
+  label: phrase[part],
+  link: PAGES.topic(part, shortContentId),
+});
+
+const data: Record<TopicPart, TopicPartSwitchData> = {
+  article: getPartData('article'),
+  summary: getPartData('summary'),
+  practice: getPartData('practice'),
+};
+</script>
+
+<template>
+  <div
+    :style="{ '--switchHeight': '45px' }"
+    class="gap-normal flex justify-center"
+  >
+    <EruditLink
+      v-for="(partData, partKey) of data"
+      :to="partData.state !== 'missing' ? partData.link : undefined"
+      :class="[
+        `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-[color]`,
+        partData.state === 'missing' &&
+          'text-text-disabled/75 border-b-border cursor-not-allowed',
+        partData.state === 'active' &&
+          'text-brand bg-bg-main border-b-transparent',
+        partData.state === 'inactive' &&
+          `text-text-muted hocus:text-text bg-bg-aside
+          border-b-[color-mix(in_srgb,var(--color-border),var(--color-bg-main)_65%)]`,
+      ]"
+    >
+      <MyIcon :name="ICONS[partKey]" class="max-micro:mx-1 text-[1.2em]" />
+      <span
+        :class="[
+          'micro:inline font-semibold',
+          partData.state !== 'active' && 'max-micro:hidden',
+        ]"
+        >{{ partData.label }}</span
+      >
+    </EruditLink>
+  </div>
+</template>

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

@@ -1,34 +1,30 @@
-<script setup lang="ts">
-import ScrollPane from './ScrollPane.vue';
-
-defineProps<{ deps: ContentDep[] }>();
-</script>
-
-<template>
-    <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]"
-                class="relative top-1 shrink-0"
-            />
-            <div class="flex flex-col gap-0.5">
-                <div>
-                    <EruditLink :to="dep.link" class="text-hover-underline">
-                        {{ formatText(dep.title) }}
-                        <MyIcon
-                            name="arrow/outward"
-                            class="text-text-disabled text-main-sm relative
-                                -top-1 inline"
-                        />
-                    </EruditLink>
-                </div>
-                <div
-                    v-if="dep.type === 'hard'"
-                    class="text-text-muted text-main-sm italic"
-                >
-                    {{ formatText(dep.reason) }}
-                </div>
-            </div>
-        </div>
-    </ScrollPane>
-</template>
+<script setup lang="ts">
+import ScrollPane from './ScrollPane.vue';
+
+defineProps<{ deps: ContentDep[] }>();
+</script>
+
+<template>
+  <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]" class="relative top-1 shrink-0" />
+      <div class="flex flex-col gap-0.5">
+        <div>
+          <EruditLink :to="dep.link" class="text-hover-underline">
+            {{ formatText(dep.title) }}
+            <MyIcon
+              name="arrow/outward"
+              class="text-text-disabled text-main-sm relative -top-1 inline"
+            />
+          </EruditLink>
+        </div>
+        <div
+          v-if="dep.type === 'hard'"
+          class="text-text-muted text-main-sm italic"
+        >
+          {{ formatText(dep.reason) }}
+        </div>
+      </div>
+    </div>
+  </ScrollPane>
+</template>

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

@@ -1,104 +1,80 @@
-<script setup lang="ts">
-import type { ContentExternals } from '@erudit-js/core/content/externals';
-import ScrollPane from './ScrollPane.vue';
-
-defineProps<{ externals: ContentExternals }>();
-
-const phrase = await usePhrases('externals_own', 'externals_from');
-</script>
-
-<template>
-    <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.info) }}
-                        </div>
-                        <div class="text-text-muted text-main-sm italic">
-                            {{ formatText(external.reason) }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ScrollPane>
-</template>
+<script setup lang="ts">
+import type { ContentExternals } from '@erudit-js/core/content/externals';
+import ScrollPane from './ScrollPane.vue';
+
+defineProps<{ externals: ContentExternals }>();
+
+const phrase = await usePhrases('externals_own', 'externals_from');
+</script>
+
+<template>
+  <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.info) }}
+            </div>
+            <div class="text-text-muted text-main-sm italic">
+              {{ formatText(external.reason) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ScrollPane>
+</template>