feat: new blog post

assets/css/main.css

@@ -186,20 +186,20 @@ body {
 
 /* Blog Links */
 
-.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5) a {
+.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5) > a {
   @apply underline font-bold;
 }
 
-.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5) a:hover {
+.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5) > a:hover {
   @apply text-brand_primary_light dark:text-brand_primary_dark;
 }
 
 /* Blog Headings */
 
-.blog-content h2:hover ::after,
-.blog-content h3:hover ::after,
-.blog-content h4:hover ::after,
-.blog-content h5:hover ::after {
+.blog-content *:not(.no-anchor) > h2:hover ::after,
+.blog-content *:not(.no-anchor) > h3:hover ::after,
+.blog-content *:not(.no-anchor) > h4:hover ::after,
+.blog-content *:not(.no-anchor) > h5:hover ::after {
   @apply ml-2 opacity-40 text-brand_secondary_light dark:text-brand_secondary_dark absolute;
   content: '#';
 }

components/content/BackToBasics.vue

@@ -0,0 +1,8 @@
+<!-- components/content/Card.vue -->
+<template>
+  <div
+    class="pb-4 pt-4 mt-6 border-t-2 border-b-2 border-typography_primary_light dark:border-typography_primary_dark blog-content blog-post-text"
+  >
+    <slot />
+  </div>
+</template>

components/content/BasicExpand.vue

@@ -0,0 +1,77 @@
+<!-- components/content/Card.vue -->
+<template>
+  <div
+    class="overflow-hidden border-t border-b mt-4 border-typography_primary_light dark:border-typography_primary_dark"
+  >
+    <div
+      class="py-1 cursor-pointer select-none font-bold basic-expand-header flex no-anchor"
+      @click="() => (open = !open)"
+    >
+      <span
+        :class="[
+          'flex flex-shrink px-1 transition-transform duration-200 w-6 justify-center font-highlight text-lg',
+          open ? 'rotate-180 mb-[2px]' : 'rotate-0',
+        ]"
+      >
+        {{ open ? '-' : '+' }}
+      </span>
+      <component
+        :is="componentType"
+        :id="id"
+        class="flex flex-grow flex-shrink"
+      >
+        {{ heading }}
+      </component>
+    </div>
+
+    <Transition name="expand">
+      <div class="basic-expand-content pb-2" ref="expanded" v-show="open">
+        <slot name="description" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const open = ref(false);
+
+const props = withDefaults(
+  defineProps<{
+    heading?: string;
+    componentType?: string;
+  }>(),
+  { heading: '', componentType: 'h3' }
+);
+
+const id = props.heading
+  .toLowerCase()
+  .replace(/\s+/g, ' ')
+  .replace(/[^\s\w\d]/g, '')
+  .replace(/[^\w\d]/g, '-');
+</script>
+
+<style>
+.expand-enter-active {
+  animation: expand reverse 200ms ease;
+}
+.expand-leave-active {
+  animation: expand 200ms ease;
+}
+@keyframes expand {
+  from {
+    max-height: 600px;
+  }
+  to {
+    max-height: 0px;
+  }
+}
+
+.basic-expand-header > h1,
+.basic-expand-header > h2,
+.basic-expand-header > h3,
+.basic-expand-header > h4,
+.basic-expand-header > h5 {
+  @apply mt-0 mb-0 text-lg;
+}
+</style>

components/content/ProseCode.vue

@@ -61,6 +61,12 @@ const languageMap: Record<string, { text: string }> = {
   hcl: {
     text: 'Terraform',
   },
+  docker: {
+    text: 'Docker',
+  },
+  yaml: {
+    text: 'YAML',
+  },
 };
 
 const languageText = computed(() =>

nuxt.config.ts

@@ -140,7 +140,9 @@ export default defineNuxtConfig({
         'bash',
         'python',
         'html',
+        'yaml',
         'hcl',
+        'docker',
       ],
     },
     markdown: {

tailwind.config.js

@@ -84,6 +84,9 @@ module.exports = {
       maxWidth: {
         '8xl': '88rem',
         '9xl': '96rem'
+      },
+      transitionProperty: {
+        'max-height': 'max-height'
       }
     },
   },