Merge pull request #98 from tighten/nd/update-template

Update template (Vite, Tailwind 4 and more)

Author: damiani

.gitignore

@@ -3,3 +3,4 @@
 /source/assets/build/
 /vendor/
 .DS_Store
+hot

.nvmrc

@@ -0,0 +1 @@
+20

package.json

@@ -1,23 +1,17 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "mix",
-        "watch": "mix watch",
-        "prod": "mix --production"
+        "dev": "vite",
+        "build": "vite build",
+        "prod": "vite build --mode production"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.13",
-        "axios": "^0.21.1",
-        "browser-sync": "^2.27.4",
-        "browser-sync-webpack-plugin": "^2.3.0",
-        "fast-glob": "^3.2.12",
         "fuse.js": "^6.4.6",
-        "highlight.js": "^11.7.0",
-        "laravel-mix": "^6.0.39",
-        "laravel-mix-jigsaw": "^2.0.0",
-        "postcss": "^8.4.21",
-        "postcss-import": "^14.0.2",
-        "tailwindcss": "^3.2.4",
+        "@tighten/jigsaw-vite-plugin": "^1.0.0",
+        "vite": "^6.2.1",
+        "tailwindcss": "^4.1.0",
+        "@tailwindcss/vite": "^4.1.8",
         "alpinejs": "^3.14.1"
     }
 }

readme.md

@@ -16,11 +16,9 @@ This starter template includes samples of common page types, and comes pre-confi
 
 - A fully responsive navigation bar
 - [Tailwind CSS](https://tailwindcss.com/), a utility CSS framework that allows you to customize your design without touching a line of CSS
-- [Purgecss](https://www.purgecss.com/) to remove unused selectors from your CSS, resulting in smaller CSS files
-- Syntax highlighting using [highlight.js](https://highlightjs.org/)
+- Syntax highlighting using [Prism](https://prismjs.com/)
 - A script that automatically generates a `sitemap.xml` file
 - A custom 404 page
-- A component for accepting signups for a [Mailchimp](https://mailchimp.com/) newsletter
 - A sample contact form
 - A search bar powered by [Fuse.js](http://fusejs.io/) and [Alpine.js](https://alpinejs.dev/), which indexes your content automatically and requires zero configuration
 
@@ -71,13 +69,11 @@ featured: true
 
 ### Adding Assets
 
-Any assets that need to be compiled (such as JavaScript, Less, or Sass files) can be added to the `source/_assets/` directory, and Laravel Mix will process them when running `npm run dev` or `npm run prod`. The processed assets will be stored in `/source/assets/build/` (note there is no underscore on this second `assets` directory).
-
-Then, when Jigsaw builds your site, the entire `/source/assets/` directory containing your built files (and any other directories containing static assets, such as images or fonts, that you choose to store there) will be copied to the destination build folders (`build_local`, on your local machine).
+Any assets that need to be compiled, such as JavaScript or CSS using Tailwind, can be added to the `source/_assets/` directory. Vite will process them when running `npm run dev` or `npm run build`, and the processed assets will be stored in `/build_local` or `/build_production`, respectively.
 
 Files that don't require processing (such as images and fonts) can be added directly to `/source/assets/`.
 
-[Read more about compiling assets in Jigsaw using Laravel Mix.](http://jigsaw.tighten.co/docs/compiling-assets/)
+[Read more about compiling assets in Jigsaw using Vite.](http://jigsaw.tighten.co/docs/compiling-assets/)
 
 ---
 
@@ -86,10 +82,9 @@ Files that don't require processing (such as images and fonts) can be added dire
 Now that you’ve edited your configuration variables and know how to customize your styles and content, let’s build the site.
 
 ```bash
-# build static files with Jigsaw
-./vendor/bin/jigsaw build
-
-# compile assets with Laravel Mix
-# options: dev, prod
+# run development server
 npm run dev
+
+# build static files with Vite
+npm run build
 ```

source/_assets/css/base.css

@@ -25,7 +25,7 @@ code {
     @apply py-px;
     @apply text-sm;
     @apply bg-gray-300;
-    @apply rounded;
+    @apply rounded-sm;
 }
 
 code.hljs {
@@ -117,7 +117,7 @@ ul {
 p {
     @apply my-3;
 
-    @screen md {
+    @media (width >= theme(--breakpoint-md)) {
         @apply my-6;
     }
 }
@@ -128,8 +128,8 @@ pre {
     @apply text-base;
     @apply bg-gray-200;
     @apply leading-loose;
-    @apply rounded;
-    @apply shadow;
+    @apply rounded-sm;
+    @apply shadow-sm;
     @apply overflow-x-auto;
 
     & code {

source/_assets/css/mailchimp.css

@@ -1,11 +1,50 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
+@import "tailwindcss";
 
-/* Code syntax highlighting, powered by https://highlightjs.org */
-@import 'highlight.js/styles/a11y-light.css';
+@import './base.css' layer(components);
+@import './blog.css' layer(components);
 
-@import 'base';
-@import 'mailchimp';
-@import 'blog';
+@layer base {
+  :root {
+    --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-@import 'tailwindcss/utilities';
+    --shadow-search: 0 -1px 27px 0 rgba(0, 0, 0, 0.04), 0 4px 15px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  body {
+    font-family: var(--font-sans);
+  }
+}
+
+@layer utilities {
+  .shadow-search {
+    box-shadow: var(--shadow-search);
+  }
+}
+
+/* Syntax Highlight by Prism */
+/* https://prismjs.com/ */
+
+/* You can customize the theme of the Prism syntax highlighter below. Adjust colors, backgrounds, and styles as needed for your site. */
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #e5e7eb;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  background: transparent;
+}

source/_assets/css/main.css

@@ -1,26 +1,7 @@
-window.axios = require('axios');
 import Alpine from "alpinejs";
 import Fuse from "fuse.js";
 
 window.Fuse = Fuse;
 window.Alpine = Alpine;
 
 Alpine.start();
-
-import hljs from 'highlight.js/lib/core';
-
-// Syntax highlighting
-hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
-hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
-hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
-hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
-hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
-hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'));
-hljs.registerLanguage('php', require('highlight.js/lib/languages/php'));
-hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
-hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));
-
-document.querySelectorAll('pre code').forEach((block) => {
-    hljs.highlightElement(block);
-});
-

source/_assets/js/main.js

@@ -1,29 +1,12 @@
-<div class="flex justify-center lg:-mx-12 my-12 p-6 md:px-12 bg-gray-200 border border-gray-400 text-sm md:rounded shadow">
-    <!-- Begin Mailchimp Signup Form -->
-    <div id="mc_embed_signup">
-        <form action="https://your-mail-chimp-list-manage-url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-            <div id="mc_embed_signup_scroll">
-                <h2>Sign up for our newsletter</h2>
-                <div class="mc-field-group">
-                    <label for="mce-EMAIL">Email Address </label>
-                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email address">
-                </div>
-                <div id="mce-responses" class="clear">
-                    <div class="response" id="mce-error-response" style="display:none"></div>
-                    <div class="response" id="mce-success-response" style="display:none"></div>
-                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-
-                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_25582686a9fc051afd5453557_189578c854" tabindex="-1" value=""></div>
-                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+<div class="flex justify-center items-center bg-gray-200 border border-gray-400 rounded-lg p-4 md:p-8 md:px-12 my-12 shadow-sm lg:-mx-12">
+    <form action="" method="post" class="w-full max-w-3xl">
+        <div class="flex flex-col items-center w-full gap-3 md:gap-4">
+            <div class="text-xl md:text-2xl font-bold text-gray-900 text-center">Sign up for our newsletter</div>
+            <div class="flex w-full max-w-lg">
+                <input type="email" required name="email" placeholder="Email address" class="text-sm flex-1 rounded-l-md px-3 py-3 border-none focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white text-gray-700 placeholder-gray-400">
+                <button type="submit" class="text-sm rounded-r-md px-4 md:px-8 py-3 font-medium bg-blue-400 text-white hover:bg-blue-500 transition-colors duration-150">Subscribe</button>
             </div>
-        </form>
-    </div>
-    <!--End Mailchimp Signup Form -->
+            <div class="text-sm">Need forms? Try <a href="https://fieldgoal.io/" class="underline" target="_blank">FieldGoal</a></div>
+        </div>
+    </form>
 </div>
-
-@push('scripts')
-    <script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
-    <script>(function($) {
-        window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
-    </script>
-@endpush

source/_components/newsletter-signup.blade.php

@@ -1,12 +1,13 @@
 <div x-data="{
         init(){
-            window.axios('/index.json')
-                .then(response => {
-                    this.fuse = new window.Fuse(response.data, {
-                            minMatchCharLength: 6,
-                            keys: ['title', 'snippet', 'categories'],
-                        });
+            fetch('/index.json')
+                .then(response => response.json())
+                .then(data => {
+                    this.fuse = new window.Fuse(data, {
+                        minMatchCharLength: 6,
+                        keys: ['title', 'snippet', 'categories'],
                     });
+                });
         },
         get results() {
             return this.query ? this.fuse.search(this.query) : [];
@@ -27,7 +28,7 @@
             this.query = '';
             this.searching = false;
         },
-    }" 
+    }"
     x-cloak
     class="flex flex-1 justify-end items-center text-right px-4"
 >
@@ -41,8 +42,9 @@ class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 m
             id="search"
             x-model="query"
             x-ref="search"
-            class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px transition-all duration-200 ease-out bg-[url('/assets/img/magnifying-glass.svg')] bg-no-repeat bg-[0.8rem] indent-[1.2em]"
+            class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px transition-all duration-200 ease-out bg-no-repeat bg-[0.8rem] indent-[1.2em]"
             :class="{ 'rounded-b-none rounded-t-lg': query, 'rounded-3xl': !query }"
+            style="background-image: url('/assets/img/magnifying-glass.svg')"
             autocomplete="off"
             name="search"
             placeholder="Search"