Feature: PMarkdownRenderer

.vscode/typescript.code-snippets

@@ -0,0 +1,14 @@
+{
+	"Web worker": {
+		"prefix": "worker",
+		"body": [
+			"const handleMessage = (message: MessageEvent<unknown>): void => {",
+			"  self.postMessage(message)",
+			"}",
+			"",
+			"self.onmessage = handleMessage",
+			"export default {}"
+		],
+		"description": "Creates a basic web worker with snippets for receiving and posting messages to the main thread."
+	}
+}

demo/App.vue

@@ -12,7 +12,7 @@
       </PGlobalSidebar>
     </template>
     <ContextSidebar v-if="showMenu" class="app__sidebar" />
-    <router-view class="w-full mx-auto py-10 px-6 lg:px-8" />
+    <router-view class="w-full" />
   </div>
 </template>
 

demo/components/ComponentPage.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="component-page">
-    <!-- make sticky header -->
     <div class="component-page__heading">
-      <HashLink>{{ title }}</HashLink>
+      <p-hash-link class="component-page__heading-link" :hash="title">
+        {{ title }}
+      </p-hash-link>
       <p-link to="https://www.prefect.io/">
         Documentation
       </p-link>
@@ -20,19 +21,27 @@
       <div class="component-page__demos">
         <template v-for="demo in validDemosArray" :key="demo.title">
           <div class="component-page__demo">
-            <HashLink v-if="demo.slotKey && validDemosArray.length > 1" :hash="demo.slotKey">
+            <p-hash-link v-if="demo.slotKey && validDemosArray.length > 1" class="component-page__heading-link" :hash="demo.slotKey">
               {{ demo.title }}
-            </HashLink>
+            </p-hash-link>
 
             <template v-if="demo.description">
               <div class="component-page__demo-description">
                 {{ demo.description }}
               </div>
             </template>
 
-            <ResizableSection>
-              <slot :name="demo.slotKey" />
-            </ResizableSection>
+            <template v-if="useResizable">
+              <ResizableSection>
+                <slot :name="demo.slotKey" />
+              </ResizableSection>
+            </template>
+
+            <template v-else>
+              <p-card class="component-page__demo-card">
+                <slot :name="demo.slotKey" />
+              </p-card>
+            </template>
           </div>
         </template>
       </div>
@@ -63,7 +72,6 @@
   import { asArray, kebabCase } from '@/utilities'
   import { computed, useSlots } from 'vue'
   import { useRoute } from 'vue-router'
-  import HashLink from '@/demo/components/HashLink.vue'
   import ResizableSection from '@/demo/components/ResizableSection.vue'
   import { getRouteRecordIndex, routeRecordsFlat } from '@/demo/router/routeRecordsFlat'
 
@@ -76,6 +84,7 @@
     title: string,
     description?: string,
     demos?: DemoSection | DemoSection[],
+    useResizable?: boolean,
   }>()
 
   const slots = useSlots()
@@ -108,15 +117,25 @@
 <style>
 .component-page { @apply
   max-w-full
+  relative
 }
 
 .component-page__heading { @apply
   flex
   justify-between
   text-sm
+  sticky
+  bg-background
+  dark:bg-background-400
+  top-16
+  lg:top-0
+  px-6
+  py-6
+  lg:px-8
+  z-10
 }
 
-.component-page__heading .hash-link { @apply
+.component-page__heading .component-page__heading-link { @apply
   text-2xl
 }
 
@@ -125,7 +144,7 @@
   text-lg
 }
 
-.component-page__demo .hash-link { @apply
+.component-page__heading-link { @apply
   text-base
 }
 
@@ -148,6 +167,20 @@
   text-sm
 }
 
+.component-page__demo,
+.component-page__description,
+.component-page__demo-description { @apply
+  max-w-full
+  mx-auto
+  py-6
+  px-6
+  lg:px-8
+}
+
+.component-page__demo-card { @apply
+  bg-transparent
+}
+
 .component-page__navigation { @apply
   flex
   justify-between