feat: Adding some generic and reusable composables

Author: luksak

composables/useCamelize.js

@@ -0,0 +1,17 @@
+export default function () {
+  function camelize(str) {
+    // Split the string at all dash characters
+    return (
+      str
+        .split('-')
+        // Convert first char to upper case for each word
+        .map(a => a[0].toUpperCase() + a.substring(1))
+        // Join all the strings back together
+        .join('')
+    )
+  }
+
+  return {
+    camelize,
+  }
+}

composables/useMenuItems.js

@@ -0,0 +1,27 @@
+import { queryCollection, useAsyncData } from '@nuxt/content'
+
+export default function () {
+  async function fetchMenuItems(menu) {
+    return await queryCollection('menu')
+      .where('stem', '=', `menu/${menu}`)
+      .first()
+  }
+  async function fetchMenus() {
+    return await queryCollection('menu').all()
+  }
+
+  async function fetchMenuItemsAsync(menu) {
+    const path = `menu/${menu}`
+    return await useAsyncData(
+      path,
+      async () =>
+        await queryCollection('menu').where('stem', '=', path).first(),
+    )
+  }
+
+  return {
+    fetchMenuItems,
+    fetchMenus,
+    fetchMenuItemsAsync,
+  }
+}

composables/useRenderedMarkdown.js

@@ -0,0 +1,14 @@
+import { useNuxtApp } from '#app'
+
+export default function () {
+  function renderedMarkdown(text) {
+    // @TODO This hack can be removed once this has been merged:
+    // https://github.com/nuxt/content/pull/3320
+    let cleanedText = text
+    cleanedText = cleanedText.replaceAll('\\n', '\n')
+    return useNuxtApp().$mdit.render(cleanedText)
+  }
+  return {
+    renderedMarkdown,
+  }
+}

package.json

@@ -19,5 +19,9 @@
     "nuxt-svg-icon-sprite": "2.0.2",
     "typescript": "^5.9.2",
     "vue": "latest"
+  },
+  "dependencies": {
+    "lazysizes": "^5.3.2",
+    "markdown-it": "^14.1.0"
   }
 }

plugins/lazysizes.client.js

@@ -0,0 +1,13 @@
+import lazySizes from 'lazysizes'
+import { defineNuxtPlugin } from '#app'
+
+import 'lazysizes/plugins/parent-fit/ls.parent-fit'
+
+window.lazySizesConfig = window.lazySizesConfig || {}
+window.lazySizesConfig.expFactor = 10
+window.lazySizesConfig.loadMode = 3
+window.lazySizesConfig.loadHidden = false
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide('lazySizes', lazySizes)
+})

plugins/markdownIt.js

@@ -0,0 +1,46 @@
+import MarkdownIt from 'markdown-it'
+import { defineNuxtPlugin } from '#app'
+
+const markdownIt = new MarkdownIt({
+  html: true,
+  xhtmlOut: false,
+  breaks: true,
+  langPrefix: 'language-',
+  linkify: true,
+  typographer: true,
+  quotes: '“”‘’',
+})
+
+markdownIt.linkify.set({ fuzzyEmail: false })
+
+// Remember old renderer, if overridden, or proxy to default renderer
+const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+  return self.renderToken(tokens, idx, options)
+}
+
+markdownIt.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+  // If you are sure other plugins can't add `target` - drop check below
+  const aIndex = tokens[idx].attrIndex('target')
+  const relIndex = tokens[idx].attrIndex('rel')
+
+  if (aIndex < 0) {
+    tokens[idx].attrPush(['target', '_blank'])
+  }
+  else {
+    tokens[idx].attrs[aIndex][1] = '_blank'
+  }
+
+  if (relIndex < 0) {
+    tokens[idx].attrPush(['rel', 'noopener noreferrer'])
+  }
+  else {
+    tokens[idx].attrs[relIndex][1] = 'noopener noreferrer'
+  }
+
+  // pass token to default renderer.
+  return defaultRender(tokens, idx, options, env, self)
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide('mdit', markdownIt)
+})