From 43dad3ea7d1852d36613b4ffbc899034c8bd4141 Mon Sep 17 00:00:00 2001
From: Tommy Parnell <tommy@terribledev.io>
Date: Tue, 18 Feb 2025 22:11:15 +0000
Subject: [PATCH] Assistant checkpoint: Created README with embed route
 documentation

Assistant generated file changes:
- README.md: Add embed route documentation

---

User prompt:

write a readme on how to use the embed route
---
 README.md | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..81277a4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,70 @@
+
+# Newsletter Embed Route Documentation
+
+This documentation explains how to embed The Downtowner newsletter content into any website using our embed route.
+
+## Quick Start
+
+Add the following code to your website where you want the newsletter content to appear:
+
+```html
+<script>
+class NewsletterEmbed extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        try {
+            const response = await fetch('https://your-repl-url/embed');
+            const html = await response.text();
+            this.shadowRoot.innerHTML = html;
+        } catch (error) {
+            console.error('Failed to load newsletter content:', error);
+            this.shadowRoot.innerHTML = '<p>Failed to load newsletter content</p>';
+        }
+    }
+}
+
+customElements.define('newsletter-embed', NewsletterEmbed);
+</script>
+
+<newsletter-embed></newsletter-embed>
+```
+
+## Features
+
+- Responsive grid layout
+- Dark mode support
+- Style isolation using Shadow DOM
+- Displays up to 6 recent newsletters
+- Each newsletter card includes:
+  - Title
+  - Publication date
+  - Thumbnail image (if available)
+  - Description
+  - Read more link
+
+## Customization
+
+The embed route uses CSS variables for theming. You can override these variables in your website's CSS:
+
+```css
+newsletter-embed {
+  --background: #ffffff;
+  --foreground: #000000;
+  --card: #ffffff;
+  --card-foreground: #000000;
+  --primary: #000000;
+  --border: #e2e8f0;
+}
+```
+
+## Demo
+
+You can view a live demo of the embed functionality at `/embed-demo.html` on your Repl.
+
+## CORS
+
+The embed route has CORS enabled, allowing it to be embedded on any domain.