commit e4e66b9653fdfac01e86131ccd1f619ce49915c9
parent 9b8a345a3c0558c1d263e6a0a6cda897e6e9df62
Author: underd0g1 <hide4@comcast.net>
Date: Tue, 6 Oct 2020 00:52:26 -0400
corrected the require modules format
Diffstat:
| D | src/index.html | | | 310 | ------------------------------------------------------------------------------- |
| M | src/index.js | | | 20 | ++++++++++++++------ |
| A | src/template.html | | | 310 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 324 insertions(+), 316 deletions(-)
diff --git a/src/index.html b/src/index.html
@@ -1,310 +0,0 @@
-<!-- TEMPLATE FROM: https://www.tailwindtoolbox.com/templates/minimal-blog -->
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <title>
- Tailwind Starter Template - Minimal Blog: Tailwind Toolbox
- </title>
- <meta name="author" content="name" />
- <meta name="description" content="description here" />
- <meta name="keywords" content="keywords,here" />
- <link
- href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
- rel="stylesheet"
- />
- <!--Replace with your tailwind.css once created-->
- </head>
- <body class="bg-gray-100 font-sans leading-normal tracking-normal">
- <nav id="header" class="fixed w-full z-10 top-0">
- <div
- id="progress"
- class="h-1 z-20 top-0"
- style="
- background: linear-gradient(
- to right,
- #4dc0b5 var(--scroll),
- transparent 0
- );
- "
- ></div>
-
- <div
- class="w-full md:max-w-4xl mx-auto flex flex-wrap items-center justify-between mt-0 py-3"
- >
- <div class="pl-4">
- <a
- class="text-gray-900 text-base no-underline hover:no-underline font-extrabold text-xl"
- href="/"
- >
- JavaScript Joel
- </a>
- </div>
-
- <div class="block lg:hidden pr-4">
- <button
- id="nav-toggle"
- class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none"
- >
- <svg
- class="fill-current h-3 w-3"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>Menu</title>
- <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
- </svg>
- </button>
- </div>
-
- <div
- class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-100 md:bg-transparent z-20"
- id="nav-content"
- >
- <ul class="list-reset lg:flex justify-end flex-1 items-center">
- <li class="mr-3">
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
- href="/page2"
- >page2</a
- >
- </li>
- <li class="mr-3">
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
- href="#"
- >link</a
- >
- </li>
- </ul>
- </div>
- </div>
- </nav>
-
- <!--Container-->
- <div class="container w-full md:max-w-3xl mx-auto pt-20">
- <div
- class="w-full px-4 md:px-6 text-xl text-gray-800 leading-normal"
- style="font-family: Georgia, serif;"
- >
- <div class="font-sans">
- <h1
- class="font-bold font-sans break-normal text-gray-900 pt-6 pb-2 text-3xl md:text-4xl"
- >
- <!-- TITLE -->
- </h1>
- <p class="text-sm md:text-base font-normal text-gray-600">
- <!-- PUBLISH_DATE -->
- </p>
- </div>
-
- <!-- CONTENT -->
- </div>
-
- <!--Tags -->
- <div class="text-base md:text-sm text-gray-500 px-4 py-6">
- Tags:
- <a
- href="#"
- class="text-base md:text-sm text-teal-500 no-underline hover:underline"
- >Link</a
- >
- .
- <a
- href="#"
- class="text-base md:text-sm text-teal-500 no-underline hover:underline"
- >Link</a
- >
- </div>
-
- <!--Divider-->
- <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
-
- <!--Subscribe-->
- <div class="container px-4">
- <div class="font-sans bg-white rounded-lg shadow-md p-4 text-center">
- <h2 class="font-bold break-normal text-xl md:text-3xl">
- Subscribe to my Newsletter
- </h2>
- <h3
- class="font-bold break-normal font-normal text-gray-600 text-sm md:text-base"
- >
- Get the latest posts delivered right to your inbox
- </h3>
- <div class="w-full text-center pt-4">
- <form action="#">
- <div
- class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center"
- >
- <input
- type="email"
- placeholder="youremail@example.com"
- class="flex-1 mt-4 appearance-none border border-gray-400 rounded shadow-md p-3 text-gray-600 mr-2 focus:outline-none"
- />
- <button
- type="submit"
- class="flex-1 mt-4 block md:inline-block appearance-none bg-teal-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-teal-400"
- >
- Subscribe
- </button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <!-- /Subscribe-->
-
- <!--Author-->
- <div class="flex w-full items-center font-sans px-4 py-12">
- <img
- class="w-10 h-10 rounded-full mr-4"
- src="http://i.pravatar.cc/300"
- alt="Avatar of Author"
- />
- <div class="flex-1 px-2">
- <p class="text-base font-bold text-base md:text-xl leading-none mb-2">
- Jo Bloggerson
- </p>
- <p class="text-gray-600 text-xs md:text-base">
- Minimal Blog Tailwind CSS template by
- <a
- class="text-teal-500 no-underline hover:underline"
- href="https://www.tailwindtoolbox.com"
- >TailwindToolbox.com</a
- >
- </p>
- </div>
- <div class="justify-end">
- <button
- class="bg-transparent border border-gray-500 hover:border-teal-500 text-xs text-gray-500 hover:text-teal-500 font-bold py-2 px-4 rounded-full"
- >
- Read More
- </button>
- </div>
- </div>
- <!--/Author-->
-
- <!--Divider-->
- <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
-
- <!--Next & Prev Links-->
- <div class="font-sans flex justify-between content-center px-4 pb-12">
- <div class="text-left">
- <span class="text-xs md:text-sm font-normal text-gray-600"
- >< Previous Post</span
- ><br />
- <p>
- <a
- href="#"
- class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
- >Blog title</a
- >
- </p>
- </div>
- <div class="text-right">
- <span class="text-xs md:text-sm font-normal text-gray-600"
- >Next Post ></span
- ><br />
- <p>
- <a
- href="#"
- class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
- >Blog title</a
- >
- </p>
- </div>
- </div>
-
- <!--/Next & Prev Links-->
- </div>
- <!--/container-->
-
- <footer class="bg-white border-t border-gray-400 shadow">
- <div class="container max-w-4xl mx-auto flex py-8">
- <div class="w-full mx-auto flex flex-wrap">
- <div class="flex w-full md:w-1/2">
- <div class="px-8">
- <h3 class="font-bold text-gray-900">About</h3>
- <p class="py-4 text-gray-600 text-sm">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse
- consectetur dapibus velit ut lacinia.
- </p>
- </div>
- </div>
-
- <div class="flex w-full md:w-1/2">
- <div class="px-8">
- <h3 class="font-bold text-gray-900">Social</h3>
- <ul class="list-reset items-center text-sm pt-3">
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- <li>
- <a
- class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
- href="#"
- >Add social link</a
- >
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </footer>
-
- <script>
- /* Progress bar */
- //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
- var h = document.documentElement,
- b = document.body,
- st = 'scrollTop',
- sh = 'scrollHeight',
- progress = document.querySelector('#progress'),
- scroll
- var scrollpos = window.scrollY
- var header = document.getElementById('header')
- var navcontent = document.getElementById('nav-content')
-
- document.addEventListener('scroll', function () {
- /*Refresh scroll % width*/
- scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
- progress.style.setProperty('--scroll', scroll + '%')
-
- /*Apply classes for slide in bar*/
- scrollpos = window.scrollY
-
- if (scrollpos > 10) {
- header.classList.add('bg-white')
- header.classList.add('shadow')
- navcontent.classList.remove('bg-gray-100')
- navcontent.classList.add('bg-white')
- } else {
- header.classList.remove('bg-white')
- header.classList.remove('shadow')
- navcontent.classList.remove('bg-white')
- navcontent.classList.add('bg-gray-100')
- }
- })
-
- //Javascript to toggle the menu
- document.getElementById('nav-toggle').onclick = function () {
- document.getElementById('nav-content').classList.toggle('hidden')
- }
- </script>
- </body>
-</html>
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,17 @@
-import fs from 'fs'
-import glob from 'glob'
-import matter from 'gray-matter'
-import marked from 'marked'
-import mkdirp from 'mkdirp'
-import path from 'path'
+// import fs from 'fs'
+// import glob from 'glob'
+// import matter from 'gray-matter'
+// import marked from 'marked'
+// import mkdirp from 'mkdirp'
+// import path from 'path'
+
+const path = require('path');
+const mkdirp = require('mkdirp');
+const marked = require('marked');
+const matter = require('gray-matter');
+const glob = require('glob');
+const fs = require('fs');
+
const readFile = (filename) => {
const rawFile = fs.readFileSync(filename, 'utf8')
diff --git a/src/template.html b/src/template.html
@@ -0,0 +1,310 @@
+<!-- TEMPLATE FROM: https://www.tailwindtoolbox.com/templates/minimal-blog -->
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>
+ Tailwind Starter Template - Minimal Blog: Tailwind Toolbox
+ </title>
+ <meta name="author" content="name" />
+ <meta name="description" content="description here" />
+ <meta name="keywords" content="keywords,here" />
+ <link
+ href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
+ rel="stylesheet"
+ />
+ <!--Replace with your tailwind.css once created-->
+ </head>
+ <body class="bg-gray-100 font-sans leading-normal tracking-normal">
+ <nav id="header" class="fixed w-full z-10 top-0">
+ <div
+ id="progress"
+ class="h-1 z-20 top-0"
+ style="
+ background: linear-gradient(
+ to right,
+ #4dc0b5 var(--scroll),
+ transparent 0
+ );
+ "
+ ></div>
+
+ <div
+ class="w-full md:max-w-4xl mx-auto flex flex-wrap items-center justify-between mt-0 py-3"
+ >
+ <div class="pl-4">
+ <a
+ class="text-gray-900 text-base no-underline hover:no-underline font-extrabold text-xl"
+ href="/"
+ >
+ JavaScript Joel
+ </a>
+ </div>
+
+ <div class="block lg:hidden pr-4">
+ <button
+ id="nav-toggle"
+ class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none"
+ >
+ <svg
+ class="fill-current h-3 w-3"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>Menu</title>
+ <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+ </svg>
+ </button>
+ </div>
+
+ <div
+ class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-100 md:bg-transparent z-20"
+ id="nav-content"
+ >
+ <ul class="list-reset lg:flex justify-end flex-1 items-center">
+ <li class="mr-3">
+ <a
+ class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
+ href="page2.html"
+ >page2</a
+ >
+ </li>
+ <li class="mr-3">
+ <a
+ class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-2 px-4"
+ href="#"
+ >link</a
+ >
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+
+ <!--Container-->
+ <div class="container w-full md:max-w-3xl mx-auto pt-20">
+ <div
+ class="w-full px-4 md:px-6 text-xl text-gray-800 leading-normal"
+ style="font-family: Georgia, serif;"
+ >
+ <div class="font-sans">
+ <h1
+ class="font-bold font-sans break-normal text-gray-900 pt-6 pb-2 text-3xl md:text-4xl"
+ >
+ <!-- TITLE -->
+ </h1>
+ <p class="text-sm md:text-base font-normal text-gray-600">
+ <!-- PUBLISH_DATE -->
+ </p>
+ </div>
+
+ <!-- CONTENT -->
+ </div>
+
+ <!--Tags -->
+ <div class="text-base md:text-sm text-gray-500 px-4 py-6">
+ Tags:
+ <a
+ href="#"
+ class="text-base md:text-sm text-teal-500 no-underline hover:underline"
+ >Link</a
+ >
+ .
+ <a
+ href="#"
+ class="text-base md:text-sm text-teal-500 no-underline hover:underline"
+ >Link</a
+ >
+ </div>
+
+ <!--Divider-->
+ <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
+
+ <!--Subscribe-->
+ <div class="container px-4">
+ <div class="font-sans bg-white rounded-lg shadow-md p-4 text-center">
+ <h2 class="font-bold break-normal text-xl md:text-3xl">
+ Subscribe to my Newsletter
+ </h2>
+ <h3
+ class="font-bold break-normal font-normal text-gray-600 text-sm md:text-base"
+ >
+ Get the latest posts delivered right to your inbox
+ </h3>
+ <div class="w-full text-center pt-4">
+ <form action="#">
+ <div
+ class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center"
+ >
+ <input
+ type="email"
+ placeholder="youremail@example.com"
+ class="flex-1 mt-4 appearance-none border border-gray-400 rounded shadow-md p-3 text-gray-600 mr-2 focus:outline-none"
+ />
+ <button
+ type="submit"
+ class="flex-1 mt-4 block md:inline-block appearance-none bg-teal-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-teal-400"
+ >
+ Subscribe
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <!-- /Subscribe-->
+
+ <!--Author-->
+ <div class="flex w-full items-center font-sans px-4 py-12">
+ <img
+ class="w-10 h-10 rounded-full mr-4"
+ src="http://i.pravatar.cc/300"
+ alt="Avatar of Author"
+ />
+ <div class="flex-1 px-2">
+ <p class="text-base font-bold text-base md:text-xl leading-none mb-2">
+ Jo Bloggerson
+ </p>
+ <p class="text-gray-600 text-xs md:text-base">
+ Minimal Blog Tailwind CSS template by
+ <a
+ class="text-teal-500 no-underline hover:underline"
+ href="https://www.tailwindtoolbox.com"
+ >TailwindToolbox.com</a
+ >
+ </p>
+ </div>
+ <div class="justify-end">
+ <button
+ class="bg-transparent border border-gray-500 hover:border-teal-500 text-xs text-gray-500 hover:text-teal-500 font-bold py-2 px-4 rounded-full"
+ >
+ Read More
+ </button>
+ </div>
+ </div>
+ <!--/Author-->
+
+ <!--Divider-->
+ <hr class="border-b-2 border-gray-400 mb-8 mx-4" />
+
+ <!--Next & Prev Links-->
+ <div class="font-sans flex justify-between content-center px-4 pb-12">
+ <div class="text-left">
+ <span class="text-xs md:text-sm font-normal text-gray-600"
+ >< Previous Post</span
+ ><br />
+ <p>
+ <a
+ href="#"
+ class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
+ >Blog title</a
+ >
+ </p>
+ </div>
+ <div class="text-right">
+ <span class="text-xs md:text-sm font-normal text-gray-600"
+ >Next Post ></span
+ ><br />
+ <p>
+ <a
+ href="#"
+ class="break-normal text-base md:text-sm text-teal-500 font-bold no-underline hover:underline"
+ >Blog title</a
+ >
+ </p>
+ </div>
+ </div>
+
+ <!--/Next & Prev Links-->
+ </div>
+ <!--/container-->
+
+ <footer class="bg-white border-t border-gray-400 shadow">
+ <div class="container max-w-4xl mx-auto flex py-8">
+ <div class="w-full mx-auto flex flex-wrap">
+ <div class="flex w-full md:w-1/2">
+ <div class="px-8">
+ <h3 class="font-bold text-gray-900">About</h3>
+ <p class="py-4 text-gray-600 text-sm">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse
+ consectetur dapibus velit ut lacinia.
+ </p>
+ </div>
+ </div>
+
+ <div class="flex w-full md:w-1/2">
+ <div class="px-8">
+ <h3 class="font-bold text-gray-900">Social</h3>
+ <ul class="list-reset items-center text-sm pt-3">
+ <li>
+ <a
+ class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
+ href="#"
+ >Add social link</a
+ >
+ </li>
+ <li>
+ <a
+ class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
+ href="#"
+ >Add social link</a
+ >
+ </li>
+ <li>
+ <a
+ class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
+ href="#"
+ >Add social link</a
+ >
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script>
+ /* Progress bar */
+ //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
+ var h = document.documentElement,
+ b = document.body,
+ st = 'scrollTop',
+ sh = 'scrollHeight',
+ progress = document.querySelector('#progress'),
+ scroll
+ var scrollpos = window.scrollY
+ var header = document.getElementById('header')
+ var navcontent = document.getElementById('nav-content')
+
+ document.addEventListener('scroll', function () {
+ /*Refresh scroll % width*/
+ scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
+ progress.style.setProperty('--scroll', scroll + '%')
+
+ /*Apply classes for slide in bar*/
+ scrollpos = window.scrollY
+
+ if (scrollpos > 10) {
+ header.classList.add('bg-white')
+ header.classList.add('shadow')
+ navcontent.classList.remove('bg-gray-100')
+ navcontent.classList.add('bg-white')
+ } else {
+ header.classList.remove('bg-white')
+ header.classList.remove('shadow')
+ navcontent.classList.remove('bg-white')
+ navcontent.classList.add('bg-gray-100')
+ }
+ })
+
+ //Javascript to toggle the menu
+ document.getElementById('nav-toggle').onclick = function () {
+ document.getElementById('nav-content').classList.toggle('hidden')
+ }
+ </script>
+ </body>
+</html>
