💄 new design (with microformats)

This commit is contained in:
James Walker 2022-05-26 21:57:21 -04:00
parent 7029850f65
commit bc4063d2ae
Signed by: walkah
GPG Key ID: 3C127179D6086E93
12 changed files with 77 additions and 73 deletions

View File

@ -1,4 +1,4 @@
<article class="list"> <article class="h-entry">
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time> <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
<a href="{{ post.url }}">{{post.title}}</a> <a href="{{ post.url }}" class="u-url p-name">{{post.title}}</a>
</article> </article>

View File

@ -1,10 +1,11 @@
<article class="hentry" role="article"> <article class="h-entry prose lg:prose-lg" role="article">
<header> <header>
<h1 class="entry-title">{{ post.title }}</h1> <h1 class="p-name">{{ post.title }}</h1>
<time datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time> <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
</header>
{% if post.image %} {% if post.image %}
<figure> <figure class="-mx-12">
<img class="feature-image" src="{{ post.image }}" alt="{{ post.title }}"> <img class="u-featured rounded-md shadow-md w-full" src="{{ post.image }}" alt="{{ post.title }}">
{% if post.image_source %} {% if post.image_source %}
<figcaption> <figcaption>
<cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite> <cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>
@ -12,11 +13,10 @@
{% endif %} {% endif %}
</figure> </figure>
{% endif %} {% endif %}
</header> <section class="e-content">
<div class="entry-content"> {{content}}
{{ content }} </section>
</div> <footer>
<footer class="meta"> <p>{{ post.tags | tag_links }}</p>
<p><i class="fa fa-tags"></i> {{ post.tags | tag_links }}</p>
</footer> </footer>
</article> </article>

View File

@ -1,5 +1,5 @@
<div class="vcard"> <div class="vcard">
<img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="photo left" alt="James Walker" > <p> <img src="//www.gravatar.com/avatar/b29b5419f81fa03145cafc684bb20c76.png?s=75" class="inline-block" alt="James Walker" >
<p><a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p> <a href="/about" class="fn n">James Walker</a> (a.k.a. <a href="https://walkah.net/" rel="me" class="url nickname uid">walkah</a>) is an independent developer and hacker. He is a long time <a href="http://drupal.org/user/1531" rel="me">Drupal</a> developer, but these days spends more time in Python, Ruby and Javascript.</p>
<p>You can follow him on <a href="https://twitter.com/walkah" rel="me">twitter</a> or <a href="https://github.com/walkah">github</a>.</p> <p>You can follow him on <a href="https://twitter.com/walkah" rel="me">twitter</a> or <a href="https://github.com/walkah">github</a>.</p>
</div> </div>

View File

@ -3,35 +3,16 @@
<head> <head>
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title> <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
{% include meta.html %} {% include meta.html %}
<link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href='//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.css" rel="stylesheet">
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"> <link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
</head> </head>
<body> <body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<div class="container"> <div class="container max-w-2xl mb-24 mt-8 mx-auto">
<div id="header"> <div class="px-5 md:px-8">
<header> <main id="main">
<h1 id="title"><a href="/">{{ site.title }}</a></h1>
</header>
<nav role="navigation">
<ul class="navigation">
<li><a href="/about">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/atom.xml">Feed <i class="fa fa-rss"></i></a></li>
</ul>
</nav>
</div>
<section id="main">
{{ content }} {{ content }}
</section> </main>
<footer> </div>
&copy; 2002-{{ site.time | date:"%Y" }} {{ site.author }}
</footer>
</div> </div>
{% include google_analytics.html %}
</body> </body>
</html> </html>

View File

@ -1,8 +1,10 @@
--- ---
layout: default layout: default
--- ---
<header> <section class="prose dark:prose-invert my-8">
<header>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
</header> </header>
{{ content }} {{ content }}
</section>

View File

@ -1,13 +1,30 @@
--- ---
layout: default layout: default
--- ---
{% assign post=page %} <article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
{% include post.html %} <header>
<h1 class="p-name">{{ page.title }}</h1>
{% include vcard.html %} <time class="dt-published" datetime="{{ page.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
</header>
<h3>related posts</h3> {% if page.image %}
{% for post in site.related_posts limit:5 %} <figure class="md:-mx-12">
{% include article_list.html %} <img class="u-featured rounded-md shadow-md w-full" src="{{ page.image }}" alt="{{ page.title }}">
{% endfor %} {% if page.image_source %}
<figcaption>
<cite><a href="{{ page.image_source }}">{{ page.image_source }}</a></cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<section class="e-content">
{{content}}
</section>
<footer class="flex flex-row not-prose">
<div rel="author" class="p-author h-card basis-1/2">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" >
<a href="/">walkah</a>
</div>
<div class="text-right basis-1/2">{{ page.tags | tag_links }}</div>
</footer>
</article>

View File

@ -75,7 +75,7 @@ module Jekyll
def tag_links(tags) def tag_links(tags)
tags = tags.sort!.map do |item| tags = tags.sort!.map do |item|
item.tr!(' ', '-') item.tr!(' ', '-')
"<a class='tag' href='/tag/#{item}/'>#{item}</a>" "<a class='p-category' href='/tag/#{item}/'>#{item}</a>"
end end
tags.join(', ') tags.join(', ')
end end

View File

@ -1,8 +1,9 @@
--- ---
layout: page layout: page
title: Blog Archive title: Archive
--- ---
{% for post in site.posts %} <section class="h-feed">
{% for post in site.posts %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %} {% unless year == this_year %}
{% assign year = this_year %} {% assign year = this_year %}
@ -10,3 +11,4 @@ title: Blog Archive
{% endunless %} {% endunless %}
{% include article_list.html %} {% include article_list.html %}
{% endfor %} {% endfor %}
</section>

BIN
images/walkah-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 KiB

View File

@ -3,10 +3,12 @@ layout: default
title: James Walker title: James Walker
--- ---
{% include vcard.html %} <section class="h-card prose lg:prose-2xl dark:prose-invert">
<img src="/images/walkah-avatar.png" alt="James Walker" class="u-photo rounded-full w-48 mx-auto">
<h3>recent posts:</h3> <p class="lead text-center">👋 I'm <span class="p-name"><span class="p-given-name">James</span> <span class="p-family-name">Walker</span></span> aka <a href="https://walkah.net/" class="u-url u-uid p-nickname">walkah</a>.</p>
{% for post in site.posts limit: 5 %} <p class="p-note">
{% include article_list.html %} I am a free software developer in <span class="p-locality">Toronto</span>, <span class="p-country-name">Canada</span>.
{% endfor %} I'm currently the <span class="p-role">VP of Engineering</span> at <a class="p-org" href="https://fission.codes/">Fission</a> where we're building tools for a <span class="p-category">decentralized</span>, <span class="p-category">open web</span>.
</p>
<p>You can follow my work on <a href="https://github.com/walkah" rel="me">github</a> and <a href="https://twitter.com/walkah" rel="me">twitter</a>, but I prefer the <a href="https://walkah.social" rel="me">fediverse</a> and <a href="https://matrix.to/#/@walkah:walkah.chat" rel="me">matrix</a>.</p>
</section>