Store the demo doc as a URL query param

davidmyersdev · davidmyersdev · commit a9d0e7d5427e · 2024-09-20T15:00:26.000-04:00
diff --git a/examples/demo.ts b/examples/demo.ts
@@ -12,8 +12,11 @@ declare global {
   }
 }
 
+const url = new URL(window.location.href)
+const doc = url.searchParams.get('doc') ?? example
+
 window.ink = ink(document.getElementById('app')!, {
-  doc: example,
+  doc,
   files: {
     clipboard: true,
     dragAndDrop: true,
@@ -29,6 +32,13 @@ window.ink = ink(document.getElementById('app')!, {
     },
     injectMarkup: true,
   },
+  hooks: {
+    afterUpdate: (text) => {
+      url.searchParams.set('doc', text)
+
+      window.history.replaceState(null, '', url)
+    },
+  },
   interface: {
     images: true,
     lists: true,
@@ -55,3 +65,5 @@ const toggleTheme = (theme: Values.Appearance) => {
 window.auto = toggleTheme.bind(undefined, 'auto')
 window.dark = toggleTheme.bind(undefined, 'dark')
 window.light = toggleTheme.bind(undefined, 'light')
+
+toggleTheme('light')
diff --git a/index.html b/index.html
@@ -19,10 +19,18 @@
 
         margin: 0;
       }
+
+      @media (prefers-color-scheme: dark) {
+        .auto {
+          background-color: #222;
+          color: white;
+        }
+      }
     </style>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/examples/web-component.ts"></script>
+    <script type="module" src="/examples/demo.ts"></script>
+    <!-- <script type="module" src="/examples/web-component.ts"></script> -->
   </body>
 </html>
