erudit 2.0.0-dev.7

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

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import { useFloating, autoUpdate, arrow, shift } from '@floating-ui/vue';
+
+import type { PopoverData } from '@shared/popover';
+import { isMyIcon } from '#my-icons';
+
+defineProps<{ data: PopoverData }>();
+
+const referenceElement = useTemplateRef('reference');
+const popoverElement = useTemplateRef('popover');
+const arrowElement = useTemplateRef('popover-arrow');
+
+const { floatingStyles, middlewareData } = useFloating(
+    referenceElement,
+    popoverElement,
+    {
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            shift({
+                boundary: document?.querySelector('[erudit-main]'),
+                padding: 15,
+            }),
+            arrow({ element: arrowElement }),
+        ],
+    },
+);
+
+const popoverVisible = ref(false);
+
+const hideDelay = 100;
+let hideTimeout;
+
+function showPopover() {
+    clearTimeout(hideTimeout);
+    popoverVisible.value = true;
+}
+
+function hidePopover() {
+    hideTimeout = setTimeout(() => {
+        popoverVisible.value = false;
+    }, hideDelay);
+}
+</script>
+
+<template>
+    <div
+        ref="reference"
+        :class="$style.reference"
+        :style="`--popoverColor: ${data.color}`"
+        @mouseenter="showPopover"
+        @mouseleave="hidePopover"
+    >
+        <MyIcon v-if="isMyIcon(data.icon)" :name="data.icon as any" />
+        <MyRuntimeIcon v-else name="popover-icon" :svg="data.icon" />
+
+        {{ data.title }}
+
+        <TransitionFade>
+            <div
+                v-if="popoverVisible"
+                ref="popover"
+                :class="$style.popover"
+                :style="floatingStyles"
+            >
+                <div
+                    ref="popover-arrow"
+                    :class="$style.arrow"
+                    :style="{
+                        position: 'absolute',
+                        top:
+                            middlewareData.arrow?.y != null
+                                ? `${middlewareData.arrow.y}px`
+                                : '',
+                        left:
+                            middlewareData.arrow?.x != null
+                                ? `${middlewareData.arrow.x}px`
+                                : '',
+                    }"
+                ></div>
+
+                <div :class="$style.inner">
+                    <MyIcon
+                        :class="$style.floatIcon"
+                        v-if="isMyIcon(data.icon)"
+                        :name="data.icon as any"
+                    />
+                    <MyRuntimeIcon
+                        :class="$style.floatIcon"
+                        v-else
+                        name="popover-icon"
+                        :svg="data.icon"
+                    />
+
+                    <div :class="$style.title">{{ data.title }}</div>
+                    <div v-if="data.description">{{ data.description }}</div>
+
+                    <slot></slot>
+                </div>
+            </div>
+        </TransitionFade>
+    </div>
+</template>
+
+<style lang="scss" module>
+.reference {
+    --_baseColor: color-mix(in srgb, var(--popoverColor), var(--invert) 35%);
+    --_bgColor: color-mix(in srgb, var(--popoverColor), var(--bgAside) 85%);
+}
+
+.reference {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--gapSmall);
+    padding: var(--gapSmall);
+
+    background: var(--_bgColor);
+    color: var(--_baseColor);
+    font-size: 0.9em;
+    line-height: 0;
+
+    border: 1px solid var(--_baseColor);
+    border-radius: 3px;
+    cursor: help;
+}
+
+.popover {
+    cursor: auto;
+
+    position: absolute;
+    z-index: 999;
+    min-width: 300px;
+    max-width: 320px;
+    padding-top: var(--gap);
+    line-height: normal;
+
+    .arrow {
+        position: absolute;
+        top: 14px;
+        left: 0;
+        background: var(--_baseColor);
+        width: 32px;
+        height: 32px;
+        transform: rotate(45deg);
+    }
+
+    .inner {
+        position: relative;
+        z-index: 1;
+        box-shadow: 0 0 18px
+            color-mix(
+                in srgb,
+                color-mix(in srgb, var(--popoverColor), var(--invert) 50%),
+                transparent 70%
+            );
+        padding: var(--gapSmall);
+        border: 2px solid var(--_baseColor);
+        border-radius: 3px;
+        background: linear-gradient(45deg, var(--bgAside), var(--_bgColor) 70%);
+
+        font-size: 0.9em;
+
+        .floatIcon {
+            float: right;
+            margin: 5px 5px 10px 10px;
+            font-size: 30px;
+            opacity: 0.3;
+        }
+
+        .title {
+            font-weight: 600;
+            margin-bottom: var(--gapSmall);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { ContentFlag } from '@package';
+
+import type { ContentGenericData } from '@shared/content/data/base';
+
+import ContentPopover from './ContentPopover.vue';
+import type { PopoverData } from '@shared/popover';
+import { type MyIconName } from '#my-icons';
+
+const props = defineProps<{
+    generic: ContentGenericData /* TODO: customPopovers[] */;
+}>();
+
+const phrase = await usePhrases(
+    'flag_dev',
+    'flag_dev_description',
+    'flag_advanced',
+    'flag_advanced_description',
+    'flag_secondary',
+    'flag_secondary_description',
+    'popover_dependencies',
+    'popover_dependencies_description',
+);
+
+const flagData: Record<ContentFlag, PopoverData> = {
+    dev: {
+        icon: <MyIconName>'alert',
+        color: 'var(--warn)',
+        title: phrase.flag_dev,
+        description: phrase.flag_dev_description,
+    },
+    advanced: {
+        icon: <MyIconName>'asterisk',
+        color: '#7c67ac',
+        title: phrase.flag_advanced,
+        description: phrase.flag_advanced_description,
+    },
+    secondary: {
+        icon: <MyIconName>'puzzle',
+        color: '#7faf35',
+        title: phrase.flag_secondary,
+        description: phrase.flag_secondary_description,
+    },
+};
+
+const dependenciesData: PopoverData = {
+    icon: <MyIconName>'shuffle',
+    color: '#47baa9',
+    title: phrase.popover_dependencies,
+    description: phrase.popover_dependencies_description,
+};
+
+const hasPopovers = computed(() => {
+    if (props.generic?.flags && Object.keys(props.generic.flags)?.length)
+        return true;
+
+    if (props.generic?.dependencies) return true;
+
+    return false;
+});
+</script>
+
+<template>
+    <section v-if="hasPopovers" :class="$style.popovers">
+        <ContentPopover
+            v-for="flagName of Object.keys(generic.flags)"
+            :data="flagData[flagName]"
+        />
+
+        <ContentPopover v-if="generic?.dependencies" :data="dependenciesData">
+            <ul :class="$style.dependenciesList">
+                <li v-for="(value, key) in generic.dependencies">
+                    <NuxtLink :prefetch="false" :to="key">{{ value }}</NuxtLink>
+                </li>
+            </ul>
+        </ContentPopover>
+    </section>
+</template>
+
+<style lang="scss" module>
+.popovers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+    padding: var(--_pMainY) var(--_pMainX);
+}
+
+.dependenciesList {
+    margin-top: var(--gapSmall);
+    list-style-type: square;
+    list-style-position: inside;
+    padding-inline-start: 0;
+
+    li {
+        &::marker {
+            content: '↪';
+        }
+
+        a {
+            color: inherit;
+            padding-left: var(--gapSmall);
+        }
+    }
+}
+</style>

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

@@ -0,0 +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);
+    }
+}
+</style>

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

@@ -0,0 +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); }
+    }
+}
+</style>

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

@@ -0,0 +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;
+    }
+}
+</style>

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

@@ -0,0 +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;
+    }
+}
+</style>

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

@@ -0,0 +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);
+        }
+    }
+}
+</style>

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

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