{"id":20128183,"url":"https://github.com/thenewdynamic/hugo-module-tnd-styles","last_synced_at":"2025-08-28T16:49:25.064Z","repository":{"id":52869683,"uuid":"288247727","full_name":"theNewDynamic/hugo-module-tnd-styles","owner":"theNewDynamic","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-17T14:15:51.000Z","size":51,"stargazers_count":6,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-13T08:28:22.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/theNewDynamic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-17T17:47:35.000Z","updated_at":"2024-08-14T14:01:15.000Z","dependencies_parsed_at":"2022-08-23T02:50:47.571Z","dependency_job_id":null,"html_url":"https://github.com/theNewDynamic/hugo-module-tnd-styles","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":"theNewDynamic/hugo-module-tnd-template-repo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theNewDynamic%2Fhugo-module-tnd-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theNewDynamic","download_url":"https://codeload.github.com/theNewDynamic/hugo-module-tnd-styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241572354,"owners_count":19984258,"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-13T20:26:03.780Z","updated_at":"2025-03-02T21:23:50.975Z","avatar_url":"https://github.com/theNewDynamic.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TND Styles Hugo Module\n\nThis is a Hugo Module set to be used internally by TND but not ready for distribution outside of TND. Use at your own risk.\n\nThe module uses Hugo Pipes to process stylesheet files with SASS and/or Tailwindcss. It also make sure self hostesd fonts are loaded properly. \n\n## Requirements\n\nRequirements:\n- Go 1.14\n- Hugo 0.64.0\n\n\n## Installation\n\nIf not already, [init](https://gohugo.io/hugo-modules/use-modules/#initialize-a-new-module) your project as Hugo Module:\n\n```\n$: hugo mod init {repo_url}\n```\n\nConfigure your project's module to import this module:\n\n```yaml\n# config.yaml\nmodule:\n  imports:\n  - path: github.com/theNewDynamic/hugo-module-tnd-styles\n```\n\n\n\n## Configuration\n\n### Registered styles.\nWithout any configuration, the Module will consider `/assets/css/style.{css|scss}` a lone registered script of name `main`.\n\nIn order to add more registrered style, user should reference them (including main) under the `styles` key of the module configuration with the following keys:\n__name__: The name of the style. Will be use to call it through the `tnd-styles/tags` partial`\n__path__: The `path` relative to the project's assets directory.\n__inline__: If set to true, the style will be printed inside a `\u003cstyle\u003e` tag rather than as a `\u003clink\u003e` request.\n\n```yaml\ntnd_styles:\n  styles:\n    - name: main\n      path: css/styles/index.scss\n    - name: carousel\n      path: css/styles/carousel.css\n      inline: true\n```\n\n### Tailwind and PostCSS\n\nIn order to use Tailwind and/or PostCSS user should \n1. install the following npm deps:\n```\nnpm install postcss-cli postcss-import tailwindcss autoprefixer\n```\n2. Add a postcss.config.js file at the root of the repo: (tailwind config path should match user's)\n```js\nmodule.exports = {\n  plugins: [\n    require(\"postcss-import\")({\n      path: [\"assets/css\"],\n    }),\n    require(\"tailwindcss\")(\"./assets/css/config/tailwind.config.js\"),\n  ],\n};name: \n\n```\n\n### Fonts\n\nThe module automatically generate a \u003cstyle\u003e tag containing `@fontface` declarations for every declaration set through the module settings on the condition that at least one file matching the base filename set in the declaration exists.\n\n```yaml\ntnd_styles:\n  fonts:\n  - family: Open\n    file: fonts/files/open-sans-v17-latin-regular\n    weight: 400\n    style: normal\n  - family: Open\n    file: fonts/files/open-sans-v17-latin-italic\n    weight: 400\n    style: italic\n  - family: Open\n    file: fonts/files/open-sans-v17-latin-700\n    weight: 700\n  - family: Open\n    file: fonts/files/open-sans-v17-latin-700italic\n    weight: 700\n    style: italic\n```\n\nWith the presents of the following files:\n\n```\nassets/fonts\n└── files\n    ├── open-sans-v17-latin-300.eot\n    ├── open-sans-v17-latin-300.svg\n    ├── open-sans-v17-latin-300.ttf\n    ├── open-sans-v17-latin-300.woff\n    ├── open-sans-v17-latin-300.woff2\n    ├── open-sans-v17-latin-300italic.eot\n    ├── open-sans-v17-latin-300italic.svg\n    ├── open-sans-v17-latin-300italic.ttf\n    ├── open-sans-v17-latin-300italic.woff\n    ├── open-sans-v17-latin-300italic.woff2\n    ├── open-sans-v17-latin-700.eot\n    ├── open-sans-v17-latin-700.svg\n    ├── open-sans-v17-latin-700.ttf\n    ├── open-sans-v17-latin-700.woff\n    ├── open-sans-v17-latin-700.woff2\n    ├── open-sans-v17-latin-700italic.eot\n    ├── open-sans-v17-latin-700italic.svg\n    ├── open-sans-v17-latin-700italic.ttf\n    ├── open-sans-v17-latin-700italic.woff\n    ├── open-sans-v17-latin-700italic.woff2\n    ├── open-sans-v17-latin-italic.eot\n    ├── open-sans-v17-latin-italic.svg\n    ├── open-sans-v17-latin-italic.ttf\n    ├── open-sans-v17-latin-italic.woff\n    ├── open-sans-v17-latin-italic.woff2\n    ├── open-sans-v17-latin-regular.eot\n    ├── open-sans-v17-latin-regular.svg\n    ├── open-sans-v17-latin-regular.ttf\n    ├── open-sans-v17-latin-regular.woff\n    └── open-sans-v17-latin-regular.woff2\n```\n\nWill produce the following fontface declarations\n\n```css\n@font-face {\n  font-family: Open;\n  font-style: normal;\n  font-weight: 300;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-300.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-300.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-300.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-300.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-300.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: Open;\n  font-style: italic;\n  font-weight: 300;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-300italic.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-300italic.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-300italic.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-300italic.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-300italic.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: Open;\n  font-weight: 400;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-regular.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-regular.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-regular.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-regular.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-regular.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: Open;\n  font-style: italic;\n  font-weight: 400;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-italic.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-italic.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-italic.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-italic.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-italic.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: Open;\n  font-style: normal;\n  font-weight: 700;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-700.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-700.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-700.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-700.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-700.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: Open;\n  font-style: italic;\n  font-weight: 700;\n  src: local(\"Open\"),\n    url(\"/fonts/files/open-sans-v17-latin-700italic.eot\") format(\"embedded-opentype\"),\n    url(\"/fonts/files/open-sans-v17-latin-700italic.svg\") format(\"svg\"),\n    url(\"/fonts/files/open-sans-v17-latin-700italic.ttf\") format(\"truetype\"),\n    url(\"/fonts/files/open-sans-v17-latin-700italic.woff\") format(\"woff\"),\n    url(\"/fonts/files/open-sans-v17-latin-700italic.woff2\") format(\"woff2\");\n}\n```\n\nAccepted style settings are:\n\n- family\n- weight\n- style\n- display\n- variant\n- feature-settings\n- variation-settings\n\nThe module also prefetches every declared font files\n\n## Usage\n\n### tnd-styles/tags\n\nThe partial should be invoked in your `\u003chead\u003e` and will print all the necessary tags discussed above.\n\nIf user need to single out styles from the registered styles, context shoulce be a slice:\n\n```\n\u003chead\u003e\n[...]\n{{ partialCached \"tnd-styles/tags.html\" (slice \"main\" \"carousel\") \"main\" \"carousel\" }}\n\u003c/head\u003e\n```\n\nIf another type is passed as context, module will print all the registered styles. If no registered styles is found, module will print the main style.\n\n```\n\u003chead\u003e\n[...]\n{{ partialCached \"tnd-styles/tags.html\" \"tags\" }}\n\u003c/head\u003e\n```\n### tnd-styes/tags only for fonts\nIf user only needs to use the fonts:\n \n```\n\u003chead\u003e\n[...]\n{{ partialCached \"tnd-styles/tags.html\" (slice \"fonts\") \"fonts\" }}\n\u003c/head\u003e\n```\n  \n## theNewDynamic\n\nThis project is maintained and love by [thenewDynamic](https://www.thenewdynamic.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenewdynamic%2Fhugo-module-tnd-styles/lists"}