erudit 4.3.5-dev.1 → 4.3.5

package/app/components/ImageTint.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const { src } = defineProps<{
+  src: string;
+}>();
+</script>
+
+<template>
+  <div :class="$style.imageTint">
+    <img :src />
+    <img :src />
+  </div>
+</template>
+
+<style module>
+.imageTint {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+
+  img {
+    width: 100%;
+  }
+
+  img:first-child {
+    mix-blend-mode: multiply;
+  }
+
+  img:last-child {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    filter: drop-shadow(
+      0px 1000px 0
+        var(--tint, color-mix(in hsl, var(--color-brand), transparent 90%))
+    );
+    transform: translateY(-1000px);
+    opacity: var(--tint-opacity, 1);
+    transition: opacity var(--default-transition-timing-function)
+      var(--default-transition-duration);
+  }
+}
+</style>

package/app/components/main/MainContentChild.vue

@@ -10,30 +10,40 @@ const hasExtra = child.stats || child.keyLinks;
       dark:bg-bg-aside rounded border bg-neutral-100 ring-2 ring-transparent
       transition-[border,box-shadow]"
   >
+    <EruditLink
+      v-if="child.decoration"
+      :to="child.link"
+      class="p-normal max-micro:pb-0 not-group-hocus:[--tint-opacity:0]
+        micro:float-right block"
+    >
+      <ImageTint
+        :src="fileUrl(child.decoration)"
+        class="m-auto block aspect-square max-h-[90px] max-w-[90px]"
+      />
+    </EruditLink>
+
     <EruditLink :to="child.link" class="p-normal gap-small flex flex-col">
-      <div class="gap-small micro:gap-normal flex items-center">
+      <h2
+        class="group-hocus:text-brand micro:text-main-lg micro:text-start
+          text-center font-bold transition-[color]"
+      >
         <MyIcon
           :name="ICONS[child.type]"
-          class="text-text-muted group-hocus:text-brand shrink-0 text-[1.2em]
-            transition-[color]"
+          class="text-text-muted group-hocus:text-brand mr-small relative
+            -top-[1px] inline shrink-0 text-[1.2em] transition-[color]"
         />
-        <h2
-          class="group-hocus:text-brand gap-small micro:text-main-lg flex
-            items-center font-bold transition-[color]"
-        >
-          {{ formatText(child.title) }}
-        </h2>
-      </div>
+        <span>{{ formatText(child.title) }}</span>
+      </h2>
 
-      <div v-if="child.description" class="text-text-muted">
+      <div
+        v-if="child.description"
+        class="text-text-muted micro:text-start text-center"
+      >
         {{ formatText(child.description) }}
       </div>
     </EruditLink>
-    <div
-      v-if="hasExtra"
-      class="border-t-border p-normal gap-normal flex flex-col border-t"
-    >
-      <div v-if="child.keyLinks" class="relative top-[1px]">
+    <div v-if="hasExtra" class="px-normal pb-normal gap-normal flex flex-col">
+      <div v-if="child.keyLinks">
         <MainKeyLinks :elementSnippets="child.keyLinks" mode="children" />
       </div>
       <div v-if="child.stats">

package/app/components/main/MainDecoration.vue

@@ -1,15 +1,29 @@
 <script lang="ts" setup>
-defineProps<{ decoration?: string }>();
+defineProps<{
+  role: 'preamble-float' | 'preamble-static';
+  decoration?: string;
+}>();
 </script>
 
 <template>
-  <section
-    v-if="decoration"
-    class="pl-small pb-small pt-main pr-main float-right max-[700px]:hidden"
-  >
-    <img
-      :src="fileUrl(decoration!)"
-      class="block aspect-square max-h-[125px] w-full max-w-[125px]"
-    />
-  </section>
+  <template v-if="decoration">
+    <section
+      v-if="role === 'preamble-float'"
+      class="p-small pr-main float-right pt-3 max-[700px]:hidden"
+    >
+      <ImageTint
+        :src="fileUrl(decoration)"
+        class="block aspect-square max-h-[125px] max-w-[125px]"
+      />
+    </section>
+    <section
+      v-else-if="role === 'preamble-static'"
+      class="px-main py-main-half min-[700px]:hidden"
+    >
+      <ImageTint
+        :src="fileUrl(decoration)"
+        class="micro:m-0 m-auto block aspect-square max-h-[125px] max-w-[125px]"
+      />
+    </section>
+  </template>
 </template>

package/app/components/main/MainKeyLinks.vue

@@ -38,7 +38,8 @@ const phrase = await usePhrases('key_elements');
     <div
       v-else
       :style="{ '--keyBg': 'var(--color-bg-main)' }"
-      class="gap-small text-main-sm flex flex-wrap"
+      class="gap-small text-main-sm micro:justify-start flex flex-wrap
+        justify-center"
     >
       <MainKeyLink v-for="keyLink of keyLinks" :keyLink />
     </div>

package/app/components/main/MainTitle.vue

@@ -5,27 +5,35 @@ const { color = 'var(--color-brand)' } = defineProps<{
   icon: MaybeMyIconName;
   title: string;
   color?: string;
+  contentLabel?: 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"
+    :style="{
+      '--titleColor': color,
+      '--iconColor':
+        'color-mix(in srgb, var(--titleColor), var(--color-text) 70%)',
+    }"
+    class="gap-small micro:items-start px-main py-main-half relative flex
+      flex-col items-center justify-center leading-none"
   >
     <div
-      class="max-micro:rounded-full max-micro:p-4
-        max-micro:bg-(--titleColor)/80"
+      class="gap-small micro:hidden flex items-center text-[1.1em] font-semibold
+        text-(--iconColor)"
     >
-      <MaybeMyIcon
-        :name="icon"
-        class="max-micro:text-white micro:text-[38px] text-[30px]
-          text-[color-mix(in_srgb,var(--titleColor),var(--color-text)_70%)]"
-      />
+      <MaybeMyIcon :name="icon" class="text-[1.2em]" />
+      <span class="micro:hidden">{{ contentLabel }}</span>
     </div>
     <h1 class="text-size-h1 max-micro:text-center">
+      <span :title="contentLabel" class="mr-normal cursor-help">
+        <MaybeMyIcon
+          :name="icon"
+          class="max-micro:hidden relative -top-[1px] inline cursor-help
+            text-[1.1em] text-(--iconColor)"
+        />
+      </span>
       <FancyBold :text="title" :color="color" />
     </h1>
   </section>

package/app/components/main/MainTopicPartPage.vue

@@ -18,6 +18,7 @@ async function proseMounted() {
 }
 
 const phrase = await usePhrases(
+  'article',
   'summary',
   'practice',
   'article_seo_description',
@@ -30,21 +31,17 @@ await useContentSeo({
   title: mainContent.title,
   bookTitle: mainContent.bookTitle,
   contentTypeSuffix:
-    mainContent.part !== 'article' ? phrase[mainContent.part] : undefined,
+    mainContent.part !== mainContent.parts[0]
+      ? 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,
+    (mainContent.part === mainContent.parts[0] && mainContent.description) ||
+    phrase[`${mainContent.part}_seo_description`](mainContent.title),
   seo: mainContent.seo,
   snippets: mainContent.snippets,
   breadcrumbs: mainContent.breadcrumbs,
@@ -57,10 +54,21 @@ await useContentSeo({
 
 <template>
   <MainGlow />
-  <MainDecoration :decoration="mainContent.decoration" />
   <MainSectionPreamble>
+    <MainDecoration
+      role="preamble-float"
+      :decoration="mainContent.decoration"
+    />
     <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
-    <MainTitle :icon="ICONS[mainContent.part]" :title="mainContent.title" />
+    <MainDecoration
+      role="preamble-static"
+      :decoration="mainContent.decoration"
+    />
+    <MainTitle
+      :icon="ICONS[mainContent.part]"
+      :title="mainContent.title"
+      :contentLabel="phrase[mainContent.part]"
+    />
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <MainKeyLinks mode="single" :elementSnippets="mainContent.snippets" />

package/app/components/main/contentStats/MainContentStats.vue

@@ -38,7 +38,8 @@ const phrase = await usePhrases('stats');
   </section>
   <div
     v-else-if="mode === 'children' && stats"
-    class="gap-small micro:gap-normal text-main-sm flex flex-wrap"
+    class="gap-small micro:gap-normal text-main-sm micro:justify-start flex
+      flex-wrap justify-center"
   >
     <ItemMaterials
       v-if="stats.materials"

package/app/pages/book/[...bookId].vue

@@ -18,7 +18,7 @@ if (ERUDIT.config.contributors?.enabled) {
   showNewsAside();
 }
 
-const phrase = await usePhrases('begin_learning');
+const phrase = await usePhrases('book', 'begin_learning');
 const lastChangedDate = useLastChanged(() => mainContent.lastmod);
 
 await useContentSeo({
@@ -40,10 +40,21 @@ await useContentSeo({
 
 <template>
   <MainGlow />
-  <MainDecoration :decoration="mainContent.decoration" />
   <MainSectionPreamble>
+    <MainDecoration
+      role="preamble-float"
+      :decoration="mainContent.decoration"
+    />
     <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
-    <MainTitle icon="book" :title="mainContent.title" />
+    <MainDecoration
+      role="preamble-static"
+      :decoration="mainContent.decoration"
+    />
+    <MainTitle
+      icon="book"
+      :title="mainContent.title"
+      :contentLabel="phrase.book"
+    />
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <MainConnections :connections="mainContent.connections" />

package/app/pages/group/[...groupId].vue

@@ -42,10 +42,21 @@ await useContentSeo({
 
 <template>
   <MainGlow />
-  <MainDecoration :decoration="mainContent.decoration" />
   <MainSectionPreamble>
+    <MainDecoration
+      role="preamble-float"
+      :decoration="mainContent.decoration"
+    />
     <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
-    <MainTitle icon="folder-open" :title="mainContent.title" />
+    <MainDecoration
+      role="preamble-static"
+      :decoration="mainContent.decoration"
+    />
+    <MainTitle
+      icon="folder-open"
+      :title="mainContent.title"
+      :contentLabel="phrase.group"
+    />
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <MainConnections :connections="mainContent.connections" />

package/app/pages/page/[...pageId].vue

@@ -35,14 +35,27 @@ await useContentSeo({
   flags: mainContent.flags,
   connections: mainContent.connections,
 });
+
+const phrase = await usePhrases('page');
 </script>
 
 <template>
   <MainGlow />
-  <MainDecoration :decoration="mainContent.decoration" />
   <MainSectionPreamble>
+    <MainDecoration
+      role="preamble-float"
+      :decoration="mainContent.decoration"
+    />
     <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
-    <MainTitle icon="lines" :title="mainContent.title" />
+    <MainDecoration
+      role="preamble-static"
+      :decoration="mainContent.decoration"
+    />
+    <MainTitle
+      icon="lines"
+      :title="mainContent.title"
+      :contentLabel="phrase.page"
+    />
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <MainKeyLinks mode="single" :elementSnippets="mainContent.snippets" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erudit",
-  "version": "4.3.5-dev.1",
+  "version": "4.3.5",
   "type": "module",
   "description": "🤓 CMS for perfect educational sites.",
   "license": "MIT",
@@ -24,9 +24,9 @@
     }
   },
   "dependencies": {
-    "@erudit-js/cli": "4.3.5-dev.1",
-    "@erudit-js/core": "4.3.5-dev.1",
-    "@erudit-js/prose": "4.3.5-dev.1",
+    "@erudit-js/cli": "4.3.5",
+    "@erudit-js/core": "4.3.5",
+    "@erudit-js/prose": "4.3.5",
     "@floating-ui/vue": "^1.1.11",
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.2.1",
@@ -35,7 +35,7 @@
     "consola": "^3.4.2",
     "drizzle-kit": "^0.31.10",
     "drizzle-orm": "^0.45.2",
-    "esbuild": "^0.27.4",
+    "esbuild": "^0.28.0",
     "flexsearch": "^0.8.212",
     "glob": "^13.0.6",
     "image-size": "^2.0.2",

package/server/erudit/content/repository/children.ts

@@ -21,6 +21,9 @@ export async function getContentChildren(
       'nav',
     );
     const description = await getContentDescription(childNode.fullId);
+    const decoration = await ERUDIT.repository.content.ownDecoration(
+      childNode.fullId,
+    );
     const elementSnippets = await ERUDIT.repository.content.elementSnippets(
       childNode.fullId,
     );
@@ -37,6 +40,10 @@ export async function getContentChildren(
       child.description = description;
     }
 
+    if (decoration) {
+      child.decoration = decoration;
+    }
+
     if (keyLinks && keyLinks.length > 0) {
       child.keyLinks = keyLinks;
     }

package/server/erudit/content/repository/decoration.ts

@@ -1,5 +1,10 @@
 import { eq } from 'drizzle-orm';
 
+function buildDecorationPath(fullId: string, extension: string) {
+  const navNode = ERUDIT.contentNav.getNodeOrThrow(fullId);
+  return 'content/' + navNode.contentRelPath + '/decoration.' + extension;
+}
+
 export async function getContentDecoration(fullId: string) {
   const parts = fullId.split('/');
   for (let i = parts.length; i > 0; i--) {
@@ -11,13 +16,18 @@ export async function getContentDecoration(fullId: string) {
     });
 
     if (dbContent?.decorationExtension) {
-      const navNode = ERUDIT.contentNav.getNodeOrThrow(trimmedId);
-      return (
-        'content/' +
-        navNode.contentRelPath +
-        '/decoration.' +
-        dbContent.decorationExtension
-      );
+      return buildDecorationPath(trimmedId, dbContent.decorationExtension);
     }
   }
 }
+
+export async function getContentOwnDecoration(fullId: string) {
+  const dbContent = await ERUDIT.db.query.content.findFirst({
+    columns: { decorationExtension: true },
+    where: eq(ERUDIT.db.schema.content.fullId, fullId),
+  });
+
+  if (dbContent?.decorationExtension) {
+    return buildDecorationPath(fullId, dbContent.decorationExtension);
+  }
+}

package/server/erudit/content/repository/deps.ts

@@ -35,6 +35,47 @@ export async function getContentDependencies(fullId: string) {
     }
   }
 
+  // Fetch auto deps early so we can merge their unique names into overlapping
+  // hard deps. On books/groups the hard dep row itself has no uniqueNames
+  // (declared at the container level) while children's auto deps carry the
+  // exact element references from prose <Dep> tags.
+  const dbAutoDependencies = await ERUDIT.db.query.contentDeps.findMany({
+    columns: { toFullId: true, hard: true, uniqueNames: true },
+    where: and(
+      or(
+        eq(ERUDIT.db.schema.contentDeps.fromFullId, fullId),
+        like(ERUDIT.db.schema.contentDeps.fromFullId, `${fullId}/%`),
+      ),
+      eq(ERUDIT.db.schema.contentDeps.hard, false),
+    ),
+  });
+
+  // Merge unique names across rows that share the same toFullId
+  // (can happen when a topic and its children both dep on the same target).
+  const autoUniqueMap = new Map<string, Set<string>>();
+  for (const row of dbAutoDependencies) {
+    if (!autoUniqueMap.has(row.toFullId)) {
+      autoUniqueMap.set(row.toFullId, new Set());
+    }
+    if (row.uniqueNames) {
+      for (const name of row.uniqueNames.split(',')) {
+        autoUniqueMap.get(row.toFullId)!.add(name);
+      }
+    }
+  }
+
+  // When an auto dep targets the same content item as a hard dep, the auto
+  // dep will be filtered out later. Merge its unique names into the hard dep
+  // so the exact element sublisting is not lost.
+  for (const [toFullId, autoUniques] of autoUniqueMap) {
+    if (hardUniqueMap.has(toFullId)) {
+      const hardSet = hardUniqueMap.get(toFullId)!;
+      for (const name of autoUniques) {
+        hardSet.add(name);
+      }
+    }
+  }
+
   const hardToFullIds = ERUDIT.contentNav.orderIds(
     externalToFullIds(dbHardDependencies),
   );
@@ -61,31 +102,6 @@ export async function getContentDependencies(fullId: string) {
 
   const autoDependencies: ContentAutoDep[] = [];
 
-  const dbAutoDependencies = await ERUDIT.db.query.contentDeps.findMany({
-    columns: { toFullId: true, hard: true, uniqueNames: true },
-    where: and(
-      or(
-        eq(ERUDIT.db.schema.contentDeps.fromFullId, fullId),
-        like(ERUDIT.db.schema.contentDeps.fromFullId, `${fullId}/%`),
-      ),
-      eq(ERUDIT.db.schema.contentDeps.hard, false),
-    ),
-  });
-
-  // Merge unique names across rows that share the same toFullId
-  // (can happen when a topic and its children both dep on the same target).
-  const autoUniqueMap = new Map<string, Set<string>>();
-  for (const row of dbAutoDependencies) {
-    if (!autoUniqueMap.has(row.toFullId)) {
-      autoUniqueMap.set(row.toFullId, new Set());
-    }
-    if (row.uniqueNames) {
-      for (const name of row.uniqueNames.split(',')) {
-        autoUniqueMap.get(row.toFullId)!.add(name);
-      }
-    }
-  }
-
   // Skip auto-dependency if a hard dependency from the same source exists
   const autoToFullIds = ERUDIT.contentNav
     .orderIds(externalToFullIds(dbAutoDependencies))

package/server/erudit/repository.ts

@@ -16,7 +16,10 @@ import {
   getContentHeadingUnique,
   getContentUnique,
 } from './content/repository/unique';
-import { getContentDecoration } from './content/repository/decoration';
+import {
+  getContentDecoration,
+  getContentOwnDecoration,
+} from './content/repository/decoration';
 import { getContentFlags } from './content/repository/flags';
 import { getContentConnections } from './content/repository/connections';
 import { getQuoteIds } from './quote/repository/ids';
@@ -70,6 +73,7 @@ export const repository = {
     title: getContentTitle,
     description: getContentDescription,
     decoration: getContentDecoration,
+    ownDecoration: getContentOwnDecoration,
     elementSnippets: getContentElementSnippets,
     flags: getContentFlags,
     connections: getContentConnections,

package/shared/types/mainContent.ts

@@ -35,6 +35,7 @@ export interface MainContentChildrenItem {
   link: string;
   title: string;
   description?: string;
+  decoration?: string;
   keyLinks?: ElementSnippet[];
   stats?: ContentStats;
 }