erudit 4.3.3 → 4.3.4-dev.2

package/app/components/main/MainBreadcrumbs.vue

@@ -1,28 +1,36 @@
 <script lang="ts" setup>
 defineProps<{ breadcrumbs: Breadcrumbs }>();
+
+const phrase = await usePhrases('breadcrumb');
 </script>
 
 <template>
-  <section
+  <nav
     v-if="breadcrumbs.length > 0"
-    class="gap-small max-micro:justify-center px-main py-main-half flex
-      flex-wrap"
+    :aria-label="phrase.breadcrumb"
+    class="px-main py-main-half"
   >
-    <EruditLink
-      v-for="(breadcrumb, i) of breadcrumbs"
-      :to="breadcrumb.link"
-      class="gap-small text-text-dimmed hocus:text-text-muted flex items-center
-        transition-[color]"
+    <ol
+      class="gap-small max-micro:justify-center m-0 flex list-none flex-wrap
+        p-0"
     >
-      <MaybeMyIcon :name="breadcrumb.icon" class="text-[1.2em]" />
-      <span>{{ formatText(breadcrumb.title) }}</span>
-      <MyIcon
-        name="chevron-right"
-        :class="{
-          'relative -left-[3px]': true,
-          'rotate-90': i === breadcrumbs.length - 1,
-        }"
-      />
-    </EruditLink>
-  </section>
+      <li v-for="(breadcrumb, i) of breadcrumbs">
+        <EruditLink
+          :to="breadcrumb.link"
+          class="gap-small text-text-dimmed hocus:text-text-muted flex
+            items-center transition-[color]"
+        >
+          <MaybeMyIcon :name="breadcrumb.icon" class="text-[1.2em]" />
+          <span>{{ formatText(breadcrumb.title) }}</span>
+          <MyIcon
+            name="chevron-right"
+            :class="{
+              'relative -left-[3px]': true,
+              'rotate-90': i === breadcrumbs.length - 1,
+            }"
+          />
+        </EruditLink>
+      </li>
+    </ol>
+  </nav>
 </template>

package/app/components/main/MainKeyLinks.vue

@@ -19,16 +19,22 @@ const phrase = await usePhrases('key_elements');
 
 <template>
   <template v-if="keyLinks">
-    <section v-if="mode === 'single'" class="px-main py-main-half">
+    <nav
+      v-if="mode === 'single'"
+      :aria-label="phrase.key_elements"
+      class="px-main py-main-half"
+    >
       <MainSubTitle :title="phrase.key_elements + ':'" />
-      <div
+      <ul
         :style="{ '--keyBg': 'var(--color-bg-aside)' }"
-        class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
-          justify-center"
+        class="gap-small micro:gap-normal micro:justify-start m-0 flex list-none
+          flex-wrap justify-center p-0"
       >
-        <MainKeyLink v-for="keyLink of keyLinks" :keyLink />
-      </div>
-    </section>
+        <li v-for="keyLink of keyLinks">
+          <MainKeyLink :keyLink />
+        </li>
+      </ul>
+    </nav>
     <div
       v-else
       :style="{ '--keyBg': 'var(--color-bg-main)' }"

package/app/components/main/MainSubTitle.vue

@@ -3,9 +3,10 @@ defineProps<{ title: string }>();
 </script>
 
 <template>
-  <div
-    class="text-main-sm micro:text-left pb-main-half text-center font-semibold"
+  <h2
+    class="text-main-sm micro:text-left pb-main-half m-0 text-center
+      font-semibold"
   >
     {{ formatText(title) }}
-  </div>
+  </h2>
 </template>

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

@@ -27,11 +27,15 @@ const parentExternalsCount = computed(() => {
 </script>
 
 <template>
-  <section v-if="connections" class="px-main py-main-half">
+  <section
+    v-if="connections"
+    :aria-label="phrase.connections"
+    class="px-main py-main-half"
+  >
     <MainSubTitle :title="phrase.connections + ':'" />
-    <div
-      class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
-        justify-center"
+    <ul
+      class="gap-small micro:gap-normal micro:justify-start m-0 flex list-none
+        flex-wrap justify-center p-0"
     >
       <template
         v-for="(items, type) of {
@@ -40,49 +44,52 @@ const parentExternalsCount = computed(() => {
           dependents: connections.dependents,
         }"
       >
+        <li v-if="items && items.length > 0">
+          <MainConnectionsButton
+            :type="type"
+            :count="items.length"
+            :active="currentType === type"
+            @click="
+              currentType === type
+                ? (currentType = undefined)
+                : (currentType = type)
+            "
+          />
+        </li>
+      </template>
+      <li v-if="connections.externals">
         <MainConnectionsButton
-          v-if="items && items.length > 0"
-          :type="type"
-          :count="items.length"
-          :active="currentType === type"
+          type="externals"
+          :active="currentType === 'externals'"
           @click="
-            currentType === type
+            currentType === 'externals'
               ? (currentType = undefined)
-              : (currentType = type)
+              : (currentType = 'externals')
           "
-        />
-      </template>
-      <MainConnectionsButton
-        v-if="connections.externals"
-        type="externals"
-        :active="currentType === 'externals'"
-        @click="
-          currentType === 'externals'
-            ? (currentType = undefined)
-            : (currentType = 'externals')
-        "
-      >
-        <template #after>
-          <div
-            v-if="connections.externals"
-            class="gap-small *:border-border *:pl-small flex items-center
-              font-bold *:border-l"
-          >
+        >
+          <template #after>
             <div
-              v-if="ownExternalsCount"
-              class="flex items-center gap-1 text-amber-600 dark:text-amber-400"
+              v-if="connections.externals"
+              class="gap-small *:border-border *:pl-small flex items-center
+                font-bold *:border-l"
             >
-              <MyIcon name="arrow/left" class="-scale-x-100" />
-              <span>{{ ownExternalsCount }}</span>
-            </div>
-            <div v-if="parentExternalsCount" class="flex items-center gap-1">
-              <MyIcon name="arrow/up-to-right" />
-              <span>{{ parentExternalsCount }}</span>
+              <div
+                v-if="ownExternalsCount"
+                class="flex items-center gap-1 text-amber-600
+                  dark:text-amber-400"
+              >
+                <MyIcon name="arrow/left" class="-scale-x-100" />
+                <span>{{ ownExternalsCount }}</span>
+              </div>
+              <div v-if="parentExternalsCount" class="flex items-center gap-1">
+                <MyIcon name="arrow/up-to-right" />
+                <span>{{ parentExternalsCount }}</span>
+              </div>
             </div>
-          </div>
-        </template>
-      </MainConnectionsButton>
-    </div>
+          </template>
+        </MainConnectionsButton>
+      </li>
+    </ul>
     <template v-if="currentType && connections[currentType]">
       <Deps
         v-if="currentType !== 'externals'"

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

@@ -15,27 +15,26 @@ const phrase = await usePhrases('stats');
 <template>
   <section
     v-if="mode === 'single' && (stats || lastChangedDate)"
+    :aria-label="phrase.stats"
     class="px-main py-main-half"
   >
     <MainSubTitle :title="phrase.stats + ':'" />
-    <div
-      class="micro:justify-start gap-small micro:gap-normal flex flex-wrap
-        justify-center"
+    <ul
+      class="micro:justify-start gap-small micro:gap-normal m-0 flex list-none
+        flex-wrap justify-center p-0"
     >
-      <ItemMaterials
-        v-if="stats?.materials"
-        :count="stats.materials"
-        mode="detailed"
-      />
-      <ItemElement
-        v-if="stats?.elements"
-        v-for="(count, schemaName) of stats.elements"
-        :schemaName
-        :count
-        mode="detailed"
-      />
-      <ItemLastChanged v-if="lastChangedDate" :date="lastChangedDate" />
-    </div>
+      <li v-if="stats?.materials">
+        <ItemMaterials :count="stats.materials" mode="detailed" />
+      </li>
+      <template v-if="stats?.elements">
+        <li v-for="(count, schemaName) of stats.elements">
+          <ItemElement :schemaName :count mode="detailed" />
+        </li>
+      </template>
+      <li v-if="lastChangedDate">
+        <ItemLastChanged :date="lastChangedDate" />
+      </li>
+    </ul>
   </section>
   <div
     v-else-if="mode === 'children' && stats"

package/app/composables/favicon.ts

@@ -112,7 +112,7 @@ export function initFavicon() {
   let stopWatchingRoute: ReturnType<typeof watch> | undefined;
   onMounted(() => {
     stopWatchingRoute = watch(
-      route,
+      () => route.path,
       () => {
         clearTimeout(contentFaviconChangeTimeout);
 

package/app/composables/jsonLd.ts

@@ -1,4 +1,5 @@
 import type { Breadcrumbs } from '../../shared/types/breadcrumbs';
+import type { ElementSnippet } from '../../shared/types/elementSnippet';
 
 export function useJsonLd(key: string, data: Record<string, unknown>) {
   useHead({
@@ -60,6 +61,8 @@ export function useContentArticleJsonLd(args: {
   urlPath: string;
   contentType: string;
   lastmod?: string;
+  keyElements?: ElementSnippet[];
+  breadcrumbs?: Breadcrumbs;
 }) {
   const withSiteUrl = useSiteUrl();
 
@@ -90,12 +93,31 @@ export function useContentArticleJsonLd(args: {
     data.dateModified = args.lastmod;
   }
 
-  if (siteTitle) {
+  const parentBreadcrumb =
+    args.breadcrumbs && args.breadcrumbs.length >= 1
+      ? args.breadcrumbs[args.breadcrumbs.length - 1]
+      : undefined;
+
+  if (parentBreadcrumb) {
+    data.isPartOf = {
+      '@type': 'WebPage',
+      name: formatText(parentBreadcrumb.title),
+      url: withSiteUrl(parentBreadcrumb.link),
+    };
+  } else if (siteTitle) {
     data.isPartOf = {
       '@type': 'WebSite',
       name: siteTitle,
     };
   }
 
+  if (args.keyElements && args.keyElements.length > 0) {
+    data.hasPart = args.keyElements.map((el) => ({
+      '@type': 'DefinedTerm',
+      name: formatText(el.seo?.title || el.key?.title || el.title),
+      url: withSiteUrl(el.link),
+    }));
+  }
+
   useJsonLd('jsonld-content', data);
 }

package/app/composables/og.ts

@@ -161,6 +161,8 @@ export async function useContentSeo(args: {
         ? 'article'
         : args.contentTypePath.type,
     lastmod: args.lastmod,
+    keyElements: args.snippets?.filter((snippet) => !!snippet.key),
+    breadcrumbs: args.breadcrumbs,
   });
 
   //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "erudit",
-  "version": "4.3.3",
+  "version": "4.3.4-dev.2",
   "type": "module",
   "description": "🤓 CMS for perfect educational sites.",
   "license": "MIT",
@@ -24,9 +24,9 @@
     }
   },
   "dependencies": {
-    "@erudit-js/cli": "4.3.3",
-    "@erudit-js/core": "4.3.3",
-    "@erudit-js/prose": "4.3.3",
+    "@erudit-js/cli": "4.3.4-dev.2",
+    "@erudit-js/core": "4.3.4-dev.2",
+    "@erudit-js/prose": "4.3.4-dev.2",
     "@floating-ui/vue": "^1.1.11",
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.2.1",
@@ -43,7 +43,7 @@
     "nuxt": "4.4.2",
     "nuxt-my-icons": "1.2.2",
     "perfect-debounce": "^2.1.0",
-    "satori": "^0.25.0",
+    "satori": "^0.26.0",
     "sharp": "^0.34.5",
     "tailwindcss": "^4.2.1",
     "ts-xor": "^1.3.0",

package/server/erudit/build.ts

@@ -61,6 +61,14 @@ export async function buildServerErudit() {
 // Watcher
 //
 
+const watchedProjectDirs = [
+  'content',
+  'contributors',
+  'cameos',
+  'sponsors',
+  'news',
+] as const;
+
 export async function tryServerWatchProject() {
   if (ERUDIT.mode === 'static') {
     return;
@@ -93,39 +101,14 @@ export async function tryServerWatchProject() {
     }
   }, 300);
 
-  function isWatched(path: string) {
-    if (path.startsWith(ERUDIT.paths.project('content') + '/')) {
-      return true;
-    }
-
-    if (path.startsWith(ERUDIT.paths.project('contributors') + '/')) {
-      return true;
-    }
-
-    if (path.startsWith(ERUDIT.paths.project('cameos') + '/')) {
-      return true;
-    }
-
-    if (path.startsWith(ERUDIT.paths.project('sponsors') + '/')) {
-      return true;
-    }
-
-    if (path.startsWith(ERUDIT.paths.project('news') + '/')) {
-      return true;
-    }
-  }
-
-  const watcher = chokidar.watch(ERUDIT.paths.project(), {
-    ignoreInitial: true,
-  });
+  const watcher = chokidar.watch(
+    watchedProjectDirs.map((dir) => ERUDIT.paths.project(dir)),
+    { ignoreInitial: true },
+  );
 
   watcher.on('all', (_, path) => {
     path = sn(path);
 
-    if (!isWatched(path)) {
-      return;
-    }
-
     if (pendingRebuild) {
       return;
     }

package/server/erudit/db/repository/pushProblemScript.ts

@@ -23,8 +23,11 @@ export async function pushProblemScript(
     relativePath = problemScriptSrc;
   }
 
-  await ERUDIT.db.insert(ERUDIT.db.schema.problemScripts).values({
-    problemScriptSrc: relativePath,
-    contentFullId,
-  });
+  await ERUDIT.db
+    .insert(ERUDIT.db.schema.problemScripts)
+    .values({
+      problemScriptSrc: relativePath,
+      contentFullId,
+    })
+    .onConflictDoNothing();
 }

package/server/erudit/language/list/en.ts

@@ -46,6 +46,7 @@ export const phrases: LanguagePhrases = {
   flag_secondary: 'Additional',
   flag_secondary_description:
     'This is an optional material is for learners who want to dive deeper and gain additional knowledge and context.',
+  breadcrumb: 'Breadcrumb',
   key_elements: 'Key elements',
   stats: 'Statistics',
   connections: 'Connections',

package/server/erudit/language/list/ru.ts

@@ -47,6 +47,7 @@ export const phrases: LanguagePhrases = {
   flag_secondary: 'Дополнение',
   flag_secondary_description:
     'Это дополнительный материал для тех, кто хочет глубже погрузиться в предмет и получить дополнительные знания и контекст.',
+  breadcrumb: 'Путь',
   key_elements: 'Ключевые элементы',
   stats: 'Статистика',
   connections: 'Связи',

package/shared/types/language.ts

@@ -52,6 +52,7 @@ export type LanguagePhrases = Phrases<{
   flag_advanced_description: string;
   flag_secondary: string;
   flag_secondary_description: string;
+  breadcrumb: string;
   key_elements: string;
   stats: string;
   connections: string;