Merge pull request #55 from p5cljs-editor/dev

🎨 add gallery page

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.13.0
+- The gallery / examples can now be view in the UI via the Gallery in the navigation
+
 ## 0.12.0
 ### New Features
 - users can now add cdn links to their sketches! 

gallery.md

@@ -1,9 +1,9 @@
 # 🎨 Gallery
 
 Here are some example sketches. If you have one you'd like to share, feel free to modify `gallery.md` and make a PR! 
-## Examples
+#### Examples
 - [Using chroma.js in a cdn](http://p5cljs-editor.onrender.com/?sketch=bVHBbsIwDL3zFU%2FskjJRiqbtMmmXfcKOFZrS1nSFNKmctIi%2FnxNgHRKWUrn2e%2FbLyzueDh61sxNxkMTI30S1R3CQVDPrs8dCNbQXlHHsodYfiVQuK6Pr4xLLYeTBkCRnMsadJGFq5Hvp7xa4C3Xwm%2FqHXa9zX2tDWZYt0gILT2EcykhIICYd6FPbSXu8FUU82bVn3VdgdxTyjduwPv1RK1ncshttgwul18OEJETtbdndNClDAeUAtUGH16LIE3qOkG4bJ%2FadMZ2%2F76YJKwir2D7oPGN4UO1dg63I%2Fl9k3XSjOLuSddjmhRBvl52jZLSodlD5%2BpvbCur6HiHLZouj1L1IRQLPA5KfHdeG8CJOxnNZGt1PANa2peiBVH4B&cdn=LcfBDYAgDAXQiexPiCe3qUUDDaWGYuL4Xji%2BMucTByC5a5A0f%2FPdeFwkbmDlD62eASnDjTcNJNopLZPVTho%2F)
-## Sketches 
+#### Sketches 
 - [Luminescent Ribbon](http://p5cljs-editor.onrender.com/?sketch=pVTdbts2FL73U5x2GGA3tS1rddAlQ7Asy7IAaTckLnYhGAMtnVhsZFIj6cR6pL1Gn6wfKclW7AC9qGya8uF3%2Fr5zDk%2B%2F%2FB9HcUx3esV0keve6SyXlp60eSDshUxZWc5orTI25HImx2ZlSd%2BHPx%2BuZy1mRNQ7%2FUMbEpTqsnpLlpl%2ByZ0r7cl4rEtg9NqkPNJmOW507BgGzka90%2FNPsz%2F%2Fuj3phnE9u7k8oZv1Siq2QDu6lYuFVjSkK1ZrYSqK31Id%2FHqxktZKrXq9fsb3Cr7duqRk3iPqf7bj1LBwfCHUo7B0HEVhQf7P5W9XN4MGpPSdM%2FqBB4PaCpVawmtfOL2iJKJojpNwsBAqa%2BVb4ez8Ex2P4vc%2FTd5Pp40JRSvhhs4IZeHk9a12CMOSUPTxd39k5Ib6j5x6OrHZwWvAEhyEwEVZFhVgpT9zYBYHbXCKJCqy4czbLYU0llikOXHBK8%2BVVKEORQFN8ELCB%2BAdN2oEfgqGICMDroxHNG5CDF41BLFNgJI%2BtiVTP9VrePCIwSBsnoMmqlIU7BxT4uB%2FQSll3grsDM%2FOKA2v4YHdkt54GD5zX4LuwRFl%2ByJgPcPNOtD4IFw%2BTrU9VFscGhcvGI%2BnU2oW0tnmkxnxtOujQESBGlL%2Fje%2BfJ5m5nIbRaDpoJDnLZe5q0UFjNf8XIn1YGpCYURRkoMwzUVu4N2LFF4HiaBRFaKU2VBe%2FCJnsEOim4VnjU1qm459B77u4DS6EG8Kqn2oP%2Fi4OGs9z6eAzafY0JpijGMvVPlCZDnwfPAXQr%2F4RooImugc68RQvuwwmtVJbT%2B8zwPA1NJx4nSPadJPoalj0%2FYsaVdcHeHzRh%2F%2FdM96Fdo3XUFht2ts%2BifJVfTH8gAFRn%2BlHShJkU03mlMBjFc%2F9mASwYdxPr5r7JdlQhXauT3x38FKqu1yU7Gswu70%2B%2F3h1c%2FnvHd7%2BbvQzbfk%2FSiwvw6z325n%2B1ftvImrbKpGHccxxPwbV3RjgSWEJuUqfXmirUKi4w0ZAge52yNPnBp4%2FCUYAdsJqQ%2Fou3GQUUbO%2BYQ939WiCFc%2B3ZGyvUz8%2BsiiQxy4vT%2FsjG8cb33%2FV3kmAh0E9RHs%2B%2FW3RyllloXSQfQU%3D) by [Somē](https://github.com/somecho) 
 - [Pixel Metablob](http://p5cljs-editor.onrender.com/?sketch=nVfbcts2EH3XV2zdF1JiKN4kW1HTm5ukmUmmmcZpm2TSDC1CFlzxUhKSKGfyQf2NflnPAiRF2W46U3lMENizZxeLxQKc%2F%2F1X4AUBvcpTQeerfDC%2FWMmKdnn5B6Fdy4XIKpHQJktESWolSIkyrShf6s6LZxctxiUazJ%2FkJcW0yIu9Q5UQ9NVKqaJ6OB7nBTD5plwINy%2Bvxo1ONQbB1%2B5g%2Ft3rix9%2F%2Bvlh341nF88fP6QXQsWX6%2FySHtBTkW3ick9%2B6JDxeXOZyqqSeTYYWIlY0krE7OXJgOhLueSRp88%2FPH6FblGKhWQkreTVqqDlOo%2FVnHEiS%2BTyxG4YslxWAgRbsYiowEw3Sli6U9sfS6E2ZUZpnliWVQ%2FDyPXskY%2FHsIZHZzO8zT8NNHWna3oHZfTz0vocBXNoiyrer%2FPyWbZ99WepjBNlx%2BO7p7PgLApmfuR5%2FmSG%2BHju2SQ8DaPTwJtNQj%2BiIZWdP8dkZuz%2FsBnXrso4iRqWa4f0mCzsjwjoIs8qZUbyTFT0SL9bmKMDM%2B3jAc%2BZ428C7VT8Xrj1%2FgYKJka0LOOFIp54aF3bsC81gN9OoW0GbuAquIz6Dsq%2BO8FQkisrvqwso%2BFoV%2FQrAzun1qKqLlZxZhVmDpbH8deY1hfTjsjS6sPA9YxBNl%2B5u92OwU0Ui%2FkAATJRqXQmmVXbHgcmIDo3HgQWwuyHZ%2F5sOvV8P5h4vjfxIodoPCaL51Hxak1sexx4RE8j0Nz%2F89zQm3n%2BdDaLwtNoFp1GE9%2Bea5qGgt22xxGwT5jGLBl10d5ijhy0rUPn7h4%2Fmw7rU3vsLxgIKgYnGVfjd0BJvQq8XKgcv0GjUqKwoOzub3YOt4B3rAx687aPutkZ1B4B1ygJDQBAhnak233T3jRyMOs151XBeDtKI1Z787bRw8u%2BEQEPWavACEgaUafVst%2FG6nEz1xBmF%2Bs4hesS%2BYzE0ZndC5oM%2BhBO%2BPth%2FhEMCXYvrGYY1gGe%2BJgTC4fNChwwbNFgAmA4V%2B9i2HGDCYEJ78VELYbNjAhF6ggkIeYKhhxoqh4Gm2LAmdLWvs%2B8SHdn89K42M7cIN246WXTNU%2F4v5nIOt4TIAaT3szSd5FQMtDPkJ86pHZfQbvQU7jRCvwM%2BXm%2FAidhq4BzDgr8DPl5vwJnYauAOg8Ffob8NAqHbCh6BXMczBB6jRlHiLN5Q%2B3TGWLToX5y1E1NvoYQUSh6xZUD2QiN%2Bb6QU6YT8jT6Qs6VTshB6Qs5STohh7gnzPIyhfjuCWZx7Sg8p%2FBQlPW77xR%2B%2Bx44cKjthE4RtsUY%2BfdIk7o6ATGltq%2F3NWbR9vUWheNtX9dn%2BIr%2BsTfaRuQUURf9kFKOYxrXOAemyH598jCu9py6dbj2nbp1uA6cOrDR4eVoWAJKOeBHLIFhCZ06bDUjp47sfuL2WIwbvOdSXVINIeaMR%2B%2B44ZTAmKUJU2%2BYYum1y3oAQeNqyrym66PrH7qINeoFAnz7TDH1PfWHKTTMIWU0cO1C9egIcEyhUOCY0H%2FzT90dalvh0FHl4TYWK1XKS96sOsrxy7ySCnex%2BWCTySWnShqriDYvy%2FxaLFjyIoYGlvpY%2FiJPxPoXKXateJvLBDKZWThhTVbm3eHemdHbBoG9Wn9oh4C5Yw2hvG0BQyDEqX6CMJnJLY8n17svhlTEa6G6O58yq0Fx01427aJpE%2FjcrGSMoF%2FC2CKvLJq6wVnonw2txVCNEs7OT10cdH6VosrXm%2BMANiZlKu5GJaDNFhO2MP8nZXx1juM%2BwbGH1MRVCbe6js6mca%2FHW6u5y8gbwadscOaCnQmvmFDfzyxw4yYEBBzVMhhvLxV9maFimQeWxl%2BuEfAZKOS%2BN8E4vh%2FaO7M%2B2Odov8KVn19GI0youV6ztHfHsmpHObPZzMU9ejqdorH1DY09H2KercVif0vvSIdA8i%2BK5S09NYqCKHBDVACnHvr4uRO8TPBzJzPN4SG8WFg080HJBQhz7PgSWak4W3Bc1yK7UiuLLERupDdcUTvFXnOUiBzHDP%2BsT98cFB9SMmw7%2BuJpsitfGw1zpUgcz3V8FywQmJ2BktZ124wlK0E6oGChyChtmKejGTE4AUmE%2F4l9NDTtD%2FH1xnNPGXlAoRcwEhdYYxFB4JU0xk2O4B0XVR4ZP8KVRW9Tk6Yo1u1ehtjM4rATc44BNmOs8pQyuW7HM3x3qk1B796jsFnX1biQtVj%2FgK9NqfDtyOWORxeliJU4j7NtXNHU8%2FQ%2Fxn99%2FP3T5xqEnSDUF2yig79a6U2PAresTOVsTCZlvDtYrAzs24oRv1%2BDwQXV62arflvRyWGXnZC1WF8%2F%2BBqod1DdyUSt2I%2BVwHeqeq%2BN3EvB%2B%2BaEkdiGqTjPN5lq54ZvXXw3YT1NDra0WNejQWMCo3ft2vY%2F) by [Somē](https://github.com/somecho)
 - [Triangle abyss](https://p5cljs-editor.onrender.com/?sketch=dVPRTttAEHzPV4xaUdlAYmMUhEiFhChtkUBIJDwhHi7xJr7i%2BNy7c8Cf1N%2Fol3XvHCcO0JOi2N6d2dndudHfP0mcJBirJeEyU73RJJMGL0o%2Fg%2F9zOaPCUIqqSEnDZgRLemmg5v7l9nrS5gyA3ui70hCYqbI%2BhCHC18za0pxFkSo5R1V6RgOlF9EaYyImOB%2F0RhcPk59392ddGdeTm6szTLQUxSInXExrY9DHDyoqoWscHaIRXk2X0hipil4vSGmOycUDTgbJ6fHR6XAYNh8LlCqvF5wDfLonW%2BnCsM5cGus6Sb5hRdqyJt%2BYgKZFlQvdogafGPf4ihpapLIyKKpl38iU078wYG7I9l1EFOaJM4OcLB6NpRJB5PVs8kMON6eBIZhL7UV0SULHwjz983MEmvunjxgQLEWJz8E%2B9uCKhe9DBxxqqD8IepWrV1cGwa2wWTRTBnshmLHpkx8P8NqFds%2Bq7kCNLN5D63Ddyc5xNVf1U%2BhOu55Ui5f%2BetpwS6rYHJjSQhbjTJQUUZH6B1jlk737dtbjXvz0f5loC3Tag1QZ%2Bs11PWA9W1GWeQ3OdZsnVuTbdOBNKX6%2BvLkbX21l8iCrEo9tmZkmYelSFCthcBLH7teyFGpstXqm3R632KmYPS%2B04nuFBuPX4dZsNV%2B8YRxvJscu2Uc8iOM4GXrsUuZs3Xa4bXuy6xVHshl%2Bw22bVa%2FZhm%2FWaptt%2FifautXt2zcnDblM6XUlIZjc1n7%2F7Pc3YO0%2BB%2F2NLsgQR7spLG3fzftFpjbz9XfCrM2HM5KLzPr41lhO0Jwn4nKSIU8oYlmbGXS0ePWtyfxtxnF7PXbKBV07ep%2BG%2FwA%3D) by [Somē](https://github.com/somecho)

package.json

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

src/App.jsx

@@ -9,6 +9,7 @@ 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 => {
@@ -21,6 +22,12 @@ const App = () => {
 			.then(res => res.text())
 			.then(text => setTutorial(text))
 	})
+
+	import("../gallery.md").then(res => {
+		fetch(res.default)
+			.then(res => res.text())
+			.then(text => setGallery(text))
+	})
 	import('../CHANGELOG.md').then(res => {
 		fetch(res.default)
 			.then(res => res.text())
@@ -36,6 +43,7 @@ const App = () => {
 					<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} />} />
 				</Route>
 			</Routes>
 		</>

src/components/Article.jsx

@@ -1,7 +1,7 @@
 import ReactMarkdown from 'react-markdown'
 import hljs from "highlight.js"
 import { useEffect } from 'react'
-import { Box, Heading, Text } from '@chakra-ui/layout'
+import { Box, Heading, Text, Link } from '@chakra-ui/layout'
 
 const Article = ({ markdown }) => {
 
@@ -22,7 +22,15 @@ const Article = ({ markdown }) => {
 					h3: ({ ...props }) => <Heading as="h3" fontSize="2xl" my="8" {...props} />,
 					h4: ({ ...props }) => <Heading as="h4" fontSize="lg" my="4" {...props} />,
 					p: ({ ...props }) => <Text my="2" className="my-4" {...props} />,
-					code: ({ ...props }) => <code className="bg-neutral-200 px-1 font-mono text-sm" {...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

@@ -71,6 +71,11 @@ const NavBar = ({ methods }) => {
 							Tutorial
 						</Link>
 					</ListItem>
+					<ListItem className="pt-3 px-4">
+						<Link to="gallery">
+							Gallery
+						</Link>
+					</ListItem>
 					<ListItem className="pt-3 px-4">
 						<Link to="changelog">
 							Changelog

src/index.css

@@ -16,3 +16,11 @@ section>p>a{
 	color: blue;
 	text-decoration: underline;
 }
+
+section>p>code{
+	padding: 0 4px;
+	background: #f0f0f0;
+	border-radius: 4px;
+	font-family: 'JetBrains Mono', monospace;
+	font-size: 0.8em;
+}