Merge pull request #56 from p5cljs-editor/dev

🔧 refactorings

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.13.1
+- the about page now points to the github page
+- move tutorial.md to root of repo
+
 ## 0.13.0
 - The gallery / examples can now be view in the UI via the Gallery in the navigation
 

package.json

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

src/App.jsx

@@ -6,18 +6,12 @@ import { useState } from 'react'
 
 
 const App = () => {
-	const [about, setAbout] = useState("")
 	const [tutorial, setTutorial] = useState("")
 	const [changelog, setChangelog] = useState("")
 	const [gallery, setGallery] = useState("")
 	const [methods, setMethods] = useState(null)
 
-	import("./pages/about.md").then(res => {
-		fetch(res.default)
-			.then(res => res.text())
-			.then(text => setAbout(text))
-	})
-	import("./pages/tutorial.md").then(res => {
+	import("../tutorial.md").then(res => {
 		fetch(res.default)
 			.then(res => res.text())
 			.then(text => setTutorial(text))
@@ -40,7 +34,6 @@ const App = () => {
 			<Routes>
 				<Route path="" element={<MainLayout methods={methods} />}>
 					<Route index element={<Editor setMethods={setMethods} />} />
-					<Route path="about" element={<Article markdown={about} />} />
 					<Route path="tutorial" element={<Article markdown={tutorial} />} />
 					<Route path="changelog" element={<Article markdown={changelog} />} />
 					<Route path="gallery" element={<Article markdown={gallery} />} />

src/components/Article.jsx

@@ -23,14 +23,6 @@ const Article = ({ markdown }) => {
 					h4: ({ ...props }) => <Heading as="h4" fontSize="lg" my="4" {...props} />,
 					p: ({ ...props }) => <Text my="2" className="my-4" {...props} />,
 					a: ({ ...props }) => <Link color="pink.500" {...props} />,
-					// code: ({ ...props }) => <Text
-					// 	display='inline'
-					// 	backgroundColor="gray.200"
-					// 	px="2"
-					// 	fontFamily="JetBrains Mono"
-					// 	fontSize="sm"
-					// 	borderRadius="md"
-					// 	{...props} />
 				}}
 			/>
 		</Box>

src/components/NavBar.jsx

@@ -29,7 +29,9 @@ const NavBar = ({ methods }) => {
 					color="gray.600"
 				>
 					<ListItem className="pt-3 px-4">
-						<Link to="about">
+						<Link
+							to="https://github.com/p5cljs-editor/p5cljs-editor.github.io"
+							target="_blank">
 							About
 						</Link>
 					</ListItem>