feat: adding in simple template for listing blog articles

This fixes an issue when the website is deployed to a subdirectory of
the web server (e.g., `SITEURL` is set to a value like
`https://example.com/john.doe/`).

README.md

@@ -17,6 +17,7 @@ List of Pelican's settings that are supported by this theme. Refer to the
 for more details.
 
 - `FEED_*` and `*_FEED_*`
+- `DEFAULT_PAGINATION`
 - `DISPLAY_PAGES_ON_MENU`
 - `DISQUS_SITENAME`
 - `GOOGLE_ANALYTICS`

static/css/custom.css

@@ -0,0 +1,8 @@
+
+.body {
+    background-color: #202020 !important;
+}
+
+.sidebar {
+    text-align: left !important;
+}

static/css/hyde.css

@@ -32,7 +32,8 @@
  */
 
 html {
-  font-family: "PT Sans", Helvetica, Arial, sans-serif;
+  font-family: "JetBrains Mono", monospace;
+  background-color: #202020;
 }
 @media (min-width: 48em) {
   html {
@@ -54,11 +55,12 @@ html {
  */
 
 .sidebar {
-  text-align: center;
+  text-align: left;
   padding: 2rem 1rem;
-  color: rgba(255,255,255,.5);
+  color: rgba(255,255,255,.66);
   background-color: #202020;
 }
+
 @media (min-width: 48em) {
   .sidebar {
     position: fixed;
@@ -66,13 +68,16 @@ html {
     left: 0;
     bottom: 0;
     width: 18rem;
-    text-align: center;
+    text-align: left;
   }
 }
-
 /* Sidebar links */
 .sidebar a {
   color: #fff;
+}/* Sidebar links */
+
+.sidebar .title {
+  color: #6a9fb5;
 }
 
 /* About section */
@@ -80,7 +85,7 @@ html {
 .sidebar-about h1 {
   color: #fff;
   margin-top: 0;
-  font-family: "Abril Fatface", serif;
+  /*font-family: "Abril Fatface", serif;*/
   font-size: 3rem;
 }
 
@@ -259,13 +264,20 @@ a.sidebar-social-item.active:focus {
 }
 
 /* Blue */
-.theme-base-0d .sidebar {
+.theme-base-0d.sidebar {
   background-color: #6a9fb5;
 }
+/*.theme-base-0d .container {*/
+/*  background-color: #6a9fb5;*/
+/*}*/
 .theme-base-0d .content a,
-.theme-base-0d .related-posts li a:hover {
+.theme-base-0d .related-posts li a:hover h1  {
   color: #6a9fb5;
 }
+/*.theme-base-0d body .content .container{*/
+/*  background-color: #6a9fb5;*/
+/*}*/
+
 
 /* Magenta */
 .theme-base-0e .sidebar {

static/css/poole.css

@@ -48,7 +48,7 @@ body {
 }
 
 html {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "JetBrains Mono", monospace;
   font-size: 16px;
   line-height: 1.5;
 }
@@ -59,8 +59,8 @@ html {
 }
 
 body {
-  color: #515151;
+  color: #d7d7d7;
-  background-color: #fff;
+  /*background-color: #fff;*/
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
 }
@@ -84,7 +84,7 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: .5rem;
   font-weight: bold;
   line-height: 1.25;
-  color: #313131;
+  color: #6a9fb5;
   text-rendering: optimizeLegibility;
 }
 h1 {
@@ -337,7 +337,7 @@ tbody tr:nth-child(odd) th {
 .page-title,
 .post-title,
 .post-title a {
-  color: #303030;
+  color: #6a9fb5;
 }
 .page-title,
 .post-title {
@@ -352,6 +352,26 @@ tbody tr:nth-child(odd) th {
   color: #9a9a9a;
 }
 
+.post-tags {
+  display: inline;
+  margin-bottom: 1rem;
+  color: #9a9a9a;
+}
+.post-tags ul {
+  margin: 0;
+  padding: 0;
+  display: inline;
+}
+.post-tags li {
+  display: inline;
+}
+.post-tags li:after {
+  content: ", ";
+}
+.post-tags li:last-child:after {
+  content: "";
+}
+
 /* Related posts */
 .related {
   padding-top: 2rem;
@@ -396,7 +416,7 @@ tbody tr:nth-child(odd) th {
   overflow: hidden; /* clearfix */
   margin-left: -1rem;
   margin-right: -1rem;
-  font-family: "PT Sans", Helvetica, Arial, sans-serif;
+  font-family: "JetBrains Mono", monospace;
   color: #ccc;
   text-align: center;
 }

static/css/syntax.css

@@ -1,68 +1,73 @@
-.highlight .hll { background-color: #ffc; }
-.highlight .c { color: #999; } /* Comment */
-.highlight .err { color: #a00; background-color: #faa } /* Error */
-.highlight .k { color: #069; } /* Keyword */
-.highlight .o { color: #555 } /* Operator */
-.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #099 } /* Comment.Preproc */
-.highlight .c1 { color: #999; } /* Comment.Single */
-.highlight .cs { color: #999; } /* Comment.Special */
-.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #f00 } /* Generic.Error */
-.highlight .gh { color: #030; } /* Generic.Heading */
-.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
-.highlight .go { color: #aaa } /* Generic.Output */
-.highlight .gp { color: #009; } /* Generic.Prompt */
-.highlight .gs { } /* Generic.Strong */
-.highlight .gu { color: #030; } /* Generic.Subheading */
-.highlight .gt { color: #9c6 } /* Generic.Traceback */
-.highlight .kc { color: #069; } /* Keyword.Constant */
-.highlight .kd { color: #069; } /* Keyword.Declaration */
-.highlight .kn { color: #069; } /* Keyword.Namespace */
-.highlight .kp { color: #069 } /* Keyword.Pseudo */
-.highlight .kr { color: #069; } /* Keyword.Reserved */
-.highlight .kt { color: #078; } /* Keyword.Type */
-.highlight .m { color: #f60 } /* Literal.Number */
-.highlight .s { color: #d44950 } /* Literal.String */
-.highlight .na { color: #4f9fcf } /* Name.Attribute */
-.highlight .nb { color: #366 } /* Name.Builtin */
-.highlight .nc { color: #0a8; } /* Name.Class */
-.highlight .no { color: #360 } /* Name.Constant */
-.highlight .nd { color: #99f } /* Name.Decorator */
-.highlight .ni { color: #999; } /* Name.Entity */
-.highlight .ne { color: #c00; } /* Name.Exception */
-.highlight .nf { color: #c0f } /* Name.Function */
-.highlight .nl { color: #99f } /* Name.Label */
-.highlight .nn { color: #0cf; } /* Name.Namespace */
-.highlight .nt { color: #2f6f9f; } /* Name.Tag */
-.highlight .nv { color: #033 } /* Name.Variable */
-.highlight .ow { color: #000; } /* Operator.Word */
-.highlight .w { color: #bbb } /* Text.Whitespace */
-.highlight .mf { color: #f60 } /* Literal.Number.Float */
-.highlight .mh { color: #f60 } /* Literal.Number.Hex */
-.highlight .mi { color: #f60 } /* Literal.Number.Integer */
-.highlight .mo { color: #f60 } /* Literal.Number.Oct */
-.highlight .sb { color: #c30 } /* Literal.String.Backtick */
-.highlight .sc { color: #c30 } /* Literal.String.Char */
-.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #c30 } /* Literal.String.Double */
-.highlight .se { color: #c30; } /* Literal.String.Escape */
-.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
-.highlight .si { color: #a00 } /* Literal.String.Interpol */
-.highlight .sx { color: #c30 } /* Literal.String.Other */
-.highlight .sr { color: #3aa } /* Literal.String.Regex */
-.highlight .s1 { color: #c30 } /* Literal.String.Single */
-.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
-.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #033 } /* Name.Variable.Class */
-.highlight .vg { color: #033 } /* Name.Variable.Global */
-.highlight .vi { color: #033 } /* Name.Variable.Instance */
-.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
 
-.css .o,
+/* Adjusted to give override background and text colour */
-.css .o + .nt,
+.highlight pre, pre, .highlight .hll {
-.css .nt + .nt { color: #999; }
+  background-color: #49483E;
+  border: 1px solid #ccc;
+  padding: 6px 10px;
+  border-radius: 3px;
+  color: #FFFFFF;
+}
 
-.highlight .lineno { color: #ccc; display:inline-block; padding: 0 5px; border-right:1px solid #ccc; }
+.gist pre {
-.highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; }
+  color: #515151;
+}
+
+/* Highlights taken from https://gist.github.com/asaaki/1007420  for Monokai theme */
+.c                 { color: #75715e }                            /* Comment                     */
+.err               { color: #960050; background-color: #1e0010 } /* Error                       */
+.k                 { color: #66d9ef }                            /* Keyword                     */
+.l                 { color: #ae81ff }                            /* Literal                     */
+.n                 { color: #f8f8f2 }                            /* Name                        */
+.o                 { color: #f92672 }                            /* Operator                    */
+.p                 { color: #f8f8f2 }                            /* Punctuation                 */
+.cm                { color: #75715e }                            /* Comment.Multiline           */
+.cp                { color: #75715e }                            /* Comment.Preproc             */
+.c1                { color: #75715e }                            /* Comment.Single              */
+.cs                { color: #75715e }                            /* Comment.Special             */
+.ge                { font-style: italic }                        /* Generic.Emph                */
+.gs                { font-weight: bold }                         /* Generic.Strong              */
+.kc                { color: #66d9ef }                            /* Keyword.Constant            */
+.kd                { color: #66d9ef }                            /* Keyword.Declaration         */
+.kn                { color: #f92672 }                            /* Keyword.Namespace           */
+.kp                { color: #66d9ef }                            /* Keyword.Pseudo              */
+.kr                { color: #66d9ef }                            /* Keyword.Reserved            */
+.kt                { color: #66d9ef }                            /* Keyword.Type                */
+.ld                { color: #e6db74 }                            /* Literal.Date                */
+.m                 { color: #ae81ff }                            /* Literal.Number              */
+.s                 { color: #e6db74 }                            /* Literal.String              */
+.na                { color: #a6e22e }                            /* Name.Attribute              */
+.nb                { color: #f8f8f2 }                            /* Name.Builtin                */
+.nc                { color: #a6e22e }                            /* Name.Class                  */
+.no                { color: #66d9ef }                            /* Name.Constant               */
+.nd                { color: #a6e22e }                            /* Name.Decorator              */
+.ni                { color: #f8f8f2 }                            /* Name.Entity                 */
+.ne                { color: #a6e22e }                            /* Name.Exception              */
+.nf                { color: #a6e22e }                            /* Name.Function               */
+.nl                { color: #f8f8f2 }                            /* Name.Label                  */
+.nn                { color: #f8f8f2 }                            /* Name.Namespace              */
+.nx                { color: #a6e22e }                            /* Name.Other                  */
+.py                { color: #f8f8f2 }                            /* Name.Property               */
+.nt                { color: #f92672 }                            /* Name.Tag                    */
+.nv                { color: #f8f8f2 }                            /* Name.Variable               */
+.ow                { color: #f92672 }                            /* Operator.Word               */
+.w                 { color: #f8f8f2 }                            /* Text.Whitespace             */
+.mf                { color: #ae81ff }                            /* Literal.Number.Float        */
+.mh                { color: #ae81ff }                            /* Literal.Number.Hex          */
+.mi                { color: #ae81ff }                            /* Literal.Number.Integer      */
+.mo                { color: #ae81ff }                            /* Literal.Number.Oct          */
+.sb                { color: #e6db74 }                            /* Literal.String.Backtick     */
+.sc                { color: #e6db74 }                            /* Literal.String.Char         */
+.sd                { color: #e6db74 }                            /* Literal.String.Doc          */
+.s2                { color: #e6db74 }                            /* Literal.String.Double       */
+.se                { color: #ae81ff }                            /* Literal.String.Escape       */
+.sh                { color: #e6db74 }                            /* Literal.String.Heredoc      */
+.si                { color: #e6db74 }                            /* Literal.String.Interpol     */
+.sx                { color: #e6db74 }                            /* Literal.String.Other        */
+.sr                { color: #e6db74 }                            /* Literal.String.Regex        */
+.s1                { color: #e6db74 }                            /* Literal.String.Single       */
+.ss                { color: #e6db74 }                            /* Literal.String.Symbol       */
+.bp                { color: #f8f8f2 }                            /* Name.Builtin.Pseudo         */
+.vc                { color: #f8f8f2 }                            /* Name.Variable.Class         */
+.vg                { color: #f8f8f2 }                            /* Name.Variable.Global        */
+.vi                { color: #f8f8f2 }                            /* Name.Variable.Instance      */
+.il                { color: #ae81ff }                            /* Literal.Number.Integer.Long */

templates/article.html

@@ -13,7 +13,18 @@
 	<h1 class="post-title">{{ article.title }}</h1>
 	<span class="post-date">{{ article.locale_date }}</span>
 	{{ article.content }}
+
+	{% if article.tags %}
+		<span class="post-tags">
+			Tags:
+			<ul>
+				{% for tag in article.tags %}
+					<li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+				{% endfor %}
+			</ul>
+		</span>
+	{% endif %}
+
 	{% include 'fragments/disqus.html' %}
 </div>
 {% endblock %}
-

templates/base.html

@@ -21,11 +21,13 @@
 		<title>{% block title %}{{ SITENAME }}{% endblock title %}{% if SITESUBTITLE %} - {{ SITESUBTITLE }}{% endif %}</title>
 
 		<!-- CSS -->
-		<link href="//fonts.googleapis.com/" rel="dns-prefetch">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Abril+Fatface|PT+Sans:400,400italic,700&amp;subset=latin,latin-ext" rel="stylesheet">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
 
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/poole.css" />
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/hyde.css" />
+		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/custom.css" />
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/syntax.css" />
 		{% if FONT_AWESOME_JS %}
 			<script src="{{ FONT_AWESOME_JS }}" crossorigin="anonymous"></script>

templates/blog-list.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="posts">
+    <h1 class="post-title">
+        <a>Posts</a>
+    </h1>
+    {% for article in articles %}
+    {% if article.category == 'blog' %}
+    <div class="post">
+        <div class="">
+        <h3 class="post-title" href="{{ SITEURL }}/{{ article.url }}">
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+        </h3>
+        <span class="post-date">{{ article.locale_date }}</span>
+        {% if article.tags %}
+<!--        <span class="post-tags">-->
+<!--						Tags:-->
+<!--						<ul>-->
+<!--							{% for tag in article.tags %}-->
+<!--								<li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>-->
+<!--							{% endfor %}-->
+<!--						</ul>-->
+<!--					</span>{% endif %}-->
+<!--        <p>-->
+<!--            {{ article.summary }}-->
+<!--        </p>-->
+<!--        <a class="read-more" href="{{ article.url }}">Continue reading »</a>-->
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+{% endblock %}

templates/fragments/google_analytics.html

@@ -1,11 +1,11 @@
 {% if GOOGLE_ANALYTICS %}
-<script type="text/javascript">
+<!-- Global site tag (gtag.js) - Google Analytics -->
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS }}"></script>
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+<script>
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  window.dataLayer = window.dataLayer || [];
-})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
 
-ga('create', '{{ GOOGLE_ANALYTICS }}', '{{ GA_COOKIE_DOMAIN if GA_COOKIE_DOMAIN else 'auto' }}');
+  gtag('config', '{{ GOOGLE_ANALYTICS }}');
-ga('send', 'pageview');
 </script>
 {% endif %}

templates/index.html

@@ -1,33 +1,15 @@
 {% extends "base.html" %}
-
 {% block content %}
-	<div class="posts">
+<div class="post">
-		{% for article in articles_page.object_list %}
+    <h1 class="post-title"></h1>
-			<div class="post">
+    <p>
-				<h1 class="post-title" href="{{ SITEURL }}/{{ article.url }}">
+        Hi! My name is Lucas. I am a software engineer and most recently I ive been working at a startup called Rokt,
-					<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+        where I work on K8s infrastructure, developing scalable go microservices, and improving the developer
-				</h1>
+        experience.
-				<span class="post-date">{{ article.locale_date }}</span>
+        <br>
-				<p>
+        <br>
-					{{ article.summary }}
+        I made this website to document and share some of the coding and 3d printing projects I’ve worked on.
-				</p>
+        Thanks for visiting!
-				<a class="read-more" href="{{ article.url }}">Continue reading »</a>
+    </p>
-			</div>
+</div>
-		{% endfor %}
+{% endblock %}
-	</div>
-	<div class="pagination">
-
-		{% if articles_page.has_previous() %}
-		{% set num = articles_page.previous_page_number() %}
-		<span class="pagination-item older"><a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">Newer</a></span>
-		{% else %}
-		<span class="pagination-item older">Newer</span>
-		{% endif %}
-
-		{% if articles_page.has_next() %}
-		<span class="pagination-item newer"><a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">Older</a></span>
-		{% else %}
-		<span class="pagination-item newer">Older</span>
-		{% endif %}
-	</div>
-{% endblock %}

templates/model-list.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="posts">
+    <h1 class="post-title">
+        <a>Models</a>
+    </h1>
+    {% for article in articles %}
+    {% if article.category == 'models' %}
+    <div class="post">
+        {{ article.image }}
+        <h1 class="post-title" href="{{ SITEURL }}/{{ article.url }}">
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+        </h1>
+        <span class="post-date">{{ article.locale_date }}</span>
+        {% if article.tags %}
+        <span class="post-tags">
+						Tags:
+						<ul>
+							{% for tag in article.tags %}
+								<li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+							{% endfor %}
+						</ul>
+					</span>
+        {% endif %}
+        <p>
+            {{ article.summary }}
+        </p>
+        <a class="read-more" href="{{ article.url }}">Continue reading »</a>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+{% endblock %}

templates/projects-list.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="posts">
+    <h1 class="post-title">
+        <a>Models</a>
+    </h1>
+    {% for article in articles %}
+    {% if article.category == 'projects' %}
+    <div class="post">
+        <h1 class="post-title" href="{{ SITEURL }}/{{ article.url }}">
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+        </h1>
+        <span class="post-date">{{ article.locale_date }}</span>
+        {% if article.tags %}
+        <span class="post-tags">
+						Tags:
+						<ul>
+							{% for tag in article.tags %}
+								<li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+							{% endfor %}
+						</ul>
+					</span>{% endif %}
+        <p>
+            {{ article.summary }}
+        </p>
+        <a class="read-more" href="{{ article.url }}">Continue reading »</a>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
+{% endblock %}

templates/sidebar.html

@@ -3,8 +3,8 @@
 		<div class="sidebar-about">
 
 			<h1>
-				<a href="/">
+				<a href="{{ SITEURL }}/" class="title">
-					<img class="profile-picture" src="{{ SITEURL }}/images/{{ PROFILE_IMAGE }}">
+<!--					<img class="profile-picture" src="{{ SITEURL }}/images/{{ PROFILE_IMAGE }}">-->
 					{{ SITENAME }}
 				</a>
 			</h1>
@@ -16,7 +16,7 @@
 			<ul class="sidebar-nav">
 			{% if MENUITEMS %}
 				{% for title, url in MENUITEMS %}
-					<li><a href="{{ SITEURL }}/{{ url }}">{{ title }}</a></li>
+					<li><a href="{{ url }}">{{ title }}</a></li>
 				{% endfor %}
 			{% endif %}
 			{% if DISPLAY_PAGES_ON_MENU %}
@@ -40,11 +40,11 @@
 						 'osf', 'overleaf', 'philpapers', 'piazza', 'publons',
 						 'pubmed', 'researcherid', 'scirate', 'semantic-scholar',
 						 'springer', 'zotero'] %}
-					<a class="sidebar-social-item" href="{{ link }}">
+					<a class="sidebar-social-item" href="{{ link }}" target="_blank">
 						<i class="ai ai-{{ name }}"></i>
 					</a>
 				{% else %}
-					<a class="sidebar-social-item" href="{{ link }}">
+					<a class="sidebar-social-item" href="{{ link }}" target="_blank">
 						<i class="fa fa-{{ name }}"></i>
 					</a>
 				{% endif %}