From 36f6b0e63dc76a86f8e4e9ee91fbffa03940a6fd Mon Sep 17 00:00:00 2001
From: Alessandro Jean <14254807+alessandrojean@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:15:10 -0300
Subject: [PATCH] Remove old help center links.

---
 client/src/components/ContentBody.vue       |  38 -------
 client/src/components/ContentFooter.vue     | 100 -----------------
 client/src/components/ContentTitle.vue      |  35 ------
 client/src/components/HomeFooter.vue        |  20 ++--
 client/src/components/PageAside.vue         |  44 --------
 client/src/components/ProfileMenu.vue       |  14 ++-
 client/src/layouts/help-center.vue          | 112 -------------------
 client/src/pages/help/[category]/[slug].vue | 118 --------------------
 client/src/pages/sign-in.vue                |  21 ++--
 client/src/symbols.ts                       |  26 -----
 10 files changed, 35 insertions(+), 493 deletions(-)
 delete mode 100644 client/src/components/ContentBody.vue
 delete mode 100644 client/src/components/ContentFooter.vue
 delete mode 100644 client/src/components/ContentTitle.vue
 delete mode 100644 client/src/components/PageAside.vue
 delete mode 100644 client/src/layouts/help-center.vue
 delete mode 100644 client/src/pages/help/[category]/[slug].vue

diff --git a/client/src/components/ContentBody.vue b/client/src/components/ContentBody.vue
deleted file mode 100644
index cbb6eece..00000000
--- a/client/src/components/ContentBody.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="content-body prose dark:prose-invert max-w-none">
-    <slot />
-  </section>
-</template>
-
-<style lang="postcss">
-.content-body dl {
-  @apply space-y-2;
-}
-
-.content-body dl > dt {
-  @apply font-semibold text-gray-800 dark:text-gray-100;
-}
-
-.content-body dl > dd {
-  @apply ml-6;
-}
-
-.content-body dl > dd + dt {
-  @apply pt-2;
-}
-
-.content-body kbd {
-  @apply inline-flex rounded-md py-0.5 px-2 text-xs select-none
-    font-sans-safe
-    bg-gray-200/80 dark:bg-gray-700 dark:text-white
-    border-b-2 border-gray-300 dark:border-gray-600;
-}
-
-.content-body :where(h1, h2, h3, h4, h5, h6) {
-  @apply scroll-mt-24;
-}
-
-.content-body .table-of-contents {
-  @apply sr-only;
-}
-</style>
diff --git a/client/src/components/ContentFooter.vue b/client/src/components/ContentFooter.vue
deleted file mode 100644
index faa64eda..00000000
--- a/client/src/components/ContentFooter.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { PencilSquareIcon } from '@heroicons/vue/24/outline'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/20/solid'
-import { useI18n } from '@/i18n'
-import { DocumentationKey } from '@/symbols'
-import { injectStrict } from '@/util'
-
-defineProps({ githubLink: String })
-
-const { t, locale } = useI18n({ useScope: 'global' })
-const docs = injectStrict(DocumentationKey)
-
-const route = useRoute()
-const category = computed(() => String(route.params.category))
-const slug = computed(() => String(route.params.slug))
-
-const pages = computed(() => {
-  const pages = docs.find(c => c.category === category.value)?.pages ?? []
-
-  return pages.filter(p => p.locale === locale.value)
-})
-
-const currentIdx = computed(() =>
-  pages.value.findIndex(p => p.slug === slug.value),
-)
-const previous = computed(() => pages.value[currentIdx.value - 1])
-const next = computed(() => pages.value[currentIdx.value + 1])
-</script>
-
-<template>
-  <footer class="content-footer">
-    <a
-      v-if="githubLink"
-      :href="githubLink"
-      class="flex items-center w-fit text-sm mb-3 font-medium text-primary-600 dark:text-primary-400 rounded has-ring-focus hocus:underline"
-    >
-      <span aria-hidden="true">
-        <PencilSquareIcon class="w-5 h-5 mr-2" />
-      </span>
-      <span>{{ t('about.editThisPage') }}</span>
-    </a>
-    <div
-      class="-mx-1 flex flex-col md:flex-row md:justify-between md:items-center pt-2.5 space-y-4 md:space-y-0 border-t border-gray-300 dark:border-gray-600"
-    >
-      <RouterLink
-        v-if="previous"
-        :to="{
-          name: 'help-category-slug',
-          params: { category, slug: previous.slug },
-        }"
-        class="link previous has-ring-focus"
-      >
-        <div class="flex items-center">
-          <ChevronLeftIcon class="w-4 h-4 inline-block -ml-1 mr-0.5" />
-          <span>{{ t('about.previous') }}</span>
-        </div>
-        <span class="title">{{ t(previous.title) }}</span>
-      </RouterLink>
-      <RouterLink
-        v-if="next"
-        :to="{
-          name: 'help-category-slug',
-          params: { category, slug: next.slug },
-        }"
-        class="link next has-ring-focus"
-      >
-        <div class="flex items-center justify-end">
-          <span>{{ t('about.next') }}</span>
-          <ChevronRightIcon class="w-4 h-4 inline-block ml-0.5 -mr-1" />
-        </div>
-        <span class="title">{{ t(next.title) }}</span>
-      </RouterLink>
-    </div>
-  </footer>
-</template>
-
-<style lang="postcss" scoped>
-.content-footer {
-  @apply pt-2.5 mt-10 text-center sm:text-left;
-}
-
-.link {
-  @apply flex flex-col text-xs text-left rounded p-1;
-}
-
-.link.next {
-  @apply ml-auto text-right;
-}
-
-.link .title {
-  @apply text-base font-medium
-    text-primary-600 dark:text-primary-400;
-}
-
-.link:where(:hover, :focus-visible) .title {
-  @apply underline underline-offset-1 decoration-2
-    decoration-primary-600/60 dark:decoration-primary-400/80
-    text-primary-700 dark:text-primary-300;
-}
-</style>
diff --git a/client/src/components/ContentTitle.vue b/client/src/components/ContentTitle.vue
deleted file mode 100644
index 2d778679..00000000
--- a/client/src/components/ContentTitle.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import { useI18n } from '@/i18n'
-
-defineProps<{ date?: string | null }>()
-
-const { t, d } = useI18n({ useScope: 'global' })
-</script>
-
-<template>
-  <div class="content-title">
-    <h1>
-      <slot />
-    </h1>
-
-    <time
-      v-if="date"
-      :datetime="date"
-      class="text-sm text-gray-600 dark:text-gray-400"
-    >
-      {{ t('footer.lastUpdate', [d(date, 'long')]) }}
-    </time>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.content-title {
-  @apply py-20 md:pb-10 md:pt-12;
-}
-
-.content-title h1 {
-  @apply font-display-safe font-bold leading-7
-    text-3xl md:text-4xl
-    text-gray-800 dark:text-gray-100;
-}
-</style>
diff --git a/client/src/components/HomeFooter.vue b/client/src/components/HomeFooter.vue
index 2b27ab52..b6996f5c 100644
--- a/client/src/components/HomeFooter.vue
+++ b/client/src/components/HomeFooter.vue
@@ -1,22 +1,26 @@
 <script lang="ts" setup>
-import type { RouteLocationRaw } from 'vue-router'
 import { useI18n } from '@/i18n'
 
 const { t, locale } = useI18n({ useScope: 'global' })
 
 interface Link {
-  route: RouteLocationRaw
+  href: string
   text: string
 }
 
+const baseUrl = computed(() => {
+  const localePath = locale.value === 'pt-BR' ? '/pt' : ''
+  return 'https://alessandrojean.github.io/toshokan' + localePath
+})
+
 const links = computed<Link[]>(() => [
-  { route: '/help/general/accessibility', text: t('footer.links.a11y') },
-  { route: '/help/guide/instructions', text: t('footer.links.instructions') },
+  { href: `${baseUrl.value}/general/accessibility`, text: t('footer.links.a11y') },
+  { href: `${baseUrl.value}/guides/instructions`, text: t('footer.links.instructions') },
   {
-    route: '/help/general/privacy-policy',
+    href: `${baseUrl.value}/general/privacy-policy`,
     text: t('footer.links.privacyPolicy'),
   },
-  { route: '/help/general/terms-of-use', text: t('footer.links.termsOfUse') },
+  { href: `${baseUrl.value}/general/terms-of-use`, text: t('footer.links.termsOfUse') },
 ])
 </script>
 
@@ -29,9 +33,9 @@ const links = computed<Link[]>(() => [
     <nav>
       <ul>
         <li v-for="(link, i) of links" :key="i">
-          <RouterLink :to="link.route">
+          <a :href="link.href" target="_blank">
             {{ link.text }}
-          </RouterLink>
+          </a>
         </li>
       </ul>
     </nav>
diff --git a/client/src/components/PageAside.vue b/client/src/components/PageAside.vue
deleted file mode 100644
index 991a5511..00000000
--- a/client/src/components/PageAside.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import { useI18n } from '@/i18n'
-import type { DocumentationCategory } from '@/symbols'
-import { DocumentationKey } from '@/symbols'
-import { injectStrict } from '@/util'
-
-const docs = injectStrict(DocumentationKey)
-const { t, locale } = useI18n({ useScope: 'global' })
-
-function currentLocalePages(category: DocumentationCategory) {
-  return category.pages.filter(p => p.locale === locale.value)
-}
-</script>
-
-<template>
-  <aside class="w-56 py-12">
-    <nav class="sticky top-24 text-sm">
-      <LocaleSelector v-model="locale" class="w-56" />
-      <div class="space-y-10 mt-8">
-        <div v-for="group in docs" :key="group.category">
-          <p
-            class="uppercase tracking-wider font-semibold dark:font-bold text-xs pl-1"
-          >
-            {{ t(`about.categories.${group.category}`) }}
-          </p>
-          <ul class="space-y-3.5 mt-4 dark:text-gray-200 -ml-2">
-            <li v-for="page in currentLocalePages(group)" :key="page.slug">
-              <RouterLink
-                :to="{
-                  name: 'help-category-slug',
-                  params: { category: group.category, slug: page.slug },
-                }"
-                class="px-3 py-1.5 has-ring-focus rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 motion-safe:transition-colors"
-                active-class="font-semibold text-primary-800 hover:text-primary-800 dark:!text-gray-100 bg-primary-100 dark:bg-gray-600 hover:!bg-primary-100 dark:hover:!bg-gray-600"
-              >
-                {{ t(page.title) }}
-              </RouterLink>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  </aside>
-</template>
diff --git a/client/src/components/ProfileMenu.vue b/client/src/components/ProfileMenu.vue
index b5d676b5..81840bc6 100644
--- a/client/src/components/ProfileMenu.vue
+++ b/client/src/components/ProfileMenu.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<ProfileMenuProps>(), {
 
 const { light, transparent } = toRefs(props)
 
-const { t } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
 const authStore = useAuthStore()
 
 const profileImageUrl = computed(() => authStore.profileImageUrl)
@@ -26,6 +26,11 @@ const profileImageUrl = computed(() => authStore.profileImageUrl)
 function signOut() {
   authStore.signOut()
 }
+
+const instructionsLink = computed(() => {
+  const localePath = locale.value === 'pt-BR' ? 'pt/' : ''
+  return `https://alessandrojean.github.io/toshokan/${localePath}guides/instructions`
+})
 </script>
 
 <template>
@@ -88,8 +93,9 @@ function signOut() {
             </RouterLink>
           </MenuItem>
           <MenuItem v-slot="{ active }">
-            <RouterLink
-              to="/help/guide/instructions"
+            <a
+              target="_blank"
+              :href="instructionsLink"
               :class="[
                 active
                   ? 'bg-gray-100 dark:bg-gray-600 md:dark:bg-gray-600/50'
@@ -103,7 +109,7 @@ function signOut() {
                 />
               </span>
               {{ t('dashboard.header.menu.help') }}
-            </RouterLink>
+            </a>
           </MenuItem>
         </div>
         <div class="pt-1">
diff --git a/client/src/layouts/help-center.vue b/client/src/layouts/help-center.vue
deleted file mode 100644
index b8a39976..00000000
--- a/client/src/layouts/help-center.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts" setup>
-import { nextTick, onMounted, provide, ref, watch } from 'vue'
-
-import { useAuthStore } from '@/stores/auth'
-import { DocumentationKey, RebuildPageContentsKey } from '@/symbols'
-import type { Documentation, DocumentationCategory } from '@/symbols'
-
-import FadeTransition from '@/components/transitions/FadeTransition.vue'
-import PageAside from '@/components/PageAside.vue'
-import PageContents from '@/components/PageContents.vue'
-import PageHeader from '@/components/PageHeader.vue'
-
-const authStore = useAuthStore()
-
-watch(
-  () => authStore.started,
-  async () => await handleHash(),
-)
-onMounted(async () => await handleHash())
-
-async function handleHash() {
-  if (window.location.hash && authStore.started) {
-    await nextTick()
-    await nextTick()
-
-    document
-      .querySelector(window.location.hash)
-      ?.scrollIntoView({ behavior: 'smooth' })
-  }
-}
-
-const pageContents = ref<InstanceType<typeof PageContents>>()
-
-function rebuildPageContents(resetPosition?: boolean) {
-  if (resetPosition) {
-    handleHash()
-  }
-
-  pageContents.value?.buildPageContents(resetPosition)
-}
-
-provide(RebuildPageContentsKey, rebuildPageContents)
-
-function groupBy<T, R extends string | number | symbol>(
-  collection: T[],
-  predicate: (item: T) => R,
-): Record<R, T[]> {
-  return collection.reduce((record, item) => {
-    const key = predicate(item)
-
-    if (record[key]) {
-      record[key].push(item)
-    } else {
-      record[key] = [item]
-    }
-
-    return record
-  }, {} as Record<R, T[]>)
-}
-
-const files = import.meta.glob('/docs/**/*.md', { as: 'raw' })
-const pages = Object.entries(files).map(([key, content]) => {
-  const [locale, category, page] = key.replace('/docs/', '').split('/')
-  const [categoryOrder, categorySlug] = category.split('.')
-  const [pageOrder, pageSlug] = page.split('.')
-
-  return {
-    locale,
-    categoryOrder,
-    categorySlug,
-    pageOrder,
-    pageSlug,
-    content,
-  }
-})
-
-const docs: Documentation = Object
-  .entries(groupBy(pages, item => item.categorySlug))
-  .map<DocumentationCategory>(([category, pages]) => ({
-    order: Number(pages[0].categoryOrder),
-    category,
-    pages: pages
-      .map(page => ({
-        order: Number(page.pageOrder),
-        slug: page.pageSlug,
-        locale: page.locale,
-        title:
-          `app.routes.about.${
-          page.pageSlug.replace(/-([a-z])/g, g => g[1].toUpperCase())}`,
-        content: page.content,
-      }))
-      .sort((a, b) => a.order - b.order),
-  }))
-  .sort((a, b) => a.order - b.order)
-
-provide(DocumentationKey, docs)
-</script>
-
-<template>
-  <div>
-    <PageHeader />
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 flex">
-      <PageAside class="hidden md:block" />
-      <router-view v-slot="{ Component, route }">
-        <FadeTransition>
-          <component :is="Component" :key="route.path" />
-        </FadeTransition>
-      </router-view>
-      <PageContents ref="pageContents" class="hidden xl:block" />
-    </div>
-  </div>
-</template>
diff --git a/client/src/pages/help/[category]/[slug].vue b/client/src/pages/help/[category]/[slug].vue
deleted file mode 100644
index 8994487e..00000000
--- a/client/src/pages/help/[category]/[slug].vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts" setup>
-import { computed, nextTick, ref, watch, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
-
-import useMarkdown from '@/composables/useMarkdown'
-import { useI18n } from '@/i18n'
-import type {
-  DocumentationPage,
-} from '@/symbols'
-import {
-  ChangeTitleKey,
-  DocumentationKey,
-  RebuildPageContentsKey,
-} from '@/symbols'
-import { injectStrict } from '@/util'
-
-import Alert from '@/components/Alert.vue'
-import Content from '@/components/Content.vue'
-import ContentTitle from '@/components/ContentTitle.vue'
-import ContentBody from '@/components/ContentBody.vue'
-import ContentFooter from '@/components/ContentFooter.vue'
-
-const route = useRoute()
-const category = computed(() => String(route.params.category))
-const slug = computed(() => String(route.params.slug))
-const { t, locale } = useI18n({ useScope: 'global' })
-
-const markdownBody = ref('')
-const markdownLocale = ref(locale.value)
-const pageTitle = ref('')
-const mounted = ref(false)
-const rebuildPageContents = injectStrict(RebuildPageContentsKey)
-
-const { renderMarkdown, frontmatter } = useMarkdown()
-const docs = injectStrict(DocumentationKey)
-const changeTitle = injectStrict(ChangeTitleKey)
-
-function getMarkdownContent(
-  locale: string,
-  category: string,
-  pageSlug: string,
-): DocumentationPage {
-  const categoryPages = docs.find(c => c.category === category)?.pages ?? []
-  const page = categoryPages.filter(p => p.slug === pageSlug)
-  const localePage = page.find(p => p.locale === locale)
-  const englishPage = page.find(p => p.locale === 'en-US')!
-
-  return localePage ?? englishPage
-}
-
-watchEffect(async () => {
-  const page = getMarkdownContent(locale.value, category.value, slug.value)
-
-  if (!page) {
-    return
-  }
-
-  markdownBody.value = await page.content()
-  pageTitle.value = page.title
-  changeTitle(t(page.title))
-
-  await nextTick()
-  rebuildPageContents(!mounted.value)
-  mounted.value = true
-})
-
-watch(locale, (newLocale) => {
-  markdownLocale.value = newLocale
-  changeTitle(t(pageTitle.value))
-})
-
-function getImageUrl(name: string) {
-  return new URL(`../../../assets/about/${name}.jpg`, import.meta.url).href
-}
-
-const body = computed(() => {
-  const markdownWithAssets = markdownBody.value.replace(
-    /@\/assets\/about\/(.*)\.jpg/g,
-    (_, assetImage) => getImageUrl(assetImage),
-  )
-
-  return renderMarkdown(markdownWithAssets) ?? ''
-})
-
-const gitHubLink = computed(
-  () =>
-    `https://github.com/alessandrojean/toshokan/blob/main/docs/${markdownLocale.value}/${slug.value}.md`,
-)
-</script>
-
-<route lang="yaml">
-meta:
-  layout: help-center
-</route>
-
-<template>
-  <Content>
-    <ContentTitle :date="frontmatter?.date">
-      {{ frontmatter?.title }}
-    </ContentTitle>
-    <Alert
-      :show="markdownLocale !== locale && locale !== 'en-US'"
-      type="info"
-      class="mb-10 !py-3"
-    >
-      {{ t('about.englishOnly') }}
-
-      <template #actions>
-        <a :href="gitHubLink" target="_blank">
-          {{ t('about.helpTranslate') }}
-        </a>
-      </template>
-    </Alert>
-    <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-    <ContentBody v-html="body" />
-    <ContentFooter :github-link="gitHubLink" />
-  </Content>
-</template>
diff --git a/client/src/pages/sign-in.vue b/client/src/pages/sign-in.vue
index d0d2e385..161b420b 100644
--- a/client/src/pages/sign-in.vue
+++ b/client/src/pages/sign-in.vue
@@ -24,7 +24,7 @@ onMounted(redirectToDashboard)
 
 watch(shouldRedirect, redirectToDashboard)
 
-const { t } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
 
 const steps = computed(() => [
   t('signIn.step1'),
@@ -33,18 +33,23 @@ const steps = computed(() => [
 ])
 
 interface Link {
-  route: RouteLocationRaw
+  href: string
   text: string
 }
 
+const baseUrl = computed(() => {
+  const localePath = locale.value === 'pt-BR' ? '/pt' : ''
+  return 'https://alessandrojean.github.io/toshokan' + localePath
+})
+
 const links = computed<Link[]>(() => [
-  { route: '/help/general/accessibility', text: t('footer.links.a11y') },
-  { route: '/help/guide/instructions', text: t('footer.links.instructions') },
+  { href: `${baseUrl.value}/general/accessibility`, text: t('footer.links.a11y') },
+  { href: `${baseUrl.value}/guides/instructions`, text: t('footer.links.instructions') },
   {
-    route: '/help/general/privacy-policy',
+    href: `${baseUrl.value}/general/privacy-policy`,
     text: t('footer.links.privacyPolicy'),
   },
-  { route: '/help/general/terms-of-use', text: t('footer.links.termsOfUse') },
+  { href: `${baseUrl.value}/general/terms-of-use`, text: t('footer.links.termsOfUse') },
 ])
 
 const showOverlay = ref(false)
@@ -195,9 +200,9 @@ meta:
           >
             <ul class="flex flex-wrap pr-8">
               <li v-for="(link, i) of links" :key="i">
-                <RouterLink :to="link.route" class="utility-link mr-2 mb-2">
+                <a :href="link.href" target="_blank" class="utility-link mr-2 mb-2">
                   {{ link.text }}
-                </RouterLink>
+                </a>
               </li>
             </ul>
             <ThemeToggle class="shrink-0 -mr-1" bottom :light="!darkMode" />
diff --git a/client/src/symbols.ts b/client/src/symbols.ts
index bc466ce3..a59b2cc0 100644
--- a/client/src/symbols.ts
+++ b/client/src/symbols.ts
@@ -32,29 +32,3 @@ export const EnableSearchShortcutKey: InjectionKey<EnableSearchShortcut>
 
 export const SetNavbarTransparentKey: InjectionKey<SetNavbarTransparent>
   = Symbol('setNavbarTransparent')
-
-/**
- * Help
- */
-
-export type RebuildPageContents = (resetPosition?: boolean) => void
-export interface DocumentationPage {
-  order: number
-  slug: string
-  locale: string
-  title: string
-  content: () => Promise<string>
-}
-export interface DocumentationCategory {
-  order: number
-  category: string
-  pages: DocumentationPage[]
-}
-export type Documentation = DocumentationCategory[]
-
-export const RebuildPageContentsKey: InjectionKey<RebuildPageContents> = Symbol(
-  'rebuildPageContents',
-)
-
-export const DocumentationKey: InjectionKey<Documentation>
-  = Symbol('documentation')