stefanfrede / 11st-starter-kit

11ty, powered by Vite with Tailwind CSS and Alpine.js.

📦 11st-Starter-Kit

11ty, powered by Vite with Tailwind CSS and Alpine.js.

Install Dependencies

First, make sure you have npm (packaged with Node.js) installed, then run npm run setup to install the dependencies and validate that everything is running correctly.

Available Scripts

Development

# runs the app in the development mode.
npm run dev

Open http://localhost:3000/ to view it in your browser.

The page will reload if you make file changes.

Production

# builds a static copy of your site to the `dist/` folder.
npm run build

# serve the content from the `dist/` folder.
npm run preview

Open http://localhost:5000/ to view it in your browser.

Your code is now ready to be deployed!

Netlify

To get your own instance of this 11st-Starter-Kit cloned and deploying to Netlify very quickly, just click the button below and follow the instructions.

Add some Netlify helpers

Netlify Dev adds the ability to use Netlify redirects, proxies, and serverless functions.

# install the Netlify CLI in order to get netlify dev
npm install -g netlify-cli

# run a local server with some added Netlify sugar
netlify dev

Code Quality

By default CSS and JavaScript is getting linted with every commit.

You can lint manually by running npm run lint and if errors occur you can try to fix them automatically by running npm run format.

With every pull request it is checked if the code can be build without errors and afterwards CSS and JavaScript is getting linted.

Additionally each page is audited by Lighthouse which can take some time. You can find the performance budget for this audit in the file ./budget.json.

License

This project is open source and available under the MIT License.

11st-starter-kit's Issues

404 Page Does Not Work

If you go to a broken URL, the site just shows the homepage content. The 404 page only shows if you navigate directly to it. Shouldn't this work by default?

Changing output directory

I'd like to just use dist as my output directory during development, but if I try to change it, the local site never updates when I run npm run dev unless I restart. It seems like dist and src/_site are both being simultaneously, but I'm not sure why.

Can you clarify how dist and src/_site are being used? Does this have something to do with Snowpack?

Update content with Service Worker

I'm really enjoying how you've put this starter together. I'm pushing changes to Netlify and am not seeing content updates because of the service worker. Shouldn't that version change? I see you're using nanoid, but not sure I understand how it updates the service worker on a content change. Or perhaps I'm missing something.

Install and Run Issues

Upon installing and running the starter, it fails and complains that it cannot find 'markdown it anchor'.

Ive noticed that both 'markdown-it' and 'markdown-it-anchor' are both not in the package.json as devDependencies.

Two refreshs are needed for changes to be applied in development

Apparent bug

Developing on npm run dev, two refreshs are needed for changes to be applied.

Looking into _site, one can see that 11ty built the changes immediately but vite still serves the old bundle. My first thought was that vite may be too fast and therefore using the old files but then I realized vite should only be executed upon changes in root _site which 11ty apparently places the rebuild correctly into.

Environment

vite: 2.8.4
@11ty/eleventy: 1.0.0,

Reproduction steps

1. Clone 11st-starter-kit
2. Make changes e. g. content of index.md or classes in index.html.
3. Save.
4. Recognize that changes are not applied.
5. Save or refresh browser.
6. See that changes are applied.

[snowpack] Package "tailwindcss/base" not found. Have you installed it?

From a clean install I did npm i then npm start and I get this error [snowpack] Package "tailwindcss/base" not found. Have you installed it?

snowpack usage with bootstrap and jquery?

Hi,

Thank you very much for sharing your project. I am looking into way convert my current 11ty webpage project to using some sort of bundle for speed and page weight optimization. Currently, my pages using Bootstrap CDN as well as jQuery CDN. Since there are a large portion of these libraries that I don't use, I thought perhaps some bundle would help (I have no experience in using any packet bundle before). I did hear about snowpack (good things like speeds and some concerns like it only works with some types of node packages) on learning about package bundler and I found your repo. If you don't mind, I have a couple of questions:

• Do you know if snowpack would be able to slim down and package only what I need for my page from Bootstrap and jQuery? css would be a plus as well?
• I was also looking into parcel vs snowpack and i thought parcel might fit better for my need but as inexperienced as I am, I thought asking for opinion would be best :)!!

Thank you so much!!

snowpack mounts before scripts run

I see this as first line of log:
[snowpack] config.mount[/.../src/_site]: mounted directory does not exist

But this repo somehow builds eleventy before snowpack builds. (npx snowpack build)

I use the same snowpack config but unable to have src/_site files copied over, before snowpack builds. How is this working?

missing default classes in dev view (localhost)?

hello stefan. i love this starter so thanks for making it available

i'm having weird issues where lots of default tailwind classes seem to be missing from the dev view (localhost:8080) so i can't see them while building. but if i build and push live the classes are present as expected

any thoughts?

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

Hey @stefanfrede
Thanks for this amazing theme, npm run setup is giving errors on Windows devices

> NODE_ENV=production run-s clean build:*

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE

Temporary solution for windows users - npm install -g win-node-env

Adding vanilla JS modules results in Vite error

I may be misunderstanding what this project is meant to achieve.

I was looking for a setup that combines the power and development convenience of Vite.js with the static site generation capabilities of 11ty.

As such, I've tried the following:

1. Check out your repo.
2. Remove tailwind.css and Alpine.js as I'm interested in a setup that does not suggest any frameworks/libs.
3. Add a new folder and file: src/js/components/foo-bar/foo-bar.js.
4. Import this component in main.js using import './js/components/foo-bar/foo-bar.js';.

This results in

21:37:00 [vite] Internal server error: Failed to resolve import "./js/components/foo-bar/foo-bar.js" from "_site/main.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/connexo/Sites/11st-starter-kit/_site/main.js
  1  |  import './styles/main.css';
  2  |  import './js/components/foo-bar/foo-bar.js';
     |          ^
  3  |
  4  |  const env = document.querySelector('body').dataset.env;
      at formatError (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
      at TransformContext.error (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
      at normalizeUrl (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26)
      at async TransformContext.transform (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57)
      at async Object.transform (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
      at async doTransform (/Users/connexo/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29) (x2)

Is this project not set up to combine the blazing fast HMR capabilities of Vite with the raw SSG power of 11ty?

Please explain how to properly set up vanilla JS imports within this project.

How to modify the CSS real-time preview?

when I modify the css, I can’t preview it in real time.
For example, I add a class 'text-green-500' to some text in template.

Page Structure Accessibility

Started using your starter (which has a nice dev tool setup thanks!) and noticed that the top page-level <header> is being used for the h1 page title. According to W3C Page Region guidelines the top page-level <header> is mainly used for "logo, search function, and navigation". The h1 page title is according to their guidelines supposed to go within the <main> where the main content region is. Also <section> or <article> elements can have their own <header> elements.

Granted a bunch of html page element stuff is a bit loose but I wanted to point this out. You might want to revisit your page region structure for accessibility, or at least do your own research to see if this matters. I can't claim to be an accessibility expert but I usually follow these guidelines and use the page-level <header> for logo and nav stuff.

SASS support

Hi.

I am working hard to integrate SASS to snowpack. I stopped after spending ton of hours, and now looking for other options (vite or plain rollup or parcel). I open the issue here hoping there will be a solution. Because I don't find any Eleventy + snowpack but this repo.

The code here is worked well. But when I tried to integrate SASS. It doesn't work.
I have tried many possibilities. Nothing works. My last solution is here:

I changed styles/index.css to styles/index.scss and ...

// snowpack.config.js

   plugins: [
-    '@snowpack/plugin-postcss',
+    ['@snowpack/plugin-postcss', { input: ['.scss'], config: './postcss.config.js' }],
+    [
+      '@snowpack/plugin-sass',
+      {
+        native: 'true',
+        compilerOptions: { loadPath: ['./src/style/'] },
+      },
+    ],

// postcss.config.js

-module.exports = {
-  plugins: {
-    '@tailwindcss/jit': {},
-    autoprefixer: {},
-  },
+module.exports = (ctx) => {
+  return {
+    // allow inline comment in SASS
+    syntax: 'postcss-scss',
+    plugins: [
+      require('@tailwindcss/jit')('tailwind.config.js'),
+      require('autoprefixer'),
+    ],
+  };
 };

But the produced index.css still contains:

the @snowpack/plugin-postcss doesn't change them to tailwindCSS clasess.

Request: make it a template repository

It's an option in settings :), unlike forks you can have multiple of a template repo.

"RangeError: Maximum call stack size exceeded" when npm run dev WSL2

I'm using Debian WSL2 on Windows 10.

What I did:

• clone the repo
• npm run install
• npm run dev

The error I got:

$ npm run dev

> [email protected] predev
> run-s clean


> [email protected] clean
> rimraf _site


> [email protected] dev
> cross-env NODE_ENV=development run-p dev:*


> [email protected] dev:vite
> npx vite


> [email protected] dev:eleventy
> npx @11ty/eleventy --watch

error when starting dev server:
RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at interpolate (/home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74589:28)
    at /home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74607:17
    at Array.reduce (<anonymous>)
    at interpolate (/home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74591:20)
    at /home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74607:17
    at Array.reduce (<anonymous>)
    at interpolate (/home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74591:20)
    at /home/louis/Sites/11st-starter-kit/node_modules/vite/dist/node/chunks/dep-f5552faa.js:74607:17
    at Array.reduce (<anonymous>)
ERROR: "dev:vite" exited with 1.

Thanks.