Moved to Nuxt

NuxtJS, Vue, real web app

Nuxt content: blog

Better mobile/responsive design and practices

Better practices overall

app/components/blog/Image.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{
+    image: string
+}>()
+</script>
+
+<template>
+<img class="object-contain sm:max-w-[85%] max-w-[95%] m-auto" :src="props.image" />
+<div class="ml-auto mr-auto w-fit">
+    <slot />
+</div>
+</template>

app/components/blog/ImageText.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+    image: string,
+    imageRight?: boolean | string
+}>()
+
+let imagePosition = "sm:flex-row";
+if(props.imageRight == true || props.imageRight == "true") imagePosition = "sm:flex-row-reverse"
+</script>
+
+<template>
+<div :class="imagePosition" class="flex mt-5 mb-4 flex-col">
+    <img class="object-contain sm:max-w-[40%] sm:max-h-[350px] max-h-[300px] max-w-[80%] m-auto" :src="props.image" />
+    <p class="self-center ml-5 sm:mt-2 mt-4">
+        <slot />
+    </p>
+</div>
+</template>

app/components/blog/TocLink.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content';
+
+const props = defineProps<{
+    link: TocLink
+}>()
+</script>
+
+<template>
+<li class="mt-1 mb-1"><a :href="`#${link.id}`">{{ link.text }}</a></li>
+<ul class="ml-2 mt-1 mb-1">
+    <BlogTocLink v-for="child in link.children" :link="child" />
+</ul>
+</template>