From 271412f6f7f999447a2ebcb9aeea83c23b62f6b7 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Thu, 6 May 2021 00:02:37 +0200
Subject: [PATCH] :rotating_light: (component)

---
 .eslintrc.js                |   9 +-
 src/components/FluxNote.vue | 486 ++++++++++++++++++------------------
 src/views/Home.vue          |   8 +-
 3 files changed, 249 insertions(+), 254 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fb2a32a..2a05d8e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,12 +6,8 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/typescript/recommended',
-    '@vue/prettier',
-    '@vue/prettier/@typescript-eslint',
     'plugin:vue/recommended',
-    'plugin:prettier-vue/recommended',
-    'prettier'
+    'plugin:prettier-vue/recommended'
   ],
   parserOptions: {
     ecmaVersion: 2020
@@ -29,7 +25,8 @@ module.exports = {
         trailingComma: 'none',
         arrowParens: 'always'
       }
-    ]
+    ],
+    'vue/no-v-html': 'off'
   },
   overrides: [
     {
diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 429cca4..6402b04 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -1,244 +1,242 @@
-<template>
-  <main class="flux-note content note-container">
-    <div class="note readme">
-      <header-note v-if="withHeader" class="header" :user="user" :repo="repo" />
-      <div class="repo-title-breadcrumb">
-        <a @click.prevent="focus">{{ repo }}</a>
-      </div>
-      <div class="repo-title">
-        <h1 class="title is-1">
-          [<router-link
-            :to="{ name: 'Home', params: { user, repo } }"
-            @click="resetStackedNotes"
-            >{{ repo }}</router-link
-          >]
-        </h1>
-        <h4 class="subtitle is-4">
-          <em>{{ user }}</em>
-        </h4>
-      </div>
-      <slot />
-      <div v-if="isLoading" class="loading">
-        <img
-          class="is-loading"
-          src="@/assets/icons/loading.svg"
-          alt="loading..."
-        />
-      </div>
-      <div v-else-if="!hasContent">
-        No content here 📝
-      </div>
-      <p class="note-display" v-html="renderedContent"></p>
-    </div>
-    <stacked-note
-      class="note"
-      v-for="(stackedNote, index) in stackedNotes"
-      :key="stackedNote"
-      :index="index"
-      :sha="stackedNote"
-      :user="user"
-      :repo="repo"
-      :title="titles[stackedNote ?? '']"
-    />
-  </main>
-</template>
-
-<script lang="ts">
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import {
-  defineComponent,
-  defineAsyncComponent,
-  computed,
-  watch,
-  nextTick,
-  toRefs,
-  onUnmounted
-} from 'vue'
-import HeaderNote from '@/components/HeaderNote.vue'
-import { useNote } from '@/hooks/useNote.hook'
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { useLinks } from '@/hooks/useLinks.hook'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
-import { useFocus } from '@/hooks/useFocus.hook'
-
-const StackedNote = defineAsyncComponent(() =>
-  import('@/components/StackedNote.vue')
-)
-
-export default defineComponent({
-  name: 'FluxNote',
-  components: {
-    HeaderNote,
-    StackedNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true },
-    content: { type: String, required: false, default: null },
-    withHeader: { type: Boolean, required: false, default: true }
-  },
-  setup(props) {
-    const refProps = toRefs(props)
-    const store = useUserRepoStore()
-    useUserSettings()
-    const { renderString } = useMarkdown()
-    const { listenToClick } = useLinks('note-display')
-    const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
-    const { scrollToFocusedNote } = useFocus()
-
-    const { titles } = useNote('note-container')
-
-    const renderedContent = computed(() =>
-      props.content !== null ? renderString(props.content) : store.readme
-    )
-
-    const hasContent = computed(() => !!renderedContent.value)
-    const isLoading = computed(() => renderedContent.value === undefined)
-
-    watch(
-      renderedContent,
-      () =>
-        nextTick(() => {
-          listenToClick()
-        }),
-      { immediate: true }
-    )
-
-    watch(
-      [refProps.user, refProps.repo],
-      () => {
-        store.setUserRepo(props.user, props.repo)
-      },
-      { immediate: true }
-    )
-
-    onUnmounted(() => {
-      store.resetFiles()
-      resetStackedNotes()
-    })
-
-    return {
-      hasContent,
-      isLoading,
-      renderedContent,
-      stackedNotes,
-      resetStackedNotes,
-      userSettings: computed(() => store.userSettings),
-      focus: () => scrollToFocusedNote(undefined, true),
-      titles
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-$header-height: 40px;
-
-.flux-note {
-  font-family: var(--font-family);
-  color: var(--font-color);
-  background-color: var(--background-color);
-  transition-property: color, background-color;
-  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
-
-  display: flex;
-  flex: 1;
-
-  &.content {
-    .title,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    strong {
-      color: var(--font-color);
-    }
-
-    blockquote {
-      background-color: var(--background-color);
-    }
-  }
-
-  .header {
-    height: $header-height;
-  }
-
-  .readme {
-    position: sticky;
-    left: 0;
-    top: 0;
-    padding: 0 2rem 1rem;
-
-    .repo-title {
-      margin-top: 1rem;
-      text-align: center;
-    }
-  }
-
-  .note-display {
-    padding-bottom: 2rem;
-  }
-
-  .note {
-    text-align: left;
-    overflow-y: auto;
-    height: 100vh;
-    position: sticky;
-
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
-  }
-
-  @media screen and (min-width: 769px) {
-    .repo-title-breadcrumb {
-      padding: 0.5rem 1rem 0;
-      transform-origin: 0 0;
-      transform: rotate(90deg);
-      font-size: 0.8em;
-
-      a {
-        color: var(--font-color);
-        display: block;
-        text-align: center;
-      }
-    }
-
-    .note {
-      min-width: var(--note-width);
-      max-width: var(--note-width);
-      height: auto;
-    }
-  }
-
-  .loading {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    .is-loading {
-      animation: spinAround 0.8s infinite linear;
-    }
-  }
-}
-
-@media print, screen and (max-width: 768px) {
-  .flux-note {
-    flex-wrap: wrap;
-  }
-
-  .note {
-    width: 100vw;
-    overflow-y: visible;
-  }
-
-  .repo-title-breadcrumb {
-    display: none;
-    visibility: hidden;
-  }
-}
-</style>
+<template>
+  <main class="flux-note content note-container">
+    <div class="note readme">
+      <header-note v-if="withHeader" class="header" :user="user" :repo="repo" />
+      <div class="repo-title-breadcrumb">
+        <a @click.prevent="focus">{{ repo }}</a>
+      </div>
+      <div class="repo-title">
+        <h1 class="title is-1">
+          [<router-link
+            :to="{ name: 'Home', params: { user, repo } }"
+            @click="resetStackedNotes"
+            >{{ repo }}</router-link
+          >]
+        </h1>
+        <h4 class="subtitle is-4">
+          <em>{{ user }}</em>
+        </h4>
+      </div>
+      <slot />
+      <div v-if="isLoading" class="loading">
+        <img
+          class="is-loading"
+          src="@/assets/icons/loading.svg"
+          alt="loading..."
+        />
+      </div>
+      <div v-else-if="!hasContent">No content here 📝</div>
+      <p class="note-display" v-html="renderedContent"></p>
+    </div>
+    <stacked-note
+      v-for="(stackedNote, index) in stackedNotes"
+      :key="stackedNote"
+      class="note"
+      :index="index"
+      :sha="stackedNote"
+      :user="user"
+      :repo="repo"
+      :title="titles[stackedNote ?? '']"
+    />
+  </main>
+</template>
+
+<script lang="ts">
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import {
+  defineComponent,
+  defineAsyncComponent,
+  computed,
+  watch,
+  nextTick,
+  toRefs,
+  onUnmounted
+} from 'vue'
+import HeaderNote from '@/components/HeaderNote.vue'
+import { useNote } from '@/hooks/useNote.hook'
+import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useLinks } from '@/hooks/useLinks.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
+import { useFocus } from '@/hooks/useFocus.hook'
+
+const StackedNote = defineAsyncComponent(
+  () => import('@/components/StackedNote.vue')
+)
+
+export default defineComponent({
+  name: 'FluxNote',
+  components: {
+    HeaderNote,
+    StackedNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true },
+    content: { type: String, required: false, default: null },
+    withHeader: { type: Boolean, required: false, default: true }
+  },
+  setup(props) {
+    const refProps = toRefs(props)
+    const store = useUserRepoStore()
+    useUserSettings()
+    const { renderString } = useMarkdown()
+    const { listenToClick } = useLinks('note-display')
+    const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
+    const { scrollToFocusedNote } = useFocus()
+
+    const { titles } = useNote('note-container')
+
+    const renderedContent = computed(() =>
+      props.content !== null ? renderString(props.content) : store.readme
+    )
+
+    const hasContent = computed(() => !!renderedContent.value)
+    const isLoading = computed(() => renderedContent.value === undefined)
+
+    watch(
+      renderedContent,
+      () =>
+        nextTick(() => {
+          listenToClick()
+        }),
+      { immediate: true }
+    )
+
+    watch(
+      [refProps.user, refProps.repo],
+      () => {
+        store.setUserRepo(props.user, props.repo)
+      },
+      { immediate: true }
+    )
+
+    onUnmounted(() => {
+      store.resetFiles()
+      resetStackedNotes()
+    })
+
+    return {
+      hasContent,
+      isLoading,
+      renderedContent,
+      stackedNotes,
+      resetStackedNotes,
+      userSettings: computed(() => store.userSettings),
+      focus: () => scrollToFocusedNote(undefined, true),
+      titles
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+$header-height: 40px;
+
+.flux-note {
+  font-family: var(--font-family);
+  color: var(--font-color);
+  background-color: var(--background-color);
+  transition-property: color, background-color;
+  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
+
+  display: flex;
+  flex: 1;
+
+  &.content {
+    .title,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong {
+      color: var(--font-color);
+    }
+
+    blockquote {
+      background-color: var(--background-color);
+    }
+  }
+
+  .header {
+    height: $header-height;
+  }
+
+  .readme {
+    position: sticky;
+    left: 0;
+    top: 0;
+    padding: 0 2rem 1rem;
+
+    .repo-title {
+      margin-top: 1rem;
+      text-align: center;
+    }
+  }
+
+  .note-display {
+    padding-bottom: 2rem;
+  }
+
+  .note {
+    text-align: left;
+    overflow-y: auto;
+    height: 100vh;
+    position: sticky;
+
+    &:not(:first-child) {
+      border-top: 1px solid rgba(18, 19, 58, 0.2);
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    .repo-title-breadcrumb {
+      padding: 0.5rem 1rem 0;
+      transform-origin: 0 0;
+      transform: rotate(90deg);
+      font-size: 0.8em;
+
+      a {
+        color: var(--font-color);
+        display: block;
+        text-align: center;
+      }
+    }
+
+    .note {
+      min-width: var(--note-width);
+      max-width: var(--note-width);
+      height: auto;
+    }
+  }
+
+  .loading {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    .is-loading {
+      animation: spinAround 0.8s infinite linear;
+    }
+  }
+}
+
+@media print, screen and (max-width: 768px) {
+  .flux-note {
+    flex-wrap: wrap;
+  }
+
+  .note {
+    width: 100vw;
+    overflow-y: visible;
+  }
+
+  .repo-title-breadcrumb {
+    display: none;
+    visibility: hidden;
+  }
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 058c720..3e60f80 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="home content" v-if="!user || !repo">
+  <div v-if="!user || !repo" class="home content">
     <authorize class="authorize" />
     <new-version class="new-version" />
     <welcome-world />
   </div>
-  <flux-note :user="user" :repo="repo" :key="routeKey" v-else />
+  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
 </template>
 
 <script lang="ts">
@@ -15,8 +15,8 @@ import Authorize from '@/components/Authorize.vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
-const WelcomeWorld = defineAsyncComponent(() =>
-  import('@/components/WelcomeWorld.vue')
+const WelcomeWorld = defineAsyncComponent(
+  () => import('@/components/WelcomeWorld.vue')
 )
 
 export default defineComponent({