From 50ef1f2f95a87a7ad1d558bd683b8267cfe76fe6 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 7 Oct 2024 10:53:30 +0200
Subject: [PATCH] fix FAQ page

- fix #1283 use min width for the Help link in the header
- add Ellipse collapsible panel to FaqPage
- fix #1277 jump to the right place, added custom margin top of 100
- fix #1282 (entries cut off)
---
 src/components/CollapsiblePanel.vue           | 124 +++++++++++++
 src/components/CollapsibleParagraph.vue       |  79 ++++++++
 src/components/CollapsibleSection.vue         | 119 ++++++++++++
 src/components/FaqPage.vue                    | 140 --------------
 src/components/HomePageFaq.vue                |  39 ----
 src/components/TheHeader.vue                  |   2 +
 src/components/modules/Ellipsis.vue           |  69 ++++---
 .../stories/CollapsiblePanel.stories.ts       |  33 ++++
 .../stories/CollapsibleSection.stories.ts     |   0
 src/models/CollapsibleParagraph.ts            |  28 +++
 src/pages/FaqPage.vue                         | 171 ++++++++++++++++++
 src/router/index.ts                           |  12 +-
 src/styles/style.css                          |  16 ++
 13 files changed, 614 insertions(+), 218 deletions(-)
 create mode 100644 src/components/CollapsiblePanel.vue
 create mode 100644 src/components/CollapsibleParagraph.vue
 create mode 100644 src/components/CollapsibleSection.vue
 delete mode 100644 src/components/FaqPage.vue
 delete mode 100644 src/components/HomePageFaq.vue
 create mode 100644 src/components/stories/CollapsiblePanel.stories.ts
 create mode 100644 src/components/stories/CollapsibleSection.stories.ts
 create mode 100644 src/models/CollapsibleParagraph.ts
 create mode 100644 src/pages/FaqPage.vue

diff --git a/src/components/CollapsiblePanel.vue b/src/components/CollapsiblePanel.vue
new file mode 100644
index 000000000..ff8e2da58
--- /dev/null
+++ b/src/components/CollapsiblePanel.vue
@@ -0,0 +1,124 @@
+<template>
+  <div ref="rootRef" class="CollapsiblePanel" :class="className" :style="rootStyles">
+    <div
+      ref="headerRef"
+      class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
+      @click="togglePanelState"
+    >
+      <slot name="header">
+        <div class="p-3">
+          <h4 class="m-0">{{ title }}</h4>
+          <p v-if="subtitle.length" class="mb-0">subtitle</p>
+        </div>
+      </slot>
+      <button
+        class="btn btn-sm btn-icon mx-2"
+        :class="{
+          active: modelValue
+        }"
+      >
+        <Icon name="chevron" />
+      </button>
+    </div>
+    <div class="CollapsiblePanel__body position-absolute">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+/**
+ * Model value is used to control the visibility of the panel.
+ */
+
+import { ref, computed, watch } from 'vue'
+import Icon from './base/Icon.vue'
+
+const emit = defineEmits(['update:modelValue', 'heightChanged'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  className: {
+    type: String,
+    default: ''
+  }
+})
+
+const rootRef = ref<HTMLElement | null>(null)
+const headerRef = ref<HTMLElement | null>(null)
+
+const togglePanelState = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+
+const collapsedHeight = computed(() => {
+  const header = headerRef.value
+  return header ? `${header.offsetHeight}px` : 'auto'
+})
+
+const expandedHeight = computed(() => {
+  const root = rootRef.value
+  const parsedOffset = parseInt(collapsedHeight.value)
+  const offset = isNaN(parsedOffset) ? 0 : parsedOffset
+  return root ? `${root.scrollHeight + offset}px` : 'auto'
+})
+
+const rootStyles = computed(() => {
+  return {
+    height: props.modelValue ? expandedHeight.value : collapsedHeight.value
+  }
+})
+
+watch(
+  () => rootStyles.value.height,
+  height => {
+    emit('heightChanged', height)
+  },
+  { immediate: true }
+)
+</script>
+
+<style>
+.CollapsiblePanel {
+  position: relative;
+  overflow: hidden;
+  will-change: height;
+  transition: height 0.6s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+
+.CollapsiblePanel__header {
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.CollapsiblePanel h3 {
+  font-family: var(--bs-font-sans-serif);
+}
+
+.CollapsiblePanel__body {
+  min-height: 50px;
+  width: 100%;
+}
+
+.CollapsiblePanel button {
+  transition: transform 0.3s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+
+.CollapsiblePanel button.active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/CollapsibleParagraph.vue b/src/components/CollapsibleParagraph.vue
new file mode 100644
index 000000000..b3350613b
--- /dev/null
+++ b/src/components/CollapsibleParagraph.vue
@@ -0,0 +1,79 @@
+<template>
+  <CollapsiblePanel
+    class="CollapsibleParagraph"
+    v-model="state"
+    :title="paragraph.title"
+    @heightChanged="e => emit('heightChanged', e)"
+  >
+    <template v-slot:header>
+      <div class="d-flex align-items-center">
+        <h4 class="mb-0">{{ paragraph.title }}</h4>
+      </div>
+    </template>
+    <div v-html="paragraph.description"></div>
+    <ol v-if="paragraph.paragraphs.length">
+      <li
+        v-for="(subtask, idx) in paragraph.paragraphs"
+        :key="subtask.id"
+        class="pt-2 mb-2 mx-2 d-flex align-items-center"
+      >
+        <div class="p-1 flex-grow-1">
+          {{ subtask.title }}
+        </div>
+      </li>
+    </ol>
+  </CollapsiblePanel>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import type { ICollapsibleParagraph } from '@/models/CollapsibleParagraph'
+
+const emit = defineEmits(['update:modelValue', 'heightChanged'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+  paragraph: {
+    type: Object as PropType<ICollapsibleParagraph>,
+    required: true
+  },
+  taskNum: {
+    type: Number,
+    required: true
+  }
+})
+
+const state = computed({
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  },
+  get() {
+    return props.modelValue
+  }
+})
+</script>
+<style>
+.CollapsibleParagraph h4 {
+  font-family: var(--bs-font-sans-serif);
+  font-size: inherit;
+}
+
+.CollapsibleParagraph__num {
+  font-size: var(--impresso-font-size-smallcaps);
+  font-family: var(--bs-font-sans-serif);
+  text-transform: uppercase;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+}
+
+.CollapsibleParagraph.CollapsiblePanel {
+  box-shadow: none;
+  border-radius: 0;
+}
+</style>
diff --git a/src/components/CollapsibleSection.vue b/src/components/CollapsibleSection.vue
new file mode 100644
index 000000000..0b53c062e
--- /dev/null
+++ b/src/components/CollapsibleSection.vue
@@ -0,0 +1,119 @@
+<template>
+  <CollapsiblePanel
+    class="CollapsibleSection border border-dark"
+    v-model="isOpen"
+    :subtitle="subtitle"
+    :title="title"
+    :style="{ height: isOpen ? `${offsetHeight}px` : `${headerHeight}px` }"
+  >
+    <template v-slot:header>
+      <div class="p-3">
+        <h3 class="mb-0">{{ title }}</h3>
+        <span class="text-muted">{{ subtitle }}</span>
+      </div>
+    </template>
+    <ol>
+      <li v-for="(paragraph, idx) in paragraphs" :key="paragraph.id">
+        <CollapsibleParagraph
+          :modelValue="currentOpenTaskId === paragraph.id"
+          :paragraph="paragraph"
+          :taskNum="idx + 1"
+          @update:modelValue="(value: boolean) => (currentOpenTaskId = value ? task.id : null)"
+          @heightChanged="(e: string) => updateHeight(paragraph.id, e)"
+        >
+        </CollapsibleParagraph>
+      </li>
+    </ol>
+  </CollapsiblePanel>
+</template>
+<script setup lang="ts">
+import { computed, PropType, ref, watch } from 'vue'
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import CollapsibleParagraph from './CollapsibleParagraph.vue'
+import type { ICollapsibleParagraph } from '../models/CollapsibleParagraph'
+
+// TODO: Get from the element?
+const headerHeight = 50
+
+const offsetHeights = ref<Record<string, number>>({})
+const offsetHeight = computed(
+  () => headerHeight + Object.values(offsetHeights.value).reduce((a, b) => a + b, 0)
+)
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: true
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  paragraphs: {
+    type: Array as PropType<ICollapsibleParagraph[]>,
+    required: true
+  },
+  initialOpenedParagraphId: {
+    type: String,
+    default: null
+  }
+})
+
+const isOpen = ref(!props.isCollapsed)
+const currentOpenTaskId = ref<string | null>(props.initialOpenedParagraphId)
+
+watch(
+  () => props.isCollapsed,
+  isCollapsed => {
+    isOpen.value = !isCollapsed
+  }
+)
+
+const updateHeight = (id: string, height: string) => {
+  const heightAsNumber = parseInt(height.replace('px', ''))
+  offsetHeights.value[id] = isNaN(heightAsNumber) ? 0 : heightAsNumber
+}
+
+// const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
+//   console.debug('[CollapsibleSection] idx', idx, '@onTutorialTaskToggled', payload)
+//   offsetHeights[idx] = payload.value ? 50 : payload.expandedHeight
+// }
+</script>
+
+<style>
+.CollapsibleSection.CollapsiblePanel {
+  box-shadow: var(--bs-box-shadow-sm);
+  border-radius: var(--border-radius-lg);
+}
+
+.CollapsibleSection ol {
+  list-style-type: none;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  margin-inline-start: var(--spacing-2);
+  margin-inline-end: var(--spacing-2);
+
+  margin-bottom: var(--spacing-1);
+}
+
+.CollapsibleSection li {
+  border-top: 1px solid var(--clr-grey-200);
+}
+
+.CollapsibleSection li:first-of-type {
+  border-top-width: 0px;
+}
+
+.CollapsibleSection h3 {
+  font-size: var(--impresso-font-size-smallcaps);
+  font-family: var(--bs-font-sans-serif);
+  text-transform: uppercase;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+}
+</style>
diff --git a/src/components/FaqPage.vue b/src/components/FaqPage.vue
deleted file mode 100644
index fd8da0d9a..000000000
--- a/src/components/FaqPage.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <div id="faq-items" class="container py-5">
-    <b-row class="justify-content-md-center">
-      <b-col col xl="6" lg="8" md="10">
-        <h1 class="mb-4">{{faq.title}}</h1>
-        <div v-for="(group, i) in faq.groups" v-bind:key="i" class="my-4">
-          <h2 class="py-3"><i>{{group.title}}</i></h2>
-          <div v-for="(term, j) in group.faq" v-bind:key="j" class="my-3">
-            <a :id="`${term.id}`"></a>
-            <div
-              class="accordion-toggle"
-              :class="{ collapsed: !isOpen(term.id), 'not-collapsed': isOpen(term.id) }"
-              @click="toggleOpen(term.id)">
-              <strong>{{term.title}}</strong>
-            </div>
-            <div class="faq-item pb-1">
-              <div class="collapsable-container" :class="{ show: isOpen(term.id) }">
-                <div class="summary my-1 p-3 bg-light border-left">{{term.summary}}</div>
-                <p v-for="(paragraph, index) in term.description"  v-bind:key="index" v-html="paragraph" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </b-col>
-    </b-row>
-  </div>
-
-</template>
-
-<script>
-import content from '@/assets/faqpage.json';
-import { mapStores } from 'pinia'
-import { useSettingsStore } from '@/stores/settings'
-
-const ApiVersionLine = apiVersion => `
-API: v${apiVersion.version},
-Revision <a href="https://github.com/impresso/impresso-middle-layer/commit/${apiVersion.revision}" target="_blank">${apiVersion.revision}</a>,
-"${apiVersion.branch}" branch.
-`
-
-const WebappVersionLine = `
-Web App: v${import.meta.env.VITE_VERSION},
-Revision <a href="https://github.com/impresso/impresso-frontend/commit/${import.meta.env.VITE_GIT_REVISION}" target="_blank">${import.meta.env.VITE_GIT_REVISION}</a>,
-"${import.meta.env.VITE_GIT_BRANCH}" branch.
-`
-
-export default {
-  computed: {
-    ...mapStores(useSettingsStore),
-    faq: {
-      get() {
-        const faqContent = content[this.activeLanguageCode];
-        faqContent.groups.push(this.getVersionGroup())
-        return faqContent
-      },
-    },
-    activeLanguageCode() {
-      return this.settingsStore.language_code
-    },
-  },
-  methods: {
-    toggleOpen(term) {
-      if (this.isOpen(term)) {
-        this.$router.push({ hash: '' });
-      } else {
-        this.$router.push({ hash: `#${term}` });
-      }
-    },
-    isOpen(term) {
-      return this.$route.hash === `#${term}`;
-    },
-    getVersionGroup() {
-      return {
-        title: this.$t('title.version'),
-        faq: [
-          {
-            id: 'version-of-impresso',
-            title: this.$t('title.whichVersion'),
-            summary: this.$t('summary.version'),
-            description: [
-              WebappVersionLine,
-              ApiVersionLine(window.impressoApiVersion)
-            ]
-          }
-        ]
-      }
-    }
-  },
-};
-</script>
-
-<style lang="scss">
-  #faq-items{
-    img {
-      max-width: 100%;
-      zoom: 50%;
-    }
-    .accordion-toggle {
-      cursor: n-resize;
-      &.collapsed {
-        cursor: s-resize;
-        &::before {
-          content: '+';
-        }
-      }
-      &::before {
-        content: '-';
-        position: absolute;
-        margin-left:-1em;
-        font-size: 1.6em;
-        line-height: 0.7;
-        color: gray;
-      }
-    }
-    .collapsable-container {
-      overflow: hidden;
-      max-height: 0;
-      transition: max-height 0.3s ease-in-out;
-
-      &.show {
-        max-height: 1000px;
-        transition: max-height 0.3 ease-in-out;
-      }
-    }
-  }
-</style>
-
-<i18n lang="json">
-{
-  "en": {
-    "title": {
-      "version": "Version",
-      "whichVersion": "Which version of Impresso am I using"
-    },
-    "summary": {
-      "version": "Version of the web application and API. Use this to report issues."
-    }
-  }
-}
-</i18n>
diff --git a/src/components/HomePageFaq.vue b/src/components/HomePageFaq.vue
deleted file mode 100644
index 819f45761..000000000
--- a/src/components/HomePageFaq.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div id="faq-items" class="container py-5">
-    <b-row class="justify-content-md-center mb-5">
-      <b-col col xl="6" lg="8" md="10">
-        <h1 class="mb-5">{{faq.title}}</h1>
-
-
-        <div v-for="(group, i) in faq.groups" v-bind:key="i" class="mb-5">
-          <h3>{{group.title}}</h3>
-          <div
-            v-for="(question, j) in group.questions"
-            v-bind:key="`${i}-${j}`"
-            class="faq-item pb-1">
-            <div class="question">
-              <strong><a href="#" class="my-1 d-block">{{question.question}}</a></strong>
-            </div>
-            <!-- deprecated --><collapse class="answer" v-bind:id="`accordion-${i}-${j}`" accordion="my-accordion" role="tabpanel">
-              <div class="p-4 bg-light" v-html="question.answer" />
-            </collapse>
-          </div>
-        </div>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-import content from '@/assets/homepage.json';
-
-/** @deprecated See HomePage2020 */
-export default {
-  data: () => ({
-    faq: content.faq,
-  }),
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 72f09e96a..42e958235 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -468,6 +468,7 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   max-width: 100px;
+  min-width: 50px;
 }
 
 #app-header .dropdown-toggle[aria-expanded='true'] {
@@ -567,6 +568,7 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    min-width: 50px;
     > span {
       position: relative;
     }
diff --git a/src/components/modules/Ellipsis.vue b/src/components/modules/Ellipsis.vue
index 60639d0f3..c66e97787 100644
--- a/src/components/modules/Ellipsis.vue
+++ b/src/components/modules/Ellipsis.vue
@@ -8,8 +8,13 @@
     >
       <slot></slot>
     </div>
-    <div class="more" v-bind:style="gradientStyle" v-if="contentHeight > initialHeight">
-      <b-button size="sm" variant="outline-primary" v-on:click.prevent.stop="onClick">
+    <div
+      class="more w-100"
+      :class="moreClass"
+      v-bind:style="gradientStyle"
+      v-if="contentHeight > initialHeight"
+    >
+      <b-button size="sm" variant="outline-secondary" v-on:click.prevent.stop="onClick">
         {{ $t(this.isCollapsed ? 'more' : 'less') }}</b-button
       >
     </div>
@@ -25,25 +30,29 @@ export default {
     isCollapsed: true,
     height: 0,
     collapsedHeight: 0,
-    contentHeight: 0,
+    contentHeight: 0
   }),
   props: {
     initialHeight: {
       type: Number,
-      default: 50,
+      default: 50
     },
     maxHeight: {
       type: Number,
-      default: 0,
+      default: 0
     },
     additionalHeight: {
       type: Number,
-      default: 0,
+      default: 0
     },
     backgroundColor: {
       type: String,
-      default: '#f8f9fa',
+      default: '#f8f9fa'
     },
+    moreClass: {
+      type: String,
+      default: ''
+    }
   },
   updated() {
     if (this.$refs && this.$refs.contents) {
@@ -63,13 +72,13 @@ export default {
     gradientStyle() {
       if (!this.isCollapsed) {
         return {
-          background: 'transparent',
+          background: 'transparent'
         }
       }
       return {
-        background: `linear-gradient(${this.backgroundColor}00 20%, ${this.backgroundColor})`,
+        background: `linear-gradient(${this.backgroundColor}00 20%, ${this.backgroundColor})`
       }
-    },
+    }
   },
   methods: {
     onClick() {
@@ -87,30 +96,32 @@ export default {
             : Math.min(+this.$refs.contents.scrollHeight, window.innerHeight / 2) +
               this.additionalHeight
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
-<style lang="scss">
+<style lang="css">
 .Ellipsis {
   position: relative;
-
-  .contents {
-    height: 100%;
-    overflow: hidden;
-  }
-  // .btn {
-  //   background-color: #f8f9fa;
-  // }
-  > .more {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 150px;
-    text-align: right;
-    background: linear-gradient(#f8f9fa00 20%, #f8f9fa);
-  }
+}
+.Ellipsis .contents {
+  height: 100%;
+  overflow: hidden;
+}
+.Ellipsis .btn {
+  background-color: #f8f9fa;
+}
+.Ellipsis .btn:hover {
+  color: var(--impresso-color-black);
+}
+.Ellipsis .more {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 150px;
+  text-align: right;
+  background: linear-gradient(#f8f9fa00 20%, #f8f9fa);
 }
 </style>
 
diff --git a/src/components/stories/CollapsiblePanel.stories.ts b/src/components/stories/CollapsiblePanel.stories.ts
new file mode 100644
index 000000000..895ff7d29
--- /dev/null
+++ b/src/components/stories/CollapsiblePanel.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CollapsiblePanel from '@/components/CollapsiblePanel.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof CollapsiblePanel> = {
+  title: 'Components/CollapsiblePanel',
+  component: CollapsiblePanel,
+  tags: ['autodocs'],
+  render: args => {
+    return {
+      components: { CollapsiblePanel },
+      setup() {
+        let model = ref(false)
+        const updateModel = v => (model.value = v)
+
+        return { args, model, updateModel }
+      },
+      template:
+        '<div style="height: 400px; background:grey; width: 100%; text-align:end"><CollapsiblePanel class="border-bottom" v-bind="args">Cicicio pasticio</CollapsiblePanel></div>'
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'FaQ section',
+    subtitle: 'This is the content of the collapsible panel'
+  }
+}
diff --git a/src/components/stories/CollapsibleSection.stories.ts b/src/components/stories/CollapsibleSection.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/models/CollapsibleParagraph.ts b/src/models/CollapsibleParagraph.ts
new file mode 100644
index 000000000..589e72fd3
--- /dev/null
+++ b/src/models/CollapsibleParagraph.ts
@@ -0,0 +1,28 @@
+export interface ICollapsibleParagraph {
+  id: string
+  title: string
+  summary: string
+  description?: string
+  paragraphs: Array<ICollapsibleParagraph>
+}
+
+export class CollapsibleParagraph implements ICollapsibleParagraph {
+  id: string
+  title: string
+  summary: string
+  description?: string
+  paragraphs: Array<ICollapsibleParagraph>
+
+  constructor({ id = '', title = '', summary = '', description = '', paragraphs = [] } = {}) {
+    this.id = String(id)
+    this.title = String(title)
+    this.summary = String(summary)
+    this.description = String(description)
+    this.paragraphs = paragraphs.map(paragraph => {
+      if (paragraph instanceof CollapsibleParagraph) {
+        return paragraph
+      }
+      return new CollapsibleParagraph({ ...paragraph })
+    })
+  }
+}
diff --git a/src/pages/FaqPage.vue b/src/pages/FaqPage.vue
new file mode 100644
index 000000000..c6c758999
--- /dev/null
+++ b/src/pages/FaqPage.vue
@@ -0,0 +1,171 @@
+<template>
+  <div id="faq-items" class="container py-5">
+    <h1>{{ title }}</h1>
+    <section v-for="(section, i) in sections" :key="i" class="my-5">
+      <div class="row position-sticky top-0 bg-light z-index-1 border-bottom py-3">
+        <h2 class="col-12 small-caps-bold m-0">{{ section.title }}</h2>
+      </div>
+
+      <div v-for="(paragraph, j) in section.paragraphs" :key="j" class="row mb-3">
+        <a :id="paragraph.id" class="col-12" style="scroll-margin-top: 100px" />
+        <div class="col-12">
+          <h3 class="sans pt-4 font-size-inherit font-weight-bold">
+            {{ paragraph.title }}
+          </h3>
+          <p v-html="paragraph.summary" />
+
+          <ellipsis
+            v-if="paragraph.description.length"
+            class="p-3 rounded shadow"
+            moreClass="rounded pr-1 pb-1"
+            v-bind:initialHeight="70"
+          >
+            <div v-html="paragraph.description" />
+          </ellipsis>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import content from '@/assets/faqpage.json'
+import { mapStores } from 'pinia'
+import { useSettingsStore } from '@/stores/settings'
+import { CollapsibleParagraph as Paragraph } from '@/models/CollapsibleParagraph'
+import Ellipsis from '@/components/modules/Ellipsis.vue'
+
+const ApiVersionLine = apiVersion => `
+API: v${apiVersion.version},
+Revision <a href="https://github.com/impresso/impresso-middle-layer/commit/${apiVersion.revision}" target="_blank">${apiVersion.revision}</a>,
+"${apiVersion.branch}" branch.
+`
+
+const WebappVersionLine = `
+Web App: v${import.meta.env.VITE_VERSION},
+Revision <a href="https://github.com/impresso/impresso-frontend/commit/${import.meta.env.VITE_GIT_REVISION}" target="_blank">${import.meta.env.VITE_GIT_REVISION}</a>,
+"${import.meta.env.VITE_GIT_BRANCH}" branch.
+`
+
+export default {
+  components: {
+    Ellipsis
+  },
+  computed: {
+    ...mapStores(useSettingsStore),
+    route: {
+      get() {
+        return this.$route
+      }
+    },
+    title: {
+      get() {
+        return this.$t('title.faq')
+      }
+    },
+    sections: {
+      get() {
+        const faqContent = content[this.activeLanguageCode]
+        faqContent.groups.push(this.getVersionGroup())
+        return faqContent.groups.map(g => {
+          console.debug('[FaqPage] group:', g)
+          return new Paragraph({
+            id: g.title,
+            title: g.title,
+            paragraphs: g.faq.map(f => {
+              console.debug('[FaqPage] paragraph:', f)
+              return new Paragraph({
+                id: f.id,
+                title: f.title,
+                summary: f.summary,
+                description: f.description
+              })
+            })
+          })
+        })
+      }
+    },
+    activeLanguageCode() {
+      return this.settingsStore.language_code
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.route.hash) {
+        const el = document.getElementById(this.route.hash.slice(1))
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', offset: { top: -100 } })
+          // add actoive class tp the parent
+          el.parentNode.classList.add('border-left', 'border-primary', 'pl-3')
+        }
+      }
+    })
+  },
+  methods: {
+    getVersionGroup() {
+      return {
+        title: this.$t('title.version'),
+        faq: [
+          {
+            id: 'version-of-impresso',
+            title: this.$t('title.whichVersion'),
+            summary: this.$t('summary.version'),
+            description: [WebappVersionLine, ApiVersionLine(window.impressoApiVersion)]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#faq-items {
+  img {
+    max-width: 100%;
+    zoom: 50%;
+  }
+  .accordion-toggle {
+    cursor: n-resize;
+    &.collapsed {
+      cursor: s-resize;
+      &::before {
+        content: '+';
+      }
+    }
+    &::before {
+      content: '-';
+      position: absolute;
+      margin-left: -1em;
+      font-size: 1.6em;
+      line-height: 0.7;
+      color: gray;
+    }
+  }
+  .collapsable-container {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease-in-out;
+
+    &.show {
+      max-height: 1000px;
+      transition: max-height 0.3 ease-in-out;
+    }
+  }
+}
+</style>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": {
+      "faq": "Frequently Asked Questions",
+      "version": "Version",
+      "whichVersion": "Which version of Impresso am I using"
+    },
+    "summary": {
+      "version": "Version of the web application and API. Use this to report issues."
+    }
+  }
+}
+</i18n>
diff --git a/src/router/index.ts b/src/router/index.ts
index 29df5e0aa..b63e8606e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import * as services from '@/services'
-import HomePage from '@/components/HomePage.vue'
 import HomePage2020 from '@/components/HomePage2020.vue'
-import FaqPage from '@/components/FaqPage.vue'
+import FaqPage from '@/pages/FaqPage.vue'
 import TermsOfUsePage from '@/components/TermsOfUsePage.vue'
 import IssuePage from '@/components/IssuePage.vue'
 import UserLoginPage from '@/components/UserLoginPage.vue'
@@ -53,14 +52,7 @@ const router = createRouter({
         requiresAuth: false
       }
     },
-    {
-      path: '/2019',
-      name: '2019',
-      component: HomePage,
-      meta: {
-        requiresAuth: false
-      }
-    },
+
     {
       path: '/search/ngrams',
       name: 'searchNgrams',
diff --git a/src/styles/style.css b/src/styles/style.css
index 287c7a1b2..b3579217e 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -191,6 +191,15 @@ label {
   font-weight: var(--impresso-wght-smallcaps);
   font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
 }
+.small-caps-bold {
+  text-transform: uppercase;
+  font-family: var(--bs-font-sans-serif);
+  font-size: var(--impresso-font-size-smallcaps);
+  font-variant: normal;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps-bold);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps-bold);
+}
 .text-decoration-underline {
   text-decoration: underline;
 }
@@ -415,6 +424,10 @@ svg path.domain {
 .rounded-lg {
   border-radius: var(--border-radius-lg) !important;
 }
+.bg-light {
+  background-color: #f8f9fa !important;
+}
+
 .bg-medium {
   background: var(--clr-grey-300);
 }
@@ -459,3 +472,6 @@ svg path.domain {
 .bottom-0 {
   bottom: 0;
 }
+.z-index-1 {
+  z-index: 1;
+}