feat: various updates, see details

.github/workflows/continuous-integration.yml

@@ -7,8 +7,8 @@ on:
   pull_request:
 
 jobs:
-  Formatting:
-    name: Checking formatting
+  Linting:
+    name: Linting
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Project
@@ -21,5 +21,22 @@ jobs:
           registry-url: https://registry.yarnpkg.com/
       - name: Install Dependencies
         run: yarn --immutable
-      - name: Check formatting
-        run: yarn format:check
+      - name: ESLint
+        run: yarn lint
+
+  Typechecking:
+    name: Typechecking
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@v3
+      - name: Use Node.js v20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: yarn
+          registry-url: https://registry.yarnpkg.com/
+      - name: Install Dependencies
+        run: yarn --immutable
+      - name: Typechecking
+        run: yarn test

.prettierrc.mjs

@@ -0,0 +1,19 @@
+import sapphirePrettierConfig from '@sapphire/prettier-config';
+
+/** @type {import('prettier').Config} */
+export default {
+	...sapphirePrettierConfig,
+	plugins: ['prettier-plugin-tailwindcss'],
+	overrides: [
+		...sapphirePrettierConfig.overrides,
+		{
+			files: ['README.md'],
+			options: {
+				tabWidth: 2,
+				useTabs: false,
+				printWidth: 80,
+				proseWrap: 'always'
+			}
+		}
+	]
+};

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	"recommendations": [
+		"esbenp.prettier-vscode",
+		"formulahendry.auto-rename-tag",
+		"EditorConfig.EditorConfig",
+		"dbaeumer.vscode-eslint",
+		"Nuxtr.nuxt-vscode-extentions",
+		"esbenp.prettier-vscode",
+		"bradlc.vscode-tailwindcss",
+		"antfu.vite",
+		"vitest.explorer"
+	]
+}

.vscode/settings.json

@@ -1,9 +1,9 @@
 {
-	"editor.tabSize": 4,
-	"editor.useTabStops": true,
-	"editor.insertSpaces": false,
-	"editor.detectIndentation": true,
-	"files.eol": "\n",
+	"editor.codeActionsOnSave": {
+		"source.fixAll": "always",
+		"source.fixAll.eslint": "always",
+		"source.organizeImports": "never"
+	},
 	"search.exclude": {
 		"**/node_modules": true,
 		"**/bower_components": true,
@@ -12,8 +12,18 @@
 		"**/.next/": true,
 		"**/.git/": true
 	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"files.associations": {
 		"*.css": "tailwindcss"
 	},
-	"prettier.documentSelectors": ["**/*.svg"]
+	"editor.quickSuggestions": {
+		"strings": true
+	},
+	"eslint.useFlatConfig": true,
+	"tailwindCSS.experimental.configFile": "tailwind.config.ts",
+	"prettier.documentSelectors": ["**/*.svg"],
+	"sonarlint.connectedMode.project": {
+		"connectionId": "https-sonarqube-sapphirejs-dev",
+		"projectKey": "sapphiredev_resource-webhooks_e2cb9959-cd79-4b35-a323-e26dee4ce7d4"
+	}
 }

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

README.md

@@ -4,7 +4,8 @@
 
 # Sapphire
 
-**Webhook frontend UI to send webhook based messages to Discord, built with Nuxt**
+**Webhook frontend UI to send webhook based messages to Discord, built with
+Nuxt**
 
 | [Click here to go to the production website][prod] |
 | -------------------------------------------------- |
@@ -19,9 +20,13 @@
 
 ## Buy us some doughnuts
 
-Sapphire Community is and always will be open source, even if we don't get donations. That being said, we know there are amazing people who may still want to donate just to show their appreciation. Thank you very much in advance!
+Sapphire Community is and always will be open source, even if we don't get
+donations. That being said, we know there are amazing people who may still want
+to donate just to show their appreciation. Thank you very much in advance!
 
-We accept donations through Open Collective, Ko-fi, Paypal, Patreon and GitHub Sponsorships. You can use the buttons below to donate through your method of choice.
+We accept donations through Open Collective, Ko-fi, Paypal, Patreon and GitHub
+Sponsorships. You can use the buttons below to donate through your method of
+choice.
 
 |   Donate With   |                       Address                       |
 | :-------------: | :-------------------------------------------------: |
@@ -32,13 +37,15 @@ We accept donations through Open Collective, Ko-fi, Paypal, Patreon and GitHub S
 
 ## Contributors
 
-Please make sure to read the [Contributing Guide][contributing] before making a pull request.
+Please make sure to read the [Contributing Guide][contributing] before making a
+pull request.
 
 Thank you to all the people who already contributed to Sapphire!
 
 <a href="https://github.com/sapphiredev/resource-webhooks/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=sapphiredev/resource-webhooks" />
 </a>
 
-[contributing]: https://github.com/sapphiredev/.github/blob/main/.github/CONTRIBUTING.md
+[contributing]:
+  https://github.com/sapphiredev/.github/blob/main/.github/CONTRIBUTING.md
 [prod]: https://webhooks.sapphirejs.dev

app.vue

@@ -1,9 +1,12 @@
 <template>
-	<vite-pwa-manifest />
-	<loading-indicator />
-	<nuxt-layout name="main">
-		<nuxt-page />
-	</nuxt-layout>
+	<VitePwaManifest />
+	<NuxtLoadingIndicator />
+	<NuxtLayout name="main">
+		<NuxtPage />
+	</NuxtLayout>
+	<Teleport to="body">
+		<LoadingIndicator />
+	</Teleport>
 </template>
 
 <script setup lang="ts">

assets/css/tailwind.css

@@ -34,7 +34,7 @@
 	}
 
 	.tooltip-custom {
-		@apply tooltip-info tooltip tooltip-right;
+		@apply tooltip tooltip-right tooltip-info;
 	}
 }
 

components/forms/error-message.vue

@@ -1,9 +1,7 @@
 <template>
-	<ErrorMessage :name="name" class="label-text-alt" :class="{ 'text-red-500': !!hasErrorMessage }" />
+	<VeeErrorMessage :name="name" class="label-text-alt" :class="{ 'text-red-500': !!hasErrorMessage }" />
 </template>
 
 <script setup lang="ts">
-import { ErrorMessage } from 'vee-validate';
-
 defineProps<{ name: string; hasErrorMessage: boolean }>();
 </script>

components/forms/input.vue

@@ -3,17 +3,15 @@
 		<label class="label">
 			<span class="label-text">{{ label }}</span>
 		</label>
-		<input v-model="value" type="text" class="input-bordered input w-full shadow-md" :class="{ 'input-error': !!errorMessage }" />
+		<input v-model="value" type="text" class="input input-bordered w-full shadow-md" :class="{ 'input-error': !!errorMessage }" />
 		<label class="label">
-			<forms-error-message :name="name" :hasErrorMessage="!!errorMessage" />
+			<FormsErrorMessage :name="name" :has-error-message="!!errorMessage" />
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { useField } from 'vee-validate';
-
 const props = defineProps<{ name: string; label: string }>();
 
-const { value, errorMessage } = useField<string>(props.name);
+const { value, errorMessage } = useField<string>(toRef(props, 'name'));
 </script>

components/forms/select.vue

@@ -5,26 +5,25 @@
 				{{ label }}
 				<span v-if="options.length === 0">
 					<span class="font-bold text-error">
-						<nuxt-link :aria-label="`Go to configuration page for ${label}`" class="link-secondary link" :to="addNewOptionHref"
-							>configuration page</nuxt-link
+						<NuxtLink :aria-label="`Go to configuration page for ${label}`" class="link link-secondary" :to="addNewOptionHref"
+							>configuration page</NuxtLink
 						>
 					</span>
 				</span>
 			</span>
 		</label>
-		<select class="max-x-ws select w-full shadow-md" :disabled="options.length === 0" v-model="value">
+		<select v-model="value" class="max-x-ws select w-full shadow-md" :disabled="options.length === 0">
 			<option :disabled="required" selected :value="null">None</option>
 			<option v-for="option in options" :key="option.value" :value="option" :selected="value && value.value === option.value">
 				{{ option.label + ' - ' + option.value }}
 			</option>
 
-			<forms-error-message :name="name" :hasErrorMessage="!!errorMessage" />
+			<FormsErrorMessage :name="name" :has-error-message="!!errorMessage" />
 		</select>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { useField } from 'vee-validate';
 import type { PersistedStorageEntry } from '~~/lib/types/PersistedStorageEntry';
 
 const props = defineProps<{
@@ -35,5 +34,5 @@ const props = defineProps<{
 	options: PersistedStorageEntry[];
 }>();
 
-const { value, errorMessage } = useField<PersistedStorageEntry>(props.name);
+const { value, errorMessage } = useField<PersistedStorageEntry>(toRef(props, 'name'));
 </script>

components/forms/textarea.vue

@@ -7,18 +7,16 @@
 		<textarea
 			v-model="value"
 			type="text"
-			class="textarea-bordered textarea h-full font-mono shadow-md"
+			class="textarea textarea-bordered h-full font-mono shadow-md"
 			:class="{ 'input-error': !!errorMessage }"
 		/>
 		<label class="label">
-			<forms-error-message :name="name" :hasErrorMessage="!!errorMessage" />
+			<FormsErrorMessage :name="name" :has-error-message="!!errorMessage" />
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { useField, useFieldValue } from 'vee-validate';
-
 const props = defineProps<{ name: string; label: string }>();
 
 const { value, errorMessage } = useField<string>(toRef(props, 'name'));

components/home-card.vue

@@ -4,11 +4,11 @@
 			<h2 class="card-title">{{ title }}</h2>
 			<p>{{ description }}</p>
 			<div class="card-actions justify-end">
-				<nuxt-link :aria-label="`Link to ${title}`" :to="href">
-					<button :aria-label="`Button for going to the ${title} page`" class="btn-primary btn min-w-[10rem] normal-case">
+				<NuxtLink :aria-label="`Link to ${title}`" :to="href">
+					<button :aria-label="`Button for going to the ${title} page`" class="btn btn-primary min-w-[10rem] normal-case">
 						{{ btnText }}
 					</button>
-				</nuxt-link>
+				</NuxtLink>
 			</div>
 		</div>
 	</div>

components/loading-indicator.vue

@@ -1,11 +1,11 @@
 <template>
-	<div v-if="isLoadingIndicator" role="presentation" class="fixed z-[1200] block h-full w-full bg-base-300 opacity-75">
+	<div v-if="loadingStorage.isLoading" class="fixed z-[1200] block h-full w-full bg-base-300 opacity-75">
 		<div class="absolute left-1/2 top-1/2 z-[1200]">
 			<div class="loading loading-bars loading-lg"></div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-const isLoadingIndicator = useLoadingIndicator();
+const loadingStorage = useLoadingStore();
 </script>