fix: modules page (nuxt#1618)

* 🚧 (wip) trying to fix modules * 🔧 (lint) import lint config * 📦 (deps) add linting deps * ✨ (plugins) ssr compatible modules plugins * ✨ (components) lint & update components * 🔧 (gitignore) add yarn error to gitignore * 📦 (deps) upgrade deps * 🔧 (package) cleanup resolutions * 🔒 (..) .. * ✨ (ssr) SSR for modules * ✨ (modules) fix modules card html Co-authored-by: Sébastien Chopin <[email protected]>
Sudeep72 · Sep 7, 2021 · 5c26b4d · 5c26b4d
1 parent 6084d91
commit 5c26b4d
Show file tree

Hide file tree

Showing 14 changed files with 1,709 additions and 380 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,11 @@
+node_modules
+dist
+.nuxt
+coverage
+*.log*
+.DS_Store
+.code
+*.iml
+package-lock.json
+templates/*
+sw.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  plugins: ['prettier'],
+  extends: [
+    '@nuxtjs',
+    'prettier',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
+    '@nuxtjs/eslint-config-typescript'
+  ],
+  rules: {
+    // Vue rules
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true
+      }
+    ],
+    'vue/singleline-html-element-content-newline': [0],
+    'vue/multiline-html-element-content-newline': [0],
+    'vue/html-self-closing': [0],
+    'vue/no-v-html': [0],
+    'vue/max-attributes-per-line': [0],
+    'vue/html-closing-bracket-newline': [0],
+    'vue/html-indent': [0],
+    // Prettier rules
+    'max-len': [0, 120],
+    code: [0, 120],
+    'print-width': [0, 120],
+    'no-console': [1],
+    'space-before-function-paren': [0],
+    'arrow-parens': [0],
+    curly: [0],
+    'keyword-spacing': [0]
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}
diff --git a/components/molecules/ModulesCard.vue b/components/molecules/ModulesCard.vue
@@ -1,6 +1,33 @@
 <template>
-  <Link :to="module.website" target="blank" class="group relative hover:bg-gray-50 hover:dark:bg-opacity-80 dark:bg-sky-darker rounded-md shadow-md h-64 lg:h-40 p-4 flex flex-col justify-between">
-    <div class="transition-opacity duration-200 ease-in-out opacity-0 group-hover:opacity-100 absolute top-4 right-4 cursor-pointer">
+  <div
+    class="
+      group
+      relative
+      hover:bg-gray-50 hover:dark:bg-opacity-80
+      dark:bg-sky-darker
+      rounded-md
+      shadow-md
+      h-64
+      lg:h-40
+      p-4
+      flex flex-col
+      justify-between
+    "
+  >
+    <Link :to="module.website" :aria-label="module.website" target="_blank" class="absolute inset-0" />
+    <div
+      class="
+        transition-opacity
+        duration-200
+        ease-in-out
+        opacity-0
+        group-hover:opacity-100
+        absolute
+        top-4
+        right-4
+        cursor-pointer
+      "
+    >
       <nuxt-img alt="external_link" src="/img/icons/ext.svg" width="24" height="24" />
     </div>
     <div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-3">
@@ -12,11 +39,22 @@
         </div>
       </div>
     </div>
-    <div class="lg:flex lg:flex-row-reverse justify-between w-full">
+    <div class="lg:flex lg:flex-row-reverse justify-between w-full z-0">
       <ul class="flex space-x-1 pb-4 lg:pb-0">
-        <li v-for="maintainer in module.maintainers"
+        <li
+          v-for="maintainer in module.maintainers"
           :key="maintainer.name"
-          v-tooltip="{ content: maintainer.name, classes: ['bg-sky-darker dark:bg-white', 'text-white dark:text-sky-darker', 'px-2', 'py-1', 'rounded', 'text-sm'] }"
+          v-tooltip="{
+            content: maintainer.name,
+            classes: [
+              'bg-sky-darker dark:bg-white',
+              'text-white dark:text-sky-darker',
+              'px-2',
+              'py-1',
+              'rounded',
+              'text-sm'
+            ]
+          }"
         >
           <Link :to="`https://github.com/${maintainer.github}`" target="blank">
             <img loading="lazy" :src="maintainer.avatar" :alt="maintainer.name" class="rounded-full w-6 h-6" />
@@ -25,16 +63,30 @@
       </ul>
       <div class="flex items-center space-x-4 w-1/2 text-xs font-medium">
         <Link :to="module.github" class="group flex space-x-2 items-center" target="blank">
-          <IconStar alt="Star icon" class="text-sky-dark group-hover:text-sky-darker dark:text-cloud-surface dark:group-hover:text-white"/>
+          <IconStar
+            alt="Star icon"
+            class="text-sky-dark group-hover:text-sky-darker dark:text-cloud-surface dark:group-hover:text-white"
+          />
           <span class="truncate pt-0.5">{{ numberFormat(module.stars) }} star{{ module.stars !== 1 ? 's' : '' }}</span>
         </Link>
-        <Link :to="npmUrl" class="group flex space-x-2 items-center" target="blank" >
-          <IconDownload alt="Download icon" class="w-4 h-4 text-sky-dark group-hover:text-sky-darker dark:text-cloud-surface dark:group-hover:text-white" />
-          <span class="truncate pt-0.5">{{ numberFormat(module.downloads) }} download{{ module.downloads !== 1 ? 's' : '' }}</span>
+        <Link :to="npmUrl" class="group flex space-x-2 items-center" target="blank">
+          <IconDownload
+            alt="Download icon"
+            class="
+              w-4
+              h-4
+              text-sky-dark
+              group-hover:text-sky-darker
+              dark:text-cloud-surface dark:group-hover:text-white
+            "
+          />
+          <span class="truncate pt-0.5"
+            >{{ numberFormat(module.downloads) }} download{{ module.downloads !== 1 ? 's' : '' }}</span
+          >
         </Link>
       </div>
     </div>
-  </Link>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api'
@@ -50,23 +102,25 @@ export default defineComponent({
   computed: {
     iconUrl() {
       const { icon, category } = this.module
+
       if (icon && icon.startsWith('https://')) {
         return icon
       }
+
       if (icon) {
         return `https://modules.nuxtjs.org/icons/${icon}`
       }
 
-      return `img/modules/categories/${category.toLowerCase()}.svg`
+      return `img/modules/categories/${(category || '').toLowerCase()}.svg`
     },
 
-    npmUrl () {
+    npmUrl() {
       return `https://npmjs.com/package/${this.module.npm}`
     },
 
-    githubUrl () {
-     return `https://github.com/${this.module.github}`
-    },
+    githubUrl() {
+      return `https://github.com/${this.module.github}`
+    }
   },
   methods: {
     numberFormat(num: any, options = { precision: 1 }) {

diff --git a/components/organisms/modules/AsideModules.vue b/components/organisms/modules/AsideModules.vue
@@ -1,23 +1,14 @@
 <template>
   <div
-    class="
-      lg:sticky
-      top-0
-      lg:left-0
-      h-full
-      pointer-events-auto
-      min-h-fill-available
-      lg:h-screen lg:top-header
-      lg:w-1/5
-    "
+    class="lg:sticky top-0 lg:left-0 h-full pointer-events-auto min-h-fill-available lg:h-screen lg:top-header lg:w-1/5"
   >
     <div class="w-auto h-full d-bg-header dark:lg:bg-transparent lg:bg-transparent">
       <nav
         class="
-          flex lg:flex-col
+          flex
+          lg:flex-col
           justify-between
-          lg:justify-start
-          lg:max-w-sm
+          lg:justify-start lg:max-w-sm
           w-full
           overflow-y-auto
           text-sm
@@ -30,9 +21,20 @@
         <div class="py-4 pr-0">
           <ul class="flex flex-wrap lg:flex-col">
             <li v-for="category in categories" :key="category.name">
-              <button @click="selectCategory(category.name)" class="py-2 px-4 flex justify-between w-full focus:outline-none focus:ring-transparent" :class="{ 'rounded-md bg-gray-100 dark:bg-white dark:bg-opacity-10': category.name === selected }">
-                <div class="truncate max-w-48 font">{{ category.name }}</div>
-                <span v-if="category.name === selected" class="rounded-xl bg-white dark:bg-sky-darkest ml-2 px-2 py-0.5 text-xs">{{ category.count }}</span>
+              <button
+                class="py-2 px-4 flex justify-between w-full focus:outline-none focus:ring-transparent"
+                :class="{
+                  'rounded-md bg-gray-100 dark:bg-white dark:bg-opacity-10': category.name === selectedCategory
+                }"
+                @click="selectCategory(category.name)"
+              >
+                <span class="truncate max-w-48 font">{{ category.name }}</span>
+                <span
+                  v-if="category.name === selectedCategory"
+                  class="rounded-xl bg-white dark:bg-sky-darkest ml-2 px-2 py-0.5 text-xs"
+                >
+                  {{ category.count }}
+                </span>
               </button>
             </li>
           </ul>
@@ -42,54 +44,20 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, onMounted, useFetch } from '@nuxtjs/composition-api'
-import { useModules } from '../../../plugins/modulesList'
+import { defineComponent } from '@nuxtjs/composition-api'
+import { useFuse } from '../../../plugins/fuse'
+import { useModules } from '../../../plugins/modules'
 
 export default defineComponent({
-  props: {
-    modules: {
-      type: Array,
-      required: true
-    },
-    selectedCategory: {
-      type: String,
-      default: null
-    }
-  },
-  setup(props, { emit }) {
-    // @ts-i, gnore
-    let selected = ref('')
-    let categories = ref([])
-    const { getModulesCategories } = useModules()
-
-    //fetch modules
-    useFetch(async () => {
-      await getModulesCategories(props.modules).then((categs) => {
-        categories.value = categs
-      })
-    })
-
-    onMounted(() => {
-      if (props.selectedCategory) {
-        selectCategory(props.selectedCategory)
-      }
-    })
-
-    function selectCategory (category: string) {
-      if (selected.value === category) {
-        selected.value = null
-      } else {
-        selected.value = category
-      }
-
-      emit('category', selected.value)
-    }
+  setup() {
+    const { categories, modules } = useModules()
+    const { selectedCategory, selectCategory } = useFuse(modules)
 
     return {
       categories,
-      selected,
+      selectedCategory,
       selectCategory
     }
-  },
+  }
 })
 </script>