|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 | 3 | <head>
|
4 |
| - <meta charset="UTF-8"> |
5 |
| - <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 |
| - <title>Wiki App with Appwrite</title> |
7 |
| - |
8 |
| - <style> |
9 |
| - body { |
10 |
| - font-family: 'Arial', sans-serif; |
11 |
| - background: #121212; |
12 |
| - color: #e0e0e0; |
13 |
| - margin: 2rem; |
14 |
| - display: flex; |
15 |
| - flex-direction: column; |
16 |
| - align-items: center; |
17 |
| - } |
18 |
| - h1, h2 { |
19 |
| - text-transform: uppercase; |
20 |
| - letter-spacing: 2px; |
21 |
| - } |
22 |
| - input, textarea { |
23 |
| - background: #1f1f1f; |
24 |
| - color: #e0e0e0; |
25 |
| - border: 1px solid #333; |
26 |
| - border-radius: 8px; |
27 |
| - width: 100%; |
28 |
| - max-width: 500px; |
29 |
| - padding: 0.75rem; |
30 |
| - margin-bottom: 1rem; |
31 |
| - font-size: 1rem; |
32 |
| - } |
33 |
| - button { |
34 |
| - background: #6200ea; |
35 |
| - color: #fff; |
36 |
| - border: none; |
37 |
| - border-radius: 8px; |
38 |
| - padding: 0.75rem 1.5rem; |
39 |
| - font-size: 1rem; |
40 |
| - cursor: pointer; |
41 |
| - transition: background 0.3s ease-in-out; |
42 |
| - } |
43 |
| - button:hover { |
44 |
| - background: #bb86fc; |
45 |
| - } |
46 |
| - .page { |
47 |
| - background: #1f1f1f; |
48 |
| - border: 1px solid #333; |
49 |
| - border-radius: 12px; |
50 |
| - padding: 1.5rem; |
51 |
| - margin-bottom: 1rem; |
52 |
| - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
53 |
| - width: 100%; |
54 |
| - max-width: 500px; |
55 |
| - } |
56 |
| - .page h3 { |
57 |
| - margin-top: 0; |
58 |
| - } |
59 |
| - .page button { |
60 |
| - background: #b00020; |
61 |
| - } |
62 |
| - .page button:hover { |
63 |
| - background: #cf6679; |
64 |
| - } |
65 |
| - </style> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Global Wiki</title> |
| 7 | + <style> |
| 8 | + body { |
| 9 | + font-family: Arial, sans-serif; |
| 10 | + margin: 0; |
| 11 | + padding: 0; |
| 12 | + background: #0f172a; |
| 13 | + color: #f1f5f9; |
| 14 | + display: flex; |
| 15 | + flex-direction: column; |
| 16 | + align-items: center; |
| 17 | + justify-content: center; |
| 18 | + min-height: 100vh; |
| 19 | + } |
| 20 | + h1 { |
| 21 | + font-size: 3rem; |
| 22 | + margin-bottom: 1rem; |
| 23 | + } |
| 24 | + #wiki-entries div { |
| 25 | + background: #1e293b; |
| 26 | + padding: 1.5rem; |
| 27 | + margin: 1rem 0; |
| 28 | + border-radius: 12px; |
| 29 | + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); |
| 30 | + } |
| 31 | + input, textarea, button { |
| 32 | + width: 80%; |
| 33 | + max-width: 500px; |
| 34 | + margin: 0.5rem 0; |
| 35 | + padding: 1rem; |
| 36 | + border: none; |
| 37 | + border-radius: 12px; |
| 38 | + background: #334155; |
| 39 | + color: #f1f5f9; |
| 40 | + font-size: 1rem; |
| 41 | + } |
| 42 | + button { |
| 43 | + background: #3b82f6; |
| 44 | + cursor: pointer; |
| 45 | + transition: background 0.3s ease; |
| 46 | + } |
| 47 | + button:hover { |
| 48 | + background: #2563eb; |
| 49 | + } |
| 50 | + </style> |
66 | 51 | </head>
|
67 | 52 | <body>
|
68 |
| - <script src="https://unpkg.com/appwrite/dist/browser.min.js"></script> |
69 |
| - <h1>Simple Wiki App</h1> |
| 53 | + <h1>Global Wiki</h1> |
| 54 | + <div id="wiki-entries"></div> |
| 55 | + <input type="text" id="title" placeholder="Title"> |
| 56 | + <textarea id="content" placeholder="Content"></textarea> |
| 57 | + <button onclick="createWikiEntry()">Create Entry</button> |
70 | 58 |
|
71 |
| - <h2>Create New Page</h2> |
72 |
| - <input type="text" id="title" placeholder="Page Title"> |
73 |
| - <textarea id="content" placeholder="Page Content"></textarea> |
74 |
| - <button onclick="createPage()">Create Page</button> |
| 59 | + <script> |
| 60 | + const GITHUB_API_URL = 'https://api.github.com'; |
| 61 | + const REPO = 'scratch-coding-hut/Scratch-Coding-Hut.github.io'; |
| 62 | + const FILE_PATH = 'wiki.json'; |
| 63 | + const BRANCH = 'main'; |
75 | 64 |
|
76 |
| - <h2>Pages</h2> |
77 |
| - <div id="pages"></div> |
| 65 | + async function fetchWiki() { |
| 66 | + const response = await fetch(`${GITHUB_API_URL}/repos/${REPO}/contents/${FILE_PATH}`); |
| 67 | + const data = await response.json(); |
| 68 | + const content = JSON.parse(atob(data.content)); |
| 69 | + displayWiki(content); |
| 70 | + } |
78 | 71 |
|
79 |
| - <script> |
80 |
| - const { Client, Databases } = Appwrite; |
81 |
| - const client = new Client(); |
| 72 | + function displayWiki(entries) { |
| 73 | + const container = document.getElementById('wiki-entries'); |
| 74 | + container.innerHTML = ''; |
| 75 | + entries.forEach(entry => { |
| 76 | + const div = document.createElement('div'); |
| 77 | + div.innerHTML = `<h3>${entry.title}</h3><p>${entry.content}</p>`; |
| 78 | + container.appendChild(div); |
| 79 | + }); |
| 80 | + } |
82 | 81 |
|
83 |
| - client |
84 |
| - .setEndpoint('https://cloud.appwrite.io/v1') // Your Appwrite endpoint |
85 |
| - .setProject('67c8a359000d62253b33'); // Your project ID |
| 82 | + async function createWikiEntry() { |
| 83 | + const title = document.getElementById('title').value; |
| 84 | + const content = document.getElementById('content').value; |
| 85 | + const response = await fetch(`${GITHUB_API_URL}/repos/${REPO}/contents/${FILE_PATH}`); |
| 86 | + const data = await response.json(); |
| 87 | + const existingContent = JSON.parse(atob(data.content)); |
86 | 88 |
|
87 |
| - const databases = new Databases(client); |
88 |
| - const databaseId = '67c8a3c0002993df00ef'; |
89 |
| - const collectionId = '67c8a4c2001ff9cdd339'; |
| 89 | + const newEntry = { title, content }; |
| 90 | + existingContent.push(newEntry); |
90 | 91 |
|
91 |
| - async function fetchPages() { |
92 |
| - const response = await databases.listDocuments(databaseId, collectionId); |
93 |
| - const pagesDiv = document.getElementById('pages'); |
94 |
| - pagesDiv.innerHTML = ''; |
95 |
| - response.documents.forEach(page => { |
96 |
| - pagesDiv.innerHTML += ` |
97 |
| - <div class="page"> |
98 |
| - <h3>${page.title}</h3> |
99 |
| - <p>${page.content}</p> |
100 |
| - <button onclick="deletePage('${page.$id}')">Delete</button> |
101 |
| - </div> |
102 |
| - `; |
103 |
| - }); |
104 |
| - } |
| 92 | + const updatedContent = btoa(JSON.stringify(existingContent, null, 2)); |
105 | 93 |
|
106 |
| - async function createPage() { |
107 |
| - const title = document.getElementById('title').value; |
108 |
| - const content = document.getElementById('content').value; |
109 |
| - await databases.createDocument(databaseId, collectionId, 'unique()', { |
110 |
| - title, |
111 |
| - content |
112 |
| - }); |
113 |
| - fetchPages(); |
114 |
| - } |
| 94 | + await fetch(`${GITHUB_API_URL}/repos/${REPO}/contents/${FILE_PATH}`, { |
| 95 | + method: 'PUT', |
| 96 | + headers: { |
| 97 | + 'Authorization': `token ${YOUR_GITHUB_API_KEY}`, |
| 98 | + 'Content-Type': 'application/json' |
| 99 | + }, |
| 100 | + body: JSON.stringify({ |
| 101 | + message: 'Add new wiki entry', |
| 102 | + content: updatedContent, |
| 103 | + sha: data.sha, |
| 104 | + branch: BRANCH |
| 105 | + }) |
| 106 | + }); |
115 | 107 |
|
116 |
| - async function deletePage(id) { |
117 |
| - await databases.deleteDocument(databaseId, collectionId, id); |
118 |
| - fetchPages(); |
119 |
| - } |
| 108 | + fetchWiki(); |
| 109 | + } |
120 | 110 |
|
121 |
| - fetchPages(); |
122 |
| - </script> |
| 111 | + fetchWiki(); |
| 112 | + </script> |
123 | 113 | </body>
|
124 | 114 | </html>
|
0 commit comments