mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-26 11:49:04 +01:00
add tags page
This commit is contained in:
parent
1838e44b25
commit
ae93accd08
GPG Key ID:
606EEEF3C479A91F
@ -29,6 +29,10 @@ module.exports = {
|
||||
{
|
||||
title: 'Goodies',
|
||||
link: '/tags/goodies'
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
link: '/tags'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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/
|
||||
|
||||
@ -11,6 +11,7 @@ tags:
|
||||
- icon
|
||||
- macos
|
||||
- aperture
|
||||
- apple
|
||||
|
||||
redirect_from:
|
||||
- '/new-goodies-aperture-file-types-icons/'
|
||||
|
||||
@ -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):
|
||||
|
||||
@ -7,6 +7,7 @@ author: Matthias Kretschmann
|
||||
|
||||
tags:
|
||||
- design
|
||||
- apple
|
||||
|
||||
date: 2008-04-06 21:21:22+00:00
|
||||
---
|
||||
|
||||
@ -11,6 +11,7 @@ tags:
|
||||
- tutorial
|
||||
- macos
|
||||
- icon
|
||||
- apple
|
||||
|
||||
redirect_from:
|
||||
- /2008/04/changing-the-image-icons-in-mac-os-x-leopard/
|
||||
|
||||
@ -7,6 +7,7 @@ date: 2008-04-22 05:58:41+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-05-07 03:27:25+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
- tutorial
|
||||
|
||||
redirect_from:
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-05-07 19:21:34+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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).
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-05-18 05:00:01+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -7,6 +7,7 @@ date: 2008-05-19 13:05:23+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
[](../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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-05-28 15:29:56+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -11,6 +11,7 @@ tags:
|
||||
- design
|
||||
- macos
|
||||
- css
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-06-25 15:29:22+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-07-08 19:19:54+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -7,6 +7,8 @@ date: 2008-07-11 00:20:22+00:00
|
||||
tags:
|
||||
- personal
|
||||
- wordpress
|
||||
- apple
|
||||
- iphone
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-07-11 19:13:16+00:00
|
||||
tags:
|
||||
- photography
|
||||
- aperture
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -11,6 +11,7 @@ tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
- macos
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -9,6 +9,7 @@ date: 2008-08-28 09:54:06+00:00
|
||||
tags:
|
||||
- design
|
||||
- macos
|
||||
- apple
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -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/
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -9,7 +9,6 @@ date: 2012-05-09 09:48:19+00:00
|
||||
|
||||
tags:
|
||||
- design
|
||||
- responsive
|
||||
- retina
|
||||
---
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -10,6 +10,7 @@ featured: true
|
||||
date: 2012-08-07 13:15:44+00:00
|
||||
|
||||
tags:
|
||||
- apple
|
||||
- goodies
|
||||
- iphone
|
||||
- wallpaper
|
||||
|
||||
@ -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)
|
||||
- [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)
|
||||
- [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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ tags:
|
||||
- oceanprotocol
|
||||
- blockchain
|
||||
- design
|
||||
- web3
|
||||
---
|
||||
|
||||
Explore, download, and publish 1000+ open data sets in Ocean’s Nile Network.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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",
|
||||
|
||||
22
src/components/atoms/Tag.module.scss
Normal file
22
src/components/atoms/Tag.module.scss
Normal file
@ -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;
|
||||
}
|
||||
22
src/components/atoms/Tag.tsx
Normal file
22
src/components/atoms/Tag.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
17
src/pages/tags.module.scss
Normal file
17
src/pages/tags.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/pages/tags.tsx
Normal file
56
src/pages/tags.tsx
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -15,7 +15,7 @@ export default function Page({
|
||||
title: string
|
||||
children: any
|
||||
section?: string
|
||||
location?: Location
|
||||
location: Location
|
||||
post?: Post
|
||||
}) {
|
||||
return (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)}/`
|
||||
|
||||
return (
|
||||
<Link key={tag} className={styles.tag} to={to}>
|
||||
{tag}
|
||||
</Link>
|
||||
)
|
||||
const url = `/tags/${slugify(tag)}/`
|
||||
return <Tag key={shortid.generate()} name={tag} url={url} />
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user