Implement theme in blog gallery

This commit is contained in:
Rémi Weng 2020-10-04 23:50:01 +02:00
parent 33fceb1eed
commit b18ac5b0c5
3 changed files with 69 additions and 37 deletions

View file

@ -1,29 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="UTF-8" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<title><%= title %></title> <link rel="icon" href="/favicon.ico" />
<meta <title><%= title %></title>
name="description" <meta name="description" content="<%= (!!locals.description) ? description : site.description %>" />
content="<%= (!!locals.description) ? description : site.description %>" <meta name="author" content="<%= site.author %>" />
/> <meta property="og:title" content="<%= title %>" />
<meta name="author" content="<%= site.author %>" /> <meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
<meta property="og:title" content="<%= title %>" /> <meta property="og:locale" content="<%= site.locale %>" />
<meta <meta property="og:site_name" content="<%= site.site_name %>" />
property="og:description" <% if (locals.tags == "posts") { %>
content="<%= (!!locals.description) ? description : site.description %>" <meta property="og:type" content="article" />
/> <meta property="article:published_time" content="<%= date.toISOString() %>" />
<meta property="og:locale" content="<%= site.locale %>" /> <script type="application/ld+json">
<meta property="og:site_name" content="<%= site.site_name %>" />
<% if (locals.tags == "posts") { %>
<meta property="og:type" content="article" />
<meta property="article:published_time" content="<%= date.toISOString() %>" />
<script type="application/ld+json">
{ {
"description": "<%= (!!locals.description) ? description : site.description %>", "description": "<%= (!!locals.description) ? description : site.description %>",
"author": { "@type": "Person", "name": "<%= site.author %>" }, "author": { "@type": "Person", "name": "<%= site.author %>" },
@ -46,9 +41,38 @@
"@context": "http://schema.org" "@context": "http://schema.org"
} }
</script> </script>
<% } %> <%- include('webpack.ejs') %> <% } %> <%- include('webpack.ejs') %>
</head> </head>
<body>
<%- content %> <body class="antialiased w-full text-gray-700">
</body> <div class="max-w-screen-md mx-auto">
<div class="border-b border-gray-300">
<div class="pt-16 pb-8">
<div class="font-semibold text-3xl text-gray-900"><%= site.title %></div>
<div class="text-xl"><%= site.description %></div>
</div>
<div>
<ul class="flex flex-wrap text-xl">
<li class="mr-6">
<a class="text-gray-700 border-none hover:no-underline hover:text-gray-900" href="/">Home</a>
</li>
<li class="mr-6">
<a class="text-gray-700 border-none hover:no-underline hover:text-gray-900"
href="https://github.com/ixartz/Eleventy-Starter-Boilerplate">
GitHub
</a>
</li>
</ul>
</div>
</div>
<div class="text-xl py-5"><%- content %></div>
<div class="border-t border-gray-300 text-center py-8">
Made with <span role="img" aria-label="Love">♥</span> by <a
href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
</div>
</div>
</body>
</html> </html>

View file

@ -1,8 +1,13 @@
@tailwind base; @tailwind base;
a { a {
@apply text-blue-700 underline font-bold; @apply text-blue-700;
}
a:hover {
@apply underline;
} }
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

View file

@ -9,21 +9,24 @@ eleventyComputed:
title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>' title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
--- ---
<h1 class="font-bold text-3xl"><%= site.title %></h1>
<ul> <ul>
<% list.forEach((post) => { %> <% list.forEach((post) => { %>
<li> <li class="mb-3 flex justify-between">
<a href="<%= post.url %>"><%= post.data.title %></a> <a href="<%= post.url %>"><%= post.data.title %></a>
- <%= this.dateFns.format(new Date(post.data.date), 'LLLL d, yyyy') %>
<div><%= this.dateFns.format(new Date(post.data.date), 'LLLL d, yyyy') %></div>
</li> </li>
<% }) %> <% }) %>
</ul> </ul>
<div class="pt-3"> <div class="text-sm flex justify-between">
<% if (pagination.previous) { %> <% if (pagination.previous) { %>
<a href="<%= pagination.previous.replace(/index.html$/, "") %>">Newer Posts</a> <div>
<a href="<%= pagination.previous.replace(/index.html$/, "") %>">← Newer Posts</a>
</div>
<% } %> <% if (pagination.next) { %> <% } %> <% if (pagination.next) { %>
<a href="<%= pagination.next.replace(/index.html$/, "") %>">Older Posts</a> <div class="text-right ml-auto">
<a href="<%= pagination.next.replace(/index.html$/, "") %>">Older Posts →</a>
</div>
<% } %> <% } %>
</div> </div>