erudit 3.0.0-dev.23 → 3.0.0-dev.25

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const route = useRoute();
+const pageId = Array.isArray(route.params.pageId)
+    ? route.params.pageId.join('/')
+    : route.params.pageId!;
+const contentTypePath = stringifyContentTypePath('page', pageId);
+const mainContent = await useMainContent<MainContentPage>(contentTypePath);
+
+const { showContentPageAside } = useAsideMinor();
+
+async function proseMounted() {
+    await nextTick();
+    showContentPageAside(
+        mainContent.contentRelativePath,
+        mainContent.toc,
+        mainContent.contributions,
+    );
+}
+
+await useContentSeo({
+    title: mainContent.title,
+    bookTitle: mainContent.bookTitle,
+    description: mainContent.description,
+    contentTypePath: {
+        type: 'page',
+        contentId: mainContent.shortId,
+    },
+    seo: mainContent.seo,
+    snippets: mainContent.snippets,
+});
+</script>
+
+<template>
+    <MainGlow />
+    <MainDecoration :decoration="mainContent.decoration" />
+    <MainSectionPreamble>
+        <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
+        <MainTitle icon="lines" :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>
+        <Prose
+            :element="mainContent.proseElement"
+            :storage="mainContent.storage"
+            :urlPath="'/' + mainContent.fullId"
+            :useHashUrl="true"
+            @vue:mounted="proseMounted"
+        />
+    </MainSection>
+    <MainSection>
+        <AdsBannerBottom v-if="adsBottomAllowed()" />
+    </MainSection>
+</template>

package/app/pages/practice/[...practiceId].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const route = useRoute();
+const practiceId = Array.isArray(route.params.practiceId)
+    ? route.params.practiceId.join('/')
+    : route.params.practiceId!;
+const contentTypePath = stringifyContentTypePath('practice', practiceId);
+const mainContent = await useMainContent<MainContentTopicPart>(contentTypePath);
+</script>
+
+<template>
+    <MainTopicPartPage :mainContent />
+</template>

package/app/pages/sponsors.vue

@@ -1,95 +1,85 @@
 <script lang="ts" setup>
-import eruditConfig from '#erudit/config';
+import type { PageSponsor } from '@erudit-js/core/sponsor';
 
-const { data: sponsors } = await useAsyncData(
-    'sponsors',
-    () => $fetch('/api/sponsor/list'),
-    { deep: false },
-);
+const { showNewsAside } = useAsideMinor();
+showNewsAside();
+
+const nuxtApp = useNuxtApp();
+const payloadKey = 'page-sponsors';
+const pageSponsors: PageSponsor[] =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        await $fetch('/api/pageSponsors', { responseType: 'json' }));
 
 const phrase = await usePhrases(
     'sponsors',
     'sponsors_description',
     'become_sponsor',
+    'no_sponsors',
 );
 
-useEruditHead({
+useStandartSeo({
     title: phrase.sponsors,
     description: phrase.sponsors_description,
+    urlPath: PAGES.sponsors,
 });
 </script>
 
 <template>
-    <MainTitle icon="diamond" :title="phrase.sponsors" />
-    <MainDescription :description="phrase.sponsors_description" />
-    <MainActionButton
-        v-if="eruditConfig.sponsors?.addLink"
-        icon="diamond"
-        :label="phrase.become_sponsor"
-        :link="eruditConfig.sponsors?.addLink"
-    />
-    <MainSection :class="$style.sponsorSection" v-if="sponsors?.tier2?.length">
-        <template v-slot:header>
-            <h2 :class="$style.tierHeading">
-                {{ eruditConfig.sponsors!.tier2Label }}
-            </h2>
-        </template>
-        <div :class="$style.tier2Grid">
-            <SponsorTier2 v-for="sponsor of sponsors.tier2" :sponsor />
+    <MainGlow />
+    <MainSectionPreamble>
+        <MainTitle icon="diamond" :title="phrase.sponsors" />
+        <MainDescription :description="phrase.sponsors_description" />
+        <div class="h-main-half"></div>
+        <MainAction
+            icon="diamond"
+            :label="phrase.become_sponsor"
+            :link="ERUDIT.config.project.sponsors!.becomeSponsorLink"
+        />
+        <div class="h-main-half"></div>
+    </MainSectionPreamble>
+    <MainSection>
+        <div
+            v-if="pageSponsors.length > 0"
+            class="gap-small micro:gap-normal px-main py-main-half
+                columns-[300px]"
+        >
+            <FancyCard
+                v-for="pageSponsor of pageSponsors"
+                :key="pageSponsor.name"
+                :title="pageSponsor.name"
+                :mediaUrl="
+                    pageSponsor.avatarUrl
+                        ? withBaseUrl(pageSponsor.avatarUrl)
+                        : undefined
+                "
+                :description="pageSponsor.info"
+                :link="
+                    pageSponsor.link
+                        ? { href: pageSponsor.link, external: true }
+                        : undefined
+                "
+                :color="pageSponsor.color"
+            >
+                <template #tags>
+                    <FancyCardTag v-if="pageSponsor.group || pageSponsor.icon">
+                        <MaybeMyIcon
+                            v-if="pageSponsor.icon"
+                            :name="pageSponsor.icon"
+                            class="text-[1.2em]"
+                        />
+                        <span v-if="pageSponsor.group">
+                            {{ formatText(pageSponsor.group) }}
+                        </span>
+                    </FancyCardTag>
+                    <FancyCardTag v-if="pageSponsor.link">
+                        <MyIcon name="arrow/outward" class="text-[1.2em]" />
+                    </FancyCardTag>
+                </template>
+            </FancyCard>
         </div>
-    </MainSection>
-    <MainSection :class="$style.sponsorSection" v-if="sponsors?.tier1?.length">
-        <template v-slot:header>
-            <h2 :class="$style.tierHeading">
-                {{ eruditConfig.sponsors!.tier1Label }}
-            </h2>
-        </template>
-        <div :class="$style.tier1Grid">
-            <SponsorTier1 v-for="sponsor of sponsors.tier1" :sponsor />
+        <div v-else class="text-text-muted px-main py-main text-center">
+            {{ phrase.no_sponsors }}
         </div>
     </MainSection>
 </template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.tierHeading {
-    padding: var(--gap) var(--_pMainX);
-    font-size: 1.4em;
-
-    @include bp.below('mobile') {
-        text-align: center;
-    }
-}
-
-.sponsorSection:nth-child(even of .sponsorSection) {
-    .tierHeading {
-        padding-bottom: 0;
-        padding-top: calc(1.5 * var(--gap));
-    }
-}
-
-.tier2Grid {
-    padding: 0 var(--_pMainX);
-    display: grid;
-    justify-content: center;
-    grid-template-columns: repeat(auto-fit, 310px);
-    gap: var(--gap);
-
-    @include bp.below('mobile') {
-        padding: var(--_pMainY) 0;
-    }
-}
-
-.tier1Grid {
-    padding: 0 var(--_pMainX);
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
-    gap: var(--gap);
-
-    @include bp.below('mobile') {
-        padding: var(--_pMainY) 0;
-        gap: 0;
-    }
-}
-</style>

package/app/pages/summary/[...summaryId].vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+const route = useRoute();
+const summaryId = Array.isArray(route.params.summaryId)
+    ? route.params.summaryId.join('/')
+    : route.params.summaryId!;
+const contentTypePath = stringifyContentTypePath('summary', summaryId);
+const mainContent = await useMainContent<MainContentTopicPart>(contentTypePath);
+</script>
+
 <template>
-    <MainTopic />
+    <MainTopicPartPage :mainContent />
 </template>

package/app/plugins/appSetup/client/htmlBranding.ts

@@ -0,0 +1,6 @@
+import { brandLogotype } from '@erudit-js/core/brand';
+
+export async function setupHtmlBranding() {
+    const brandingComment = document.createComment(`\n${brandLogotype}\n`);
+    document.insertBefore(brandingComment, document.firstChild);
+}

package/app/plugins/appSetup/client/welcome.ts

@@ -0,0 +1,35 @@
+import { brandColors, brandLogotype } from '@erudit-js/core/brand';
+
+const emojies = [
+    '😂',
+    '❤️',
+    '🤣',
+    '🎉',
+    '🔥',
+    '💖',
+    '👀',
+    '✨',
+    '💗',
+    '💚',
+    '💙',
+    '🎁',
+    '🌈',
+];
+
+const emoji = emojies[Math.floor(Math.random() * emojies.length)];
+
+export async function setupWelcomeMessage() {
+    console.log(
+        '%c' +
+            brandLogotype +
+            '\n%cv' +
+            ERUDIT.config.version +
+            ' ' +
+            emoji +
+            ' %cBeating heart of modern educational sites!\n\n%cLearn more: https://github.com/erudit-js/erudit\n ',
+        `color: transparent; background: linear-gradient(to right, ${brandColors[0]}, ${brandColors[1]}); background-clip: text; -webkit-background-clip: text;`,
+        'color: inherit;',
+        'font-style: italic; color: #888;',
+        'color: inherit;',
+    );
+}

package/app/plugins/appSetup/config.ts

@@ -0,0 +1,6 @@
+export type EruditAppConfig = EruditRuntimeConfig;
+
+export async function setupAppRuntimeConfig() {
+    const runtimeConfig = useRuntimeConfig();
+    ERUDIT.config = runtimeConfig.public.erudit as any;
+}

package/app/plugins/appSetup/global.ts

@@ -0,0 +1,3 @@
+export const ERUDIT: {
+    config: EruditPublicRuntimeConfig;
+} = {} as any;

package/app/plugins/appSetup/index.ts

@@ -0,0 +1,28 @@
+// Global setups
+import { setupAppRuntimeConfig } from './config';
+
+// Client setups
+import { setupHtmlBranding } from './client/htmlBranding';
+import { setupWelcomeMessage } from './client/welcome';
+
+export default defineNuxtPlugin({
+    name: 'erudit-app-setup',
+    async setup() {
+        // Forgive me God for doing this but this is necessary because Nuxt App server side shares
+        // same globalThis with Nitro server but same imports are done again causing @jsprose/core to throw "multipe singleton instances" error.
+        // @ts-ignore
+        //delete globalThis['__JSPROSE__'];
+
+        await setupAppRuntimeConfig();
+    },
+    hooks: {
+        'app:mounted': async () => {
+            const { registerProseGlobals } =
+                await import('#erudit/prose/global');
+            registerProseGlobals();
+
+            await setupHtmlBranding();
+            await setupWelcomeMessage();
+        },
+    },
+});

package/app/plugins/prerender.server.ts

@@ -2,10 +2,11 @@ let alreadyPrerendered = false;
 let isPrerendering = false;
 
 export default defineNuxtPlugin({
-    name: 'erudit-prerender',
-    async setup(_nuxt) {
+    name: 'erudit-prerender-routes',
+    async setup(nuxt) {
         if (import.meta.dev) {
-            return; // Server is available so no need to prerender in dev mode
+            // Server is available so no need to prerender anything
+            return;
         }
 
         if (alreadyPrerendered || isPrerendering) {
@@ -14,21 +15,25 @@ export default defineNuxtPlugin({
 
         isPrerendering = true;
 
+        const routes = ['/robots.txt', '/search.json.gz', '/sitemap.xml'];
+
         const routeProviders = [
+            '/api/prerender/files',
+            '/api/prerender/frontNav',
             '/api/prerender/language',
-            '/api/prerender/cameos',
-
-            // Assets
-            '/api/prerender/assets/cameo',
-            '/api/prerender/assets/contributor',
-            '/api/prerender/assets/sponsor',
+            '/api/prerender/content',
+            '/api/prerender/quotes',
+            '/api/prerender/news',
         ];
 
         for (const provider of routeProviders) {
-            const routes = await $fetch<string[]>(provider);
-            _nuxt.runWithContext(() => prerenderRoutes(routes));
+            const fetchedRoutes = await $fetch<string[]>(provider);
+            routes.push(...fetchedRoutes);
         }
 
+        nuxt.runWithContext(() => prerenderRoutes(routes));
+
         alreadyPrerendered = true;
+        isPrerendering = false;
     },
 });

package/app/router.options.ts

@@ -0,0 +1,5 @@
+export default {
+    scrollBehavior() {
+        return false;
+    },
+};

package/app/scripts/theme.js

@@ -0,0 +1,33 @@
+/**
+ * Setup theme on client side as early as possible to prevent blinking.
+ * Script is injected in html <head> via Nitro plugin.
+ */
+(() => {
+    const w = window;
+    const d = document;
+    const s = localStorage;
+    const key = 'theme';
+
+    const getLocalTheme = () => {
+        const _localTheme = s.getItem(key) || 'system';
+        s.setItem(key, _localTheme);
+        return _localTheme;
+    };
+
+    const getBinaryTheme = (theme) => {
+        switch (theme) {
+            case 'dark':
+            case 'light':
+                return theme;
+            case 'system':
+                return w.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    : 'light';
+        }
+    };
+
+    d.documentElement.setAttribute(
+        'data-theme',
+        getBinaryTheme(getLocalTheme()),
+    );
+})();

package/app/styles/main.css

@@ -0,0 +1,173 @@
+/* Noto Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Tailwind CSS Config */
+@import 'tailwindcss' source(none);
+@source '../..';
+/* /packages/erudit/app/styles/main.css -> /packages/prose/src */
+@source '../../../prose/src';
+/* /node_modules/erudit/app/styles/main.css -> /node_modules/@erudit-js/prose/dist */
+@source '../../../@erudit-js/prose/dist';
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+    --breakpoint-*: initial;
+    --breakpoint-micro: 500px;
+    --breakpoint-aside1: 1000px;
+    --breakpoint-aside2: 1400px;
+
+    --text-tiny: 0.695rem;
+
+    --text-main: 1em;
+    --text-main-xs: calc(0.75 * var(--text-main));
+    --text-main-sm: calc(0.875 * var(--text-main));
+    --text-main-lg: calc(1.125 * var(--text-main));
+    --text-main-xl: calc(1.25 * var(--text-main));
+    --text-main-2xl: calc(1.5 * var(--text-main));
+
+    --default-transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    --default-transition-duration: calc(200ms * var(--duration-multiplier));
+
+    --spacing-normal: calc(4 * var(--spacing));
+    --spacing-big: calc(2 * var(--spacing-normal));
+    --spacing-small: calc(0.5 * var(--spacing-normal));
+
+    --spacing-main: 18px;
+    --spacing-main-half: calc(0.5 * var(--spacing-main));
+
+    --w-aside: 300px;
+    --w-max-main: 1024px;
+    --w-max-content: calc(1024px + 2 * 300px);
+
+    --h-min-aside-item: 60px;
+
+    --color-brand: light-dark(#00b886, #00dcb5);
+    --color-bg-root: light-dark(#ebebeb, #141414);
+    --color-bg-aside: light-dark(#f7f7f7, #1b1b1b);
+    --color-bg-main: light-dark(#ffffff, #212121);
+    --color-bg-accent: light-dark(#e6e6e6, #2e2e2e);
+    --color-text: light-dark(#373737, #b9b9b9);
+    --color-text-deep: light-dark(#181818, #fff);
+    --color-text-muted: light-dark(#696969, #7f7f7f);
+    --color-text-dimmed: light-dark(#969696, #616161);
+    --color-text-disabled: light-dark(#b9b9b9, #4f4f4f);
+    --color-invert: light-dark(white, black);
+    --color-border: light-dark(var(--color-neutral-300), #323232);
+
+    --animate-opacity-blink: opacity-blink 0.5s ease-out;
+    @keyframes opacity-blink {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0.8;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+
+    --animate-fade-out: fade-out 8s linear;
+    @keyframes fade-out {
+        0% {
+            opacity: 0.5;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+}
+
+@theme inline {
+    --font-sans: 'Noto Sans';
+    --font-serif: 'Noto Serif';
+}
+
+@layer base {
+    :root {
+        background: var(--color-bg-root);
+        color: var(--color-text);
+        font-size: 18px;
+        interpolate-size: allow-keywords;
+        @apply transition-[background];
+    }
+
+    :root[data-theme='light'] {
+        color-scheme: light;
+    }
+
+    :root[data-theme='dark'] {
+        color-scheme: dark;
+    }
+
+    ::selection {
+        background: color-mix(in srgb, var(--color-brand), transparent 65%);
+    }
+
+    :focus-visible {
+        outline: 2px solid var(--color-brand);
+        border-radius: 3px;
+    }
+
+    /* h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong {
+        color: var(--color-text-deep);
+    } */
+}
+
+@variant micro {
+    :root {
+        --spacing-main: 34px;
+    }
+}
+
+@custom-variant hocus (&:hover, &:focus);
+
+@utility text-hover-underline {
+    @apply transition-[text-decoration-color];
+
+    text-decoration: underline;
+    text-decoration-color: transparent;
+
+    &:hover {
+        text-decoration-color: currentColor;
+    }
+}
+
+@utility nice-scrollbars {
+    -webkit-overflow-scrolling: auto;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        height: 8px;
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: light-dark(#bfbfbf, #494949);
+        border-radius: 15px;
+        border: 2px solid transparent;
+        background-clip: content-box;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: light-dark(#a6a6a6, #5a5a5a);
+        border-radius: 15px;
+        border: 2px solid transparent;
+        background-clip: content-box;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: var(--color-border);
+    }
+}
+
+@utility text-size-h1 {
+    @apply micro:text-[36px] text-[26px];
+}

package/bin/erudit.mjs

@@ -1,2 +1,2 @@
-#!/usr/bin/env node
-import '@erudit-js/cli/cli';
+#!/usr/bin/env node
+import '@erudit-js/cli/cli';

package/modules/erudit/globals/content.ts

@@ -0,0 +1,4 @@
+export { definePage } from '@erudit-js/core/content/page';
+export { defineBook } from '@erudit-js/core/content/book';
+export { defineTopic } from '@erudit-js/core/content/topic';
+export { defineGroup } from '@erudit-js/core/content/group';

package/modules/erudit/globals/contributor.ts

@@ -0,0 +1 @@
+export { defineContributor } from '@erudit-js/core/contributor';

package/modules/erudit/globals/eruditConfig.ts

@@ -0,0 +1,10 @@
+import { defu } from 'defu';
+import type { EruditConfig } from '@erudit-js/core/eruditConfig/config';
+
+export function defineEruditConfig(
+    eruditConfig: Partial<EruditConfig> | Partial<EruditConfig>[],
+) {
+    const configs = Array.isArray(eruditConfig) ? eruditConfig : [eruditConfig];
+    // @ts-ignore
+    return defu(...configs.reverse());
+}

package/modules/erudit/globals/problem.ts

@@ -0,0 +1 @@
+export { defineProblemScript } from '@erudit-js/prose/elements/problem/problemScript';

package/modules/erudit/globals/prose.ts

@@ -0,0 +1 @@
+export { defineDocument as defineProse } from '@jsprose/core';

package/modules/erudit/globals/public.ts

@@ -0,0 +1,18 @@
+import { slasher } from '../../../shared/utils/slasher';
+
+export const PUBLIC_PROJECT_BASE_URL = '/public/project/';
+export const PUBLIC_ERUDIT_BASE_URL = '/public/erudit/';
+
+/**
+ * Target static files located in `<project_dir>/public` folder.
+ */
+export function projectPublic(path: string) {
+    return slasher(`${PUBLIC_PROJECT_BASE_URL}${path}`);
+}
+
+/**
+ * Target static files located in `<erudit_package>/public` folder.
+ */
+export function eruditPublic(path: string) {
+    return slasher(`${PUBLIC_ERUDIT_BASE_URL}${path}`);
+}