~gg/blog-theme

c1297aa6a3e0078d2666626492e9381402a045b2 — Gui Goncalves 3 months ago 7fcf9d7
Add support for a page "explaining" the whole "no JS" thing
M layouts/partials/noscript.html => layouts/partials/noscript.html +12 -1
@@ 6,6 6,17 @@
     document.addEventListener('DOMContentLoaded', fn);
   }
 }
 ready(() => {
   const h1 = document.createElement('h1');
   const a = document.createElement('a');

   h1.innerText = 'Please disable JavaScript';
   h1.id = 'disable-js-banner';
   a.setAttribute('href', '{{ .Site.Params.noJSLink }}');
   a.appendChild(h1);

   document.body.appendChild(a);
 });

</script>
<script src="{{ .Site.BaseURL }}js/mystify.js"></script>
<script src="{{ .Site.BaseURL }}js/js-banner.js"></script>

A layouts/with-js/baseof.html => layouts/with-js/baseof.html +20 -0
@@ 0,0 1,20 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ .Title }}</title>
    {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
    {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
    {{ with .OutputFormats.Get "RSS" -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
    {{- end }}
  </head>
  <body>
    {{ partial "header" . }}
    {{ block "main" . }}{{ end }}
    {{ partial "footer" . }}
  </body>
</html>

A layouts/with-js/list.html => layouts/with-js/list.html +16 -0
@@ 0,0 1,16 @@
{{ define "main" }}
<main>
  {{ if or .Title .Content }}
  <div>
    {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
    {{ with .Content }}<div>{{ . }}</div>{{ end }}
  </div>
  {{ end }}

  {{ range .Paginator.Pages }}
  {{ .Render "summary" }}
  {{ end }}
  {{ partial "pagination.html" . }}
  {{ partial "latest_posts.html" . }}
</main>
{{ end }}

A layouts/with-js/single.html => layouts/with-js/single.html +28 -0
@@ 0,0 1,28 @@
{{ define "main" }}
<main>
  <article>
    <h1>{{ .Title }}</h1>
    {{ if not .IsPage }}
    <time>{{ .Date.Format "02.01.2006" }}</time>
    {{ end }}
    <div>
      {{ .Content }}
    </div>
    {{ with .Params.tags }}
    <div>
      <ul id="tags">
        {{ range . }}
        <li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
        {{ end }}
      </ul>
    </div>
    {{ end }}
    {{ with .Site.DisqusShortname }}
    <div>
      {{ template "_internal/disqus.html" . }}
    </div>
    {{ end }}
  </article>
  {{ partial "latest_posts.html" . }}
</main>
{{ end }}

A layouts/with-js/summary.html => layouts/with-js/summary.html +13 -0
@@ 0,0 1,13 @@
<article class="post-summary">
  <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
  <time>{{ .Date.Format "02.01.2006" }}</time>
  {{ range .Params.tags }}
  <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
  {{ end }}
  <div class="summary">
    {{ .Summary }}
    {{ if .Truncated }}
    <a class="read-more" href="{{ .Permalink }}">Read more...</a>
    {{ end }}
  </div>
</article>

M static/css/style.css => static/css/style.css +9 -0
@@ 89,3 89,12 @@ h1, h2 {
  text-align: right;
  display: block;
}

#disable-js-banner {
  color: white;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 0;
  text-align: center;
}

D static/js/js-banner.js => static/js/js-banner.js +0 -11
@@ 1,11 0,0 @@
 ready(() => {
   const h1 = document.createElement('h1');
   h1.innerText = 'Please disable JavaScript';
   h1.style.color = 'white';
   h1.style.position = 'absolute';
   h1.style.width = '100%';
   h1.style.zIndex = 10;
   h1.style.top = 0;
   h1.style.textAlign = 'center';
   document.body.appendChild(h1);
 });