michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 22:37:49 +00:00
Code Issues Projects Releases Wiki Activity

Create an initial style for 3rd edition with dark mode support

Browse Source
This commit is contained in:
Philipp Oppermann
2020-12-16 20:17:33 +01:00
parent 798d5c58c5
commit 60a0b3bc28
13 changed files with 1413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
blog/templates/edition-3/base.html Normal file
View File

@@ -0,0 +1,13 @@
{% extends "edition-3/foundation.html" %}
{% block masthead %}
<header class="masthead">
<div style="position:relative">
<h2 class="masthead-title">
<a href="{{ config.base_url | safe }}/edition-3" title="Home">{{ config.title | safe }} (Third Edition - Alpha)</a>
</h2>
<p><small>{{ config.extra.subtitle | replace(from=" ", to="&nbsp;") | safe }}</small></p>
{% block header %}{% endblock header %}
</div>
</header>
{% endblock masthead %}

22
blog/templates/edition-3/extra.html Normal file
View File

@@ -0,0 +1,22 @@
{% extends "edition-3/base.html" %}
{% import "macros.html" as macros %}
{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
{% block description -%}
{{ page.summary | safe | striptags | truncate(length=150) }}
{%- endblock description %}
{% block main %}
<h1>{{ page.title }}</h1>
{{ page.content | safe }}
{% endblock main %}
{% block after_main %}
<hr>
<section>
<h2>Comments</h2>
{{ macros::utterances() }}
</section>
{% endblock after_main %}

61
blog/templates/edition-3/foundation.html Normal file
View File

@@ -0,0 +1,61 @@
<!doctype html>
<html lang="{% if lang %}{{ lang }}{% else %}{{ config.default_language }}{% endif %}">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
<meta name="author" content="{{ config.extra.author.name }}">
{% if current_url %}
<link rel="canonical" href="{{ current_url | safe }}" />
{% endif %}
<link href="/css/edition-3/main.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS feed for os.phil-opp.com" href="{{ config.base_url | safe }}/rss.xml" />
<script async src="/js/edition-3/main.js"></script>
<title>{% block title %}{% endblock title %} (Third Edition - Alpha)</title>
</head>
<body>
<div class="container content">
{% block masthead %}{% endblock masthead %}
<div>
{% block toc_aside %}{% endblock toc_aside %}
<main>{% block main %}{% endblock main %}</main>
</div>
<div>{% block after_main %}{% endblock after_main %}</div>
<footer class="footer">
<hr>
<small>
&copy; <time datetime="2020">2020</time>. All rights reserved.
<a href="{{ get_url(path="@/pages/contact.md") | safe }}">Contact</a>
</small>
</footer>
</div>
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function(f, a, t, h, o, m){
a[h]=a[h]||function(){
(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
})(document, window, '//fathom.phil-opp.com/tracker.js', 'fathom');
fathom('set', 'siteId', 'MUXWM');
fathom('trackPageview');
</script>
<!-- / Fathom -->
</body>
</html>

141
blog/templates/edition-3/index.html Normal file
View File

@@ -0,0 +1,141 @@
{% extends "edition-3/foundation.html" %}
{% import "macros.html" as macros %}
{% block title %}{{ config.title }}{% endblock title %}
{% block main %}
{% set posts_section = get_section(path = "edition-3/posts/_index.md") %}
{% set posts = posts_section.pages %}
<h1>Writing an OS in Rust</h1>
<p>{{ config.extra.subtitle | replace(from=" ", to="&nbsp;") | safe }}</p>
<div class="front-page-introduction">
<p>
This blog series creates a small operating system in the
<a href="https://www.rust-lang.org/">Rust programming language</a>. Each post is a small tutorial and includes all
needed code, so you can follow along if you like. The source code is also available in the corresponding
<a href="https://github.com/phil-opp/blog_os">Github repository</a>.
</p>
<p>Latest post:
{% set latest_post = posts|last %}
<strong><a href="{{ latest_post.path | safe }}">{{ latest_post.title }}</a></strong>
</p>
</div>
<!--
<p>In the following posts, we explain how to create an operating system for the <code>x86_64</code> architecture step for step. Starting from scratch, we create a bootable OS kernel, implement basic input/output support, show how to test and debug our kernel, explain virtual memory management, and add support for multitasking and userspace programs.</p>
-->
<div>
{%- set chapter = "none" -%}
{%- for post in posts -%}
{%- if post.extra["chapter"] -%}
{%- if post.extra["chapter"] != chapter -%}
{# Begin new chapter #}
{%- set_global chapter = post.extra["chapter"] -%}
</div>
{% set chapter_slug = chapter | slugify %}
<div class="posts {{chapter_slug}}">
{% set chapter_page = get_page(path = "edition-3/chapters/" ~ chapter_slug ~ ".md" ) %}
{{ chapter_page.content | safe }}
{%- endif -%}
{%- endif -%}
{{ macros::post_link_edition_3(page=post) }}
{%- endfor -%}
</div>
<hr>
<div class="after-posts">
<h2>Subscribe</h2>
<p>Receive notifications about new posts and other major changes! You can either:</p>
<ul>
<li>Subscribe to our <a href="/rss.xml">RSS/Atom Feed</a>,</li>
<li>Subscribe to <a href="https://github.com/phil-opp/blog_os/issues/479">this GitHub issue</a>, or</li>
<li>Subscribe to our <a href="https://tinyletter.com/phil-opp/">email newsletter</a>.</li>
</ul>
</div>
<div class="frontpage-section">
<h2>Status Updates</h2>
{% set status_updates = get_section(path = "status-update/_index.md") %}
<p>{{ status_updates.description }}</p>
<ul>
{% include "auto/status-updates-truncated.html" %}
<li><a href="{{ get_url(path="@/status-update/_index.md") | safe }}"><em>view all »</em></a></li>
</ul>
</div>
<div class="frontpage-section">
<h2>First Edition</h2>
<p>You are currently viewing the second edition of “Writing an OS in Rust”. The first edition is very different in many aspects, for example it builds upon the GRUB bootloader instead of using the `bootloader` crate. In case you're interested in it, it is still available. Note that the first edition is no longer updated and might contain outdated information. <a class="read-more" href="{{ get_url(path = "edition-1") | safe }}"><em>read&nbsp;the&nbsp;first edition&nbsp;»</em></a></p>
</div>
<div class="">
<h2>Support Me</h2>
{% include "support.html" %}
</div>
{% endblock main %}
{% block after_main %}
<aside class="page-aside-right">
<div class="block" id="language-selector">
<h2>Other Languages</h2>
<ul>{%- for lang_code in config.languages | map(attribute="code") | concat(with="en") | sort -%}
{%- if lang_code != lang -%}
<li data-lang-switch-to="{{ lang_code }}" class="">
{%- if lang_code == "en" -%}
<a href="/">English (original)</a>
{%- else -%}
<a href="/{{ lang_code }}">{{ trans(key="lang_name", lang = lang_code) }}</a>
{%- endif -%}
</li>
{%- endif %}
{% endfor %}</ul>
</div>
<div class="block">
<h2>Recent Updates</h2>
{% include "auto/recent-updates.html" %}
</div>
<div class="block">
<h2>Repository</h2>
<div class="gh-repo-box">
<div>
<svg viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
<a href="https://github.com/phil-opp/blog_os" class="repo-link">
<span title="blog_os">phil-opp/blog_os</span>
</a>
</div>
<p class="subtitle">
Writing an OS in Rust
</p>
<p class="stars-forks">
<a href="https://github.com/phil-opp/blog_os/stargazers" class="stars">
<svg aria-label="stars" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
{% include "auto/stars.html" %}
</a>
<a href="https://github.com/phil-opp/blog_os/network/members" class="forks">
<svg aria-label="forks" viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
{% include "auto/forks.html" %}
</a>
<a href="https://github.com/sponsors/phil-opp" class="sponsor">
<svg viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg>
Sponsor
</a>
</p>
</div>
</div>
</aside>
{% endblock after_main %}

130
blog/templates/edition-3/page.html Normal file
View File

@@ -0,0 +1,130 @@
{% extends "edition-3/base.html" %}
{% import "macros.html" as macros %}
{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}
{% block header %}
{% if lang != "en" -%}
<aside id="all-posts-link"><a href="{{ get_url(path="@/edition-3/_index.md") }}/{{ lang }}" title="All Posts">« All Posts</a></aside>
{%- else -%}
<aside id="all-posts-link"><a href="{{ get_url(path="@/edition-3/_index.md") }}" title="All Posts">« All Posts</a></aside>
{%- endif %}
{% endblock header %}
{% block description -%}
{{ page.summary | safe | striptags | truncate(length=150) }}
{%- endblock description %}
{% block toc_aside %}
<aside id="toc-aside">
<h2>Table of Contents</h2>
<ol>
{% for h2 in page.toc %}<li>
<a href="#{{h2.id | safe}}">{{ h2.title | safe }}</a>
{% if h2.children %}<ol>
{% for h3 in h2.children %}<li>
<a href="#{{h3.id | safe}}">{{ h3.title | safe }}</a>
</li>{% endfor %}
</ol>{% endif %}
</li>{% endfor %}
<li class="toc-comments-link"><a href="#comments">Comments</a></li>
</ol>
</aside>
{% endblock toc_aside %}
{% block main %}
<div class="{% if page.extra.rtl %}right-to-left{% endif %}">
<h1>{{ page.title }}</h1>
<time datetime="{{ page.date | date(format="%Y-%m-%d") }}" class="post-date">
{{ page.date | date(format="%b %d, %Y") }}
{% if page.extra.updated %} (updated on {{ page.extra.updated | date(format="%b %d, %Y") }}) {% endif %}
</time>
</div>
{% if page.extra.warning %}
<div class="warning">
{% if page.extra.warning_short %} <b>{{ page.extra.warning_short }}</b> {% endif %}
{{ page.extra.warning | markdown(inline=true) | safe }}
</div>
{% endif %}
{%- if page.lang != "en" %}
<div class="warning">
{% set translations = page.translations | filter(attribute="lang", value="en") %}
{% set original = translations.0 %}
<p>
<b>Translated Content:</b>
This is a community translation of the <strong><a href="{{ original.permalink }}">{{ original.title }}</a></strong> post. It might be incomplete, outdated or contain errors. Please report any issues!
</p>
{%- if page.extra.translators %}
<p>
Translation by {% for user in page.extra.translators -%}
{%- if not loop.first -%}
{%- if loop.last %}, and {% else %}, {% endif -%}
{%- endif -%}
<a href="https://github.com/{{user}}">@{{user}}</a>
{%- endfor %}.
</p>
{% endif -%}
</div>
{% endif %}
<div class="{% if page.extra.rtl %}right-to-left{% endif %}">
{{ page.content | replace(from="<!-- toc -->", to=macros::toc(toc=page.toc)) | safe }}
</div>
<div class="post-footer-support">
<h2>Support Me</h2>
{% include "support.html" %}
</div>
<hr>
<div class="PageNavigation">
{% if page.lighter %}
<a class="prev" href="{{ page.lighter.path | safe }}">&laquo; {{ page.lighter.title }}</a>
{% endif %}
{% if page.heavier %}
<a class="next" href="{{ page.heavier.path | safe }}">{{ page.heavier.title }} &raquo;</a>
{% endif %}
</div>
<hr>
<section>
<h2 id="comments">Comments</h2>
{%- if page.lang != "en" %}
<p>
Please leave your comments in English if possible.
</p>
{% endif %}
{{ macros::utterances() }}
</section>
<aside class="page-aside-right">
{% if page.translations -%}
<div class="block" id="language-selector">
<h2>Other Languages</h2>
<ul>{%- for translation in page.translations | sort(attribute="lang") %}
<li data-lang-switch-to="{{ translation.lang }}" class=""><a href="{{ translation.permalink | safe }}">
{%- if translation.lang == "en" -%}
English (original)
{%- else -%}
{{ trans(key="lang_name", lang = translation.lang) }}
{%- endif -%}
</a></li>
{% endfor %}</ul>
</div>
{%- endif %}
<div class="block">
<h2>About Me</h2>
<p>
I'm a Rust freelancer with a master's degree in computer science. I love systems programming, open source software, and new challenges.
</p><p>
If you want to work with me, reach out on <a href = "https://www.linkedin.com/in/phil-opp/">LinkedIn</a> or write me at <a href="mailto:job@phil-opp.com">job@phil-opp.com</a>.
</p>
</div>
</aside>
{% endblock main %}

1
blog/templates/edition-3/raw.html Normal file
View File

@@ -0,0 +1 @@
{{ page.content | safe }}

23
blog/templates/macros.html
View File

@@ -21,6 +21,29 @@
</div>
{% endmacro post_link %}
{% macro post_link_edition_3(page) %}
<div>
{% set translations = page.translations | filter(attribute="lang", value=lang) -%}
{%- if translations -%}
{%- set post = get_page(path = translations.0.path) -%}
{%- else -%}
{%- set post = page -%}
{%- set not_translated = true -%}
{%- endif -%}
<h3 class="post-title"><a href="{{ post.path | safe }}">{{ post.title }}</a></h3>
<div class="post-summary">
{{ post.summary | safe }}
<a class="read-more" href="{{ post.path | safe }}"><em>read&nbsp;more&nbsp;»</em></a>
{%- if lang and not_translated and lang != config.default_language -%}
<aside class="no-translation">
(This post is not translated yet.)
</aside>
{%- endif -%}
</div>
</div>
{% endmacro post_link %}
{% macro utterances() %}
<script src="https://utteranc.es/client.js"
data-repo="phil-opp/blog_os"