@wpnuxt/blocks 0.0.2

package/README.md

@@ -0,0 +1,84 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add my-module
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

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,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@wpnuxt/blocks",
+  "version": "0.0.2",
+  "configKey": "wpNuxtBlocks",
+  "builder": {
+    "@nuxt/module-builder": "0.8.1",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,75 @@
+import fs from 'node:fs';
+import { defineNuxtModule, createResolver, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit';
+import { genDynamicImport } from 'knitwork';
+
+const name = "@wpnuxt/blocks";
+const version = "0.0.2";
+
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    configKey: "wpNuxtBlocks"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  async setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const resolveRuntimeModule = (path) => resolve("./runtime", path);
+    console.log("!!! Setup @wpnuxt/blocks module");
+    nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
+    addComponentsDir({
+      path: resolveRuntimeModule("./components/blocks"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
+    const _layers = [...nuxt.options._layers].reverse();
+    for (const layer of _layers) {
+      const srcDir = layer.config.srcDir;
+      const blockComponents = resolve(srcDir, "components/blocks");
+      const dirStat = await fs.promises.stat(blockComponents).catch(() => null);
+      if (dirStat && dirStat.isDirectory()) {
+        nuxt.hook("components:dirs", (dirs) => {
+          dirs.unshift({
+            path: blockComponents,
+            global: true,
+            pathPrefix: false,
+            prefix: ""
+          });
+        });
+      }
+    }
+    addComponent({ name: "BlockComponent", filePath: resolveRuntimeModule("./components/BlockComponent") });
+    addComponent({ name: "BlockInfo", filePath: resolveRuntimeModule("./components/BlockInfo") });
+    addComponent({ name: "BlockRenderer", filePath: resolveRuntimeModule("./components/BlockRenderer") });
+    const componentsContext = { components: [] };
+    nuxt.hook("components:extend", (newComponents) => {
+      const moduleBlocksDir = resolveRuntimeModule("./components/blocks");
+      const userBlocksDir = (nuxt.options.srcDir || nuxt.options.rootDir) + "/components/blocks";
+      componentsContext.components = newComponents.filter((c) => {
+        if (c.filePath.startsWith(moduleBlocksDir) || c.filePath.startsWith(userBlocksDir)) {
+          return true;
+        }
+        return false;
+      });
+    });
+    addTemplate({
+      write: true,
+      filename: "wpnuxt/blocks.mjs",
+      getContents({ options }) {
+        const components = options.getComponents().filter((c) => !c.island).flatMap((c) => {
+          const exp = c.export === "default" ? "c.default || c" : `c['${c.export}']`;
+          const isClient = c.mode === "client";
+          const definitions = [];
+          definitions.push(`export const ${c.pascalName} = ${genDynamicImport(c.filePath)}.then(c => ${isClient ? `createClientOnly(${exp})` : exp})`);
+          return definitions;
+        });
+        return components.join("\n");
+      },
+      options: { getComponents: () => componentsContext.components }
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/BlockComponent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { pascalCase } from 'scule'
+import { resolveComponent, useRuntimeConfig } from '#imports'
+import type { EditorBlock } from '#wpnuxt/blocks'
+
+const manifest = await import('#wpnuxt/blocks').catch(() => ({}))
+
+const config = useRuntimeConfig()
+
+const props = defineProps<{
+  block: EditorBlock
+}>()
+const findComponentToRender = async () => {
+  // only process top level blocks
+  if (props.block.parentClientId === null || props.block.parentClientId === undefined) {
+    if (config.public.wpNuxt.blocks && props.block.name) {
+      const componentName = pascalCase(props.block.name)
+      const componentImporter = manifest[componentName]
+      if (typeof componentImporter === 'function') {
+        return await componentImporter()
+      }
+    }
+    return resolveComponent('EditorBlock')
+  } else {
+    return undefined
+  }
+}
+const componentToRender = await findComponentToRender()
+</script>
+
+<template>
+  <div>
+    <component
+      :is="componentToRender"
+      v-if="componentToRender"
+      :block="block"
+    />
+  </div>
+</template>

package/dist/runtime/components/BlockRenderer.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import BlockComponent from './BlockComponent.vue'
+import type { EditorBlock } from '#wpnuxt/blocks'
+
+defineProps<{
+  blocks: EditorBlock[]
+}>()
+</script>
+
+<template>
+  <div>
+    <BlockComponent
+      v-for="block, index in blocks"
+      :key="index"
+      :block="block"
+    />
+  </div>
+</template>

package/dist/runtime/components/blocks/CoreButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { CoreButton } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: CoreButton
+}>()
+</script>
+
+<template>
+  <UButton
+    :label="block.attributes.text"
+    :to="block.attributes.url"
+  />
+</template>

package/dist/runtime/components/blocks/CoreButtons.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { CoreButtons, EditorBlock } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: CoreButtons
+}>()
+</script>
+
+<template>
+  <div
+    v-for="innerBlock, index in block.innerBlocks"
+    :key="index"
+  >
+    <CoreButton
+      v-if="innerBlock.name === 'core/button'"
+      :block="innerBlock"
+    />
+    <EditorBlock
+      v-else
+      :block="innerBlock"
+    />
+  </div>
+</template>

package/dist/runtime/components/blocks/CoreGallery.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { CoreGallery, CoreImage } from '#wpnuxt/blocks'
+
+const props = defineProps<{
+  block: CoreGallery
+}>()
+const imageBlocks: CoreImage[] = []
+props.block?.innerBlocks?.forEach((innerBlock) => {
+  if (innerBlock && innerBlock.name === 'core/image') {
+    const imgBlock = innerBlock as CoreImage
+    imageBlocks.push(imgBlock)
+  }
+})
+</script>
+
+<template>
+  <div class="columns-2 md:columns-3 lg:columns-4 mx-[-8px] mb-20">
+    <div
+      v-for="(imgBlock, index) in imageBlocks"
+      :key="index"
+      class="px-0 md:px-1"
+    >
+      <div
+        v-if="imgBlock"
+        class="galleryImgWrapper rounded-lg overflow-hidden relative mb-4 md:mb-6  shadow-md hover:shadow-xl"
+      >
+        <CoreImage
+          :block="imgBlock"
+          class="rounded-lg cursor-pointer w-full"
+          width="300"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.galleryImgWrapper{overflow:hidden;position:relative}.galleryImgWrapper img{height:auto;margin:0;max-width:100%;transition:all .5s}.galleryImgWrapper:hover img{transform:scale(1.02)}
+</style>

package/dist/runtime/components/blocks/CoreImage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { getRelativeImagePath } from '../../util/images'
+import type { CoreImage } from '#graphql-operations'
+
+const props = defineProps<{
+  block: CoreImage
+}>()
+const imgUrl = getRelativeImagePath(props.block?.attributes?.url)
+</script>
+
+<template>
+  <div>
+    <NuxtImg
+      v-if="imgUrl"
+      :src="imgUrl"
+      :alt="block?.attributes?.alt"
+      :width="block?.attributes?.width"
+      :height="block?.attributes?.height"
+    />
+    <div
+      v-else
+      v-sanitize="block?.renderedHtml"
+    />
+  </div>
+</template>

package/dist/runtime/components/blocks/CoreParagraph.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { CoreParagraph } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: CoreParagraph
+}>()
+</script>
+
+<template>
+  <div>
+    <p v-sanitize="block?.attributes?.content" />
+  </div>
+</template>

package/dist/runtime/components/blocks/CoreQuote.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { CoreQuote, CoreParagraph } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: CoreQuote
+}>()
+</script>
+
+<template>
+  <blockquote
+    v-for="innerBlock, index in block.innerBlocks"
+    :key="index"
+  >
+    <CoreParagraph
+      v-if="innerBlock.name === 'core/paragraph'"
+      class="text-sm text-primary-500"
+      :block="innerBlock"
+    />
+  </blockquote>
+</template>

package/dist/runtime/components/blocks/EditorBlock.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { EditorBlock } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: EditorBlock
+}>()
+</script>
+
+<template>
+  <p v-sanitize="block.renderedHtml" />
+</template>

package/dist/runtime/queries/fragments/CoreButton.fragment.gql

@@ -0,0 +1,26 @@
+fragment CoreButton on CoreButton {
+  attributes {
+    anchor
+    backgroundColor
+    borderColor
+    className
+    cssClassName
+    fontFamily
+    fontSize
+    gradient
+    linkClassName
+    linkTarget
+    lock
+    metadata
+    placeholder
+    rel
+    style
+    tagName
+    text
+    textAlign
+    textColor
+    title
+    type
+    url
+  }
+}

package/dist/runtime/queries/fragments/CoreGallery.fragment.gql

@@ -0,0 +1,31 @@
+fragment CoreGallery on CoreGallery {
+  attributes {
+    align
+    allowResize
+    anchor
+    backgroundColor
+    caption
+    className
+    columns
+    fixedHeight
+    gradient
+    ids
+    imageCrop
+    layout
+    linkTarget
+    linkTo
+    lock
+    metadata
+    randomOrder
+    shortCodeTransforms
+    style
+    images {
+      alt
+      caption
+      fullUrl
+      id
+      link
+      url
+    }
+  }
+}

package/dist/runtime/queries/fragments/CoreImage.fragment.gql

@@ -0,0 +1,29 @@
+fragment CoreImage on CoreImage {
+  attributes {
+    align
+    alt
+    anchor
+    aspectRatio
+    borderColor
+    className
+    cssClassName
+    height
+    href
+    id
+    linkClass
+    linkDestination
+    linkTarget
+    lock
+    rel
+    scale
+    sizeSlug
+    src
+    style
+    title
+    url
+    width
+    caption
+    lightbox
+    metadata
+  }
+}

package/dist/runtime/queries/fragments/CoreParagraph.fragment.gql

@@ -0,0 +1,20 @@
+fragment CoreParagraph on CoreParagraph {
+  attributes {
+    align
+    anchor
+    backgroundColor
+    className
+    content
+    cssClassName
+    direction
+    dropCap
+    fontFamily
+    fontSize
+    gradient
+    lock
+    metadata
+    placeholder
+    style
+    textColor
+  }
+}

package/dist/runtime/queries/fragments/CoreQuote.fragment.gql

@@ -0,0 +1,18 @@
+fragment CoreQuote on CoreQuote {
+  attributes {
+    anchor
+    backgroundColor
+    citation
+    className
+    cssClassName
+    fontFamily
+    fontSize
+    gradient
+    layout
+    lock
+    metadata
+    style
+    textColor
+    value
+  }
+}

package/dist/runtime/queries/fragments/EditorBlock.fragment.gql

@@ -0,0 +1,21 @@
+#import '~/.queries/fragments/CoreButton.fragment.gql';
+#import '~/.queries/fragments/CoreGallery.fragment.gql';
+#import '~/.queries/fragments/CoreImage.fragment.gql';
+#import '~/.queries/fragments/CoreParagraph.fragment.gql';
+#import '~/.queries/fragments/CoreQuote.fragment.gql';
+
+fragment EditorBlock on EditorBlock {
+  apiVersion
+  blockEditorCategoryName
+  clientId
+  cssClassNames
+  isDynamic
+  name
+  parentClientId
+  renderedHtml
+  ...CoreButton
+  ...CoreGallery
+  ...CoreImage
+  ...CoreParagraph
+  ...CoreQuote
+}

package/dist/runtime/queries/fragments/EditorBlocks.fragment.gql

@@ -0,0 +1,10 @@
+#import '~/.queries/fragments/EditorBlock.fragment.gql';
+
+fragment EditorBlocks on NodeWithEditorBlocks {
+  editorBlocks {
+    ...EditorBlock
+    innerBlocks {
+      ...EditorBlock
+    }
+  }
+}

package/dist/runtime/queries/fragments/Page.fragment.gql

@@ -0,0 +1,17 @@
+#import '~/.queries/fragments/ContentNode.fragment.gql';
+#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
+#import '~/.queries/fragments/EditorBlocks.fragment.gql';
+
+fragment Page on Page {
+  ...ContentNode
+  ...NodeWithFeaturedImage
+  content
+  isFrontPage
+  isPostsPage
+  isPreview
+  isPrivacyPage
+  isRestricted
+  isRevision
+  title
+  ...EditorBlocks
+}

package/dist/runtime/queries/fragments/Post.fragment.gql

@@ -0,0 +1,13 @@
+#import "~/.queries/fragments/NodeWithExcerpt.fragment.gql";
+#import '~/.queries/fragments/ContentNode.fragment.gql';
+#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
+#import '~/.queries/fragments/EditorBlocks.fragment.gql';
+
+fragment Post on Post {
+  ...NodeWithExcerpt
+  ...ContentNode
+  ...NodeWithFeaturedImage
+  content
+  title
+  ...EditorBlocks
+}

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/types.d.mts

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

package/dist/types.d.ts

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@wpnuxt/blocks",
+  "version": "0.0.2",
+  "description": "WPNuxt Blocks",
+  "repository": "wpnuxt/wpnuxt-blocks",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack; release-it --git.tagExclude='*[-edge]*'",
+    "release-edge": "npm run lint; release-it --no-github --preRelease=edge --config .release-it-edge.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.12.4",
+    "@vernaillen/wpnuxt": "^0.6.0-edge.0"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/schema": "^3.12.4",
+    "@nuxt/test-utils": "^3.13.1",
+    "@types/node": "^20.14.11",
+    "changelogen": "^0.5.5",
+    "eslint": "^9.7.0",
+    "nuxt": "^3.12.4",
+    "release-it": "^17.6.0",
+    "typescript": "latest",
+    "vitest": "^2.0.3",
+    "vue-tsc": "^2.0.26"
+  },
+  "peerDependencies": {
+    "knitwork": "^1.1.0",
+    "pathe": "^1.1.2"
+  }
+}