11ty-lit

KO | EN

gitlite — search

#php #javascript #python #java #ruby #android #deprecated #windows #reverse-engineering #game #game-development #go

★ 63 Open GitHub ↗

an example of 11ty and lit

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 11ty and Lit and Typescript

This repo is an example of using 11ty and Lit together with typecript.

## Technologies

- [Lit](https://lit.dev)
- [11ty](https://www.11ty.dev/)
- [11ty-islands](https://github.com/11ty/is-land)
- [@lit-labs/ssr](https://github.com/lit/lit/tree/main/packages/labs/ssr)
- [@lit-labs/eleventy-plugin-lit](https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit)
- [Wireit](https://github.com/google/wireit)
- [Typescript](https://www.typescriptlang.org/)

## Quickstart

Dev mode:

```bash
npm i && npm run dev
```

Prod mode:

```bash
npm i && npm start
```

## Explanation

11ty is a static site builder. Lit is a library that makes it easy to build Web Components. TypeScript is a strongly typed programming language that builds on JavaScript. In this example, we combine the three so that you can sprinkle interactivity in a static site with Lit. We also use 11ty islands to make it easy to SSR your components and control how they are hydrated to provide an "island of interactivity".

### Directory Structure

#### `site` directory

This directory holds your 11ty templates. See the 11ty docs for more info.

#### `site/_includes` directory

This is for templates global to the 11ty templating system. Here we have a `default.html` layout and a `layouts` directory for layouts that are specific to a page or set of pages.

Make sure to include `default.html` in your layouts and in your 11ty `json` config files or simply extend them in nunjucks.

#### `site/css` directory

This holds your css files. Later, you may want to minify these.

#### `site/fonts` and `site/images` directories

These hold your fonts and images. They are empty right now, but they will be copied over to the `dist` directory.

#### `site/*` (everything else)

Most of these are for templating in 11ty. See the 11ty docs for more info. If you'd like to hook into the 11ty data system you may want to add a `_data` directory and consult the 11ty docs.

#### `src/components` directory

This directory holds your Lit components. If you add a component here, to hook it up to SSR, add it to the `src/ssr.ts` file and make sure to add it to `tsEntrypoints` in `esbuild.config.mjs` to make sure it's included in the bundler. If you don't want to SSR a component, you can add it to the appropriate file in `src/pages/<your page name>.ts`;

#### `src/hydration-entrypoints`

This holds files that include 'import' notation to import the components used in server side rendering (SSR) and require hydration. The pages with .ts extension match the structure and name as those files in the `site` folder.

For example, if you have a site\index.md file and you want to include a component named 'my-counter' in that file and possibly use SSR, then you would have a file in this folder named 'index.ts' (i.e. src/hydration-entrypoints/index.ts) with the following import:

```
import '../components/my-counter.js';
```

#### `src/pages` directory

This is a place to put logic for individual pages. If you want to add a component to a page, you can import it here and just use it in your templates. These files are automatically added to the build. When referencing the .ts components in this folder, you must use the javascript location defined in the eleventy.cjs file, which is set to '/js/*/[page name]'.

#### `src/ssr.ts` file

This loads the files onto the server for Server-side rendering. 11ty will then server-side render any components on the page.

#### `esbuild.config.mjs` file

This creates your bundles. It uses esbuild to bundle your components and your pages. You can add more entrypoints here if you want to add more entrypoints for hydration. The output of this will then be copied over to 11ty's appropriate output directory into the `/js` directory. e.g. dev mode will output `_dev/js/` and prod mode will output `_prod/js/`.

#### `eleventy.cjs` file

This is the configuration file for 11ty. Please consult the docs.

#### `eleventy-helpers` directory

This directory includes some files that modularize and organize the 11ty config file so that it does not become a giant mess of a file.

11ty-lit

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README