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

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

@@ -1,76 +1,76 @@
-<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: .9em;
-        color: var(--textMuted);
-    }
-
-    .count
-    {
-        position: relative;
-        top: 1px;
-        font-weight: 550;
-        font-size: .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);
-    }
-}
+<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: .9em;
+        color: var(--textMuted);
+    }
+
+    .count
+    {
+        position: relative;
+        top: 1px;
+        font-weight: 550;
+        font-size: .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/ContentSection.vue

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

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

@@ -1,37 +1,37 @@
-<script lang="ts" setup>
-import { isMyIcon } from '#my-icons';
-
-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" />
-        <h1>{{ title }}</h1>
-    </section>
-</template>
-
-<style lang="scss" module>
-.contentTitle
-{
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: 0 var(--_pMainX);
-
-    [my-icon]
-    {
-        font-size: 1.65em;
-        color: var(--textMuted);
-        position: relative;
-        top: 1px;
-        cursor: help;
-    }
-
-    h1
-    {
-        font-size:  1.925em;
-    }
-}
+<script lang="ts" setup>
+import { isMyIcon } from '#my-icons';
+
+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" />
+        <h1>{{ title }}</h1>
+    </section>
+</template>
+
+<style lang="scss" module>
+.contentTitle
+{
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: 0 var(--_pMainX);
+
+    [my-icon]
+    {
+        font-size: 1.65em;
+        color: var(--textMuted);
+        position: relative;
+        top: 1px;
+        cursor: help;
+    }
+
+    h1
+    {
+        font-size:  1.925em;
+    }
+}
 </style>

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

@@ -1,41 +1,41 @@
-<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;
-    }
-}
+<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>

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

@@ -1,64 +1,64 @@
-<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: .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: .85em;
-                opacity: .6;
-            }
-        }
-
-        .description
-        {
-            color: var(--textMuted);
-        }
-    }
-}
+<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: .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: .85em;
+                opacity: .6;
+            }
+        }
+
+        .description
+        {
+            color: var(--textMuted);
+        }
+    }
+}
 </style>