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

package/app/components/aside/minor/{Contribute.vue → AsideMinorContribute.vue}

@@ -1,145 +1,175 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
-
-const props = defineProps<{ fullContentId: string }>();
-const phrase = await usePhrases(
-    'make_contribution',
-    'material_improvement',
-    'edit_page',
-    'how_to_improve',
-    'report_problem',
-);
-const paneVisible = defineModel<boolean>('pane');
-
-const issueLink = computed(() => {
-    const ghRepositorty = eruditConfig.repository;
-    return ghRepositorty
-        ? `https://github.com/${ghRepositorty.name}/issues/`
-        : null;
-});
-
-const editPageLink = computed(() => {
-    const ghRepository = eruditConfig.repository;
-    return ghRepository
-        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.fullContentId}`
-        : null;
-});
-</script>
-
-<template>
-    <button :class="$style.contribute" @click="paneVisible = true">
-        <div :class="$style.icon"><MyIcon name="draw" /></div>
-        <div :class="$style.label">{{ phrase.make_contribution }}</div>
-    </button>
-    <TransitionFade>
-        <AsideOverlayPane v-if="paneVisible" stick="bottom">
-            <div :class="$style.paneBottomActions">
-                <AsideListItem
-                    icon="circle-help"
-                    :main="phrase.how_to_improve"
-                />
-                <AsideListItem
-                    v-if="issueLink"
-                    icon="bug"
-                    :main="phrase.report_problem"
-                    :link="issueLink"
-                    target="_blank"
-                />
-                <AsideListItem
-                    v-if="editPageLink"
-                    icon="draw"
-                    :main="phrase.edit_page"
-                    :link="editPageLink"
-                    target="_blank"
-                />
-            </div>
-            <div :class="$style.paneFooter">
-                <span>{{ phrase.material_improvement }}</span>
-                <span style="flex: 1"></span>
-                <MyIcon
-                    name="cross"
-                    :class="$style.close"
-                    @click="paneVisible = false"
-                />
-            </div>
-        </AsideOverlayPane>
-    </TransitionFade>
-</template>
-
-<style lang="scss" module>
-.contribute {
-    display: flex;
-    gap: var(--gap);
-    align-items: center;
-    border: none;
-    border-top: 1px solid var(--border);
-    padding: var(--gap);
-    background: transparent;
-    cursor: pointer;
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-        .icon {
-            border-color: var(--textDimmed);
-        }
-        .label {
-            color: var(--text);
-        }
-    }
-
-    .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        border: 3px dashed var(--border);
-        border-radius: 50%;
-        color: var(--textMuted);
-        @include transition(border-color);
-    }
-
-    .label {
-        color: var(--textMuted);
-        @include transition(color);
-    }
-}
-
-.paneBottomActions {
-    overflow: auto;
-    @include scroll;
-
-    > * {
-        border-bottom: none !important;
-        border-top: 1px solid var(--border);
-        min-height: 70px;
-    }
-}
-
-.paneFooter {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    border-top: 1px solid var(--border);
-    height: 70px;
-    padding-left: var(--gap);
-    font-size: 1.1em;
-    font-weight: 600;
-
-    .close {
-        cursor: pointer;
-        padding: var(--gap);
-        font-size: 20px;
-        color: var(--textMuted);
-
-        @include transition(color);
-
-        &:hover {
-            color: var(--text);
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+import { injectAsideData } from '@erudit/app/scripts/aside/minor/state';
+import {
+    type AsideMinorContentBase,
+    type AsideMinorTopic,
+} from '@shared/aside/minor';
+
+import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
+
+const asideData = injectAsideData<AsideMinorContentBase>();
+const phrase = await usePhrases(
+    'make_contribution',
+    'material_improvement',
+    'edit_page',
+    'how_to_improve',
+    'report_problem',
+);
+
+const paneVisible = defineModel<boolean>('pane');
+
+const issueLink = computed(() => {
+    const ghRepositorty = eruditConfig.repository;
+    return ghRepositorty
+        ? `https://github.com/${ghRepositorty.name}/issues/new/choose`
+        : null;
+});
+
+const editPageLink = computed(() => {
+    const ghRepository = eruditConfig.repository;
+
+    if (!ghRepository) {
+        return undefined;
+    }
+
+    let link = `https://github.com/${ghRepository.name}/edit/${ghRepository.branch}/content/${asideData.value.fsContentDirectory}/`;
+
+    if (asideData.value.type === 'topic') {
+        link += `${(<AsideMinorTopic>asideData.value).part}.bi`;
+    }
+
+    return link;
+});
+
+const buttonVisible = computed(() => {
+    return (
+        eruditConfig.content?.howToImproveLink ||
+        issueLink.value ||
+        editPageLink.value
+    );
+});
+</script>
+
+<template>
+    <button
+        v-if="buttonVisible"
+        :class="$style.contribute"
+        @click="paneVisible = true"
+    >
+        <div :class="$style.icon"><MyIcon name="draw" /></div>
+        <div :class="$style.label">{{ phrase.make_contribution }}</div>
+    </button>
+    <TransitionFade>
+        <AsideOverlayPane v-if="paneVisible" stick="bottom">
+            <div :class="$style.paneBottomActions">
+                <AsideListItem
+                    v-if="eruditConfig.content?.howToImproveLink"
+                    icon="circle-help"
+                    :main="phrase.how_to_improve"
+                    :link="eruditConfig.content.howToImproveLink"
+                    target="_blank"
+                />
+                <AsideListItem
+                    v-if="issueLink"
+                    icon="bug"
+                    :main="phrase.report_problem"
+                    :link="issueLink"
+                    target="_blank"
+                />
+                <AsideListItem
+                    v-if="editPageLink"
+                    icon="draw"
+                    :main="phrase.edit_page"
+                    :link="editPageLink"
+                    target="_blank"
+                />
+            </div>
+            <div :class="$style.paneFooter">
+                <span>{{ phrase.material_improvement }}</span>
+                <span style="flex: 1"></span>
+                <MyIcon
+                    name="cross"
+                    :class="$style.close"
+                    @click="paneVisible = false"
+                />
+            </div>
+        </AsideOverlayPane>
+    </TransitionFade>
+</template>
+
+<style lang="scss" module>
+.contribute {
+    display: flex;
+    gap: var(--gap);
+    align-items: center;
+    border: none;
+    border-top: 1px solid var(--border);
+    padding: var(--gap);
+    background: transparent;
+    cursor: pointer;
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+        .icon {
+            border-color: var(--textDimmed);
+        }
+        .label {
+            color: var(--text);
+        }
+    }
+
+    .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 3px dashed var(--border);
+        border-radius: 50%;
+        color: var(--textMuted);
+        @include transition(border-color);
+    }
+
+    .label {
+        color: var(--textMuted);
+        @include transition(color);
+    }
+}
+
+.paneBottomActions {
+    overflow: auto;
+    @include scroll;
+
+    > * {
+        border-bottom: none !important;
+        border-top: 1px solid var(--border);
+        min-height: 70px;
+    }
+}
+
+.paneFooter {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    border-top: 1px solid var(--border);
+    height: 70px;
+    padding-left: var(--gap);
+    font-size: 1.1em;
+    font-weight: 600;
+
+    .close {
+        cursor: pointer;
+        padding: var(--gap);
+        font-size: 20px;
+        color: var(--textMuted);
+
+        @include transition(color);
+
+        &:hover {
+            color: var(--text);
+        }
+    }
+}
+</style>

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

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-// import { injectNewsData } from '@app/scripts/aside/minor/state';
-
-// const newsData = injectNewsData();
-</script>
-
-<template>
-    <AsideMinorPane>
-        <div></div>
-    </AsideMinorPane>
-</template>
+<script lang="ts" setup>
+// import { injectNewsData } from '@app/scripts/aside/minor/state';
+
+// const newsData = injectNewsData();
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div></div>
+    </AsideMinorPane>
+</template>

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

@@ -1,15 +1,15 @@
-<template>
-    <div :class="$style.asideMinorPane">
-        <slot></slot>
-    </div>
-</template>
-
-<style lang="scss" module>
-.asideMinorPane {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-}
-</style>
+<template>
+    <div :class="$style.asideMinorPane">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" module>
+.asideMinorPane {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+</style>

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

@@ -1,67 +1,66 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{ link?: string; icon: MyIconName; active?: boolean }>();
-
-const Link = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <Link
-        :to="link"
-        :class="[
-            $style.asideMinorTopLink,
-            !link && $style.noLink,
-            active && $style.active,
-        ]"
-    >
-        <MyIcon :name="icon" />
-    </Link>
-</template>
-
-<style lang="scss" module>
-.asideMinorTopLink {
-    position: relative;
-    font-size: 22px;
-    padding: 20px 12px;
-    color: var(--textDimmed);
-    cursor: pointer;
-    color: var(--textMuted);
-
-    @include transition(color, opacity);
-
-    &:hover {
-        color: var(--text);
-        &::after {
-            background: var(--border);
-        }
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        width: 100%;
-        height: 3px;
-        background: transparent;
-        @include transition(background);
-    }
-
-    &.active {
-        color: var(--text);
-        &::after {
-            background: var(--textMuted);
-        }
-    }
-
-    &.noLink {
-        opacity: 0.8;
-        cursor: default;
-        color: var(--textDisabled);
-        &::after {
-            background: transparent;
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{ link?: string; icon: MyIconName; active?: boolean }>();
+</script>
+
+<template>
+    <EruditLink
+        :to="link"
+        :prefetch="false"
+        :class="[
+            $style.asideMinorTopLink,
+            !link && $style.noLink,
+            active && $style.active,
+        ]"
+    >
+        <MyIcon :name="icon" />
+    </EruditLink>
+</template>
+
+<style lang="scss" module>
+.asideMinorTopLink {
+    position: relative;
+    font-size: 22px;
+    padding: 20px 12px;
+    color: var(--textDimmed);
+    cursor: pointer;
+    color: var(--textMuted);
+
+    @include transition(color, opacity);
+
+    &:hover {
+        color: var(--text);
+        &::after {
+            background: var(--border);
+        }
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        width: 100%;
+        height: 3px;
+        background: transparent;
+        @include transition(background);
+    }
+
+    &.active {
+        color: var(--text);
+        &::after {
+            background: var(--textMuted);
+        }
+    }
+
+    &.noLink {
+        opacity: 0.8;
+        cursor: default;
+        color: var(--textDisabled);
+        &::after {
+            background: transparent;
+        }
+    }
+}
+</style>