Merge pull request #42 from somecho/dev

add changelog to editor site

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.9.0
+- added changelog to the web editor for users to track changes
+
 ## 0.8.6
 - added `.node-version` for compatibility with Render
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "p5-cljs-web-editor",
   "private": true,
-  "version": "0.8.6",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -8,6 +8,7 @@ import { useState } from 'react'
 const App = () => {
 	const [about, setAbout] = useState("")
 	const [tutorial, setTutorial] = useState("")
+	const [changelog, setChangelog] = useState("")
 
 	import("./pages/about.md").then(res => {
 		fetch(res.default)
@@ -19,13 +20,19 @@ const App = () => {
 			.then(res => res.text())
 			.then(text => setTutorial(text))
 	})
+	import('../CHANGELOG.md').then(res => {
+		fetch(res.default)
+			.then(res => res.text())
+			.then(text => setChangelog(text))
+	})
 
 	return (
 		<Routes>
 			<Route path="" element={<MainLayout />}>
 				<Route index element={<Editor />} />
 				<Route path="about" element={<Article markdown={about} />} />
 				<Route path="tutorial" element={<Article markdown={tutorial} />} />
+				<Route path="changelog" element={<Article markdown={changelog} />} />
 			</Route>
 		</Routes>
 	)

src/components/Article.jsx

@@ -14,9 +14,9 @@ const Article = ({ markdown }) => {
 				children={markdown}
 				components={{
 					h1: ({ ...props }) => <h1 className="font-bold text-4xl my-8" {...props} />,
-					h2: ({ ...props }) => <h1 className="font-bold text-2xl mt-6" {...props} />,
-					h3: ({ ...props }) => <h3 className="font-bold text-xl mt-6" {...props} />,
-					h4: ({ ...props }) => <h3 className="font-semibold text-md mt-3" {...props} />,
+					h2: ({ ...props }) => <h2 className="font-bold text-2xl mt-6" {...props} />,
+					h3: ({ ...props }) => <h3 className="font-bold text-lg my-2" {...props} />,
+					h4: ({ ...props }) => <h4 className="font-semibold text-md mt-3" {...props} />,
 					p: ({ ...props }) => <p className="my-4" {...props} />,
 					code: ({ ...props }) => <code className="bg-neutral-200 px-1 font-mono text-sm" {...props} />,
 					li: ({ ...props }) => <li className="list-disc list-inside" {...props} />,

src/components/NavBar.jsx

@@ -22,6 +22,11 @@ const NavBar = () => {
 						Tutorial
 					</Link>
 				</li>
+				<li className="pt-3 px-4">
+					<Link to="changelog">
+						Changelog
+					</Link>
+				</li>
 			</ul>
 		</nav>
 	)