added better markdown view pages and enabled subscription button to know when your logged in

views/getting-started.html

@@ -0,0 +1,48 @@
+<!-- views/getting-started.html -->
+<section class="mb-8">
+  <!-- White background, shadow, and dark text to override global site color -->
+  <div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
+    <h2 class="text-2xl font-bold mb-4 text-gray-700">Getting Started</h2>
+
+    <!-- .markdown-body references your markdown.css to style headings, paragraphs, etc. -->
+    <div id="markdown-container" class="markdown-body">
+      <p class="text-gray-500">Loading content...</p>
+    </div>
+  </div>
+</section>
+
+<script>
+  (async () => {
+    try {
+      // Fetch the Markdown file
+      const response = await fetch("content/getting-started.md");
+      if (!response.ok) {
+        throw new Error("Failed to load getting-started.md");
+      }
+
+      const markdownText = await response.text();
+
+      // Convert to HTML with Marked (assuming marked is globally available)
+      const html = marked.parse(markdownText);
+
+      // Insert into #markdown-container
+      const container = document.getElementById("markdown-container");
+      if (container) {
+        container.innerHTML = html;
+      }
+
+      // Optional: highlight code blocks if highlight.js is loaded globally
+      document.querySelectorAll("pre code").forEach((block) => {
+        hljs.highlightBlock(block);
+      });
+    } catch (err) {
+      console.error("Error loading 'Getting Started' content:", err);
+      const container = document.getElementById("markdown-container");
+      if (container) {
+        container.innerHTML = `
+          <p class="text-red-500">Error loading content. Please try again later.</p>
+        `;
+      }
+    }
+  })();
+</script>