{"id":18645858,"url":"https://github.com/interledger/docs-design-system","last_synced_at":"2026-01-19T13:00:37.828Z","repository":{"id":198402262,"uuid":"695070280","full_name":"interledger/docs-design-system","owner":"interledger","description":"🏗️ npm package for all shared visual styles and components used in our Starlight docs sites","archived":false,"fork":false,"pushed_at":"2026-01-12T13:33:46.000Z","size":164,"stargazers_count":0,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-12T20:06:04.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/interledger.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-09-22T09:37:31.000Z","updated_at":"2025-12-03T07:29:33.000Z","dependencies_parsed_at":"2023-10-11T15:14:24.822Z","dependency_job_id":"c5e8c815-0489-49c2-92af-673d32cf007c","html_url":"https://github.com/interledger/docs-design-system","commit_stats":null,"previous_names":["interledger/docs-design-system"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/interledger/docs-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fdocs-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fdocs-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fdocs-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fdocs-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/interledger","download_url":"https://codeload.github.com/interledger/docs-design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledger%2Fdocs-design-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28568833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T12:50:50.164Z","status":"ssl_error","status_checked_at":"2026-01-19T12:50:42.704Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-07T06:17:28.769Z","updated_at":"2026-01-19T13:00:37.819Z","avatar_url":"https://github.com/interledger.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interledger documentation design system\n\nInterledger uses Starlight (powered by Astro) for all its documentation sites. We have 2 visual themes for now, teal and orange. These themes are built on top of Starlight's defaults and overrides some of the out-of-the-box styling. They are just CSS files, so use them with the path to `node_modules`. Unfortunately, we did not have enough braincells to figure out how to make it prettier than that. To use them in the `astro.config.mjs`:\n\n```mjs\nexport default defineConfig({\n  integrations: [\n    starlight({\n      customCss: [\n        './node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',\n        './node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css'\n      ]\n    })\n  ]\n})\n```\n\nIf you are using them in an Astro layout file, then the import would look like this for the build to not fail:\n\n```\nimport '/node_modules/@interledger/docs-design-system/src/styles/teal-theme.css';\n```\n\nWe also have a number of documentation-specific helper components that can be imported and used where necessary. For these shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:\n\n```jsx\nimport { CodeBlock, Disclosure } from '@interledger/docs-design-system'\n```\n\nFor more information about importing things in Javascript, please refer to [import on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).\n\nThe available shared components are documented at our [documentation style guide](https://interledger.net).\n\n## Contributing\n\nAs this is a shared library, it is a dependency for other projects, specifically all Interledger documentation websites. A good way to check who is using this library is via GitHub search: https://github.com/search?q=%22%40interledger%2Fdocs-design-system%22%3A+path%3Apackage.json\u0026type=code.\n\nOur theme does override a number of Starlight defaults, therefore it is inevitable that if the Starlight internals are modified as they continue to release new features, we will have to make the corresponding updates to this library as well, to make sure nothing breaks. The [documentation style guide](https://github.com/interledger/docs-styleguide) is a good target to determine if the proposed changes you want to make to the library work correctly or not.\n\nThis documentation design system is built to target the latest version of [Starlight](https://github.com/withastro/starlight/releases) as soon as it is released. If you want to verify which version of Starlight our design system is aligned with, you can check the starlight dependency in the [package.json](https://github.com/interledger/docs-styleguide/blob/main/package.json) file for the [documentation style guide](https://github.com/interledger/docs-styleguide).\n\nThe suggested workflow is as follows:\n\n1. Clone both the documentation style guide and this library\n\n```bash\ngit clone https://github.com/interledger/docs-design-system.git\n```\n\n```bash\ngit clone https://github.com/interledger/docs-styleguide.git\n```\n\n2. Make the documentation style guide read from the local version of the docs-design-system library by modifying the package.json. This will depend on the file structure of your local machine but it would look something like this:\n\n```json\n\"dependencies\": {\n    \"@interledger/docs-design-system\": \"../docs-design-system\",\n}\n```\n\n3. After you're done with your changes and have tested that all is well, feel free to make a pull request and it will get reviewed, and hopefully merged into the source code. The version will get bumped and all the sites will have to make an update to their dependencies as well.\n\n## Local development\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command          | Action                             |\n| :--------------- | :--------------------------------- |\n| `npm install`    | Installs dependencies              |\n| `npm run format` | Format code and fix linting issues |\n| `npm run lint`   | Check code formatting and linting  |\n\nYou can substitute the `npm` commands with whatever package manager your workflow uses.\n\n### 🔍 Code Formatting\n\nThis project uses [ESLint](https://eslint.org/) for code linting and [Prettier](https://prettier.io/) for code formatting. Before submitting a pull request, please ensure your code is properly formatted:\n\n1. **Fix issues**: Run `npm run format` to automatically format code and fix linting issues.\n2. **Check before pushing**: Run `npm run lint` to verify everything passes (CI will also run this).\n\nESLint is configured to work with TypeScript and Astro files. The configuration extends recommended rules from ESLint, TypeScript ESLint, and Astro ESLint plugins, and integrates with Prettier to avoid conflicts.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledger%2Fdocs-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finterledger%2Fdocs-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledger%2Fdocs-design-system/lists"}