full running

packages/nuxt/app/router.scrollBehavior.ts

@@ -0,0 +1,3 @@
+export default function () {
+  return { x: 0, y: 0 }
+}

packages/nuxt/assets/global.ts

@@ -2,15 +2,24 @@ import type { ITheme } from '~/server/theme'
 
 export const THEME: ITheme = JSON.parse(process.env.THEME!)
 
-export const api = async (
+export async function api<T = any>(
   url: string,
   opts: RequestInit & {
     params?: Record<string, any>
   } = {}
-) => {
+): Promise<
+  | T
+  | {
+      error: {
+        statusCode: number
+        message: unknown
+      }
+    }
+> {
   if (!url.startsWith('/api')) {
     return {
       error: {
+        statusCode: 500,
         message: 'malformed API route',
       },
     }
@@ -24,6 +33,9 @@ export const api = async (
   baseURL.pathname = url
   Object.entries(opts.params || {}).map(([k, v]) => {
     if (v) {
+      /**
+       * Arrays will be comma separated, and empty strings will be discarded.
+       */
       baseURL.searchParams.set(k, v)
     }
   })
@@ -34,8 +46,25 @@ export const api = async (
     /**
      * Does not rely on `r.ok`, but rather, errorhandler
      */
-    return r.json()
+    const data = await r.json()
-  } catch (_) {}
+
+    /**
+     * Transform to Nuxt-compatible style
+     */
+    if (data.error) {
+      return {
+        error: {
+          statusCode: r.status,
+          message: data,
+        },
+      }
+    }
+
+    return data
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+  }
 
   return {
     error: {

packages/nuxt/assets/remark42.ts

@@ -0,0 +1,48 @@
+/* eslint-disable camelcase */
+
+import { THEME } from './global'
+
+export type Theme = 'light' | 'dark'
+
+export interface CommentsConfig {
+  host: string
+  site_id: string
+  url?: string
+  max_shown_comments?: number
+  theme?: Theme
+  page_title?: string
+  node?: string | HTMLElement
+  locale?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  __colors__?: any
+}
+
+declare global {
+  interface Window {
+    remark_config: CommentsConfig
+    REMARK42: {
+      changeTheme(theme: Theme): void
+      destroy?: () => void
+      createInstance: (
+        remark_config: CommentsConfig
+      ) =>
+        | {
+            changeTheme(theme: Theme): void
+            destroy(): void
+          }
+        | undefined
+    }
+  }
+}
+
+if (process.browser && THEME?.comment?.remark42) {
+  ;(function (c) {
+    for (let i = 0; i < c.length; i++) {
+      const d = document
+      const s = d.createElement('script')
+      s.src = THEME.comment.remark42.host + '/web/' + c[i] + '.js'
+      s.defer = true
+      ;(d.head || d.body).appendChild(s)
+    }
+  })(['embed'])
+}

packages/nuxt/layouts/default.vue

@@ -4,8 +4,11 @@
       <h1>{{ theme.title }}</h1>
 
       <nav>
-        <ul v-if="theme.nav">
+        <ul>
-          <li v-for="(n, i) in theme.nav" :key="i">
+          <li>
+            <nuxt-link to="/">Home</nuxt-link>
+          </li>
+          <li v-for="(n, i) in theme.nav || []" :key="i">
             <nuxt-link v-if="n.to" :to="n.to">{{ n.name }}</nuxt-link>
             <a v-else :href="n.href" target="_blank" rel="noopener">
               {{ n.name }}

packages/nuxt/nuxt.config.ts

@@ -1,5 +1,4 @@
 import { NuxtConfig } from '@nuxt/types'
-
 import { getTheme } from './server/theme'
 
 const config = async (): Promise<NuxtConfig> => {
@@ -29,6 +28,16 @@ const config = async (): Promise<NuxtConfig> => {
         },
       ],
       script: [
+        ...(theme.analytics?.plausible
+          ? [
+              {
+                src: 'https://plausible.io/js/plausible.js',
+                async: true,
+                defer: true,
+                'data-domain': theme.analytics?.plausible,
+              },
+            ]
+          : []),
         {
           src:
             'https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js',
@@ -45,7 +54,7 @@ const config = async (): Promise<NuxtConfig> => {
     css: [],
 
     // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-    plugins: ['~/plugins/format.ts'],
+    plugins: ['~/plugins/format.ts', '~/plugins/remark42.client.js'],
 
     // Auto import components (https://go.nuxtjs.dev/config-components)
     components: true,

packages/nuxt/pages/post/_.vue

@@ -39,12 +39,17 @@
         </nuxt-link>
       </span>
     </section>
+
+    <footer v-if="remark42settings">
+      <div ref="remark42" />
+    </footer>
   </section>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'nuxt-property-decorator'
 import { api, THEME } from '~/assets/global'
+import '~/assets/remark42'
 
 @Component<PostPage>({
   async fetch() {
@@ -60,6 +65,23 @@ import { api, THEME } from '~/assets/global'
     }
 
     this.post = r
+
+    setTimeout(() => {
+      if (process.browser) {
+        if (window.REMARK42) {
+          this.initRemark42()
+        } else {
+          window.addEventListener('REMARK42::ready', () => {
+            this.initRemark42()
+          })
+        }
+      }
+    }, 1000)
+  },
+  beforeDestroy() {
+    if (this.remark42Instance) {
+      this.remark42Instance.destroy()
+    }
   },
 })
 export default class PostPage extends Vue {
@@ -73,6 +95,23 @@ export default class PostPage extends Vue {
   } | null = null
 
   theme = THEME
+
+  remark42settings = THEME.comment?.remark42 || null
+  remark42Instance: any = null
+
+  initRemark42() {
+    if (process.browser && this.remark42settings && window.REMARK42) {
+      if (this.remark42Instance) {
+        this.remark42Instance.destroy()
+      }
+
+      this.remark42Instance = window.REMARK42.createInstance({
+        node: this.$refs.remark42 as HTMLElement,
+        host: this.remark42settings.host,
+        site_id: this.remark42settings.siteId,
+      })
+    }
+  }
 }
 </script>