erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/components/main/{utils → content}/ContentReferences.vue

@@ -1,70 +1,70 @@
-<script lang="ts" setup>
-import type { ContentReferences } from '@package';
-
-import ReferenceGroup from './reference/ReferenceGroup.vue';
-
-const props = defineProps<{ references: ContentReferences }>();
-
-const count = computed(() => {
-    return props.references.reduce(
-        (sum, referenceGroup) => sum + (referenceGroup.references.length || 0),
-        0,
-    );
-});
-
-const phrase = await usePhrases('references', 'references_description');
-</script>
-
-<template>
-    <h2 :class="$style.heading">
-        <MyIcon name="link-external" :class="$style.icon" />
-        <span :class="$style.title">{{ phrase.references }}</span>
-        <span :class="$style.count">{{ count }}</span>
-    </h2>
-
-    <p :class="$style.description">{{ phrase.references_description }}</p>
-
-    <section :class="$style.referenceGroups">
-        <ReferenceGroup v-for="group of references" :group />
-    </section>
-</template>
-
-<style lang="scss" module>
-.heading {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--_pMainY) var(--_pMainX);
-
-    .icon {
-        font-size: 0.9em;
-        color: var(--textMuted);
-    }
-
-    .count {
-        position: relative;
-        top: 1px;
-        font-weight: 550;
-        font-size: 0.6em;
-        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
-        border-radius: 20px;
-        padding: 2px 10px;
-    }
-}
-
-.description {
-    padding: var(--_pMainY) var(--_pMainX);
-}
-
-.referenceGroups {
-    display: flex;
-    flex-direction: column;
-    padding: var(--_pMainY) var(--_pMainX);
-
-    > *:not(:last-of-type) {
-        padding-bottom: var(--gap);
-        margin-bottom: var(--gap);
-        border-bottom: 1px solid var(--border);
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ContentReferences } from '@erudit-js/cog/schema';
+
+import ReferenceGroup from './reference/ReferenceGroup.vue';
+
+const props = defineProps<{ references: ContentReferences }>();
+
+const count = computed(() => {
+    return props.references.reduce(
+        (sum, referenceGroup) => sum + (referenceGroup.references.length || 0),
+        0,
+    );
+});
+
+const phrase = await usePhrases('references', 'references_description');
+</script>
+
+<template>
+    <h2 :class="$style.heading">
+        <MyIcon name="link-external" :class="$style.icon" />
+        <span :class="$style.title">{{ phrase.references }}</span>
+        <span :class="$style.count">{{ count }}</span>
+    </h2>
+
+    <p :class="$style.description">{{ phrase.references_description }}</p>
+
+    <section :class="$style.referenceGroups">
+        <ReferenceGroup v-for="group of references" :group />
+    </section>
+</template>
+
+<style lang="scss" module>
+.heading {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--_pMainY) var(--_pMainX);
+
+    .icon {
+        font-size: 0.9em;
+        color: var(--textMuted);
+    }
+
+    .count {
+        position: relative;
+        top: 1px;
+        font-weight: 550;
+        font-size: 0.6em;
+        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
+        border-radius: 20px;
+        padding: 2px 10px;
+    }
+}
+
+.description {
+    padding: var(--_pMainY) var(--_pMainX);
+}
+
+.referenceGroups {
+    display: flex;
+    flex-direction: column;
+    padding: var(--_pMainY) var(--_pMainX);
+
+    > *:not(:last-of-type) {
+        padding-bottom: var(--gap);
+        margin-bottom: var(--gap);
+        border-bottom: 1px solid var(--border);
+    }
+}
+</style>

package/app/components/main/{utils → content}/reference/ReferenceGroup.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import type { ContentReferenceGroup } from '@package';
-
-import ReferenceSource from './ReferenceSource.vue';
-import ReferenceItem from './ReferenceItem.vue';
-
-defineProps<{ group: ContentReferenceGroup }>();
-</script>
-
-<template>
-    <div :class="$style.group">
-        <ReferenceSource :source="group.source" />
-        <div :class="$style.references">
-            <ReferenceItem v-for="reference of group.references" :reference />
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-}
-
-.references {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-    margin-left: 34px;
-
-    @include bp.below(mobile) {
-        margin-left: 0;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ContentReferenceGroup } from '@erudit-js/cog/schema';
+
+import ReferenceSource from './ReferenceSource.vue';
+import ReferenceItem from './ReferenceItem.vue';
+
+defineProps<{ group: ContentReferenceGroup }>();
+</script>
+
+<template>
+    <div :class="$style.group">
+        <ReferenceSource :source="group.source" />
+        <div :class="$style.references">
+            <ReferenceItem v-for="reference of group.references" :reference />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+}
+
+.references {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin-left: 34px;
+
+    @include bp.below(mobile) {
+        margin-left: 0;
+    }
+}
+</style>

package/app/components/main/{utils → content}/reference/ReferenceItem.vue

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

package/app/components/main/{utils → content}/reference/ReferenceSource.vue

@@ -1,116 +1,120 @@
-<script lang="ts" setup>
-import { type MyIconName } from '#my-icons';
-import type { ContentReferenceSource } from '@package';
-
-const props = defineProps<{ source: ContentReferenceSource }>();
-
-const typeIcon = computed<MyIconName>(() => {
-    switch (props.source.type) {
-        case 'book':
-            return 'book';
-        case 'site':
-            return 'globe';
-        default:
-            return 'file-lines';
-    }
-});
-
-const phrase = await usePhrases('reference_source_featured');
-</script>
-
-<template>
-    <div :class="$style.source">
-        <div :class="$style.typeIcon">
-            <MyIcon :name="typeIcon" />
-        </div>
-        <div :class="$style.body">
-            <div :class="$style.header">
-                <MyIcon :name="typeIcon" :class="$style.headerTypeIcon" />
-                <a :href="source.link" target="_blank">{{ source.title }}</a>
-                <MyIcon
-                    v-if="source.featured"
-                    name="star"
-                    style="cursor: help"
-                    :title="phrase.reference_source_featured"
-                />
-                <MyIcon
-                    v-if="source.link"
-                    name="link-external"
-                    :class="$style.linkIcon"
-                />
-            </div>
-            <div v-if="source.description" :class="$style.description">
-                {{ source.description }}
-            </div>
-            <div v-if="source.comment" :class="$style.comment">
-                {{ source.comment }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.source {
-    display: flex;
-    align-items: start;
-    gap: var(--gap);
-
-    .typeIcon {
-        flex-shrink: 0;
-        position: relative;
-        top: 4px;
-        color: var(--textMuted);
-
-        @include bp.below(mobile) {
-            display: none;
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: var(--gapSmall);
-
-        .header {
-            display: flex;
-            align-items: center;
-            gap: var(--gap);
-            font-weight: 550;
-
-            a[href] {
-                @include hoverLink;
-            }
-
-            [my-icon] {
-                flex-shrink: 0;
-                font-size: 1em;
-                color: var(--textDimmed);
-            }
-
-            .headerTypeIcon {
-                color: var(--textMuted);
-                display: none;
-                @include bp.below(mobile) {
-                    display: initial;
-                }
-            }
-
-            .linkIcon {
-                font-size: 0.85em;
-                opacity: 0.6;
-            }
-        }
-
-        .description,
-        .comment {
-            color: var(--textMuted);
-        }
-
-        .comment {
-            font-style: italic;
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ContentReferenceSource } from '@erudit-js/cog/schema';
+
+import { type MyIconName } from '#my-icons';
+
+const props = defineProps<{ source: ContentReferenceSource }>();
+
+const typeIcon = computed<MyIconName>(() => {
+    switch (props.source.type) {
+        case 'book':
+            return 'book';
+        case 'site':
+            return 'globe';
+        default:
+            return 'file-lines';
+    }
+});
+
+const pretty = useFormatText();
+const phrase = await usePhrases('reference_source_featured');
+</script>
+
+<template>
+    <div :class="$style.source">
+        <div :class="$style.typeIcon">
+            <MyIcon :name="typeIcon" />
+        </div>
+        <div :class="$style.body">
+            <div :class="$style.header">
+                <MyIcon :name="typeIcon" :class="$style.headerTypeIcon" />
+                <a :href="source.link" target="_blank">{{
+                    pretty(source.title)
+                }}</a>
+                <MyIcon
+                    v-if="source.featured"
+                    name="star"
+                    style="cursor: help"
+                    :title="phrase.reference_source_featured"
+                />
+                <MyIcon
+                    v-if="source.link"
+                    name="link-external"
+                    :class="$style.linkIcon"
+                />
+            </div>
+            <div v-if="source.description" :class="$style.description">
+                {{ pretty(source.description) }}
+            </div>
+            <div v-if="source.comment" :class="$style.comment">
+                {{ pretty(source.comment) }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.source {
+    display: flex;
+    align-items: start;
+    gap: var(--gap);
+
+    .typeIcon {
+        flex-shrink: 0;
+        position: relative;
+        top: 4px;
+        color: var(--textMuted);
+
+        @include bp.below(mobile) {
+            display: none;
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gapSmall);
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: var(--gap);
+            font-weight: 550;
+
+            a[href] {
+                @include hoverLink;
+            }
+
+            [my-icon] {
+                flex-shrink: 0;
+                font-size: 1em;
+                color: var(--textDimmed);
+            }
+
+            .headerTypeIcon {
+                color: var(--textMuted);
+                display: none;
+                @include bp.below(mobile) {
+                    display: initial;
+                }
+            }
+
+            .linkIcon {
+                font-size: 0.85em;
+                opacity: 0.6;
+            }
+        }
+
+        .description,
+        .comment {
+            color: var(--textMuted);
+        }
+
+        .comment {
+            font-style: italic;
+        }
+    }
+}
+</style>