feat: sort by note dates, styling improvements and other fixes (#91)

* feat: first pass at better sort by date functionality * feat: more dateModified change * refactor: styling improvements * fix: app used to not build when the modified date could not be found * fix: mdx schema modifications * feat: update styles and change how modified date is used * add the file creation/modified timestamps * chore: bump gatsby in example * fix: #80 basePath bug * fix: broken untagged and 404 pages * fix: search * chore: remove references to sortByDate in config * feat: update nav styles * feat: finish note sorting * feat: show dates in examples * feat: improve notelist item styling across all viewports * fix: prevent note page metadata icons from shrinking on small screens * fix: alphabetical sorting when items that start with a lowercase letter occur * feat: various styling improvements * fix: sorting for notes that don’t have a date * feat: improve dark mode sort buttons * docs: update readme
mrmartineau · Jan 20, 2021 · fb78f28 · fb78f28
1 parent a307961
commit fb78f28
Show file tree

Hide file tree

Showing 50 changed files with 4,113 additions and 4,737 deletions.
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ yarn build
 | `contentPath`              | `/content/notes`                                          | Location of notes content                                                                                                                                                                                                         |
 | `logo`                     | `''` (empty string)                                       | Path to your site's logo. Will be used as the `src` attribute for an image                                                                                                                                                        |
 | `showDescriptionInSidebar` | `true`                                                    | Show `config.site.description` in the sidebar                                                                                                                                                                                     |
+| `showDate`                 | `false`                                                   | Show the note's modified date                                                                                                                                                                                                     |
 | `gitRepoContentPath`       | `''`                                                      | Set the location for your notes if they're hosted online, e.g. your git repo. This will show a "Edit this page" link underneath each note                                                                                         |
 | `showThemeInfo`            | `true`                                                    | Show info about this Gatsby theme                                                                                                                                                                                                 |
 | `mdxOtherwiseConfigured`   | `true`                                                    | Configure `gatsby-plugin-mdx`. Note that most sites will not need to use this flag. If your site has already configured `gatsby-plugin-mdx` separately, set this flag `false`.                                                    |
@@ -125,6 +126,7 @@ module.exports = {
         showDescriptionInSidebar: true,
         showThemeInfo: false,
         logo: 'https://brand.zander.wtf/Avatar.png',
+        showDate: true,
 
         // Opensearch is used to enhance the search on your site.
         // If you want to add it, ensure you set a `siteUrl`
@@ -175,6 +177,46 @@ The `emoji` frontmatter item will add an emoji beside the title on listing views
 
 The `tags` array frontmatter item allows you to add as many tags to a note as you'd like.
 
+#### Dates
+
+The `modified` frontmatter item allows you set a date for your note. This means they can then be sorted (ascending & descending) when viewed in the note list pages. This was introduced in v2.0.0.
+
+The `created` frontmatter item works in a similar way, but it is not being used at the moment so it can be ommitted.
+
+##### 1. Add new `modified` key to your YAML frontmatter
+
+This will mean that you have to update all your notes with a timestamp.
+
+```yaml
+---
+title: Storybook
+tags:
+  - testing
+emoji: 📖
+link: 'https://storybook.js.org'
+created: 2020-02-27T23:02:00.000Z # this is not used by the theme at the moment
+modified: 2021-01-16T10:31:32.000Z
+
+# any valid ISO timestamp should work, like this:
+# modified: 2021-01-16
+---
+
+```
+
+If you have many notes and want to speed up adding all those timestamps, I created an npm package ([`frontmatter-date-setter`](https://github.com/mrmartineau/frontmatter-date-setter)) to automate it based on your last git or file modification dates.
+
+Use the `frontmatter-date-setter` (or `fds`) CLI like so: (where `notes` is the directory of all your notes)
+
+```sh
+fds --directory=notes --debug
+```
+
+The package does have a few issues that I'd like to improve. For example, it will convert most emojis to unicode strings, and will format other parts of your frontmatter. So take care when you run it.
+
+##### 2. Set `showDate: true` in `gatsby-config.js`
+
+Setting this value in this plugin's config renders the interface to switch to date sorting as well as showing the date in other parts of the interface.
+
 ### Advanced usage
 
 #### PWA
@@ -194,6 +236,7 @@ Turn your code notes into a PWA using [this extra config](https://github.com/mrm
     theme_color: `hsl(345, 100%, 69%)`,
     display: `standalone`,
     icon: `static/logo.png`,
+    showDate: true,
   },
 },
 {

diff --git a/example/code-notes/annotations.mdx b/example/code-notes/annotations.mdx
@@ -1,5 +1,7 @@
 ---
 title: Annotations
+created: 2020-07-15T11:36:18.000Z
+modified: 2020-07-15T12:12:28.000Z
 ---
 
 Note annotations are made possible using a React port of [Rough Notation](https://roughnotation.com). Annotations can be added by wrapping your text with one of the components provided in your notes.

diff --git a/example/code-notes/deeply/nested/note.md b/example/code-notes/deeply/nested/note.md
@@ -1,5 +1,7 @@
 ---
 title: Notes in subfolders
+created: 2020-06-16T11:30:46.000Z
+modified: 2020-06-16T11:30:46.000Z
 ---
 
 Notes can reside anywhere in the content directory's tree. This note is located at `/deeply/nested/note.md`
diff --git a/example/code-notes/markdown-features.md b/example/code-notes/markdown-features.md
@@ -2,19 +2,21 @@
 title: Markdown features
 tags:
   - markdown
+created: 2020-03-20T11:04:49.000Z
+modified: 2020-06-22T11:55:48.000Z
 ---
 
 > This theme adds a few additional features to standard markdown.
 
 ## Images
 
-![](./opengraph.png)
-![](./logo.png)
+![](/opengraph.png)
+![](/logo.png)
 
 Embed images using the usual markdown syntax.
 
 ```md
-![](./opengraph.png)
+![](/opengraph.png)
 ```
 
 ## Fenced code blocks
@@ -31,10 +33,10 @@ To highlight lines, wrap line with this comment before: `// highlight-start` and
 
 ```css
 .grid {
-// highlight-start
+  // highlight-start
   display: grid;
   grid-gap: 30px;
-// highlight-end
+  // highlight-end
   grid-template-columns: repeat(auto-fill, 112px);
   /* or this */
   grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
@@ -89,6 +91,4 @@ Tables are responsive by default. If you need to limit line length for a cell, a
 
 ## Link truncation
 
-This uses [remark-truncate-links](https://github.com/GaiAma/Coding4GaiAma/tree/master/packages/remark-truncate-links) to truncate links
-
-https://github.com/mrmartineau/gatsby-theme-code-notes
+This uses [remark-truncate-links](https://github.com/GaiAma/Coding4GaiAma/tree/master/packages/remark-truncate-links) to truncate links. e.g. https://github.com/mrmartineau/gatsby-theme-code-notes
diff --git a/example/code-notes/mdx.mdx b/example/code-notes/mdx.mdx
@@ -3,9 +3,11 @@ title: MDX example
 tags:
   - mdx
 emoji: 👩‍🚀
+created: 2020-03-13T14:16:50.000Z
+modified: 2020-03-20T11:04:49.000Z
 ---
 
-import {Button} from 'theme-ui'
+import { Button } from 'theme-ui'
 
 This example uses MDX..
 
@@ -14,10 +16,11 @@ This example uses MDX..
 <Button onClick={() => alert('You clicked me')}>Click me</Button>
 
 ```jsx
-import {Button} from 'theme-ui'
+import { Button } from 'theme-ui'
 
-<Button onClick={() => alert('You clicked me')}>Click me</Button>
+;<Button onClick={() => alert('You clicked me')}>Click me</Button>
 ```
+
 ### JSX
 
 <div style={{ padding: '20px', backgroundColor: 'tomato', fontSize: '30px' }}>
@@ -30,7 +33,6 @@ import {Button} from 'theme-ui'
 </div>
 ```
 
-
 ## `iframe`
 
 <iframe

diff --git a/example/code-notes/note-frontmatter.md b/example/code-notes/note-frontmatter.md
@@ -3,7 +3,9 @@ title: Note frontmatter
 emoji: 😃
 tags:
   - metadata
-link: https://zander.wtf
+link: 'https://zander.wtf'
+created: 2020-05-11T09:59:36.000Z
+modified: 2020-06-11T10:08:56.000Z
 ---
 
 Frontmatter information (written in YAML) can be used to add metadata and extra information for your notes

diff --git a/example/code-notes/syntax-highlighting.md b/example/code-notes/syntax-highlighting.md
@@ -8,6 +8,8 @@ tags:
   - JavaScript
   - yaml
 emoji: 🌭
+created: 2020-03-13T14:16:50.000Z
+modified: 2020-06-11
 ---
 
 Here is some `inline code`..

diff --git a/example/code-notes/untagged.md b/example/code-notes/untagged.md
@@ -1,5 +1,7 @@
 ---
 title: Untagged
+created: 2020-02-09T21:18:32.000Z
+modified: 2020-03-24T20:49:43.000Z
 ---
 
 This is an untagged note. If there are any notes that are untagged, a new navigation item ('Untagged') will be added.
diff --git a/example/gatsby-config.js b/example/gatsby-config.js
@@ -23,6 +23,7 @@ module.exports = {
           siteContact: 'https://twitter.com/MrMartineau',
           siteDescription: 'A Gatsby theme for storing your code-related notes',
         },
+        showDate: true,
       },
     },
   ],

diff --git a/example/package.json b/example/package.json
@@ -15,7 +15,7 @@
     "start": "gatsby serve"
   },
   "dependencies": {
-    "gatsby": "^2.23.12",
+    "gatsby": "^2.28.0",
     "gatsby-theme-code-notes": "*",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"

diff --git a/gatsby-theme-code-notes/README.md b/gatsby-theme-code-notes/README.md
@@ -101,6 +101,7 @@ yarn build
 | `contentPath`              | `/content/notes`                                          | Location of notes content                                                                                                                                                                                                         |
 | `logo`                     | `''` (empty string)                                       | Path to your site's logo. Will be used as the `src` attribute for an image                                                                                                                                                        |
 | `showDescriptionInSidebar` | `true`                                                    | Show `config.site.description` in the sidebar                                                                                                                                                                                     |
+| `showDate`                 | `false`                                                   | Show the note's modified date                                                                                                                                                                                                     |
 | `gitRepoContentPath`       | `''`                                                      | Set the location for your notes if they're hosted online, e.g. your git repo. This will show a "Edit this page" link underneath each note                                                                                         |
 | `showThemeInfo`            | `true`                                                    | Show info about this Gatsby theme                                                                                                                                                                                                 |
 | `mdxOtherwiseConfigured`   | `true`                                                    | Configure `gatsby-plugin-mdx`. Note that most sites will not need to use this flag. If your site has already configured `gatsby-plugin-mdx` separately, set this flag `false`.                                                    |
@@ -125,6 +126,7 @@ module.exports = {
         showDescriptionInSidebar: true,
         showThemeInfo: false,
         logo: 'https://brand.zander.wtf/Avatar.png',
+        showDate: true,
 
         // Opensearch is used to enhance the search on your site.
         // If you want to add it, ensure you set a `siteUrl`
@@ -175,6 +177,46 @@ The `emoji` frontmatter item will add an emoji beside the title on listing views
 
 The `tags` array frontmatter item allows you to add as many tags to a note as you'd like.
 
+#### Dates
+
+The `modified` frontmatter item allows you set a date for your note. This means they can then be sorted (ascending & descending) when viewed in the note list pages. This was introduced in v2.0.0.
+
+The `created` frontmatter item works in a similar way, but it is not being used at the moment so it can be ommitted.
+
+##### 1. Add new `modified` key to your YAML frontmatter
+
+This will mean that you have to update all your notes with a timestamp.
+
+```yaml
+---
+title: Storybook
+tags:
+  - testing
+emoji: 📖
+link: 'https://storybook.js.org'
+created: 2020-02-27T23:02:00.000Z # this is not used by the theme at the moment
+modified: 2021-01-16T10:31:32.000Z
+
+# any valid ISO timestamp should work, like this:
+# modified: 2021-01-16
+---
+
+```
+
+If you have many notes and want to speed up adding all those timestamps, I created an npm package ([`frontmatter-date-setter`](https://github.com/mrmartineau/frontmatter-date-setter)) to automate it based on your last git or file modification dates.
+
+Use the `frontmatter-date-setter` (or `fds`) CLI like so: (where `notes` is the directory of all your notes)
+
+```sh
+fds --directory=notes --debug
+```
+
+The package does have a few issues that I'd like to improve. For example, it will convert most emojis to unicode strings, and will format other parts of your frontmatter. So take care when you run it.
+
+##### 2. Set `showDate: true` in `gatsby-config.js`
+
+Setting this value in this plugin's config renders the interface to switch to date sorting as well as showing the date in other parts of the interface.
+
 ### Advanced usage
 
 #### PWA
@@ -194,6 +236,7 @@ Turn your code notes into a PWA using [this extra config](https://github.com/mrm
     theme_color: `hsl(345, 100%, 69%)`,
     display: `standalone`,
     icon: `static/logo.png`,
+    showDate: true,
   },
 },
 {

diff --git a/gatsby-theme-code-notes/gatsby-browser.js b/gatsby-theme-code-notes/gatsby-browser.js
@@ -1,6 +1,3 @@
-const React = require('react')
-const { SearchProvider } = require('./src/components/Search')
+import { wrapRootElementComponent } from './src/gatsby/wrapRootElement'
 
-exports.wrapRootElement = ({ element }) => {
-  return <SearchProvider>{element}</SearchProvider>
-}
+export const wrapRootElement = wrapRootElementComponent
diff --git a/gatsby-theme-code-notes/gatsby-config.js b/gatsby-theme-code-notes/gatsby-config.js
@@ -28,6 +28,8 @@ module.exports = (options) => {
       resolution: 9,
     },
     openSearch = {},
+    showDate = false,
+    basePath = '/',
   } = options
 
   return {
@@ -39,6 +41,8 @@ module.exports = (options) => {
       showDescriptionInSidebar,
       logo,
       openSearch,
+      showDate,
+      basePath,
     },
     plugins: [
       'gatsby-plugin-typescript',