add tags page

config.js

@@ -29,6 +29,10 @@ module.exports = {
     {
       title: 'Goodies',
       link: '/tags/goodies'
+    },
+    {
+      title: 'Tags',
+      link: '/tags'
     }
   ]
 }

content/posts/2007-03-01-adjustment-tool-guide-for-aperture-152.md

@@ -7,6 +7,7 @@ date: 2007-03-01 20:50:32+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 The Adjustment Tool Guide gives an in-depth-view of the Adjustment tool in Aperture. The documentary provided by Apple isn't that what most people were looking for. But Kendall Gelner wrote his own Adjustment Tools Guide originally for the Aperture Version 1.0.1.

content/posts/2007-06-11-finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs.md

@@ -1,6 +1,6 @@
 ---
 type: post
-title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs
+title: 'Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for Intel Macs'
 image: ../media/canoscanlide500f.jpg
 date: 2007-06-11 18:44:28+00:00
 
@@ -9,6 +9,7 @@ tags:
   - tutorial
   - macos
   - scanner
+  - apple
 
 redirect_from:
   - /2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/

content/posts/2008-04-04-aperture-file-types.md

@@ -11,6 +11,7 @@ tags:
   - icon
   - macos
   - aperture
+  - apple
 
 redirect_from:
   - '/new-goodies-aperture-file-types-icons/'

content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md

@@ -11,6 +11,7 @@ tags:
   - design
   - macos
   - icon
+  - apple
 ---
 
 Nice article on Smashing Magazine by Kate England. It's the Human Interface Guidelines for icons in a nutshell: [Mac OS X Leopard: Designer’s Guide to Icons](http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons):

content/posts/2008-04-06-9-lesser-known-safari-features-worth-switching-for.md

@@ -7,6 +7,7 @@ author: Matthias Kretschmann
 
 tags:
   - design
+  - apple
 
 date: 2008-04-06 21:21:22+00:00
 ---

content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md

@@ -11,6 +11,7 @@ tags:
   - tutorial
   - macos
   - icon
+  - apple
 
 redirect_from:
   - /2008/04/changing-the-image-icons-in-mac-os-x-leopard/

content/posts/2008-04-22-apple-releases-sdk-for-aperture-21.md

@@ -7,6 +7,7 @@ date: 2008-04-22 05:58:41+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![Aperture](../media/aperture97.png)Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding.

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

@@ -11,6 +11,7 @@ tags:
   - tutorial
   - macos
   - scanner
+  - apple
 ---
 
 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

@@ -12,6 +12,7 @@ tags:
   - aperture
   - tutorial
   - macos
+  - apple
 ---
 
 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-05-07-high-quality-watermarks-with-aperture.md

@@ -9,6 +9,7 @@ date: 2008-05-07 03:27:25+00:00
 tags:
   - photography
   - aperture
+  - apple
   - tutorial
 
 redirect_from:

content/posts/2008-05-07-nik-ships-viveza-as-the-first-available-aperture-editing-plugin.md

@@ -9,6 +9,7 @@ date: 2008-05-07 19:21:34+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![Viveza](../media/viveza.png)Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).

content/posts/2008-05-07-the-15-best-new-features-of-aperture-2.md

@@ -10,6 +10,7 @@ date: 2008-05-07 19:22:49+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 There are already some lists like this available on the web and they are always very subjective so I thought I should add my subjective list too. While Aperture was released I was coding this website and had not much time for writing about it. So although a bit late here is my absolutely biased list of my favorite 15 new features included in Apple's Aperture since version 2.0. It's in a nice countdown order ending with the best new feature (to me) at the bottom. Just click on the little screenshots to smoothly zoom to the full version of them.

content/posts/2008-05-18-first-aperture-adjustment-plugins-have-arrived.md

@@ -9,6 +9,7 @@ date: 2008-05-18 05:00:01+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![Aperture](../media/aperture97.png)With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.

content/posts/2008-05-19-image-trends-releases-fisheye-hemi-plug-in-for-aperture.md

@@ -7,6 +7,7 @@ date: 2008-05-19 13:05:23+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 [![Fisheye-Hemi](../media/imagetrends_hemi_10.jpg)](../media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.

content/posts/2008-05-28-new-all-in-one-aperture-plug-in-released.md

@@ -9,6 +9,7 @@ date: 2008-05-28 15:29:56+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![ApertureEdit](../media/apertureedit_logo.png)Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.

content/posts/2008-06-11-safari-4-developer-preview.md

@@ -11,6 +11,7 @@ tags:
   - design
   - macos
   - css
+  - apple
 ---
 
 ![Safari](../media/safari-logo.png)Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.

content/posts/2008-06-25-apertureedit-is-edit-for-aperture-now-updated-to-12.md

@@ -9,6 +9,7 @@ date: 2008-06-25 15:29:22+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![Edit for Aperture logo](../media/apertureedit_logo2.png)The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.

content/posts/2008-07-08-new-aperture-plug-ins-jade-and-ptlens.md

@@ -9,6 +9,7 @@ date: 2008-07-08 19:19:54+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![image](../media/aperture-plugin128.png)

content/posts/2008-07-11-enjoy-kremaliciousiphone.md

@@ -7,6 +7,8 @@ date: 2008-07-11 00:20:22+00:00
 tags:
   - personal
   - wordpress
+  - apple
+  - iphone
 ---
 
 ![kremalicious iPhone](../media/kremaliciousiphone_thumb.png)

content/posts/2008-07-11-new-aperture-plug-in-nik-announces-silver-efex-pro.md

@@ -9,6 +9,7 @@ date: 2008-07-11 19:13:16+00:00
 tags:
   - photography
   - aperture
+  - apple
 ---
 
 ![image](../media/aperture-plugin128.png)Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.

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

@@ -11,6 +11,7 @@ tags:
   - aperture
   - tutorial
   - macos
+  - apple
 ---
 
 ![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/2008-08-28-architect-and-facade-theming-for-leopard.md

@@ -9,6 +9,7 @@ date: 2008-08-28 09:54:06+00:00
 tags:
   - design
   - macos
+  - apple
 ---
 
 ![Architect icon](../media/architect-icon.jpg)There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.

content/posts/2008-10-26-the-definite-guide-to-watermarks-in-apple-aperture.md

@@ -10,6 +10,7 @@ date: 2008-10-26 16:05:58+00:00
 tags:
   - photography
   - aperture
+  - apple
 
 redirect_from:
   - /2008/10/the-definite-guide-to-watermarks-in-apple-aperture/

content/posts/2009-01-05-the-mac-in-futurama.md

@@ -9,6 +9,7 @@ tags:
   - design
   - futurama
   - mac
+  - apple
 ---
 
 Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).

content/posts/2010-02-04-ipixelpad.md

@@ -11,6 +11,7 @@ tags:
   - icon
   - ios
   - ipad
+  - apple
 ---
 
 So, what to do when [everyone seem](http://www.littleboxofideas.com/blog/design-resources/5-very-useful-free-ipad-icon-sets-for-designers) [to release iPad icons](http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs) but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here's my take on the smaller sizes of an [Apple iPad](http://www.apple.com/ipad/) icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.

content/posts/2012-05-09-media-query-asset-downloading-results.md

@@ -9,7 +9,6 @@ date: 2012-05-09 09:48:19+00:00
 
 tags:
   - design
-  - responsive
   - retina
 ---
 

content/posts/2012-05-12-nielsen-vs-clark-theyre-both-wrong.md

@@ -9,8 +9,6 @@ date: 2012-05-12 13:19:02+00:00
 
 tags:
   - design
-  - mobile
-  - responsive
 ---
 
 Great middle ground arguments from Jason Mark in this recent controversy about mobile web experiences:

content/posts/2012-05-12-which-responsive-images-solution-should-you-use.md

@@ -9,8 +9,6 @@ date: 2012-05-12 17:52:53+00:00
 
 tags:
   - design
-  - mobile
-  - responsive
 ---
 
 Awesome overview about all the currently available techniques.

content/posts/2012-06-05-can-we-please-move-past-apples-silly-faux-real-uis.md

@@ -9,6 +9,7 @@ date: 2012-06-05 16:25:56+00:00
 
 tags:
   - design
+  - apple
 ---
 
 Much has been written about the good and bad of skeuomorphism. Tom Hobbs wrote a [great piece](http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis) putting everything together.

content/posts/2012-08-07-projectpurple.md

@@ -10,6 +10,7 @@ featured: true
 date: 2012-08-07 13:15:44+00:00
 
 tags:
+  - apple
   - goodies
   - iphone
   - wallpaper

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

@@ -14,6 +14,7 @@ tags:
   - tor
   - macos
   - goodies
+  - apple
 ---
 
 There are many reasons you might want to browse anonymously which can be accomplished by using [Tor](https://www.torproject.org). The setup instructions on Tor's website are quite scattered and outdated so here are some steps to setup Tor on macOS with a simple automated script at the end.
@@ -22,11 +23,11 @@ I'm using macOS Mojave (10.14) for the following instructions but it should work
 
 ---
 
-- [Tor Browser](#Tor-Browser)
+- [Tor Browser](#tor-browser)
-- [Install Tor](#Install-Tor)
+- [Install Tor](#install-tor)
-- [Set network proxy settings via System Preferences](#Set-network-proxy-settings-via-System-Preferences)
+- [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)
+- [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)
+- [Non-standard apps](#non-standard-apps)
 
 ---
 

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

@@ -9,6 +9,7 @@ tags:
   - oceanprotocol
   - blockchain
   - design
+  - web3
 ---
 
 Explore, download, and publish 1000+ open data sets in Ocean’s Nile Network.

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

@@ -9,6 +9,7 @@ tags:
   - oceanprotocol
   - blockchain
   - design
+  - web3
 ---
 
 We’ve been busy over the last few months, further developing the Commons Marketplace alongside creating the Pacific PoA Network.

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

@@ -8,7 +8,9 @@ image: ocean-protocol-and-ipfs-sitting-in-the-merkle-tree-teaser.png
 tags:
   - oceanprotocol
   - blockchain
+  - design
   - ipfs
+  - web3
 ---
 
 IPFS is now integrated into the Ocean Protocol stack, allowing you to take advantage of decentralized asset file hosting.

package.json

@@ -123,7 +123,7 @@
     "prettier-stylelint": "^0.4.2",
     "shortid": "^2.2.15",
     "stylelint": "^11.1.1",
-    "stylelint-config-css-modules": "^2.0.0",
+    "stylelint-config-css-modules": "^1.5.0",
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-prettier": "^1.1.1",

src/components/atoms/Tag.module.scss

@@ -0,0 +1,22 @@
+@import 'variables';
+
+.tag {
+  color: $brand-grey-light;
+  margin-left: $spacer / 2;
+  margin-right: $spacer / 2;
+  margin-bottom: $spacer / 2;
+  white-space: nowrap;
+  display: inline-block;
+
+  &::before {
+    content: '#';
+    margin-right: 1px;
+    opacity: 0.65;
+  }
+}
+
+.count {
+  font-size: $font-size-small;
+  margin-left: $spacer / 6;
+  opacity: 0.65;
+}

src/components/atoms/Tag.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import styles from './Tag.module.scss'
+
+export default function Tag({
+  name,
+  url,
+  count,
+  style
+}: {
+  name: string
+  url: string
+  count?: number
+  style?: any
+}) {
+  return (
+    <Link className={styles.tag} to={url} style={style}>
+      {name}
+      {count && <span className={styles.count}>{count}</span>}
+    </Link>
+  )
+}

src/pages/tags.module.scss

@@ -0,0 +1,17 @@
+@import 'variables';
+
+.tags {
+  list-style: none;
+  padding: 0;
+  text-align: center;
+
+  li {
+    display: inline-block;
+    margin-top: $spacer / 4;
+    margin-bottom: $spacer / 4;
+
+    &::before {
+      display: none;
+    }
+  }
+}

src/pages/tags.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import Page from '../templates/Page'
+import Tag from '../components/atoms/Tag'
+import styles from './tags.module.scss'
+
+const page = {
+  frontmatter: {
+    title: 'Tags',
+    description: 'All the tags being used.'
+  }
+}
+
+interface Tag {
+  fieldValue: string
+  totalCount: number
+}
+
+interface TagsPageProps {
+  data: {
+    allMarkdownRemark: { group: Tag[] }
+  }
+  location: Location
+}
+
+const TagsPage = ({ data, location }: TagsPageProps) => (
+  <Page title={page.frontmatter.title} location={location} post={page}>
+    <ul className={styles.tags}>
+      {data.allMarkdownRemark.group
+        .sort((a, b) => b.totalCount - a.totalCount)
+        .map((tag: Tag) => (
+          <li key={tag.fieldValue}>
+            <Tag
+              name={tag.fieldValue}
+              url={`/tags/${tag.fieldValue}/`}
+              count={tag.totalCount}
+              style={{ fontSize: `${100 + tag.totalCount * 2}%` }}
+            />
+          </li>
+        ))}
+    </ul>
+  </Page>
+)
+
+export default TagsPage
+
+export const tagsPageQuery = graphql`
+  query {
+    allMarkdownRemark {
+      group(field: frontmatter___tags) {
+        fieldValue
+        totalCount
+      }
+    }
+  }
+`

src/templates/Page.tsx

@@ -15,7 +15,7 @@ export default function Page({
   title: string
   children: any
   section?: string
-  location?: Location
+  location: Location
   post?: Post
 }) {
   return (

src/templates/Post/PostMeta.module.scss

@@ -68,18 +68,3 @@
 .tags {
   margin-top: $spacer / 2;
 }
-
-.tag {
-  color: $brand-grey-light;
-  margin-left: $spacer / 2;
-  margin-right: $spacer / 2;
-  margin-bottom: $spacer / 2;
-  white-space: nowrap;
-  display: inline-block;
-
-  &::before {
-    content: '#';
-    margin-right: 1px;
-    opacity: 0.65;
-  }
-}

src/templates/Post/PostMeta.tsx

@@ -2,9 +2,11 @@ import React from 'react'
 import { Link } from 'gatsby'
 import slugify from 'slugify'
 import Time from '../../components/atoms/Time'
+import Tag from '../../components/atoms/Tag'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 import styles from './PostMeta.module.scss'
 import { Post } from '../../@types/Post'
+import shortid from 'shortid'
 
 export default function PostMeta({ post }: { post: Post }) {
   const siteMeta = useSiteMetadata()
@@ -36,13 +38,8 @@ export default function PostMeta({ post }: { post: Post }) {
       {tags && (
         <div className={styles.tags}>
           {tags.map((tag: string) => {
-            const to = tag === 'goodies' ? '/goodies' : `/tags/${slugify(tag)}/`
+            const url = `/tags/${slugify(tag)}/`
-
+            return <Tag key={shortid.generate()} name={tag} url={url} />
-            return (
-              <Link key={tag} className={styles.tag} to={to}>
-                {tag}
-              </Link>
-            )
           })}
         </div>
       )}