feat: 🎸 navigate per month and title inheritance

assets/styles/main.css

@@ -40,20 +40,31 @@
   }
   & .taxonomy-items {
     & li {
-      @apply inline-block bg-gray-200 rounded-full text-xs;
+      @apply inline-block rounded-full text-xs;
+      color: var(--color-taxonomy-text);
+      background-color: var(--color-taxonomy-bg);
     }
-    & li.hoverized:hover {
-      @apply bg-gray-500;
-      color: white;
+    & li.is-hoverizable {
+      &.taxonomy-items-active,
+      &:hover {
+        color: var(--color-taxonomy-text-hover);
+        background-color: var(--color-taxonomy-bg-hover);
+      }
+      &.taxonomy-items-active {
+        @apply underline;
+      }
     }
   }
+  &.taxonomy-not-hoverizable li {
+    opacity: 0.25;
+  }
+  &.taxonomy-not-hoverizable:hover li {
+    opacity: 1;
+  }
 }
 
-.document {
-  & .title {
-    @apply italic font-serif text-2xl;
-    color: var(--color-title);
-  }
+.page-title {
+  color: var(--color-title);
 }
 
 kbd {

assets/styles/vars.css

@@ -12,6 +12,10 @@
   --color-tertiary: #cb7723;
   --bg-secondary: #e5e5e5;
   --border-color: #aaa;
+  --color-taxonomy-bg: #bdbdbd;
+  --color-taxonomy-bg-hover: #959595;
+  --color-taxonomy-text-hover: #fff;
+  --color-taxonomy-text: #313131;
   --color-container-text-link: var(--color-primary);
   --color-container-text-link-hover: var(--color-secondary);
 }
@@ -29,6 +33,10 @@
   --color-secondary: #fdf9f3;
   --bg-secondary: #214761;
   --border-color: #061a17;
+  --color-taxonomy-bg: #bdbdbd;
+  --color-taxonomy-bg-hover: #959595;
+  --color-taxonomy-text-hover: #fff;
+  --color-taxonomy-text: #313131;
   --color-container-text-link: var(--bg-secondary);
   --color-container-text-link-hover: var(--color-secondary);
 }

components/AppArticleTags.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="taxonomy">
+  <div
+    class="taxonomy"
+    :class="{ 'taxonomy-not-hoverizable': !link, 'taxonomy-hoverizable': link }"
+  >
     <strong
       v-if="labeler.hasLabel"
       :id="labeler.label.id"
@@ -12,7 +15,7 @@
         v-for="tag in tags"
         :key="tag"
         class="px-2 py-1 mb-3 mr-3"
-        :class="{ hoverized: link }"
+        :class="{ 'is-hoverizable': link }"
       >
         <!-- eslint-disable vue/no-v-html -->
         <span v-if="link === false" v-html="abbreviatize(tag)" />

components/AppMonthsInYear.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="taxonomy">
+    <ol class="taxonomy-items flex flex-wrap text-center list-none">
+      <li
+        v-for="[monthNumber, monthName] in months"
+        :key="monthName"
+        class="is-hoverizable w-auto px-2 py-1 mb-2 mr-2"
+        :class="{
+          'taxonomy-items-active': currentMonth && currentMonth === monthNumber,
+        }"
+      >
+        <nuxt-link
+          :to="{
+            path: `/blog/${year}/${monthNumber}`,
+          }"
+        >
+          <time :datetime="`${year}-${monthNumber}`" :lang="locale">
+            {{ monthName }}
+          </time>
+        </nuxt-link>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from '@nuxtjs/composition-api'
+  import { getMonthNames, IMonthNames, isValidYear } from '~/lib'
+  export interface Props {
+    year: string
+    currentMonth: string
+  }
+  export interface Data {
+    months: IMonthNames
+  }
+  export interface Computed {}
+  export default defineComponent<Props, Data, Computed>({
+    props: {
+      year: {
+        type: String,
+        default: () => String(new Date().getFullYear()),
+        validate: isValidYear,
+      },
+      currentMonth: {
+        type: String,
+        default: '01',
+      },
+    },
+    setup() {
+      const locale = ref('fr-CA')
+      const months = getMonthNames(locale.value)
+      return {
+        months,
+        locale,
+      }
+    },
+  })
+</script>

components/blog/BlogListModelByYear.vue

@@ -2,6 +2,7 @@
   <div class="blog-list-model-by-year">
     <div v-for="inThatYear in byYears" :key="`buckets-year-${inThatYear[0]}`">
       <nuxt-link
+        v-if="showYear"
         :to="{
           path: `/blog/${inThatYear[0]}`,
           query: { q: q ? q : undefined },
@@ -21,7 +22,7 @@
                 date: content.date,
               },
             }"
-            class="font-serif text-lg italic"
+            class="font-serif text-xl italic"
             v-html="abbreviatize(content.title)"
           />
           <div
@@ -42,7 +43,7 @@
       <div class="h-5 -ml-10" style="background-color: var(--bg)" />
     </div>
     <div v-if="byYears.length < 1">
-      <p class="py-3 font-serif text-lg italic">
+      <p class="font-serif text-lg italic">
         Looks like I haven’t written anything
       </p>
     </div>
@@ -68,6 +69,7 @@
   export interface Props {
     contents: INuxtContentResult[]
     q: string
+    showYear: boolean
   }
   export default Vue.extend<Data, Methods, Computed, Props>({
     name: 'BlogListModelByYear' /* blog-list-model-by-year */,
@@ -80,6 +82,10 @@
         type: String,
         default: '',
       },
+      showYear: {
+        type: Boolean,
+        default: true,
+      },
     },
     computed: {
       byYears(): INuxtContentIndexResultByYears {

lib/model/date.ts

@@ -172,3 +172,48 @@ export const transformToPrettyfiedTemporalDate = (
     prettified,
   }
 }
+
+export const isValidYear = (year: string): boolean => {
+  let out = false
+  try {
+    const attempt = extractYearFromDateString(`${year}-01-01`)
+    out = typeof attempt === 'number'
+  } catch (e) {
+    // ...
+  }
+  return out
+}
+
+export type IMonthNames = [string, string][]
+
+/**
+ * List month names in current locale or as per DateTimeFormatOptions
+ */
+export type IMonthNamesFn = (
+  locale: string,
+  options?: Intl.DateTimeFormatOptions,
+) => IMonthNames
+
+export const getMonthNames: IMonthNamesFn = (
+  locale = 'en-CA',
+  options?: Intl.DateTimeFormatOptions,
+) => {
+  const out: [string, string][] = []
+  const formatOptions: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    ...(options || {}),
+  }
+
+  const temporalDate = Temporal.now.date()
+  // @ts-ignore — check if this is really there or not
+  const { monthsInYear = 12 } = temporalDate
+  const { year } = temporalDate.getFields()
+
+  for (let month = 1; month <= monthsInYear; month++) {
+    const thisMonth = temporalDate.with({ year, month })
+    const formatted = thisMonth.toLocaleString(locale, formatOptions)
+    out.push([String(month).padStart(2, '0'), formatted])
+  }
+
+  return out
+}

nuxt.config.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import { NuxtConfig } from '@nuxt/types'
 import { PRODUCTION_BASE_PATH, fromProcessEnvToAppIdentity, IS_CI } from './lib'
 import tailwindConfig from './tailwind.config'
@@ -67,21 +68,21 @@ const main: NuxtConfig = {
    */
   components: true,
   router: {
-    middleware: ['redirects', 'init'],
+    middleware: ['init', 'redirects'],
     base: IS_CI ? PRODUCTION_BASE_PATH : '/',
   },
   /*
    ** Nuxt.js dev-modules
    */
   buildModules: [
-    'nuxt-purgecss',
-    '@nuxtjs/tailwindcss',
     // Doc: https://github.com/nuxt-community/color-mode-module
     '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
     '@nuxt/typescript-build',
     // Doc: https://github.com/nuxt-community/stylelint-module
     '@nuxtjs/stylelint-module',
     '@nuxtjs/composition-api',
+    'nuxt-purgecss',
   ],
   /*
    ** Nuxt.js modules
@@ -127,7 +128,7 @@ const main: NuxtConfig = {
   purgeCSS: {
     mode: 'postcss',
     enabled: isProduction,
-    whitelist: [/^\w+-mode$/, /token$/, 'taxonomy', 'document'],
+    whitelist: ['dark-mode', 'light-mode', /token$/, 'taxonomy', 'document'],
   },
   server: {
     host: '0.0.0.0',
@@ -150,6 +151,14 @@ const main: NuxtConfig = {
       font: () => '[path][name].[ext]',
       video: () => '[path][name].[ext]',
     },
+    // @ts-ignore
+    postcss: {
+      plugins: {
+        'postcss-import': {},
+        tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
+        'postcss-nested': {},
+      },
+    },
   },
   generate: {
     dir: 'dist',

package.json

@@ -108,6 +108,7 @@
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "tailwindcss": "^1.8.5",
+    "tailwindcss-dark-mode": "1.1.5",
     "ts-jest": "^26.1.3",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0",

pages/blog.vue

@@ -23,6 +23,9 @@
         />
       </form>
     </div>
+    <div class="title page-title mb-4 font-serif text-2xl italic">
+      <h1>{{ pageTitle }}</h1>
+    </div>
     <div class="pages-blog--parent--bottom">
       <nuxt-child :q="q" />
     </div>
@@ -35,7 +38,9 @@
     q: string
   }
   export interface Methods {}
-  export interface Computed {}
+  export interface Computed {
+    pageTitle: string
+  }
   export interface Props {}
   export default Vue.extend<Data, Methods, Computed, Props>({
     components: {
@@ -46,6 +51,16 @@
         q: '',
       }
     },
+    computed: {
+      pageTitle(): string {
+        let pageTitle = 'Blog'
+        const q = this.q
+        if (q !== '') {
+          pageTitle += `, search results for «${q}»`
+        }
+        return pageTitle
+      },
+    },
     watch: {
       q: {
         immediate: true,
@@ -75,5 +90,12 @@
         this.$router.push('/blog?q=' + this.q)
       },
     },
+    head() {
+      const title = this.pageTitle
+      const out = {
+        title,
+      }
+      return out
+    },
   })
 </script>