erudit 2.0.0-dev.7 → 2.0.0-dev.9

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

@@ -1,118 +1,118 @@
-<script lang="ts" setup>
-import { topicParts, type TopicPart } from 'erudit-cog/schema';
-
-import type { TopicPartLinks } from '@erudit/shared/content/data/type/topic';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
-
-defineProps<{ partLinks: TopicPartLinks; active: TopicPart }>();
-
-const phrase = await usePhrases('article', 'summary', 'practice');
-const Link = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <section :class="$style.topicPartSwitch">
-        <Link
-            v-for="topicPart of topicParts"
-            :to="partLinks[topicPart]"
-            :class="[
-                $style.partButton,
-                active === topicPart && $style.active,
-                !partLinks[topicPart] && $style.noLink,
-            ]"
-        >
-            <MyIcon :name="TOPIC_PART_ICON[topicPart]" />
-            <div :class="$style.label">{{ phrase[topicPart] }}</div>
-        </Link>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.topicPartSwitch {
-    --height: 50px;
-
-    display: flex;
-    align-items: end;
-    justify-content: center;
-    gap: var(--gapBig);
-    margin: var(--_pMainY) 0;
-    margin-top: var(--gapBig);
-
-    width: 100%;
-    height: var(--height);
-    background: linear-gradient(to bottom, transparent, var(--bgAside));
-    border-bottom: 2px solid var(--border);
-}
-
-.partButton {
-    position: relative;
-    top: 2px;
-
-    display: flex;
-    align-items: center;
-    gap: calc(var(--gap) / 1.3);
-    padding: 0 var(--gap);
-
-    height: var(--height);
-    background: var(--bgMain);
-    border: 2px solid var(--border);
-    border-bottom-color: transparent;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-
-    line-height: 0;
-    text-decoration: none;
-    font-weight: 550;
-    color: var(--textMuted);
-
-    @include transition(color, background, border-color);
-
-    [my-icon] {
-        font-size: 1.1em;
-    }
-
-    &:not(.active) {
-        background: var(--bgAside);
-        border-bottom-color: color-mix(
-            in srgb,
-            var(--border),
-            var(--bgMain) 50%
-        );
-
-        &.noLink {
-            color: color-mix(in srgb, var(--textDisabled), transparent 35%);
-            border-bottom-color: var(--border);
-            cursor: not-allowed;
-        }
-
-        &:not(.noLink):hover {
-            color: var(--text);
-            background: var(--bgMain);
-            border-bottom-color: transparent;
-        }
-    }
-
-    &.active {
-        color: var(--brand);
-    }
-}
-
-@include bp.below('mobile') {
-    .topicPartSwitch {
-        --height: 45px;
-        gap: var(--gap);
-    }
-
-    .partButton {
-        gap: var(--gapSmall);
-
-        &:not(.active) {
-            .label {
-                display: none;
-            }
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import { topicParts, type TopicPart } from 'erudit-cog/schema';
+
+import type { TopicPartLinks } from '@erudit/shared/content/data/type/topic';
+import { TOPIC_PART_ICON } from '@erudit/shared/icons';
+
+defineProps<{ partLinks: TopicPartLinks; active: TopicPart }>();
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+const Link = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <section :class="$style.topicPartSwitch">
+        <Link
+            v-for="topicPart of topicParts"
+            :to="partLinks[topicPart]"
+            :class="[
+                $style.partButton,
+                active === topicPart && $style.active,
+                !partLinks[topicPart] && $style.noLink,
+            ]"
+        >
+            <MyIcon :name="TOPIC_PART_ICON[topicPart]" />
+            <div :class="$style.label">{{ phrase[topicPart] }}</div>
+        </Link>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.topicPartSwitch {
+    --height: 50px;
+
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    gap: var(--gapBig);
+    margin: var(--_pMainY) 0;
+    margin-top: var(--gapBig);
+
+    width: 100%;
+    height: var(--height);
+    background: linear-gradient(to bottom, transparent, var(--bgAside));
+    border-bottom: 2px solid var(--border);
+}
+
+.partButton {
+    position: relative;
+    top: 2px;
+
+    display: flex;
+    align-items: center;
+    gap: calc(var(--gap) / 1.3);
+    padding: 0 var(--gap);
+
+    height: var(--height);
+    background: var(--bgMain);
+    border: 2px solid var(--border);
+    border-bottom-color: transparent;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    line-height: 0;
+    text-decoration: none;
+    font-weight: 550;
+    color: var(--textMuted);
+
+    @include transition(color, background, border-color);
+
+    [my-icon] {
+        font-size: 1.1em;
+    }
+
+    &:not(.active) {
+        background: var(--bgAside);
+        border-bottom-color: color-mix(
+            in srgb,
+            var(--border),
+            var(--bgMain) 50%
+        );
+
+        &.noLink {
+            color: color-mix(in srgb, var(--textDisabled), transparent 35%);
+            border-bottom-color: var(--border);
+            cursor: not-allowed;
+        }
+
+        &:not(.noLink):hover {
+            color: var(--text);
+            background: var(--bgMain);
+            border-bottom-color: transparent;
+        }
+    }
+
+    &.active {
+        color: var(--brand);
+    }
+}
+
+@include bp.below('mobile') {
+    .topicPartSwitch {
+        --height: 45px;
+        gap: var(--gap);
+    }
+
+    .partButton {
+        gap: var(--gapSmall);
+
+        &:not(.active) {
+            .label {
+                display: none;
+            }
+        }
+    }
+}
+</style>

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

@@ -1,75 +1,75 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-import type { Context } from '@erudit/shared/content/context';
-
-defineProps<{ context: Context }>();
-
-const Link = defineNuxtLink({ prefetch: false });
-
-function getIcon(contextIcon: string) {
-    return contextIcon as MyIconName;
-}
-</script>
-
-<template>
-    <section :class="$style.breadcrumb">
-        <template v-for="contextItem of context.slice(0, -1)">
-            <Link :to="contextItem.href" :class="$style.breadcrumbItem">
-                <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
-                {{ contextItem.title }}
-            </Link>
-            <MyIcon :class="$style.sep" name="angle-right" />
-        </template>
-    </section>
-</template>
-
-<style lang="scss" module>
-.breadcrumb {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--gapSmall);
-    padding: var(--_pMainY) var(--_pMainX);
-    color: var(--textDimmed);
-    overflow: hidden;
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 30px;
-        height: 100%;
-        background: linear-gradient(to right, transparent, var(--bgMain));
-    }
-
-    .breadcrumbItem {
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        gap: var(--gapSmall);
-
-        line-height: 0;
-        font-weight: 450;
-        color: var(--textDimmed);
-        text-decoration: none;
-
-        @include transition(color);
-
-        // [my-icon]
-        // {
-        //     position: relative;
-        //     top: .6px;
-        // }
-
-        &:hover {
-            color: var(--textMuted);
-        }
-    }
-
-    .sep {
-        position: relative;
-        top: 0.5px;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import type { Context } from '@erudit/shared/content/context';
+
+defineProps<{ context: Context }>();
+
+const Link = defineNuxtLink({ prefetch: false });
+
+function getIcon(contextIcon: string) {
+    return contextIcon as MyIconName;
+}
+</script>
+
+<template>
+    <section :class="$style.breadcrumb">
+        <template v-for="contextItem of context.slice(0, -1)">
+            <Link :to="contextItem.href" :class="$style.breadcrumbItem">
+                <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
+                {{ contextItem.title }}
+            </Link>
+            <MyIcon :class="$style.sep" name="angle-right" />
+        </template>
+    </section>
+</template>
+
+<style lang="scss" module>
+.breadcrumb {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--gapSmall);
+    padding: var(--_pMainY) var(--_pMainX);
+    color: var(--textDimmed);
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 30px;
+        height: 100%;
+        background: linear-gradient(to right, transparent, var(--bgMain));
+    }
+
+    .breadcrumbItem {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--gapSmall);
+
+        line-height: 0;
+        font-weight: 450;
+        color: var(--textDimmed);
+        text-decoration: none;
+
+        @include transition(color);
+
+        // [my-icon]
+        // {
+        //     position: relative;
+        //     top: .6px;
+        // }
+
+        &:hover {
+            color: var(--textMuted);
+        }
+    }
+
+    .sep {
+        position: relative;
+        top: 0.5px;
+    }
+}
+</style>

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

@@ -1,29 +1,29 @@
-<script lang="ts" setup>
-defineProps<{ decoration: string }>();
-const baseUrlPath = useBaseUrlPath();
-</script>
-
-<template>
-    <div :class="$style.contentDecoration">
-        <img :src="baseUrlPath(contentAsset(decoration))" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.contentDecoration {
-    float: right;
-    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
-
-    @media (max-width: 800px) {
-        display: none;
-    }
-
-    img {
-        display: block;
-        aspect-ratio: 1;
-        width: 100%;
-        max-width: 125px;
-        max-height: 125px;
-    }
-}
-</style>
+<script lang="ts" setup>
+defineProps<{ decoration: string }>();
+const baseUrlPath = useBaseUrlPath();
+</script>
+
+<template>
+    <div :class="$style.contentDecoration">
+        <img :src="baseUrlPath(contentAsset(decoration))" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.contentDecoration {
+    float: right;
+    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
+
+    @media (max-width: 800px) {
+        display: none;
+    }
+
+    img {
+        display: block;
+        aspect-ratio: 1;
+        width: 100%;
+        max-width: 125px;
+        max-height: 125px;
+    }
+}
+</style>

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

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

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

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