Merge pull request #3 from ixartz/theme

Theme
2020-10-05 17:52:56 +02:00 · 2020-10-05 17:52:56 +02:00 · beed5c946b
commit beed5c946b
parent 33fceb1eed d09d277fde
8 changed files with 162 additions and 57 deletions
--- a/README.md
+++ b/README.md
@ -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)
--- a/src/_data/site.json
+++ b/src/_data/site.json
@ -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"
--- a/src/_includes/layouts/base.ejs
+++ b/src/_includes/layouts/base.ejs
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -8,16 +9,10 @@
  <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="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: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") { %>
@ -48,7 +43,36 @@
    </script>
  <% } %> <%- include('webpack.ejs') %>
 </head>
-  <body>
-    <%- content %>
+
+<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>
--- a/src/_includes/layouts/post.ejs
+++ b/src/_includes/layouts/post.ejs
@ -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>
--- a/src/assets/images/posts/eleventy-js-starter-boilerplate.png
+++ b/src/assets/images/posts/eleventy-js-starter-boilerplate.png
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@ -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;
+}
--- a/src/index.ejs
+++ b/src/index.ejs
@ -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>
--- a/src/posts/2020-05-05-eleventy-starter-boilerplate-presentation.md
+++ b/src/posts/2020-05-05-eleventy-starter-boilerplate-presentation.md
@ -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).