mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 01:46:51 +01:00
links reorganization
This commit is contained in:
parent
7313aa5566
commit
138b9f6965
GPG Key ID:
606EEEF3C479A91F
@ -19,7 +19,7 @@ module.exports = {
|
||||
rss: '/feed.xml',
|
||||
jsonfeed: '/feed.json',
|
||||
typekitID: 'msu4qap',
|
||||
itemsPerPage: 25,
|
||||
itemsPerPage: 26,
|
||||
repoContentPath: 'https://github.com/kremalicious/blog/tree/main/content',
|
||||
menu: [
|
||||
{
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: 6 Web Design Tips from Leonardo da Vinci
|
||||
linkurl: http://designpepper.com/blog/6-web-design-tips-from-leonardo-da-vinci
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 18:43:05+00:00
|
||||
|
||||
tags:
|
||||
- design
|
||||
---
|
||||
|
||||
An awesome creative idea for a blog post about Web-Design from Joshua Clanton:
|
||||
|
||||
> Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: London police afraid of photographers
|
||||
author: Matthias Kretschmann
|
||||
linkurl: http://www.met.police.uk/campaigns/campaign_ct_2008.htm
|
||||
date: 2008-04-04 19:01:09+00:00
|
||||
|
||||
tags:
|
||||
- photography
|
||||
|
||||
redirect_from:
|
||||
- /2008/04/london-police-afraid-of-photographers/
|
||||
---
|
||||
|
||||
|
||||
|
||||
> Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take.
|
||||
|
||||
Yeah, i'm guilty. I took several photos of cctv cameras.
|
||||
|
||||
And there are more in my photo archive... Guess you have no other choice than informing the London cops cause they just "need to know".
|
||||
|
||||
You can find the campaign website of the london police here:
|
||||
[Metropolitan Police 2008 Counter-Terrorism advertising campaign launched](http://www.met.police.uk/campaigns/campaign_ct_2008.htm)
|
||||
|
||||
You will be surprised what other things they are afraid of...
|
||||
@ -1,21 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: 'Mac OS X Leopard: Designer’s Guide to Icons'
|
||||
linkurl: http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-04 10:47:23+00:00
|
||||
|
||||
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):
|
||||
|
||||
> To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it. If you aim for an international market, your symbols need to also be internationally recognizable providing Worldwide Compatibility.
|
||||
|
||||
For reference you [can browse the Human Interface Guidelines (HIG) from Apple online](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html) or [download it as a big pdf-file](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/OSXHIGuidelines.pdf).
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: 9 Lesser Known Safari Features
|
||||
linkurl: http://www.danielmiessler.com/blog/9-lesser-known-safari-features-worth-switching-for
|
||||
author: Matthias Kretschmann
|
||||
|
||||
tags:
|
||||
- design
|
||||
- apple
|
||||
|
||||
date: 2008-04-06 21:21:22+00:00
|
||||
---
|
||||
|
||||
Cool stuff, like the Inline Dictionary:
|
||||
|
||||
> Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut.
|
||||
@ -1,21 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Measuring the Color of Light
|
||||
linkurl: http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-09 17:44:23+00:00
|
||||
|
||||
tags:
|
||||
- photography
|
||||
---
|
||||
|
||||
Ever wondered what the heck 6500 Kelvin has to do with your photos? Here's an in-depth article from the blog of [James Duncan Davidson](http://duncandavidson.com/blog/) for better understanding of the whole color and white balance thing in photography.
|
||||
|
||||
[Measuring the Color of Light by James Duncan Davidson](http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html):
|
||||
|
||||
> Like all settings, the color of light has a unit associated with it. The unit, however, isn't unique to specifying the color of light. Instead, it's the same SI unit that is used for temperature: the Kelvin. I know that the first few times I delved into this subject matter, I thought it was a strange unit to use, mostly because light itself doesn't have a temperature. Since it's radiation, when it hits a surface it can cause that surface to heat up. But the light itself is neither hot nor cold. So, why the heck is a unit of temperature used to describe the color of it? ...
|
||||
|
||||
And another in-depth article from James which is a follow up of the above article:
|
||||
[Color Temperature and White Balance](http://duncandavidson.com/2008/04/color-temperature-and-sensors.html)
|
||||
@ -1,19 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: The story behind the Pulitzer picture
|
||||
linkurl: http://blogs.reuters.com/photographers-blog/2008/04/07/the-story-behind-the-pictures/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-10 13:16:47+00:00
|
||||
|
||||
tags:
|
||||
- photography
|
||||
---
|
||||
|
||||
Two days ago [I posted links to the winning photographers of the Pulitzer Price 2008](http://www.kremalicious.com/2008/04/pulitzer-price-winners-2008-announced-various-photographers-awarded/). Now Adrees Latif, who won in the category Breaking News Photography for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007, [reveales the story behind the picture in the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/):
|
||||
|
||||
> Within minutes, the crowd swelled from hundreds to a few thousand. The soldiers threw barbed wire coils across the roads.
|
||||
> Knowing that hundreds of people were gunned down in similar circumstances in a 1988 uprising, I climbed an old crosswalk directly overhead, to get to one of the few spots offering a clear view...
|
||||
|
||||
[Read the whole story on the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/)
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Photographers strike back in UK
|
||||
linkurl: http://www.pressgazette.co.uk/node/40875
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-11 14:16:51+00:00
|
||||
|
||||
tags:
|
||||
- photography
|
||||
---
|
||||
|
||||
[](../media/londonpolice.jpg)
|
||||
|
||||
Remember [the campaign of the London police](/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists?
|
||||
|
||||
Now the [PressGazette reports](http://www.pressgazette.co.uk/node/40875) that
|
||||
|
||||
> Labour MP [Member of Parliament] Austin Mitchell is planning to take a delegation of photographers to the Home Office to protest about the growing number of cases in which police officers and others try to stop professional and amateur photographers taking pictures in public places.
|
||||
|
||||
You can read the whole story here:
|
||||
[Photographers lobby parliament over police curbs](http://www.pressgazette.co.uk/node/40875)
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Announcing Sketch 2.0
|
||||
linkurl: http://www.bohemiancoding.com/about/blog/announcing-sketch-2-0/
|
||||
|
||||
date: 2012-04-30 12:37:05+00:00
|
||||
|
||||
tags:
|
||||
- design
|
||||
- sketch
|
||||
---
|
||||
|
||||
Remarkable update to Bohemian Coding's [Sketch](http://bohemiancoding.com/sketch) app. It's like Photoshop but with only the UI design related features included:
|
||||
|
||||
> We wanted to provide a real alternative to Adobe’s Photoshop or Fireworks and we believe we have succeeded. It’s an ambitious goal for sure but if you’ve been using Photoshop’s vector capabilities combined with Layer Styles, we think we may have something better.
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: World Press Photo 2012
|
||||
linkurl: http://www.worldpressphoto.org/gallery/2012-world-press-photo
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-04 13:12:54+00:00
|
||||
|
||||
tags:
|
||||
- photography
|
||||
- photojournalism
|
||||
---
|
||||
|
||||
The winners of the 2012 contest were announced and the [winner gallery](http://www.worldpressphoto.org/gallery/2012-world-press-photo) is worth checking out.
|
||||
|
||||
This years [winner, dubbed Photo Of The Year 2011](http://www.worldpressphoto.org/photo/world-press-photo-year-2011-0), comes from Spanish photographer [Samuel Aranda](http://www.samuelaranda.net/).
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Nielsen vs Clark – they're both wrong
|
||||
linkurl: http://netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-12 13:19:02+00:00
|
||||
|
||||
tags:
|
||||
- design
|
||||
---
|
||||
|
||||
Great middle ground arguments from Jason Mark in this recent controversy about mobile web experiences:
|
||||
|
||||
> The truth is when working on mobile you should always look at the site analytics and make smart decisions based on what you find. If you find that your mobile users use the site in a significantly different way than desktop users, check out Nielsen's guidelines and see which apply to you. And if you find that your mobile users are accessing the same content as desktop users then consider a responsive design.
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: HTML for Icon Font Usage
|
||||
linkurl: http://css-tricks.com/html-for-icon-font-usage/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-26 05:13:58+00:00
|
||||
|
||||
tags:
|
||||
- design
|
||||
- development
|
||||
---
|
||||
|
||||
Chris Coyier on an accessible implementation for icon fonts:
|
||||
|
||||
> Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. [...]
|
||||
|
||||
And our major goals here are:
|
||||
|
||||
> 1. As good of semantics as we can get
|
||||
> 2. As little awkwardness for screen readers as possible
|
||||
|
||||
Spoiler: the key is to map the icons to the _Private Use Area_ instead of "real" characters in the font files and injecting them with pseudo elements.
|
||||
|
||||
I'm using [Font Awesome](http://fortawesome.github.com/Font-Awesome/) on this site which comes with icons mapped to PUA, so everything should be good for screen readers. Only concern to me are the quite ineffective CSS selectors like `[class*=" icon-"]` but this makes it nicely flexible.
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: What makes Twitter Twitter?
|
||||
linkurl: http://alt.adrianshort.co.uk/blog/2012/06/30/what-makes-twitter-twitter/
|
||||
|
||||
date: 2012-07-07 08:18:58+00:00
|
||||
---
|
||||
|
||||
Couldn't agree more:
|
||||
|
||||
> People. 140-character messages. That’s Twitter.
|
||||
>
|
||||
> So simple. So powerful. So fragile.
|
||||
>
|
||||
> So leave it alone. We’re talking. Don’t interrupt.
|
||||
|
||||
But just rebuilding Twitter before it gets more "richer stories" and crammed by ads probably won't help: [We could build an open Twitter, but would anyone use it?](http://gigaom.com/2012/07/04/we-could-build-an-open-twitter-but-would-anyone-use-it/)
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: First principles for choosing the right typeface
|
||||
linkurl: http://ilovetypography.com/2008/04/04/on-choosing-type
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-04-05 14:01:51+00:00
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: The origins of the <blink> tag
|
||||
linkurl: http://www.montulli.org/theoriginofthe%3Cblink%3Etag
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: A call for open, free access to academic research
|
||||
linkurl: http://www.guardian.co.uk/commentisfree/2012/may/01/open-free-access-academic-research
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-02 03:12:40+00:00
|
||||
---
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Media Query & Asset Downloading Results
|
||||
linkurl: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-09 09:48:19+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Which responsive images solution should you use?
|
||||
linkurl: http://css-tricks.com/which-responsive-images-solution-should-you-use/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-12 17:52:53+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Why Comic Sans?
|
||||
linkurl: http://www.connare.com/whycomic.htm
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-21 21:18:17+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: How Yahoo Killed Flickr and Lost the Internet
|
||||
linkurl: http://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://gizmodo.com/5910223/how-yahoo-killed-flickr-and-lost-the-internet
|
||||
|
||||
date: 2012-05-22 01:00:03+00:00
|
||||
|
||||
@ -15,4 +12,4 @@ Great insight article into what and how exactly Yahoo managed to screw this up.
|
||||
|
||||
> It is a case study of what can go wrong when a nimble, innovative startup gets gobbled up by a behemoth that doesn't share its values. What happened to Flickr? The same thing that happened to so many other nimble, innovative startups who sold out for dollars and bandwidth: Yahoo.
|
||||
|
||||
As a year long Flickr user I'm just sad about this but hey, we got [500px](http://500px.com/kremalicious) which probably wouldn't exist without Flickr's decline.
|
||||
As a year long Flickr user I'm just sad about this but hey, we got [500px](https://500px.com/kremalicious) which probably wouldn't exist without Flickr's decline.
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Responsive Images and Web Standards at the Turning Point
|
||||
linkurl: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
|
||||
|
||||
date: 2012-05-22 06:23:26+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Can We Please Move Past Apple's Silly, Faux-Real UIs?
|
||||
linkurl: http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-06-05 16:25:56+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Why Files exist
|
||||
linkurl: http://blog.filepicker.io/post/26157006600/why-files-exist
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://blog.filestack.com/thoughts-and-knowledge/why-files-exist/
|
||||
|
||||
date: 2012-06-30 18:17:33+00:00
|
||||
|
||||
@ -11,7 +8,7 @@ tags:
|
||||
- design
|
||||
---
|
||||
|
||||
[This](http://blog.filepicker.io/post/26157006600/why-files-exist) has been said many times, but it bears repeating:
|
||||
[This](https://blog.filestack.com/thoughts-and-knowledge/why-files-exist/) has been said many times, but it bears repeating:
|
||||
|
||||
> Files are abstraction layers around content that are necessary for interoperability. Without the notion of a File or other similar shared content abstraction, the ability to use different applications with the same information grinds to a halt, which hampers innovation and user experience.
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Newton, Reconsidered
|
||||
linkurl: http://techland.time.com/2012/06/01/newton-reconsidered/
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-07-04 01:19:17+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: 'Crossdressing, Compression and Colliders: The First Photo on the Web'
|
||||
linkurl: http://motherboard.vice.com/2012/7/10/crossdressing-compression-and-colliders-the-first-photo-on-the-web
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://www.vice.com/en/article/ezzza7/crossdressing-compression-and-colliders-the-first-photo-on-the-web
|
||||
|
||||
date: 2012-07-11 21:00:07+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: First computer generated graphics film from 1963
|
||||
linkurl: http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film
|
||||
|
||||
date: 2012-07-19 12:30:56+00:00
|
||||
|
||||
@ -12,6 +9,6 @@ tags:
|
||||
- history
|
||||
---
|
||||
|
||||
From the [AT&T; Archives](http://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film):
|
||||
From the [AT&T; Archives](https://techchannel.att.com/play-video.cfm/2012/7/18/AT&T-Archives-First-Computer-Generated-Graphics-Film):
|
||||
|
||||
> This film was a specific project to define how a particular type of satellite would move through space. Edward E. Zajac made, and narrated, the film, which is considered to be possibly the very first computer graphics film ever. Zajac programmed the calculations in FORTRAN, then used a program written by Zajac's colleague, Frank Sinden, called ORBIT. The original computations were fed into the computer via punch cards […]
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Designing with Code
|
||||
linkurl: http://www.teehanlax.com/blog/designing-with-code/
|
||||
author: Matthias Kretschmann
|
||||
linkurl: https://www.teehanlax.com/blog/designing-with-code/
|
||||
|
||||
date: 2012-09-26 11:45:40+00:00
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Create, differentiate, iterate – 10 pro tips on relaunching your startup website
|
||||
linkurl: http://venturevillage.eu/10-pro-tips-redesign
|
||||
author: Matthias Kretschmann
|
||||
date: 2013-07-13 12:49:39+00:00
|
||||
|
||||
tags:
|
||||
@ -1,8 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Why the world's best photo startup is going out of business
|
||||
linkurl: http://www.theverge.com/2013/11/5/5039216/everpix-life-and-death-inside-the-worlds-best-photo-startup
|
||||
linkurl: https://www.theverge.com/2013/11/5/5039216/everpix-life-and-death-inside-the-worlds-best-photo-startup
|
||||
|
||||
tags:
|
||||
- photography
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Why We Are Allowed to Hate Silicon Valley
|
||||
linkurl: http://www.faz.net/aktuell/feuilleton/debatten/the-internet-ideology-why-we-are-allowed-to-hate-silicon-valley-12658406.html
|
||||
author: Matthias Kretschmann
|
||||
|
||||
tags:
|
||||
- 'silicon valley'
|
||||
@ -1,8 +1,6 @@
|
||||
---
|
||||
type: link
|
||||
|
||||
title: Silicon Valley Isn't a Meritocracy
|
||||
linkurl: http://www.wired.com/opinion/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/
|
||||
linkurl: https://www.wired.com/2013/11/silicon-valley-isnt-a-meritocracy-and-the-cult-of-the-entrepreneur-holds-people-back/
|
||||
|
||||
tags:
|
||||
- 'silicon valley'
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB |
@ -98,7 +98,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
|
||||
// Generate archive pages
|
||||
generateArchivePages(createPage, archiveLength)
|
||||
|
||||
// Generate archive pages
|
||||
// Generate photos archive pages
|
||||
generatePhotosPages(createPage, photosLength)
|
||||
|
||||
// Generate tag pages
|
||||
|
||||
@ -8,7 +8,7 @@ const photosTemplate = path.resolve('src/components/templates/Photos.tsx')
|
||||
const redirects = [
|
||||
{ f: '/feed', t: '/feed.xml' },
|
||||
{ f: '/feed/', t: '/feed.xml' },
|
||||
{ f: '/goodies/', t: '/tags/goodies/' }
|
||||
{ f: '/goodies/', t: '/archive/goodies/' }
|
||||
]
|
||||
|
||||
function getPaginationData(i, numPages, slug) {
|
||||
|
||||
@ -15,6 +15,13 @@ module.exports = [
|
||||
path: path.join(__dirname, '..', 'content', 'photos')
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'links',
|
||||
path: path.join(__dirname, '..', 'content', 'links')
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
|
||||
2
src/@types/Post.d.ts
vendored
2
src/@types/Post.d.ts
vendored
@ -3,7 +3,7 @@ import { ImageNode } from './Image'
|
||||
export interface Fields {
|
||||
slug: string
|
||||
date: string
|
||||
type: 'article' | 'photo'
|
||||
type: 'article' | 'photo' | 'link'
|
||||
githubLink?: string
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
:global(.dark) & {
|
||||
color: $brand-grey-dimmed;
|
||||
border-color: darken($body-background-color--dark, 5%);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -11,7 +11,6 @@ export const postTeaserQuery = graphql`
|
||||
id
|
||||
fileAbsolutePath
|
||||
frontmatter {
|
||||
type
|
||||
title
|
||||
linkurl
|
||||
updated
|
||||
@ -63,6 +62,8 @@ export default function PostTeaser({
|
||||
{date && !hideDate && (
|
||||
<div className={styles.time}>
|
||||
<Time date={date} />
|
||||
{updated && ' • updated '}
|
||||
{updated && <Time date={updated} />}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
@ -84,7 +84,6 @@ export const pageQuery = graphql`
|
||||
html
|
||||
excerpt
|
||||
frontmatter {
|
||||
type
|
||||
title
|
||||
image {
|
||||
childImageSharp {
|
||||
@ -119,6 +118,7 @@ export const pageQuery = graphql`
|
||||
changelog
|
||||
}
|
||||
fields {
|
||||
type
|
||||
slug
|
||||
date
|
||||
githubLink
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.hentry {
|
||||
@include divider;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
|
||||
:global(.gatsby-image-wrapper) {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
}
|
||||
|
||||
.archivetitle {
|
||||
@include divider;
|
||||
|
||||
font-size: $font-size-h3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: $spacer * $line-height;
|
||||
|
||||
span {
|
||||
color: $brand-grey-light;
|
||||
padding-right: $spacer / 12;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.paginationTitle {
|
||||
composes: archivetitle;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react'
|
||||
import { render } from '@testing-library/react'
|
||||
import { createHistory, createMemorySource } from '@reach/router'
|
||||
|
||||
import Posts from './Posts'
|
||||
import data from '../../../jest/__fixtures__/posts.json'
|
||||
|
||||
describe('Post', () => {
|
||||
const history = createHistory(createMemorySource('/photos'))
|
||||
|
||||
const pageContext = {
|
||||
tag: 'hello',
|
||||
slug: '/hello',
|
||||
currentPageNumber: 2,
|
||||
numPages: 20
|
||||
}
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const { container } = render(
|
||||
<Posts
|
||||
data={data}
|
||||
pageContext={pageContext}
|
||||
location={history.location}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -1,123 +0,0 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Link, graphql } from 'gatsby'
|
||||
import { Post } from '../../@types/Post'
|
||||
import Pagination from '../molecules/Pagination'
|
||||
import PostTitle from './Post/Title'
|
||||
import PostLead from './Post/Lead'
|
||||
import PostContent from './Post/Content'
|
||||
import PostMore from './Post/More'
|
||||
import PostLinkActions from './Post/LinkActions'
|
||||
import SEO from '../atoms/SEO'
|
||||
import styles from './Posts.module.scss'
|
||||
import { Image } from '../atoms/Image'
|
||||
|
||||
export default function Posts({
|
||||
data,
|
||||
location,
|
||||
pageContext
|
||||
}: {
|
||||
data: any
|
||||
location: Location
|
||||
pageContext: {
|
||||
tag: string
|
||||
slug: string
|
||||
currentPageNumber: number
|
||||
numPages: number
|
||||
}
|
||||
}): ReactElement {
|
||||
const edges = data.allMarkdownRemark.edges
|
||||
const { tag, currentPageNumber, numPages } = pageContext
|
||||
|
||||
const PostsList = edges.map(({ node }: { node: Post }) => {
|
||||
const { linkurl, title, image } = node.frontmatter
|
||||
const { slug, type } = node.fields
|
||||
|
||||
return (
|
||||
<article className={styles.hentry} key={node.id}>
|
||||
{type !== 'photo' && (
|
||||
<PostTitle slug={slug} linkurl={linkurl} title={title} />
|
||||
)}
|
||||
|
||||
{image && (
|
||||
<Link to={slug} title={title}>
|
||||
<Image
|
||||
title={type === 'photo' ? title : null}
|
||||
fluid={image.childImageSharp.fluid}
|
||||
alt={title}
|
||||
original={image.childImageSharp.original}
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{type === 'post' && (
|
||||
<>
|
||||
<PostLead post={node} />
|
||||
<PostMore to={slug}>Continue Reading</PostMore>
|
||||
</>
|
||||
)}
|
||||
|
||||
{type === 'link' && (
|
||||
<>
|
||||
<PostContent post={node} />
|
||||
<PostLinkActions slug={slug} linkurl={linkurl} />
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<SEO />
|
||||
{location.pathname === '/' && <Featured />}
|
||||
{tag && (
|
||||
<h1 className={styles.archivetitle}>
|
||||
<span>#</span>
|
||||
{tag}
|
||||
</h1>
|
||||
)}
|
||||
{numPages > 1 && currentPageNumber > 1 && (
|
||||
<h2
|
||||
className={styles.paginationTitle}
|
||||
>{`Page ${currentPageNumber} / ${numPages}`}</h2>
|
||||
)}
|
||||
{PostsList}
|
||||
{numPages > 1 && <Pagination pageContext={pageContext} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const postsQuery = graphql`
|
||||
query($tag: String, $skip: Int, $limit: Int) {
|
||||
allMarkdownRemark(
|
||||
filter: { frontmatter: { tags: { eq: $tag } } }
|
||||
sort: { order: DESC, fields: [fields___date] }
|
||||
skip: $skip
|
||||
limit: $limit
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
html
|
||||
excerpt(pruneLength: 250)
|
||||
frontmatter {
|
||||
title
|
||||
type
|
||||
linkurl
|
||||
image {
|
||||
childImageSharp {
|
||||
...ImageFluid
|
||||
}
|
||||
}
|
||||
tags
|
||||
}
|
||||
fields {
|
||||
slug
|
||||
date(formatString: "MMMM DD, YYYY")
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -71,7 +71,6 @@ export const homeQuery = graphql`
|
||||
id
|
||||
frontmatter {
|
||||
title
|
||||
type
|
||||
image {
|
||||
childImageSharp {
|
||||
...PhotoFluidThumb
|
||||
@ -80,6 +79,7 @@ export const homeQuery = graphql`
|
||||
}
|
||||
fields {
|
||||
slug
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user