run lint + fix build output (#19)

* run lint + fix build output

* remove unused env var

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 18.x
       - name: Get yarn cache
         id: yarn-cache
-        run: echo "DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
       - uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}

.github/workflows/publish.yml

@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 jobs:
   publish:
@@ -21,8 +21,6 @@ jobs:
 
       - name: Install deps
         run: npm run build
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
 
       - name: Publish package
         run: npm publish

README.md

@@ -1,46 +1,3 @@
 # omorphia
 
-This template should help get you started developing with Vue 3 in Vite.
+Omorphia is modrinth's style and component library. See [omorphia.modrinth.com](https://omorphia.modrinth.com) for more information.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```

docs/.postcssrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
       transform(prefix, _selector) {
         const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
         return selector + prefix + pseudo
-      }
+      },
-    }
+    },
-  }
+  },
 }

docs/.vitepress/config.js

@@ -4,9 +4,7 @@ import svgLoader from 'vite-svg-loader'
 export default {
   title: 'Omorphia',
   description: 'A components library used for Modrinth.',
-  head: [
+  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
-    ['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
-  ],
   themeConfig: {
     sidebar: [
       {

lib/assets/styles/defaults.scss

@@ -51,7 +51,7 @@ a.uncolored {
   color: inherit;
 }
 
-input[type="text"] {
+input[type='text'] {
   border-radius: var(--radius-md);
   box-sizing: border-box;
   border: 2px solid transparent;
@@ -137,7 +137,7 @@ svg {
 
 .button-animation {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
-  outline 0.2s ease-in-out;
+    outline 0.2s ease-in-out;
 
   &:active:not(&:disabled) {
     transform: scale(0.95);

lib/components/base/Button.vue

@@ -26,9 +26,7 @@ const props = defineProps({
   },
 })
 
-const accentedButton = computed(
+const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
-  () => ['danger', 'primary'].includes(props.color)
-)
 </script>
 
 <template>

lib/components/base/Card.vue

@@ -28,9 +28,7 @@ function toggleCollapsed() {
 </script>
 
 <template>
-  <div
+  <div class="card">
-    class="card"
-  >
     <div v-if="!!$slots.header || collapsible" class="header">
       <slot name="header"></slot>
       <div v-if="collapsible" class="btn-group">

lib/components/base/EnvironmentIndicator.vue

@@ -4,19 +4,14 @@
     A {{ type }}
   </span>
   <span
-    v-else-if="
+    v-else-if="!['resourcepack', 'shader'].includes(type) && !(type === 'plugin' && search)"
-      !['resourcepack', 'shader'].includes(type) &&
-      !(type === 'plugin' && search)
-    "
     class="environment"
   >
     <template v-if="clientSide === 'optional' && serverSide === 'optional'">
       <GlobeIcon aria-hidden="true" />
       Client or server
     </template>
-    <template
+    <template v-else-if="clientSide === 'required' && serverSide === 'required'">
-      v-else-if="clientSide === 'required' && serverSide === 'required'"
-    >
       <GlobeIcon aria-hidden="true" />
       Client and server
     </template>
@@ -38,9 +33,7 @@
       <ServerIcon aria-hidden="true" />
       Server
     </template>
-    <template
+    <template v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'">
-      v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'"
-    >
       <GlobeIcon aria-hidden="true" />
       Unsupported
     </template>
@@ -51,10 +44,10 @@
   </span>
 </template>
 <script setup>
-import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon} from "@/components";
+import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@/components'
 </script>
 <script>
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   props: {
@@ -86,9 +79,9 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false,
-    }
+    },
   },
-});
+})
 </script>
 <style lang="scss" scoped>
 .environment {

lib/components/base/ProjectCard.vue

@@ -1,14 +1,6 @@
 <template>
-  <article
+  <article class="project-card base-card" :aria-label="name" role="listitem">
-    class="project-card base-card"
+    <router-link class="icon" tabindex="-1" :to="`/${projectTypeUrl}/${id}`">
-    :aria-label="name"
-    role="listitem"
-  >
-    <router-link
-      class="icon"
-      tabindex="-1"
-      :to="`/${projectTypeUrl}/${id}`"
-    >
       <Avatar :src="iconUrl" :alt="name" size="md" no-shadow loading="lazy" />
     </router-link>
     <router-link
@@ -28,24 +20,14 @@
       </router-link>
       <p v-if="author" class="author">
         by
-        <router-link class="title-link" :to="'/user/' + author"
+        <router-link class="title-link" :to="'/user/' + author">{{ author }} </router-link>
-          >{{ author }}
-        </router-link>
       </p>
-      <Badge
+      <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
-        v-if="status && status !== 'approved'"
-        :type="status"
-        class="status"
-      />
     </div>
     <p class="description">
       {{ description }}
     </p>
-    <Categories
+    <Categories :categories="categories" :type="type" class="tags">
-      :categories="categories"
-      :type="type"
-      class="tags"
-    >
       <EnvironmentIndicator
         :type-only="moderation"
         :client-side="clientSide"
@@ -59,53 +41,48 @@
         <DownloadIcon aria-hidden="true" />
         <p>
           <strong>{{ formatNumber(downloads) }}</strong
-          ><span class="stat-label">
+          ><span class="stat-label"> download<span v-if="downloads !== '1'">s</span></span>
-            download<span v-if="downloads !== '1'">s</span></span
-          >
         </p>
       </div>
       <div v-if="follows" class="stat">
         <HeartIcon aria-hidden="true" />
         <p>
           <strong>{{ formatNumber(follows) }}</strong
-          ><span class="stat-label">
+          ><span class="stat-label"> follower<span v-if="follows !== '1'">s</span></span>
-            follower<span v-if="follows !== '1'">s</span></span
-          >
         </p>
       </div>
       <div class="buttons">
         <slot />
       </div>
-      <div
+      <div v-if="showUpdatedDate" v-tooltip="updatedDate" class="stat date">
-        v-if="showUpdatedDate"
-        v-tooltip="updatedDate"
-        class="stat date"
-      >
         <EditIcon aria-hidden="true" />
-        <span class="date-label">Updated </span
+        <span class="date-label">Updated </span> {{ sinceUpdated }}
-        > {{ sinceUpdated }}
       </div>
-      <div
+      <div v-else v-tooltip="createdDate" class="stat date">
-        v-else
-        v-tooltip="createdDate"
-        class="stat date"
-      >
         <CalendarIcon aria-hidden="true" />
-        <span class="date-label">Published </span
+        <span class="date-label">Published </span>{{ sinceCreation }}
-        >{{ sinceCreation }}
       </div>
     </div>
   </article>
 </template>
 <script setup>
-import { Badge, HeartIcon, DownloadIcon, EditIcon, CalendarIcon, Avatar, Categories, EnvironmentIndicator } from '@/components'
+import {
+  Badge,
+  HeartIcon,
+  DownloadIcon,
+  EditIcon,
+  CalendarIcon,
+  Avatar,
+  Categories,
+  EnvironmentIndicator,
+} from '@/components'
 import { formatNumber } from '@/components/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 dayjs.extend(relativeTime)
 </script>
 <script>
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
     id: {
@@ -218,7 +195,7 @@ export default defineComponent({
       type: Number,
       required: false,
       default: null,
-    }
+    },
   },
   computed: {
     toColor() {
@@ -241,12 +218,12 @@ export default defineComponent({
     },
     sinceUpdated() {
       return dayjs(this.updatedAt).fromNow()
-    }
+    },
   },
   methods: {
-    formatNumber
+    formatNumber,
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>
@@ -326,7 +303,8 @@ export default defineComponent({
     margin-top: -3rem;
     z-index: 1;
 
-    img, svg {
+    img,
+    svg {
       border-radius: var(--radius-lg);
       border: 4px solid var(--color-raised-bg);
       border-bottom: none;

lib/components/base/Slider.vue

@@ -3,27 +3,27 @@
     <div class="slider-component">
       <div class="slide-container">
         <input
-            ref="input"
+          ref="input"
-            v-model="currentValue"
+          v-model="currentValue"
-            type="range"
+          type="range"
-            :min="min"
+          :min="min"
-            :max="max"
+          :max="max"
-            :step="step"
+          :step="step"
-            class="slider"
+          class="slider"
-            :style="{
+          :style="{
-              '--current-value': currentValue,
+            '--current-value': currentValue,
-              '--min-value': min,
+            '--min-value': min,
-              '--max-value': max
+            '--max-value': max,
-            }"
+          }"
-            @input="onInput($refs.input.value)"
+          @input="onInput($refs.input.value)"
-        >
+        />
         <div class="slider-range">
           <span>
-              {{ min }}
+            {{ min }}
-            </span>
+          </span>
           <span>
-              {{ max }}
+            {{ max }}
-            </span>
+          </span>
         </div>
       </div>
     </div>
@@ -39,28 +39,28 @@
 
 <script>
 export default {
-  name: "Slider",
+  name: 'Slider',
   props: {
     value: {
       type: Number,
-      default: 0
+      default: 0,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 100
+      default: 100,
     },
     step: {
       type: Number,
-      default: 10
+      default: 10,
     },
     forceStep: {
       type: Boolean,
-      default: true
+      default: true,
-    }
+    },
   },
   emits: ['input'],
   data() {
@@ -68,16 +68,16 @@ export default {
       sliderWidth: 0,
       objectPosition: 0,
       startOffset: 0,
-      currentValue: Math.max(this.min, this.value).toString()
+      currentValue: Math.max(this.min, this.value).toString(),
-    };
+    }
   },
   computed: {
     inputValueValid: {
       get() {
-        return this.$refs.value.value;
+        return this.$refs.value.value
       },
       set(newValue) {
-        const parsedValue = parseInt(newValue);
+        const parsedValue = parseInt(newValue)
         if (parsedValue < this.min) {
           this.currentValue = this.min.toString()
         } else if (parsedValue > this.max) {
@@ -85,18 +85,20 @@ export default {
         } else if (!parsedValue) {
           this.currentValue = this.min.toString()
         } else {
-          this.currentValue = (parsedValue - (this.forceStep ? parsedValue % this.step : 0)).toString()
+          this.currentValue = (
+            parsedValue - (this.forceStep ? parsedValue % this.step : 0)
+          ).toString()
         }
-        this.$refs.value.value = this.currentValue;
+        this.$refs.value.value = this.currentValue
-        this.$emit('input', parseInt(this.currentValue));
+        this.$emit('input', parseInt(this.currentValue))
-      }
+      },
-    }
+    },
   },
   methods: {
     onInput(value) {
-      this.inputValueValid = parseInt(value);
+      this.inputValueValid = parseInt(value)
     },
-  }
+  },
 }
 </script>
 
@@ -119,13 +121,15 @@ export default {
   -webkit-appearance: none;
   appearance: none;
   border-radius: var(--radius-sm);
-  height: .25rem;
+  height: 0.25rem;
-  background:  linear-gradient(
+  background: linear-gradient(
-      to right,
+    to right,
-      var(--color-brand),
+    var(--color-brand),
-      var(--color-brand) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-brand)
-      var(--color-base) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
-      var(--color-base) 100%
+    var(--color-base)
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-base) 100%
   );
   background-size: 100% 100%;
   outline: none;
@@ -135,38 +139,38 @@ export default {
 .slider-component .slide-container .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: .75rem;
+  width: 0.75rem;
-  height: .75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
-  width: .75rem;
+  width: 0.75rem;
-  height: .75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-input {
   width: 6rem;
-  margin-left: .75rem;
+  margin-left: 0.75rem;
 }
 
 .slider-range {

lib/components/brand/AnimatedLogo.vue

@@ -7,12 +7,7 @@
       viewBox="0 0 590 591"
       xmlns="http://www.w3.org/2000/svg"
       xml:space="preserve"
-      style="
+      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-        fill-rule: evenodd;
-        clip-rule: evenodd;
-        stroke-linejoin: round;
-        stroke-miterlimit: 2;
-      "
     >
       <g transform="matrix(1,0,0,1,652.392,-0.400578)">
         <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
@@ -25,19 +20,14 @@
         </g>
       </g></svg
     ><svg
-    class="rotate inner"
+      class="rotate inner"
-    width="100%"
+      width="100%"
-    height="100%"
+      height="100%"
-    viewBox="0 0 590 591"
+      viewBox="0 0 590 591"
-    xmlns="http://www.w3.org/2000/svg"
+      xmlns="http://www.w3.org/2000/svg"
-    xml:space="preserve"
+      xml:space="preserve"
-    style="
+      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-        fill-rule: evenodd;
+    >
-        clip-rule: evenodd;
-        stroke-linejoin: round;
-        stroke-miterlimit: 2;
-      "
-  >
       <g transform="matrix(1,0,0,1,652.392,-0.400578)">
         <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
           <g transform="matrix(0.24,0,0,0.24,0,0)">
@@ -58,12 +48,7 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xml:space="preserve"
       xmlns:serif="http://www.serif.com/"
-      style="
+      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-        fill-rule: evenodd;
-        clip-rule: evenodd;
-        stroke-linejoin: round;
-        stroke-miterlimit: 2;
-      "
     >
       <g transform="matrix(1,0,0,1,652.392,-0.400578)">
         <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
@@ -89,7 +74,7 @@
 
 <script>
 export default {
-  name: "AnimatedLogo"
+  name: 'AnimatedLogo',
 }
 </script>
 

lib/components/brand/TextLogo.vue

@@ -32,13 +32,13 @@
 
 <script>
 export default {
-  name: "TextLogo",
+  name: 'TextLogo',
   props: {
     animate: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
-  }
+  },
 }
 </script>
 

lib/components/utils.js

@@ -118,9 +118,7 @@ export const formatVersions = (versionArray, store) => {
 
   for (let i = 0; i < versionArray.length; i++) {
     const index = allVersions.findIndex((x) => x.version === versionArray[i])
-    const releaseIndex = allReleases.findIndex(
+    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
-      (x) => x.version === versionArray[i]
-    )
 
     if (i === 0) {
       intervals.push([[versionArray[i], index, releaseIndex]])
@@ -145,11 +143,7 @@ export const formatVersions = (versionArray, store) => {
   for (let i = 0; i < intervals.length; i++) {
     const interval = intervals[i]
 
-    if (
+    if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
-      interval.length === 2 &&
-      interval[0][2] !== -1 &&
-      interval[1][2] === -1
-    ) {
       let lastSnapshot = null
       for (let j = interval[1][1]; j > interval[0][1]; j--) {
         if (allVersions[j].version_type === 'release') {
@@ -158,17 +152,12 @@ export const formatVersions = (versionArray, store) => {
             [
               allVersions[j].version,
               j,
-              allReleases.findIndex(
+              allReleases.findIndex((x) => x.version === allVersions[j].version),
-                (x) => x.version === allVersions[j].version
-              ),
             ],
           ])
 
           if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-            newIntervals.push([
+            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
-              [allVersions[lastSnapshot].version, lastSnapshot, -1],
-              interval[1],
-            ])
           } else {
             newIntervals.push([interval[1]])
           }