image fixes and post fixes

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

@@ -11,6 +11,9 @@ coinhive: true
 tags:
   - goodies
   - icon
+  - macos
+  - aperture
+
 redirect_from:
   - "/new-goodies-aperture-file-types-icons/"
   - "/goodie-updated-aperture-file-types-v11/"
@@ -18,11 +21,12 @@ redirect_from:
   - "/2008/04/aperture-file-types/"
 ---
 
-These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf).
+These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle.
 
 - Mac + Win + Linux + iContainer
 - Leopard ready (512×512)
 - custom 32px and 16px icons
+- works for .jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf
 
 Get them and have fun.
 
@@ -30,4 +34,4 @@ Get them and have fun.
     <a class="icon-download" href="../media/aperturefiletypes_by_kremalicious.zip">Download</a>
 </p>
 
-And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](https://kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).
+And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](/changing-the-image-icons-in-mac-os-x-leopard/).

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

@@ -8,9 +8,9 @@ author: Matthias Kretschmann
 date: 2008-04-04 10:47:23+00:00
 
 tags:
-    - design
+  - design
-    - macos
+  - macos
-    - icon
+  - icon
 ---
 
 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-09-changing-the-image-icons-in-mac-os-x-leopard.md

@@ -8,10 +8,13 @@ date: 2008-04-09 13:13:42+00:00
 
 coinhive: true
 tags:
-    - design
+  - design
-    - tutorial
+  - tutorial
-    - macos
+  - macos
-    - icon
+  - icon
+
+redirect_from:
+  - /2008/04/changing-the-image-icons-in-mac-os-x-leopard/
 ---
 
 [![Aperture File Types](../media/aperturefiletypes.png)](../media/aperturefiletypes.png)
@@ -20,7 +23,6 @@ After i released my [Aperture File Types icon set](http://www.kremalicious.com/g
 
 <!-- more -->
 
-
 ## Changing Preview.app icons
 
 [![Open with Preview](../media/openwithpreview.png)](../media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.

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

@@ -26,7 +26,7 @@ This first preserved photograph _View from the Window at Le Gras_ is the one you
 
 Either just download the icons or read the exciting story about the First Photograph.
 
-![](../media/cameraobscura11_all.png)
+![Icon Overview](../media/cameraobscura11_all.png)
 
 ## The story behind these icons
 
@@ -34,7 +34,7 @@ There's a fascinating story behind these icons which is nothing more than the st
 
 ### Nicéphore Niépce and The First Photograph
 
-<img src="../media/nicephore-niepce.jpg" alt="Nicéphore Niépce, ca. 1795" title="Nicéphore Niépce, ca. 1795">
+![Nicéphore Niépce, ca. 1795](../media/nicephore-niepce.jpg "Nicéphore Niépce, ca. 1795")
 
 Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
 
@@ -46,7 +46,7 @@ In 1822 he created a first non-fading negative contact print by utilizing a bitu
 
 After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours!
 
-<img src="../media/view_from_the_window_at_le_gras_nicephore_niepce.jpg" alt="View from the Window at Le Gras" title="View from the Window at Le Gras">
+![View from the Window at Le Gras](../media/view_from_the_window_at_le_gras_nicephore_niepce.jpg "View from the Window at Le Gras")
 
 By the way, in 2002 another picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", _View from the Window at Le Gras_ remains the first "real" photograph.
 

gatsby-config.js

@@ -37,6 +37,8 @@ module.exports = {
         path: path.join(__dirname, 'src', 'images')
       }
     },
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
     {
       resolve: 'gatsby-transformer-remark',
       options: {
@@ -45,11 +47,11 @@ module.exports = {
           {
             resolve: 'gatsby-remark-images',
             options: {
-              maxWidth: 940,
+              maxWidth: 630,
               quality: 80,
               withWebp: true,
               linkImagesToOriginal: false,
-              // sizeByPixelDensity: true,
+              sizeByPixelDensity: true,
               showCaptions: true,
               backgroundColor: '#e7eef4'
             }
@@ -223,8 +225,6 @@ module.exports = {
     },
     'gatsby-plugin-webpack-size',
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
     'gatsby-plugin-catch-links',
     'gatsby-redirect-from',
     'gatsby-plugin-meta-redirect',

package.json

@@ -99,7 +99,8 @@
     "stylelint": "^9.8.0",
     "stylelint-config-css-modules": "^1.3.0",
     "stylelint-config-standard": "^18.2.0",
-    "stylelint-scss": "^3.4.0"
+    "stylelint-scss": "^3.4.0",
+    "why-did-you-update": "^1.0.6"
   },
   "engines": {
     "node": ">=10.0.0"

src/components/Layout.jsx

@@ -6,6 +6,11 @@ import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
 
+// if (process.env.NODE_ENV !== 'production') {
+//   const { whyDidYouUpdate } = require('why-did-you-update')
+//   whyDidYouUpdate(React)
+// }
+
 const Layout = ({ children }) => (
   <>
     <Typekit />

src/components/molecules/IconLinks.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import styles from './IconLinks.module.scss'
 
@@ -8,36 +8,45 @@ import { ReactComponent as Facebook } from '../../images/facebook.svg'
 import { ReactComponent as Rss } from '../../images/rss.svg'
 import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
 
-const NetworkIcon = ({ link }) => {
+class NetworkIcon extends PureComponent {
-  let Icon
+  static propTypes = {
-
+    link: PropTypes.string.isRequired
-  if (link.includes('twitter')) {
-    Icon = <Twitter className={styles.twitter} />
-  } else if (link.includes('github')) {
-    Icon = <Github className={styles.github} />
-  } else if (link.includes('facebook')) {
-    Icon = <Facebook className={styles.facebook} />
-  } else if (link.includes('feed.xml')) {
-    Icon = <Rss className={styles.rss} />
-  } else if (link.includes('feed.json')) {
-    Icon = <Jsonfeed className={styles.json} />
   }
 
-  return Icon
+  render() {
+    const { link } = this.props
+    let Icon
+
+    if (link.includes('twitter')) {
+      Icon = <Twitter className={styles.twitter} />
+    } else if (link.includes('github')) {
+      Icon = <Github className={styles.github} />
+    } else if (link.includes('facebook')) {
+      Icon = <Facebook className={styles.facebook} />
+    } else if (link.includes('feed.xml')) {
+      Icon = <Rss className={styles.rss} />
+    } else if (link.includes('feed.json')) {
+      Icon = <Jsonfeed className={styles.json} />
+    }
+
+    return Icon
+  }
 }
 
-const IconLinks = ({ links }) => (
+export default class IconLinks extends PureComponent {
-  <p>
+  static propTypes = {
-    {links.map(link => (
+    links: PropTypes.array.isRequired
-      <a key={link} className={styles.link} href={link} title={link}>
+  }
-        <NetworkIcon link={link} />
-      </a>
-    ))}
-  </p>
-)
 
-IconLinks.propTypes = {
+  render() {
-  links: PropTypes.array.isRequired
+    return (
+      <p>
+        {this.props.links.map(link => (
+          <a key={link} className={styles.link} href={link} title={link}>
+            <NetworkIcon link={link} />
+          </a>
+        ))}
+      </p>
+    )
+  }
 }
-
-export default IconLinks

src/components/molecules/Vcard.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import IconLinks from './IconLinks'
@@ -32,42 +32,44 @@ const query = graphql`
   }
 `
 
-const Vcard = () => (
+export default class Vcard extends PureComponent {
-  <StaticQuery
+  render() {
-    query={query}
+    return (
-    render={data => {
+      <StaticQuery
-      const {
+        query={query}
-        twitter,
+        render={data => {
-        github,
+          const {
-        facebook,
+            twitter,
-        name,
+            github,
-        uri
+            facebook,
-      } = data.site.siteMetadata.author
+            name,
+            uri
+          } = data.site.siteMetadata.author
 
-      const avatar = data.avatar.edges[0].node.childImageSharp.fixed
+          const avatar = data.avatar.edges[0].node.childImageSharp.fixed
-      const links = [twitter, github, facebook]
+          const links = [twitter, github, facebook]
 
-      return (
+          return (
-        <div className="vcard author">
+            <div className="vcard author">
-          <Img
+              <Img
-            className={styles.avatar}
+                className={styles.avatar}
-            fixed={avatar}
+                fixed={avatar}
-            alt="avatar"
+                alt="avatar"
-            width="80"
+                width="80"
-            height="80"
+                height="80"
-          />
+              />
-          <p className={styles.description}>
+              <p className={styles.description}>
-            Blog of designer &amp; developer{' '}
+                Blog of designer &amp; developer{' '}
-            <a className="fn" rel="author" href={uri}>
+                <a className="fn" rel="author" href={uri}>
-              {name}
+                  {name}
-            </a>
+                </a>
-          </p>
+              </p>
 
-          <IconLinks links={links} />
+              <IconLinks links={links} />
-        </div>
+            </div>
-      )
+          )
-    }}
+        }}
-  />
+      />
-)
+    )
-
+  }
-export default Vcard
+}