{"id":14990565,"url":"https://github.com/jahilldev/11tyby","last_synced_at":"2025-08-12T18:45:03.125Z","repository":{"id":44683544,"uuid":"298332542","full_name":"jahilldev/11tyby","owner":"jahilldev","description":"Simple 11ty setup using TypeScript, SASS, Preact with partial hydration, and other useful things. Aims to provide the DX of Gatsby, but using 11ty! ","archived":false,"fork":false,"pushed_at":"2023-02-03T11:05:31.000Z","size":419,"stargazers_count":58,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T02:24:59.928Z","etag":null,"topics":["11ty","app","blog","boilerplate","css","css-modules","eleventy","hydrated-components","hydration","jsx","markdown","performance","preact","sass","starter","static-site","static-site-generator","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jahilldev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-24T16:18:58.000Z","updated_at":"2024-12-24T19:52:38.000Z","dependencies_parsed_at":"2024-09-15T18:22:37.288Z","dependency_job_id":null,"html_url":"https://github.com/jahilldev/11tyby","commit_stats":{"total_commits":120,"total_committers":3,"mean_commits":40.0,"dds":0.4833333333333333,"last_synced_commit":"801f15f272c04f27c43360d619a2579db34b4b90"},"previous_names":[],"tags_count":18,"template":true,"template_full_name":null,"purl":"pkg:github/jahilldev/11tyby","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2F11tyby","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2F11tyby/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2F11tyby/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2F11tyby/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jahilldev","download_url":"https://codeload.github.com/jahilldev/11tyby/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jahilldev%2F11tyby/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270116964,"owners_count":24530281,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","app","blog","boilerplate","css","css-modules","eleventy","hydrated-components","hydration","jsx","markdown","performance","preact","sass","starter","static-site","static-site-generator","typescript","webpack"],"created_at":"2024-09-24T14:20:23.210Z","updated_at":"2025-08-12T18:45:03.046Z","avatar_url":"https://github.com/jahilldev.png","language":"JavaScript","readme":"# 11tyby\n\n\u003e An organised 11ty boilerplate to get you up and running fast. Features TypeScript, native JSX support via Preact, CSS Modules with SASS, a well defined webpack config for great DX, and all pre-optimised for performance.\n\nDemo: https://11tyby.netlify.app/\n\n## Why\n\nGetting setup with the necessary tooling to handle TypeScript, JSX, dynamic imports, SASS etc is time consuming. This project also has partial hydration to reduce the amount of code shipped to your users.\n\n## Structure\n\nThe project is structured via the module pattern, files are grouped via feature, e.g `./src/modules/home`. This allows you to better future proof your application as it grows, and localise code where it's needed. Your page `*.11ty.tsx` files reside within their relevant feature folder, and export a `permalink` property for [you to define their url structure](https://www.11ty.dev/docs/permalinks/), e.g:\n\n```javascript\nmodule.exports = {\n  render: Page,\n  data: () =\u003e ({\n    permalink: '/my-feature/index.html',\n  }),\n};\n```\n\n## Styling\n\n11tyby comes pre-setup with support for CSS Modules and SASS. You have two options to import styles, globally or localised. To convert a SASS or CSS file into a CSS Module, you'll need to apply a `.module` suffix to your file, e.g `login.module.css`. You can then import this directly into a component:\n\n```jsx\nimport style from './login.module.scss';\n\n/*[...]*/\n\nfunction Login() {\n  return \u003cform class={style.form}\u003e/*[...]*/\u003c/form\u003e;\n}\n```\n\nTo import styles globally, just add a non return import statement to the file you wish to load them from, e.g:\n\n```jsx\nimport './global.css';\n\n/*[...]*/\n```\n\nTo apply the generated style sheet to a page, you'll need to add a `cssPath` property within the data object exported from your `*.11ty.tsx` files, e.g:\n\n```jsx\nfunction Page() {\n  return \u003cmain class={style.wrapper}\u003e{/*[...]*/}\u003c/main\u003e;\n}\n\n/*[...]*/\n\nmodule.exports = {\n  render: Page,\n  data: () =\u003e ({\n    permalink: 'index.html',\n    cssPath: 'login/login.11ty.css', // \u003c----\n  }),\n};\n```\n\nThe path will match the respective module folder, and the name will mirror that of your `*.11ty.tsx` file name but with a CSS extension.\n\n## Hydration\n\n11tyby [includes a package](https://github.com/jahilldev/preactement) dedicated to applying [partial hydration](https://www.jameshill.dev/articles/partial-hydration/). This works as an HOC, wrapping the component you wish to hydrate on the client. You can apply this as follows:\n\n```jsx\nimport { define } from 'preactement';\n\n/*[...]*/\n\nfunction MainForm() {\n  return \u003cform\u003e/*[...]*/\u003c/form\u003e;\n}\n\n/*[...]*/\n\nconst Form = define('main-form', () =\u003e MainForm);\n\n/*[...]*/\n\nexport { Form };\n```\n\nIt's recommended that you create components within their own folder, and apply this function in an `index.ts` file within. That way you can seperate any \"transforms\" the component might need at runtime with the component itself, you can [see an example here](https://github.com/jahilldev/11tyby/blob/master/src/modules/home/components/form/index.ts).\n\nOnce you have a hydrated component, you'll need to import it into an \"Entry\" file. These are suffixed with `.entry`, and must be placed within their respective module folder, e.g `./src/home/home.entry.ts`.\n\nThe entry file needs to import your hydrated components, e.g:\n\n```javascript\nimport '@/modules/home/components/form';\n```\n\nThis file is then referenced within your `*.11ty.tsx` file by passing it into the `data` object exported from your component, e.g:\n\n```jsx\n/*[...]*/\nfunction Page() {\n  return \u003cmain\u003e{/*[...]*/}\u003c/main\u003e;\n}\n\n/*[...]*/\n\nmodule.exports = {\n  render: Page,\n  data: () =\u003e ({\n    permalink: 'index.html',\n    jsPath: 'home/home.entry.js', // \u003c----\n  }),\n};\n```\n\nFor a working example, [take a look at the `home` module here](https://github.com/jahilldev/11tyby/blob/master/src/modules/home/home.11ty.tsx#L28).\n\n## Data\n\nAll official 11ty methods to gather data from an API or otherwise, will work here. There are many great examples of how to do this in the official 11ty documentation, including the use of GraphQL: https://www.11ty.dev/docs/data-js/.\n\nTo define _global_ data, add either JSON, JS or TypeScript files to the `./src/data` folder. These will then be parsed by 11ty and added via the [data cascade](https://www.11ty.dev/docs/data-cascade/). You can access these directly in your `.11ty.ts*` files.\n\nFor example, if you were to add a `global.ts` file to `./src/data`, you would access this via a `global` property in your pages argument object:\n\n```tsx\ninterface IProps {\n  global: {\n    title: string;\n  };\n}\n\n/*[...]*/\n\nfunction Page({ global }: IProps) {\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003e{global.title}\u003c/h1\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\nTo add local data, e.g data specific to a module, add a file suffixed with `.data` within the relevant module folder. This will then be accessible in exactly the same way as shown above, but only for that page. For example, if you added `home.data.ts` to `./src/modules/home`, your home page `11ty.tsx` file would have access to the values held within that data file.\n\n## Installation\n\n### 1. Clone or download the repository\n\n```shell\ngit clone git@github.com:jahilldev/11tyby.git\n```\n\n### 2. Install the project dependencies\n\n```shell\nyarn\n```\n\n## Development\n\n```shell\nyarn start\n```\n\n## Build production\n\n```shell\nyarn build\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahilldev%2F11tyby","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjahilldev%2F11tyby","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjahilldev%2F11tyby/lists"}