Merge pull request #15 from aravindballa/add-styles

.npmignore

@@ -0,0 +1 @@
+gatsby-config-b.js

gatsby-config.js

@@ -8,8 +8,9 @@ module.exports = ({
   rootPath = '/',
   rootNote = 'about',
   linkifyHashtags = false,
-  hideDoubleBrackets = false,
+  hideDoubleBrackets = true,
   mdxOtherwiseConfigured = false,
+  themeUIOtherwiseConfigured = false,
 }) => ({
   siteMetadata: {
     title: 'My Notes',
@@ -29,5 +30,6 @@ module.exports = ({
         mdxOtherwiseConfigured,
       },
     },
+    !themeUIOtherwiseConfigured && `gatsby-plugin-theme-ui`,
   ],
 });

package.json

@@ -1,12 +1,16 @@
 {
   "name": "gatsby-theme-andy",
-  "version": "0.1.4",
+  "version": "0.2.0-alpha.1",
   "description": "A Gatsby theme to build Andy style websites.",
   "main": "index.js",
   "keywords": [
     "gatsby",
     "gatsby-theme",
-    "andy"
+    "andy",
+    "garden",
+    "digital garden",
+    "second brain",
+    "andy matuschak"
   ],
   "author": "Aravind Balla <[email protected]> (https://aravindballa.com)",
   "repository": {
@@ -24,18 +28,23 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@mdx-js/mdx": "^1.5.8",
-    "@mdx-js/react": "^1.5.8",
-    "gatsby": "^2.20.23",
-    "gatsby-plugin-mdx": "^1.1.8",
-    "gatsby-transformer-remark": "^2.7.2",
+    "@mdx-js/mdx": "^1.6.6",
+    "@mdx-js/react": "^1.6.6",
+    "gatsby": "^2.24.1",
+    "gatsby-plugin-mdx": "^1.2.25",
+    "gatsby-transformer-remark": "^2.8.25",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
   "dependencies": {
-    "@aengusm/gatsby-theme-brain": "^1.0.12",
-    "@tippyjs/react": "^4.0.2",
+    "@aengusm/gatsby-theme-brain": "^1.0.13",
+    "@tippyjs/react": "^4.1.0",
+    "gatsby-plugin-postcss": "^2.3.11",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "querystring": "^0.2.0",
-    "react-stacked-pages-hook": "^0.2.0"
+    "react-helmet": "^6.1.0",
+    "react-stacked-pages-hook": "^0.4.4",
+    "tailwindcss": "^1.4.6",
+    "theme-ui": "^0.3.1"
   }
 }

readme.md

@@ -6,32 +6,73 @@
 <img alt="npm" src="https://img.shields.io/npm/v/gatsby-theme-andy">
 </p>
 
-This is inspired by the work of [Andy](https://notes.andymatuschak.org/About_these_notes) and is based on [gatsby-theme-brain](https://github.com/aengusmcmillin/gatsby-theme-brain). Also uses [react-stacked-pages-hook](https://github.com/mathieudutour/gatsby-n-roamresearch/tree/master/packages/react-stacked-pages-hook) for staking up the notes side by side. This has the functionality of stacking up and backlinking with out any style elements.
+This is inspired by the work of [Andy](https://notes.andymatuschak.org/About_these_notes) and is based on [gatsby-theme-brain](https://github.com/aengusmcmillin/gatsby-theme-brain). Also uses [react-stacked-pages-hook](https://github.com/mathieudutour/gatsby-n-roamresearch/tree/master/packages/react-stacked-pages-hook) for staking up the notes side by side. And unleashes the power of [theme-ui](https://theme-ui.com/home) for easy themeable components.
 
 Simple Demo - https://codesandbox.io/s/gatsby-theme-andy-demo-tnv6r
 
 [https://notes.aravindballa.com](https://notes.aravindballa.com/) uses this with a few custom components and custom styles.
 
-## Usage
+## Getting started
 
-- Create a new Gatsby project
-- `yarn add gatsby-theme-andy`
-- Add `gatsby-theme-andy` to plugins in `gatsby-config.js`. Add a `title` in `siteMetadata` in your config.
-- Create directory `content` at root and add `md` files.
-- `gatsby develop`
+### From scratch
+
+- Create a new directory and from that directory, run `npm init`.
+- Add all the dependencies `yarn add gatsby react react-dom gatsby-theme-andy`.
+- Create a file `gatsby-config.js`. Now we add `gatsby-theme-andy` to plugins and a `title` in `siteMetadata` in that config.
+
+  ```js
+  module.exports = {
+    siteMetadata: {
+      title: 'My Notes',
+    },
+    plugins: [`gatsby-theme-andy`],
+  };
+  ```
+
+- Create directory `content` at root and add a few `md` files. We can use `[[]]` syntax to interlink the pages. Look at [this directory](./content) for an example.
+- Now we add these scripts below to `package.json` and run `yarn develop`.
+
+  ```json
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "clean": "gatsby clean"
+  },
+  ```
+
+### Adding to an exsisting project
+
+> _Coming soon_
 
 ## Configuration
 
-All the plugin options valid for [gatsby-theme-brain](https://github.com/aengusmcmillin/gatsby-theme-brain) can be given to this theme as well.
+All the plugin options valid for [gatsby-theme-brain](https://github.com/aengusmcmillin/gatsby-theme-brain) can be given to this theme as well. Other than those, we have
+
+| Option                       | Default Value | Description                                                    |
+| ---------------------------- | ------------- | -------------------------------------------------------------- |
+| `themeUIOtherwiseConfigured` | `false`       | Enable this if you have already setup theme-ui in your project |
+
+### Configuring the theme
+
+This project uses `theme-ui` which allows us to easily theme the site. You can customize the theme by adding a file at `./gatsby-theme-andy/theme.js`. The default values for the theme are at [src/theme.js](./src/theme.js). You can copy these to the new file you created and edit the values as you wish. 😎
+
+<!-- TODO add example from notes.aravindballa.com after updating it -->
+
+### Shadowing components
 
-You can shadow/override few componenets in your project. In your directory, you would need to place them at `./gatsby-theme-andy/src/components`. Have a look at the default components to see what `props` they get. Components you can override -
+You can shadow/override a few components for increased customizability. In your project, you would need to place them at `./gatsby-theme-andy/src/components`. ⚡️Have a look at the default components to see what `props` they get. Components you can override -
 
-- [Popover.js](https://github.com/aravindballa/gatsby-theme-andy/blob/master/src/components/Popover.js) - This is the component which is shown when you hover over an internal link.
-- [RefferedBlock.js](https://github.com/aravindballa/gatsby-theme-andy/blob/master/src/components/ReferredBlock.js) - The block which contains all the references (Referred in section) to the note. This is at the bottom of the page.
-- [BrainNote.js](https://github.com/aravindballa/gatsby-theme-andy/blob/master/src/components/BrainNote.js) - This is the note page.
-- [BrainNoteContainer.js](https://github.com/aravindballa/gatsby-theme-andy/blob/master/src/components/BrainNoteContainer.js) - This is the layout page that stacks up the notes.
-- [Tippy.js](https://github.com/aravindballa/gatsby-theme-andy/blob/master/src/components/Tippy.js) - This has the TippyJS configs. You'll have to override this if you want to change the props to Tippy.
+| Component                                                       | Description                                                                                                                                                                               |
+| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [BrainNote.js](./src/components/BrainNote.js)                   | This is the note page and it is responsible for collecting all the popups and passing them to the `MdxComponents.js`. It's really a cool way of doing it.                                 |
+| [BrainNoteContainer.js](./src/components/BrainNoteContainer.js) | This is the layout page that stacks up the notes side by side.                                                                                                                            |
+| [Popover.js](./src/components/Popover.js)                       | The component that pops up when you hover over an internal link.                                                                                                                          |
+| [Header.js](./src/components/Header.js)                         | The top bar of the website. If you just want to change the text, you can do it in `gatsby-config.js -> siteMetadata -> title`.                                                            |
+| [Footer.js](./src/components/Footer.js)                         | Footer that contains the `ReferredBlock` as well as the message at the bottom of the note.                                                                                                |
+| [RefererdBlock.js](./src/components/ReferredBlock.js)           | The block which contains all the references (Referred in section) to the note.                                                                                                            |
+| [Tippy.js](./src/components/Tippy.js)                           | This has the TippyJS configs. You can configure things like the [hover animations](https://atomiks.github.io/tippyjs/v6/animations/) here. Remember to change the css import as well.     |
+| [MdxComponents.js](./src/components/MdxComponents.js)           | This has a custom component `AnchorTag` which gets the popover as a prop and displays it when we hover over an internal link. If you wish to add extra MDX components, this is the place! |
 
 ## Contribution
 
-This project is relatively new. Please report issues you face and make PRs by forking the project.
+This project is relatively new. Please report issues you face and yes, I'd be happy to accept PRs. 😉

src/components/BrainNote.js

@@ -1,34 +1,40 @@
+/** @jsx jsx */
 import React from 'react';
-import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
-import { MDXProvider } from '@mdx-js/react';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+import { Styled, ThemeProvider, jsx } from 'theme-ui';
 
+import useWindowWidth from '../utils/useWindowWidth';
 import components from './MdxComponents';
+import Footer from './Footer';
 import Popover from './Popover';
-import ReferredBlock from './ReferredBlock';
+
+import theme from '../theme';
 
 const BrainNote = ({ note }) => {
-  note.inboundReferenceNotes = note.inboundReferenceNotes || [];
-  note.outboundReferenceNotes = note.outboundReferenceNotes || [];
+  const [width] = useWindowWidth();
 
   const popups = {};
-  note.outboundReferenceNotes
-    .filter((reference) => !!reference.childMdx.excerpt)
-    .forEach((ln, i) => {
-      popups[ln.slug] = <Popover reference={ln} />;
-    });
+  if (note.outboundReferenceNotes) {
+    note.outboundReferenceNotes
+      .filter((reference) => !!reference.childMdx.excerpt)
+      .forEach((ln, i) => {
+        popups[ln.slug] = <Popover reference={ln} />;
+      });
+  }
 
-  const AnchorTagWithPopups = (props) => <components.a {...props} popups={popups} />;
+  const AnchorTagWithPopups = (props) => (
+    <components.a {...props} popups={popups} noPopups={width < 768} />
+  );
 
   return (
-    <MDXProvider components={{ a: AnchorTagWithPopups }}>
-      <div id="note">
-        <div>
-          <h1>{note.title}</h1>
-          <MDXRenderer>{note.childMdx.body}</MDXRenderer>
-        </div>
-        <ReferredBlock references={note.inboundReferenceNotes} />
+    <ThemeProvider theme={theme} components={{ ...components, a: AnchorTagWithPopups }}>
+      <div sx={{ flex: '1' }}>
+        <Styled.h1 sx={{ my: 3 }}>{note.title}</Styled.h1>
+        <MDXRenderer>{note.childMdx.body}</MDXRenderer>
       </div>
-    </MDXProvider>
+
+      <Footer references={note.inboundReferenceNotes} />
+    </ThemeProvider>
   );
 };