Add tailwindcss, add first page

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>

assets/css/tailwind.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    background-color: wheat;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        background-color: #1E293B;
+        color: antiquewhite;
+    }
+}

components/LLink.vue

@@ -0,0 +1,18 @@
+<template>
+    <NuxtLink :to="to" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 py-5 px-10 rounded-3xl shadow-lg hover:shadow-xl">{{ title }} →</NuxtLink>
+</template>
+
+<script setup lang="ts">
+
+defineProps({
+    to: {
+        type: String,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+})
+
+</script>

nuxt.config.ts

@@ -1,4 +1,21 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-
+    nitro: {
-})
+        //plugins: ['~/server/index.ts'],
+    },
+    runtimeConfig: {
+        mongoUri: process.env.MONGO_URI || 'mongodb://localhost:27017/friends-best',
+    },
+    modules: ["@nuxtjs/tailwindcss", "@nuxtjs/color-mode"],
+    colorMode: {
+        preference: 'system'
+    },
+    app: {
+        head: {
+            title: 'Vanner Basta',
+            meta: [
+                {name: "theme-color", media: "(prefers-color-scheme: dark)", content: "#1E293B"}
+            ]
+        }
+    }
+})

package.json

@@ -8,10 +8,14 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.0.0-rc.13"
+    "@nuxtjs/color-mode": "3.1.8",
+    "@nuxtjs/tailwindcss": "6.1.3",
+    "nuxt": "3.0.0-rc.13",
+    "tailwindcss": "3.2.2"
   },
   "dependencies": {
     "@typegoose/typegoose": "9.12.1",
-    "mongoose": "6.7.2"
+    "mongoose": "6.7.2",
+    "scss": "0.2.4"
   }
 }

pages/index.vue

@@ -1,5 +1,43 @@
 <template>
-    <div>
+    <div class="grid h-screen place-items-center">
-        <h1>Index</h1>
+        <div class="grid place-items-center">
+        <h1 class="text-3xl font-bold underline">Vänner Bästa</h1>
+        <div class="mt-10 place-items-center">
+            <p>A Young Royals fan website with links to different discussion spaces.</p>
+            <strong class="pt-5">Season 2 is out now!</strong>
+        </div>
+        <div class="grid grid-cols-2 lg:grid-cols-3 mt-10">
+            <LLink v-for="link in links" :to="link.href" :title="link.title" />
+        </div>
+        </div>
     </div>
-</template>
+</template>
+
+<script setup lang="ts">
+const links: Array<{href: string, title: string}> = [
+    {
+        href: "https://netflix.com",
+        title: "Netflix"
+    },
+    {
+        href: "https://discord.gg/youngroyals",
+        title: "Discord"
+    },
+    {
+        href: "https://reddit.com/r/youngroyals",
+        title: "Reddit"
+    },
+    {
+        href: "https://www.talkable.com/x/IchxFl",
+        title: "Babbel (ref)"
+    },
+    {
+        href: "https://masto.nu/yrdiscord",
+        title: "Mastodon"
+    },
+    {
+        href: "/utilities",
+        title: "Discord Utilities"
+    }
+]
+</script>

server/index.ts

@@ -0,0 +1,9 @@
+import mongoose from 'mongoose';
+const runtimeConfig = useRuntimeConfig();
+import {Nitro} from 'nitropack';
+
+export default async (_nitroApp: Nitro) => {
+    mongoose.connect(runtimeConfig.mongoUri)
+        .then(() => console.log('connected to db'))
+        .catch(err => console.log('error connecting to db', err));
+};

tailwind.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    theme: {
+    },
+    content: [
+    `./components/**/*.{vue,js,ts}`,
+    `./layouts/**/*.vue`,
+    `./pages/**/*.vue`,
+    `./composables/**/*.{js,ts}`,
+    `./plugins/**/*.{js,ts}`,
+    `./App.{js,ts,vue}`,
+    `./app.{js,ts,vue}`,
+    `./Error.{js,ts,vue}`,
+    `./error.{js,ts,vue}`
+    ],
+}