erudit 3.0.0-dev.1 → 3.0.0-dev.10

package/app/components/bitran/BitranContent.vue

@@ -1,63 +1,91 @@
-<script lang="ts" setup>
-import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-
-import type { BitranContext } from '@shared/bitran/context';
-
-import RenderWrapper from './RenderWrapper.vue';
-
-const props = defineProps<{
-    content: BitranContent;
-    context: BitranContext;
-}>();
-
-const bitranTranspiler = await useBitranTranspiler();
-const bitranRenderers = await useBitranRenderers();
-
-const formatText = useFormatText();
-
-// onMounted(() => {
-//     watch(urlElement, () => {
-//         //console.log('Highlighting product:', urlElement.value);
-//     }, { immediate: true });
-// });
-</script>
-
-<template>
-    <Bitran
-        :class="$style.eruditBitranContainer"
-        :transpiler="bitranTranspiler"
-        :renderers="bitranRenderers"
-        :content
-        :editMode="false"
-        :formatText
-        :RenderWrapper
-    />
-</template>
-
-<style lang="scss" module>
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
-
-.eruditBitranContainer {
-    padding: var(--_pMainY) var(--_pMainX);
-    padding-left: calc(var(--_pMainX) - #{bitranDef.$asideWidth});
-
-    // Setting up Bitran
-
-    --bitran_gap: var(--gap);
-    --bitran_gapSmall: var(--gapSmall);
-    --bitran_gapBig: var(--gapBig);
-    --bitran_gapBlocks: var(--gapBig);
-
-    --bitran_xPadding: var(--_pMainX);
-    --bitran_transitionSpeed: var(--transitionSpeed);
-    --bitran_transitionFunction: var(--transitionFunction);
-
-    --bitran_fontMain: 'Noto Sans', sans-serif;
-    --bitran_fontAlt: 'Noto Serif', serif;
-
-    --bitran_text: var(--text);
-    --bitran_textMuted: var(--textMuted);
-    --bitran_textDimmed: var(--textDimmed);
-    --bitran_textDisabled: var(--textDisabled);
-}
-</style>
+<script lang="ts" setup>
+import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
+import {
+    setEruditBitranRuntime,
+    type BitranContext,
+} from '@erudit-js/cog/schema';
+
+import eruditConfig from '#erudit/config';
+
+import RenderWrapper from './RenderWrapper.vue';
+
+const props = defineProps<{
+    content: BitranContent;
+    context: BitranContext;
+}>();
+
+/* Remove transpiler from Bitran Vue Component at all? It takes RootNode already... */
+const bitranTranspiler = await useBitranTranspiler();
+const bitranRenderers = await useBitranRenderers();
+
+[(bitranTranspiler.parser, bitranTranspiler.stringifier)].forEach((item) => {
+    setEruditBitranRuntime(item, {
+        eruditConfig,
+        insideInclude: false,
+        context: props.context,
+    });
+});
+
+const formatText = useFormatText();
+
+// onMounted(() => {
+//     watch(urlElement, () => {
+//         //console.log('Highlighting product:', urlElement.value);
+//     }, { immediate: true });
+// });
+
+const isDev = import.meta.dev;
+const isServer = import.meta.server;
+</script>
+
+<template>
+    <Bitran
+        :class="$style.eruditBitranContainer"
+        :transpiler="bitranTranspiler"
+        :renderers="bitranRenderers"
+        :content
+        :editMode="false"
+        :formatText
+        :RenderWrapper
+        :isDev
+        :isServer
+        :language="eruditConfig.language"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.eruditBitranContainer {
+    padding: var(--_pMainY) var(--_pMainX);
+    padding-left: calc(var(--_pMainX) - var(--_bitran_asideWidth));
+
+    // Setting up Bitran
+
+    --bitran_gap: var(--gap);
+    --bitran_gapSmall: var(--gapSmall);
+    --bitran_gapBig: var(--gapBig);
+    --bitran_gapBlocks: var(--gapBig);
+
+    --bitran_xPadding: var(--_pMainX);
+    --bitran_transitionSpeed: var(--transitionSpeed);
+    --bitran_transitionFunction: var(--transitionFunction);
+
+    --bitran_fontMain: 'Noto Sans', sans-serif;
+    --bitran_fontAlt: 'Noto Serif', serif;
+
+    --bitran_text: var(--text);
+    --bitran_textMuted: var(--textMuted);
+    --bitran_textDimmed: var(--textDimmed);
+    --bitran_textDisabled: var(--textDisabled);
+    --bitran_textDeep: var(--textDeep);
+
+    --bitran_colorBrand: var(--brand);
+
+    --bitran_colorBorder: var(--border);
+
+    @include bp.below('mobile') {
+        --bitran_gapBlocks: calc(22px);
+    }
+}
+</style>

package/app/components/bitran/RenderWrapper.vue

@@ -1,10 +1,10 @@
-<script lang="ts" setup>
-defineProps<{ mode: 'hybrid' | 'client' }>();
-</script>
-
-<template>
-    <slot v-if="mode !== 'client'"></slot>
-    <ClientOnly v-else>
-        <slot></slot>
-    </ClientOnly>
-</template>
+<script lang="ts" setup>
+defineProps<{ mode: 'hybrid' | 'client' }>();
+</script>
+
+<template>
+    <slot v-if="mode !== 'client'"></slot>
+    <ClientOnly v-else>
+        <slot></slot>
+    </ClientOnly>
+</template>

package/app/components/contributor/ContributorAvatar.vue

@@ -1,43 +1,45 @@
-<script lang="ts" setup>
-const props = defineProps<{ contributorId: string; avatar?: string }>();
-const baseUrlPath = useBaseUrlPath();
-
-const hasAvatar = computed(() => !!props.avatar);
-</script>
-
-<template>
-    <div
-        :class="[$style.contributorAvatar, !hasAvatar && $style.noAvatar]"
-        :style="{ '--_avatarBlendColor': stringColor(props.contributorId) }"
-    >
-        <img
-            v-if="hasAvatar"
-            :src="baseUrlPath(contributorAsset(avatar!))"
-            loading="lazy"
-        />
-    </div>
-</template>
-
-<style lang="scss" module>
-.contributorAvatar {
-    $avatarSize: 40px;
-    --_avatarBlendColor: var(--brand);
-
-    position: relative;
-    width: #{$avatarSize};
-    height: #{$avatarSize};
-    border-radius: 50%;
-    overflow: hidden;
-    background: var(--border);
-
-    &.noAvatar {
-        background-image: url('/_erudit-asset/user.svg');
-        background-color: var(--_avatarBlendColor);
-        background-blend-mode: hard-light;
-    }
-
-    > img {
-        display: block;
-    }
-}
-</style>
+<script lang="ts" setup>
+const props = defineProps<{ contributorId: string; avatar?: string }>();
+const baseUrlPath = useBaseUrlPath();
+
+const hasAvatar = computed(() => !!props.avatar);
+</script>
+
+<template>
+    <div
+        :class="$style.contributorAvatar"
+        :style="{
+            ...(!hasAvatar
+                ? {
+                      backgroundImage: `url(${eruditAsset('user.svg')})`,
+                      backgroundColor: stringColor(props.contributorId),
+                      backgroundBlendMode: 'hard-light',
+                  }
+                : {}),
+        }"
+    >
+        <img
+            v-if="hasAvatar"
+            :src="baseUrlPath(contributorAsset(avatar!))"
+            loading="lazy"
+        />
+    </div>
+</template>
+
+<style lang="scss" module>
+.contributorAvatar {
+    $avatarSize: 40px;
+    --_avatarBlendColor: var(--brand);
+
+    position: relative;
+    width: #{$avatarSize};
+    height: #{$avatarSize};
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--border);
+
+    > img {
+        display: block;
+    }
+}
+</style>

package/app/components/contributor/ContributorListItem.vue

@@ -1,35 +1,35 @@
-<script lang="ts" setup>
-import { type ContentContributor } from '@shared/contributor';
-import { createContributorLink } from '@shared/link';
-
-defineProps<ContentContributor>();
-
-const Link = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <Link
-        :class="$style.contributor"
-        :to="createContributorLink(contributorId)"
-    >
-        <ContributorAvatar :contributorId :avatar />
-        <span>{{ displayName || contributorId }}</span>
-    </Link>
-</template>
-
-<style lang="scss" module>
-.contributor {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--gap);
-    color: var(--text);
-    text-decoration: none;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-    }
-}
-</style>
+<script lang="ts" setup>
+import { type ContentContributor } from '@shared/contributor';
+import { createContributorLink } from '@shared/link';
+
+defineProps<ContentContributor>();
+
+const Link = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <Link
+        :class="$style.contributor"
+        :to="createContributorLink(contributorId)"
+    >
+        <ContributorAvatar :contributorId :avatar />
+        <span>{{ displayName || contributorId }}</span>
+    </Link>
+</template>
+
+<style lang="scss" module>
+.contributor {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--gap);
+    color: var(--text);
+    text-decoration: none;
+
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+    }
+}
+</style>

package/app/components/main/topic/MainTopic.vue

@@ -1,79 +1,78 @@
-<script lang="ts" setup>
-import type { TopicPart } from 'erudit-cog/schema';
-import { NO_ALIASES } from '@erudit-js/bitran-elements/aliases/shared';
-
-import eruditConfig from '#erudit/config';
-
-import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
-import { topicLocation } from '@app/scripts/aside/minor/topic';
-
-import ContentDecoration from '../utils/ContentDecoration.vue';
-import ContentTitle from '../utils/ContentTitle.vue';
-import ContentDescription from '../utils/ContentDescription.vue';
-import TopicPartSwitch from './TopicPartSwitch.vue';
-import Breadcrumb from '../utils/Breadcrumb.vue';
-import ContentPopovers from '../utils/ContentPopovers.vue';
-import ContentReferences from '../utils/ContentReferences.vue';
-import ContentSection from '../utils/ContentSection.vue';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
-
-const location = useBitranLocation();
-const topicPart = computed(() => location.value?.type as TopicPart);
-
-const topicData = await useContentData<ContentTopicData>();
-await useContentPage(topicData);
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-
-const content = await useBitranContent(location);
-
-onMounted(() => {
-    watchEffect(() => {
-        // Telling live toc that content is mounted
-        topicLocation.value = location.value;
-    });
-});
-</script>
-
-<template>
-    <ContentDecoration
-        v-if="topicData.generic.decoration"
-        :decoration="topicData.generic.decoration"
-    />
-
-    <Breadcrumb
-        v-if="topicData.generic.context?.length > 1"
-        :context="topicData.generic.context"
-    />
-
-    <ContentTitle
-        :title="
-            topicData.generic?.title ||
-            topicData.generic.contentId.split('/').pop()!
-        "
-        :icon="TOPIC_PART_ICON[location!.type as TopicPart]"
-        :hint="phrase[location!.type as TopicPart]"
-    />
-
-    <ContentDescription
-        v-if="topicData.generic?.description"
-        :description="topicData.generic?.description"
-    />
-
-    <ContentPopovers :generic="topicData.generic" />
-
-    <TopicPartSwitch
-        :partLinks="topicData.topicPartLinks"
-        :active="topicPart"
-    />
-
-    <div style="clear: both"></div>
-
-    <BitranContent :content :context="{ location, aliases: NO_ALIASES() }" />
-
-    <ContentSection v-if="topicData.generic.references">
-        <ContentReferences :references="topicData.generic.references" />
-    </ContentSection>
-
-    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
-</template>
+<script lang="ts" setup>
+import { NO_ALIASES, type TopicPart } from '@erudit-js/cog/schema';
+
+import eruditConfig from '#erudit/config';
+
+import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
+import { topicLocation } from '@app/scripts/aside/minor/topic';
+
+import ContentDecoration from '../utils/ContentDecoration.vue';
+import ContentTitle from '../utils/ContentTitle.vue';
+import ContentDescription from '../utils/ContentDescription.vue';
+import TopicPartSwitch from './TopicPartSwitch.vue';
+import Breadcrumb from '../utils/Breadcrumb.vue';
+import ContentPopovers from '../utils/ContentPopovers.vue';
+import ContentReferences from '../utils/ContentReferences.vue';
+import ContentSection from '../utils/ContentSection.vue';
+import { TOPIC_PART_ICON } from '@erudit/shared/icons';
+
+const location = useBitranLocation();
+const topicPart = computed(() => location.value?.type as TopicPart);
+
+const topicData = await useContentData<ContentTopicData>();
+await useContentPage(topicData);
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+
+const content = await useBitranContent(location);
+
+onMounted(() => {
+    watchEffect(() => {
+        // Telling live toc that content is mounted
+        topicLocation.value = location.value;
+    });
+});
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="topicData.generic.decoration"
+        :decoration="topicData.generic.decoration"
+    />
+
+    <Breadcrumb
+        v-if="topicData.generic.context?.length > 1"
+        :context="topicData.generic.context"
+    />
+
+    <ContentTitle
+        :title="
+            topicData.generic?.title ||
+            topicData.generic.contentId.split('/').pop()!
+        "
+        :icon="TOPIC_PART_ICON[location!.type as TopicPart]"
+        :hint="phrase[location!.type as TopicPart]"
+    />
+
+    <ContentDescription
+        v-if="topicData.generic?.description"
+        :description="topicData.generic?.description"
+    />
+
+    <ContentPopovers :generic="topicData.generic" />
+
+    <TopicPartSwitch
+        :partLinks="topicData.topicPartLinks"
+        :active="topicPart"
+    />
+
+    <div style="clear: both"></div>
+
+    <BitranContent :content :context="{ location, aliases: NO_ALIASES() }" />
+
+    <ContentSection v-if="topicData.generic.references">
+        <ContentReferences :references="topicData.generic.references" />
+    </ContentSection>
+
+    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
+</template>