Basic layout; setup.

frontend/.eslintrc.cjs

@@ -0,0 +1,53 @@
+module.exports = {
+    root: true,
+    plugins: ['@typescript-eslint'],
+    parserOptions: {
+        ecmaVersion: 2020,
+        parser: require.resolve('@typescript-eslint/parser'),
+        extraFileExtensions: ['.vue'],
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:vue/vue3-recommended',
+    ],
+    overrides: [
+        {
+            files: ['*.vue'],
+            rules: {
+                'vue/multi-word-component-names': 'off',
+                'vue/first-attribute-linebreak': 'off',
+                'vue/max-attributes-per-line': 'off',
+                'vue/html-self-closing': 'off',
+                'vue/html-closing-bracket-newline': 'off',
+                'vue/multiline-html-element-content-newline': ['error', {
+                    'allowEmptyLines': true,
+                }],
+                'vue/singleline-html-element-content-newline': 'off',
+            },
+        },
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                'no-unused-vars': 'off',
+            },
+        },
+    ],
+    settings: {
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.vue'],
+            },
+            alias: {
+                extensions: ['.vue', '.js', '.scss'],
+                map: [
+                    ['@', './resources/js'],
+                    ['@scss', './resources/sass'],
+                ],
+            },
+        },
+        messageSyntaxVersion: '^9.0.0',
+    },
+}

frontend/.idea/dictionaries/marley.xml

@@ -0,0 +1,3 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="marley" />
+</component>

frontend/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,11 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
+      <option name="processCode" value="false" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

frontend/.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

frontend/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

frontend/app.vue

@@ -1,7 +1,65 @@
 <template>
-  <div>
+  <div class="page">
 
+    <header>
+      <h1><NuxtLink to="/">Bibliothecary</NuxtLink></h1>
 
+      <nav>
+        <NuxtLink to="/patrons">Patrons</NuxtLink>
+        <NuxtLink to="/catalog">Catalog</NuxtLink>
+        <NuxtLink to="/account">Account</NuxtLink>
+      </nav>
+    </header>
+
+    <main>
+
+    </main>
+
+    <footer>&copy; 2023</footer>
 
   </div>
 </template>
+
+<!-------------------------------------------------------------------------------------- style ---->
+
+<style lang="postcss">
+.page {
+  @apply min-h-screen w-screen p-5 flex flex-col gap-y-5;
+  @apply bg-gradient-to-br from-pink-400 via-fuchsia-300 to-cyan-400;
+}
+
+header,
+main,
+footer section {
+  @apply bg-white bg-opacity-30;
+  @apply rounded-lg;
+}
+
+header {
+  @apply h-12 flex justify-between items-center px-3;
+}
+
+main {
+  @apply grow;
+}
+
+footer {
+  @apply h-6;
+  @apply text-center italic opacity-50;
+}
+
+header h1,
+nav a {
+  @apply opacity-70;
+}
+
+header h1 {
+  @apply text-2xl uppercase italic tracking-wide font-bold;
+  @apply transition-[letter-spacing] hover:tracking-widest;
+}
+
+nav a {
+  @apply mx-2;
+  @apply transition-all hover:opacity-100 hover:border-b-pink-500 hover:border-b-2;
+}
+</style>

frontend/nuxt.config.ts

@@ -1,4 +1,18 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss']
-})
+  app: {
+    head: {
+      link: [
+          {rel: 'preconnect', href: 'https://fonts.googleapis.com'},
+          {rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+          {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Imprima&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'}
+      ],
+    },
+  },
+  modules: ['@nuxtjs/tailwindcss'],
+  devServer: {
+    host: 'bibliothecary.test',
+  },
+  telemetry: false,
+});

frontend/package.json

@@ -10,7 +10,15 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.7.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^18",
-    "nuxt": "^3.5.1"
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "^8.41.0",
+    "eslint-plugin-vue": "^9.14.0",
+    "nuxt": "^3.5.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.31.1"
   }
 }

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+import tailwindForms from '@tailwindcss/forms';
+
+export default {
+  plugins: [tailwindForms],
+  fontFamily: {
+    'sans': ['Imprima'],
+    'serif': ['"Playfair Display"'],
+    'mono': ['"Fira Code Freeze"'],
+  }
+}