Init

src/pages/README.md

@@ -0,0 +1,20 @@
+## File-based Routing
+
+Routes will be auto-generated for Vue files in this dir with the same file structure.
+Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
+
+### Path Aliasing
+
+`~/` is aliased to `./src/` folder.
+
+For example, instead of having
+
+```ts
+import { isDark } from '../../../../composables'
+```
+
+now, you can use
+
+```ts
+import { isDark } from '~/composables'
+```

src/pages/[...all].vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    {{ t('not-found') }}
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>

src/pages/about.md

@@ -0,0 +1,23 @@
+---
+title: About
+---
+
+<div class="text-center">
+  <!-- You can use Vue components inside markdown -->
+  <carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <h3>About</h3>
+</div>
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
+
+```js
+// syntax highlighting example
+function vitesse() {
+  const foo = 'bar'
+  console.log(foo)
+}
+```
+
+Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.
+
+

src/pages/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <h1 class="text-7xl my-4">
+      Hi there,<br> I'm <span class="font-bold text-fly-600 dark:text-fly-500">Flycro</span>
+    </h1>
+    <p class="text-4xl my-9">
+      Just another Username in the vast sea of the web.
+    </p>
+    <p class="mt-8 text-xl">
+      My interests fluctuate over a wide span of topics, but I'm most interested in web development, design, and tabletop gaming.
+    </p>
+    <p class="text-xl mt-4">
+      However, perfecting my skills is a long journey. I'm currently working on a few projects and still have a lot to learn.
+      <br>
+      I'm not ready to share my work just yet, but I'm open to discussing new projects and opportunities.
+      <br>
+      But nontheless, I will write about my journey here.
+    </p>
+    <p class="text-xl mt-4">
+      No matter what I pour my heart, mind and soul into, the goal is to find a way communicate my thoughts and feelings with you.
+    </p>
+    <p class="text-xl mt-4">
+      This is a place where I share my thoughts, ideas, projects and what inspires me. I hope you enjoy it.
+    </p>
+
+    <div class="py-4" />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

src/pages/posts/[slug].vue

@@ -0,0 +1,48 @@
+<route>
+{
+  meta:{
+    layout: 'posts'
+  }
+}
+</route>
+
+<template>
+  <div v-if="post && Object.keys(post.currentPost).length !== 0">
+    <Motion
+      :initial="{ opacity: 0 }"
+      :animate="{ opacity: 1}"
+      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+    >
+      <div class="text-3xl my-2">
+        <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
+        <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
+      </div>
+      <div v-html="post.currentPost.body" />
+    </Motion>
+  </div>
+  <router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
+    Back to Posts
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion/vue'
+import { usePostStore } from '~/stores/post'
+
+const post = usePostStore()
+
+const props = defineProps<{ slug: string }>()
+post.getCurrentPostBySlug(props.slug)
+
+useHead({
+  title: computed(() => `${post.currentPost.title} – Flycro`),
+  meta: [
+    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
+  ],
+})
+
+</script>
+
+<style scoped>
+
+</style>

src/pages/posts/index.vue

@@ -0,0 +1,78 @@
+<route>
+{
+  meta:{
+    layout: 'posts'
+  }
+}
+</route>
+
+<template>
+  <div>
+    <h1>Blog</h1>
+    <div>
+      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
+        <Motion
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1}"
+          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+        >
+          <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
+            <li>
+              <div class="text-xl">
+                {{ p.title }}
+              </div>
+              <div class="flex justify-start flex-row">
+                <div class="text-xs">
+                  {{ convertDate(p.date_created) }}
+                </div>
+              </div>
+            </li>
+          </router-link>
+        </Motion>
+      </ul>
+
+      <Motion
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1}"
+        :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+      >
+        <div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
+          No Posts found
+        </div>
+      </Motion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion/vue'
+import type { Ref } from 'vue'
+import dayjs from 'dayjs'
+import { usePostStore } from '~/stores/post'
+
+useHead({
+  title: 'Blog – Flycro',
+  meta: [
+    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
+  ],
+})
+
+const post = usePostStore()
+const show = ref(false)
+
+function convertDate(date: string): string {
+  return dayjs(date).format('DD. MMMM YYYY')
+}
+
+onMounted(() => {
+  post.fetchPosts()
+})
+
+</script>
+
+<style scoped>
+article.prose.m-auto div div ul.list-none a.no-underline
+{
+    @apply no-underline
+}
+</style>

src/pages/projects/index.vue

@@ -0,0 +1,48 @@
+<route>
+{
+  meta:{
+    layout: 'projects'
+  }
+}
+</route>
+
+<template>
+  <div>
+    <h1>Projects</h1>
+    <p>Nothing to see here yet.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Motion } from 'motion/vue'
+import type { Ref } from 'vue'
+
+import dayjs from 'dayjs'
+import { usePostStore } from '~/stores/post'
+
+useHead({
+  title: computed(() => 'Projects – Flycro'),
+  meta: [
+    { name: 'description', content: 'Some of my projects that I am happy to share with you.' },
+  ],
+})
+
+const post = usePostStore()
+const show = ref(false)
+
+function convertDate(date: string): string {
+  return dayjs(date).format('DD. MMMM YYYY')
+}
+
+onMounted(() => {
+  post.fetchPosts()
+})
+
+</script>
+
+<style scoped>
+article.prose.m-auto div div ul.list-none a.no-underline
+{
+    @apply no-underline
+}
+</style>