Merge pull request #49 from css-restyle ॐ sweet home

restyle ॐ sweet home css mkdn and more
aloxe · Dec 22, 2024 · 9ade973 · 9ade973
2 parents 38d5e98 + 128256b
commit 9ade973
Show file tree

Hide file tree

Showing 28 changed files with 175 additions and 106 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -182,11 +182,9 @@ const postcssFilter = (cssCode, done) => {
     require('postcss-import'),
     tailwind(require('./tailwind.config')),
     autoprefixer(),
-    // TODO use purgecss for each layout
-    // cssnano({ preset: 'default' })
+    cssnano({ preset: 'default' }) // minify css
   ])
     .process(cssCode, {
-      // path to our CSS file
       from: './src/_assets/css/styles.css'
     })
     .then(

diff --git a/README.md b/README.md
@@ -15,22 +15,21 @@ I wanted to use [Windty](https://github.com/distantcam/windty/) for my next [ele
 - Handle markdown with style
 - Process images to make them responsive
 ### Content Managment System
-- Installed Decap CMS with content flow
+- Installed Sveltia and Decap CMS with content flow
 - Possibility to use Sveltia CMS with the same config
 ### Documentation
-- Documentation comes with the package as an example
+- Documentation comes with the starter as an example
 - Explains how features are developped
 
 
 ## What is still missing
 - better SEO metadata
-- documentation on the CMS
-- maybe a nicer design
+- dark mode
 
 ## Install
 1. Create a new repository from [huwindty’s template](https://github.com/aloxe/huwindty/generate), or [clone huwindty](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository) where you want.
 2. Install dependencies: `npm install`
 3. Start development: `npm start`
 4. See your website at http://localhost:8080/
 5. To build the release version: `npm run build`
-6. When ready, push to GitHub and the action will build and publish your site to [GitHub Pages](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages)
+6. When ready, push to GitHub and the action will build and publish your site to [GitHub Pages](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages) (needs configuration)
diff --git a/src/_assets/public/css/highlightjs.css → src/_assets/css/highlightjs.css b/src/_assets/public/css/highlightjs.css → src/_assets/css/highlightjs.css
diff --git a/src/_assets/css/mkdn.css b/src/_assets/css/mkdn.css
@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .mkdn h2 {
+    @apply mt-8 mb-6 text-left text-2xl font-bold leading-tight text-indigo-800
+  }
+  .mkdn h3 {
+    @apply my-4 text-left text-xl font-bold leading-normal text-blue-950
+  }
+  .mkdn p, .mkdn ul, .mkdn ol {
+    @apply my-4 text-xl font-light leading-6 text-slate-900
+  }
+  .mkdn ul {
+    @apply list-disc
+  }
+  .mkdn ol {
+    @apply list-decimal
+  }
+  .mkdn li {
+    @apply ml-8 mb-2
+  }
+  .mkdn code {
+    @apply text-xl
+  }
+  .mkdn a {
+    @apply text-blue-900 underline underline-offset-2 hover:no-underline
+  }
+  .mkdn .note {
+    @apply text-cyan-900 bg-sky-200 border p-4 border-cyan-900 border-l-8
+    before:content-['ⓘ_Note:_'] before:font-bold
+  }
+}
+
+/* Markdown style
+see: https://aloxe.github.io/huwindty/documentation/styles/
+other solution for markdown styling
+read: https://dev.to/matthewtole/eleventy-markdown-and-tailwind-css-14f8
+*/
+
diff --git a/src/_assets/css/styles.css b/src/_assets/css/styles.css
@@ -2,38 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  .mkdn h2 {
-    @apply mt-8 mb-6 text-left text-2xl font-bold leading-tight text-indigo-800
-  }
-  .mkdn h3 {
-    @apply my-4 text-left text-xl font-bold leading-normal text-blue-950
-  }
-  .mkdn p, .mkdn ul, .mkdn ol {
-    @apply my-4 text-xl font-light leading-6 text-slate-900
-  }
-  .mkdn ul {
-    @apply list-disc list-inside
-  }
-  .mkdn ol {
-    @apply list-decimal list-inside
-  }
-  .mkdn li {
-    @apply ml-8 mb-2
-  }
-  .mkdn code {
-    @apply text-xl
-  }
-  .mkdn a {
-    @apply text-blue-900 underline underline-offset-2 hover:no-underline
-  }
-  .mkdn .note {
-    @apply text-cyan-900 bg-sky-200 border p-4 border-cyan-900 border-l-8
-    before:content-['ⓘ_Note:_'] before:font-bold
-  }
-}
-
-/* other solution for styling
-read: https://dev.to/matthewtole/eleventy-markdown-and-tailwind-css-14f8
-*/
 
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
@@ -1,22 +1,25 @@
 <!DOCTYPE html>
-<html lang="{{ meta.language }}">
+<html lang="{{ meta.language }}" class="h-full">
   <head>
     {% block head %}
       {% include "head.njk" %}
     {% endblock %}
   </head>
-  <body>
+  {# <body> #}
+  <body class="flex flex-col h-full">
     {% block menu %}
       {% include "menu.njk" %}
     {% endblock %}
 
-    {% block header %}
-      {% include "header.njk" %}
-    {% endblock %}
-
     {% block main %}
-      <main class="container mx-auto px-6 pt-4 pb-16 {% if ismarkdown %}mkdn{% endif %}">
-        {{ content | safe }}
+      <main class="container mx-auto px-6 py-4 flex-1 {% if ismarkdown %}mkdn{% endif %}" >
+        {% block header %}
+          {% include "header.njk" %}
+        {% endblock %}
+
+        {% block content %}
+          {{ content | safe }}
+        {% endblock %}
       </main>
     {% endblock %}
 

diff --git a/src/_layouts/includes/footer.njk b/src/_layouts/includes/footer.njk
@@ -1,3 +1,3 @@
-<footer class="bg-black text-white text-center p-4 fixed bottom-0 w-full">
+<footer class="bg-black text-white text-center p-4 w-full flex-shrink-0">
   made with ♥
 </footer>
diff --git a/src/_layouts/includes/head.njk b/src/_layouts/includes/head.njk
@@ -34,10 +34,23 @@
 
 <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ "feed.xml" }}" />
 
-<link rel="stylesheet" href="{{ '/css/styles.css' }}" rel="stylesheet" preload>
-<!--
-/*
-highlightjs theme from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css
-other examples here: https://highlightjs.org/examples
-*/ -->
-<link rel="stylesheet" href="{{ '/css/highlightjs.css' }}" rel="stylesheet">
+{% if ismarkdown %}
+  <link rel="stylesheet" href="{{ '/css/mkdn.css' }}" preload>
+{% else %}
+  <link rel="stylesheet" href="{{ '/css/styles.css' }}" preload>
+{% endif %}
+
+{% if ismarkdown %}
+  {# the markdown styles are included online to avoid render-blocking styles
+  https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/
+  If you have more big styles on many pages, it may be a better idea 
+  to load them via a <link rel="stylesheet" as the stylesheets above.
+  In that case, you will need to create a new file in /src/pages/css/ 
+  #}
+  <style>
+    {% set css %}
+      {% include "src/_assets/css/highlightjs.css" %}
+    {% endset %}
+    {{css | postcss | safe}}
+  </style>
+{% endif %}
diff --git a/src/_layouts/includes/header.njk b/src/_layouts/includes/header.njk
@@ -1,12 +1,8 @@
-
-
-      <main class="container mx-auto flex flex-col flex-wrap items-center px-6 md:flex-row">
-        <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start">
-          <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
-            {{ title }}
-          </h1>
-          <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">
-            {{ subtitle }}
-          </p>
-        </header>
-      </main>
+  <header class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start">
+    <h1 class="my-4 text-center text-3xl font-bold leading-tight text-blue-500 md:text-left md:text-5xl">
+      {{ title }}
+    </h1>
+    <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">
+      {{ subtitle }}
+    </p>
+  </header>
diff --git a/src/_layouts/includes/menu.njk b/src/_layouts/includes/menu.njk
@@ -1,13 +1,13 @@
 {% from '../macros/renderNavItem.njk' import renderNavItem with context %}
 
 
-<nav class="w-full bg-blue-600 text-white text-xl">
+<nav class="w-full bg-blue-600 text-white text-xl flex-shrink-0">
   {% set allEntries = collections.all %}
   <ul role="list" class="flex">
     <li class="relative group">
     <a href="/" {% if entry.url == "/" %} aria-current="page" {% endif %}
       class="block p-4 text-nowrap hover:text-blue-300"
-      >ॐ home</a> 
+      >ॐ sweet home</a> 
     </li>
     {%- for entry in allEntries %}
       {% if entry.url.split("/").length === 3 %}

diff --git a/src/_layouts/macros/renderNavItem.njk b/src/_layouts/macros/renderNavItem.njk
@@ -32,7 +32,7 @@
   {% endfor %}
 
   {% if children.length %}
-    <li class="relative group {% if entry.url.split("/").length === 4 %}hover:bg-gray-100{% endif %}">
+    <li class="relative group {% if entry.url.split("/").length === 4 %}hover:bg-gray-100 pb-2{% endif %}">
       <div>
         <summary>
 
@@ -42,7 +42,8 @@
             {{ entry.data.title }}</a>
         </summary>
         <ul role="list" class="{{ulClass(entry)}}
-          {% if entry.url.split("/").length >= 4 %}ml-2{% endif %}">
+          {% if entry.url.split("/").length === 3 %} min-w-[200px] shadow-lg{% endif %}
+          {% if entry.url.split("/").length >= 4 %} ml-2{% endif %}">
           {%- for child in children %}
             {{ renderNavItem(child) }}
           {% endfor -%}

diff --git a/src/pages/404.html b/src/pages/404.html
@@ -1,6 +1,6 @@
 ---
 eleventyExcludeFromCollections: true
-layout: nofooter.njk
+layout: nofooter
 permalink: 404.html
 title: Page not found
 ---

diff --git a/src/pages/css/mkdn.css.njk b/src/pages/css/mkdn.css.njk
@@ -0,0 +1,9 @@
+---
+eleventyExcludeFromCollections: true
+permalink: /css/mkdn.css
+---
+
+{% set css %}
+  {% include "../../_assets/css/mkdn.css" %}
+{% endset %}
+{{css | postcss | safe}}
diff --git a/src/pages/css/styles.css.njk b/src/pages/css/styles.css.njk
@@ -4,6 +4,6 @@ permalink: /css/styles.css
 ---
 
 {% set css %}
-{% include "../../_assets/css/styles.css" %}
+  {% include "../../_assets/css/styles.css" %}
 {% endset %}
 {{css | postcss | safe}}
diff --git a/src/pages/documentation/ci.md b/src/pages/documentation/ci.md
@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base
 title: Continuous Integration
 subtitle: Github CI pipelines
 ismarkdown: true

diff --git a/src/pages/documentation/cms.md b/src/pages/documentation/cms.md
@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base
 title: Content Managment System
 subtitle: Install Sveltia CMS step by step
 description: How do use Sveltia CMS as a for your 11ty website

diff --git a/src/pages/documentation/index.md b/src/pages/documentation/index.md
@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base
 title: Documentation
 subtitle: How Huwindty works and how to install it
 description: Documentation for Huwindty.
@@ -8,12 +8,8 @@ ismarkdown: true
 ## Table of content
 
 {% for post in collections.documentation | reverse %}
-  {% if post.data.title != 'documentation' %}
-
-- [{{post.data.title}}]({{post.url}})
+  {% if post.data.title != 'Documentation' %}
+ - [{{post.data.title}}]({{post.url}})  
+ *{{post.data.subtitle}}*
   {% endif %}
 {% endfor %}
-
-## wind 🌬️
-
-![Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece](/img/vera.jpg)
diff --git a/src/pages/documentation/markdown.md b/src/pages/documentation/markdown.md
@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base
 title: Markdown
 subtitle: Using Markdown in 11ty
 description: How do use Markdown in your 11ty website and how does it work

diff --git a/src/pages/documentation/navigation.md b/src/pages/documentation/navigation.md
@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: base
 title: Navigation
 subtitle: Documentation about navigation.
 description: How huwindty manages the navigation menu without dependency
@@ -51,7 +51,7 @@ The link to the home page which has fewer chucks of url is hard coded at the beg
     <li class="relative group">
     <a href="/" {% if entry.url == "/" %} aria-current="page" {% endif %}
       class="block p-4 text-nowrap hover:text-blue-300"
-      >ॐ home</a> 
+      >ॐ sweet home</a> 
     </li>
 ```