@dargmuesli/nuxt-vio 1.0.0

package/README.md

@@ -0,0 +1,73 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your theme
+
+Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your theme during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your theme itself.
+
+## Distributing your theme
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-theme
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-theme'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

package/composables/useFavicons.ts

@@ -0,0 +1,47 @@
+export const useFavicons = () => {
+  useHead({
+    link: [
+      {
+        href: '/assets/static/favicon/apple-touch-icon.png?v=bOXMwoKlJr',
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+      },
+      {
+        href: '/assets/static/favicon/favicon-16x16.png?v=bOXMwoKlJr',
+        rel: 'icon',
+        sizes: '16x16',
+        type: 'image/png',
+      },
+      {
+        href: '/assets/static/favicon/favicon-32x32.png?v=bOXMwoKlJr',
+        rel: 'icon',
+        sizes: '32x32',
+        type: 'image/png',
+      },
+      {
+        href: '/favicon.ico',
+        rel: 'icon',
+        type: 'image/x-icon',
+      },
+      {
+        href: '/assets/static/favicon/site.webmanifest?v=bOXMwoKlJr',
+        rel: 'manifest',
+      },
+      {
+        color: '#202020',
+        href: '/assets/static/favicon/safari-pinned-tab.svg?v=bOXMwoKlJr',
+        rel: 'mask-icon',
+      },
+      {
+        href: '/favicon.ico?v=bOXMwoKlJr',
+        rel: 'shortcut icon',
+      },
+    ],
+    meta: [
+      {
+        content: '/assets/static/favicon/browserconfig.xml?v=bOXMwoKlJr',
+        name: 'msapplication-config',
+      },
+    ],
+  })
+}

package/composables/useHost.ts

@@ -0,0 +1,9 @@
+export const useHost = () => {
+  if (process.server) {
+    const event = useRequestEvent()
+
+    return getHost(event.node.req)
+  } else {
+    return location.host
+  }
+}

package/nuxt.config.ts

@@ -0,0 +1,3 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+})

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@dargmuesli/nuxt-vio",
+  "version": "1.0.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "19"
+  },
+  "packageManager": "pnpm@8.0.0",
+  "files": [
+    "composables",
+    "server",
+    "utils",
+    "nuxt.config.ts"
+  ],
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi prepare & nuxi dev .playground",
+    "build": "nuxi build .playground",
+    "generate": "nuxi generate .playground",
+    "preview": "nuxi preview .playground",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@nuxtjs/eslint-config-typescript": "12.0.0",
+    "eslint": "8.37.0",
+    "nuxt": "3.3.3",
+    "typescript": "5.0.3"
+  }
+}

package/server/api/healthcheck.ts

@@ -0,0 +1,7 @@
+import { defineEventHandler } from 'h3'
+
+export default defineEventHandler((event) => {
+  const { res } = event.node
+  res.setHeader('Content-Type', 'text/plain')
+  res.end('OK')
+})

package/server/middleware/headers.ts

@@ -0,0 +1,13 @@
+import { defineEventHandler } from 'h3'
+
+export default defineEventHandler((event) => {
+  const { res } = event.node
+
+  res.setHeader('Permissions-Policy', '')
+
+  // // Disabled until there is better browser support (https://caniuse.com/?search=report-to)
+  // res.setHeader(
+  //   'Report-To',
+  //   '{"group":"default","max_age":31536000,"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}],"include_subdomains":true}'
+  // )
+})

package/utils/constants.ts

@@ -0,0 +1 @@
+export const CYPRESS_BASE_URL = 'http://localhost:3000'

package/utils/networking.ts

@@ -0,0 +1,7 @@
+import { IncomingMessage } from 'node:http'
+
+export const getHost = (req: IncomingMessage) => {
+  if (!req.headers.host) throw new Error('Host header is not given!')
+
+  return req.headers.host
+}

package/utils/routing.ts

@@ -0,0 +1,2 @@
+export const append = (path: string, pathToAppend: string) =>
+  path + (path.endsWith('/') ? '' : '/') + pathToAppend

package/utils/testing.ts

@@ -0,0 +1,7 @@
+export const isTesting = () => process.client && window.Cypress
+
+declare global {
+  interface Window {
+    Cypress: any
+  }
+}