Merge branch 'eslint'

.eslintrc.json

@@ -1,16 +1,19 @@
 {
-	"parser": "@typescript-eslint/parser",
+	"parser": "vue-eslint-parser",
 	"parserOptions": {
+		"parser": "@typescript-eslint/parser",
 		"sourceType": "module",
 		"ecmaVersion": 2021,
-		"project": "tsconfig.json"
+		"project": "tsconfig.json",
+		"extraFileExtensions": [".vue"]
 	},
 	"extends": [
 		"prettier",
 		"eslint:recommended",
 		"plugin:@typescript-eslint/eslint-recommended",
 		"plugin:@typescript-eslint/recommended",
 		"plugin:@typescript-eslint/recommended-requiring-type-checking",
+		"plugin:vue/vue3-recommended",
 		"plugin:functional/external-typescript-recommended",
 		"plugin:ava/recommended",
 		"plugin:prettier/recommended"

justfile

@@ -4,7 +4,7 @@ lint:
 	npx astro sync
 	npx astro check
 	npx prettier --check source
-	npx eslint . --ext ".ts"
+	npx eslint . --ext ".ts,.vue"
 	npx jscpd source
 
 @compile:

package.json

@@ -58,6 +58,7 @@
 		"eslint-plugin-ava": "14.0.0",
 		"eslint-plugin-functional": "6.5.1",
 		"eslint-plugin-prettier": "5.1.3",
+		"eslint-plugin-vue": "9.26.0",
 		"fastify": "4.27.0",
 		"fishery": "2.2.2",
 		"get-port": "7.1.0",
@@ -72,6 +73,7 @@
 		"tailwindcss": "3.4.4",
 		"tsx": "4.15.4",
 		"typescript": "5.4.5",
+		"vue-eslint-parser": "9.4.3",
 		"vue-tsc": "2.0.21",
 		"wait-on": "7.2.0",
 		"zx": "8.1.2"

source/statistics/GitHubRepositories.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Maybe } from "true-myth";
 import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
-import Cite from "./Cite.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly isFetching: boolean;
@@ -14,10 +14,10 @@ const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="GitHub Repos">
+	<StatisticsFigure description="GitHub Repos">
 		<LoadingSpinner v-if="isFetching" />
-		<Cite v-if="!isFetching" ariaLabel="GitHub Repos">
+		<StatisticsCite v-if="!isFetching" ariaLabel="GitHub Repos">
 			{{ gitHubStatistics.get("user").get("repositories").get("totalCount").unwrapOr(0) }}
-		</Cite>
-	</Figure>
+		</StatisticsCite>
+	</StatisticsFigure>
 </template>

source/statistics/GitHubStars.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Maybe } from "true-myth";
 import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
-import Cite from "./Cite.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly isFetching: boolean;
@@ -14,10 +14,10 @@ const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="GitHub Stars">
+	<StatisticsFigure description="GitHub Stars">
 		<LoadingSpinner v-if="isFetching" />
-		<Cite v-if="!isFetching" ariaLabel="GitHub Stars">
+		<StatisticsCite v-if="!isFetching" ariaLabel="GitHub Stars">
 			{{ gitHubStatistics.get("user").get("starredRepositories").get("totalCount").unwrapOr(0) }}
-		</Cite>
-	</Figure>
+		</StatisticsCite>
+	</StatisticsFigure>
 </template>

source/statistics/StatisticsData.vue

@@ -6,7 +6,7 @@ import { Maybe } from "true-myth";
 import YearsInBusiness from "./YearsInBusiness.vue";
 import GitHubRepositories from "./GitHubRepositories.vue";
 import GitHubStars from "./GitHubStars.vue";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import { gitHubStatisticsSchema, type GitHubStatistics } from "../github-statistics/github-statistics-schema";
 
 const currentYear = import.meta.env.PROD ? new Date() : new Date(2022, 2, 23);
@@ -30,7 +30,7 @@ const barChartIcon = icons["bar-chart"].toSvg({ class: "text-dracula-green w-6 h
 	<YearsInBusiness :years-of-experience="yearsOfExperience" />
 	<GitHubRepositories :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
 	<GitHubStars :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
-	<Figure description="Lines of Code">
+	<StatisticsFigure description="Lines of Code">
 		<figure v-html="barChartIcon" />
-	</Figure>
+	</StatisticsFigure>
 </template>

source/statistics/YearsInBusiness.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Figure from "./Figure.vue";
-import Cite from "./Cite.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly yearsOfExperience: number;
@@ -10,7 +10,7 @@ const { yearsOfExperience } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="Experience">
-		<Cite ariaLabel="Years of experience">{{ yearsOfExperience }} yrs</Cite>
-	</Figure>
+	<StatisticsFigure description="Experience">
+		<StatisticsCite ariaLabel="Years of experience">{{ yearsOfExperience }} yrs</StatisticsCite>
+	</StatisticsFigure>
 </template>