consistent code examples in CodePreview and markdown

Author: marshallswain

app/components/CodePreview.vue

@@ -11,7 +11,6 @@ const props = defineProps<{
 
 const code = ref('')
 const highlightedCode = ref('')
-const copied = ref(false)
 
 // Extract filename from path for display
 const filename = computed(() => {
@@ -22,112 +21,119 @@ const filename = computed(() => {
 const language = computed(() => {
   const extension = props.path.split('.').pop() || 'text'
   const languageMap: Record<string, string> = {
-    'ts': 'typescript',
-    'js': 'javascript',
-    'vue': 'vue',
-    'svelte': 'svelte', // Add this line
-    'html': 'html',
-    'css': 'css',
-    'json': 'json',
-    'md': 'markdown',
-    'tsx': 'tsx',
-    'jsx': 'jsx'
+    ts: 'typescript',
+    js: 'javascript',
+    vue: 'vue',
+    svelte: 'svelte', // Add this line
+    html: 'html',
+    css: 'css',
+    json: 'json',
+    md: 'markdown',
+    tsx: 'tsx',
+    jsx: 'jsx'
   }
   return languageMap[extension] || 'text'
 })
 
 async function loadCodeAndComponent() {
   try {
     // Look in the app/.cache/examples directory
-    const files = import.meta.glob([
-      '../code/examples/**/*.ts',
-      '../code/examples/**/*.tsx',
-      '../code/examples/**/*.js',
-      '../code/examples/**/*.jsx',
-      '../code/examples/**/*.vue',
-      '../code/examples/**/*.svelte',
-      '../code/examples/**/*.md'
-    ], { 
-      as: 'raw',
-      eager: false
-    })
+    const files = import.meta.glob(
+      [
+        '../code/examples/**/*.ts',
+        '../code/examples/**/*.tsx',
+        '../code/examples/**/*.js',
+        '../code/examples/**/*.jsx',
+        '../code/examples/**/*.vue',
+        '../code/examples/**/*.svelte',
+        '../code/examples/**/*.md'
+      ],
+      {
+        as: 'raw',
+        eager: false
+      }
+    )
 
     // Normalize the path by removing prefixes and cleaning up
     let normalizedPath = props.path
       .replace(/^@\/examples\//, '') // Remove @/examples/ prefix
       .replace(/^\.\.\/\.\.\/\.\.\/\.\.\/examples\//, '') // Remove ../../../../examples/ prefix
       .replace(/^examples\//, '') // Remove examples/ prefix if present
       .replace(/^\/*|\/*$/g, '') // Remove leading/trailing slashes
-    
+
     // Try to find the file with the normalized path
-    let fileKey = Object.keys(files).find(key => 
-      key.includes(`/${normalizedPath}`)
-    )
-    
+    let fileKey = Object.keys(files).find((key) => key.includes(`/${normalizedPath}`))
+
     // If not found, try to find it by just the filename
     if (!fileKey) {
       const filename = normalizedPath.split('/').pop()
-      fileKey = Object.keys(files).find(key => key.endsWith(`/${filename}`))
+      fileKey = Object.keys(files).find((key) => key.endsWith(`/${filename}`))
     }
-    
+
     if (!fileKey) {
-      throw new Error(`File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`)
+      throw new Error(
+        `File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`
+      )
     }
 
     const loadRaw = files[fileKey]
     if (!loadRaw) {
-      throw new Error(`File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`)
+      throw new Error(
+        `File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`
+      )
     }
     code.value = await loadRaw()
-    
+
     highlightedCode.value = await codeToHtml(code.value, {
       lang: language.value,
-      theme: 'github-dark',
+      theme: 'github-dark'
     })
   } catch (error) {
     console.error(`Error loading file: ${props.path}`, error)
     code.value = `// Error loading file: ${props.path}\n// ${error instanceof Error ? error.message : String(error)}`
     highlightedCode.value = await codeToHtml(code.value, {
       lang: 'javascript',
-      theme: 'github-dark',
+      theme: 'github-dark'
     })
   }
 }
 
-async function copyCode() {
-  await navigator.clipboard.writeText(code.value)
-  copied.value = true
-  setTimeout(() => (copied.value = false), 1500)
-}
-
 onMounted(loadCodeAndComponent)
 
-watch(() => props.path, () => {
-  loadCodeAndComponent()
-})
+watch(
+  () => props.path,
+  () => {
+    loadCodeAndComponent()
+  }
+)
 </script>
 
 <template>
-  <div class="code-preview my-6">
-    <div class="relative">
-      <Badge sm neutral class="absolute top-2 left-2 font-mono text-base-content/50">
-        {{ filename }}
-      </Badge>
-      <Button xs neutral class="absolute top-2 right-4 cursor-pointer" @click="copyCode">
-        {{ copied ? 'Copied!' : 'Copy' }}
-      </Button>
-      <pre class="overflow-x-auto rounded-lg p-4" v-html="highlightedCode" />
-    </div>
-  </div>
+  <ProsePre :code="code" :filename="filename" class="code-preview">
+    <div v-html="highlightedCode" />
+  </ProsePre>
 </template>
 
 <style>
+.code-preview > div > pre {
+  padding-left: 0;
+}
+.code-preview {
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.code-preview pre code span.line:not(:last-of-type):empty {
+  display: block;
+  margin-bottom: 1.5rem;
+}
 pre.shiki {
   background-color: var(--tw-prose-pre-bg) !important;
   color: var(--tw-prose-pre-code) !important;
+  font-size: 16px;
 }
 pre.shiki code {
   display: flex;
   flex-direction: column;
 }
-</style>
+</style>

app/components/content/ProsePre.vue

@@ -21,31 +21,29 @@ const copied = ref(false)
 
 const copyToClipboard = async () => {
   if (!props.code) return
-  
+
   try {
     await navigator.clipboard.writeText(props.code)
     copied.value = true
     setTimeout(() => {
       copied.value = false
-    }, 2000)
+    }, 1500)
   } catch (err) {
     console.error('Failed to copy text: ', err)
   }
 }
 </script>
 
 <template>
-  <span class="relative group">
-    <pre :class="$props.class"><slot /></pre>
-    <button
-      v-if="code"
-      @click="copyToClipboard"
-      class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-base-300 hover:bg-base-200 text-base-content p-2 rounded-md text-sm"
-      :class="{ 'opacity-100': copied }"
-      :title="copied ? 'Copied!' : 'Copy to clipboard'"
-    >
-      <Icon v-if="!copied" name="feather:copy" size="16" />
-      <Icon v-else name="feather:check" size="16" />
-    </button>
-  </span>
+  <div class="my-6">
+    <div class="relative">
+      <Badge v-if="filename" sm neutral class="absolute top-2.5 left-2 font-mono text-base-content/50">
+        {{ filename }}
+      </Badge>
+      <Button v-if="code" xs neutral class="absolute top-2 right-4 cursor-pointer" @click="copyToClipboard">
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </Button>
+      <pre :class="['overflow-x-auto rounded-lg p-4', filename ? 'pt-12' : '', $props.class]"><slot /></pre>
+    </div>
+  </div>
 </template>