sr-rolando/rolandjesse.de
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fixes #50

Browse source
This commit is contained in:
Panos Sakkos 2015-11-19 23:54:55 +01:00
parent 80c9c066c3
commit 894ff7f76a
13 changed files with 90 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -30,6 +30,7 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll-
* RSS feed
* Cool (anti-procrastinating) 404 page
* [Android Web App mode](https://developer.chrome.com/multidevice/android/installtohomescreen)
* Syntax highlighting
* Forcing of https protocol
* Protection from Email harvesting
* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)

2
_config.yml
View file

@ -20,6 +20,8 @@ google-tracking-id: "UA-35880426-4"
force-https: True
syntax-highlight: True
# Sections shown in the index page
pages_list:

25
_includes/head.html
View file

@ -16,9 +16,6 @@
<meta name="author" content="{{site.author}}">
<meta name="keywords" content="{{site.keyword}}">
<link rel="canonical" href="{{page.url | replace:'index.html','' | prepend: site.baseurl}}">
{% if page.url == "/404.html" | prepend: {{site.baseurl}} %}
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
{% endif %}
<title>{{site.title}} {% if page.title %} | {{page.title}}{% endif %}</title>
<!-- Bootstrap Core CSS -->
@ -44,9 +41,27 @@
{% if site.favicon %}
<link rel="shortcut icon" type="image/x-icon" href="{{site.baseurl}}{{site.favicon}}">
{% endif %}
{% if site.web-app-mode %}
<link rel="manifest" href="{{site.baseurl}}/manifest.json">
{% if page.url == "/404.html" | prepend: {{site.baseurl}} %}
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
{% endif %}
{% if site.web-app-mode %}
<!-- Android Web App mode -->
<link rel="manifest" href="{{site.baseurl}}/manifest.json">
{% endif %}
{% if site.syntax-highlight and page.section-type == "post"%}
<!-- Syntax highlight in post pages -->
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
{% endif %}
</head>
<!-- HEAD End -->

11
_includes/js.html
View file

@ -22,7 +22,7 @@ $(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click"
{% if page.section-type == "index" %}
<!-- Collapse navbar when navvar-brand is clicked -->
<!-- Collapse navbar when navbar-brand is clicked -->
<script>
$(function(){$(".navbar-brand").click(function(){$(".collapse.in")&&$(".collapse.in").animate({height:"1px"},500,function(){$(".collapse.in").removeClass("in")})})});
@ -30,6 +30,15 @@ $(window).scroll(toggleNavCollapse);$(function(){$("a.page-scroll").bind("click"
{% endif %}
{% if site.syntax-highlight and page.section-type == "post" %}
<!-- Syntax highlight in post pages-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{% endif %}
{% if site.google-tracking-id %}
<!-- Google Tracking Id Start -->

6
_posts/2015-06-05-404-page.md
View file

@ -6,12 +6,12 @@ category: tech
tags: [ 'tutorial' ]
---
You can change the text from the 404.html file and set the image from the _config.yml:
You can change the text from the 404.html file and set the image from the \_config.yml:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
############
# 404 page #
############
404-img: "/img/labtocat.png"
</pre>
</code></pre>

4
_posts/2015-06-11-social-buttons-tutorial.md
View file

@ -9,7 +9,7 @@ tags: [ 'tutorial' ]
Social buttons (rendered in the footer) are great for having a small hub with all your social footprint.
In order to change them, jump to \_config.yml and edit the social list:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
social:
- title: "github"
url: "https://github.com/"
@ -19,7 +19,7 @@ social:
url: "http://youtube.com/"
- title: "rss"
url: "/feed.xml"
</pre>
</code></pre>
The titles of the social link are used to find the icon in Font Awesome.

4
_posts/2015-06-12-timeline-tutorial.md
View file

@ -10,7 +10,7 @@ the form of a timeline of photos, dates and text descriptions. Let's see how it
Open the \_config.yml and find the events list definition, it should look like this:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
events:
- image: "/img/career/spidertocat.png"
date: "September 2013 - Today"
@ -18,7 +18,7 @@ events:
- image: "/img/career/baracktocat.jpg"
date: "September 2007 - August 2013"
description: "Started coding"
</pre>
</code></pre>
For each event of your life, add a tuple of image, date and description to the events, and the timeline will be automatically generated!

28
_posts/2015-06-19-writing-posts.md
View file

@ -10,10 +10,10 @@ tags: [ 'tutorial' ]
Run the ./scripts/newpost script with the file name of the post as an argument:
<pre style="text-align: left">
<pre><code data-trim class="bash">
cd <your { Personal } repo>
./scripts/newpost hello-world
</pre>
</code></pre>
A a new post template with name YYYY-MM-DD-hello-world.md will be created under ./\_posts, with the current date.
@ -25,7 +25,7 @@ post, with publication date <i>YYYY-MM-DD</i>.
The content starts with:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
---
layout: post
section-type: post
@ -33,7 +33,7 @@ title: Title
category: Category
tags: [ 'tag1', 'tag2' ]
---
</pre>
</code></pre>
The *layout* and *section-type* are used by the theme.
@ -48,10 +48,26 @@ As a result we have to create the tag pages before building and publishing the s
In order to generate the tag pages, simply run the *generate-tags* script from the repo's root directory:
<pre style="text-align: left">
<pre><code data-trim class="bash">
./scripts/generate-tags
</pre>
</code></pre>
The script will parse all your posts, and generate the tag pages for the newly added tags.
If you are not using Github Pages, you can automate the execution of this script during build time.
### Syntax highlighting
If you want to include a code snippet in your post, simply use the following syntax:
<pre><code data-trim class="c">
#include<stdio.h>
int main()
{
printf("Hello, world of syntax highlighting!");
return 0;
}
</code></pre>
<small>If you don't need syntax highlight in your website you can disable it by setting the syntax-highlight variable to False</small>

16
_posts/2015-06-20-blog-tutorial.md
View file

@ -12,9 +12,9 @@ A website is truly personal if it's your blog as well, this place of the interne
First of all, you get a preview of the latest post in the index, in order to attract the visitor to visit your blog. The size of this preview is defined by:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
post-preview-words: 96
</pre>
</code></pre>
Feel free to experiment with different sizes, and pick the best for you.
@ -24,9 +24,9 @@ A blog is expected to host many posts, so you will need an archive with paginati
which in a nutshell it's a grouping of your posts in pages, in reverse chronological
order. You can define the number of posts that are displayed per page by changing:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
paginate: 5
</pre>
</code></pre>
Note that you can navigate the pages of the Archive by swiping left/right!
@ -34,7 +34,7 @@ Note that you can navigate the pages of the Archive by swiping left/right!
Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest, VKontakte share buttons are available which can be enabled or disabled by setting the following:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
fb-share: True
twitter-share: True
reddit-share: True
@ -42,12 +42,12 @@ google-plus-share: True
linkedin-share: True
pinterest-share: True
vkontakte-share: True
</pre>
</code></pre>
### Comments
And you can enable <a href="http://www.disqus.com" target="\_blank">Disqus</a> comments by just setting your Disqus username here:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
disqus-shortname: "YOUR DISQUS USERNAME"
</pre>
</code></pre>

4
_posts/2015-06-22-web-app-mode.md
View file

@ -10,7 +10,7 @@ You can make your website behave like a native web app in
devices by setting the web-app-mode variable to True and providing links for the
icons for each resolution:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
web-app-mode: True
# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
@ -20,7 +20,7 @@ icon-72p: "/img/web-app/icon-72p.png"
icon-96p: "/img/web-app/icon-96p.png"
icon-144p: "/img/web-app/icon-144p.png"
icon-192p: "/img/web-app/icon-192p.png"
</pre>
</code></pre>
This is how the website will look when added to the homescreen:

20
_posts/2015-06-24-intro-layout-tutorial.md
View file

@ -21,32 +21,32 @@ If you want to disable the dynamic typing, set the site.dynamic-typing to false
You can add your desired dynamically typed text in the lines list:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
##############################
# Dynamic Text on the header #
##############################
dynamic-typing: True
shuffle: True # Shuffle the lines.
shuffle: True # Shuffle the lines.
loop: True
loop-count: False # Set False for infinite loop, or set any number for finite loop.
type-speed: 10 # Default 10
start-delay: 200 # Default 200
delete-delay: 5000 # Default 5000
lines: # You can add HTML Tags in the Text
loop-count: False # Set False for infinite loop, or set any number for finite loop.
type-speed: 10 # Default 10
start-delay: 200 # Default 200
delete-delay: 5000 # Default 5000
lines: # You can add HTML Tags in the Text
- text: "The lower you fall, the higher you'll fly."
- text: "Where’s your will to be weird?"
</pre>
</code></pre>
<small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
In order to set the background and your image, modify the following variables in \_config:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
black-favicon: "/img/black-lab-glass.ico"
background-img: "../img/intro-bg.jpg"
me-img: "/img/jetpacktocat.png"
</pre>
</code></pre>
The black favicon is an image on the left of the navigation bar.
Preferably it should be a black and white version of your favicon.

12
_posts/2015-06-25-html-head-tutorial.md
View file

@ -8,7 +8,7 @@ tags: [ 'tutorial' ]
In the \_config.yml, find and set the variables of the Head section:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
#############
# HTML Head #
#############
@ -19,16 +19,16 @@ title: "{ John Smith }"
favicon: "/img/favicon.ico"
description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
keywords: "smith, jones, personal, Jekyll, theme"
</pre>
</code></pre>
The values that you set, will be placed in the head section of every generated HTML page.
Don't forget to set the configurations for your site's url and Google tracking id:
<pre style="text-align: left">
<pre><code data-trim class="yaml">
url: "http://panossakkos.github.io/personal-jekyll-theme/"
google-tracking-id: ""
</pre>
</code></pre>
The url is essential to be set, because it's used in many places across the theme.
@ -39,8 +39,8 @@ If you are using *{ Personal }* as a Github repository theme, set the repository
This step is essential, since its related to file paths!
In order to serve the website locally just run:
<pre style="text-align: left">
<pre><code data-trim class="bash">
./scripts/serve
</pre>
</code></pre>
<small>Many thanks to <a href="https://github.com/joariasl" target="\_blank">@joariasl</a> for the language support! </small>

2
css/grayscale.scss
View file

@ -314,3 +314,5 @@ body {
100% { opacity:1; }
}
/* END Added in { Personal } for Typed Cursor in Header */
code { text-align: left; }