erudit 3.0.0-dev.4 → 3.0.0-dev.6

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

@@ -1,145 +1,145 @@
-<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 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>

package/app/components/aside/minor/content/AsideMinorContent.vue

@@ -1,92 +1,92 @@
-<script lang="ts" setup>
-import type { AsideMinorContent } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-const contentData = injectAsideData<AsideMinorContent>();
-const phrase = await usePhrases('contributors', 'no_contributors');
-const contributePaneVisible = ref(false);
-
-watch(contentData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorContent">
-        <section :class="$style.contentNav">
-            <AsideMinorTopLink
-                :title="contentData.nav?.previous?.title"
-                :link="contentData.nav?.previous?.link"
-                :icon="'arrow-left'"
-            />
-
-            <div :class="$style.title">
-                {{ phrase.contributors }}:
-                <span>{{ contentData.contributors?.length || 0 }}</span>
-            </div>
-
-            <AsideMinorTopLink
-                :title="contentData.nav?.next?.title"
-                :link="contentData.nav?.next?.link"
-                :icon="'arrow-left'"
-                class="icon-flip-h"
-            />
-        </section>
-        <section v-if="contentData.contributors" :class="$style.contributors">
-            <ContributorListItem
-                v-for="contributor of contentData.contributors"
-                v-bind="contributor"
-            />
-        </section>
-        <section v-else :class="$style.noContributors">
-            {{ phrase.no_contributors }}
-        </section>
-        <AsideMinorContribute
-            :fullContentId="contentData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorContent {
-    display: flex;
-    flex-direction: column;
-
-    .contentNav {
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-
-        .title {
-            text-align: center;
-            color: var(--text);
-            font-size: 1.1em;
-            font-weight: 600;
-            width: 158px;
-
-            span {
-                padding-left: var(--gap);
-                color: var(--textMuted);
-            }
-        }
-    }
-
-    .contributors {
-        flex: 1;
-        overflow: auto;
-        @include scroll;
-
-        > * {
-            border-bottom: 1px solid var(--border);
-        }
-    }
-
-    .noContributors {
-        flex: 1;
-        text-align: center;
-        padding: var(--gap);
-        color: var(--textMuted);
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { AsideMinorContent } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+const contentData = injectAsideData<AsideMinorContent>();
+const phrase = await usePhrases('contributors', 'no_contributors');
+const contributePaneVisible = ref(false);
+
+watch(contentData, () => (contributePaneVisible.value = false));
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorContent">
+        <section :class="$style.contentNav">
+            <AsideMinorTopLink
+                :title="contentData.nav?.previous?.title"
+                :link="contentData.nav?.previous?.link"
+                :icon="'arrow-left'"
+            />
+
+            <div :class="$style.title">
+                {{ phrase.contributors }}:
+                <span>{{ contentData.contributors?.length || 0 }}</span>
+            </div>
+
+            <AsideMinorTopLink
+                :title="contentData.nav?.next?.title"
+                :link="contentData.nav?.next?.link"
+                :icon="'arrow-left'"
+                class="icon-flip-h"
+            />
+        </section>
+        <section v-if="contentData.contributors" :class="$style.contributors">
+            <ContributorListItem
+                v-for="contributor of contentData.contributors"
+                v-bind="contributor"
+            />
+        </section>
+        <section v-else :class="$style.noContributors">
+            {{ phrase.no_contributors }}
+        </section>
+        <AsideMinorContribute
+            :fullContentId="contentData.fullContentId"
+            v-model:pane="contributePaneVisible"
+        />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorContent {
+    display: flex;
+    flex-direction: column;
+
+    .contentNav {
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .title {
+            text-align: center;
+            color: var(--text);
+            font-size: 1.1em;
+            font-weight: 600;
+            width: 158px;
+
+            span {
+                padding-left: var(--gap);
+                color: var(--textMuted);
+            }
+        }
+    }
+
+    .contributors {
+        flex: 1;
+        overflow: auto;
+        @include scroll;
+
+        > * {
+            border-bottom: 1px solid var(--border);
+        }
+    }
+
+    .noContributors {
+        flex: 1;
+        text-align: center;
+        padding: var(--gap);
+        color: var(--textMuted);
+    }
+}
+</style>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import type { AsideMinorTopic } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-import TopicNav from './TopicNav.vue';
-import TopicToc from './TopicToc.vue';
-import TopicContributors from './TopicContributors.vue';
-
-const topicData = injectAsideData<AsideMinorTopic>();
-const contributePaneVisible = ref(false);
-
-watch(topicData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorTopic">
-        <TopicNav />
-        <TopicToc />
-        <TopicContributors v-if="topicData.contributors" />
-        <AsideMinorContribute
-            :fullContentId="topicData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorTopic {
-    display: flex;
-    flex-direction: column;
-}
-</style>
+<script lang="ts" setup>
+import type { AsideMinorTopic } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+import TopicNav from './TopicNav.vue';
+import TopicToc from './TopicToc.vue';
+import TopicContributors from './TopicContributors.vue';
+
+const topicData = injectAsideData<AsideMinorTopic>();
+const contributePaneVisible = ref(false);
+
+watch(topicData, () => (contributePaneVisible.value = false));
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorTopic">
+        <TopicNav />
+        <TopicToc />
+        <TopicContributors v-if="topicData.contributors" />
+        <AsideMinorContribute
+            :fullContentId="topicData.fullContentId"
+            v-model:pane="contributePaneVisible"
+        />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorTopic {
+    display: flex;
+    flex-direction: column;
+}
+</style>