{"id":18694255,"url":"https://github.com/9elements/osfc-website-11ty","last_synced_at":"2025-11-08T11:30:42.468Z","repository":{"id":138513707,"uuid":"436180101","full_name":"9elements/osfc-website-11ty","owner":"9elements","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-11T08:05:04.000Z","size":7137,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-16T19:09:48.051Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9elements.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-12-08T08:58:08.000Z","updated_at":"2024-10-21T10:59:25.000Z","dependencies_parsed_at":"2024-03-05T13:42:32.138Z","dependency_job_id":"5d04e6b1-0815-4b5f-81d9-e14dbc3fc3d2","html_url":"https://github.com/9elements/osfc-website-11ty","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9elements%2Fosfc-website-11ty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9elements%2Fosfc-website-11ty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9elements%2Fosfc-website-11ty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9elements%2Fosfc-website-11ty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9elements","download_url":"https://codeload.github.com/9elements/osfc-website-11ty/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239552326,"owners_count":19657894,"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","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":[],"created_at":"2024-11-07T11:09:04.768Z","updated_at":"2025-11-08T11:30:42.410Z","avatar_url":"https://github.com/9elements.png","language":"JavaScript","readme":"# 11ty Boilerplate\n\n## Get started\n\nEnsure you have **[Node.js](https://nodejs.org/) version 20 or higher** installed. This is required to properly run the project.\n\nCreate an `.env` file in the root of the project and set the `LOCALE` variable, which is necessary for the date filter functionality. For example, you would add `LOCALE=en-US` to your `.env` file.\n\nWith your `.env` file configured, proceed with setting up the project:\n\n1. Install dependencies with `npm install`.\n2. Start the development server with `npm run start`.\n\n## Production build\n\nFor production builds, execute `npm run production`, which includes:\n\n- Minification of HTML.\n- CSS purge (all CSS is purged and then added inline).\n\nTo test the production build locally, run `npm run start-production`. This sets `NODE_ENV=production` and allows you to test HTML minification and CSS purging on your development server.\n\n\u003chr /\u003e\n\n## CSS and Styling\n\nFor CSS, we use [PostCSS](https://postcss.org/) with a custom configuration that includes Tailwind CSS and a few other plugins. All CSS files reside in the `src/assets/css` directory. The main CSS file is `global.css`, which orchestrates the inclusion of all our styles.\n\nPostCSS allows us to use modern CSS features like nesting and to write future-proof CSS. It also enables us to use a variety of plugins to optimize our styles. In the end, all CSS is transformed to vanilla CSS that is compatible with the browsers defined in our `browserslist` object in the `package.json` file.\n\n### Architecture\n\nInside the `blocks`, `layout` and `utilites` folders, you can place your globally available classes.\nAll those are automatically imported into `global.css` via `@import-glob`, as long they reside there and start with an underscore. The CSS you write is sorted via Cascade Layers. This way, utilities may easily override layout styles, but block/component styles have the last word.\n\n### Utility classes \u0026 design tokens\n\nFor generating basic utility classes, we utilize [Tailwind](https://tailwindcss.com/) in stripped down way. Basically, every utility is disabled, and we only enable the ones we need. By default, these are text \u0026 background colors, font family, font sizes, font weights, line height and stacks.\n\n### Creating new utilities\n\n\u003e **As an example, we will create a new utility class for letter-spacing.**\n\n#### 1. Create a new file in `assets/design-tokens` called `letter-spacing.js`.\n\n#### 2. Add your key-value pairs to the file.\n\nYou may also import and use js functions like `interpolate` or `calculateTypeScale` from `utopia-core`\n\n```js\nexport const letterSpacing = {\n  tight: \"-0.05em\",\n  normal: \"0\",\n  wide: \"0.05em\",\n};\n```\n\n#### 3. Import your object in `tailwind.config.js` and apply it to the `letterSpacing` key in the `theme` object.:\n\nNew design tokens need to be applied to Tailwind's reserved keys, you can look up the key in the [Tailwind CSS documentation](https://tailwindcss.com/docs/theme).\n\n```js\nimport { letterSpacing } from \"./src/design-tokens/letter-spacing.js\";\n\nexport default {\n  ...\n  theme: {\n    ...\n    letterSpacing: letterSpacing\n  }\n}\n```\n\n#### 4. Enable the utility in `tailwind.config.js` by adding it to the `corePlugins` array:\n\n```js\nexport default {\n  ...\n  corePlugins: [\n    ...\n    \"letterSpacing\"\n  ]\n}\n```\n\n#### 5. Generate CSS Custom Properties from your design tokens. (Optional, but recommended)\n\nThis way, you can also use your design tokens without using utility classes.\n\nIn the plugins array of `tailwind.config.js`, add the following to `groups` array the first `plugin` function:\n\n```js\nconst groups = [\n  ...,\n  { key: \"letterSpacing\", prefix: \"tracking\" }\n];\n```\n\nThe `key` property is the key of the Tailwind theme object, and the `prefix` property is any string you want to prefix your Custom Properties with:\n\n```css\n/* Output */\n:root {\n  --tracking-tight: -0.05em;\n  --tracking-normal: 0;\n  --tracking-wide: 0.05em;\n}\n```\n\n### Using media queries\n\nFor media queries, we use [custom media queries](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) that are defined in `src/assets/css/_media.css`.\n\n```css\n/* src/assets/css/_media.css */\n@custom-media --sm (width \u003e= 25em);\n@custom-media --md (width \u003e= 40em);\n```\n\nYou can use these media queries in your CSS like this:\n\n```css\n.my-class {\n  color: red;\n\n  @media (--sm) {\n    color: blue;\n  }\n}\n```\n\n### CSS Purge Safelist\n\nIn production mode, all CSS is purged to remove any unused classes. If however, there are specific classes that should not be purged during the production build process, like dynamically added classes, they can be added to a safelist. To manage this safelist, edit the file `utils/transforms/css-purge-inline.js`.\n\n\u003chr /\u003e\n\n## Client-side JavaScript\n\nAll JavaScript files reside in the `src/assets/scripts` directory.\nFor Client-side Javascript bundling, we use [esbuild](https://esbuild.github.io/). This allows us to install and use npm packages in our client-side JavaScript files:\n\n```js\n// Import functions from npm packages\nimport { myFunction } from \"my-npm-package\";\n\n// Import functions from other files\nimport { myOtherFunction } from \"./my-other-file.js\";\n\n// Import other files as whole\nimport \"other-directory/my-other-file.js\";\n```\n\nFor embedding JavaScript from the directory in your Nunjucks templates, use the following shortcode:\n\n```twig\n{% script src=\"my-file.js\" %}\n{% script src=\"other-directory/my-file.js\" %}\n```\n\n## Global utilites (filters, shortcodes, etc.)\n\nWe have a few global utilities like nunjucks filters, or global filters or shortcodes. They are all located in the `src/utils` directory.\n\nFor example, to use the `readableDate` filter in your Nunjucks templates:\n\n```twig\n{{ sampleDate | readableDate({ month: \"short\", day: \"numeric\" }) }}\n```\n\nEnsure that `LOCALE` is defined in your `.env` file to display dates in the correct language.\n\n\u003chr /\u003e\n\n## SVG Icons\n\nSVG icons should be placed in the `src/icons` directory. A single combined icon file will be generated from these icons, allowing you to reference them easily throughout your project. We have implemented a shortcode for embedding these SVG icons that requires the `icon` property. The `alt` text and `width` attributes are optional but recommended for accessibility and layout purposes.\n\nHere's how to use the shortcode to insert an SVG icon:\n\n```twig\n{% icon icon=\"github\", alt=\"Github\", width=\"2rem\" %}\n```\n\nThis shortcode will insert the GitHub icon with an alternative text \"Github\" and a width of 2 rem.\n\n\u003chr /\u003e\n\n## Webfonts\n\nFor webfonts, a different approach is taken:\n\n- Place font files in the `src/fonts` folder.\n- Include font-face declarations and preloading instructions in the `font.css` file, which is also located in the `src/fonts` folder.\n\nThis separation ensures that font styling is managed independently from other styles, optimizing loading times and maintainability.\n\n\u003chr /\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9elements%2Fosfc-website-11ty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9elements%2Fosfc-website-11ty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9elements%2Fosfc-website-11ty/lists"}