Theme improvements.

- Added code highlighting.
- Added image resizing via advthumbnailer
- Automatic anchors via toc
- Bunch of new templates

README.md

@@ -6,6 +6,7 @@ a static site generator written in Python.
 
 ## Setup
 
+* `sudo apt install libjpeg-dev`
 * Create a [virtualenv](https://virtualenv.pypa.io/en/stable/)
 * `pip install -r requirements.txt` to install Python dependencies
 * `bower-installer` to install front-end dependencies

pelicanconf.py

@@ -7,8 +7,15 @@ SITENAME = 'Anton Sarukhanov'
 SITESUBTITLE = 'Full-Stack Developer'
 SITEURL = ''
 
+PLUGINS = ['advthumbnailer']
+
+MD_EXTENSIONS = ['toc', 'codehilite', 'extra']
+
 PATH = 'content'
 THEME = 'theme'
+STATIC_PATHS = ['media']
+
+FILENAME_METADATA = '(?P<slug>.*)'
 
 ARTICLE_URL = '{slug}'
 ARTICLE_SAVE_AS = '{slug}/index.html'

requirements.txt

 pelican==3.6.3
 Markdown==2.6.6
+pelican-advthumbnailer==0.5.0

theme/static/css/pygments-native.css

+.codehilite .hll { background-color: #404040 }
+.codehilite  { background: #202020; color: #d0d0d0 }
+.codehilite .c { color: #999999; font-style: italic } /* Comment */
+.codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.codehilite .esc { color: #d0d0d0 } /* Escape */
+.codehilite .g { color: #d0d0d0 } /* Generic */
+.codehilite .k { color: #6ab825; font-weight: bold } /* Keyword */
+.codehilite .l { color: #d0d0d0 } /* Literal */
+.codehilite .n { color: #d0d0d0 } /* Name */
+.codehilite .o { color: #d0d0d0 } /* Operator */
+.codehilite .x { color: #d0d0d0 } /* Other */
+.codehilite .p { color: #d0d0d0 } /* Punctuation */
+.codehilite .ch { color: #999999; font-style: italic } /* Comment.Hashbang */
+.codehilite .cm { color: #999999; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+.codehilite .cpf { color: #999999; font-style: italic } /* Comment.PreprocFile */
+.codehilite .c1 { color: #999999; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+.codehilite .gd { color: #d22323 } /* Generic.Deleted */
+.codehilite .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+.codehilite .gr { color: #d22323 } /* Generic.Error */
+.codehilite .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #589819 } /* Generic.Inserted */
+.codehilite .go { color: #cccccc } /* Generic.Output */
+.codehilite .gp { color: #aaaaaa } /* Generic.Prompt */
+.codehilite .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+.codehilite .gt { color: #d22323 } /* Generic.Traceback */
+.codehilite .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #6ab825 } /* Keyword.Pseudo */
+.codehilite .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
+.codehilite .ld { color: #d0d0d0 } /* Literal.Date */
+.codehilite .m { color: #3677a9 } /* Literal.Number */
+.codehilite .s { color: #ed9d13 } /* Literal.String */
+.codehilite .na { color: #bbbbbb } /* Name.Attribute */
+.codehilite .nb { color: #24909d } /* Name.Builtin */
+.codehilite .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
+.codehilite .no { color: #40ffff } /* Name.Constant */
+.codehilite .nd { color: #ffa500 } /* Name.Decorator */
+.codehilite .ni { color: #d0d0d0 } /* Name.Entity */
+.codehilite .ne { color: #bbbbbb } /* Name.Exception */
+.codehilite .nf { color: #447fcf } /* Name.Function */
+.codehilite .nl { color: #d0d0d0 } /* Name.Label */
+.codehilite .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
+.codehilite .nx { color: #d0d0d0 } /* Name.Other */
+.codehilite .py { color: #d0d0d0 } /* Name.Property */
+.codehilite .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #40ffff } /* Name.Variable */
+.codehilite .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #666666 } /* Text.Whitespace */
+.codehilite .mb { color: #3677a9 } /* Literal.Number.Bin */
+.codehilite .mf { color: #3677a9 } /* Literal.Number.Float */
+.codehilite .mh { color: #3677a9 } /* Literal.Number.Hex */
+.codehilite .mi { color: #3677a9 } /* Literal.Number.Integer */
+.codehilite .mo { color: #3677a9 } /* Literal.Number.Oct */
+.codehilite .sb { color: #ed9d13 } /* Literal.String.Backtick */
+.codehilite .sc { color: #ed9d13 } /* Literal.String.Char */
+.codehilite .sd { color: #ed9d13 } /* Literal.String.Doc */
+.codehilite .s2 { color: #ed9d13 } /* Literal.String.Double */
+.codehilite .se { color: #ed9d13 } /* Literal.String.Escape */
+.codehilite .sh { color: #ed9d13 } /* Literal.String.Heredoc */
+.codehilite .si { color: #ed9d13 } /* Literal.String.Interpol */
+.codehilite .sx { color: #ffa500 } /* Literal.String.Other */
+.codehilite .sr { color: #ed9d13 } /* Literal.String.Regex */
+.codehilite .s1 { color: #ed9d13 } /* Literal.String.Single */
+.codehilite .ss { color: #ed9d13 } /* Literal.String.Symbol */
+.codehilite .bp { color: #24909d } /* Name.Builtin.Pseudo */
+.codehilite .vc { color: #40ffff } /* Name.Variable.Class */
+.codehilite .vg { color: #40ffff } /* Name.Variable.Global */
+.codehilite .vi { color: #40ffff } /* Name.Variable.Instance */
+.codehilite .il { color: #3677a9 } /* Literal.Number.Integer.Long */

theme/static/css/style.css

@@ -4,7 +4,6 @@ html {
 }
 body {
     font: 18px sans-serif;
-    max-width: 1000px;
     margin: 0 auto;
     padding: 0 1em 1em;
     background-color: #fff;
@@ -12,10 +11,33 @@ body {
 time {
     color: #aaa;
 }
+body > .hero {
+    width: calc(100% + 2em);
+    background-color: #111;
+    margin: 1em -1em;
+}
+main .hero {
+    width: 100%;
+    margin: 1em 0;
+}
+.hero img {
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
+}
+.inline-right {
+    float: right;
+    margin: .3em 0 .3em .3em;
+    max-width: 50%;
+}
+.inline-left{
+    float: left;
+    margin: .3em .3em .3em 0;
+    max-width: 50%;
+}
 
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
-    color: #333;
 }
 h1 {
     font-size: 1.5em;
@@ -49,14 +71,33 @@ h6:first-child {
 a:link,
 a:visited,
 a:active {
-    color: #369;
-    font-weight: bold;
+    color: #f28c26;
+    font-weight: normal;
     text-decoration: none;
 }
 a:focus,
 a:hover,
 a.active {
-    color: #036;
+    color: #727272;
+}
+
+/* Code */
+pre {
+    overflow: auto;
+    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
+}
+code {
+    border: 1px solid #f28c26;
+    border-radius: 4px;
+    background: #eee;
+    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
+    padding: .1em;
+    display: inline-block;
+}
+
+/* Other */
+article:last-child p:last-child {
+    margin-bottom: 0;
 }
 
 
@@ -74,14 +115,14 @@ body > header > h2 {
     display: inline-block;
 }
 body > header > h1:not(:last-child) {
+    margin-bottom: 1px;
     border-bottom: 1px solid #369;
 }
+body > .hero {
+    display: none;
+}
 
 /********** Middle Area **********/
-body > div {
-    display: flex;
-    flex-wrap: wrap;
-}
 body > div > :empty {
     display: none;
 }
@@ -93,7 +134,7 @@ body > div > :not(:last-child) {
 /********** Nav, Aside **********/
 body > div > nav,
 body > div > aside {
-    flex: 1 0 100%;
+    width: 100%;
 }
 /* Nav */
 body > div > nav {
@@ -188,10 +229,26 @@ nav.expanded .toggle-inner::after {
 
 
 /********** Main **********/
-body > div > main {
-    flex: 4 0 100%;
+main {
+    width: 100%;
+    overflow: auto;
+    word-wrap: break-word;
+    /* Firefox workaround
+       https://bugzilla.mozilla.org/show_bug.cgi?id=1139931#c1
+     */
+    min-width: 0;
+}
+main img {
     max-width: 100%;
 }
+main .hero {
+    display: block;
+}
+main header h1 + .time,
+main header h2 + .time {
+    display: block;
+    margin-top: -1em;
+}
 
 
 /********** Footer **********/
@@ -205,23 +262,34 @@ body > footer {
 /********** Larger screens **********/
 @media screen and (min-width: 600px) {
     body {
-        margin: 1em auto;
         box-sizing: border-box;
+        max-width: 1000px;
+        width: 100%;
     }
     body > header {
         font-size: 1rem;
         margin-bottom: 1.35em;
     }
+    body > .hero {
+        display: block;
+    }
+    body > div {
+        display: flex;
+        flex-wrap: nowrap;
+    }
     body > div > :not(:last-child) {
         margin-bottom: 0;
         margin-right: 1.35em;
     }
-    body > div > main {
-        flex-basis: 400px;
+    main {
+        flex: 4 0;
+    }
+    main .hero {
+        display: none;
     }
     body > div > nav,
     body > div > aside {
-        flex-basis: 100px;
+        flex: 1 0;
     }
     body > div > nav {
         text-align: right;
@@ -240,6 +308,7 @@ body > footer {
 /********** Largest (extra space on sides)  **********/
 @media screen and (min-width: 1000px) {
     body {
+        margin: 1em auto;
         border-radius: 4px;
     }
 }

theme/templates/archives.html

 {% extends "base.html" %}
+{% block title %}Blog | {{ super() }}{% endblock %}
 {% block content %}
-<h1>Archives for {{ SITENAME }}</h1>
-
-<dl>
-{% for article in dates %}
-    <dt>{{ article.locale_date }}</dt>
-    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+<h1>Blog Posts</h1>
+{% if articles %}
+<ul>
+{% for article in articles %}
+    <li>
+        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
+            {{ article.title }}</a>
+        <time datetime="{{ article.date.isoformat() }}">
+            on {{ article.locale_date }}</time>
+    </li>
 {% endfor %}
-</dl>
+</ul>
+{% endif %}
 {% endblock %}

theme/templates/article.html

 {% extends "base.html" %}
+{% block title %}{{ article.title }} | {{ super() }}{% endblock %}
 {% block head %}
-  {{ super() }}
-  {% for keyword in article.keywords %}
-    <meta name="keywords" content="{{keyword}}" />
-  {% endfor %}
-  {% for description in article.description %}
-    <meta name="description" content="{{description}}" />
-  {% endfor %}
-  {% for tag in article.tags %}
-    <meta name="tags" content="{{tag}}" />
-  {% endfor %}
+{{ super() }}
+        {% if article.description %}
+        <meta name="description" content="{{ article.description }}" />
+        {% endif %}
+        {% if article.tags %}
+        <meta name="keywords" content="{{ article.tags|map(attribute='name')|join(',') }}" />
+        {% endif %}
+{% endblock %}
+
+{% block preface %}
+        {% if article.cover %}
+        <p class="hero">
+        {% if article.cover %}
+            <img src="{{ SITEURL + article.cover | thumbnail("1000x_") }}" />
+        {% endif %}
+        </p>
+        {% endif %}
 {% endblock %}
 
 {% block content %}
-<header>
-    <h2>
-        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">{{ article.title }}</a>
-    </h2>
-    <time datetime="{{ article.date.isoformat() }}">
-        Posted on {{ article.locale_date }}</time>
-	{% if article.modified %}
-    <time datetime="{{ article.modified.isoformat() }}">
-        Modified on {{ article.locale_modified }}</time>
-	{% endif %}
-</header>
-<div>
-    {{ article.content }}
-</div>
+            {% if article.cover %}
+            <p class="hero">
+                <img src="{{ SITEURL + article.cover | thumbnail("1000x_") }}" />
+            </p>
+            {% endif %}
+            <header>
+                <h1>
+                    {{ article.title }}
+                </h1>
+                <p class="time">
+                <time datetime="{{ article.date.isoformat() }}">
+                    Posted on {{ article.locale_date }}</time>
+                {% if article.modified %}
+                <time datetime="{{ article.modified.isoformat() }}">
+                    Modified on {{ article.locale_modified }}</time>
+                {% endif %}
+                </p>
+            </header>
+            <article>
+{{ article.content }}
+            </article>
 {% endblock %}

theme/templates/base.html

@@ -31,6 +31,7 @@
         {% endif %}
         <link href="{{ SITEURL }}/theme/lib/normalize-css/normalize.css" rel="stylesheet" />
         <link href="{{ SITEURL }}/theme/css/style.css" rel="stylesheet" />
+        <link href="{{ SITEURL }}/theme/css/pygments-native.css" rel="stylesheet" />
         {% endblock head %}
 </head>
 <body>
@@ -41,9 +42,9 @@
             <h2><a href="{{ SITEURL }}/">{{ SITESUBTITLE }}</a></h2>
             {% endif %}
     </header>
+    {% block preface %}{% endblock %}
     <div>
         <nav>
-
             {% if MENUITEMS %}
             <ul>
                 {% for title, link in MENUITEMS %}
@@ -51,7 +52,6 @@
                 {% endfor %}
             </ul>
             {% endif %}
-
             {% if DISPLAY_PAGES_ON_MENU %}
             <ul>
                 {% for p in PAGES %}
@@ -59,16 +59,14 @@
                 {% endfor %}
             </ul>
             {% endif %}
-
             {% if DISPLAY_CATEGORIES_ON_MENU %}
-            <header><h1>Categories</h1></header>
+            <header><h1>Blog Topics</h1></header>
             <ul>
                 {% for cat, null in categories %}
                 <li><a href="{{ SITEURL }}/{{ cat.url }}"{% if cat == category %} class="active"{% endif %}>{{ cat }}</a></li>
                 {% endfor %}
             </ul>
             {% endif %}
-
         </nav>
         {% if self.content() %}
         <main>

theme/templates/category.html

+{% extends "index.html" %}
+{% block title %}{{ category }} | {{ super() }}{% endblock %}
+{% block content_title %}
+<h1>{{ category }}</h1>
+{% endblock %}

theme/templates/home.html

 {% extends "base.html" %}
 {% block content %}
+            {% if page %}
             {{ page.content|indent(12) }}
+            {% endif %}
             {% if articles %}
             <section>
                 <h2>Recent Posts</h2>
                 <ul>
-                {% for article in articles %}
+                {% for article in articles[:5] %}
                     <li>
                         <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
                             {{ article.title }}</a>
@@ -14,6 +16,7 @@
                     </li>
                 {% endfor %}
                 </ul>
+                Wait, <a href="{{ SITEURL }}/archives" title="See all blog posts">there's more</a>!
             </section>
             {% endif %}
 {% endblock content %}

theme/templates/index.html

+{% extends "base.html" %}
+{% block content %}
+            {% block content_title %}{% endblock %}
+            {% if page %}
+            {{ page.content|indent(12) }}
+            {% endif %}
+            {% if articles %}
+            <section>
+                <ul>
+                {% for article in articles %}
+                    <li>
+                        <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
+                            {{ article.title }}</a>
+                        <time datetime="{{ article.date.isoformat() }}">
+                            on {{ article.locale_date }}</time>
+                    </li>
+                {% endfor %}
+                </ul>
+            </section>
+            {% endif %}
+{% endblock content %}
+{% block footer %}
+{% endblock %}

theme/templates/page.html

+{% extends "base.html" %}
+{% block title %}{{ page.title }}| {{ super() }}{% endblock %}
+{% block content %}
+            <h1>{{ page.title }}</h1>
+{% import 'translations.html' as translations with context %}
+{{ translations.translations_for(page) }}
+{{ page.content }}
+{% endblock %}