Skip to content

Commit 3ce20ee

Browse files
authored
Merge pull request #16 from ethull/feature/layout-refactor
Refactor website layout
2 parents 6995516 + afcc6e3 commit 3ce20ee

18 files changed

Lines changed: 627 additions & 196 deletions

_includes/nav.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="container is-max-desktop">
1+
<div class="container is-max-widescreen">
22
<nav class="navbar">
33
<div class="navbar-brand">
44
<a href="{{ "/" | prepend: site.baseurl }}" class="navbar-item">

_layouts/default.html

Lines changed: 134 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,143 @@
1414
<body>
1515
<div class="main-content">
1616
{% include nav.html %}
17-
{{ content }}
17+
<section class="hero is-primary is-small">
18+
<div class="hero-body">
19+
<div class="container is-max-widescreen">
20+
<h1 class="title">
21+
{% if page.layout == 'post' %}
22+
{{ page.title }}
23+
{% else %}
24+
{{ page.hero_title }}
25+
{% endif %}
26+
</h1>
27+
{% if page.layout == 'post' and page.description %}
28+
<h2 class="subtitle">
29+
{{ page.description }}
30+
</h2>
31+
{% elsif page.hero_subtitle %}
32+
<h2 class="subtitle">
33+
{{ page.hero_subtitle }}
34+
</h2>
35+
{% endif %}
36+
</div>
37+
</div>
38+
</section>
39+
<div class="site-grid">
40+
<div class="columns">
41+
<aside class="column sidebar-left">
42+
{% if page.layout == 'post' %}
43+
<div class="sidebar-content">
44+
<h6 class="title is-5">Post Navigation</h6>
45+
<div class="content is-small">
46+
{% assign toc_items = '' %}
47+
{% assign headers = content | split: '<h' %}
48+
{% for header in headers %}
49+
{% if forloop.index > 1 %}
50+
{% assign header_level = header | slice: 0, 1 %}
51+
{% if header_level == '2' or header_level == '3' %}
52+
{% assign header_parts = header | split: '>' %}
53+
{% assign header_tag = header_parts[0] %}
54+
{% assign header_content = header_parts[1] | split: '</h' | first %}
55+
{% assign header_id = header_tag | split: 'id="' %}
56+
{% if header_id.size > 1 %}
57+
{% assign id_value = header_id[1] | split: '"' | first %}
58+
{% assign toc_items = toc_items | append: '<li class="toc-h' | append: header_level | append: '"><a href="#' | append: id_value | append: '">' | append: header_content | append: '</a></li>' %}
59+
{% endif %}
60+
{% endif %}
61+
{% endif %}
62+
{% endfor %}
63+
64+
{% if toc_items != '' %}
65+
<h6 class="title is-6 has-text-weight-semibold">Table of Contents</h6>
66+
<ul class="post-toc-list">{{ toc_items }}</ul>
67+
{% else %}
68+
<h6 class="title is-6 has-text-weight-semibold">Table of Contents</h6>
69+
<p class="has-text-grey-light is-size-7">No headers found in this post.</p>
70+
{% endif %}
71+
</div>
72+
</div>
73+
{% endif %}
74+
</aside>
75+
<main class="column main-content-inner">
76+
{{ content }}
77+
</main>
78+
<aside class="column sidebar-right">
79+
{% if page.layout == 'post' %}
80+
<div class="sidebar-content">
81+
<h6 class="title is-5">Site Index</h6>
82+
<div class="content is-small">
83+
84+
<!-- Highlighted Posts Section -->
85+
{% assign highlighted_posts = site.posts | where: "tag", "Highlight" | limit: 2 %}
86+
{% if highlighted_posts.size > 0 %}
87+
<h6 class="title is-6 has-text-weight-semibold">Featured</h6>
88+
<ul class="site-index-list">
89+
{% for post in highlighted_posts %}
90+
<li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
91+
{% endfor %}
92+
</ul>
93+
{% endif %}
94+
95+
<!-- Recent Posts Section (excluding highlighted) -->
96+
{% assign highlighted_urls = highlighted_posts | map: "url" %}
97+
{% assign recent_posts = '' | split: '' %}
98+
{% assign count = 0 %}
99+
{% for post in site.posts %}
100+
{% unless highlighted_urls contains post.url or count >= 3 %}
101+
{% assign recent_posts = recent_posts | push: post %}
102+
{% assign count = count | plus: 1 %}
103+
{% endunless %}
104+
{% endfor %}
105+
106+
{% if recent_posts.size > 0 %}
107+
<h6 class="title is-6 has-text-weight-semibold">Recent</h6>
108+
<ul class="site-index-list">
109+
{% for post in recent_posts %}
110+
<li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
111+
{% endfor %}
112+
</ul>
113+
{% endif %}
114+
115+
<!-- Top Categories Section -->
116+
{% assign category_counts = '' | split: '' %}
117+
{% for category in site.categories %}
118+
{% assign cat_name = category[0] %}
119+
{% assign cat_count = category[1] | size %}
120+
{% comment %} Pad count with zeros for proper numeric sorting {% endcomment %}
121+
{% assign padded_count = cat_count %}
122+
{% if cat_count < 10 %}{% assign padded_count = '00' | append: cat_count %}{% endif %}
123+
{% if cat_count >= 10 and cat_count < 100 %}{% assign padded_count = '0' | append: cat_count %}{% endif %}
124+
{% assign cat_data = padded_count | append: '|' | append: cat_name %}
125+
{% assign category_counts = category_counts | push: cat_data %}
126+
{% endfor %}
127+
{% assign sorted_categories = category_counts | sort | reverse %}
128+
129+
<h6 class="title is-6 has-text-weight-semibold">Categories</h6>
130+
<ul class="site-index-list">
131+
{% for cat_data in sorted_categories limit: 3 %}
132+
{% assign cat_parts = cat_data | split: '|' %}
133+
{% assign cat_count = cat_parts[0] | plus: 0 %}
134+
{% assign cat_name = cat_parts[1] %}
135+
{% assign cat_slug = cat_name | slugify %}
136+
<li>
137+
<a href="{{ '/categories/#category-' | append: cat_slug | prepend: site.baseurl }}">
138+
{{ cat_name }} ({{ cat_count }})
139+
</a>
140+
</li>
141+
{% endfor %}
142+
</ul>
143+
144+
</div>
145+
</div>
146+
{% endif %}
147+
</aside>
148+
</div>
149+
</div>
18150
</div>
19151
{% include footer.html %}
20152

21153
<script src="{{ "/assets/js/toggle-menu.js" | prepend: site.baseurl }}"></script>
22154

23155
</body>
24-
</html>
156+
</html>

_layouts/post.html

Lines changed: 65 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,81 @@
11
---
22
layout: default
3+
hero_title: "{{ page.title }}"
4+
hero_description: "{{ page.description }}"
35
---
46

5-
<section class="hero is-primary is-small">
6-
<div class="hero-body">
7-
<div class="container is-max-desktop">
8-
<h1 class="title">
9-
{{ page.title }}
10-
</h1>
11-
<h2 class="subtitle">
12-
{{ page.description }}
13-
</h2>
14-
</div>
15-
</div>
16-
</section>
177
<section class="section">
18-
<div class="container is-max-desktop">
19-
<div class="content">
20-
{{ content }}
21-
</div>
8+
<div class="content">
9+
{{ content }}
2210
</div>
2311
</section>
12+
2413
{% if site.author.show_on_post or page.comments %}
25-
<div class="section">
26-
<div class="container">
27-
{% if site.author.show_on_post %}
28-
<div class="box">
29-
<div class="media">
30-
<div class="media-left">
31-
<figure class="image is-64x64">
32-
<img src="{{ site.author.image | prepend: site.baseurl }}" alt="{{ site.author.name }}" />
33-
</figure>
34-
</div>
35-
<div class="media-content">
36-
<div class="content">
37-
<p>
38-
<strong>{{ site.author.name }}</strong>
39-
<br />
40-
{{ site.author.bio }}
41-
</p>
42-
</div>
14+
<div class="author-section" style="margin-top: 2rem;">
15+
{% if site.author.show_on_post %}
16+
<div class="box">
17+
<div class="media">
18+
<div class="media-left">
19+
<figure class="image is-64x64">
20+
<img src="{{ site.author.image | prepend: site.baseurl }}" alt="{{ site.author.name }}" />
21+
</figure>
22+
</div>
23+
<div class="media-content">
24+
<div class="content">
4325
<p>
44-
{% if site.author.github %}
45-
<a href="https://github.com/{{ site.author.github }}">
46-
<span class="icon is-small">
47-
<i class="fa fa-github"></i>
48-
</span>
49-
</a>
50-
{% endif %} {% if site.author.facebook %}
51-
<a href="https://facebook.com/{{ site.author.facebook }}">
52-
<span class="icon is-small">
53-
<i class="fa fa-facebook"></i>
54-
</span>
55-
</a>
56-
{% endif %} {% if site.author.twitter %}
57-
<a href="https://twitter.com/{{ site.author.twitter}}">
58-
<span class="icon is-small">
59-
<i class="fa fa-twitter"></i>
60-
</span>
61-
</a>
62-
{% endif %} {% if site.author.instagram %}
63-
<a href="https://instagram.com/{{ site.author.instagram}}">
64-
<span class="icon is-small">
65-
<i class="fa fa-instagram"></i>
66-
</span>
67-
</a>
68-
{% endif %} {% if site.author.tumblr %}
69-
<a href="https://tumblr.com/{{ site.author.tumblr}}">
70-
<span class="icon is-small">
71-
<i class="fa fa-tumblr"></i>
72-
</span>
73-
</a>
74-
{% endif %}
26+
<strong>{{ site.author.name }}</strong>
27+
<br />
28+
{{ site.author.bio }}
7529
</p>
7630
</div>
31+
<p>
32+
{% if site.author.github %}
33+
<a href="https://github.com/{{ site.author.github }}">
34+
<span class="icon is-small">
35+
<i class="fa fa-github"></i>
36+
</span>
37+
</a>
38+
{% endif %} {% if site.author.facebook %}
39+
<a href="https://facebook.com/{{ site.author.facebook }}">
40+
<span class="icon is-small">
41+
<i class="fa fa-facebook"></i>
42+
</span>
43+
</a>
44+
{% endif %} {% if site.author.twitter %}
45+
<a href="https://twitter.com/{{ site.author.twitter}}">
46+
<span class="icon is-small">
47+
<i class="fa fa-twitter"></i>
48+
</span>
49+
</a>
50+
{% endif %} {% if site.author.instagram %}
51+
<a href="https://instagram.com/{{ site.author.instagram}}">
52+
<span class="icon is-small">
53+
<i class="fa fa-instagram"></i>
54+
</span>
55+
</a>
56+
{% endif %} {% if site.author.tumblr %}
57+
<a href="https://tumblr.com/{{ site.author.tumblr}}">
58+
<span class="icon is-small">
59+
<i class="fa fa-tumblr"></i>
60+
</span>
61+
</a>
62+
{% endif %}
63+
</p>
7764
</div>
7865
</div>
79-
{% endif %} {% if page.comments %}
80-
<!--
81-
<div class="box">
82-
<div id="disqus_thread"></div>
83-
<noscript
84-
>Please enable JavaScript to view the
85-
<a href="https://disqus.com/?ref_noscript"
86-
>comments powered by Disqus.</a
87-
></noscript
88-
>
89-
</div>
90-
-->
91-
{% endif %}
9266
</div>
67+
{% endif %} {% if page.comments %}
68+
<!--
69+
<div class="box">
70+
<div id="disqus_thread"></div>
71+
<noscript
72+
>Please enable JavaScript to view the
73+
<a href="https://disqus.com/?ref_noscript"
74+
>comments powered by Disqus.</a
75+
></noscript
76+
>
77+
</div>
78+
-->
79+
{% endif %}
9380
</div>
9481
{% endif %}

_posts/2019-01-15-dual-boot-linux.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
33
title: Dual boot linux
4-
description: Article on how to dual boot linux
4+
description: Install both windows and linux on the same computer
55
categories:
66
- Linux
77
comments: true
88
date: 2019-09-01T14:58:00.000Z
99
display-date: 2019-09-01
1010
permalink: dual-boot-linux.html
1111
---
12-
Install both windows and linux on the same computer.
1312

1413
# prerequisits
1514
bootable usb drive with >4 gig

_posts/2019-05-12-vim-as-an-ide-part1.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
33
title: Vim as an IDE part 1
4-
description: Article on how to setup vim to function as a lightweight IDE
4+
description: How to setup vim to function as a lightweight IDE
55
categories:
66
- Vim
77
comments: true
88
date: 2020-05-12T20:34:04+01:00
99
display-date: 2020-05-12
1010
permalink: vim-ide-p1.html
1111
---
12-
Get vim setup.
1312

1413
## introduction
1514
IDEs have lots of features and generally can support most of a programmers needs.

_posts/2019-05-14-vim-as-an-ide-part2.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
33
title: Vim as an IDE part 2
4-
description: Article on how to setup vim to function as a lightweight IDE
4+
description: Replace IDE's with vim?
55
categories:
66
- Vim
77
comments: true
88
date: 2020-05-12T20:34:04+01:00
99
display-date: 2020-05-12
1010
permalink: vim-ide-p2.html
1111
---
12-
Replace IDE's with vim?
1312

1413
## introduction
1514
This is an extension to my first vim-ide post.

_posts/2020-07-31-linux-deboostrap-install.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
33
title: Deboostrap a debian system
4-
description: deboostrap a debian system
4+
description: Install debian without an iso
55
categories:
66
- Linux
77
comments: true
88
date: 2020-07-31T17:30:00+01:00
99
display-date: 2020-07-31
1010
permalink: linux-deboostrap-install.html
1111
---
12-
Install debian without an iso.
1312

1413
### introduction
1514
Normally to install a linux distribution, you would download an iso, burn it to a usb with something like rufus or etcher, and then boot into it. But this can be timely and hard to automate, an experienced user may prefer to create a system from their already existing distribution.

_posts/2020-10-10-xfce4-setup.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
33
title: Setup xfce4 desktop environment
4-
description: article on how to style the xfce4 desktop env
4+
description: Rice your xfce4 desktop environment on linux
55
categories:
66
- Linux
77
comments: true
88
date: 2020-10-10T13:10:00+01:00
99
display-date: 2020-10-10
1010
permalink: xfce4-setup.html
1111
---
12-
Configure the xfce4 desktop environment on linux.
1312

1413
## introduction
1514

0 commit comments

Comments
 (0)