Example markdown

Author: platypii

src/example.js

@@ -0,0 +1,17 @@
+export const demoMarkdown = `# s3collab
+
+Edit a document with anyone, in real time. No sign-up, no servers -- just a static page and an S3 bucket.
+
+Share the link and start typing on the left. Your changes show up here on the right, for everyone.
+
+## How it works
+
+Every edit is stored as an operation in a shared log on S3. When two people edit at the same time, S3's **conditional writes** detect the conflict -- the second writer rebases against the first and retries automatically. No server needed.
+
+## The stack
+
+- **Storage & sync**: S3 conditional puts (\`If-Match\`)
+- **Auth**: Cognito identity pool (anonymous)
+- **Hosting**: GitHub Pages
+- **Backend**: *there is no backend*
+`

src/main.js

@@ -29,6 +29,8 @@ async function main() {
   /** @type {(text: string) => void} */
   let setRemote = noop
 
+  renderPreview(previewEl, '')
+
   const engine = new SyncEngine({
     client,
     config,

src/preview.js

@@ -1,9 +1,18 @@
 import { marked } from 'marked'
+import { demoMarkdown } from './example.js'
+
+const demoHtml = marked.parse(demoMarkdown, { async: false, breaks: true, gfm: true })
 
 /**
  * @param {HTMLElement} el
  * @param {string} markdown
  */
 export function renderPreview(el, markdown) {
-  el.innerHTML = marked.parse(markdown, { async: false, breaks: true, gfm: true })
+  if (markdown) {
+    el.classList.remove('demo')
+    el.innerHTML = marked.parse(markdown, { async: false, breaks: true, gfm: true })
+  } else {
+    el.classList.add('demo')
+    el.innerHTML = demoHtml
+  }
 }

src/style.css

@@ -86,3 +86,7 @@ main {
 }
 
 #preview h1, #preview h2, #preview h3 { margin-top: 1.2em }
+
+#preview.demo {
+  opacity: 0.55;
+}