Merge pull request #3 from ixartz/theme

Theme
This commit is contained in:
Rem W 2020-10-05 17:52:56 +02:00 committed by GitHub
commit beed5c946b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 162 additions and 57 deletions

View file

@ -31,6 +31,7 @@ Production-ready in mind:
- 📖 Pagination
- ✅ Cache busting
- 💯 Maximize lighthouse score
- 🌈 Include a FREE minimalist blog theme
### Philosophy
@ -42,7 +43,7 @@ Production-ready in mind:
- Node.js and npm
### Premium Themes
### Premium Themes ([Eleventy Themes](https://creativedesignsguru.com/category/eleventy/))
| [Blue Dark Eleventy Theme](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [Blue Eclatant Eleventy Theme](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
| --- | --- |
@ -134,4 +135,4 @@ See [LICENSE](LICENSE) for more information.
---
Made with ♥ by [Ixartz](https://github.com/ixartz)
Made with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com)

View file

@ -1,7 +1,7 @@
{
"site_name": "Hello",
"title": "Hello personal blog",
"description": "Blog description",
"site_name": "Starter",
"title": "Eleventy Starter Boilerplate",
"description": "Starter code for your 11ty blog Boilerplate",
"url": "https://example.com",
"locale": "en",
"author": "Anonymous"

View file

@ -1,29 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" href="/favicon.ico" />
<title><%= title %></title>
<meta
name="description"
content="<%= (!!locals.description) ? description : site.description %>"
/>
<meta name="author" content="<%= site.author %>" />
<meta property="og:title" content="<%= title %>" />
<meta
property="og:description"
content="<%= (!!locals.description) ? description : site.description %>"
/>
<meta property="og:locale" content="<%= site.locale %>" />
<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">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" href="/favicon.ico" />
<title><%= title %></title>
<meta name="description" content="<%= (!!locals.description) ? description : site.description %>" />
<meta name="author" content="<%= site.author %>" />
<meta property="og:title" content="<%= title %>" />
<meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
<meta property="og:locale" content="<%= site.locale %>" />
<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 %>",
"author": { "@type": "Person", "name": "<%= site.author %>" },
@ -46,9 +41,38 @@
"@context": "http://schema.org"
}
</script>
<% } %> <%- include('webpack.ejs') %>
</head>
<body>
<%- content %>
</body>
<% } %> <%- include('webpack.ejs') %>
</head>
<body class="antialiased w-full text-gray-700">
<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-800"><%= 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-800" href="/">Home</a>
</li>
<li class="mr-6">
<a class="text-gray-700 border-none hover:no-underline hover:text-gray-800"
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>

View file

@ -2,17 +2,13 @@
layout: layouts/base.ejs
---
<article class="post">
<article>
<header>
<h1 class="font-bold text-3xl"><%= title %></h1>
<div class="text-gray-600">
<%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %>
</div>
<h1 class="text-center font-bold text-3xl text-gray-800"><%= title %></h1>
<div class="text-center text-sm mb-8"><%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %></div>
</header>
<section class="pt-3 pb-3">
<section class="content">
<%- content %>
</section>
<footer>
<a href="/">Back to home</a>
</footer>
</article>

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

View file

@ -1,8 +1,86 @@
@tailwind base;
a {
@apply text-blue-700 underline font-bold;
@apply text-blue-700;
}
a:hover {
@apply underline;
}
@tailwind components;
@tailwind utilities;
.content {
@apply tracking-wider leading-8 text-xl;
}
.content p {
@apply my-5;
}
.content h1 {
@apply text-5xl font-bold mt-12 mb-5 leading-10;
}
.content h2 {
@apply text-4xl font-bold mt-10 mb-5;
}
.content h3 {
@apply text-3xl font-bold mt-10 mb-5;
}
.content h4 {
@apply text-2xl font-bold mt-10 mb-5;
}
.content h5 {
@apply text-xl font-bold mt-10 mb-5;
}
.content h6 {
@apply text-lg font-bold mt-10 mb-5;
}
.content ul,
.content ol,
.content p {
@apply overflow-auto;
}
.content > div > ul,
.content > div > ol {
@apply my-6;
}
.content ul,
.content ol {
@apply pl-8;
}
.content ul {
@apply list-outside list-disc;
}
.content ol {
@apply list-outside list-decimal;
}
.content pre[class*='language-'] {
@apply my-8;
}
.content table {
@apply whitespace-no-wrap my-8 border-collapse block overflow-auto;
}
.content th,
.content td {
@apply border px-8 py-4;
}
.content th {
@apply bg-gray-100;
}

View file

@ -9,21 +9,24 @@ eleventyComputed:
title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
---
<h1 class="font-bold text-3xl"><%= site.title %></h1>
<ul>
<% list.forEach((post) => { %>
<li>
<li class="mb-3 flex justify-between">
<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>
<% }) %>
</ul>
<div class="pt-3">
<div class="text-sm flex justify-between">
<% 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) { %>
<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>

View file

@ -1,14 +1,16 @@
---
title: 'Eleventy Starter Boilerplate Presentation'
description: Everything you need to use this Eleventy Boilerplate template
date: 2020-01-01 00:00:00
date: 2020-05-05 00:00:00
---
# Eleventy Starter Boilerplate
[![Eleventy starter boilerplate banner](/assets/images/posts/eleventy-js-starter-boilerplate.png)](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/)
🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡️ Built with [Eleventy](https://www.11ty.dev), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [Webpack](https://webpack.js.org), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com).
Clone this project and use it to create your own [Eleventy](https://www.11ty.dev) blog.
Clone this project and use it to create your own [Eleventy](https://www.11ty.dev) blog. You can check a [Eleventy js blog templates demo](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/).
The GitHub repository is located [Eleventy Starter Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate).
### Features
@ -33,6 +35,7 @@ Production-ready in mind:
- 📖 Pagination
- ✅ Cache busting
- 💯 Maximize lighthouse score
- 🌈 Include a FREE minimalist blog theme
### Philosophy
@ -44,7 +47,7 @@ Production-ready in mind:
- Node.js and npm
### Premium Themes
### Premium Themes ([Eleventy Themes](https://creativedesignsguru.com/category/eleventy/))
| [Blue Dark Eleventy Theme](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [Blue Eclatant Eleventy Theme](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
| --- | --- |
@ -134,6 +137,6 @@ Licensed under the MIT License, Copyright © 2020
See [LICENSE](https://github.com/ixartz/Eleventy-Starter-Boilerplate/blob/master/LICENSE) for more information.
---
### GitHub
Made with ♥ by [Ixartz](https://github.com/ixartz)
The GitHub repository is located [Eleventy Starter Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate) maintained by [Creative Design Guru](https://creativedesignsguru.com).