@visualizevalue/mint-app-base 0.1.116 → 0.1.117

package/app.config.ts

@@ -41,6 +41,13 @@ export default defineAppConfig({
         address: '0x901603b81aae5eb2a1dc3cec77280bf6e4727bfe',
         description: 'The default renderer',
       },
+      {
+        component: 'Markdown',
+        name: 'Markdown Renderer',
+        version: 1n,
+        address: '0x31e819f6a2fdf77af11648b6d571416aa48eb650',
+        description: 'Renders markdown content as onchain text artifacts',
+      },
       {
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',

package/components/CodeEditor.client.vue

@@ -17,6 +17,7 @@ import CodeMirror from 'codemirror-editor-vue3'
 import 'codemirror/addon/display/placeholder.js'
 import 'codemirror/mode/htmlmixed/htmlmixed.js'
 import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/markdown/markdown.js'
 
 const props = defineProps({
   modelValue: String,

package/components/Mint/Detail.client.vue

@@ -2,12 +2,14 @@
 import Animation from './Renderer/Animation.client.vue'
 import Base from './Renderer/Base.client.vue'
 import Code from './Renderer/Code.client.vue'
+import Markdown from './Renderer/Markdown.client.vue'
 import P5 from './Renderer/P5.client.vue'
 
 const components = {
   Animation,
   Base,
   Code,
+  Markdown,
   P5,
 }
 

package/components/Mint/Renderer/Markdown.client.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="mint-renderer-markdown">
+    <div class="fields">
+      <FormInput v-model="name" :placeholder="$t('mint.base.title_placeholder')" required />
+      <FormInput v-model="description" :placeholder="$t('mint.base.description_placeholder')" />
+    </div>
+
+    <CodeEditor v-model="markdown" mode="text/x-markdown" :placeholder="$t('mint.markdown.placeholder')" class="full" />
+  </div>
+</template>
+
+<script setup>
+import { watchDebounced } from '@vueuse/core'
+import { getMarkdownSvgUri, getMarkdownHtmlUri } from '~/utils/markdown'
+
+const { artifact, image, animationUrl, name, description } = useCreateMintData()
+
+const markdown = ref('')
+
+const updatePreview = () => {
+  if (!markdown.value) {
+    image.value = ''
+    animationUrl.value = ''
+    return
+  }
+
+  image.value = getMarkdownSvgUri(name.value || '', markdown.value)
+  animationUrl.value = getMarkdownHtmlUri(markdown.value)
+}
+watchDebounced([markdown, name], updatePreview, { debounce: 500, maxWait: 3000 })
+
+// The MarkdownRenderer contract stores raw markdown bytes (not ABI-encoded).
+watchEffect(() => {
+  artifact.value = markdown.value
+})
+</script>
+
+<style>
+.mint-renderer-markdown {
+  padding: 0 !important;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  width: 100%;
+
+  >.fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+    padding: var(--spacer);
+    border: var(--border);
+    border-radius: var(--card-border-radius);
+  }
+
+  >.code-editor {
+    border: var(--border);
+    border-top: none;
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
+    min-height: 24rem;
+  }
+}
+</style>

package/locales/en.json

@@ -54,6 +54,9 @@
             "static": "Static",
             "script": "Script"
         },
+        "markdown": {
+            "placeholder": "Write your markdown here..."
+        },
         "p5": {
             "static": "Static",
             "script": "P5 Script"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.116",
+  "version": "0.1.117",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/pages/[id]/[collection]/[tokenId].vue

@@ -18,12 +18,13 @@ const load = async () => {
   try {
     await store.fetchToken(collection.value.address, route.params.tokenId)
   } catch (e) {
-    navigateTo({ name: 'id-collection' }, { replace: true })
+    console.debug(`Error`, e, `Redirecting to collection`)
+    return navigateTo({ name: 'id-collection' }, { replace: true })
   }
 
   loading.value = false
 }
 
 onMounted(() => load())
-watch(route, () => load())
+watch(() => route.params.tokenId, () => load())
 </script>

package/pages/[id]/[collection].vue

@@ -22,7 +22,7 @@ const load = async () => {
       throw new Error('Invalid owner')
     }
   } catch (e) {
-    navigateTo({ name: 'id' }, { replace: true })
+    return navigateTo({ name: 'id' }, { replace: true })
   }
 
   loading.value = false

package/utils/markdown.ts

@@ -0,0 +1,50 @@
+const MAX_PREVIEW_LENGTH = 800
+
+const escapeXml = (str: string) => str
+  .replace(/&/g, '&')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&apos;')
+
+const toBase64DataUri = (mime: string, content: string) =>
+  `data:${mime};base64,${btoa(unescape(encodeURIComponent(content)))}`
+
+/**
+ * Generate an SVG preview matching the on-chain MarkdownRenderer output.
+ */
+export const getMarkdownSvg = (title: string, content: string) => {
+  const truncated = content.length > MAX_PREVIEW_LENGTH
+    ? content.slice(0, MAX_PREVIEW_LENGTH) + '...'
+    : content
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">` +
+    `<rect width="400" height="400" fill="#111"/>` +
+    `<text x="20" y="36" font-family="monospace" font-size="18" font-weight="bold" fill="white">${escapeXml(title)}</text>` +
+    `<line x1="20" y1="50" x2="380" y2="50" stroke="#333" stroke-width="1"/>` +
+    `<foreignObject x="20" y="60" width="360" height="320">` +
+      `<div xmlns="http://www.w3.org/1999/xhtml" style="` +
+        `font-family:monospace;font-size:12px;color:#999;` +
+        `white-space:pre-wrap;word-break:break-word;` +
+        `overflow:hidden;height:320px;` +
+        `mask-image:linear-gradient(to bottom,black 60%,transparent 100%);` +
+        `-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%)` +
+      `">${escapeXml(truncated)}</div>` +
+    `</foreignObject>` +
+  `</svg>`
+}
+
+export const getMarkdownSvgUri = (title: string, content: string) =>
+  toBase64DataUri('image/svg+xml', getMarkdownSvg(title, content))
+
+/**
+ * Generate a simple HTML preview for the markdown content.
+ */
+export const getMarkdownHtml = (content: string) =>
+  `<!DOCTYPE html><html><head><meta charset="utf-8"><style>` +
+  `*{margin:0;padding:0;box-sizing:border-box}` +
+  `body{font-family:monospace;font-size:14px;color:#999;background:#111;padding:2rem;white-space:pre-wrap;word-break:break-word}` +
+  `</style></head><body>${escapeXml(content)}</body></html>`
+
+export const getMarkdownHtmlUri = (content: string) =>
+  toBase64DataUri('text/html', getMarkdownHtml(content))