Give the homepage a makeover

assets/scss/extend.scss

@@ -8,42 +8,31 @@
   color: var(--base05);
 }
 
-article {
-  h1 {
-    margin: 1rem auto;
-  }
-
-  h1, h2, h3 {
-    margin-bottom: 1rem;
-  }
-}
-
-hr {
-  border-color: var(--base0C);
-}
-
 pre, code {
   max-height: var(--code-size);
 }
 
-footer[aria-label="Site footer"] {
-  > * {
-    margin-top: 1em;
-    margin-bottom: 0;
-  }
-}
-
 // Layouts
 .site__title {
   --size: 2rem;
   margin-bottom: unset;
   font-size: var(--size);
+  line-height: unset;
 }
 
 .site__socials {
   margin-top: 1em;
 }
 
+.site__social-icon svg {
+  fill: currentColor;
+}
+
+article.post {
+  padding: 0.5em;
+  background: var(--base01);
+}
+
 .post__meta--single {
   p > span:first-child {
     white-space: nowrap;
@@ -63,6 +52,15 @@ footer[aria-label="Site footer"] {
 }
 
 // Custom layouts
+// Asciidoctor roles (e.g., [.text-center]) on a block.
+.text-center {
+  text-align: center;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
 #logo {
   svg {
     --size: 4em;
@@ -106,9 +104,9 @@ footer[aria-label="Site footer"] {
 // Prism CSS
 code[class*="language-"], pre[class*="language-"] {
   color: var(--base05);
-  font-size: 0.9em;
 }
 
+
 // Asciidoctor-specific styles
 sup.footnote {
   vertical-align: baseline;

assets/templates/openring-input.html

@@ -40,6 +40,5 @@
 .webring__attribution {
   text-align: right;
   font-size: 0.8rem;
-  color: var(--base03);
 }
 </style>

content/_index.adoc

@@ -16,6 +16,19 @@ Have a seat and take a look in my digital cavern.
 .Here's my renewed logo. Oooh, personal branding!
 image::logo.webp[My renewed logo composed of a stylized drawing of a dog, width=60%]
 
-{{< links >}}
+[.text-center]
+{{< homepage/links >}}
+
+You can also find me on a bunch of platforms where I may be inactive for some time.
+
+[.text-center]
+{{< homepage/social-links >}}
 
 If you want the old way on getting contact with me, you can shoot an email at `foo.dogsquared{at}gmail{dot}com`.
+
+TIP: This site also have web feeds available in multiple formats such as in link:index.rss[RSS], link:index.atom[Atom], and link:index.json[JSON].
+It's also available in individual sections (such as link:posts/[my writings] — i.e., `posts/index.{rss,atom,json}`).
+
+If you're curious about the site, you can view the link:https://github.com/foo-dogsquared/foo-dogsquared.github.io[source code] of it.
+It's built with link:https://gohugo.io/[Hugo], uses a link:https://github.com/foo-dogsquared/hugo-theme-more-contentful/[theme that I created], and all of my posts are written with link:https://asciidoctor.org/[Asciidoctor].
+

content/archives.adoc

@@ -1,6 +1,6 @@
 ---
 title: "Archives"
-type: "archive"
+layout: "archives"
 ---
 
 = Archives

data/blogs.json

@@ -12,5 +12,6 @@
     "https://protesilaos.com/codelog.xml",
     "https://sachachua.com/blog/feed/",
     "http://malloc47.com/rss.xml",
-    "https://www.copetti.org/index.xml"
+    "https://www.copetti.org/index.xml",
+    "https://jvns.ca/atom.xml"
 ]

data/more-contentful/contacts.toml

@@ -28,5 +28,5 @@ name = "Keybase"
 [[links]]
 id = "rss"
 url = "index.atom"
-name = "RSS"
+name = "Atom feed"
 weight = -1

go.mod

@@ -3,6 +3,6 @@ module github.com/foo-dogsquared/blog
 go 1.15
 
 require (
-	github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210115024857-46de6a9b626b // indirect
+	github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210121010829-e0277a50bbe3 // indirect
 	github.com/foo-dogsquared/hugo-web-feeds v0.0.2 // indirect
 )

go.sum

@@ -1,7 +1,7 @@
 github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20210112174729-cd5a37e6a772/go.mod h1:Zj/H5B3seQ4WGPwEOE/LtRoMsVy7ooEB0xhUN3k9PnY=
 github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201106111203-fd6a6c7a3839/go.mod h1:BL7L5CENEhUx+miRRaOZ9SVC92j9MAMztirBWtTpiPc=
-github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210115024857-46de6a9b626b h1:VNxwPjFCagsvz3w7WGqh8wYz4SX4Wst+m9JaWq+WV08=
-github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210115024857-46de6a9b626b/go.mod h1:zDZAiZgXJA3VWK++nLjajTaCW7Gk8DD8yUHJfNvHWxc=
+github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210121010829-e0277a50bbe3 h1:kIM1XMhf3U/6m9frM1dKi4SZQljUzroGb381+tLwBKI=
+github.com/foo-dogsquared/hugo-theme-more-contentful v0.1.4-0.20210121010829-e0277a50bbe3/go.mod h1:zDZAiZgXJA3VWK++nLjajTaCW7Gk8DD8yUHJfNvHWxc=
 github.com/foo-dogsquared/hugo-web-feeds v0.0.2 h1:688h38JdIvxKSTdvAFfskEM2n9VJNNNacHwlFc4lvkg=
 github.com/foo-dogsquared/hugo-web-feeds v0.0.2/go.mod h1:0WxK3+xNIj/Wpk2kkUW0p6Uqmr/OZjPsRtQDCMazNmI=
 github.com/refactoringui/heroicons v0.4.2/go.mod h1:82HsLWQga7MkEl5aK8TctxPPIBlXrsyWcVTB57uipuk=

layouts/index.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
 
+<section>
 {{ .Content }}
+</section>
 
 <hr>
 {{- partial "openring.html" . }}

layouts/partials/components.html

@@ -7,7 +7,7 @@ If the partial is short enough, it should be put here.
 {{- define "partials/components/icon.html" }}
   {{- $icon := . }}
   {{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
-  <svg>
+  <svg class="icon">
     <use href="{{ $res.Permalink }}#{{ $icon.id }}"></use>
   </svg>
 {{- end }}

layouts/shortcodes/homepage/links.html

@@ -0,0 +1,16 @@
+<ul class="list links">
+{{ range $.Site.Menus.links }}
+<li>
+    <a href="{{ .URL }}" rel="me">{{ .Name }}</a>
+</li>
+{{ end }}
+</ul>
+<style>
+.links {
+  --size: 1.5em;
+  font-size: var(--size);
+  line-height: var(--size);
+  margin-top: 1em;
+}
+</style>
+

layouts/shortcodes/homepage/posts.html

@@ -0,0 +1,10 @@
+{{- $pages := where $.Site.RegularPages "Type" "in" $.Site.Params.mainSections }}
+
+{{- $limit := cond (ge $.Site.Config.Services.RSS.Limit 0) $.Site.Config.Services.RSS.Limit 3 }}
+{{- range (first $limit $pages) }}
+<article class="post">
+  <h1><a href="{{ .Permalink }}" aria-label="{{ .Title }}">{{ .Title }}</a></h1>
+  {{ partial "partials/components/post-meta.html" . }}
+</article>
+{{- end }}
+

layouts/shortcodes/homepage/social-links.html

@@ -0,0 +1,23 @@
+<!-- List all of the social media links -->
+{{ with (index $.Site.Data "more-contentful").contacts }}
+<ul class="list site__socials--content">
+  {{ $useImage := index . "useImage" | default false }}
+
+  {{ $links := sort .links "name" "asc" }}
+  {{- range $links -}}
+  {{ if ne .id "rss" }}
+  <li>
+    <a {{ if $useImage }}class="site__social-icon"{{ end }} rel="me" href="{{ .url | absLangURL }}" aria-label="{{ with .name }}{{ . }}{{ else }}{{ .id }}{{ end }}">
+      {{- .name }}
+    </a>
+  </li>
+  {{ end }}
+  {{- end -}}
+</ul>
+<style>
+.site__socials--content {
+  margin: auto;
+}
+</style>
+{{ end }}
+

layouts/shortcodes/links.html

@@ -1,20 +0,0 @@
-<div class="links">
-{{ range $.Site.Menus.links }}
-<a class="links__item" href="{{ .URL }}" rel="me">{{ .Name }}</a>
-{{ end }}
-</div>
-<style>
-.links {
-  margin: 1em auto;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-}
-
-.links__item {
-  padding: 0.25em;
-  font-size: 1.5em;
-  margin: auto 1.25em;
-}
-</style>
-