@dyrected/nuxt 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @dyrected/nuxt
+
+This is the nuxt package/app for the Dyrected ecosystem.

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,15 @@
+import { DyrectedConfig } from '@dyrected/core';
+import { NuxtModule } from '@nuxt/schema';
+
+interface ModuleOptions extends DyrectedConfig {
+    /**
+     * Mount the Dyrected API on this path.
+     * @default '/api/dyrected'
+     */
+    apiBase?: string;
+}
+
+declare const module: NuxtModule<ModuleOptions>;
+
+export { module as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,15 @@
+import { DyrectedConfig } from '@dyrected/core';
+import { NuxtModule } from '@nuxt/schema';
+
+interface ModuleOptions extends DyrectedConfig {
+    /**
+     * Mount the Dyrected API on this path.
+     * @default '/api/dyrected'
+     */
+    apiBase?: string;
+}
+
+declare const module: NuxtModule<ModuleOptions>;
+
+export { module as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "@dyrected/nuxt",
+  "configKey": "dyrected",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,31 @@
+import { defineNuxtModule, createResolver, addServerHandler, addComponent, addImports } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@dyrected/nuxt",
+    configKey: "dyrected"
+  },
+  defaults: {
+    apiBase: "/api/dyrected"
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addServerHandler({
+      route: `${options.apiBase}/**`,
+      handler: resolver.resolve("./runtime/server/handler")
+    });
+    addComponent({
+      name: "DyrectedMedia",
+      filePath: resolver.resolve("./runtime/components/DyrectedMedia.vue")
+    });
+    addImports([
+      { name: "useDyrected", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedDoc", from: resolver.resolve("./runtime/composables/useDyrected") }
+    ]);
+    nuxt.options.runtimeConfig.public.dyrected = {
+      baseUrl: options.apiBase
+    };
+  }
+});
+
+export { module as default };

package/dist/runtime/components/DyrectedImage.vue

@@ -0,0 +1,29 @@
+<template>
+  <img
+    v-if="typeof media === 'string'"
+    :src="media"
+    :width="width || 500"
+    :height="height || 500"
+    :alt="alt || ''"
+    v-bind="$attrs"
+  />
+  <img
+    v-else
+    :src="media.url"
+    :width="width || media.width || 500"
+    :height="height || media.height || 500"
+    :alt="alt || media.filename"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Media } from '@dyrected/sdk';
+
+defineProps<{
+  media: Media | string;
+  width?: number | string;
+  height?: number | string;
+  alt?: string;
+}>();
+</script>

package/dist/runtime/components/DyrectedMedia.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="youtubeId" class="dyrected-media-video" style="position: relative; padding-bottom: 56.25%; height: 0;">
+    <iframe
+      :src="`https://www.youtube.com/embed/${youtubeId}`"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    />
+  </div>
+
+  <img
+    v-else-if="isImage"
+    :src="url"
+    :width="width || 500"
+    :height="height || 500"
+    :alt="alt || filename"
+    v-bind="$attrs"
+  />
+
+  <video
+    v-else-if="isVideo"
+    :src="url"
+    controls
+    :width="width || 500"
+    :height="height || 500"
+    class="dyrected-media-video"
+    v-bind="$attrs"
+  />
+
+  <div v-else class="dyrected-media-file">
+    <slot name="fallback">
+      <a :href="url" target="_blank" rel="noopener noreferrer" class="dyrected-file-link">
+        Download {{ filename || 'File' }}
+      </a>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Media } from '@dyrected/sdk';
+
+const props = defineProps<{
+  media: Media | string;
+  width?: number | string;
+  height?: number | string;
+  alt?: string;
+}>();
+
+const url = computed(() => typeof props.media === 'string' ? props.media : props.media.url);
+const filename = computed(() => typeof props.media === 'string' ? '' : props.media.filename);
+const mimeType = computed(() => typeof props.media === 'string' ? null : props.media.mimeType);
+
+const youtubeId = computed(() => {
+  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+  const match = url.value.match(regExp);
+  return (match && match[2].length === 11) ? match[2] : null;
+});
+
+const isImage = computed(() => {
+  return mimeType.value?.startsWith('image/') || url.value.match(/\.(jpg|jpeg|png|gif|webp|avif|svg)$/i);
+});
+
+const isVideo = computed(() => {
+  return mimeType.value?.startsWith('video/') || url.value.match(/\.(mp4|webm|ogg)$/i);
+});
+</script>

package/dist/runtime/composables/useDyrected.d.ts

@@ -0,0 +1,4 @@
+export declare const useDyrected: () => import("@dyrected/sdk").DyrectedClient;
+export declare const useDyrectedDoc: (collection: string, slug: string, options?: {
+    depth?: number;
+}) => Promise<any>;

package/dist/runtime/composables/useDyrected.mjs

@@ -0,0 +1,13 @@
+import { createClient } from "@dyrected/sdk";
+import { useRuntimeConfig } from "#app";
+export const useDyrected = () => {
+  const config = useRuntimeConfig().public.dyrected;
+  const client = createClient({
+    baseUrl: config.baseUrl
+  });
+  return client;
+};
+export const useDyrectedDoc = (collection, slug, options) => {
+  const client = useDyrected();
+  return client.collection(collection).findOne(slug, options);
+};

package/dist/runtime/server/handler.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<Response>>;
+export default _default;

package/dist/runtime/server/handler.mjs

@@ -0,0 +1,8 @@
+import { eventHandler, toRequest } from "h3";
+import { createDyrectedApp } from "@dyrected/core";
+import { useRuntimeConfig } from "#imports";
+export default eventHandler(async (event) => {
+  const config = useRuntimeConfig().dyrected;
+  const app = createDyrectedApp(config);
+  return app.fetch(toRequest(event.req));
+});

package/dist/types.d.mts

@@ -0,0 +1,8 @@
+
+import type {  } from './module.js'
+
+
+
+
+
+export type { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+
+import type {  } from './module'
+
+
+
+
+
+export type { default } from './module'

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@dyrected/nuxt",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "^3.11.2",
+    "h3": "2.0.1-rc.22",
+    "@dyrected/core": "0.0.1",
+    "@dyrected/sdk": "0.0.1"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.11.2",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^19.2.3",
+    "nuxt": "^3.11.2",
+    "vue": "^3.5.34"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build build --watch"
+  }
+}