gatsby-theme-pkm-garden

Community Plugin

Description

This creates a file based digital garden to help you curate and develop your thinking.

Inspiration

There has been a lot of inspiration for this and we’ll keep digging into more and more ways to make this a richer experience. Here are some of the sources:

Conventions

SCREENSHOT

We use Topic to denote groups of Notes. Here is an overview of the component structure.

<Breadcrumbs />
<Topics>

  <TopicList>
    <Topics>
  </TopicList>

  <NotesList>
    <Notes>
      <Note />
    <Notes>
  </NotesList>

</Topics>

Topics can be infinitely nested.

Notes are in .md and .mdx format in relevant directories.

Dependencies

gatsby-plugin-mdx
lodash
is-present

Note, the original styling is using Tailwind classes so you’ll need to implement your own here.

Learning Resources

TODO

How to install

Run npm install gatsby-theme-pkm-garden

Add the module to your gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...
    'gatsby-theme-pkm-garden'
    ...
  ]
}

Create the directory /content/wiki which will store your wiki.

Available options

At the moment, the top-level component has the content that was extracted from the original blog.

I’m working on making the components more flexible but for the moment, if you want to get going, you need to shadow src/components/TopicList.js in your own Gatsby project.

This is what the current one looks like:

export default ({ directories, location }) => {
  const isTopLevel = _.get(location, 'pathname', '/') === '/wiki'
  return (
    <div>
      <div className="content">
        <h1 className="text-center text-3xl py-6">Personal Wiki</h1>
        <Breadcrumbs location={location} />
        {isTopLevel && (
          <div className="py-4">
            <p className="py-2">
              This is my attempt to plant and grow a `digital garden`. I'll
              attempt to gather things I'm learning and groups of topics where
              my thinking is growing. The hope is this will be useful for me and
              for you.
            </p>
            <p className="py-2">
              This is an experiment at the moment but hopefully can grow into
              something useful. There are some placeholder topics to show how it
              will work with more content.
            </p>
            <p className="pt-4">Here are my next tasks:</p>
            <ol className="list-disc ml-4 py-4">
              <li className="line-through">
                Have something similar to{' '}
                <a href="https://busterbenson.com/piles/">piles</a> on each
                topic card.{' '}
              </li>
              <li>Deal with images in directories</li>
              <li>Improve styling</li>
            </ol>
          </div>
        )}
        <TopicList directories={directories} location={location} />
        {!isTopLevel && (
          <NoteList directories={directories} location={location} />
        )}
      </div>
    </div>
  )
}

You can change the content in the isTopLevel render to personalize your version more.

TODO:

Custom wiki path
Other types of content (images, snippets, etc)
Specific pages for types of content (Books, Lectures, Websites, Talks, Courses, etc)

When do I use this plugin?

When creating your digital garden (see links up above).

Examples of usage

@dolearning - personal knowledge base to curate digital notes.

How to query for data (source plugins only)

At the moment we’re using a set query - going forward it would be good to have this customized.

How to run tests

TODO

How to develop locally

Clone the repo and run yarn workspace www develop to run the example version.

How to contribute

Raise an issue on the repo.