erudit 4.0.0-dev.5 → 4.0.1

package/app/components/aside/major/settings/repository/SecondaryGitHub.vue

@@ -1,71 +1,71 @@
-<script lang="ts" setup>
-const githubIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,.39C7.16.39,0,7.55,0,16.39c0,7.07,4.59,13.07,10.94,15.2.8.13,1.06-.37,1.06-.8v-2.7c-4.43.96-5.38-2.14-5.38-2.14-.74-1.86-1.78-2.35-1.78-2.35-1.46-.99.11-.96.11-.96,1.6.11,2.45,1.65,2.45,1.65,1.39,2.43,3.74,1.71,4.66,1.33.14-1.04.56-1.74,1.01-2.14-3.55-.4-7.28-1.78-7.28-7.87,0-1.78.61-3.2,1.65-4.34-.16-.4-.72-2.06.16-4.22,0,0,1.34-.43,4.4,1.63,1.26-.35,2.64-.53,4-.53s2.74.18,4,.53c3.06-2.06,4.4-1.63,4.4-1.63.88,2.16.32,3.82.16,4.22,1.04,1.14,1.65,2.56,1.65,4.34,0,6.11-3.74,7.46-7.31,7.86.58.5,1.1,1.47,1.1,2.96v4.38c0,.43.26.94,1.07.8,6.35-2.14,10.93-8.13,10.93-15.2C32,7.55,24.84.39,16,.39"/></svg>';
-const starIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.12,25.46l5.87-3.54,5.87,3.59-1.54-6.71,5.18-4.48-6.81-.61-2.7-6.34-2.7,6.29-6.81.61,5.18,4.52-1.54,6.67ZM16,26.3l-7.74,4.66c-.34.22-.7.31-1.07.28s-.7-.16-.98-.37c-.28-.22-.5-.49-.65-.81-.16-.33-.19-.69-.09-1.1l2.05-8.81L.66,14.23c-.31-.28-.5-.6-.58-.96-.08-.36-.05-.71.07-1.05s.31-.62.56-.84c.25-.22.59-.36,1.03-.42l9.04-.79L14.27,1.87c.16-.37.4-.65.72-.84.33-.19.66-.28,1-.28s.67.09,1,.28c.33.19.57.47.72.84l3.5,8.3,9.04.79c.44.06.78.2,1.03.42.25.22.44.5.56.84.12.34.15.69.07,1.05s-.27.68-.58.95l-6.85,5.92,2.05,8.81c.09.4.06.77-.09,1.1-.16.33-.37.6-.65.81s-.61.34-.98.37c-.37.03-.73-.06-1.07-.28l-7.74-4.66Z"/></svg>';
-
-const pending = ref(true);
-const stars = ref<number | null>(null);
-
-const starsFormatted = computed(() => {
-  if (stars.value === null) return '';
-  const value = stars.value;
-  if (value >= 1000) {
-    const formatted =
-      value >= 10000
-        ? Math.floor(value / 1000).toString()
-        : (value / 1000).toFixed(1).replace(/\.0$/, '');
-    return formatted + 'K';
-  }
-  return value.toString();
-});
-
-onMounted(async () => {
-  try {
-    const useFakeApi = ERUDIT.config.debug.fakeApi.repository;
-
-    if (useFakeApi) {
-      stars.value = 1337;
-      return;
-    }
-
-    const repository = ERUDIT.config?.repository;
-
-    if (!repository || repository.type !== 'github') {
-      return;
-    }
-
-    const parts = repository.name.split('/');
-    if (parts.length !== 2) return;
-
-    const [owner, repo] = parts;
-    const url = `https://api.github.com/repos/${owner}/${repo}`;
-
-    const ghData = await $fetch<any>(url, {
-      responseType: 'json',
-    });
-
-    if (typeof ghData.stargazers_count === 'number') {
-      stars.value = ghData.stargazers_count;
-    }
-  } finally {
-    pending.value = false;
-  }
-});
-</script>
-
-<template>
-  <div class="gap-small flex items-center">
-    <MyRuntimeIcon :svg="githubIcon" class="size-[16px]" />
-    <span>GitHub</span>
-    <TransitionFade>
-      <span
-        v-if="!pending && stars !== null"
-        class="gap-small flex items-center"
-      >
-        <MyRuntimeIcon :svg="starIcon" class="size-[16px]" />
-        <span>{{ starsFormatted }}</span>
-      </span>
-    </TransitionFade>
-  </div>
-</template>
+<script lang="ts" setup>
+const githubIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,.39C7.16.39,0,7.55,0,16.39c0,7.07,4.59,13.07,10.94,15.2.8.13,1.06-.37,1.06-.8v-2.7c-4.43.96-5.38-2.14-5.38-2.14-.74-1.86-1.78-2.35-1.78-2.35-1.46-.99.11-.96.11-.96,1.6.11,2.45,1.65,2.45,1.65,1.39,2.43,3.74,1.71,4.66,1.33.14-1.04.56-1.74,1.01-2.14-3.55-.4-7.28-1.78-7.28-7.87,0-1.78.61-3.2,1.65-4.34-.16-.4-.72-2.06.16-4.22,0,0,1.34-.43,4.4,1.63,1.26-.35,2.64-.53,4-.53s2.74.18,4,.53c3.06-2.06,4.4-1.63,4.4-1.63.88,2.16.32,3.82.16,4.22,1.04,1.14,1.65,2.56,1.65,4.34,0,6.11-3.74,7.46-7.31,7.86.58.5,1.1,1.47,1.1,2.96v4.38c0,.43.26.94,1.07.8,6.35-2.14,10.93-8.13,10.93-15.2C32,7.55,24.84.39,16,.39"/></svg>';
+const starIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.12,25.46l5.87-3.54,5.87,3.59-1.54-6.71,5.18-4.48-6.81-.61-2.7-6.34-2.7,6.29-6.81.61,5.18,4.52-1.54,6.67ZM16,26.3l-7.74,4.66c-.34.22-.7.31-1.07.28s-.7-.16-.98-.37c-.28-.22-.5-.49-.65-.81-.16-.33-.19-.69-.09-1.1l2.05-8.81L.66,14.23c-.31-.28-.5-.6-.58-.96-.08-.36-.05-.71.07-1.05s.31-.62.56-.84c.25-.22.59-.36,1.03-.42l9.04-.79L14.27,1.87c.16-.37.4-.65.72-.84.33-.19.66-.28,1-.28s.67.09,1,.28c.33.19.57.47.72.84l3.5,8.3,9.04.79c.44.06.78.2,1.03.42.25.22.44.5.56.84.12.34.15.69.07,1.05s-.27.68-.58.95l-6.85,5.92,2.05,8.81c.09.4.06.77-.09,1.1-.16.33-.37.6-.65.81s-.61.34-.98.37c-.37.03-.73-.06-1.07-.28l-7.74-4.66Z"/></svg>';
+
+const pending = ref(true);
+const stars = ref<number | null>(null);
+
+const starsFormatted = computed(() => {
+  if (stars.value === null) return '';
+  const value = stars.value;
+  if (value >= 1000) {
+    const formatted =
+      value >= 10000
+        ? Math.floor(value / 1000).toString()
+        : (value / 1000).toFixed(1).replace(/\.0$/, '');
+    return formatted + 'K';
+  }
+  return value.toString();
+});
+
+onMounted(async () => {
+  try {
+    const useFakeApi = ERUDIT.config.debug.fakeApi.repository;
+
+    if (useFakeApi) {
+      stars.value = 1337;
+      return;
+    }
+
+    const repository = ERUDIT.config?.repository;
+
+    if (!repository || repository.type !== 'github') {
+      return;
+    }
+
+    const parts = repository.name.split('/');
+    if (parts.length !== 2) return;
+
+    const [owner, repo] = parts;
+    const url = `https://api.github.com/repos/${owner}/${repo}`;
+
+    const ghData = await $fetch<any>(url, {
+      responseType: 'json',
+    });
+
+    if (typeof ghData.stargazers_count === 'number') {
+      stars.value = ghData.stargazers_count;
+    }
+  } finally {
+    pending.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="gap-small flex items-center">
+    <MyRuntimeIcon :svg="githubIcon" class="size-[16px]" />
+    <span>GitHub</span>
+    <TransitionFade>
+      <span
+        v-if="!pending && stars !== null"
+        class="gap-small flex items-center"
+      >
+        <MyRuntimeIcon :svg="starIcon" class="size-[16px]" />
+        <span>{{ starsFormatted }}</span>
+      </span>
+    </TransitionFade>
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
-<template>
-  <div class="absolute top-0 left-0 h-full w-full">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <div class="absolute top-0 left-0 h-full w-full">
+    <slot></slot>
+  </div>
+</template>

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

@@ -1,20 +1,20 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-defineProps<{ icon: MyIconName; title: string; count?: number }>();
-</script>
-
-<template>
-  <section
-    class="gap-normal p-normal border-border bg-bg-aside flex items-center
-      justify-center border-b"
-  >
-    <MyIcon :name="icon" class="text-text-muted text-[1.3em]" />
-    <span class="font-semibold">{{ formatText(title) }}</span>
-    <span
-      v-if="count"
-      class="text-invert rounded-full bg-neutral-600 px-[8px] py-[2.5px] text-xs
-        font-semibold dark:bg-neutral-300"
-      >{{ count }}</span
-    >
-  </section>
-</template>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+defineProps<{ icon: MyIconName; title: string; count?: number }>();
+</script>
+
+<template>
+  <section
+    class="gap-normal p-normal border-border bg-bg-aside flex items-center
+      justify-center border-b"
+  >
+    <MyIcon :name="icon" class="text-text-muted text-[1.3em]" />
+    <span class="font-semibold">{{ formatText(title) }}</span>
+    <span
+      v-if="count"
+      class="text-invert rounded-full bg-neutral-600 px-[8px] py-[2.5px] text-xs
+        font-semibold dark:bg-neutral-300"
+      >{{ count }}</span
+    >
+  </section>
+</template>

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

@@ -1,47 +1,47 @@
-<script lang="ts" setup>
-import Contribution from './Contribution.vue';
-import ButtonPaneImprove from './ButtonPaneImprove.vue';
-
-const { asideMinorState } = useAsideMinor();
-
-const contentType = computed(() => {
-  return (asideMinorState.value as AsideMinorContentContributions).contentType;
-});
-
-const topicPart = computed(() => {
-  return (asideMinorState.value as AsideMinorContentContributions).topicPart;
-});
-
-const contributions = computed(() => {
-  const state = asideMinorState.value as AsideMinorContentContributions;
-  return state.contributions
-    ?.slice()
-    .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
-});
-
-const contentRelativePath = computed(() => {
-  return (asideMinorState.value as AsideMinorContentContributions)
-    .contentRelativePath;
-});
-
-const phrase = await usePhrases('contribution', 'no_contribution');
-</script>
-
-<template>
-  <AsideMinorPane>
-    <div class="flex h-full w-full flex-col">
-      <AsideMinorPlainHeader
-        icon="users"
-        :title="phrase.contribution"
-        :count="contributions?.length"
-      />
-      <ScrollHolder class="flex-1">
-        <div v-if="contributions" class="*:border-border *:border-b">
-          <Contribution v-for="contribution of contributions" :contribution />
-        </div>
-        <AsidePlainMessage v-else :text="phrase.no_contribution" />
-      </ScrollHolder>
-      <ButtonPaneImprove :contentRelativePath :contentType :topicPart />
-    </div>
-  </AsideMinorPane>
-</template>
+<script lang="ts" setup>
+import Contribution from './Contribution.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const contentType = computed(() => {
+  return (asideMinorState.value as AsideMinorContentContributions).contentType;
+});
+
+const topicPart = computed(() => {
+  return (asideMinorState.value as AsideMinorContentContributions).topicPart;
+});
+
+const contributions = computed(() => {
+  const state = asideMinorState.value as AsideMinorContentContributions;
+  return state.contributions
+    ?.slice()
+    .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
+});
+
+const contentRelativePath = computed(() => {
+  return (asideMinorState.value as AsideMinorContentContributions)
+    .contentRelativePath;
+});
+
+const phrase = await usePhrases('contribution', 'no_contribution');
+</script>
+
+<template>
+  <AsideMinorPane>
+    <div class="flex h-full w-full flex-col">
+      <AsideMinorPlainHeader
+        icon="users"
+        :title="phrase.contribution"
+        :count="contributions?.length"
+      />
+      <ScrollHolder class="flex-1">
+        <div v-if="contributions" class="*:border-border *:border-b">
+          <Contribution v-for="contribution of contributions" :contribution />
+        </div>
+        <AsidePlainMessage v-else :text="phrase.no_contribution" />
+      </ScrollHolder>
+      <ButtonPaneImprove :contentRelativePath :contentType :topicPart />
+    </div>
+  </AsideMinorPane>
+</template>

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

@@ -1,37 +1,37 @@
-<script lang="ts" setup>
-import ButtonPaneContributions from './ButtonPaneContributions.vue';
-import ButtonPaneImprove from './ButtonPaneImprove.vue';
-import Toc from './Toc.vue';
-
-const { asideMinorState } = useAsideMinor();
-
-const contributions = computed(() => {
-  const state = asideMinorState.value as AsideMinorContentContributions;
-  return state.contributions?.sort((a, b) =>
-    a.contributorId.localeCompare(b.contributorId),
-  );
-});
-
-const toc = computed(() => {
-  return (asideMinorState.value as AsideMinorContentPage).toc;
-});
-
-const contentRelativePath = computed(() => {
-  return (asideMinorState.value as AsideMinorContentPage).contentRelativePath;
-});
-
-const phrase = await usePhrases('page');
-</script>
-
-<template>
-  <AsideMinorPane>
-    <div class="flex h-full w-full flex-col">
-      <AsideMinorPlainHeader :icon="ICONS.page" :title="phrase.page" />
-      <ScrollHolder class="flex-1">
-        <Toc :toc :key="contentRelativePath" />
-      </ScrollHolder>
-      <ButtonPaneContributions :contributions />
-      <ButtonPaneImprove :contentRelativePath contentType="page" />
-    </div>
-  </AsideMinorPane>
-</template>
+<script lang="ts" setup>
+import ButtonPaneContributions from './ButtonPaneContributions.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+import Toc from './Toc.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const contributions = computed(() => {
+  const state = asideMinorState.value as AsideMinorContentContributions;
+  return state.contributions?.sort((a, b) =>
+    a.contributorId.localeCompare(b.contributorId),
+  );
+});
+
+const toc = computed(() => {
+  return (asideMinorState.value as AsideMinorContentPage).toc;
+});
+
+const contentRelativePath = computed(() => {
+  return (asideMinorState.value as AsideMinorContentPage).contentRelativePath;
+});
+
+const phrase = await usePhrases('page');
+</script>
+
+<template>
+  <AsideMinorPane>
+    <div class="flex h-full w-full flex-col">
+      <AsideMinorPlainHeader :icon="ICONS.page" :title="phrase.page" />
+      <ScrollHolder class="flex-1">
+        <Toc :toc :key="contentRelativePath" />
+      </ScrollHolder>
+      <ButtonPaneContributions :contributions />
+      <ButtonPaneImprove :contentRelativePath contentType="page" />
+    </div>
+  </AsideMinorPane>
+</template>

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

@@ -1,61 +1,61 @@
-<script lang="ts" setup>
-import { topicParts } from '@erudit-js/core/content/topic';
-import ButtonPaneContributions from './ButtonPaneContributions.vue';
-import ButtonPaneImprove from './ButtonPaneImprove.vue';
-import Toc from './Toc.vue';
-import TopicPartButton from './TopicPartButton.vue';
-
-const { asideMinorState } = useAsideMinor();
-
-const topicPart = computed(() => {
-  return (asideMinorState.value as AsideMinorContentTopic).topicPart;
-});
-
-const availableTopicParts = computed(() => {
-  const state = asideMinorState.value as AsideMinorContentTopic;
-  return state.parts;
-});
-
-const shortContentId = computed(() => {
-  return (asideMinorState.value as AsideMinorContentTopic).shortContentId;
-});
-
-const contributions = computed(() => {
-  const state = asideMinorState.value as AsideMinorContentContributions;
-  return state.contributions
-    ?.slice()
-    .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
-});
-
-const toc = computed(() => {
-  return (asideMinorState.value as AsideMinorContentTopic).toc;
-});
-
-const contentRelativePath = computed(() => {
-  return (asideMinorState.value as AsideMinorContentTopic).contentRelativePath;
-});
-</script>
-
-<template>
-  <AsideMinorPane>
-    <div class="flex h-full w-full flex-col">
-      <div class="border-border gap-normal flex justify-center border-b">
-        <TopicPartButton
-          v-for="part of topicParts"
-          :part
-          :active="part === topicPart"
-          :link="
-            availableTopicParts.includes(part)
-              ? PAGES.topic(part, shortContentId)
-              : undefined
-          "
-        />
-      </div>
-      <ScrollHolder class="flex-1">
-        <Toc :toc :key="contentRelativePath + '/' + topicPart" />
-      </ScrollHolder>
-      <ButtonPaneContributions :contributions />
-      <ButtonPaneImprove :contentRelativePath contentType="topic" :topicPart />
-    </div>
-  </AsideMinorPane>
-</template>
+<script lang="ts" setup>
+import { topicParts } from '@erudit-js/core/content/topic';
+import ButtonPaneContributions from './ButtonPaneContributions.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+import Toc from './Toc.vue';
+import TopicPartButton from './TopicPartButton.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const topicPart = computed(() => {
+  return (asideMinorState.value as AsideMinorContentTopic).topicPart;
+});
+
+const availableTopicParts = computed(() => {
+  const state = asideMinorState.value as AsideMinorContentTopic;
+  return state.parts;
+});
+
+const shortContentId = computed(() => {
+  return (asideMinorState.value as AsideMinorContentTopic).shortContentId;
+});
+
+const contributions = computed(() => {
+  const state = asideMinorState.value as AsideMinorContentContributions;
+  return state.contributions
+    ?.slice()
+    .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
+});
+
+const toc = computed(() => {
+  return (asideMinorState.value as AsideMinorContentTopic).toc;
+});
+
+const contentRelativePath = computed(() => {
+  return (asideMinorState.value as AsideMinorContentTopic).contentRelativePath;
+});
+</script>
+
+<template>
+  <AsideMinorPane>
+    <div class="flex h-full w-full flex-col">
+      <div class="border-border gap-normal flex justify-center border-b">
+        <TopicPartButton
+          v-for="part of topicParts"
+          :part
+          :active="part === topicPart"
+          :link="
+            availableTopicParts.includes(part)
+              ? PAGES.topic(part, shortContentId)
+              : undefined
+          "
+        />
+      </div>
+      <ScrollHolder class="flex-1">
+        <Toc :toc :key="contentRelativePath + '/' + topicPart" />
+      </ScrollHolder>
+      <ButtonPaneContributions :contributions />
+      <ButtonPaneImprove :contentRelativePath contentType="topic" :topicPart />
+    </div>
+  </AsideMinorPane>
+</template>