Skip to content

Commit

Permalink
Merge branch 'feature/2018-05-21-handlebars'
Browse files Browse the repository at this point in the history
  • Loading branch information
@fboes
fboes committed Jun 8, 2018
2 parents 599a105 + bc04df8 commit db06773
Show file tree
Hide file tree
Showing 33 changed files with 542 additions and 576 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ Change log

For detailed information check [Blogophon's releases on Github](https://github.com/fboes/blogophon/releases).

* :bomb: Change template engine from Mustache to [Handlebars](https://handlebarsjs.com/)
* :gift: Add `hreflang`-attribute to links leading to articles with different language
* :gift: Improve code styling for Markdown code examples in blog posts
* :gift: Improve `h-entry`, `h-feed` & `h-card` [microformats](https://indieweb.org/microformats2) for better syndication
Expand Down
8 changes: 4 additions & 4 deletions docs/development.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ This webserver will also spawn a [LiveReload](http://livereload.com/) service. G
Theming
-------

To develop a new theme follow these steps:
The themes of the Blogophon use [Handlebars templating](https://handlebarsjs.com/). To develop a new theme follow these steps:

1. Copy `htdocs/theme/default/` to `htdocs/theme/YOUR_THEME_NAME`.
1. Call `blogophon` and choose your new theme `YOUR_THEME_NAME`.
1. Run `gulp` to start the SASS- & JS-compiler. This will also reload your browser on theme changes if you have the [LiveReload plugin](http://livereload.com/extensions/) installed.
1. Start making modifications to your copied theme files.
1. Start making modifications to your copied Handlebars theme files.

Take special note of `theme.json`, as it contains settings for your theme like settings for responsive images, images and icons:

Expand All @@ -43,9 +43,9 @@ Take special note of `theme.json`, as it contains settings for your theme like s

### Template variables

Keep in mind that every property in the article's [YAML frontmatter](markdown.md) will become a Mustache `post.meta` variable. This may help you in adding extra article properties to your template.
Keep in mind that every property in the article's [YAML frontmatter](markdown.md) will become a Handlebars `post.meta` variable. This may help you in adding extra article properties to your template.

There is also a Mustache `config` variable, which will contain all settings from your `user/config.json`.
There is also a Handlebars `config` variable, which will contain all settings from your `user/config.json`.

---

Expand Down
78 changes: 38 additions & 40 deletions htdocs/themes/default/templates/amp-index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,89 +2,87 @@
<html ⚡ lang="{{config.locale.language}}" dir="{{config.locale.direction}}">
<head>
<meta charset="utf-8" />
<title>{{#meta.title}}{{meta.title}}{{#meta.subtitle}}, {{meta.subtitle}}{{/meta.subtitle}} | {{/meta.title}}{{config.name}}</title>
<title>{{#if meta.title}}{{meta.title}}{{#if meta.subtitle}}, {{meta.subtitle}}{{/if}} | {{/if}}{{config.name}}</title>
<link rel="canonical" href="{{meta.absoluteUrl}}" />
{{>ampMetaHtml}}
{{#consolidatedProperties.ampPropertiesTeaser.hasAudio}}
{{#if consolidatedProperties.ampPropertiesTeaser.hasAudio}}
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
{{/consolidatedProperties.ampPropertiesTeaser.hasAudio}}
{{#consolidatedProperties.ampPropertiesTeaser.hasIframe}}
{{/if}}
{{#if consolidatedProperties.ampPropertiesTeaser.hasIframe}}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
{{/consolidatedProperties.ampPropertiesTeaser.hasIframe}}
{{#consolidatedProperties.ampPropertiesTeaser.hasYoutube}}
{{/if}}
{{#if consolidatedProperties.ampPropertiesTeaser.hasYoutube}}
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
{{/consolidatedProperties.ampPropertiesTeaser.hasYoutube}}
{{#consolidatedProperties.ampPropertiesTeaser.hasVimeo}}
{{/if}}
{{#if consolidatedProperties.ampPropertiesTeaser.hasVimeo}}
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
{{/consolidatedProperties.ampPropertiesTeaser.hasVimeo}}
{{/if}}
</head>
<body>
<div id="container">
{{>headerHtml}}
<main>
{{#meta.title}}
<h1>{{meta.title}}{{#meta.subtitle}}, {{meta.subtitle}}{{/meta.subtitle}}</h1>
{{/meta.title}}
{{#if meta.title}}
<h1>{{meta.title}}{{#if meta.subtitle}}, {{meta.subtitle}}{{/if}}</h1>
{{/if}}

{{#index.length}}
{{#if index}}
<div class="teasers">
{{#index}}
<article class="{{meta.Classes}}"{{^meta.isDefaultLanguage}} lang="{{meta.Language}}" dir="{{meta.Direction}}"{{/meta.isDefaultLanguage}} itemscope itemtype="{{meta.Schema}}">
{{#meta.Image}}
{{#each index}}
<article class="{{meta.Classes}}"{{#unless meta.isDefaultLanguage}} lang="{{meta.Language}}" dir="{{meta.Direction}}"{{/unless}} itemscope itemtype="{{meta.Schema}}">
{{#if meta.Image}}
<link itemprop="image" href="{{meta.Image}}" />
{{/meta.Image}}
{{^meta.Image}}
<link itemprop="image" href="{{config.ogImage}}" />
{{/meta.Image}}
{{else}}
<link itemprop="image" href="{{../config.ogImage}}" />
{{/if}}
<link itemprop="url mainEntityOfPage" href="{{meta.AbsoluteUrl}}" class="permalink u-url" />
<meta itemprop="wordCount" content="{{meta.Wordcount}}" />

<header>
<time datetime="{{meta.Created.iso}}" itemprop="datePublished" class="date">{{meta.Created.locale}}</time>
{{#meta.Modified.locale}}
{{#if meta.Modified.locale}}
<time datetime="{{meta.Modified.iso}}" itemprop="dateModified" class="modified">{{meta.Modified.locale}}</time>
{{/meta.Modified.locale}}
{{/if}}
<h2 itemprop="name headline"><a href="{{meta.AbsoluteUrlAmp}}">{{meta.Title}}</a></h2>
</header>
<div itemprop="description">
{{{ampHtmlTeaser}}}
</div>
{{#meta.hasNoExtraDescription}}
{{#meta.hasExternalLink}}
{{#if meta.hasNoExtraDescription}}
{{#if meta.hasExternalLink}}
<p><a href="{{meta.Link}}">{{#i18n}}Go to website…{{/i18n}}</a></p>
{{/meta.hasExternalLink}}
{{/meta.hasNoExtraDescription}}
{{^meta.hasNoExtraDescription}}
{{/if}}
{{else}}
<p><a href="{{meta.AbsoluteUrlAmp}}" title="{{meta.Title}}">{{#i18n}}Read on…{{/i18n}}</a></p>
{{/meta.hasNoExtraDescription}}
{{/if}}

<footer class="meta">
{{#meta.AuthorName}}
{{#if meta.AuthorName}}
<address class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
<link itemprop="image" href="{{meta.AuthorImage}}" />
<span itemprop="name">{{meta.AuthorName}}</span>
</address>
{{/meta.AuthorName}}
{{/if}}
<address class="publisher" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<link href="{{config.themeConf.ogImage}}" itemprop="logo" />
<span itemprop="name">{{config.name}}</span>
<link href="{{../config.themeConf.ogImage}}" itemprop="logo" />
<span itemprop="name">{{../config.name}}</span>
</address>
</footer>
</article>
{{/index}}
{{/each}}
</div>
{{/index.length}}
{{/if}}

<p class="back">
{{#prevUrl}}
{{#if prevUrl}}
<a href="{{prevUrl}}" rel="prev" class="prev" aria-label="{{#i18n}}Previous page{{/i18n}}">&laquo; <span>{{#i18n}}Previous page{{/i18n}}</span></a>
{{/prevUrl}}
{{#title}}
{{/if}}
{{#if title}}
<a href="{{config.basePath}}" rel="contents" id="up">{{#i18n}}To article listing{{/i18n}}</a>
{{/title}}
{{#nextUrl}}
{{/if}}
{{#if nextUrl}}
<a href="{{nextUrl}}" rel="next" class="next" aria-label="{{#i18n}}Next page{{/i18n}}"><span>{{#i18n}}Next page{{/i18n}}</span> &raquo;</a>
{{/nextUrl}}
{{/if}}
</p>
</main>
{{>footerHtml}}
Expand Down
73 changes: 36 additions & 37 deletions htdocs/themes/default/templates/amp-post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,33 @@
<link rel="canonical" href="{{post.meta.AbsoluteUrl}}" />
{{>ampMetaHtml}}
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
{{#post.ampProperties.hasAudio}}
{{#if post.ampProperties.hasAudio}}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
{{/post.ampProperties.hasAudio}}
{{#post.ampProperties.hasIframe}}
{{/if}}
{{#if post.ampProperties.hasIframe}}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
{{/post.ampProperties.hasIframe}}
{{#post.ampProperties.hasYoutube}}
{{/if}}
{{#if post.ampProperties.hasYoutube}}
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
{{/post.ampProperties.hasYoutube}}
{{#post.ampProperties.hasVimeo}}
{{/if}}
{{#if post.ampProperties.hasVimeo}}
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
{{/post.ampProperties.hasVimeo}}
{{#post.ampProperties.hasCarousel}}
{{/if}}
{{#if post.ampProperties.hasCarousel}}
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
{{/post.ampProperties.hasCarousel}}
{{/if}}
</head>
<body>
<div id="container">
{{>headerHtml}}
<main>
{{#post}}
<article class="{{meta.Classes}}"{{^meta.isDefaultLanguage}} lang="{{meta.Language}}" dir="{{meta.Direction}}"{{/meta.isDefaultLanguage}} itemscope itemtype="{{meta.Schema}}">
{{#meta.Image}}
{{#with post}}
<article class="{{meta.Classes}}"{{#unless meta.isDefaultLanguage}} lang="{{meta.Language}}" dir="{{meta.Direction}}"{{/unless}} itemscope itemtype="{{meta.Schema}}">
{{#if meta.Image}}
<link itemprop="image" href="{{meta.Image}}" />
{{/meta.Image}}
{{^meta.Image}}
<link itemprop="image" href="{{config.ogImage}}" />
{{/meta.Image}}
{{else}}
<link itemprop="image" href="{{../config.ogImage}}" />
{{/if}}
<meta itemprop="wordCount" content="{{meta.Wordcount}}" />
<a href="{{meta.AbsoluteUrl}}" title="{{meta.Title}}" itemprop="url mainEntityOfPage" class="permalink u-url">{{#i18n}}Permalink{{/i18n}}</a>
<header>
Expand All @@ -42,31 +41,31 @@ <h1 itemprop="name headline">{{meta.Title}}</h1>
</header>
<div itemprop="articleBody">
{{{ampHtml}}}
{{#meta.hasExternalLink}}
<p><a href="{{meta.Link}}">{{#i18n}}Go to website…{{/i18n}}</a></p>
{{/meta.hasExternalLink}}
{{#if meta.hasExternalLink}}
<p><a href="{{meta.Link}}">{{#i18n}}Go to website…{{/i18n}}</a></p>
{{/if}}
</div>
<footer class="meta">
{{#meta.Modified.locale}}
<p>{{#i18n}}Last modified{{/i18n}} <time datetime="{{meta.Modified.iso}}" itemprop="dateModified" class="modified">{{meta.Modified.locale}}</time></p>
{{/meta.Modified.locale}}
{{#meta.Tags.length}}
{{#if meta.Modified.locale}}
<p>{{#i18n}}Last modified{{/i18n}} <time datetime="{{meta.Modified.iso}}" itemprop="dateModified" class="modified">{{meta.Modified.locale}}</time></p>
{{/if}}
{{#if meta.Tags}}
<span class="tags">
Tags:
{{#meta.Tags}}
{{#each meta.Tags}}
· <a rel="tag" href="{{url}}" title="More articles with &ldquo;{{title}}&rdquo;">„<span itemprop="keywords" class="p-category">{{title}}</span>”</a>
{{/meta.Tags}}
{{/each}}
</span>
{{/meta.Tags.length}}
{{#meta.AuthorName}}
{{/if}}
{{#if meta.AuthorName}}
<address class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
<link itemprop="image" href="{{meta.AuthorImage}}" />
<span itemprop="name">{{meta.AuthorName}}</span>
</address>
{{/meta.AuthorName}}
{{/if}}
<address class="publisher" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<link href="{{config.themeConf.ogImage}}" itemprop="logo" />
<span itemprop="name">{{config.name}}</span>
<link href="{{../config.themeConf.ogImage}}" itemprop="logo" />
<span itemprop="name">{{../config.name}}</span>
</address>
<span class="share">
<amp-social-share type="twitter"></amp-social-share>
Expand All @@ -75,15 +74,15 @@ <h1 itemprop="name headline">{{meta.Title}}</h1>
</footer>
</article>
<p class="back">
{{#prev.AbsoluteUrlAmp}}
{{#if prev.AbsoluteUrlAmp}}
<a href="{{prev.AbsoluteUrlAmp}}" rel="prev" class="prev" title="{{prev.Title}}" aria-label="{{#i18n}}Previous article{{/i18n}}">&laquo; <span>{{#i18n}}Previous article{{/i18n}}</span></a>
{{/prev.AbsoluteUrlAmp}}
<a href="{{config.basePath}}amp.html" rel="contents" id="up">{{#i18n}}To article listing{{/i18n}}</a>
{{#next.AbsoluteUrlAmp}}
{{/if}}
<a href="{{../config.basePath}}amp.html" rel="contents" id="up">{{#i18n}}To article listing{{/i18n}}</a>
{{#if next.AbsoluteUrlAmp}}
<a href="{{next.AbsoluteUrlAmp}}" rel="next" class="next" title="{{next.Title}}" aria-label="{{#i18n}}Next article{{/i18n}}"><span>{{#i18n}}Next article{{/i18n}}</span> &raquo;</a>
{{/next.AbsoluteUrlAmp}}
{{/if}}
</p>
{{/post}}
{{/with}}
</main>
{{>footerHtml}}
</div>
Expand Down
8 changes: 4 additions & 4 deletions htdocs/themes/default/templates/authors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
<main id="content">
<h1>{{#i18n}}All authors{{/i18n}}</h1>

{{#index.length}}
{{#if index}}
<nav>
<ul>
{{#index}}
{{#each index}}
<li><a href="{{url}}" title="{{#i18n}}More articles by {{title}}{{/i18n}}">{{title}}</a></li>
{{/index}}
{{/each}}
</ul>
</nav>
{{/index.length}}
{{/if}}

</main>
<aside id="sidebar">
Expand Down
Loading

0 comments on commit db06773

Please sign in to comment.