├── .nvmrc
├── public
    └── .gitkeep
├── .gitignore
├── src
    ├── _data
    │   ├── env.js
    │   └── navigation.js
    ├── page-1.md
    ├── page-2.md
    ├── page-3.md
    ├── _includes
    │   ├── markdown.twig
    │   ├── scripts.twig
    │   ├── layout.twig
    │   └── header.twig
    ├── index.twig
    └── _bundle
    │   ├── app.js
    │   └── app.css
├── vite.config.js
├── .eleventy.js
├── LICENSE
├── README.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 24
2 | 


--------------------------------------------------------------------------------
/public/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/src/_data/env.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   devMode: process.env.NODE_ENV !== 'production'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/_data/navigation.js:
--------------------------------------------------------------------------------
1 | export default [
2 |   { name: 'Page 1', route: '/page-1/' },
3 |   { name: 'Page 2', route: '/page-2/' },
4 |   { name: 'Page 3', route: '/page-3/' },
5 | ]
6 | 


--------------------------------------------------------------------------------
/src/page-1.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Page 1
3 | layout: markdown
4 | ---
5 | 
6 | # This is {{ title }}.
7 | 
8 | This page is authored in markdown at `src/{{ title|lower|replace({" ": "-"}) }}.md`
9 | 


--------------------------------------------------------------------------------
/src/page-2.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Page 2
3 | layout: markdown
4 | ---
5 | 
6 | # This is {{ title }}.
7 | 
8 | This page is authored in markdown at `src/{{ title|lower|replace({" ": "-"}) }}.md`
9 | 


--------------------------------------------------------------------------------
/src/page-3.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Page 3
3 | layout: markdown
4 | ---
5 | 
6 | # This is {{ title }}.
7 | 
8 | This page is authored in markdown at `src/{{ title|lower|replace({" ": "-"}) }}.md`
9 | 


--------------------------------------------------------------------------------
/src/_includes/markdown.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'layout.twig' %}
 2 | 
 3 | {% block body %}
 4 |   <div class="container py-16">
 5 |     <div class="prose max-w-none">
 6 |       {{ content|raw }}
 7 |     </div>
 8 |   </div>
 9 | {% endblock %}
10 | 


--------------------------------------------------------------------------------
/src/index.twig:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 'Home'
 3 | ---
 4 | 
 5 | {% extends "_includes/layout.twig" %}
 6 | 
 7 | {% block body %}
 8 |   <main class="container py-16">
 9 |     <div class="prose max-w-none">
10 |       <h1>Welcome to the TEA Stack!!</h1>
11 |       <p>This page is authored in twig at <code>src/index.twig</code></p>
12 |     </div>
13 |   </main>
14 | {% endblock %}
15 | 


--------------------------------------------------------------------------------
/src/_includes/scripts.twig:
--------------------------------------------------------------------------------
1 | {% if env.devMode %}
2 |   <script type="module" src="http://localhost:5173/@vite/client"></script>
3 |   <script type="module" src="http://localhost:5173/src/_bundle/app.js"></script>
4 |   <link rel="stylesheet" href="http://localhost:5173/src/_bundle/app.css">
5 | {% else %}
6 |   <link rel="stylesheet" href="/assets/app.css">
7 |   <script src="/assets/app.js" defer></script>
8 | {% endif %}
9 | 


--------------------------------------------------------------------------------
/src/_includes/layout.twig:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   {% include 'scripts.twig' %}
 8 |   <title>{{ title }} | TEA Stack</title>
 9 | </head>
10 | 
11 | <body class="{{ env.devMode ? 'debug-screens' }}">
12 |   {% include 'header.twig' %}
13 |   {% block body %}
14 |     {{ content|raw }}
15 |   {% endblock %}
16 | </body>
17 | 
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/_bundle/app.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | 
 3 | window.Alpine = Alpine
 4 | 
 5 | // Start Alpine when the page is ready.
 6 | window.addEventListener('DOMContentLoaded', () => {
 7 |   Alpine.start()
 8 | });
 9 | 
10 | // Basic Store Example in Alpine.
11 | window.addEventListener('alpine:initializing', () => {
12 |   Alpine.store('nav', {
13 |     isOpen: false,
14 |     close() { return this.isOpen = false },
15 |     open() { return this.isOpen = true },
16 |     toggle() { return this.isOpen = !this.isOpen }
17 |   })
18 | });
19 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import tailwindcss from "@tailwindcss/vite";
 2 | 
 3 | 
 4 | /** @type {import('vite').UserConfig} */
 5 | export default {
 6 |   plugins: [
 7 |     tailwindcss()
 8 |   ],
 9 |   publicDir: false,
10 | 	build: {
11 | 		outDir: './dist/assets',
12 | 		assetsDir: '',
13 | 		rollupOptions: {
14 | 			input: ['./src/_bundle/app.js', './src/_bundle/app.css'],
15 |       output: {
16 |         entryFileNames: `[name].js`,
17 |         chunkFileNames: `[name].js`,
18 |         assetFileNames: `[name].[ext]`
19 |       }
20 | 		},
21 | 	},
22 | }
23 | 


--------------------------------------------------------------------------------
/src/_bundle/app.css:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss' source('../../src');
 2 | @plugin '@tailwindcss/forms';
 3 | @plugin '@tailwindcss/typography';
 4 | 
 5 | @utility container {
 6 | 	margin-inline: auto;
 7 | 	padding-inline: 2rem;
 8 | }
 9 | 
10 | @layer base {
11 |   *,
12 |   ::after,
13 |   ::before,
14 |   ::backdrop,
15 |   ::file-selector-button {
16 |     border-color: var(--color-gray-200, currentColor);
17 |   }
18 | 
19 |   html {
20 |   @apply antialiased text-gray-800 font-sans;
21 | }
22 | 
23 |   /* This allows you to hide Alpine DOM until it's ready to go. */
24 |   [x-cloak] {
25 |     @apply hidden;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
 1 | import twig from '@factorial/eleventy-plugin-twig'
 2 | 
 3 | const twigOptions = {
 4 |   twig: {
 5 |     namespaces: {},
 6 |   },
 7 |   images: {},
 8 |   dir: {
 9 |     input: "src",
10 |     output: "dist",
11 |     watch: "src/**/*.{css,js,twig}",
12 |   },
13 | };
14 | 
15 | export default function (config) {
16 |   config.addPassthroughCopy({ 'public': './' })
17 |   config.addPlugin(twig, twigOptions)
18 |   config.setServerOptions({
19 |     domDiff: false,
20 |   })
21 |   config.setBrowserSyncConfig({
22 |     files: ['dist/**/*'],
23 |     open: true,
24 |   })
25 |   return {
26 |     dir: {
27 |       input: 'src',
28 |       output: 'dist',
29 |     },
30 |     markdownTemplateEngine: 'twig',
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Matt Waler
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🫖 The TEA Stack
 2 | 
 3 | Welcome to the most minimal stack out there. This stack makes static site generation a breeze.
 4 | 
 5 | ## 🧰 Tools
 6 | 
 7 | This project uses the following frameworks:
 8 | 
 9 | - [TailwindCSS](https://tailwindcss.com/)
10 | - [Eleventy](https://www.11ty.dev/)
11 | - [Alpine.js](https://alpinejs.dev/)
12 | - [Vite](https://vitejs.dev)
13 | 
14 | ## ⭐️ Requirements
15 | 
16 | - [Node](https://nodejs.org/en/)
17 | - [NVM](https://github.com/nvm-sh/nvm)
18 | 
19 | ## 🛠 Getting Started
20 | 
21 | - `nvm use` to switch to the valid node version
22 | - `npm i` to build that big ol' `node_modules` folder
23 | - `npm run dev` to boot up a live-reloading dev server
24 | - `npm run build` to build your production-ready site
25 | 
26 | Feel free to peep the `package.json` file to see all available scripts and packages being utilized.
27 | 
28 | ### 🔥 Tip:
29 | 
30 | Running `npm run build && npx serve dist` will boot up a local server of your production site to preview before deployment.
31 | 
32 | ### 👋🏻 Thank you!
33 | 
34 | I appreciate you taking time to check out the TEA stack, Please leave a star and share it if you found it useful!
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tea-stack",
 3 |   "version": "1.0.0",
 4 |   "description": "A starter template for the TEA stack.",
 5 |   "main": "index.js",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "build": "NODE_ENV=production npm-run-all clean build:vite build:11ty",
 9 |     "build:11ty": "eleventy --quiet",
10 |     "build:vite": "vite build",
11 |     "clean": "rm -rf dist",
12 |     "dev": "NODE_ENV=development npm-run-all -p dev:*",
13 |     "dev:11ty": "eleventy --quiet --serve",
14 |     "dev:vite": "vite"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/mattwaler/tea-stack.git"
19 |   },
20 |   "keywords": [
21 |     "tailwind",
22 |     "eleventy",
23 |     "alpine"
24 |   ],
25 |   "author": "Matt Waler",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/mattwaler/tea-stack/issues"
29 |   },
30 |   "homepage": "https://github.com/mattwaler/tea-stack#readme",
31 |   "dependencies": {
32 |     "alpinejs": "^3.1.0"
33 |   },
34 |   "devDependencies": {
35 |     "@11ty/eleventy": "^3.0.0",
36 |     "@factorial/eleventy-plugin-twig": "^0.2.0",
37 |     "@tailwindcss/forms": "^0.5.10",
38 |     "@tailwindcss/typography": "^0.5.16",
39 |     "@tailwindcss/vite": "^4.0.6",
40 |     "npm-run-all": "^4.1.5",
41 |     "tailwindcss": "^4.0.0",
42 |     "twig": "^1.15.4",
43 |     "vite": "^7.2.7"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/_includes/header.twig:
--------------------------------------------------------------------------------
 1 | <header class="bg-gray-900">
 2 |   <nav class="container" aria-label="Top">
 3 |     <div
 4 |       class="flex w-full items-center justify-between border-b border-gray-200 py-6 lg:border-none"
 5 |     >
 6 |       <div class="flex items-center">
 7 |         <a href="/">
 8 |           <span class="sr-only">TEA Stack</span>
 9 |           <svg
10 |             class="h-10 w-auto text-white"
11 |             xmlns="http://www.w3.org/2000/svg"
12 |             viewBox="0 0 640 512"
13 |           >
14 |             <path
15 |               fill="currentColor"
16 |               d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
17 |             />
18 |           </svg>
19 |         </a>
20 |         <div class="ml-10 hidden space-x-8 lg:block">
21 |           {% for item in navigation %}
22 |             <a
23 |               href="{{ item.route }}"
24 |               class="{{
25 |                 page.url == item.route ? 'font-black' : 'font-medium'
26 |               }} text-base text-white hover:text-indigo-50"
27 |             >
28 |               {{ item.name }}
29 |             </a>
30 |           {% endfor %}
31 |         </div>
32 |       </div>
33 |       <div class="ml-10 space-x-4">
34 |         <a
35 |           href="https://github.com/mattwaler/tea-stack"
36 |           class="inline-block rounded-md border border-transparent bg-white py-2 px-4 text-base font-medium hover:bg-indigo-50"
37 |         >
38 |           View on GitHub
39 |         </a>
40 |       </div>
41 |     </div>
42 |     <div class="flex flex-wrap justify-center space-x-6 py-4 lg:hidden">
43 |       {% for item in navigation %}
44 |         <a
45 |           href="{{ item.route }}"
46 |           class="{{
47 |             page.url == item.route ? 'font-black' : 'font-medium'
48 |           }} text-base text-white hover:text-indigo-50"
49 |         >
50 |           {{ item.name }}
51 |         </a>
52 |       {% endfor %}
53 |     </div>
54 |   </nav>
55 | </header>
56 | 


--------------------------------------------------------------------------------