Merge branch 'main' into add-brad-woods-garden

README.md

@@ -1,6 +1,12 @@
-# Digital Gardening
+# Digital Gardening Tools and Resources
 
-A collective of gardeners publicly tending their digital notes on the interwebs
+This collection of apps, tools and articles is here to help you learn more about digital gardening. Ideally, it's here to help you start your own garden.
+
+## What is "digital gardening"?
+
+A garden is something inbetween a personal blog and a wiki. It's a collection of evolving notes, essays, and ideas that aren't strictly organised by their publication date. They're inherently exploratory – posts are linked through contextual associations. They aren't refined or complete - posts can be published as half-finished thoughts that will grow and evolve over time. They're less rigid, less performative, and less perfect than the personal "blogs" we're used to encountering on the web.
+
+See the [Theory, Philosophy, and Navel-gazing](https://github.com/MaggieAppleton/digital-gardeners#theory-philosophy-and-navel-gazing) section for more on the 'what' of gardens.
 
 ![An illustration of a plant with an pencil edit icon](https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,w_850/v1590401937/maggieappleton.com/notes/garden-history/garden-wide.png)
 
@@ -26,6 +32,7 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 - [Gatsby Theme Garden](https://github.com/mathieudutour/gatsby-digital-garden/) - A set of tools to build a digital garden with Gatsby.js. Pull data from Roam Research or markdown.
 - [Simply Jekyll](https://simply-jekyll.netlify.app/posts/introduction-to-simply-jekyll) - A Jekyll theme with bidirectional links, sidenotes, and transclusion
 - [Digital Garden Jekyll Template](https://github.com/maximevaillancourt/digital-garden-jekyll-template) - A simple, clean jekyll template with bi-directional links
+- [Jekyll-Bonsai](https://github.com/manunamz/jekyll-bonsai) - A modern jekyll theme for semantically inclined digital gardeners.
 - [Eleventy Garden](https://github.com/b3u/eleventy-garden) - A minimal template with backlinks, built in [Eleventy](https://11ty.dev)
 - [Foam](https://foambubble.github.io/foam/) - Roam-like personal note management and publishing system built inside VSCode
 - [Foamy NextJS](https://github.com/yenly/foamy-nextjs) - Basic Foam + NextJS with MDX starter for building a digital garden
@@ -33,11 +40,13 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 - [Hyperdraft](https://hyperdraft.rosano.ca) - Turns plain markdown notes into a website as you write. Easy to setup and doesn't require builds or deploys.
 - [Neuron](https://github.com/srid/neuron) - Managing and publishing system for plain-text Zettelkasten-style notes.
 - [Innos Notes](https://innos.io/) – Features include parallel pages, content blocks, and knowledge graph visualisations.
+- [Trilium Notes](https://github.com/zadam/trilium) - A hierarchical note taking application with focus on building large personal knowledge bases.
 
 #### Building a Private Garden
 
 - [Org Roam](https://www.orgroam.com/) - non-hierarchical note-taking with org-mode in emacs
 - [TheBrain](https://www.thebrain.com/) - A tool for taking interconnected notes with an interactive graph.
+- [Bangle.io](https://bangle.io) - A simple, markdown-based notetaking app that runs locally on your machine.
 
 #### Extra Gardening Tools
 
@@ -62,7 +71,7 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 
 ## Theory, Philosophy, and Navel-Gazing
 
-- **[The Garden and the Stream: A Techno pastoral](https://hapgood.us/2015/10/17/the-garden-and-the-stream-a-technopastoral/)** by Mike Caulfield
+- **[The Garden and the Stream: A Techno pastoral](https://hapgood.us/2015/10/17/the-garden-and-the-stream-a-technopastoral/)** by Mike Caulfield – the original source of the concept of **Digital Gardening**
 - [Of Digital Streams, Campfires and Gardens](https://tomcritchlow.com/2018/10/10/of-gardens-and-wikis/) by Tom Critchlow
 - [How the Blog Broke the Web](https://stackingthebricks.com/how-blogs-broke-the-web/) by Amy Hoy
 - [My blog is a digital garden, not a blog](https://joelhooks.com/digital-garden) by Joel Hooks
@@ -89,28 +98,33 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 
 ## Digital Garden Directory
 
+⭐️ = Featured; unique and exceptional examples
+
 | Gardener & Link | 🛠 Build Tools  | 🌿Note Themes |
 | -------------------- | ------------------ | ----------------- |
-| [Andy Matuschak](https://notes.andymatuschak.org/)  | The Mystery Andy System | Note-taking, education, tools for thought |
+| ⭐️ [Andy Matuschak](https://notes.andymatuschak.org/)  | The Mystery Andy System | Note-taking, education, tools for thought |
+| ⭐️ [Gwern](https://www.gwern.net/) | [JS, CSS, Hakyll, Haskell](https://www.gwern.net/About#tools) | Quantified self, spaced repetition, bitcoin |
+| ⭐️ [Azlen Elza](https://notes.azlen.me/g3tibyfv/)  | Notion + Python | Design, Conversational interfaces, Tools for thought
+| ⭐️ [Buster Benson](https://busterbenson.com/piles/) |  | Behaviour change, dialogue, systems thinking | 
+| ⭐️ [Tom Critchlow](https://tomcritchlow.com/)   | Jekyll              |  Indie consulting         |
+| ⭐️ [Chris Aldrich](https://tw.boffosocko.com) |  TiddlyWiki + TiddlyBlink + TiddlyMap | Art of Memory, IndieWeb, humanities, commonplace books, thought spaces
+| ⭐️ [Gordon Brander](http://gordonbrander.com/pattern/) |  [Lettersmith](https://github.com/gordonbrander/lettersmith_py) | Design patterns, storytelling, systems
+| ⭐️ [Bill Seitz](http://webseitz.fluxent.com/wiki/) |  Flask/Python with [WikiFlux](http://webseitz.fluxent.com/wiki/WikiFlux) | Product management, startups, wiki theory, engineering |
+| ⭐️ [Alex Komoroske](https://thecompendium.cards/c/half-baked/) | [Cards Web](https://github.com/jkomoros/card-web) – a custom OS platform | Complexity theory, design, systems thinking |
+| ⭐️ [Nikita Voloboev](https://wiki.nikitavoloboev.xyz) | GitBook | Tool obsessed. Code, web dev, art. |
 | [Anne-Laure Le Cunff](https://www.mentalnodes.com/)    | TiddlyWiki   | Networked thinking, metacognition, evidence-based learning and self-education   |
-| [Tom Critchlow](https://tomcritchlow.com/)   | Jekyll              |  Indie consulting         |
 | [Shawn Wang](https://www.swyx.io/writing) | Sapper | Web development, writing, speaking
 | [Kevin Cummingham](https://kevincunningham.co.uk) |  Gatsby | Web development, React, AWS, GraphQL
-| [Maggie Appleton](https://maggieappleton.com/garden)   |  Gatsby + MDX   | Anthropology, metaphors, visual explanations, and web development
+| [Maggie Appleton](https://maggieappleton.com/garden)   |  Next.js  | Anthropology, metaphors, visual explanations, and web development
 | [Chris Biscardi](https://www.christopherbiscardi.com/garden)   |  Sector / Toast?   | Web development, MDX, GraphQL, Gatsby
+| [Neil Mather](https://commonplace.doubleloop.net) |  Org-mode | Programming, politics, climate change |
 | [Wess Daniels](https://nurselog.online)   |  Tiddlywiki (Pre-Release 5.1.23)   | Culture and systems change, liberation theology, tech and pedagogy
 | [Aengus McMillin](https://aengusmcmillin.com/brain)  |  Gatsby |  Programming, Stoicism  |
-| [Azlen Elza](https://notes.azlen.me/g3tibyfv/)  |  | Design, Conversational interfaces, Tools for thought
+| [Joel Hooks](https://joelhooks.com/)  |  Gatsby + MDX  | Bootstrapping / indie-hacking, community building, web development
-| [Joel Hooks](https://joelhooks.com/)  |  Gatsby + MDX  | Bootstrapping / indie-hacking, community building, web development,
 | [Ian Jones](https://ianjones.us/notes)  |  Gatsby  | Web development, Gatsby, Emacs
 | [Wayan Jimmy](https://notebook.wayanjimmy.xyz) |  Gatsby ([Hasura Gitbook Starter](https://github.com/hasura/gatsby-gitbook-starter)) | Coding, Learning notes
 | [Markus](https://re1.dev/wiki/) |  Eleventy | Design, linux, privacy
 | [Max Stoiber](https://notes.mxstbr.com/About_these_notes) |  The Mystery Andy System | React, web development
-| [Gwern](https://www.gwern.net/) | [JS, CSS, Hakyll, Haskell](https://www.gwern.net/About#tools) | Quantified self, spaced repetition, bitcoin
-| [Chris Aldrich](https://tw.boffosocko.com) |  TiddlyWiki + TiddlyBlink + TiddlyMap | Art of Memory, IndieWeb, humanities, commonplace books, thought spaces
-| [Neil Mather](https://commonplace.doubleloop.net) |  Org-mode | Programming, politics, climate change |
-| [Gordon Brander](http://gordonbrander.com/pattern/) |  [Lettersmith](https://github.com/gordonbrander/lettersmith_py) | Design patterns, storytelling, systems
-| [Bill Seitz](http://webseitz.fluxent.com/wiki/) |  Flask/Python with [WikiFlux](http://webseitz.fluxent.com/wiki/WikiFlux) | Product management, startups, wiki theory, engineering |
 | [Daniel Chapman](https://www.dschapman.com/notes) |  Gatsby | Books, Writing, Poetry
 | [Will Stedden](https://bonkerfield.org/) |  Custom coding a [side project](https://bonkerfield.org/2020/05/swale-garden-stream/) | Machine learning, automated language generation, quantum physics art, online transparency
 | [Salman Ansari](https://notes.salman.io/) | Gatsby | Start-ups, engineering |
@@ -125,7 +139,6 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 | [Maxime Vaillancourt](https://maximevaillancourt.com/notes) | Jekyll ([open-source template](https://maximevaillancourt.com/blog/setting-up-your-own-digital-garden-with-jekyll)) | personal growth, ruby, web, linux |
 | [Andy Byers](https://notes.ajb.app)  |  Jekyll  |   notes on coding, note taking, personal knowledge management and other random thoughts.  |
 | [Abstractxan](https://abstractxan.xyz) | C++ ([Mizi](https://github.com/AbstractXan/Mizi)) | Tech, Art, Curating resources |
-| [Nikita Voloboev](https://wiki.nikitavoloboev.xyz) | GitBook | Tool obsessed. Code, web dev, art. |
 | [Luciano Strika](https://strikingloo.github.io/wiki/) | Jekyll | Personal Wiki, Digital Garden. StrikingLoo's Haphazard Repository of Knowledge, Opinions and Trivia |
 | [Piotr Gaczkowski](https://garden.doomhammer.info) | Jekyll + Roam Research as backend | Book notes, Codex Vitae, cocktails, experiments |
 | [Tymon Zaniewski](https://garden.tymon-zaniewski.xyz) | Jekyll ([open-source template](https://maximevaillancourt.com/blog/setting-up-your-own-digital-garden-with-jekyll)) | personal wiki, DIY electronics, making music |
@@ -144,3 +157,4 @@ A collective of gardeners publicly tending their digital notes on the interwebs
 | [Soren Bjornstad](https://zettelkasten.sorenbjornstad.com) | TiddlyWiki + homegrown scripts | Almost everything; emphasis on tech, reading, and how to live |
 | [Paul Batchelor](https://pbat.ch/wiki) | [WeeWiki](https://pbat.ch/wiki/weewiki) | Computer Music, Audio Programming, Literate Programming, Food |
 | [Brad Woods](https://garden.bradwoods.io) | Next.js + MDX | Web development |
+| [Memento](https://m0wer.github.io/memento/) | [MkDocs](https://www.mkdocs.org/), [MkDocs Newsletter](https://lyz-code.github.io/mkdocs-newsletter/) | Python, GNU/Linux, DevOps, Flutter, traveling, cooking, ...|

components/Sidemenu.js

@@ -3,48 +3,64 @@ import Link from "next/link";
 
 export default function Sidemenu() {
     return (
-        <motion.div
+        <motion.div className="flex flex-col space-y-3 mt-28 ml-6 w-52 mr-12">
-            initial="hidden"
+            {[
-            animate="visible"
+                { name: leafSVG, path: "/" },
-            variants={{
+
-                hidden: { opacity: 0, x: -50 },
+                {
-                visible: {
+                    name: "What's a Digital Garden?",
-                    opacity: 1,
+                    path: "/what",
-                    x: 0,
+                    style: "font-bold",
-                    transition: {
-                        delay: 0.6,
-                        ease: "easeInOut",
-                        duration: 1,
-                    },
                 },
-            }}
+                { name: "Directory", path: "/directory" },
-            className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12 text-deepGreen"
+                { name: "Tools", path: "/tools" },
-        >
+                { name: "Tutorials and Guides", path: "/tutorials" },
-            <Link href="/what">
+                { name: "Theory, Philosophy, & Navel-Gazing", path: "/theory" },
-                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold">
+            ].map((item, index) => (
-                    What's a Digital Garden?
+                <Link href={item.path} key={index}>
-                </a>
+                    <motion.a
-            </Link>
+                        initial="hidden"
-            <Link href="/directory">
+                        animate="visible"
-                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                        variants={{
-                    Garden Directory
+                            hidden: {
-                </a>
+                                opacity: 0,
-            </Link>
+                                x: -100,
-            <Link href="/tools">
+                            },
-                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                            visible: {
-                    Tools for Gardening
+                                opacity: 1,
-                </a>
+                                x: 0,
-            </Link>
+                                transition: {
-            <Link href="/tutorials">
+                                    delay: 0.2 * index,
-                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                                    ease: "easeInOut",
-                    Gardening Tutorials and Guides
+                                    duration: 0.6,
-                </a>
+                                },
-            </Link>
+                            },
-            <Link href="/theory">
+                        }}
-                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                        className={`flex flex-col space-y-1 text-deepGreen hover:text-brightGreen duration-200 ease-in cursor-pointer ${
-                    Gardening Theory and Navel-Gazing
+                            item.style && item.style
-                </a>
+                        }`}
-            </Link>
+                    >
+                        {item.name}
+                    </motion.a>
+                </Link>
+            ))}
         </motion.div>
     );
 }
+
+const leafSVG = (
+    <svg
+        className="w-6 h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+        />
+    </svg>
+);

pages/_app.js

@@ -1,7 +1,13 @@
-import '../styles/tailwind.css'
+import "../styles/tailwind.css";
+import Sidemenu from "../components/Sidemenu";
 
-function MyApp({Component, pageProps}) {
+function MyApp({ Component, pageProps }) {
-    return <Component {...pageProps} />
+    return (
+        <div className="flex flex-col sm:flex-row">
+            <Sidemenu />
+            <Component {...pageProps} />
+        </div>
+    );
 }
 
-export default MyApp;
+export default MyApp;

pages/index.js

@@ -4,7 +4,6 @@ import Link from "next/link";
 import path from "path";
 import Container from "../components/Container";
 import Layout from "../components/Layout";
-import Sidemenu from "../components/Sidemenu";
 import Card from "../components/Card";
 import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 import { motion } from "framer-motion";
@@ -31,7 +30,6 @@ const tools = [
 export default function Index({ gardens }) {
     return (
         <Container>
-            <Sidemenu />
             <Layout>
                 <motion.div
                     initial="hidden"
@@ -49,7 +47,7 @@ export default function Index({ gardens }) {
                         },
                     }}
                 >
-                    <h1 className="sm:text-4xl  mb-6 font-semibold">
+                    <h1 className="sm:text-4xl text-black mb-6 font-semibold">
                         Garden of Digital Gardens
                     </h1>
                     <h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight">

tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
         extend: {
             fontFamily: {
                 sans: ["Poppins", ...defaultTheme.fontFamily.sans],
-                serif: ["Source Serif Pro", ...defaultTheme.fontFamily.mono],
+                serif: ["Source Serif Pro", ...defaultTheme.fontFamily.serif],
             },
             fontSize: {
                 // Set in Perfect Fourth typescale (1.33)
@@ -25,10 +25,11 @@ module.exports = {
             },
             colors: {
                 ...colors,
+                brightGreen: "#189191",
                 deepGreen: "#136464",
-                offWhite: "#F7F7F5",
+                offWhite: "#F5F4EF",
-                black: "#2B2B2B",
+                black: "#373435",
-                lightBlack: "#3F433E",
+                lightBlack: "#514B4C",
                 orangeRed: "#FF6148",
             },
         },