1
0
Fork 0

auto generate category pages, give goodies their own layout and download buttons

This commit is contained in:
Matthias Kretschmann 2013-11-28 22:03:13 +01:00
parent 9d938a29b1
commit c869b5560f
20 changed files with 371 additions and 93 deletions

View File

@ -23,6 +23,8 @@ permalink: /post/:title
relative_permalinks: true
paginate: 10
paginate_path: "/page/:num"
category_dir: "/"
category_title_prefix: ""
# Content Parsing

View File

@ -12,7 +12,7 @@
</header>
<section class="entry-content">
{{ post.content }}
{{ post.content | markdownify }}
<p>
<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon-forward"></i></a>
<a class="permalink-link" href="{{ post.url }}" rel="tooltip" title="Permalink">&#8734;</a>
@ -53,9 +53,9 @@
{% capture has_more %}{{ post.content | has_more }}{% endcapture %}
{% if has_more == 'true' %}
{{ post.content | post.excerpt | excerpt }}
{{ post.content | post.excerpt | excerpt | markdownify }}
{% else %}
{{ post.excerpt }}
{{ post.excerpt | markdownify }}
{% endif %}
<a class="more-link" href="{{ post.url }}">Continue reading <i class="icon-arrow-right"></i></a>

View File

@ -0,0 +1,47 @@
---
layout: base
---
<h1 class="page-title"><a class="home" href="/" title="Back to Home">/</a>{{ page.category }}</h1>
{% for post in site.categories[page.category] %}
{% if post.categories contains "goodies" %}
<article class="hentry goodie">
<header>
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title }}</a></h1>
</header>
<section class="entry-content">
{% if post.image %}
<a href="{{ post.url }}">
{% picture {{ post.image }} class="teaser" %}
</a>
{% else %}
{{ post.excerpt }}
{% endif %}
<footer class="goodie-actions">
<p class="info col3">
<a class="btn icon-info" href="{{ post.url }}">Release Post</a>
</p>
{% if post.download %}
<p class="download col3">
<a class="btn icon-arrow-down" href="/media/{{ post.download }}">Download <span>zip</span></a>
</p>
{% endif %}
</footer>
</section>
</article>
{% else %}
{% include index.html %}
{% endif %}
{% endfor %}

View File

@ -0,0 +1,240 @@
# encoding: utf-8
#
# Jekyll category page generator.
# http://recursive-design.com/projects/jekyll-plugins/
#
# Version: 0.2.4 (201210160037)
#
# Copyright (c) 2010 Dave Perrett, http://recursive-design.com/
# Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
#
# A generator that creates category pages for jekyll sites.
#
# To use it, simply drop this script into the _plugins directory of your Jekyll site. You should
# also create a file called 'category_index.html' in the _layouts directory of your jekyll site
# with the following contents (note: you should remove the leading '# ' characters):
#
# ================================== COPY BELOW THIS LINE ==================================
# ---
# layout: default
# ---
#
# <h1 class="category">{{ page.title }}</h1>
# <ul class="posts">
# {% for post in site.categories[page.category] %}
# <div>{{ post.date | date_to_html_string }}</div>
# <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
# <div class="categories">Filed under {{ post.categories | category_links }}</div>
# {% endfor %}
# </ul>
# ================================== COPY ABOVE THIS LINE ==================================
#
# You can alter the _layout_ setting if you wish to use an alternate layout, and obviously you
# can change the HTML above as you see fit.
#
# When you compile your jekyll site, this plugin will loop through the list of categories in your
# site, and use the layout above to generate a page for each one with a list of links to the
# individual posts.
#
# You can also (optionally) generate an atom.xml feed for each category. To do this, copy
# the category_feed.xml file to the _includes/custom directory of your own project
# (https://github.com/recurser/jekyll-plugins/blob/master/_includes/custom/category_feed.xml).
# You'll also need to copy the octopress_filters.rb file into the _plugins directory of your
# project as the category_feed.xml requires a couple of extra filters
# (https://github.com/recurser/jekyll-plugins/blob/master/_plugins/octopress_filters.rb).
#
# Included filters :
# - category_links: Outputs the list of categories as comma-separated <a> links.
# - date_to_html_string: Outputs the post.date as formatted html, with hooks for CSS styling.
#
# Available _config.yml settings :
# - category_dir: The subfolder to build category pages in (default is 'categories').
# - category_title_prefix: The string used before the category name in the page title (default is
# 'Category: ').
module Jekyll
# The CategoryIndex class creates a single category page for the specified category.
class CategoryPage < Page
# Initializes a new CategoryIndex.
#
# +template_path+ is the path to the layout template to use.
# +site+ is the Jekyll Site instance.
# +base+ is the String path to the <source>.
# +category_dir+ is the String path between <source> and the category folder.
# +category+ is the category currently being processed.
def initialize(template_path, name, site, base, category_dir, category)
@site = site
@base = base
@dir = category_dir
@name = name
self.process(name)
if File.exist?(template_path)
@perform_render = true
template_dir = File.dirname(template_path)
template = File.basename(template_path)
# Read the YAML data from the layout page.
self.read_yaml(template_dir, template)
self.data['category'] = category
# Set the title for this page.
title_prefix = site.config['category_title_prefix'] || 'Category: '
self.data['title'] = "#{title_prefix}#{category}"
# Set the meta-description for this page.
meta_description_prefix = site.config['category_meta_description_prefix'] || 'Category: '
self.data['description'] = "#{meta_description_prefix}#{category}"
else
@perform_render = false
end
end
def render?
@perform_render
end
end
# The CategoryIndex class creates a single category page for the specified category.
class CategoryIndex < CategoryPage
# Initializes a new CategoryIndex.
#
# +site+ is the Jekyll Site instance.
# +base+ is the String path to the <source>.
# +category_dir+ is the String path between <source> and the category folder.
# +category+ is the category currently being processed.
def initialize(site, base, category_dir, category)
template_path = File.join(base, '_layouts', 'category_index.html')
super(template_path, 'index.html', site, base, category_dir, category)
end
end
# The CategoryFeed class creates an Atom feed for the specified category.
class CategoryFeed < CategoryPage
# Initializes a new CategoryFeed.
#
# +site+ is the Jekyll Site instance.
# +base+ is the String path to the <source>.
# +category_dir+ is the String path between <source> and the category folder.
# +category+ is the category currently being processed.
def initialize(site, base, category_dir, category)
template_path = File.join(base, '_includes', 'custom', 'category_feed.xml')
super(template_path, 'atom.xml', site, base, category_dir, category)
# Set the correct feed URL.
self.data['feed_url'] = "#{category_dir}/#{name}" if render?
end
end
# The Site class is a built-in Jekyll class with access to global site config information.
class Site
# Creates an instance of CategoryIndex for each category page, renders it, and
# writes the output to a file.
#
# +category+ is the category currently being processed.
def write_category_index(category)
target_dir = GenerateCategories.category_dir(self.config['category_dir'], category)
index = CategoryIndex.new(self, self.source, target_dir, category)
if index.render?
index.render(self.layouts, site_payload)
index.write(self.dest)
# Record the fact that this pages has been added, otherwise Site::cleanup will remove it.
self.pages << index
end
# Create an Atom-feed for each index.
feed = CategoryFeed.new(self, self.source, target_dir, category)
if feed.render?
feed.render(self.layouts, site_payload)
feed.write(self.dest)
# Record the fact that this pages has been added, otherwise Site::cleanup will remove it.
self.pages << feed
end
end
# Loops through the list of category pages and processes each one.
def write_category_indexes
if self.layouts.key? 'category_index'
self.categories.keys.each do |category|
self.write_category_index(category)
end
# Throw an exception if the layout couldn't be found.
else
throw "No 'category_index' layout found."
end
end
end
# Jekyll hook - the generate method is called by jekyll, and generates all of the category pages.
class GenerateCategories < Generator
safe true
priority :low
CATEGORY_DIR = 'categories'
def generate(site)
site.write_category_indexes
end
# Processes the given dir and removes leading and trailing slashes. Falls
# back on the default if no dir is provided.
def self.category_dir(base_dir, category)
base_dir = (base_dir || CATEGORY_DIR).gsub(/^\/*(.*)\/*$/, '\1')
category = category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase
File.join(base_dir, category)
end
end
# Adds some extra filters used during the category creation process.
module Filters
# Outputs a list of categories as comma-separated <a> links. This is used
# to output the category list for each post on a category page.
#
# +categories+ is the list of categories to format.
#
# Returns string
def category_links(categories)
base_dir = @context.registers[:site].config['category_dir']
categories = categories.sort!.map do |category|
category_dir = GenerateCategories.category_dir(base_dir, category)
# Make sure the category directory begins with a slash.
category_dir = "/#{category_dir}" unless category_dir =~ /^\//
"<a class='category' href='#{category_dir}/'>#{category}</a>"
end
case categories.length
when 0
""
when 1
categories[0].to_s
else
categories.join(', ')
end
end
# Outputs the post.date as formatted html, with hooks for CSS styling.
#
# +date+ is the date object to format as HTML.
#
# Returns string
def date_to_html_string(date)
result = '<span class="month">' + date.strftime('%b').upcase + '</span> '
result += date.strftime('<span class="day">%d</span> ')
result += date.strftime('<span class="year">%Y</span> ')
result
end
end
end

View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2008-04-04 01:55:54+00:00
layout: post
slug: aperture-file-types
title: Aperture File Types
image: Teaser-Aperture-File-Types.jpg
download: aperturefiletypes_by_kremalicious.zip
author: Matthias Kretschmann
date: 2008-04-04 01:55:54+00:00
wordpress_id: 21
categories:
- goodies
@ -13,24 +15,12 @@ categories:
These icons are free for your personal use and include icons for all file types Apples 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).
<!-- more -->
* Mac + Win + Linux + iContainer
* Leopard ready (512×512)
* custom 32px and 16px icons
Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
[download_button version=1.2]
<a class="btn btn-block icon-download-alt" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).

View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2008-06-01 18:43:40+00:00
layout: post
slug: chives
title: Chives
image: Teaser-Chives.jpg
download: chives_by_kremalicious.zip
author: Matthias Kretschmann
date: 2008-06-01 18:43:40+00:00
wordpress_id: 64
categories:
- goodies
@ -17,6 +19,6 @@ I have added my first wallpaper to the Goodies section on this website. It's a s
You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
[download_button version=1.0]
<a class="btn btn-block icon-download-alt" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).

View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2008-06-03 14:34:03+00:00
layout: post
slug: niepces-camera-obscura-and-the-history-of-the-first-photograph
title: Niépce's Camera Obscura And The History Of The First Photograph
image: Teaser-Camera-Obscura-Icons.jpg
download: niepces_camera_obscura_by_kremalicious.zip
author: Matthias Kretschmann
date: 2008-06-03 14:34:03+00:00
wordpress_id: 67
categories:
- goodies
@ -14,34 +16,21 @@ categories:
These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package.
<!-- more -->
![](/media/cameraobscura11_all-540x262.png)
Either just download the icons or read the exciting story about the First Photograph.
1. The story behind these icons: The First Photograph and References in the icons
2. Download and enjoy!
3. How to use these icons
4. Final Words
## The story behind these icons
There's a fascinating story behind these icons which is nothing more than the story of the invention of photography. Grab yourself a cup of coffee or tea and sit back while reading this story. Of course, if you're bored already just grab the download package further down this page ;-)
@ -49,9 +38,9 @@ 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](/media/nicephore-niepce-150x150.jpg)](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795
[caption id="attachment_2264" align="alignleft" width="150"][![Nicéphore Niépce, ca. 1795](/media/nicephore-niepce-150x150.jpg)](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795[/caption]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.
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.
But it was just used either for entertainment or as an aid for drawing and painting. Painters were able to just redraw the projected image of the Camera Obscura.
@ -61,7 +50,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!
[caption id="attachment_2262" align="aligncenter" width="540"][![](/media/View-from-the-Window-at-Le-Gras-540x375.png)](/media/View-from-the-Window-at-Le-Gras.png) View from the Window at Le Gras[/caption]
[![](/media/View-from-the-Window-at-Le-Gras-540x375.png)](/media/View-from-the-Window-at-Le-Gras.png) 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.
@ -121,7 +110,7 @@ Brief description of Daguerres role in the invention of photography process by T
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](http://www.kremalicious.com/goodies/) or directly via this link:
[download_button version=1.1]
<a class="btn btn-block icon-download-alt" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
@ -149,10 +138,6 @@ These desktop icons are free for you personal and non-commercial use. All other
## Final Words
![Oh no!](/media/coffee-cup-empty.png)
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or [Atom-Feed](http://www.kremalicious.com/feed/atom), discuss this article or buy me my next coffee ;-)
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or buy me my next coffee ;-)

View File

@ -1,10 +1,12 @@
---
author: Matthias Kretschmann
comments: true
date: 2008-06-03 13:32:24+00:00
layout: post
slug: niepces-camera-obscura-wallpaper-pack
title: Niépce's Camera Obscura Wallpaper Pack
image: Teaser-Camera-Obscura-Walls.jpg
download: niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip
author: Matthias Kretschmann
date: 2008-06-03 13:32:24+00:00
wordpress_id: 66
categories:
- goodies
@ -13,25 +15,14 @@ categories:
In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have made some Wallpapers containing both icons.
<!-- more -->
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro). Here are the details:
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).
<a class="btn btn-block icon-download-alt" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
Here are the details:
* Aperture and iPhoto styled Camera Obscura as it was used by Nicéphore Niépce.
* Including one desktop version with the Aperture styled Camera Obscura and one with the iPhoto styled. Both come in 1920x1200 for widescreen displays and 1600x1200 for normal displays
* Including 2 different crops for the iPhone (480x320).
Just grab them from the [Goodies page](/goodies/) and have fun.
[download_button version=1.0]
* Including 2 different crops for the iPhone (480x320).

View File

@ -3,6 +3,7 @@ layout: post
title: Coffee Cup Icon
image: Teaser-Coffee-Cup-Icon.jpg
download: coffee_cup_by_kremalicious.zip
author: Matthias Kretschmann
date: 2008-10-23 14:59:23+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: '"We Are Out Of Whale Oil"'
image: Teaser-Out-Of-Whale-Oil.jpg
download: out-of-whale-oil-wall-by-kremalicious.zip
author: Matthias Kretschmann
date: 2009-02-17 20:11:55+00:00

View File

@ -2,6 +2,7 @@
layout: post
title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else
download: share-link-bonanza-coda-clips.zip
author: Matthias Kretschmann
date: 2009-03-29 23:12:15+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: Twitter Crisp
image: Teaser-Twitter-Crisp.jpg
download: twitter-crisp-by-kremalicious.zip
author: Matthias Kretschmann
date: 2009-06-04 00:16:40+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: Adiumeetie. Tweetie Style Adium Icon
image: Teaser-Adiumeetie.jpg
download: adiumeetie-by-kremalicious.zip
author: Matthias Kretschmann
date: 2009-06-24 21:00:38+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: Delibar Interface Replacement Icons
image: Teaser-Delibar-Icons.jpg
download: delibar-by-kremalicious.zip
author: Matthias Kretschmann
date: 2009-09-05 19:07:31+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: iPixelPad - Tongue Twisting But Crisp iPad Icons
image: Teaser-iPixelPad.png
download: ipixelpad_by_kremalicious.zip
author: Matthias Kretschmann
date: 2010-02-04 15:21:42+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: MomCorp Wallpaper
image: Teaser-MomCorp-Wall.png
download: momcorp_wall_by_kremalicious.zip
author: Matthias Kretschmann
date: 2010-07-03 17:12:53+00:00

View File

@ -3,6 +3,7 @@ layout: post
title: Project Purple
image: Teaser-Project-Purple.png
download: project-purple-kremalicious.zip
author: Matthias Kretschmann
featured: true

View File

@ -1,20 +0,0 @@
---
layout: base
title: Archive
---
<section role="main" id="main archive" class="row">
<h1 class="page-title">Archive</h1>
{% for post in site.posts %}
<article class="hentry">
<header>
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title }}</a></h1>
</header>
</article>
{% endfor %}
</section>

View File

@ -3,14 +3,13 @@
/////////////////////////////////////
.btn {
font-size: @font-size-small;
font-family: @font-family-serif;
line-height: 1em;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
cursor: pointer;
display: inline-block;
padding: .5em 2em;
padding: @line-height-computed/2 2em;
margin-bottom: @line-height-computed;
background: rgba(255,255,255,.1);
border: 1px solid rgba(94,131,162,.3);

View File

@ -1,3 +1,15 @@
.page-title {
.h2;
.heading-band;
color: @brand-grey-light;
margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2;
.home {
color: @link-color;
}
}
.hentry {
.divider-bottom;
padding: @line-height-computed*2 0;
@ -218,6 +230,27 @@
}
//
// Goodies download
//
.goodie-actions {
.clearfix;
p,
.btn { margin-bottom: 0 }
.btn { display: block; }
.download {
margin-top: @line-height-computed/2;
@media @breakpoint2 {
margin-top: 0;
text-align: right
}
}
}
// Masonry