stefanfrede / 11st-starter-kit

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

Hi 👋

I am Stefan, a front-end developer from Germany.

My focus is on HTML, CSS, accessibility, and progressive enhancement.

When I use JavaScript, I prefer to limit myself to browser APIs whenever possible.

The web has made significant progress. Features that previously required libraries or frameworks can now be easily implemented using vanilla JavaScript.

This approach has several benefits: it keeps the codebase small, avoids bugs, and improves performance.

I have been working in this business since 2004.

My skills and experience include

• HTML and CSS
• Responsive Web Design
• Accessibility and Progressive Enhancement
• Vanilla JavaScript
• Web Components & Lit
• Vue.js and Nuxt
• Pinia and Vite
• Docker and Git

How to reach me

Ehrenbergstraße 16a
Scanbox #03611
10245 Berlin
Germany

📧: [email protected]
💻: https://www.frede.dev/
💬: Mastodon

11st-starter-kit's Issues

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?

"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.

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?

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.

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.

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 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?

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.

[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!!

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.

Request: make it a template repository

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

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.

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?

'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

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.