diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5d12634 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4f7e422 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +/node_modules +/content +/svgpack +yarn-error.log +config.toml +npm-debug.log +!/exampleSite/config.toml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..0bd8662 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,26 @@ +language: node_js + +node_js: + - "6" + +sudo: false + +cache: + directories: + - node_modules + +branches: + only: + - master + +before_script: bash ./bin/build.sh + +script: + - ls -al static/css/style.css + +after_success: bash ./bin/deploy.sh + +env: + global: + - GH_REF: github.com/mismith0227/hugo_theme_pickles.git + - secure: "3+eJcE7w2FHiUCywL8jmk4c8M55crxZ8UYZ8sU/HQ+Q07usF/2loFCTv1kmZOs6/sYMIIdbs4E6W402eDkjL++VdQ8JWvs3b5ZHvZPlsw22gJzmoutRAhY+7zKUiAl8NyFcH5X+Co/hJL3OU747tI8pcgpY4cP4kfRetxtwP22n5ozdc5103BajgKjAQbmDDcOxjX2P/lc6Qghxwxtt6hmnT8wjwBPd3kyu9bz59bYPynlf+Igju+R+zHXKwbClNs3wcdTHXxtPl1EuOEYiMWcwGJUCwkLz7g2wVTIGkl9vbTGQqlxkobvOVdrPLoVyUlFLdQrB8t06MCUawan9K+gn0RUlo35tNGUeuuJGN8aaAgWJ2L0/QkW64qzHysHg/MfQ3KWkzUDhuVjoG/ZAW1k2pY6cBrvULPbQNC+pICbkYjHHqSUwjRp6xU7ZuLgEsDPN04lI/UGhfbVKfnpqujl4sDkTHugnwffUj76BaFT+H/g6S50v2HI9PHi6FDFRncTkR9LLpLYxdVTkr5A83m/7QOto+ZcZKKzoJeVxHZXRem2NvR090yg31bgzQv3oMopGSUOmzmbX27OwzV78XyTTYdGKcVRzZBo+oELY/tHL3UhDIyTWmdFt+FHQqHzz/rFZO3xaU/Pl5IC1YXB92pIQ9OPTqV6IaYEiwiqJuum0=" diff --git a/LICENSE.md b/LICENSE.md index 624b3f3..993c947 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2018 YOUR_NAME_HERE +Copyright (c) 2017 Takuma Misumi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in diff --git a/README.md b/README.md new file mode 100644 index 0000000..efa2bfb --- /dev/null +++ b/README.md @@ -0,0 +1,97 @@ +# Pickles [![Build Status](https://travis-ci.org/mismith0227/hugo_theme_pickles.svg?branch=master)](https://travis-ci.org/mismith0227/hugo_theme_pickles) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/mismith0227/hugo_theme_pickles/blob/master/license.md) [![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) + +Pickles is a modern, simple and beautiful Hugo theme. + +![screenshot](https://github.com/mismith0227/hugo_theme_pickles/blob/master/images/screenshot.png) + +## Overview + +* Modern, Simple and beautiful design +* Medium's Image Zoom（[zoom.js](https://github.com/fat/zoom.js/)) +* Social links（Twitter,Facebook,Instagram,Google+,GitHub,GitLab,npm,Codepen,Dribbble,500px,Flickr,Pinterest,Tumblr,Vimeo,YouTube,Linkedin） +* Support for Related Content +* Support for tags +* Analytics with Google Analytics +* Responsive design +* SVG Sprite + +Use short code for Image Zoom. + +``` +{{% zoom-img src="/images/default.jpg" %}} +``` + +## Features + +* gulp +* webpack +* PostCSS +* Babel +* SVG Sprite +* Standard + +## Installation + +In your hugo site directory, run: + +```shell +$ mkdir themes +$ cd themes +$ git clone -b release https://github.com/mismith0227/hugo_theme_pickles +``` + +Or download it from the release branch + +[release](https://github.com/mismith0227/hugo_theme_pickles/tree/release) + +## Usage + +Use hugo's -t hugo_theme_pickles or --theme=hugo_theme_pickles option with hugo commands. Example: + +```shell +$ hugo server -t hugo_theme_pickles -w -D +``` + +## Configuration + +You may specify following options in `config.toml` of your site to make use of +this theme's features. + +For getting started with Pickles, copy the [config.toml](https://github.com/mismith0227/hugo_theme_pickles/blob/master/exampleSite/config.toml) file from the exampleSite directory inside Pickles’s repository to your site repository. + +```shell +$ cp themes/hugo_theme_pickles/exampleSite/config.toml . +``` + +Now, you can start editing this file and add your own information! + +## Contributing + +Pull requests, bug fixes and new features are welcome! + +Please create feature branches from [develop](https://github.com/mismith0227/hugo_theme_pickles/tree/develop) and submit a PR for any change. + +## Development + +1. Install Node modules + + $ yarn + +1. Run gulp. You don't need to install gulp globally. + + // Development + $ yarn run dev + $ // On another tab + $ hugo server + + // Production (compress) + $ yarn run prod + $ // On another tab + $ hugo server + + // Build + $ yarn run build + +## License + +Open sourced under the MIT license. diff --git a/archetypes/default.md b/archetypes/default.md index ac36e06..2a3b476 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,2 +1,6 @@ -+++ -+++ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +thumbnail: "path/thumbnail.jpg" +draft: true +--- diff --git a/config.js b/config.js new file mode 100644 index 0000000..820a286 --- /dev/null +++ b/config.js @@ -0,0 +1,71 @@ +import minimist from 'minimist' + +const envSettings = { + string: 'env', + default: { + env: process.env.NODE_ENV || 'development' + } +} + +const options = minimist(process.argv.slice(2), envSettings) +const production = options.env === 'production' + +const config = { + dirs: { + src: './src', + dest: './static' + }, + envProduction: production +} + +const tasks = { + css: { + src: `${config.dirs.src}/css/style.css`, + dest: `${config.dirs.dest}/css`, + processors: [ + require('postcss-import'), + require('postcss-custom-properties'), + require('postcss-custom-media'), + require('postcss-apply'), + require('postcss-nesting'), + require('postcss-flexbugs-fixes'), + require('autoprefixer'), + require('postcss-browser-reporter')({ + selector: 'body:before' + }), + require('postcss-reporter')({ + clearMessages: true + }) + ], + minifyLib: require('csswring') + }, + webpack: { + src: `${config.dirs.src}/js/app.js`, + dest: `${config.dirs.dest}/js`, + filename: 'bundle.js' + }, + watch: { + css: [`${config.dirs.src}/css/**/*.css`], + image: [`${config.dirs.src}/img/**/*`], + webpack: [`${config.dirs.src}/js/**/*.js`] + }, + images: { + src: `${config.dirs.src}/images/**/*`, + dest: `${config.dirs.dest}/images` + }, + svg: { + src: `${config.dirs.src}/svg/*.svg`, + dest: './svgpack' + }, + svgRename: { + src: './svgpack/svgpack-sprite.svg', + dest: './layouts/partials', + filename: 'svgpack-sprite.html' + }, + clean: [ + config.dirs.dest + ] +} + +config.tasks = tasks +module.exports = config diff --git a/exampleSite/config.toml b/exampleSite/config.toml new file mode 100644 index 0000000..fef4a83 --- /dev/null +++ b/exampleSite/config.toml @@ -0,0 +1,97 @@ +baseurl = "Your site URL" +languageCode = "en-us" +Title = "Your site title" +# Copyright notice. This is displayer in the footer. +copyright = "© Copyright notice" + +[params] + paginate = 10 + # Social accounts. Link to these accounts are displayed in the header and + # footer + twitter = "Your Twitter username" + facebook = "Your Facebook username" + instagram = "Your Instagram username" + googleplus = "Your Google+ account URL" # https://plus.google.com/u/0/xxxxxx + github = "Your GitHub username" + gitlab = "Your GitLab username" + npm = "Your npm username" + codepen = "Your CodePen username" + dribbble = "Your Dribbble username" + fivehundredpx = "Your 500px username" # 500px + flickr = "Your Flickr username" + pinterest = "Your Pinterest username" + tumblr = "Your Tumblr username" + vimeo = "Your Vimeo username" + youtube = "Your YouTube username" + linkedin = "Your LinkedIn username" + # Disqus shortname + disqus = "" + # Google Analytics API key. + ga_api_key = "Your Google Analytics tracking id" + author = "Your Name" + authorwebsite = "example.com" + avatar = "/path/to/avatar" + contact = "Your contact link (ex. mailto:foo@example.com)" + bio = "Your short bio" + # Short subtitle/tagline. This is displayed in the header. + subtitle = "Short subtitle" + # Logo image. This is displayed ogp image. + logo = "/path/to/logo" + favicon = "/path/to/favicon" + +[[menu.main]] + name = "Blog" + url = "/" + weight = 1 + +[[menu.main]] + name = "About" + url = "/about" + weight = 2 + +[[menu.main]] + identifier = "theme" + name = "/theme" + weight = 3 + +[[menu.main]] + parent = "theme" + name = "creating-a-new-theme" + url = "/posts/creating-a-new-theme" + weight = 1 + +[[menu.main]] + parent = "theme" + name = "migrate-from-jekyll" + url = "/posts/migrate-from-jekyll" + weight = 2 + +[[menu.main]] + name = "Tags" + url = "/tags" + weight = 4 + +[related] + # Only include matches with rank >= threshold. This is a normalized rank between 0 and 100. + threshold = 80 + + # To get stable "See also" sections we, by default, exclude newer related pages. + includeNewer = false + + # Will lower case keywords in both queries and in the indexes. + toLower = false + + [[related.indices]] + name = "keywords" + weight = 150 + [[related.indices]] + name = "author" + toLower = true + weight = 30 + [[related.indices]] + name = "tags" + weight = 100 + [[related.indices]] + name = "date" + weight = 10 + pattern = "2017" diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md new file mode 100644 index 0000000..4156cdc --- /dev/null +++ b/exampleSite/content/about.md @@ -0,0 +1,16 @@ ++++ +title = "About Hugo" +date = "2014-04-09" ++++ + +Hugo is a static site engine written in Go. + + +It makes use of a variety of open source projects including: + +* [Cobra](https://github.com/spf13/cobra) +* [Viper](https://github.com/spf13/viper) +* [J Walter Weatherman](https://github.com/spf13/jWalterWeatherman) +* [Cast](https://github.com/spf13/cast) + +Learn more and contribute on [GitHub](https://github.com/gohugoio). diff --git a/exampleSite/content/posts/goisforlovers.md b/exampleSite/content/posts/goisforlovers.md new file mode 100644 index 0000000..f51b7ae --- /dev/null +++ b/exampleSite/content/posts/goisforlovers.md @@ -0,0 +1,343 @@ ++++ +title = "(Hu)go Template Primer" +description = "" +tags = [ + "go", + "golang", + "templates", + "themes", + "development", +] +date = "2014-04-02" +categories = [ + "Development", + "golang", +] ++++ + +Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for +its template engine. It is an extremely lightweight engine that provides a very +small amount of logic. In our experience that it is just the right amount of +logic to be able to create a good static website. If you have used other +template systems from different languages or frameworks you will find a lot of +similarities in go templates. + +This document is a brief primer on using go templates. The [go docs][gohtmltemplate] +provide more details. + +## Introduction to Go Templates + +Go templates provide an extremely simple template language. It adheres to the +belief that only the most basic of logic belongs in the template or view layer. +One consequence of this simplicity is that go templates parse very quickly. + +A unique characteristic of go templates is they are content aware. Variables and +content will be sanitized depending on the context of where they are used. More +details can be found in the [go docs][gohtmltemplate]. + +## Basic Syntax + +Go lang templates are html files with the addition of variables and +functions. + +**Go variables and functions are accessible within {{ }}** + +Accessing a predefined variable "foo": + + {{ foo }} + +**Parameters are separated using spaces** + +Calling the add function with input of 1, 2: + + {{ add 1 2 }} + +**Methods and fields are accessed via dot notation** + +Accessing the Page Parameter "bar" + + {{ .Params.bar }} + +**Parentheses can be used to group items together** + + {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} + + +## Variables + +Each go template has a struct (object) made available to it. In hugo each +template is passed either a page or a node struct depending on which type of +page you are rendering. More details are available on the +[variables](/layout/variables) page. + +A variable is accessed by referencing the variable name. + + {{ .Title }} + +Variables can also be defined and referenced. + + {{ $address := "123 Main St."}} + {{ $address }} + + +## Functions + +Go template ship with a few functions which provide basic functionality. The go +template system also provides a mechanism for applications to extend the +available functions with their own. [Hugo template +functions](/layout/functions) provide some additional functionality we believe +are useful for building websites. Functions are called by using their name +followed by the required parameters separated by spaces. Template +functions cannot be added without recompiling hugo. + +**Example:** + + {{ add 1 2 }} + +## Includes + +When including another template you will pass to it the data it will be +able to access. To pass along the current context please remember to +include a trailing dot. The templates location will always be starting at +the /layout/ directory within Hugo. + +**Example:** + + {{ template "chrome/header.html" . }} + + +## Logic + +Go templates provide the most basic iteration and conditional logic. + +### Iteration + +Just like in go, the go templates make heavy use of range to iterate over +a map, array or slice. The following are different examples of how to use +range. + +**Example 1: Using Context** + + {{ range array }} + {{ . }} + {{ end }} + +**Example 2: Declaring value variable name** + + {{range $element := array}} + {{ $element }} + {{ end }} + +**Example 2: Declaring key and value variable name** + + {{range $index, $element := array}} + {{ $index }} + {{ $element }} + {{ end }} + +### Conditionals + +If, else, with, or, & and provide the framework for handling conditional +logic in Go Templates. Like range, each statement is closed with `end`. + + +Go Templates treat the following values as false: + +* false +* 0 +* any array, slice, map, or string of length zero + +**Example 1: If** + + {{ if isset .Params "title" }}

{{ index .Params "title" }}

{{ end }} + +**Example 2: If -> Else** + + {{ if isset .Params "alt" }} + {{ index .Params "alt" }} + {{else}} + {{ index .Params "caption" }} + {{ end }} + +**Example 3: And & Or** + + {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} + +**Example 4: With** + +An alternative way of writing "if" and then referencing the same value +is to use "with" instead. With rebinds the context `.` within its scope, +and skips the block if the variable is absent. + +The first example above could be simplified as: + + {{ with .Params.title }}

{{ . }}

{{ end }} + +**Example 5: If -> Else If** + + {{ if isset .Params "alt" }} + {{ index .Params "alt" }} + {{ else if isset .Params "caption" }} + {{ index .Params "caption" }} + {{ end }} + +## Pipes + +One of the most powerful components of go templates is the ability to +stack actions one after another. This is done by using pipes. Borrowed +from unix pipes, the concept is simple, each pipeline's output becomes the +input of the following pipe. + +Because of the very simple syntax of go templates, the pipe is essential +to being able to chain together function calls. One limitation of the +pipes is that they only can work with a single value and that value +becomes the last parameter of the next pipeline. + +A few simple examples should help convey how to use the pipe. + +**Example 1 :** + + {{ if eq 1 1 }} Same {{ end }} + +is the same as + + {{ eq 1 1 | if }} Same {{ end }} + +It does look odd to place the if at the end, but it does provide a good +illustration of how to use the pipes. + +**Example 2 :** + + {{ index .Params "disqus_url" | html }} + +Access the page parameter called "disqus_url" and escape the HTML. + +**Example 3 :** + + {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} + Stuff Here + {{ end }} + +Could be rewritten as + + {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }} + Stuff Here + {{ end }} + + +## Context (aka. the dot) + +The most easily overlooked concept to understand about go templates is that {{ . }} +always refers to the current context. In the top level of your template this +will be the data set made available to it. Inside of a iteration it will have +the value of the current item. When inside of a loop the context has changed. . +will no longer refer to the data available to the entire page. If you need to +access this from within the loop you will likely want to set it to a variable +instead of depending on the context. + +**Example:** + + {{ $title := .Site.Title }} + {{ range .Params.tags }} +
  • {{ . }} - {{ $title }}
    • + {{ end }} + +Notice how once we have entered the loop the value of {{ . }} has changed. We +have defined a variable outside of the loop so we have access to it from within +the loop. + +# Hugo Parameters + +Hugo provides the option of passing values to the template language +through the site configuration (for sitewide values), or through the meta +data of each specific piece of content. You can define any values of any +type (supported by your front matter/config format) and use them however +you want to inside of your templates. + + +## Using Content (page) Parameters + +In each piece of content you can provide variables to be used by the +templates. This happens in the [front matter](/content/front-matter). + +An example of this is used in this documentation site. Most of the pages +benefit from having the table of contents provided. Sometimes the TOC just +doesn't make a lot of sense. We've defined a variable in our front matter +of some pages to turn off the TOC from being displayed. + +Here is the example front matter: + +``` +--- +title: "Permalinks" +date: "2013-11-18" +aliases: + - "/doc/permalinks/" +groups: ["extras"] +groups_weight: 30 +notoc: true +--- +``` + +Here is the corresponding code inside of the template: + + {{ if not .Params.notoc }} +
    + {{ .TableOfContents }} +
    + {{ end }} + + + +## Using Site (config) Parameters +In your top-level configuration file (eg, `config.yaml`) you can define site +parameters, which are values which will be available to you in chrome. + +For instance, you might declare: + +```yaml +params: + CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved." + TwitterUser: "spf13" + SidebarRecentLimit: 5 +``` + +Within a footer layout, you might then declare a `