chore: 🤖 abbreviatization, and resume section

- New /resume section reading from source resume.yaml
- Made resume in both YAML/JSON w/ source-code highlighted
- abreviatization for title, tags, alert-box

assets/styles/app-alert-box.css

@@ -0,0 +1,24 @@
+/**
+ * @TODO Fix TailwindCSS’s layer nested syntax?
+ *
+@layer components {
+ */
+.app-alert-box {
+  @apply px-4 py-3 rounded-lg;
+  & a {
+    @apply underline;
+  }
+  & a:hover {
+    @apply text-yellow-900;
+  }
+  & header {
+    @apply font-bold mb-2;
+  }
+  & .disposition-item {
+    @apply py-1;
+  }
+  & .addemdum {
+    @apply py-2;
+  }
+}
+/* } */

assets/styles/main.css

@@ -8,6 +8,7 @@
 @import './vars.css';
 @import './global.css';
 @import './nuxt-content.css';
+@import './app-alert-box.css';
 
 .zone__sandwich {
   & .top {

assets/styles/nuxt-content.css

@@ -82,11 +82,12 @@
 
     color: inherit;
   }
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values */
   & ul {
     list-style-type: disc;
   }
   & ol {
-    @apply italic;
+    @apply italic font-serif font-hairline;
 
     list-style-type: lower-roman;
   }

components/AppArticleTags.vue

@@ -9,39 +9,44 @@
     </strong>
     <ul v-if="tags.length > 0" v-bind="labeler.labelee" class="taxonomy-items">
       <li v-for="tag in tags" :key="tag" class="px-2 py-1 mr-2">
-        <nuxt-link :to="`/blog/tag/${tag}`">{{ tag }}</nuxt-link>
+        <!-- eslint-disable vue/no-v-html -->
+        <nuxt-link :to="`/blog/tag/${tag}`" v-html="abbreviatize(tag)" />
       </li>
     </ul>
-    <span v-else class="taxonomy-items">(...)</span>
+    <span v-else class="taxonomy-items text-xs">(...)</span>
   </div>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
+  import Vue, { PropOptions } from 'vue'
   import {
     INuxtContentResult,
     typeGuardNuxtContentResult,
     Labeler,
     ILabeler,
+    abbreviatize,
+    IAbbreviatize,
   } from '~/lib'
   export interface Data {
     labeler: ILabeler
   }
-  export interface Methods {}
+  export interface Methods {
+    abbreviatize: IAbbreviatize
+  }
   export interface Computed {
     tags: string[]
   }
   export interface Props {
-    document: INuxtContentResult
+    content: INuxtContentResult
   }
   export default Vue.extend<Data, Methods, Computed, Props>({
     name: 'AppArticleTags' /* app-article-tags */,
     props: {
-      document: {
+      content: {
         type: Object,
         validator: typeGuardNuxtContentResult,
         required: true,
-      },
+      } as PropOptions<INuxtContentResult>,
     },
     data() {
       const label = 'Tags'
@@ -52,7 +57,7 @@
     },
     computed: {
       tags(): string[] {
-        const { tags = [] } = this.document
+        const { tags = [] } = this.content
         const _tags = new Set<string>()
         for (const tag of tags) {
           if (typeof tag === 'string' && tag.replace(/[\s\t/]/g, '') !== '') {
@@ -62,5 +67,8 @@
         return Array.from(_tags)
       },
     },
+    methods: {
+      abbreviatize,
+    },
   })
 </script>

components/AppBreadCrumb.vue

@@ -10,12 +10,13 @@
   export interface Data {}
   export interface Computed {}
   export default defineComponent<Props, Data, Computed>({
-    name: 'AppBreadCrumb',
+    name: 'AppBreadCrumb' /* app-bread-crumb */,
     props: {
       route: {
         type: Object,
         validator: typeGuardIsRoute,
         required: true,
+        default: () => ({}),
       },
     },
     render(h): VNode {

components/AppCodeHighlighter.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="nuxt-content-highlight">
+    <!-- eslint-disable vue/no-v-html -->
+    <pre :class="classNames"><slot><code v-html="code" /></slot>
+    <!-- code v-html="$prism(code, language)"></code -->
+    </pre>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { isPrismSupportedLanguage } from '~/lib'
+  export interface Data {}
+  export interface Methods {}
+  export interface Computed {
+    classNames: Record<string, boolean>
+  }
+  export interface Props {
+    language: string
+    code: string
+  }
+  export default Vue.extend<Data, Methods, Computed, Props>({
+    name: 'AppCodeHighlighter' /* app-code-highlighter */,
+    props: {
+      language: {
+        type: String,
+        default: 'javascript',
+        validator: isPrismSupportedLanguage,
+      },
+      code: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      classNames() {
+        const languageClassName = `language-${this.language}`
+        return {
+          [languageClassName]: true,
+        }
+      },
+    },
+    /**
+     * @TODO Either make this work or remove.
+     * Intent is to have HTML already colorized for
+     * static HTML.
+     * Or keep using asyncData and server-side (i.e. at generate) do
+     * any code colorization to HTML from there.
+    async mounted() {
+      const code = this.code
+      const language = this.language
+      let maybe = code
+      const highlighting = () => {
+        maybe = highlight(code, language)
+      }
+      await this.$nextTick(highlighting)
+      console.log('async mounted', { code, maybe }) // eslint-disable-line
+      // this.$refs.code.innerHTML = code
+    },
+    */
+  })
+</script>

components/global/AppAlertBox.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    :class="styleMap.outer"
+    :data-alert-type="alertType"
+    class="disposition-parent app-alert-box"
+    role="alert"
+  >
+    <!--
+      @TODO Figure out a way NOT to do such tag-soup ^
+      styleMap was supposed to be doing this, but PurgeCSS
+      removes them. Gotta fix this before re-using styleMap.
+    -->
+    <!-- eslint-disable vue/no-v-html -->
+    <header
+      v-if="titleTextContent !== ''"
+      class="disposition-item"
+      v-html="abbreviatize(titleTextContent)"
+    />
+    <!-- eslint-disable vue/no-v-html -->
+    <div
+      v-if="messageTextContent !== ''"
+      class="disposition-item"
+      v-html="abbreviatize(messageTextContent)"
+    />
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue, { PropOptions } from 'vue'
+  import {
+    abbreviatize,
+    IAbbreviatize,
+    IAlertType,
+    IStyleMapAlert,
+    styleMapAlert,
+  } from '~/lib'
+  export interface Data {
+    messageTextContent: string
+    titleTextContent: string
+  }
+  export interface Methods {
+    abbreviatize: IAbbreviatize
+  }
+  export interface Computed {
+    styleMap: IStyleMapAlert
+  }
+  export interface Props {
+    title: string
+    message: string
+    alertType: IAlertType
+  }
+  export default Vue.extend<Data, Methods, Computed, Props>({
+    name: 'AppAlertBox' /* app-alert-box */,
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      message: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      alertType: {
+        type: String,
+        required: false,
+        default: 'info',
+      } as PropOptions<IAlertType>,
+    },
+    data() {
+      const messageTextContent = this.message || ''
+      const titleTextContent = this.title || ''
+      return {
+        messageTextContent,
+        titleTextContent,
+      }
+    },
+    computed: {
+      styleMap(): IStyleMapAlert {
+        const alertType: IAlertType = this.alertType
+        const map = styleMapAlert(alertType)
+        return map
+      },
+    },
+    methods: {
+      abbreviatize,
+    },
+  })
+</script>

components/global/AppHeader.vue

@@ -15,21 +15,7 @@
 
 <script lang="ts">
   import Vue from 'vue'
-  import { IAppHeaderNavItems } from '~/lib'
-  const nav: IAppHeaderNavItems[] = [
-    {
-      label: 'Blog',
-      to: '/blog',
-    },
-    {
-      label: 'Projects',
-      to: '/projects',
-    },
-    {
-      label: 'About',
-      to: '/hello',
-    },
-  ]
+  import { IAppHeaderNavItems, appHeaderNav } from '~/lib'
   export interface Data {
     nav: IAppHeaderNavItems[]
   }
@@ -40,7 +26,7 @@
     name: 'AppHeader' /* app-header */,
     data() {
       return {
-        nav,
+        nav: appHeaderNav,
       }
     },
   })

components/global/AppSideBar.vue

@@ -110,7 +110,7 @@
       },
     },
     data() {
-      // TODO: Make sure we get Nuxt context properly (below instead of ts-ignore--ing)
+      /* @TODO Make sure we get Nuxt context properly (below instead of ts-ignore--ing) */
       // @ts-ignore
       const { context = {} } = this.$root || {}
       let appTitle = ''