added article page with apps script as server

Pranav014 · Sep 15, 2024 · 9257e90 · 9257e90
1 parent 888fb86
commit 9257e90
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 0 deletions.
diff --git a/article.html b/article.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Article Display</title>
+    <link rel="stylesheet" href="./assets/css/articlecss.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <header>
+        <h1>My Articles</h1>
+    </header>
+    <main>
+        <div id="articles-container">
+            <!-- Articles will be dynamically inserted here -->
+        </div>
+    </main>
+    <script src="./assets/js/article.js"></script>
+</body>
+</html>
diff --git a/assets/articles/test.md b/assets/articles/test.md
@@ -0,0 +1,6 @@
+# My First Game
+
+Engine: Godot
+Game: Basic something (Endless runner)
+Time: 2 days
+
diff --git a/assets/css/articlecss.css b/assets/css/articlecss.css
@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+    text-align: center;
+}
+
+main {
+    padding: 20px;
+}
+
+#articles-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
diff --git a/assets/js/article.js b/assets/js/article.js
@@ -0,0 +1,24 @@
+async function fetchMarkdown(file) {
+    // Use the Google Apps Script endpoint
+    const url = `https://script.google.com/macros/s/AKfycbwJwd_EJdp2aMJwrDFKzcOmdZPXZoVSG3D51Lbu8NCCyR89UBYzCqtfWOazLXNdFLlg/exec?file=${file}`;
+    const response = await fetch(url);
+    const markdown = await response.text();
+    return markdown;
+}
+
+// Function to render the Markdown content as HTML
+async function renderArticle(file) {
+    const markdown = await fetchMarkdown(file);
+    if (markdown) {
+        // Convert Markdown to HTML using the `marked` library
+        const html = marked.parse(markdown);
+        // Set the HTML content inside the container
+        document.getElementById('articles-container').innerHTML = html;
+    }
+}
+
+// Load a specific article
+renderArticle('test.md');
+
+
+// https://script.google.com/macros/s/AKfycbwgIYWuwBxoHJizYu80uHPTIwQ-yZEaMwT2Y0EXXmxozFixFZLpKvkYN3tbD7-4fLj7/exec