feat: unplugin-vue-router, prettier, eslint, .gitattributes

.gitattributes

@@ -0,0 +1,3 @@
+* text=auto eol=lf
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf

.prettierrc

@@ -0,0 +1,17 @@
+{
+    "experimentalTernaries": true,
+    "experimentalOperatorPosition": "start",
+    "printWidth": 80,
+    "tabWidth": 4,
+    "useTabs": true,
+    "semi": true,
+    "singleQuote": false,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "objectWrap": "collapse",
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}

eslint.config.js

@@ -0,0 +1,24 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import vue from 'eslint-plugin-vue';
+
+export default ts.config(
+    { ignores: ['dist'] },
+    {
+        extends: [
+            js.configs.recommended,
+            ...ts.configs.recommendedTypeChecked,
+            ...vue.configs.recommendedTypeChecked,
+        ],
+        files: ['**/*.{js,ts,vue}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+    },
+)

package.json

@@ -13,13 +13,19 @@
     "@types/node": "^22.15.17",
     "bulma": "^1.0.4",
     "tailwindcss": "^4.1.6",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-vue": "^10.1.0",
+    "prettier": "^3.5.3",
     "sass": "^1.87.0",
     "typescript": "~5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "unplugin-vue-router": "^0.12.0",
     "vite": "^6.3.5",
     "vue-tsc": "^2.2.8"
   }

src/App.vue

@@ -1,34 +1,9 @@
 <template>
-  <div class="min-h-screen flex flex-col" style="gap: 4rem;"><!-- Main application wrapper -->
-    <!-- <SideBar /> -->
-
-    <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
-
-    <PaddingWrapper v-for="(sectionName, index) in sectionList" :key="index">
-      <component :is="sectionName" />
-    </PaddingWrapper>
-  </div>
+	<nav>
+		<RouterLink to="/">Home</RouterLink>
+		<RouterLink to="/resources">Resources</RouterLink>
+	</nav>
+	<main>
+		<RouterView />
+	</main>
 </template>
-
-<script lang="ts">
-// import SideBar from './components/organisms/SideBar.vue'
-import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
-import IntroSection from './components/organisms/IntroSection.vue'
-import HistorySection from './components/organisms/HistorySection.vue'
-import './assets/style.scss'
-import 'bulma/css/bulma.css'
-
-export default {
-  name: 'app',
-  components: {
-    PaddingWrapper,
-    IntroSection,
-    HistorySection
-  },
-  data() {
-    return {
-      sectionList: ['IntroSection', 'HistorySection']
-    }
-  }
-}
-</script>

src/assets/style.scss

@@ -1,10 +1,13 @@
-@import 'bulma/css/bulma.css';
+@import "bulma/css/bulma.css";
 
-$viossa-blue: #65B7F9;
+$viossa-blue: #65b7f9;
 
 body {
 	background-color: $viossa-blue;
-  font: normal Verdana, Arial, sans-serif;
+	font:
+		normal Verdana,
+		Arial,
+		sans-serif;
 	color: black;
 }
 

src/components/molecules/PaddingWrapper.vue

@@ -5,7 +5,5 @@
 </template>
 
 <script lang="ts">
-export default {
-  name: 'PaddingWrapper'
-}
+export default { name: "PaddingWrapper" };
 </script>

src/components/organisms/HistorySection.vue

@@ -1,18 +1,34 @@
 <template>
 	<div class="columns is-vcentered">
-
 		<!-- Text Column (left 3/4) -->
 		<div class="column">
 			<h2 class="title is-4">Viossa's History</h2>
-      <p class="has-text-white">Knock over christmas tree... If it fits i sits, jump five feet high and sideways when a shadow moves, rub face on owner and sometimes switches in french and say "miaou" just because well why not. Good morning sunshine, pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly. Chase ball of string stares at human while pushing stuff off a table ooooh feather moving feather! jump up to edge of bath, fall in then scramble in a mad panic to get out slap kitten brother with paw for chase mice. Have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat mmmmmmmmmeeeeeeeeooooooooowwwwwwww but cough furball into food bowl then scratch owner for a new one. Scream at teh bath open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow!</p>
+			<p class="has-text-white">
+				Knock over christmas tree... If it fits i sits, jump five feet
+				high and sideways when a shadow moves, rub face on owner and
+				sometimes switches in french and say "miaou" just because well
+				why not. Good morning sunshine, pet a cat, rub its belly, endure
+				blood and agony, quietly weep, keep rubbing belly. Chase ball of
+				string stares at human while pushing stuff off a table ooooh
+				feather moving feather! jump up to edge of bath, fall in then
+				scramble in a mad panic to get out slap kitten brother with paw
+				for chase mice. Have a lot of grump in yourself because you
+				can't forget to be grumpy and not be like king grumpy cat
+				mmmmmmmmmeeeeeeeeooooooooowwwwwwww but cough furball into food
+				bowl then scratch owner for a new one. Scream at teh bath open
+				the door, let me out, let me out, let me-out, let me-aow, let
+				meaow, meaow!
+			</p>
 		</div>
 
 		<!-- Image Column (right 1/4) -->
 		<div class="column is-one-quarter">
 			<figure class="image">
-        <img src="/src/assets/flakka.png" alt="Flag of the Viossa Language">
+				<img
+					src="/src/assets/flakka.png"
+					alt="Flag of the Viossa Language"
+				/>
 			</figure>
 		</div>
-
 	</div>
 </template>

src/components/organisms/IntroSection.vue

@@ -1,18 +1,37 @@
 <template>
 	<div class="columns is-vcentered">
-
 		<!-- Image Column (left 1/4) -->
 		<div class="column is-one-quarter">
 			<figure class="image">
-        <img src="/src/assets/flakka.png" alt="Flag of the Viossa Language">
+				<img
+					src="/src/assets/flakka.png"
+					alt="Flag of the Viossa Language"
+				/>
 			</figure>
 		</div>
 
 		<!-- Text Column (right 3/4) -->
 		<div class="column">
 			<h2 class="title is-4">What is Viossa?</h2>
-      <p class="has-text-white">Cat ipsum dolor sit amet, be superior eats owners hair then claws head gimme attention gimme attention gimme attention gimme attention gimme attention gimme attention just kidding i don't want it anymore meow bye. Avoid the new toy and just play with the box it came in floof tum, tickle bum, jellybean footies curly toes curl up and sleep on the freshly laundered towels hiss and stare at nothing then run suddenly away. Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me attack the dog then pretend like nothing happened jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap steal raw zucchini off kitchen counter...</p>
+			<p class="has-text-white">
+				Cat ipsum dolor sit amet, be superior eats owners hair then
+				claws head gimme attention gimme attention gimme attention gimme
+				attention gimme attention gimme attention just kidding i don't
+				want it anymore meow bye. Avoid the new toy and just play with
+				the box it came in floof tum, tickle bum, jellybean footies
+				curly toes curl up and sleep on the freshly laundered towels
+				hiss and stare at nothing then run suddenly away. Need to check
+				on human, have not seen in an hour might be dead oh look, human
+				is alive, hiss at human, feed me attack the dog then pretend
+				like nothing happened jump on human and sleep on her all night
+				long be long in the bed, purr in the morning and then give a
+				bite to every human around for not waking up request food, purr
+				loud scratch the walls, the floor, the windows, the humans eat
+				prawns daintily with a claw then lick paws clean wash down
+				prawns with a lap of carnation milk then retire to the warmest
+				spot on the couch to claw at the fabric before taking a catnap
+				steal raw zucchini off kitchen counter...
+			</p>
 		</div>
-
 	</div>
 </template>

src/components/organisms/SideBar.vue

@@ -1,7 +1,3 @@
-<script setup>
+<script setup></script>
 
-</script>
-
-<template>
-
-</template>
+<template></template>

src/main.ts

@@ -1,5 +1,9 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { routes } from "vue-router/auto-routes";
 
-createApp(App).mount('#app')
+const router = createRouter({ history: createWebHistory(), routes: routes });
+
+createApp(App).use(router).mount("#app");

src/routes/index.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="min-h-screen flex flex-col" style="gap: 4rem">
+		<!-- Main application wrapper -->
+		<!-- <SideBar /> -->
+
+		<h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
+
+		<PaddingWrapper
+			v-for="(sectionName, index) in sectionList"
+			:key="index"
+		>
+			<component :is="sectionName" />
+		</PaddingWrapper>
+	</div>
+</template>
+
+<script lang="ts">
+// import SideBar from './components/organisms/SideBar.vue'
+import PaddingWrapper from "../components/molecules/PaddingWrapper.vue";
+import IntroSection from "../components/organisms/IntroSection.vue";
+import HistorySection from "../components/organisms/HistorySection.vue";
+import "../assets/style.scss";
+import "bulma/css/bulma.css";
+
+export default {
+	name: "app",
+	components: { PaddingWrapper, IntroSection, HistorySection },
+	data() {
+		return { sectionList: ["IntroSection", "HistorySection"] };
+	},
+};
+</script>

src/routes/resources.vue

@@ -0,0 +1,3 @@
+<template>
+	<h1>Resources</h1>
+</template>

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+	import type { DefineComponent } from "vue";
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
 }

src/typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/resources': RouteRecordInfo<'/resources', '/resources', Record<never, never>, Record<never, never>>,
+  }
+}

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

tsconfig.app.json

@@ -2,14 +2,18 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "noUncheckedIndexedAccess": true,
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+  ]
 }

tsconfig.node.json

@@ -2,17 +2,17 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
+    "lib": [
+      "ES2023"
+    ],
+    "module": "NodeNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "nodenext",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -21,5 +21,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

vite.config.ts

@@ -1,12 +1,17 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import vueRouter from "unplugin-vue-router/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [tailwindcss(), vue()],
+  plugins: [
+    tailwindcss(),
+    vueRouter({ routesFolder: "src/routes", dts: "src/typed-router.d.ts" }),
+    vue(),
+  ],
   build: {
-    outDir: '/var/www/viossa.net',
+    outDir: "/var/www/viossa.net",
     emptyOutDir: true,
-  }
-})
+  },
+});