Merge pull request #39 from huphtur/eleventy

utilizing 11ty & upgrading dependencies 🥳
huphtur · May 2, 2023 · 4c758c4 · 4c758c4
2 parents f5c098b + beb893f
commit 4c758c4
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 160 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
-node_modules
-public/build
-yarn.lock
+_site/
+.cache
+.DS_Store
+node_modules/
 package-lock.json
-.DS_Store
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Basic demo on how to switch styles with Tailwind, handy for dark mode type purpo
 
 Live preview: https://tailwind-theme-switcher.netlify.app/
 
-This is a mashup of Adam Wathan's [Theming Tailwind Demo](https://github.com/adamwathan/theming-tailwind-demo), [Tailwind CSS Playground](https://github.com/tailwindcss/playground), and Katie Ball's [Quick switch Themes with javascript](https://gist.github.com/roachhd/698db516c17bb130c495/).
+This is a mashup of Adam Wathan's [Theming Tailwind Demo](https://github.com/adamwathan/theming-tailwind-demo), [Hella Simple Eleventy + Tailwind CSS Starter](https://github.com/huphtur/hella-simple-eleventy-tailwind-starter), and Katie Ball's [Quick switch Themes with javascript](https://gist.github.com/roachhd/698db516c17bb130c495/).
 
 ## To get started
 
@@ -40,16 +40,14 @@ This is a mashup of Adam Wathan's [Theming Tailwind Demo](https://github.com/ada
 
 ## Building for production
 
-[cssnano](https://cssnano.co/) included to optimize your CSS for production. PurgeCSS is [handled by Tailwind](https://github.com/tailwindcss/tailwindcss/pull/1639)!
-
 To build an optimized version of your CSS, simply run:
 
 ```bash
 # Using npm
-npm run production
+npm run build
 
 # Using Yarn
-yarn production
+yarn build
 ```
 
-After that's done, check out `./public/build/styles.css` to see the optimized output.
+After that's done, check out `./_site/styles.css` to see the optimized output.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -0,0 +1,11 @@
+module.exports = function (eleventyConfig) {
+  eleventyConfig.setServerOptions({
+    watch: ['_site/**/*.css'],
+  });
+
+  return {
+    dir: {
+      input: 'src',
+    },
+  };
+};
diff --git a/package.json b/package.json
@@ -1,24 +1,17 @@
 {
+  "name": "tailwind-theme-switcher",
+  "description": "Tailwind Dark Mode Theme Switcher",
   "scripts": {
-    "serve": "cross-env NODE_ENV=development concurrently \"postcss public/styles.css -o public/build/styles.css --watch\"  \"live-server ./public\"",
-    "development": "cross-env NODE_ENV=development postcss public/styles.css -o public/build/styles.css",
-    "production": "cross-env NODE_ENV=production postcss public/styles.css -o public/build/styles.css"
+    "serve": "rm -rf _site && npx @11ty/eleventy --serve --quiet & npx tailwindcss -i ./src/tailwind.css -o ./_site/styles.css --watch",
+    "build": "rm -rf _site && ELEVENTY_ENV=production npx @11ty/eleventy && npx tailwindcss -i ./src/tailwind.css -o ./_site/styles.css --minify"
   },
-  "name": "tailwind-theme-switcher",
+  "keywords": [],
   "repository": "https://github.com/huphtur/tailwind-theme-switcher",
   "author": "M. Appelman <[email protected]>",
   "license": "MIT",
-  "browserslist": [
-    "defaults"
-  ],
+  "browserslist": "defaults",
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
-    "concurrently": "^6.2.0",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.0.4",
-    "live-server": "^1.2.1",
-    "postcss": "^8.3.0",
-    "postcss-cli": "^8.3.1",
-    "tailwindcss": "^2.1.2"
+    "@11ty/eleventy": "^2.0.1",
+    "tailwindcss": "^3.3.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/scripts.js b/public/scripts.js
diff --git a/public/styles.css b/public/styles.css
diff --git a/src/_includes/default.liquid b/src/_includes/default.liquid
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="bg-inverse overflow-y-scroll" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
+    <meta name="description" content="{% if description %}{{ description }}{% else %}Your site description{% endif %}" />
+    <title>{% if title %}{{ title }}{% else %}Your site title{% endif %}</title>
+
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+
+  <body class="font-body">
+    {{ content }}
+
+    <script>
+      // Toggle Dark Theme
+      var d = document.documentElement,
+        t = document.querySelector('#theme-btn'),
+        m = localStorage.getItem('theme');
+
+      if (m == 'dark') {
+        d.classList.add('theme-dark');
+      }
+
+      t.addEventListener('click', function () {
+        if (d.classList.contains('theme-dark')) {
+          d.classList.remove('theme-dark');
+          localStorage.removeItem('theme');
+        } else {
+          d.classList.add('theme-dark');
+          localStorage.setItem('theme', 'dark');
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/index.liquid b/src/index.liquid
@@ -0,0 +1,19 @@
+---
+layout: default
+title: "Tailwind Theme Switcher"
+description: "Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes."
+---
+<div class="container mx-auto px-4">
+  <div class="py-16 text-center">
+    <div class="mb-6">
+      <h1 class="font-display text-inverse mb-4 text-5xl font-light">Tailwind Theme Switcher</h1>
+      <p class="text-inverse-soft text-2xl font-normal">With localStorage to remember theme setting</p>
+    </div>
+    <div>
+      <button class="theme-btn font-body rounded-btn bg-primary hover:bg-secondary text-primary hover:text-secondary px-6 py-3 text-xl font-medium" id="theme-btn" type="button">Swap Theme</button>
+    </div>
+    <div class="mt-8">
+      <a class="text-inverse-soft hover:text-inverse hover:underline" href="https://github.com/huphtur/Tailwind-Theme-Switcher">View on GitHub</a>
+    </div>
+  </div>
+</div>
diff --git a/src/tailwind.css b/src/tailwind.css
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+
+    :root {
+    --color-bg-primary: #0252cc;
+    --color-bg-secondary: #ffc402;
+    --color-bg-default: #fff;
+    --color-bg-inverse: #fff;
+
+    --color-text-primary: #fff;
+    --color-text-secondary: #755f17;
+    --color-text-default: #444;
+    --color-text-default-soft: #999;
+    --color-text-inverse: #444;
+    --color-text-inverse-soft: #767676;
+
+    --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    --font-weight-normal: 400;
+    --font-weight-display: 400;
+    --font-weight-btn: 600;
+
+    --rounded-btn: 0.25rem;
+    }
+
+    .theme-dark {
+    --color-bg-primary: #847543;
+    --color-bg-secondary: #dcd0c0;
+    --color-bg-default: #f4f4f4;
+    --color-bg-inverse: #373737;
+
+    --color-text-primary: #fff;
+    --color-text-secondary: #927e7e;
+    --color-text-default: #373737;
+    --color-text-default-soft: #6a6a6a;
+    --color-text-inverse: #fff;
+    --color-text-inverse-soft: #bbb;
+
+    --font-display: Georgia, Times, 'Times New Roman', serif;
+    --font-body: Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans',
+        'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana,
+        'Verdana Ref', sans-serif;
+
+    --font-weight-normal: 400;
+    --font-weight-display: 400;
+    --font-weight-btn: 600;
+
+    --rounded-btn: 0;
+    }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,6 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: {
-    mode: 'all',
-    content: ['./public/**/*.html'],
-  },
+  content: ['./src/**/*.{html,liquid}'],
   theme: {
     colors: {},
     textColor: {
@@ -33,6 +31,5 @@ module.exports = {
       btn: 'var(--rounded-btn)',
     },
   },
-  variants: {},
   plugins: [],
 };