Merge pull request #194 from kakawait/develop

Release 0.4.0-BETA

CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.4.0-BETA](https://github.com/kakawait/hugo-tranquilpeak-theme/milestone/4) - 10 sep 2017
+
+- Fix menu ordering ([#149](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/149), [#150](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/150))
+- Synch from Hexo Tranquilpeak theme 1.10 ([#147](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/147), [#132](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/132))
+  - Italian translation
+  - `showMeta` & `showActions` (see user doc for more details)
+  - Extensible _Sharing options_ (see user doc for more details)
+  - XLG side bar bug on Edge
+  - _OLDER POSTS_ Button Overlaps Sidebar
+  - Print media queries
+- Load external resources using SRI ([#159](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/159))
+- revamp HLjs usage to fix highligthing bugs ([#154](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/154), [#160](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/160))
+- Improve `customJS` and `customCSS`
+  - Now support both abs and rel url ([#155](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/155))
+  - Add more customization than just url ([#163](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/163))
+- Add theme version on meta tag ([#140](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/140))
+
+### Breaking changes
+
+In order to fix menu ordering, you have to upgrade you `config.toml` to avoid any menu weight equals to `0`. See https://github.com/kakawait/hugo-tranquilpeak-theme/commit/f4feb3261381bd9a77be4da66d8466322886eb22#diff-991d2a2fe208cdee83955ad6e9a323a7 to get an full example.
+
+With new _Sharing options_ that allow extensible list of sharing options, there is no more hardcoded sharing option inside template. Thus sharing options: Facebook, Twitter and Google plus should be reported inside your `config.toml` (you can checkout `exampleSite/config.toml` to see sample):
+
+```toml
+[params]
+  [[params.sharingOptions]]
+    name = "Facebook"
+    icon = "fa-facebook-official"
+    url = "https://www.facebook.com/sharer/sharer.php?u=%s"
+
+  [[params.sharingOptions]]
+    name = "Twitter"
+    icon = "fa-twitter"
+    url = "https://twitter.com/intent/tweet?text=%s"
+
+  [[params.sharingOptions]]
+    name = "Google+"
+    icon = "fa-google-plus"
+    url = "https://plus.google.com/share?url=%s"
+```
+
 ## [0.3.1-BETA](https://github.com/kakawait/hugo-tranquilpeak-theme/milestone/13) - 15 apr 2017
 
 - Fix Merriweather font to support non latin chars ([#129](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/129), [#142](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/142), [#143](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/143))

README.md

@@ -34,7 +34,7 @@ Please all the credit should be attributed to [original *Hexo* version](https://
 ## General
 
 - **Authors**: [Louis Barranqueiro (LouisBarranqueiro)](https://github.com/LouisBarranqueiro) and [Thibaud Leprêtre (kakawait)](https://github.com/kakawait)
-- **Version**: 0.3.1-BETA (based on Hexo version 1.9.1)
+- **Version**: 0.4.0-BETA (based on Hexo version 1.10.0)
 - **Compatibility**: Hugo v0.20.1
 
 ## Features
@@ -72,7 +72,6 @@ Please all the credit should be attributed to [original *Hexo* version](https://
 
 ### Missing features from original *Hexo* version
 
-- [ ] Duoshuo
 - [ ] Baidu analytics
 - [ ] Algolia (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/8)
 - [ ] Pagination customization `tagPagination`, `categoryPagination` and `archivePagination` (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/17)

archetypes/page.md

@@ -10,10 +10,8 @@ tags:
 keywords:
 - tech
 comments:       false
-showDate:       false
-showSocial:     false
-showTags:       false
-showPagination: false
+showMeta:       false
+showActions:    false
 #thumbnailImage: //example.com/image.jpg
 ---
 

docs/developer.md

@@ -28,14 +28,13 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 ## General ##
 
 - **Author** : Thibaud Leprêtre
-- **Version** : 0.3.1-BETA (based on Hexo version 1.9.1)
+- **Version** : 0.4.0-BETA (based on Hexo version 1.10.0)
 - **Compatibility** : Hugo v0.20.1
 
 ## Requirements ##
 
 1. **Hugo** : v0.16 or higher, see official documentation (https://gohugo.io/overview/installing/)
-3. **Grunt CLI** : v0.1.13 or higher. Run `npm install grunt-cli -g`
-4. **Bower** : v1.4.1 or higher. Run `npm install bower -g`
+2. **Grunt CLI** : v0.1.13 or higher. Run `npm install grunt-cli -g`
 
 ## Installation ##
 
@@ -45,7 +44,6 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 4. Go in `theme/tranquilpeak` folder with `cd themes/tranquilpeak`
 5. Install [requirements](#requirements)
 6. Run `npm install` to install [NPM dependencies](#npm-dependencies)
-7. Run `bower install` to install [Bower dependencies](#bower-dependencies) 
 
 If you want to configure the theme, please follow the [user documentation](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md)  
 
@@ -160,7 +158,7 @@ Use `npm run <script_name>` to run one of these scripts. E.g : `npm run start`
 |`npm run ...`|Description|
 |---|---|
 |`start`|Build the theme once and rebuild after each change|
-|`prod`|Build the theme for production. (synchronize bower dependencies, images, fonts, compile assets (css and js) with some optimization (concat and minify) and link it to views)|
+|`prod`|Build the theme for production. (synchronize images, fonts, compile assets (css and js) with some optimization (concat and minify) and link it to views)|
 |`lint`|Check code style with [ESLint](http://eslint.org)|
 
 ## Grunt tasks ##
@@ -209,7 +207,6 @@ On production environment, these javascript and stylesheets files are concatenat
 
 |Task|Description|
 |---|---|
-|bower|Copy all needed files by types from bower dependencies|
 |clean|Delete `src/assets` folder|
 |concat|<ul><li>devJs : Concat all javascript files located in `src/js/` into 1 file : `src/assets/js/tranquilpeak.js`</li><li>prodCss : Concat all stylesheets files located in `src/assets/css/` into 1 file : `src/assets/css/style.css`</li><li>prodJs : Concat all javascript listed in `tasks/pipeline.js` in 1 file : `src/assets/js/script.js`</li></ul>|
 |cssmin|Minify `src/assets/cssstyle.css` file in : `src/assets/cssstyle.min.css`|
@@ -223,8 +220,8 @@ On production environment, these javascript and stylesheets files are concatenat
 
 |Task|Description|
 |---|---|
-|build|Synchronize bower dependencies, images, fonts, compile assets (css and js) and link it to views|
-|buildProd|Synchronize bower dependencies, images, fonts, compile assets (css and js) with some optimization (concat and minify) and link it to views|
+|build|Synchronize images, fonts, compile assets (css and js) and link it to views|
+|buildProd|Synchronize images, fonts, compile assets (css and js) with some optimization (concat and minify) and link it to views|
 |default|Build the theme once and rebuild after each change|
 |eslint|Check code style with ESLint|
 |compileAssets|Compile scss files and concat js files|

docs/user.md

@@ -28,6 +28,7 @@ If you want to report a bug or ask a question, [create an issue](https://github.
         * [Author](#author)
         * [Customization](#customization)
         * [Integrated services](#integrated-services)
+        * [Sharing options](#sharing-options)
         * [Enable pages](#enable-pages)
 - [Integrated services configuration](#integrated-services-configuration)
     * [Google Analytics](#google-analytics)
@@ -53,7 +54,7 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 ## General
 
 - **Authors**: [Louis Barranqueiro (LouisBarranqueiro)](https://github.com/LouisBarranqueiro) and [Thibaud Leprêtre (kakawait)](https://github.com/kakawait)
-- **Version**: 0.3.1-BETA (based on Hexo version 1.9.1)
+- **Version**: 0.4.0-BETA (based on Hexo version 1.10.0)
 - **Compatibility**: Hugo v0.20.1
 
 ## Features
@@ -91,7 +92,6 @@ If you want to report a bug or ask a question, [create an issue](https://github.
 
 ### Missing features from original *Hexo* version
 
-- [ ] Duoshuo
 - [ ] Baidu analytics
 - [ ] Algolia (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/8)
 - [ ] Pagination custumization `tagPagination`, `categoryPagination` and `archivePagination` (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/17)
@@ -360,8 +360,8 @@ E.g to display a shortcut to open algolia search window :
 | favicon | Your favicon path (Default: `/favicon.png`) |
 | imageGallery | Display an image gallery at the end of a post which have `photos` variables. (false: disabled, true: enabled) |
 | hierarchicalCategories | Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". If false it will flat categories. |
-| customCSS | Define files with css that override or extend the theme css; they are expected in `static` folder: `customCSS` = ["css/mystyles.css"]. |
-| customJS | Define files with js that override or extend the theme js; they are expected in `static` folder: `customJS` = ["js/myscripts.js"]. |
+| customCSS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with css that override or extend the theme css: `customCSS` = ["css/mystyles.css"]. |
+| customJS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with js that override or extend the theme js: `customJS` = ["js/myscripts.js"]. |
 
 E.g :  
 A category page look like this with `hierarchicalCategories = true` :  
@@ -370,6 +370,37 @@ A category page look like this with `hierarchicalCategories = true` :
 The same page with `hierarchicalCategories = false`:  
 ![hierarchicalCategories false](img/without_hierarchical_categories.png)  
 
+##### Add custom JS or CSS using configuration
+
+If you need to add some additionnal javascript or css files to your blog without forking or overriding theme itself you could use following configuration:
+
+```toml
+[params]
+  [[params.customJS]]
+    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/go.min.js"
+    integrity = "sha256-LVuWfOU0rWFMCJNl1xb3K2HSWfxtK4IPbqEerP1P83M="
+    crossorigin = "anonymous"
+    async = true
+    defer = true
+
+  [[params.customJS]]
+    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/dockerfile.min.js"
+    integrity = "sha256-putofyQv7OB569xAldpyBnHJ0Uc+7VGp5Us05IgDGss="
+    crossorigin = "anonymous"
+    async = true
+    defer = true
+
+  [[params.customJS]]
+    src = "js/myscript.js"
+
+  [[params.customCSS]]
+    href = "css/mystyle.css"
+```
+
+**ATTENTION** there is no limitation on key structures and each keys will be converted as tag attributes.
+
+Futhermore, even if previous syntax is still supported (`customJS = ["js/myscripts.js"]`), you can't mix both new and old syntax.
+
 #### Integrated services
 
 ```toml
@@ -396,7 +427,43 @@ googleAnalytics =
 | fbAdminIds | Your Facebook user ids used to connect your blog with your facebook user accounts (Facebook Insights). Use array syntax. E.g : `[9830047, 1003342]`. Visit [Facebook docs](https://developers.facebook.com/docs/platforminsights/domains) for more information. |
 | fbAppId | Your Facebook app id used to connect your blog with your facebook app account (Facebook Insights). E.g : `9841307`. Visit [Facebook docs](https://developers.facebook.com/docs/platforminsights/domains) for more information. |
 
-### Enable pages ###
+#### Sharing options
+
+``` toml
+[params]
+  [[params.sharingOptions]]
+    name = "Facebook"
+    icon = "fa-facebook-official"
+    url = "https://www.facebook.com/sharer/sharer.php?u=%s"
+
+  [[params.sharingOptions]]
+    name = "Twitter"
+    icon = "fa-twitter"
+    url = "https://twitter.com/intent/tweet?text=%s"
+
+  [[params.sharingOptions]]
+    name = "Google+"
+    icon = "fa-google-plus"
+    url = "https://plus.google.com/share?url=%s"
+```
+
+You can comment and uncomment to enable or disable sharing options. If your own sharing options, simply add new sharing options on your configuration. E.g with **foo_bar** social network:
+
+```toml
+[params]
+  [[params.sharingOptions]]
+    name = "Foo bar"
+    icon = "fa-foo-bar"
+    url = "https://www.foo-bar.com/sharer/sharer.php?u=%s"
+```
+
+|Variable|Description|
+|---|---|
+|name| Name of your sharing site.|
+|icon|Name of the fontawesome icon class (Go to [font-awesome icons](http://fontawesome.io/icons/) to find class name of icon)|
+|url|URL of the link. use %s to specify where to put the permalink.|
+
+#### Enable pages
 
 Tranquilpeak provides you 2 pages to display all posts title and date by tags, by categories, by date and an about page. To enable one of this pages simply add following [taxonomies](https://gohugo.io/taxonomies/overview/):
 
@@ -426,15 +493,15 @@ Follow these steps, to add new filter :
 7. Select **Custom filter**, **Filter Field** : `Hostname`, **Filter Pattern** :  `(.*?localhost.*?)`
 8. Click on **Save** button
 
-## Quick & easy modifications ##
+## Quick & easy modifications
 
-### Prerequisites ###
+### Prerequisites
 
 Since you are going to edit the theme, you have to install all the necessary to build it after changes : [Installation](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/docs/developer.md#installation)
 
 **Run command in theme folder : `hexo-blog/themes/tranquilpeak`**
 
-### Change global style ###
+### Change global style
 
 If you want to change font families, font size, sidebar color, things like that, take a look at `source/scss/utils/_variables.scss` file. This file contains global variables used in this theme. **Build the theme after changes to see changes.**
 
@@ -502,11 +569,13 @@ showDate: true
 |coverCaption|Add a caption under the cover image : [Cover caption demo](https://tranquilpeak.kakawait.com/2015/05/cover-image-showcase/)|
 |coverMeta|`in`: display post meta (title, date and categories) on cover image, `out`: display meta (title, date and categories) under cover image as usual. Default behavior : `in`|
 |gallery|Images displayed in an image gallery (with fancybox) at the end of the post. If thumbnail image is not configured and cover image too, the first photo is used as thumbnail image. format: `original url [thumbnail url] [caption]`, E.g : `https://example.com/original.jpg https://example.com/thumbnail.jpg "New York"`|
-|comments|Disable the comment of the post.
+|comments|`true`: Show the comment of the post.|
 |showDate|`true`: Show the date when `true` (default)|
-|showTags|`true`: show tags of this page. Default behavior: `true`
-|showPagination|`true`: show pagination.  Default behavior: `true`
-|showSocial|`true`: show social button such as share on Twitter, Facebook...  Default behavior: `true`
+|showTags|`true`: show tags of this page.|
+|showPagination|`true`: show pagination.|
+|showSocial|`true`: show social button such as share on Twitter, Facebook...|
+|showMeta|`true`: Show post meta (date, categories).|
+|showActions|`true`: Show post actions (navigation, share links).|
 
 Example: 
 A post on index page will look like this with :`thumbnailImagePosition` set to `bottom`:  
@@ -696,10 +765,8 @@ tags:
 keywords:
 - tech
 comments:       false
-showDate:       false
-showSocial:     false
-showTags:       false
-showPagination: false
+showMeta:       false
+showActions:    false
 #thumbnailImage: //example.com/image.jpg
 ---
 

exampleSite/config.toml

@@ -1,5 +1,5 @@
 # Tranquilpeak
-# Version : 0.3.1-BETA
+# Version : 0.4.0-BETA
 # Author : Thibaud Leprêtre
 
 # I STRONGLY recommend you to use a CDN to speed up loading of pages.
@@ -47,51 +47,51 @@ canonifyurls = true
 
 # Menu Configuration
 [[menu.main]]
-  weight = 0
+  weight = 1
   identifier = "home"
   name = "Home"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
   url = "/"
 [[menu.main]]
-  weight = 1
+  weight = 2
   identifier = "categories"
   name = "Categories"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
   url = "/categories"
 [[menu.main]]
-  weight = 2
+  weight = 3
   identifier = "tags"
   name = "Tags"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
   url = "/tags"
 [[menu.main]]
-  weight = 3
+  weight = 4
   identifier = "archives"
   name = "Archives"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
   url = "/archives"
 [[menu.main]]
-  weight = 4
+  weight = 5
   identifier = "about"
   name = "About"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-question\"></i>"
   url = "/#about"
 
 [[menu.links]]
-  weight = 0
+  weight = 1
   identifier = "github"
   name = "GitHub"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-github\"></i>"
   url = "https://github.com/kakawait"
 [[menu.links]]
-  weight = 1
+  weight = 2
   identifier = "stackoverflow"
   name = "Stack Overflow"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-stack-overflow\"></i>"
   url = "https://stackoverflow.com/users/636472/kakawait"
 
 [[menu.misc]]
-  weight = 0
+  weight = 1
   identifier = "rss"
   name = "RSS"
   pre = "<i class=\"sidebar-button-icon fa fa-lg fa-rss\"></i>"
@@ -172,6 +172,25 @@ canonifyurls = true
   # they have to be referred from static root. Example
   # customJS = ["js/foo.js"]
 
+  # Sharing options
+  # Comment and uncomment to enable or disable sharing options
+  # If you wanna add a sharing option, read user documentation :
+  # Tranquilpeak configuration > Theme configuration > sharing-options
+  [[params.sharingOptions]]
+    name = "Facebook"
+    icon = "fa-facebook-official"
+    url = "https://www.facebook.com/sharer/sharer.php?u=%s"
+
+  [[params.sharingOptions]]
+    name = "Twitter"
+    icon = "fa-twitter"
+    url = "https://twitter.com/intent/tweet?text=%s"
+
+  [[params.sharingOptions]]
+    name = "Google+"
+    icon = "fa-google-plus"
+    url = "https://plus.google.com/share?url=%s"
+
   [params.header.rightLink]
     class = ""
     icon = ""