erudit 4.3.2 → 4.3.3-dev.1

package/app/app.vue

@@ -2,6 +2,7 @@
 initFavicon();
 initOgImage();
 initOgSiteName();
+initWebSiteJsonLd();
 initAnalytics();
 initScrollUpWatcher();
 

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/MainTopicPartPage.vue

@@ -24,7 +24,7 @@ const phrase = await usePhrases(
   'summary_seo_description',
   'practice_seo_description',
 );
-const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
+const lastChangedDate = useLastChanged(() => mainContent.lastmod);
 
 await useContentSeo({
   title: mainContent.title,
@@ -47,6 +47,8 @@ await useContentSeo({
           : undefined,
   seo: mainContent.seo,
   snippets: mainContent.snippets,
+  breadcrumbs: mainContent.breadcrumbs,
+  lastmod: mainContent.lastmod,
 });
 </script>
 

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/analytics.ts

@@ -73,17 +73,24 @@ function yandexAnalytics(analytics: YandexAnalytics) {
 (function(m,e,t,r,i,k,a){
     m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
     m[i].l=1*new Date();
-    k=e.createElement(t),a=e.getElementsByTagName(t)[0],
-    k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
-})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
+})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=${analytics.metricsId}', 'ym');
 
-ym(${analytics.metricsId}, "init", {
+ym(
+  ${analytics.metricsId},
+  'init',
+  {
+    ssr:true,
+    webvisor:true,
     clickmap:true,
-    trackLinks:true,
+    referrer: document.referrer,
+    url: location.href,
     accurateTrackBounce:true,
-    webvisor:true
-});
-                    `.trim(),
+    trackLinks:true
+  }
+);
+`.trim(),
         },
       ],
     });

package/app/composables/favicon.ts

@@ -1,9 +1,9 @@
 import { isTopicPart, type TopicPart } from '@erudit-js/core/content/topic';
 import { isContentType, type ContentType } from '@erudit-js/core/content/type';
 
-const fallbackFaviconHref = eruditPublic('favicons/default.svg');
+const FALLBACK_FAVICON_EXT = '.svg';
 
-const faviconMimeByExt: Record<string, string> = {
+const mimeByExt: Record<string, string> = {
   '.svg': 'image/svg+xml',
   '.png': 'image/png',
   '.ico': 'image/x-icon',
@@ -14,24 +14,28 @@ const faviconMimeByExt: Record<string, string> = {
   '.bmp': 'image/bmp',
 };
 
-function getFaviconMimeType(href: string): string | undefined {
-  const pathPart = href.split(/[?#]/)[0] ?? '';
-  const dot = pathPart.lastIndexOf('.');
-  if (dot === -1) return undefined;
-  const ext = pathPart.slice(dot).toLowerCase();
-  return faviconMimeByExt[ext];
+function extFromConfigHref(key: string): string {
+  const href =
+    (ERUDIT.config.favicon as Record<string, string> | undefined)?.[key] ||
+    ERUDIT.config.favicon?.default;
+  if (!href) return FALLBACK_FAVICON_EXT;
+  const path = href.split(/[?#]/)[0] ?? '';
+  const dot = path.lastIndexOf('.');
+  return dot === -1 ? '' : path.slice(dot).toLowerCase();
 }
 
-export const useFaviconHref = () => {
-  return useState<string>('favicon-href', () => fallbackFaviconHref);
-};
+function mimeFromConfigHref(key: string): string | undefined {
+  return mimeByExt[extFromConfigHref(key)];
+}
+
+export const useFaviconKey = () =>
+  useState<string>('favicon-key', () => 'default');
 
 export function useFavicon() {
-  const faviconHref = useFaviconHref();
+  const faviconKey = useFaviconKey();
 
   function showDefaultFavicon() {
-    const defaultFaviconHref = ERUDIT.config.favicon?.default;
-    faviconHref.value = defaultFaviconHref || fallbackFaviconHref;
+    faviconKey.value = 'default';
   }
 
   function showContentFavicon(
@@ -40,15 +44,13 @@ export function useFavicon() {
       | { type: 'topic'; part: TopicPart },
   ) {
     if (args.type === 'topic') {
-      const topicPartHref = ERUDIT.config.favicon?.[args.part];
-      if (topicPartHref) {
-        faviconHref.value = topicPartHref;
+      if (ERUDIT.config.favicon?.[args.part]) {
+        faviconKey.value = args.part;
         return;
       }
     } else {
-      const typeHref = ERUDIT.config.favicon?.[args.type];
-      if (typeHref) {
-        faviconHref.value = typeHref;
+      if (ERUDIT.config.favicon?.[args.type]) {
+        faviconKey.value = args.type;
         return;
       }
     }
@@ -64,22 +66,43 @@ export function useFavicon() {
 
 export function initFavicon() {
   const withBaseUrl = useBaseUrl();
-  const faviconHref = useFaviconHref();
+  const faviconKey = useFaviconKey();
   const { showDefaultFavicon, showContentFavicon } = useFavicon();
   showDefaultFavicon();
 
   useHead({
     link: [
       computed(() => {
-        const href = withBaseUrl(faviconHref.value);
-        const type = getFaviconMimeType(faviconHref.value);
+        const key = faviconKey.value;
+        const ext = extFromConfigHref(key);
+        const mime = mimeFromConfigHref(key);
         return {
           key: 'favicon',
           rel: 'icon',
-          href,
-          ...(type && { type }),
+          href: withBaseUrl(`/favicon/${key}/source${ext}`),
+          ...(mime && { type: mime }),
         };
       }),
+      computed(() => ({
+        key: 'favicon-png-48',
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '48x48',
+        href: withBaseUrl(`/favicon/${faviconKey.value}/48.png`),
+      })),
+      computed(() => ({
+        key: 'favicon-png-32',
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: withBaseUrl(`/favicon/${faviconKey.value}/32.png`),
+      })),
+      computed(() => ({
+        key: 'apple-touch-icon',
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: withBaseUrl(`/favicon/${faviconKey.value}/180.png`),
+      })),
     ],
   });
 
@@ -89,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

@@ -0,0 +1,123 @@
+import type { Breadcrumbs } from '../../shared/types/breadcrumbs';
+import type { ElementSnippet } from '../../shared/types/elementSnippet';
+
+export function useJsonLd(key: string, data: Record<string, unknown>) {
+  useHead({
+    script: [
+      {
+        key,
+        type: 'application/ld+json',
+        innerHTML: JSON.stringify(data),
+      },
+    ],
+  });
+}
+
+export function initWebSiteJsonLd() {
+  const siteTitle =
+    ERUDIT.config.seo?.siteTitle || ERUDIT.config.asideMajor?.siteInfo?.title;
+
+  if (!siteTitle) {
+    return;
+  }
+
+  const runtimeConfig = useRuntimeConfig();
+  const siteUrl = runtimeConfig.public.siteUrl as string;
+
+  if (!siteUrl) {
+    return;
+  }
+
+  useJsonLd('jsonld-website', {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: siteTitle,
+    url: siteUrl,
+  });
+}
+
+export function useContentBreadcrumbsJsonLd(breadcrumbs?: Breadcrumbs) {
+  if (!breadcrumbs || breadcrumbs.length === 0) {
+    return;
+  }
+
+  const withSiteUrl = useSiteUrl();
+
+  useJsonLd('jsonld-breadcrumbs', {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumbs.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: formatText(item.title),
+      item: withSiteUrl(item.link),
+    })),
+  });
+}
+
+export function useContentArticleJsonLd(args: {
+  title: string;
+  description?: string;
+  urlPath: string;
+  contentType: string;
+  lastmod?: string;
+  keyElements?: ElementSnippet[];
+  breadcrumbs?: Breadcrumbs;
+}) {
+  const withSiteUrl = useSiteUrl();
+
+  const siteTitle =
+    ERUDIT.config.seo?.siteTitle || ERUDIT.config.asideMajor?.siteInfo?.title;
+
+  const schemaType =
+    args.contentType === 'book'
+      ? 'Book'
+      : args.contentType === 'group'
+        ? 'Course'
+        : 'Article';
+
+  const data: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': schemaType,
+    ...(schemaType === 'Article'
+      ? { headline: formatText(args.title) }
+      : { name: formatText(args.title) }),
+    url: withSiteUrl(args.urlPath),
+  };
+
+  if (args.description) {
+    data.description = formatText(args.description);
+  }
+
+  if (args.lastmod) {
+    data.dateModified = args.lastmod;
+  }
+
+  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/lastmod.ts

@@ -0,0 +1,6 @@
+export function useLastChanged(lastmod: MaybeRefOrGetter<string | undefined>) {
+  return computed(() => {
+    const val = toValue(lastmod);
+    return val ? new Date(val) : undefined;
+  });
+}

package/app/composables/og.ts

@@ -1,6 +1,8 @@
 import type { ContentSeo } from '@erudit-js/core/content/seo';
 import { toSeoSnippet } from '@erudit-js/prose';
 
+import type { Breadcrumbs } from '../../shared/types/breadcrumbs';
+
 export function initOgSiteName() {
   const siteTitle =
     ERUDIT.config.seo?.siteTitle || ERUDIT.config.asideMajor?.siteInfo?.title;
@@ -91,6 +93,8 @@ export async function useContentSeo(args: {
   description?: string;
   seo?: ContentSeo;
   snippets?: ElementSnippet[];
+  breadcrumbs?: Breadcrumbs;
+  lastmod?: string;
 }) {
   const canUseBookTitle = ERUDIT.config.seo?.useBookSiteTitle;
 
@@ -142,6 +146,25 @@ export async function useContentSeo(args: {
     });
   }
 
+  //
+  // JSON-LD structured data
+  //
+
+  useContentBreadcrumbsJsonLd(args.breadcrumbs);
+
+  useContentArticleJsonLd({
+    title: args.seo?.title || args.title,
+    description: args.seo?.description || args.description,
+    urlPath: canonicalPath,
+    contentType:
+      args.contentTypePath.type === 'topic'
+        ? 'article'
+        : args.contentTypePath.type,
+    lastmod: args.lastmod,
+    keyElements: args.snippets?.filter((snippet) => !!snippet.key),
+    breadcrumbs: args.breadcrumbs,
+  });
+
   //
   // SEO snippets
   //

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

@@ -19,7 +19,7 @@ if (ERUDIT.config.contributors?.enabled) {
 }
 
 const phrase = await usePhrases('begin_learning');
-const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
+const lastChangedDate = useLastChanged(() => mainContent.lastmod);
 
 await useContentSeo({
   title: mainContent.title,
@@ -29,6 +29,8 @@ await useContentSeo({
     contentId: mainContent.shortId,
   },
   seo: mainContent.seo,
+  breadcrumbs: mainContent.breadcrumbs,
+  lastmod: mainContent.lastmod,
 });
 </script>
 

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

@@ -19,7 +19,7 @@ if (ERUDIT.config.contributors?.enabled) {
 }
 
 const phrase = await usePhrases('group', 'begin_learning');
-const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
+const lastChangedDate = useLastChanged(() => mainContent.lastmod);
 
 await useContentSeo({
   title: mainContent.title,
@@ -31,6 +31,8 @@ await useContentSeo({
     contentId: mainContent.shortId,
   },
   seo: mainContent.seo,
+  breadcrumbs: mainContent.breadcrumbs,
+  lastmod: mainContent.lastmod,
 });
 </script>