add TOC

content/posts/2008-05-04-using-the-canoscan-lide-500f-with-mac-os-x-leopard.md

@@ -12,6 +12,8 @@ tags:
   - macos
   - scanner
   - apple
+
+toc: true
 ---
 
 A while ago I [wrote about my problems](/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available. But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.

content/posts/2008-05-05-scan-images-directly-into-apple-aperture.md

@@ -13,6 +13,8 @@ tags:
   - tutorial
   - macos
   - apple
+
+toc: true
 ---
 
 Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation. So here's what you can do to scan directly into Aperture in 3 simple steps.

content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md

@@ -15,6 +15,8 @@ redirect_from:
   - /new-goodie-niepces-camera-obscura-and-the-history-of-the-first-photograph/
   - /4-more-icons-niepces-camera-obscura-v11/
   - /2008/06/niepces-camera-obscura-and-the-history-of-the-first-photograph/
+
+toc: true
 ---
 
 These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography.

content/posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md

@@ -6,6 +6,7 @@ image: ../media/ubuntu_mac_feature.jpg
 
 date: 2008-06-19 03:08:11+00:00
 updated: 2016-06-12 14:29:11+00:00
+toc: true
 
 tags:
   - design
@@ -35,24 +36,6 @@ Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version
 
 Here are the steps involved in setting up your Ubuntu box as a Mac file server:
 
-- [1. Modify and install Netatalk](#1-modify-and-install-netatalk)
-- [2. Configure Netatalk](#2-configure-netatalk)
-- [3. Configure shared Volumes](#3-configure-shared-volumes)
-- [4. Install Avahi](#4-install-avahi)
-- [5. Configure Avahi and advertise services](#5-configure-avahi-and-advertise-services)
-- [6. Configure Time Machine](#6-configure-time-machine)
-- [7. Conclusion, Problems and more informations](#7-conclusion-problems-and-more-informations)
-  - [Problems with creating the backup disk image](#problems-with-creating-the-backup-disk-image)
-  - [Firewall Settings](#firewall-settings)
-- ["Connection Failed"](#connection-failed)
-  - [-5014 error](#-5014-error)
-  - [Time Machine Full System Restore](#time-machine-full-system-restore)
-  - [Netatalk backup disk reaching maximum capacity](#netatalk-backup-disk-reaching-maximum-capacity)
-  - [More Articles](#more-articles)
-- [8. Downloading and using the Server Display Icons](#8-downloading-and-using-the-server-display-icons)
-  - [How to use the icons](#how-to-use-the-icons)
-- [9. Translations Of This Article](#9-translations-of-this-article)
-
 ## 1. Modify and install Netatalk
 
 ![Netatalk icon](../media/netatalk.png)[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
@@ -301,7 +284,7 @@ As [Kevin points out in the comments](http://www.kremalicious.com/2008/06/ubuntu
 
 In short you have to allow communications over port 548 and 5353.
 
-## "Connection Failed"
+### "Connection Failed"
 
 If you get one of those errors:
 

content/posts/2008-08-22-howto-create-a-mobile-encrypted-aperture-vault.md

@@ -12,6 +12,8 @@ tags:
   - tutorial
   - macos
   - apple
+
+toc: true
 ---
 
 ![Niepce's Aperture Vault](../media/niepces_aperture_vault256.png)When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.

content/posts/2015-08-02-simple-tor-setup-on-mac-os-x/index.md

@@ -8,6 +8,7 @@ date: 2015-08-02 21:57:30.912218000 +02:00
 updated: 2019-07-15 00:52:46+02:00
 
 featured: true
+toc: true
 
 tags:
   - tutorial
@@ -21,16 +22,6 @@ There are many reasons you might want to browse anonymously which can be accompl
 
 I'm using macOS Mojave (10.14) for the following instructions but it should work on almost any macOS version.
 
----
-
-- [Tor Browser](#tor-browser)
-- [Install Tor](#install-tor)
-- [Set network proxy settings via System Preferences](#set-network-proxy-settings-via-system-preferences)
-- [All in one go: start Tor & set network proxy settings automatically](#all-in-one-go-start-tor--set-network-proxy-settings-automatically)
-- [Non-standard apps](#non-standard-apps)
-
----
-
 ## Tor Browser
 
 ![Tor Browser](tor-browser.png)

content/posts/2018-11-01-gatsby-plugin-matomo/index.md

@@ -12,6 +12,7 @@ tags:
   - matomo
 
 featured: true
+toc: true
 ---
 
 Plugin for [Gatsby](https://www.gatsbyjs.org) to add tracking with the open-source analytics platform [Matomo](https://matomo.org) (formerly Piwik) onto a site, prioritizing user experience & privacy with sensible defaults.

content/posts/2019-04-09-the-commons-marketplace/index.md

@@ -10,13 +10,15 @@ tags:
   - blockchain
   - design
   - web3
+
+toc: true
 ---
 
 Explore, download, and publish 1000+ open data sets in Ocean’s Nile Network.
 
 ---
 
-> This article was [originally posted on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-data-marketplace-c57a44288314).
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-data-marketplace-c57a44288314).
 
 ---
 
@@ -116,6 +118,13 @@ We hope you dive in and start enjoying this vast (**over 1k!**) selection of fre
 
 ---
 
-> A follow up is available: [The Commons Marketplace in Pacific Network →](/the-commons-marketplace-in-pacific-network)
+## Learn more about the Commons Marketplace
+
+- [**The Commons Marketplace in Pacific Network**](/the-commons-marketplace-in-pacific-network)
+- [**Ocean Protocol and IPFS, Sitting In The Merkle Tree**](/ocean-protocol-and-ipfs-sitting-in-the-merkle-tree)
+
+---
+
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-data-marketplace-c57a44288314).
 
 ---

content/posts/2019-07-18-the-commons-marketplace-in-pacific-network/index.md

@@ -10,13 +10,15 @@ tags:
   - blockchain
   - design
   - web3
+
+toc: true
 ---
 
 We’ve been busy over the last few months, further developing the Commons Marketplace alongside creating the Pacific PoA Network.
 
 ---
 
-> This article was [originally posted on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-marketplace-in-pacific-network-4bcf2f595721).
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-marketplace-in-pacific-network-4bcf2f595721).
 
 ---
 
@@ -166,3 +168,16 @@ If you are interested in sharing your data, you can use the Commons to publish d
 - [**Publish →**](https://commons.oceanprotocol.com/publish)
 
 If you have large amounts of data that you are interested in sharing, please contact us about supporting you to perform bulk data registration.
+
+---
+
+## Learn more about the Commons Marketplace
+
+- [**Ocean Protocol and IPFS, Sitting In The Merkle Tree**](/ocean-protocol-and-ipfs-sitting-in-the-merkle-tree)
+- [**The Commons Data Marketplace**](/the-commons-data-marketplace)
+
+---
+
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/the-commons-marketplace-in-pacific-network-4bcf2f595721).
+
+---

content/posts/2019-10-24-ocean-protocol-and-ipfs-sitting-in-the-merkle-tree/index.md

@@ -11,13 +11,15 @@ tags:
   - design
   - ipfs
   - web3
+
+toc: true
 ---
 
 IPFS is now integrated into the Ocean Protocol stack, allowing you to take advantage of decentralized asset file hosting.
 
 ---
 
-> This article was [originally posted on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/ocean-ipfs-integration-store-asset-files-43c623c356d7).
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/ocean-ipfs-integration-store-asset-files-43c623c356d7).
 
 ---
 
@@ -124,4 +126,10 @@ And finally, further work may be done to store files encrypted on IPFS and imple
 ## Learn more about the Commons Marketplace
 
 - [**The Commons Marketplace in Pacific Network**](/the-commons-marketplace-in-pacific-network)
-- [**The Commons Data Marketplace**](https://blog.oceanprotocol.com/the-commons-data-marketplace-c57a44288314)
+- [**The Commons Data Marketplace**](/the-commons-data-marketplace)
+
+---
+
+> This article was originally posted [on Medium in the Ocean Protocol blog](https://blog.oceanprotocol.com/ocean-ipfs-integration-store-asset-files-43c623c356d7).
+
+---

gatsby-config.js

@@ -51,7 +51,6 @@ module.exports = {
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
-              maintainCase: true,
               icon: '<span>#</span>'
             }
           },

src/@types/Post.d.ts

@@ -19,6 +19,7 @@ export interface Frontmatter {
     publicURL?: string
   }
   changelog?: string
+  toc?: boolean
 }
 
 export interface Post {
@@ -29,4 +30,5 @@ export interface Post {
   fields?: Fields
   rawMarkdownBody?: string
   fileAbsolutePath?: string
+  tableOfContents?: string
 }

src/components/molecules/RelatedPosts.tsx

@@ -91,7 +91,9 @@ export default function RelatedPosts({
           .sort(() => 0.5 - Math.random())
           .slice(0, 6)
           .map(({ node }: { node: Post }) => (
-            <PostTeaser key={node.id} post={node} />
+            <li key={node.id}>
+              <PostTeaser post={node} />
+            </li>
           ))}
       </ul>
       <button className={`${styles.button} btn`} onClick={refreshPosts}>

src/components/molecules/Search/SearchResults.tsx

@@ -56,11 +56,9 @@ function SearchResultsPure({
                   ({ node }: { node: Post }) => node.fields.slug === page.slug
                 )
                 .map(({ node }: { node: Post }) => (
-                  <PostTeaser
+                  <li key={page.slug}>
-                    key={page.slug}
+                    <PostTeaser post={node} toggleSearch={toggleSearch} />
-                    post={node}
+                  </li>
-                    toggleSearch={toggleSearch}
-                  />
                 ))
             )}
           </ul>

src/styles/_alerts.scss

@@ -5,12 +5,17 @@
   margin-bottom: $spacer;
   border-radius: $border-radius;
   border: 1px solid transparent;
-  box-shadow: 0 1px 3px rgba($brand-grey, 0.1), inset 0 1px 0 #fff;
+  box-shadow: 0 3px 10px rgba($brand-grey, 0.1), inset 0 1px 0 #fff;
 
   @media (min-width: $screen-sm) {
     padding: $spacer;
   }
 
+  .dark & {
+    box-shadow: 0 3px 10px rgba(black, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+
   > p,
   > ul {
     margin-bottom: 0;
@@ -38,4 +43,10 @@
   color: darken($alert-info, 60%);
   background: $alert-info;
   border-color: darken($alert-info, 10%);
+
+  .dark & {
+    color: darken($alert-info, 40%);
+    background: darken($alert-info, 85%);
+    border-color: darken($alert-info, 90%);
+  }
 }

src/templates/Post/PostContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Changelog from '../../components/atoms/Changelog'
 import { Post } from '../../@types/Post'
+import PostToc from './PostToc'
 
 // Remove lead paragraph from content
 const PostContent = ({ post }: { post: Post }) => {
@@ -20,6 +21,9 @@ const PostContent = ({ post }: { post: Post }) => {
 
   return (
     <>
+      {post.frontmatter.toc && (
+        <PostToc tableOfContents={post.tableOfContents} />
+      )}
       <div dangerouslySetInnerHTML={{ __html: content }} />
       {changelog && <Changelog repo={changelog} />}
     </>

src/templates/Post/PostTeaser.module.scss

@@ -1,6 +1,12 @@
 @import 'variables';
 @import 'mixins';
 
+.post {
+  figure {
+    margin: 0;
+  }
+}
+
 .postTitle {
   display: inline-block;
   margin-top: $spacer / 4;

src/templates/Post/PostTeaser.tsx

@@ -15,15 +15,17 @@ export default function PostTeaser({
   const { slug } = post.fields
 
   return (
-    <li>
+    <Link
-      <Link to={slug} onClick={toggleSearch && toggleSearch}>
+      className={styles.post}
-        {image ? (
+      to={slug}
-          <Image fluid={image.childImageSharp.fluid} alt={title} />
+      onClick={toggleSearch && toggleSearch}
-        ) : (
+    >
-          <div className={styles.empty} />
+      {image ? (
-        )}
+        <Image fluid={image.childImageSharp.fluid} alt={title} />
-        <h4 className={styles.postTitle}>{title}</h4>
+      ) : (
-      </Link>
+        <div className={styles.empty} />
-    </li>
+      )}
+      <h4 className={styles.postTitle}>{title}</h4>
+    </Link>
   )
 }

src/templates/Post/PostToc.module.scss

@@ -0,0 +1,17 @@
+@import 'variables';
+@import 'mixins';
+
+.toc {
+  background: rgba(#fff, 0.5);
+  padding: $spacer;
+  border-radius: $border-radius;
+  margin-bottom: $spacer * $line-height;
+
+  :global(.dark) & {
+    background: darken($body-background-color--dark, 2%);
+  }
+
+  ul {
+    margin: 0;
+  }
+}

src/templates/Post/PostToc.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './PostToc.module.scss'
+
+const PostToc = ({ tableOfContents }: { tableOfContents: string }) => {
+  return (
+    <nav
+      className={styles.toc}
+      dangerouslySetInnerHTML={{ __html: tableOfContents }}
+    />
+  )
+}
+
+export default PostToc

src/templates/Post/index.tsx

@@ -46,7 +46,9 @@ export default function Post({
               original={image.childImageSharp.original}
             />
           )}
-          {image && image.fields && <Exif exif={image.fields.exif} />}
+          {type === 'photo' && image && image.fields && (
+            <Exif exif={image.fields.exif} />
+          )}
 
           {type !== 'photo' && <PostContent post={post} />}
 
@@ -93,6 +95,7 @@ export const pageQuery = graphql`
             }
           }
         }
+        toc
         author
         updated
         tags
@@ -108,6 +111,7 @@ export const pageQuery = graphql`
         githubLink
       }
       rawMarkdownBody
+      tableOfContents(maxDepth: 2)
     }
   }
 `