change .njk to .html

Author: surjithctly

.eleventy.js

@@ -39,4 +39,10 @@ module.exports = function (eleventyConfig) {
 
   // Copy Image Folder to /_site
   eleventyConfig.addPassthroughCopy("./static/img");
+
+  // Let Eleventy transform HTML files as nunjucks
+  // So that we can use .html instead of .njk
+  return {
+    htmlTemplateEngine: "njk",
+  };
 };

_includes/blog.njk renamed to _includes/blog.html

@@ -7,8 +7,7 @@
     <div class="pb-5 mb-5 border-b border-gray-100">
         <h1 class="font-bold text-5xl">{{title}}</h1>
         <p class="text-center text-base leading-6 font-medium text-gray-500">
-            <time>
-                {{ date | readableDate }}
+            <time> {{ date | readableDate }}
                 by
                 <a>{{ author }}</a>
 

_includes/default.njk renamed to _includes/default.html

@@ -0,0 +1,22 @@
+---
+layout: default
+title: Neat Starter
+path: home
+---
+
+<div class="container mx-auto lg:h-screen flex flex-col justify-center items-center">
+  <h1>
+    Welcome to
+    <strong class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
+      {{title}}
+    </strong>
+  </h1>
+
+  <p>
+    <abbr title="netlify cms, eleventy, alpine js & tailwind css">NEAT</abbr>
+    Starter Template. Get Started by editing
+    <code class="bg-gray-100 text-blue-800 p-1">/index.njk</code>
+  </p>
+
+  {% include "_includes/partials/content.njk" %}
+</div>