Honk

renoirb · Sep 29, 2024 · d3fd36d · d3fd36d
1 parent f0477e5
commit d3fd36d
Show file tree

Hide file tree

Showing 17 changed files with 211 additions and 116 deletions.
diff --git a/components/global/AppFooter.vue b/components/global/AppFooter.vue
@@ -30,13 +30,15 @@
             <NuxtLink to="/ligne-editoriale"> Ligne éditoriale </NuxtLink>
           </dd>
           <dd>
-            <NuxtLink to="/projets"> Projets </NuxtLink>
+            <NuxtLink to="/projects"> Projets </NuxtLink>
           </dd>
           <dd>
-            <NuxtLink to="/glossary"> Glossary </NuxtLink>
+            <NuxtLink to="/glossary" lang="en"> Glossary </NuxtLink>
           </dd>
           <dd>
-            <NuxtLink to="/code-review"> Code-Review notes </NuxtLink>
+            <NuxtLink to="/code-review" lang="en">
+              Code-Review&nbsp;notes
+            </NuxtLink>
           </dd>
         </dl>
       </div>

diff --git a/content/blog/2024/03/managing-email-aliases-with-protonmail-automatic-sorting.md b/content/blog/2024/03/managing-email-aliases-with-protonmail-automatic-sorting.md
@@ -13,6 +13,12 @@ categories:
 tags:
   - on-front-page
   - archiving
+keywords:
+  - ProtonPass
+  - SimpleLogin
+  - inbox
+  - Sieve mail filtering language rule
+description: Protect inbox against spam and phishing and sort automatically
 preamble:
   disable: true
   text:
@@ -53,8 +59,7 @@ of these aliases, I've developed a Sieve script that automatically sorts
 incoming emails into appropriate folders.
 
 
-<code-group>
-  <code-block label="Sieve" active>
+<code-block label="Sieve">
 
 ```sieve
 require ["include", "environment", "variables", "relational", "comparator-i;ascii-numeric", "spamtest"];
@@ -88,8 +93,7 @@ if address :matches :domain ["to", "cc", "bcc"] "alias.example.org" {
 }
 ```
 
-  </code-block>
-</code-group>
+</code-block>
 
 This Sieve script effectively sorts incoming emails based on their alias
 pattern. Emails with aliases like `[email protected]` or

diff --git a/lib/index.ts b/lib/index.ts
@@ -1,3 +1,4 @@
 export * from './consts'
 export * from './model'
 export * from './runtime'
+export type * from './types'
diff --git a/lib/model/content/model.ts b/lib/model/content/model.ts
@@ -62,19 +62,22 @@ export interface IFrontMatterCallToAction {
 }
 
 export interface INuxtContentResult extends IBaseNuxtContentResult {
+  callToAction?: IFrontMatterCallToAction
   canonical?: string
-  preamble?: IFrontMatterPreambleInnerDocument
-  coverImage?: IFrontMatterCoverImageInnerDocument
   categories: string[]
   cover?: string
   coverAlt?: string
   coverCaption?: string
+  coverImage?: IFrontMatterCoverImageInnerDocument
   date: string
+  description?: string
+  keywords?: string[]
   locale: string
   oldArticle?: string
+  preamble?: IFrontMatterPreambleInnerDocument
+  redirect?: string
   tags: string[]
   title: string
-  callToAction?: IFrontMatterCallToAction
 }
 
 export type INuxtContentPrevNext = Pick<

diff --git a/lib/runtime/text-utils.ts b/lib/runtime/text-utils.ts
@@ -4,3 +4,16 @@
 export const trimText = (stringContents: TemplateStringsArray): string => {
   return stringContents.join(' ').replace(/[\n\s]/g, ' ')
 }
+
+let increment = 0
+
+export const sanitizeHtmlTagAttributeExpectingOneWord = (
+  input: string,
+  maxSuffixLength = 15,
+): string => {
+  return input
+    .toLocaleLowerCase()
+    .replace(/[\s\t\n]/g, '-')
+    .padEnd(maxSuffixLength, `${increment++}`)
+    .substring(0, maxSuffixLength)
+}
diff --git a/lib/runtime/vue-meta.ts b/lib/runtime/vue-meta.ts
@@ -1,17 +1,10 @@
 import { MetaInfo } from 'vue-meta'
 import { Context } from '@nuxt/types'
-
-export type IVueMetaHeadMetaInfoArray = Pick<MetaInfo, 'meta'>['meta']
-
-export type IVueMetaHeadLinkArray = Pick<MetaInfo, 'link'>['link']
-
-export interface IAppIdentity {
-  email: string
-  name: string
-  description: string
-  homepage: string
-  version: string
-}
+import type { IAppIdentity, Flatten, RefreshMetaInfo } from '../types'
+import {
+  sanitizeHtmlTagAttributeExpectingOneWord,
+  CreateVueMetaInfoOptions,
+} from '.'
 
 /* eslint-disable camelcase */
 const identityFallbackValues: IAppIdentity = {
@@ -53,3 +46,67 @@ export const fromNuxtContextToAppIdentity = (ctx: Context): IAppIdentity => {
   }
   return out
 }
+
+// #TODO-Meta-Equiv-Redirect: USE this logic.
+export const createVueMetaInfo = ({
+  locale,
+  title = '',
+  description = '',
+  keywords = [],
+  redirect = '',
+}: CreateVueMetaInfoOptions): MetaInfo => {
+  const htmlAttrs: MetaInfo['htmlAttrs'] = {}
+  const meta: (Flatten<MetaInfo['meta']> | RefreshMetaInfo)[] = []
+
+  if (typeof locale === 'string' && locale !== '') {
+    Reflect.set(htmlAttrs, 'lang', locale)
+  }
+
+  const out: MetaInfo = {
+    htmlAttrs,
+  }
+
+  if (typeof title === 'string' && title !== '') {
+    Reflect.set(out, 'title', title)
+  }
+
+  if (Array.isArray(keywords) && keywords.length > 0) {
+    const content = [...new Set([...keywords])].join(', ')
+    meta.push({
+      hid: `keywords-${sanitizeHtmlTagAttributeExpectingOneWord(
+        content.replace(/[.,]/g, ''),
+      )}`,
+      name: 'keywords',
+      content,
+    })
+  }
+
+  if (typeof description === 'string' && description !== '') {
+    const content = description
+    meta.push({
+      hid: `description-${sanitizeHtmlTagAttributeExpectingOneWord(
+        content.replace(/[.,]/g, ''),
+      )}`,
+      name: 'description',
+      content,
+    })
+  }
+
+  if (typeof redirect === 'string' && redirect !== '') {
+    // <meta http-equiv="refresh" content="0; url=http://example.com/" />
+    // See related ../../../../components/global/GitHubPagesRedirect.vue
+    const redirectMeta: RefreshMetaInfo = {
+      hid: 'refresh',
+      'http-equiv': 'refresh',
+      content: `5; url=${redirect}`,
+      //       ^^^ Redirect quietely to different page.
+    }
+    meta.push(redirectMeta)
+  }
+
+  if (meta.length > 0) {
+    Reflect.set(out, 'meta', meta)
+  }
+
+  return out
+}
diff --git a/lib/types.ts b/lib/types.ts
@@ -0,0 +1,29 @@
+import type { MetaInfo } from 'vue-meta'
+
+export type Flatten<T> = T extends any[] ? T[number] : T
+
+export type RefreshMetaInfo = {
+  content: string
+  hid: string
+  'http-equiv': 'refresh'
+}
+
+export type IVueMetaHeadMetaInfoArray = Pick<MetaInfo, 'meta'>['meta']
+
+export type IVueMetaHeadLinkArray = Pick<MetaInfo, 'link'>['link']
+
+export interface IAppIdentity {
+  email: string
+  name: string
+  description: string
+  homepage: string
+  version: string
+}
+
+export interface CreateVueMetaInfoOptions {
+  locale: string
+  title: string
+  description?: string
+  keywords?: string[]
+  redirect?: string
+}
diff --git a/pages/blog/_year/_month/_slug.vue b/pages/blog/_year/_month/_slug.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pages__blog__year__month__slug--item">
+  <div :key="content.slug" class="pages__blog__year__month__slug--item">
     <app-very-old-article
       :preamble="content.preamble"
       :locale="content.locale || 'en-CA'"
@@ -78,6 +78,7 @@
     INuxtContentPrevNext,
     INuxtContentResult,
     IPrettyfiedTemporalDate,
+    createVueMetaInfo,
   } from '~/lib'
   export interface Data {
     canonical: null | string
@@ -182,62 +183,21 @@
       abbreviatize,
     },
     head() {
-      const {
-        description = '',
-        keywords = [],
-        locale = 'en-CA',
-        redirect = '',
-        title,
-      } = this.content
-
-      const meta: Record<string, string>[] = []
-
-      if (keywords.length > 0) {
-        meta.push({
-          hid: 'keywords',
-          name: 'keywords',
-          content: [...new Set([...keywords])].join(', '),
-        })
-      }
-
-      if (description !== '') {
-        meta.push({
-          hid: 'description',
-          name: 'description',
-          content: description,
-        })
-      }
-
+      let redirect = this.content?.redirect ?? ''
       if (redirect !== '') {
-        // <meta http-equiv="refresh" content="0; url=http://example.com/" />
-        // #TODO-Meta-Equiv-Redirect: Move this logic so that we can re-use elsewhere.
+        // #TODO-Meta-Equiv-Redirect
         // See related ../../../../components/global/GitHubPagesRedirect.vue
-        meta.push({
-          hid: 'refresh',
-          // @ts-ignore
-          'http-equiv': 'refresh',
-          content: `5; url=/blog/${this.year}/${this.month}/${redirect}`,
-          //       ^^^ Redirect quietely to different page.
-        })
-      }
-
-      const htmlAttrs = {
-        lang: locale,
-      }
-
-      const out = {
-        htmlAttrs,
-        title,
-        meta,
+        redirect = `/blog/${this.year}/${this.month}/${redirect}`
       }
+      const out = createVueMetaInfo({ ...this.content, redirect })
       return out
     },
   })
 </script>
 
 <style scoped>
   .canonical-link {
-    @apply text-sm underline ml-5;
+    @apply ml-5 text-sm underline;
     color: var(--color-container-text-link);
   }
   .canonical-link::before {

diff --git a/pages/glossary.vue b/pages/glossary.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="pages__glossary--parent">
+  <section>
     <div
-      class="pages-glossary--parent--top justify-items-stretch sm:grid-cols-2 sm:grid-flow-row md:grid-flow-col-dense grid grid-cols-1 gap-4"
+      class="justify-items-stretch sm:grid-cols-2 sm:grid-flow-row md:grid-flow-col-dense grid grid-cols-1 gap-4"
     >
       <app-bread-crumb
         v-if="!!$route && $route.params && $route.matched"
@@ -18,19 +18,20 @@
       "
       class="title page-title mb-4 font-serif text-2xl italic"
     >
-      <h1>{{ pageTitle }}</h1>
+      <h1>{{ title }}</h1>
     </div>
-    <div class="pages-glossary--parent--bottom">
-      <nuxt-child :q="q" />
+    <div>
+      <nuxt-child />
     </div>
   </section>
 </template>
 
 <script lang="ts">
   import Vue from 'vue'
+  import { createVueMetaInfo } from '~/lib'
   export interface Data {
-    q: string
-    pageTitle: string
+    title: string
+    contentFirstDirName: string
   }
   export interface Methods {}
   export interface Computed {}
@@ -44,26 +45,21 @@
       if (typeof name !== 'string') {
         return error({ statusCode: 404, message: `Not Found` })
       }
-      const dataModelName = name.replace('-slug', '')
-      const pageTitle =
-        dataModelName.charAt(0).toUpperCase() + dataModelName.slice(1)
+      const contentFirstDirName = name.replace('-slug', '')
+      const title =
+        contentFirstDirName.charAt(0).toUpperCase() +
+        contentFirstDirName.slice(1)
 
-      return {
-        pageTitle,
-      }
-    },
-    data() {
-      return {
-        q: '',
-        pageTitle: '',
-      }
-    },
-    head() {
-      const title = this.pageTitle
       const out = {
         title,
+        contentFirstDirName,
       }
       return out
     },
+    head() {
+      const title = this.title
+      const out = createVueMetaInfo({ title })
+      return out
+    },
   })
 </script>