run lint + fix build output (#19)

* run lint + fix build output

* remove unused env var
This commit is contained in:
Geometrically 2023-03-13 13:28:30 -07:00 committed by GitHub
parent 1b81a1f4a6
commit 6aaf4ed9d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 121 additions and 223 deletions

View File

@ -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 }}

View File

@ -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

View File

@ -1,46 +1,3 @@
# omorphia
This template should help get you started developing with Vue 3 in Vite.
## 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
```
Omorphia is modrinth's style and component library. See [omorphia.modrinth.com](https://omorphia.modrinth.com) for more information.

View File

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

View File

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

View File

@ -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);

View File

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

View File

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

View File

@ -4,19 +4,14 @@
A {{ type }}
</span>
<span
v-else-if="
!['resourcepack', 'shader'].includes(type) &&
!(type === 'plugin' && search)
"
v-else-if="!['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
v-else-if="clientSide === 'required' && serverSide === 'required'"
>
<template 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
v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'"
>
<template 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 {

View File

@ -1,14 +1,6 @@
<template>
<article
class="project-card base-card"
:aria-label="name"
role="listitem"
>
<router-link
class="icon"
tabindex="-1"
:to="`/${projectTypeUrl}/${id}`"
>
<article class="project-card base-card" :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"
>{{ author }}
</router-link>
<router-link class="title-link" :to="'/user/' + author">{{ author }} </router-link>
</p>
<Badge
v-if="status && status !== 'approved'"
:type="status"
class="status"
/>
<Badge v-if="status && status !== 'approved'" :type="status" class="status" />
</div>
<p class="description">
{{ description }}
</p>
<Categories
:categories="categories"
:type="type"
class="tags"
>
<Categories :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">
download<span v-if="downloads !== '1'">s</span></span
>
><span class="stat-label"> 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">
follower<span v-if="follows !== '1'">s</span></span
>
><span class="stat-label"> follower<span v-if="follows !== '1'">s</span></span>
</p>
</div>
<div class="buttons">
<slot />
</div>
<div
v-if="showUpdatedDate"
v-tooltip="updatedDate"
class="stat date"
>
<div v-if="showUpdatedDate" v-tooltip="updatedDate" class="stat date">
<EditIcon aria-hidden="true" />
<span class="date-label">Updated </span
> {{ sinceUpdated }}
<span class="date-label">Updated </span> {{ sinceUpdated }}
</div>
<div
v-else
v-tooltip="createdDate"
class="stat date"
>
<div v-else v-tooltip="createdDate" class="stat date">
<CalendarIcon aria-hidden="true" />
<span class="date-label">Published </span
>{{ sinceCreation }}
<span class="date-label">Published </span>{{ 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;

View File

@ -3,27 +3,27 @@
<div class="slider-component">
<div class="slide-container">
<input
ref="input"
v-model="currentValue"
type="range"
:min="min"
:max="max"
:step="step"
class="slider"
:style="{
'--current-value': currentValue,
'--min-value': min,
'--max-value': max
}"
@input="onInput($refs.input.value)"
>
ref="input"
v-model="currentValue"
type="range"
:min="min"
:max="max"
:step="step"
class="slider"
:style="{
'--current-value': currentValue,
'--min-value': min,
'--max-value': max,
}"
@input="onInput($refs.input.value)"
/>
<div class="slider-range">
<span>
{{ min }}
</span>
{{ min }}
</span>
<span>
{{ max }}
</span>
{{ max }}
</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.$emit('input', parseInt(this.currentValue));
}
}
this.$refs.value.value = 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;
background: linear-gradient(
to right,
var(--color-brand),
var(--color-brand) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
var(--color-base) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
var(--color-base) 100%
height: 0.25rem;
background: linear-gradient(
to right,
var(--color-brand),
var(--color-brand)
calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 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;
height: .75rem;
width: 0.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;
height: .75rem;
width: 0.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 {

View File

@ -7,12 +7,7 @@
viewBox="0 0 590 591"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linejoin: round;
stroke-miterlimit: 2;
"
style="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"
width="100%"
height="100%"
viewBox="0 0 590 591"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linejoin: round;
stroke-miterlimit: 2;
"
>
class="rotate inner"
width="100%"
height="100%"
viewBox="0 0 590 591"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
style="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="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linejoin: round;
stroke-miterlimit: 2;
"
style="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>

View File

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

View File

@ -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(
(x) => x.version === versionArray[i]
)
const releaseIndex = allReleases.findIndex((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 (
interval.length === 2 &&
interval[0][2] !== -1 &&
interval[1][2] === -1
) {
if (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(
(x) => x.version === allVersions[j].version
),
allReleases.findIndex((x) => x.version === allVersions[j].version),
],
])
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
newIntervals.push([
[allVersions[lastSnapshot].version, lastSnapshot, -1],
interval[1],
])
newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
} else {
newIntervals.push([interval[1]])
}