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

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

@@ -2,13 +2,24 @@
 import Deps from './Deps.vue';
 import Externals from './Externals.vue';
 
-defineProps<{ connections?: ContentConnections }>();
+const { connections } = defineProps<{ connections?: ContentConnections }>();
 
 const phrase = await usePhrases('connections');
 
 const currentType = ref<keyof ContentConnections | undefined>(
     'hardDependencies',
 );
+
+const ownExternalsCount = computed(() => {
+    return connections?.externals?.find((ext) => ext.type === 'own')?.items
+        .length;
+});
+
+const parentExternalsCount = computed(() => {
+    return connections?.externals
+        ?.filter((ext) => ext.type === 'parent')
+        .reduce((sum, ext) => sum + ext.items.length, 0);
+});
 </script>
 
 <template>
@@ -18,17 +29,59 @@ const currentType = ref<keyof ContentConnections | undefined>(
             class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
                 justify-center"
         >
+            <template
+                v-for="(items, type) of {
+                    hardDependencies: connections.hardDependencies,
+                    autoDependencies: connections.autoDependencies,
+                    dependents: connections.dependents,
+                }"
+            >
+                <MainConnectionsButton
+                    v-if="items && items.length > 0"
+                    :type="type"
+                    :count="items.length"
+                    :active="currentType === type"
+                    @click="
+                        currentType === type
+                            ? (currentType = undefined)
+                            : (currentType = type)
+                    "
+                />
+            </template>
             <MainConnectionsButton
-                v-for="(value, type) of connections"
-                :type="type"
-                :count="value!.length"
-                :active="currentType === type"
+                v-if="connections.externals"
+                type="externals"
+                :active="currentType === 'externals'"
                 @click="
-                    currentType === type
+                    currentType === 'externals'
                         ? (currentType = undefined)
-                        : (currentType = type)
+                        : (currentType = 'externals')
                 "
-            />
+            >
+                <template #after>
+                    <div
+                        v-if="connections.externals"
+                        class="gap-small *:border-border *:pl-small flex
+                            items-center font-bold *:border-l"
+                    >
+                        <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>
+                </template>
+            </MainConnectionsButton>
         </div>
         <template v-if="currentType && connections[currentType]">
             <Deps

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

@@ -4,7 +4,7 @@ import type { MyIconName } from '#my-icons';
 const { type, active } = defineProps<{
     type: 'hardDependencies' | 'autoDependencies' | 'dependents' | 'externals';
     active?: boolean;
-    count: number;
+    count?: number;
 }>();
 
 const isHard = type === 'hardDependencies';
@@ -75,6 +75,7 @@ const dynamicClasses = computed(() => {
     >
         <MyIcon :name="icon" class="text-[1.2em]" />
         <span>{{ formatText(title) }}</span>
-        <span class="font-bold">{{ count }}</span>
+        <span v-if="count" class="font-bold">{{ count }}</span>
+        <slot name="after"></slot>
     </button>
 </template>

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

@@ -2,9 +2,8 @@
 
 <template>
     <div
-        class="nice-scrollbars border-border gap-main-half mt-normal py-normal
-            relative flex max-h-[500px] flex-col overflow-auto border-t border-b
-            transition-[border]"
+        class="nice-scrollbars border-border mt-normal relative overflow-auto
+            border-t border-b"
     >
         <slot></slot>
     </div>

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

@@ -22,8 +22,7 @@ const { mode = 'detailed' } = defineProps<{
     <div
         v-else
         class="gap-small px-small text-main-sm border-border bg-bg-aside flex
-            items-center rounded-xl border py-1
-            transition-[background,color,border]"
+            items-center rounded-xl border py-1"
     >
         <MaybeMyIcon
             :name="icon"

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

@@ -15,8 +15,8 @@ const phrase = await usePhrases('stats');
         <section v-if="mode === 'single'" class="px-main py-main-half">
             <MainSubTitle :title="phrase.stats + ':'" />
             <div
-                class="micro:justify-start gap-normal flex flex-wrap
-                    justify-center"
+                class="micro:justify-start gap-small micro:gap-normal flex
+                    flex-wrap justify-center"
             >
                 <ItemMaterials
                     v-if="stats.materials"
@@ -32,7 +32,10 @@ const phrase = await usePhrases('stats');
                 />
             </div>
         </section>
-        <div v-else class="gap-normal text-main-sm flex flex-wrap">
+        <div
+            v-else
+            class="gap-small micro:gap-normal text-main-sm flex flex-wrap"
+        >
             <ItemMaterials
                 v-if="stats.materials"
                 :count="stats.materials"

package/app/components/preview/Preview.vue

@@ -117,8 +117,7 @@ await usePhrases(
                     `border-border bg-bg-main micro:max-h-[70dvh]
                     pointer-events-auto absolute bottom-0 max-h-[90dvh] w-full
                     touch-auto overflow-hidden rounded-[25px] rounded-b-none
-                    border-t
-                    transition-[box-shadow,background,border,max-height,height,translate]`,
+                    border-t transition-[max-height,height,translate]`,
                     previewState.opened
                         ? `translate-y-0
                             shadow-[0px_-10px_15px_5px_light-dark(rgba(0,0,0,0.1),rgba(255,255,255,0.05))]`

package/app/components/preview/PreviewScreen.vue

@@ -19,8 +19,7 @@ const { closePreview, hasPreviousRequest, setPreviousPreview } = usePreview();
         </div>
         <div
             class="border-border gap-small micro:gap-normal micro:h-[60px]
-                px-main flex h-[54px] shrink-0 items-center border-t
-                transition-[border]"
+                px-main flex h-[54px] shrink-0 items-center border-t"
         >
             <MaybeMyIcon
                 :name="icon"

package/app/components/site/SiteAside.vue

@@ -31,8 +31,7 @@ const opened = computed(() => {
             <div
                 :class="[
                     `bg-bg-aside absolute top-0 left-0 h-full w-full
-                    border-[light-dark(var(--color-neutral-200),var(--color-neutral-800))]
-                    transition-[background,border,backdrop-filter,box-shadow]`,
+                    border-[light-dark(var(--color-neutral-200),var(--color-neutral-800))]`,
                     {
                         'border-e': isMajor,
                         'border-s': isMinor,
@@ -55,8 +54,7 @@ const opened = computed(() => {
                         `pointer-events-none absolute top-0 h-full w-full
                         touch-none bg-linear-to-l
                         from-[light-dark(rgba(0,0,0,0.02),rgba(0,0,0,0.1))]
-                        via-transparent via-[3px] opacity-100
-                        transition-opacity`,
+                        via-transparent via-[3px] opacity-100`,
                         {
                             '-scale-100': isMinor,
                             'max-aside1:opacity-0': opened && isMajor,

package/app/components/site/SiteMain.vue

@@ -5,10 +5,7 @@
     >
         <div class="text-main" data-erudit-main>
             <Preview />
-            <div
-                class="bg-bg-main min-h-dvh transition-[background]
-                    dark:bg-[#212121]"
-            >
+            <div class="bg-bg-main min-h-dvh dark:bg-[#212121]">
                 <slot></slot>
             </div>
         </div>

package/app/components/tree/TreeItem.vue

@@ -16,7 +16,7 @@ defineProps<{
             :style="{ '--level': level ? +level : 0 }"
             :class="[
                 `px-normal py-small hocus:bg-bg-accent flex cursor-pointer
-                items-center gap-[calc(var(--spacing-normal)/1.6)] text-sm
+                items-center gap-[calc(var(--spacing-normal)/2)] text-[.85em]
                 transition-[background,color]`,
                 'pl-[calc(var(--spacing-normal)*(var(--level)+1)-2px)]',
                 {

package/app/composables/og.ts

@@ -118,9 +118,26 @@ export async function useContentSeo(args: {
             }
 
             const elementPhrase = await getElementPhrase(snippet.schemaName);
+
+            const title = (() => {
+                if (snippet.seo?.title) {
+                    return snippet.seo.title;
+                } else {
+                    return snippet.title;
+                }
+            })();
+
+            const description = (() => {
+                if (snippet.seo?.description) {
+                    return snippet.seo.description;
+                } else {
+                    return snippet.description;
+                }
+            })();
+
             setupSeo({
-                title: `${snippet.title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
-                description: snippet.description || '',
+                title: `${title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
+                description: description || '',
                 urlPath: snippet.link,
             });
         },

package/app/pages/contributor/[contributorId].vue

@@ -86,8 +86,7 @@ useStandartSeo({
                         :style="{ '--mediaColor': color }"
                         class="border-bg-main micro:size-[110px] size-[80px]
                             rounded-full border-2
-                            [box-shadow:0_0_16px_0_var(--color)]
-                            transition-[border]"
+                            [box-shadow:0_0_16px_0_var(--color)]"
                     />
                 </div>
                 <div

package/app/pages/index.vue

@@ -38,10 +38,7 @@ const phrase = await usePhrases('x_contributors', 'x_sponsors');
             :style="{
                 'max-width': `min(${indexPage.topImage.maxWidth || '100%'}, 100%)`,
             }"
-            :class="[
-                'pt-main-half px-main mx-auto block transition-[filter]',
-                logotypeInvertClass,
-            ]"
+            :class="['pt-main-half px-main mx-auto block', logotypeInvertClass]"
         />
 
         <!-- Main Data -->

package/app/styles/main.css

@@ -90,7 +90,6 @@
         color: var(--color-text);
         font-size: 18px;
         interpolate-size: allow-keywords;
-        @apply transition-[background];
     }
 
     :root[data-theme='light'] {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "erudit",
-    "version": "4.0.0-dev.1",
+    "version": "4.0.0-dev.2",
     "type": "module",
     "description": "🤓 CMS for perfect educational sites.",
     "license": "MIT",
@@ -29,9 +29,9 @@
         "test": "bun vitest run"
     },
     "dependencies": {
-        "@erudit-js/cli": "4.0.0-dev.1",
-        "@erudit-js/core": "4.0.0-dev.1",
-        "@erudit-js/prose": "4.0.0-dev.1",
+        "@erudit-js/cli": "4.0.0-dev.2",
+        "@erudit-js/core": "4.0.0-dev.2",
+        "@erudit-js/prose": "4.0.0-dev.2",
         "@floating-ui/vue": "^1.1.9",
         "@jsprose/core": "^1.0.0",
         "@tailwindcss/vite": "^4.1.17",

package/server/erudit/cameos/build.ts

@@ -1,44 +1,96 @@
-import { readdirSync, readFileSync } from 'node:fs';
+import { readdirSync, readFileSync, existsSync } from 'node:fs';
 import { eq } from 'drizzle-orm';
 import type { Cameo, CameoConfig } from '@erudit-js/core/cameo';
 
+let initialBuild = true;
+
+const cameosRoot = () => `${ERUDIT.config.paths.project}/cameos`;
+
 export async function buildCameos() {
     ERUDIT.log.debug.start('Building cameos...');
 
-    await ERUDIT.db.delete(ERUDIT.db.schema.cameos);
-    await ERUDIT.db
-        .delete(ERUDIT.db.schema.files)
-        .where(eq(ERUDIT.db.schema.files.role, 'cameo-avatar'));
-
-    let cameoIds: string[] = [];
+    const isInitial = initialBuild;
+    initialBuild = false;
 
-    try {
-        cameoIds = readdirSync(ERUDIT.config.paths.project + '/cameos', {
-            withFileTypes: true,
-        })
-            .filter((entry) => entry.isDirectory())
-            .map((entry) => entry.name);
-    } catch {}
+    const cameoIds = collectCameoIds(isInitial);
 
-    let cameoCount = 0;
+    if (!cameoIds.size) {
+        ERUDIT.log.info(
+            isInitial
+                ? 'Skipping cameos — no cameos found.'
+                : 'Skipping cameos — nothing changed.',
+        );
+        return;
+    }
 
     for (const cameoId of cameoIds) {
+        await cleanupCameo(cameoId);
+    }
+
+    const existingIds = [...cameoIds].filter((id) =>
+        existsSync(`${cameosRoot()}/${id}`),
+    );
+
+    if (!existingIds.length) {
+        return;
+    }
+
+    for (const cameoId of existingIds) {
         await buildCameo(cameoId);
-        cameoCount++;
     }
 
     ERUDIT.log.success(
-        `Cameos build complete! (${ERUDIT.log.stress(cameoCount)})`,
+        isInitial
+            ? `Cameos build complete! (${ERUDIT.log.stress(cameoIds.size)})`
+            : `Cameos updated: ${ERUDIT.log.stress(existingIds.join(', '))}`,
     );
 }
 
+//
+//
+//
+
+function collectCameoIds(initial: boolean): Set<string> {
+    if (initial) {
+        try {
+            return new Set(
+                readdirSync(cameosRoot(), { withFileTypes: true })
+                    .filter((entry) => entry.isDirectory())
+                    .map((entry) => entry.name),
+            );
+        } catch {
+            return new Set();
+        }
+    }
+
+    const ids = new Set<string>();
+
+    for (const file of ERUDIT.changedFiles.values()) {
+        if (!file.startsWith(`${cameosRoot()}/`)) continue;
+        const id = file.replace(`${cameosRoot()}/`, '').split('/')[0];
+        if (id) ids.add(id);
+    }
+
+    return ids;
+}
+
+async function cleanupCameo(cameoId: string) {
+    await ERUDIT.db
+        .delete(ERUDIT.db.schema.cameos)
+        .where(eq(ERUDIT.db.schema.cameos.cameoId, cameoId));
+
+    await ERUDIT.db
+        .delete(ERUDIT.db.schema.files)
+        .where(eq(ERUDIT.db.schema.files.role, 'cameo-avatar'));
+}
+
 async function buildCameo(cameoId: string) {
     ERUDIT.log.debug.start(`Building cameo ${ERUDIT.log.stress(cameoId)}...`);
 
-    const cameoDirectory = ERUDIT.config.paths.project + '/cameos/' + cameoId;
-    const cameoFiles = readdirSync(cameoDirectory);
+    const dir = `${cameosRoot()}/${cameoId}`;
+    const files = readdirSync(dir);
 
-    const hasConfig = cameoFiles.some(
+    const hasConfig = files.some(
         (file) => file === 'cameo.ts' || file === 'cameo.js',
     );
 
@@ -52,9 +104,7 @@ async function buildCameo(cameoId: string) {
     let cameoConfig: CameoConfig;
 
     try {
-        cameoConfig = (await ERUDIT.import(
-            `${cameoDirectory}/cameo`,
-        )) as CameoConfig;
+        cameoConfig = (await ERUDIT.import(`${dir}/cameo`)) as CameoConfig;
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         ERUDIT.log.error(
@@ -63,7 +113,7 @@ async function buildCameo(cameoId: string) {
         return;
     }
 
-    const avatarExtension = cameoFiles
+    const avatarExtension = files
         .find((file) => file.startsWith('avatar.'))
         ?.split('.')
         .pop();
@@ -76,14 +126,14 @@ async function buildCameo(cameoId: string) {
     }
 
     await ERUDIT.repository.db.pushFile(
-        `${cameoDirectory}/avatar.${avatarExtension}`,
+        `${dir}/avatar.${avatarExtension}`,
         'cameo-avatar',
     );
 
     const icon = (() => {
-        const iconFile = cameoFiles.find((file) => file === 'icon.svg');
+        const iconFile = files.find((file) => file === 'icon.svg');
         if (iconFile) {
-            return readFileSync(cameoDirectory + '/' + iconFile, 'utf-8');
+            return readFileSync(dir + '/' + iconFile, 'utf-8');
         }
     })();
 

package/server/erudit/content/global/build.ts

@@ -5,9 +5,21 @@ import { $CONTENT } from './singleton';
 // Call singleton to trigger initialization
 $CONTENT;
 
+let initialBuild = true;
+
+const contentRoot = () => `${ERUDIT.config.paths.project}/content`;
+
 export async function buildGlobalContent() {
     ERUDIT.log.debug.start('Building global content...');
 
+    const isInitial = initialBuild;
+    initialBuild = false;
+
+    if (!isInitial && !hasContentChanges()) {
+        ERUDIT.log.info('Skipping global content — nothing changed.');
+        return;
+    }
+
     const linkObject = await buildLinkObject();
 
     const linkTypes = linkObjectToTypes(linkObject);
@@ -17,7 +29,21 @@ export async function buildGlobalContent() {
         'utf-8',
     );
 
-    ERUDIT.log.success('Global content built successfully!');
+    ERUDIT.log.success(
+        isInitial
+            ? 'Global content build complete!'
+            : 'Global content updated!',
+    );
+}
+
+function hasContentChanges() {
+    for (const file of (ERUDIT.changedFiles || new Set<string>()).values()) {
+        if (file.startsWith(`${contentRoot()}/`)) {
+            return true;
+        }
+    }
+
+    return false;
 }
 
 function linkObjectToTypes(linkObject: any): string {

package/server/erudit/content/nav/build.ts

@@ -1,19 +1,31 @@
 import chalk from 'chalk';
 import { globSync } from 'glob';
-import { readdirSync } from 'node:fs';
+import { existsSync, readdirSync } from 'node:fs';
 import { contentTypes, type ContentType } from '@erudit-js/core/content/type';
 
 import type { ContentNavNode, ContentNavMap } from './types';
 
+let initialBuild = true;
+
+const contentRoot = () => `${ERUDIT.config.paths.project}/content`;
+
 export async function buildContentNav() {
     ERUDIT.log.debug.start('Building content navigation...');
 
+    const isInitial = initialBuild;
+    initialBuild = false;
+
+    if (!isInitial && !hasContentChanges()) {
+        ERUDIT.log.info('Skipping content navigation — nothing changed.');
+        return;
+    }
+
     ERUDIT.contentNav.id2Node = new Map();
     ERUDIT.contentNav.id2Root = new Map();
     ERUDIT.contentNav.id2Books = new Map();
     ERUDIT.contentNav.short2Full = new Map();
 
-    const cwd = ERUDIT.config.paths.project + '/content';
+    const cwd = contentRoot();
     const contentDirectories = globSync('**/*/', {
         cwd,
         posix: true,
@@ -122,7 +134,11 @@ export async function buildContentNav() {
         ? getContentNavStats(ERUDIT.contentNav.id2Node)
         : chalk.gray('empty');
 
-    ERUDIT.log.success(`Content navigation built successfully! (${stats})`);
+    ERUDIT.log.success(
+        isInitial
+            ? `Content navigation build complete! (${stats})`
+            : `Content navigation updated! (${stats})`,
+    );
 }
 
 /**
@@ -136,7 +152,13 @@ async function createStandaloneContentNavNode(
     const parsedContentPath = parseContentPath(relPath);
     if (!parsedContentPath) return;
 
-    const files = readdirSync(cwd + '/' + relPath).reduce<Record<string, null>>(
+    const dirPath = `${cwd}/${relPath}`;
+
+    if (!existsSync(dirPath)) {
+        return;
+    }
+
+    const files = readdirSync(dirPath).reduce<Record<string, null>>(
         (acc, name) => {
             acc[name] = null;
             return acc;
@@ -271,6 +293,16 @@ function getContentNavStats(id2Node: ContentNavMap) {
     return parts.join('; ');
 }
 
+function hasContentChanges() {
+    for (const file of (ERUDIT.changedFiles || new Set<string>()).values()) {
+        if (file.startsWith(`${contentRoot()}/`)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 //
 // Validators
 //

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

@@ -10,10 +10,7 @@ export async function getContentElementSnippets(
             contentProseType: true,
             schemaName: true,
             elementId: true,
-            title: true,
-            description: true,
-            quick: true,
-            seo: true,
+            snippetData: true,
         },
         where: and(
             eq(ERUDIT.db.schema.contentSnippets.contentFullId, fullId),
@@ -40,22 +37,65 @@ export async function getContentElementSnippets(
             );
         })();
 
+        const snippetData = dbSnippet.snippetData;
+
         const snippet: ElementSnippet = {
             link,
             schemaName: dbSnippet.schemaName,
-            title: dbSnippet.title,
+            title: snippetData.title!,
         };
 
-        if (dbSnippet.quick) {
-            snippet.quick = true;
+        if (snippetData.quick) {
+            snippet.quick = {};
+            let quickTitle: string | undefined;
+            let quickDescription: string | undefined;
+
+            if (typeof snippetData.quick === 'string') {
+                quickTitle = snippetData.quick;
+            } else if (typeof snippetData.quick === 'object') {
+                if (snippetData.quick.title) {
+                    quickTitle = snippetData.quick.title;
+                }
+                if (snippetData.quick.description) {
+                    quickDescription = snippetData.quick.description;
+                }
+            }
+
+            if (quickTitle) {
+                snippet.quick.title = quickTitle;
+            }
+            if (quickDescription) {
+                snippet.quick.description = quickDescription;
+            }
         }
 
-        if (dbSnippet.seo) {
-            snippet.seo = true;
+        if (snippetData.seo) {
+            snippet.seo = {};
+
+            let seoTitle: string | undefined;
+            let seoDescription: string | undefined;
+
+            if (typeof snippetData.seo === 'string') {
+                seoTitle = snippetData.seo;
+            } else if (typeof snippetData.seo === 'object') {
+                if (snippetData.seo.title) {
+                    seoTitle = snippetData.seo.title;
+                }
+                if (snippetData.seo.description) {
+                    seoDescription = snippetData.seo.description;
+                }
+            }
+
+            if (seoTitle) {
+                snippet.seo.title = seoTitle;
+            }
+            if (seoDescription) {
+                snippet.seo.description = seoDescription;
+            }
         }
 
-        if (dbSnippet.description) {
-            snippet.description = dbSnippet.description;
+        if (snippetData.description) {
+            snippet.description = snippetData.description;
         }
 
         snippets.push(snippet);