erudit 2.0.0-dev.8 → 3.0.0-dev.1

package/.nuxtrc

@@ -1 +1 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace = true

package/app/components/SiteMain.vue

@@ -11,7 +11,7 @@
 
 <style lang="scss" module>
 @use '$/def/bp';
-@use 'bitran/public/scss/def' as bitranDef;
+@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
 
 .main {
     --_pMainBase: var(--gapBig);
@@ -24,7 +24,7 @@
     font-size: 18px;
 
     @include bp.below('mobile') {
-        --_pMainBase: #{bitranDef.$asideFullWidth};
+        //        --_pMainBase: #{bitranDef.$asideWidth};
         font-size: 15px;
     }
 

package/app/components/aside/major/panes/Search.vue

@@ -1,3 +1,11 @@
 <template>
-    <div :style="{ padding: 'var(--gap)', color: 'var(--textMuted)', textAlign: 'center' }">Here be dragons...</div>
-</template>
+    <div
+        :style="{
+            padding: 'var(--gap)',
+            color: 'var(--textMuted)',
+            textAlign: 'center',
+        }"
+    >
+        Here be dragons...
+    </div>
+</template>

package/app/components/aside/minor/AsideMinorContributor.vue

@@ -2,4 +2,4 @@
     <AsideMinorPane>
         <div>Contributor</div>
     </AsideMinorPane>
-</template>
+</template>

package/app/components/aside/minor/AsideMinorPane.vue

@@ -5,12 +5,11 @@
 </template>
 
 <style lang="scss" module>
-.asideMinorPane
-{
+.asideMinorPane {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }
-</style>
+</style>

package/app/components/aside/minor/topic/TopicToc.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { headingName } from '@erudit-js/bitran-elements/heading/shared';
+
 import { stringifyBitranLocation } from '@shared/bitran/location';
 import type { TocItem } from '@erudit/shared/bitran/toc';
-import { headingName } from '@shared/bitran/products/heading/shared';
 import { topicLocation } from '@app/scripts/aside/minor/topic';
 import { injectAsideData } from '@app/scripts/aside/minor/state';
 import type { AsideMinorTopic } from '@shared/aside/minor';

package/app/components/aside/minor/topic/TopicTocItem.vue

@@ -4,8 +4,8 @@ import type { TocItem } from '@erudit/shared/bitran/toc';
 const { tocItem } = defineProps<{ tocItem: TocItem; active: boolean }>();
 
 const productName = tocItem.productName;
-const productIcon = await useBitranProductIcon(productName);
-const productPhrase = await useBitranProductLanguage(productName);
+const productIcon = await useBitranElementIcon(productName);
+const productPhrase = await useBitranElementLanguage(productName);
 
 function tocItemClick(event: Event) {
     navigateTo({
@@ -21,7 +21,7 @@ function tocItemClick(event: Event) {
 
 <template>
     <TreeItem
-        :label="tocItem.title || productPhrase('_name')"
+        :label="tocItem.title || productPhrase('_element_title')"
         :level="tocItem.level"
         :link="`?element=${tocItem.id}` /* Apply page hash! */"
         :svg="productIcon"

package/app/components/bitran/BitranContent.vue

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
-import 'bitran/style.css';
-import type { BitranContent } from 'bitran';
-import { Bitran } from 'bitran/render';
+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 { bitranCore, bitranRender } = await useBitran(props.context);
+const bitranTranspiler = await useBitranTranspiler();
+const bitranRenderers = await useBitranRenderers();
+
+const formatText = useFormatText();
 
 // onMounted(() => {
 //     watch(urlElement, () => {
@@ -21,31 +24,36 @@ const { bitranCore, bitranRender } = await useBitran(props.context);
 
 <template>
     <Bitran
-        :bitranCore
-        :bitranRender
+        :class="$style.eruditBitranContainer"
+        :transpiler="bitranTranspiler"
+        :renderers="bitranRenderers"
         :content
         :editMode="false"
-        :class="$style.eruditBitranContainer"
+        :formatText
+        :RenderWrapper
     />
 </template>
 
 <style lang="scss" module>
+@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
+
 .eruditBitranContainer {
-    padding-top: var(--_pMainY);
-    padding-bottom: var(--_pMainY);
+    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_blocksGap: calc(2 * var(--_pMainY));
     --bitran_transitionSpeed: var(--transitionSpeed);
     --bitran_transitionFunction: var(--transitionFunction);
-    --bitran_fontSans: 'Noto Sans', sans-serif;
-    --bitran_fontSerif: 'Noto Serif', serif;
+
+    --bitran_fontMain: 'Noto Sans', sans-serif;
+    --bitran_fontAlt: 'Noto Serif', serif;
 
     --bitran_text: var(--text);
     --bitran_textMuted: var(--textMuted);
@@ -53,12 +61,3 @@ const { bitranCore, bitranRender } = await useBitran(props.context);
     --bitran_textDisabled: var(--textDisabled);
 }
 </style>
-
-<style lang="scss">
-@use '$/def/bp';
-@use 'bitran/public/scss/external' as bitranExternal;
-
-@include bp.below('mobile') {
-    @include bitranExternal.narrowMode;
-}
-</style>

package/app/components/bitran/RenderWrapper.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { RenderMode } from 'bitran/render';
-
-defineProps<{ renderMode: RenderMode }>();
+defineProps<{ mode: 'hybrid' | 'client' }>();
 </script>
 
 <template>
-    <slot v-if="renderMode > RenderMode.Client"></slot>
+    <slot v-if="mode !== 'client'"></slot>
     <ClientOnly v-else>
         <slot></slot>
     </ClientOnly>

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

@@ -1,5 +1,6 @@
 <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';
 
@@ -15,7 +16,6 @@ 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';
-import { NO_ALIASES } from '@erudit/shared/bitran/alias';
 
 const location = useBitranLocation();
 const topicPart = computed(() => location.value?.type as TopicPart);

package/app/components/main/utils/ContentDescription.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-defineProps<{ description: string; }>();
+defineProps<{ description: string }>();
 const pretty = await useFormatText();
 </script>
 
@@ -10,11 +10,10 @@ const pretty = await useFormatText();
 </template>
 
 <style lang="scss" module>
-.contentDescription
-{
+.contentDescription {
     padding: var(--_pMainY) var(--_pMainX);
     font-weight: 500;
     font-size: 1.1em;
     color: var(--text);
 }
-</style>
+</style>

package/app/components/main/utils/ContentFlag.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computePosition, shift, autoUpdate, arrow } from '@floating-ui/dom';
 
-defineProps<{ icon: string; title: string; }>();
+defineProps<{ icon: string; title: string }>();
 </script>
 
 <template>
@@ -9,8 +9,7 @@ defineProps<{ icon: string; title: string; }>();
 </template>
 
 <style lang="scss" module>
-.flag
-{
+.flag {
     color: red;
 }
-</style>
+</style>

package/app/components/main/utils/ContentReferences.vue

@@ -3,16 +3,16 @@ import type { ContentReferences } from '@package';
 
 import ReferenceGroup from './reference/ReferenceGroup.vue';
 
-const props = defineProps<{ references: ContentReferences; }>();
+const props = defineProps<{ references: ContentReferences }>();
 
 const count = computed(() => {
-    return props.references.reduce((sum, referenceGroup)  => sum + (referenceGroup.references.length || 0), 0);
+    return props.references.reduce(
+        (sum, referenceGroup) => sum + (referenceGroup.references.length || 0),
+        0,
+    );
 });
 
-const phrase = await usePhrases(
-    'references',
-    'references_description',
-);
+const phrase = await usePhrases('references', 'references_description');
 </script>
 
 <template>
@@ -30,47 +30,41 @@ const phrase = await usePhrases(
 </template>
 
 <style lang="scss" module>
-.heading
-{
+.heading {
     display: flex;
     align-items: center;
     gap: var(--gap);
     padding: var(--_pMainY) var(--_pMainX);
 
-    .icon
-    {
-        font-size: .9em;
+    .icon {
+        font-size: 0.9em;
         color: var(--textMuted);
     }
 
-    .count
-    {
+    .count {
         position: relative;
         top: 1px;
         font-weight: 550;
-        font-size: .6em;
-        background: color-mix(in srgb, var(--textDimmed), transparent 65%) ;
+        font-size: 0.6em;
+        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
         border-radius: 20px;
         padding: 2px 10px;
     }
 }
 
-.description
-{
+.description {
     padding: var(--_pMainY) var(--_pMainX);
 }
 
-.referenceGroups
-{
+.referenceGroups {
     display: flex;
     flex-direction: column;
     padding: var(--_pMainY) var(--_pMainX);
 
-    > *:not(:last-of-type)
-    {
+    > *:not(:last-of-type) {
         padding-bottom: var(--gap);
         margin-bottom: var(--gap);
         border-bottom: 1px solid var(--border);
     }
 }
-</style>
+</style>

package/app/components/main/utils/ContentSection.vue

@@ -1,42 +1,45 @@
 <template>
-    <hr :class="$style.hr">
+    <hr :class="$style.hr" />
     <slot></slot>
 </template>
 
 <style lang="scss" module>
-@mixin shade
-{
+@mixin shade {
     height: 50px;
     border-bottom: 2px solid var(--border);
     background: linear-gradient(to bottom, transparent, var(--bgAside));
 }
 
-@mixin simple
-{
+@mixin simple {
     height: var(--gap);
 }
 
-.hr
-{
+.hr {
     border: none;
 
     &::before,
-    &::after
-    {
+    &::after {
         display: block;
         content: '';
     }
 
-    &:nth-of-type(even)
-    {
-        &::before { @include shade; }
-        &::after { @include simple; }
+    &:nth-of-type(even) {
+        &::before {
+            @include shade;
+        }
+        &::after {
+            @include simple;
+        }
     }
 
-    &:nth-of-type(odd)
-    {
-        &::before { @include simple; }
-        &::after { @include shade; transform: scaleY(-1); }
+    &:nth-of-type(odd) {
+        &::before {
+            @include simple;
+        }
+        &::after {
+            @include shade;
+            transform: scaleY(-1);
+        }
     }
 }
-</style>
+</style>

package/app/components/main/utils/ContentTitle.vue

@@ -1,27 +1,30 @@
 <script lang="ts" setup>
 import { isMyIcon } from '#my-icons';
 
-defineProps<{ icon: string; title: string; hint?: string; }>();
+defineProps<{ icon: string; title: string; hint?: string }>();
 </script>
 
 <template>
     <section :class="$style.contentTitle">
         <MyIcon v-if="isMyIcon(icon)" :name="icon as any" :title="hint" />
-        <MyRuntimeIcon v-else name="content-title-icon" :svg="icon" :title="hint" />
+        <MyRuntimeIcon
+            v-else
+            name="content-title-icon"
+            :svg="icon"
+            :title="hint"
+        />
         <h1>{{ title }}</h1>
     </section>
 </template>
 
 <style lang="scss" module>
-.contentTitle
-{
+.contentTitle {
     display: flex;
     align-items: center;
     gap: var(--gap);
     padding: 0 var(--_pMainX);
 
-    [my-icon]
-    {
+    [my-icon] {
         font-size: 1.65em;
         color: var(--textMuted);
         position: relative;
@@ -29,9 +32,8 @@ defineProps<{ icon: string; title: string; hint?: string; }>();
         cursor: help;
     }
 
-    h1
-    {
-        font-size:  1.925em;
+    h1 {
+        font-size: 1.925em;
     }
 }
-</style>
+</style>

package/app/components/main/utils/reference/ReferenceGroup.vue

@@ -4,7 +4,7 @@ import type { ContentReferenceGroup } from '@package';
 import ReferenceSource from './ReferenceSource.vue';
 import ReferenceItem from './ReferenceItem.vue';
 
-defineProps<{ group: ContentReferenceGroup; }>();
+defineProps<{ group: ContentReferenceGroup }>();
 </script>
 
 <template>
@@ -19,23 +19,20 @@ defineProps<{ group: ContentReferenceGroup; }>();
 <style lang="scss" module>
 @use '$/def/bp';
 
-.group
-{
+.group {
     display: flex;
     flex-direction: column;
     gap: var(--gap);
 }
 
-.references
-{
+.references {
     display: flex;
     flex-direction: column;
     gap: var(--gap);
     margin-left: 34px;
 
-    @include bp.below(mobile)
-    {
+    @include bp.below(mobile) {
         margin-left: 0;
     }
 }
-</style>
+</style>

package/app/components/main/utils/reference/ReferenceItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ContentReferenceItem } from '@package';
 
-defineProps<{ reference: ContentReferenceItem; }>();
+defineProps<{ reference: ContentReferenceItem }>();
 </script>
 
 <template>
@@ -9,56 +9,60 @@ defineProps<{ reference: ContentReferenceItem; }>();
         <MyIcon name="arrow-up-to-right" :class="$style.icon" />
         <div :class="$style.body">
             <div :class="$style.header">
-                <a :href="reference.link" target="_blank">{{ reference.title }}</a>
-                <MyIcon v-if="reference.link" name="link-external" :class="$style.linkIcon" />
+                <a :href="reference.link" target="_blank">{{
+                    reference.title
+                }}</a>
+                <MyIcon
+                    v-if="reference.link"
+                    name="link-external"
+                    :class="$style.linkIcon"
+                />
+            </div>
+            <div v-if="reference.description" :class="$style.description">
+                {{ reference.description }}
             </div>
-            <div v-if="reference.description" :class="$style.description">{{ reference.description }}</div>
         </div>
     </div>
 </template>
 
 <style lang="scss" module>
-.reference
-{
-    font-size: .92em;
+.reference {
+    font-size: 0.92em;
     display: flex;
     align-items: start;
     gap: var(--gap);
 
-    .icon
-    {
+    .icon {
         position: relative;
         top: 4px;
         flex-shrink: 0;
         color: var(--textMuted);
     }
 
-    .body
-    {
-        .header
-        {
+    .body {
+        .header {
             display: flex;
             align-items: center;
             gap: var(--gap);
             font-weight: 550;
 
-            a[href] { @include hoverLink; }
+            a[href] {
+                @include hoverLink;
+            }
 
-            .linkIcon
-            {
+            .linkIcon {
                 position: relative;
                 left: -3px;
                 flex-shrink: 0;
                 color: var(--textDimmed);
-                font-size: .85em;
-                opacity: .6;
+                font-size: 0.85em;
+                opacity: 0.6;
             }
         }
 
-        .description
-        {
+        .description {
             color: var(--textMuted);
         }
     }
 }
-</style>
+</style>