Fix burger, RSS, pagination and lot of cosmetic stuff

master
Quentin Duchemin 2022-11-05 23:12:24 +01:00
parent b66f3bf8ef
commit 37c6b56a41
Signed by: Chosto
GPG Key ID: 0547178FEEDE7D6B
10 changed files with 56 additions and 16 deletions

View File

@ -25,8 +25,3 @@ For development, run `hugo server --watch` to watch for config/content changes,
## Using the theme ## Using the theme
TODO 😄 TODO 😄
## TODO
* RSS feeds
* Make burger menu work on mobiles

View File

@ -7,7 +7,8 @@ footnoteReturnLinkContents: ↩
languageCode: fr-fr languageCode: fr-fr
languageName: Français languageName: Français
watch: true watch: true
paginate: 6 paginate: 9
title: Billets à la mer
permalinks: permalinks:
# All pages under posts section will have this link structure # All pages under posts section will have this link structure
@ -53,5 +54,5 @@ params:
gitea: https://git.chosto.me gitea: https://git.chosto.me
mail: mailto:quentinduchemin@tuta.io mail: mailto:quentinduchemin@tuta.io
funkwhale: https://music.chosto.me/@Chosto/ funkwhale: https://music.chosto.me/@Chosto/
rss: https://blog.chosto.me/posts/index.xml rss: https://blog.chosto.me/index.xml
peertube: https://tube.chosto.me peertube: https://tube.chosto.me

View File

@ -1,6 +1,7 @@
--- ---
title: À propos title: À propos
notoc: true notoc: true
noheader: true
menu: end menu: end
--- ---

View File

@ -0,0 +1,3 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"></a></h{{ .Level }}>

View File

@ -1,5 +1,5 @@
{{ define "main" }} {{ define "main" }}
<div class="section"> <div class="section pt-5">
<div class="container is-max-widescreen"> <div class="container is-max-widescreen">
<main> <main>
{{ with .Content }} {{ with .Content }}
@ -11,7 +11,14 @@
{{ end }} {{ end }}
<div class="columns is-multiline"> <div class="columns is-multiline">
<!-- Custom paginator with only blog posts --> <!-- Custom paginator with only blog posts -->
{{ $paginator := .Paginate (where .Site.RegularPages "FirstSection.Section" "posts") }} <!-- Annoying hackish stuff to only select pages belonging to the current section -->
{{ $articlesInSection := slice }}
{{ range .Site.RegularPages }}
{{ if $.IsAncestor . }}
{{ $articlesInSection = $articlesInSection | append . }}
{{ end }}
{{ end }}
{{ $paginator := .Paginate $articlesInSection }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
{{ if (eq .FirstSection.Section "posts")}} {{ if (eq .FirstSection.Section "posts")}}
<div class="column is-variable is-one-third"> <div class="column is-variable is-one-third">

View File

@ -8,7 +8,7 @@
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}} {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
{{ with .CurrentSection }} {{ with .CurrentSection }}
{{ if .Params.Title }} {{ if .Params.Title }}
<div class="container content"> <div class="container">
<div class="columns mt-5 is-variable"> <div class="columns mt-5 is-variable">
<aside class="menu column is-3 mt-2 is-align-self-flex-start"> <aside class="menu column is-3 mt-2 is-align-self-flex-start">
<p class="menu-label"> <p class="menu-label">
@ -29,7 +29,7 @@
{{ else }} {{ else }}
<div class="container content is-max-desktop"> <div class="container content is-max-desktop">
{{ end }} {{ end }}
<section class="column"> <section class="column content">
<div> <div>
<article class="mx-6"> <article class="mx-6">
<!-- First thing is a legend for the hero image, if it exists --> <!-- First thing is a legend for the hero image, if it exists -->

View File

@ -5,6 +5,11 @@
{{ $styleCustom := resources.Get "css/custom.css" }} {{ $styleCustom := resources.Get "css/custom.css" }}
<link rel="stylesheet" href="{{ $styleBulma.Permalink }}"> <link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
<link rel="stylesheet" href="{{ $styleCustom.Permalink }}"> <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
<!-- RSS feed -->
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system --> <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
<style> <style>
/* Default to home image */ /* Default to home image */
@ -27,5 +32,5 @@
<link rel="icon" sizes="196x196" href="/favicon-196.png" type="image/png"> <link rel="icon" sizes="196x196" href="/favicon-196.png" type="image/png">
<meta name="msapplication-TileImage" content="favicon-144.png"> <meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileColor" content="#FFFFFF">
<title>Billets à la mer</title> <title>{{ .Site.Title }}</title>
</head> </head>

View File

@ -1,5 +1,9 @@
<!-- Allow to skip heading, for example in an about page -->
{{ if not .Params.noheader }}
<!-- Display background only for regular pages, or home -->
{{ $background := in "page home" .Kind }}
<header> <header>
<section class="hero has-bg-img is-info has-text-centered is-large"> <section class='hero has-text-centered {{ if $background }}is-large has-bg-img is-info {{ end }}'>
<div class="hero-head mx-5"> <div class="hero-head mx-5">
<div class="level subtitle is-5"> <div class="level subtitle is-5">
<div class="level-left"> <div class="level-left">
@ -23,7 +27,7 @@
</div> </div>
</div> </div>
<div class="hero-body content"> <div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered">
<p class="title is-1 is-uppercase">{{ .Title }}</p> <p class="title is-1 is-uppercase">{{ .Title }}</p>
{{ with .Params.subtitle }} {{ with .Params.subtitle }}
<p class="subtitle is-2">{{ . }}</p> <p class="subtitle is-2">{{ . }}</p>
@ -54,3 +58,4 @@
{{ end }} {{ end }}
</section> </section>
</header> </header>
{{ end }}

View File

@ -98,3 +98,26 @@
</div> </div>
</div> </div>
</nav> </nav>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>