diff --git a/content/media/View-from-the-Window-at-Le-Gras.png b/content/media/View-from-the-Window-at-Le-Gras.png index 3fdfa018..bd72f918 100644 Binary files a/content/media/View-from-the-Window-at-Le-Gras.png and b/content/media/View-from-the-Window-at-Le-Gras.png differ diff --git a/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg b/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg index c9987f18..6145d19c 100644 Binary files a/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg and b/content/media/view_from_the_window_at_le_gras_nicephore_niepce.jpg differ diff --git a/content/posts/2008-04-04-aperture-file-types.md b/content/posts/2008-04-04-aperture-file-types.md index 5f01151b..87376aa4 100644 --- a/content/posts/2008-04-04-aperture-file-types.md +++ b/content/posts/2008-04-04-aperture-file-types.md @@ -6,11 +6,14 @@ download: ../media/aperturefiletypes_by_kremalicious.zip author: Matthias Kretschmann date: 2008-04-04T01:55:54.000Z -category: +category: 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. Download

-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/). diff --git a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md b/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md index 4947abbe..d31dc959 100644 --- a/content/posts/2008-04-04-mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine.md +++ b/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 - - macos - - icon + - design + - macos + - 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): diff --git a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md b/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md index 338577c8..2bdf186a 100644 --- a/content/posts/2008-04-09-changing-the-image-icons-in-mac-os-x-leopard.md +++ b/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 - - tutorial - - macos - - icon + - design + - tutorial + - macos + - 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 - ## 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. diff --git a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md index b6df6ad6..53c54687 100644 --- a/content/posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md +++ b/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 -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! -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. diff --git a/gatsby-config.js b/gatsby-config.js index cdd32da9..b6dfe13d 100644 --- a/gatsby-config.js +++ b/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', diff --git a/package.json b/package.json index c0ff9779..ad8ba941 100644 --- a/package.json +++ b/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" diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index db164578..09f1a4fa 100644 --- a/src/components/Layout.jsx +++ b/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 }) => ( <> diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx index 16c51224..8c866dda 100644 --- a/src/components/molecules/IconLinks.jsx +++ b/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 }) => { - let Icon - - if (link.includes('twitter')) { - Icon = - } else if (link.includes('github')) { - Icon = - } else if (link.includes('facebook')) { - Icon = - } else if (link.includes('feed.xml')) { - Icon = - } else if (link.includes('feed.json')) { - Icon = +class NetworkIcon extends PureComponent { + static propTypes = { + link: PropTypes.string.isRequired } - return Icon + render() { + const { link } = this.props + let Icon + + if (link.includes('twitter')) { + Icon = + } else if (link.includes('github')) { + Icon = + } else if (link.includes('facebook')) { + Icon = + } else if (link.includes('feed.xml')) { + Icon = + } else if (link.includes('feed.json')) { + Icon = + } + + return Icon + } } -const IconLinks = ({ links }) => ( -

- {links.map(link => ( - - - - ))} -

-) +export default class IconLinks extends PureComponent { + static propTypes = { + links: PropTypes.array.isRequired + } -IconLinks.propTypes = { - links: PropTypes.array.isRequired + render() { + return ( +

+ {this.props.links.map(link => ( + + + + ))} +

+ ) + } } - -export default IconLinks diff --git a/src/components/molecules/Vcard.jsx b/src/components/molecules/Vcard.jsx index 7bcbce31..73ee28b5 100644 --- a/src/components/molecules/Vcard.jsx +++ b/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 = () => ( - { - const { - twitter, - github, - facebook, - name, - uri - } = data.site.siteMetadata.author +export default class Vcard extends PureComponent { + render() { + return ( + { + const { + twitter, + github, + facebook, + name, + uri + } = data.site.siteMetadata.author - const avatar = data.avatar.edges[0].node.childImageSharp.fixed - const links = [twitter, github, facebook] + const avatar = data.avatar.edges[0].node.childImageSharp.fixed + const links = [twitter, github, facebook] - return ( -
- avatar -

- Blog of designer & developer{' '} - -

+ return ( +
+ avatar +

+ Blog of designer & developer{' '} + +

- -
- ) - }} - /> -) - -export default Vcard + +
+ ) + }} + /> + ) + } +}