{"id":19525478,"url":"https://github.com/tmol4/star4","last_synced_at":"2025-04-26T10:30:44.688Z","repository":{"id":259227366,"uuid":"873768516","full_name":"tmol4/star4","owner":"tmol4","description":"Our official design system and UI library","archived":false,"fork":false,"pushed_at":"2024-11-24T05:11:11.000Z","size":1994,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-04T11:24:51.362Z","etag":null,"topics":["design-system","frontend","jsx","material","material-design","material-you","material3","react","solidjs","ui","web"],"latest_commit_sha":null,"homepage":"https://tmol4.github.io/star4/","language":"TypeScript","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/tmol4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-10-16T17:26:08.000Z","updated_at":"2024-11-24T05:11:15.000Z","dependencies_parsed_at":"2024-10-23T17:38:13.812Z","dependency_job_id":"8cf361d2-3367-4cd4-87cb-422134ceba41","html_url":"https://github.com/tmol4/star4","commit_stats":null,"previous_names":["tmol4/star4"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmol4%2Fstar4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmol4%2Fstar4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmol4%2Fstar4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmol4%2Fstar4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmol4","download_url":"https://codeload.github.com/tmol4/star4/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250972505,"owners_count":21516370,"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":["design-system","frontend","jsx","material","material-design","material-you","material3","react","solidjs","ui","web"],"created_at":"2024-11-11T01:04:41.533Z","updated_at":"2025-04-26T10:30:44.674Z","avatar_url":"https://github.com/tmol4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**English** · [Русский](./README.ru.md)\n\n\u003e [!WARNING]\n\u003e Since the library is in active development, many developer-friendly and organizational features are not yet present, for example:\n\u003e - **Documentation website**:\\\n\u003e *It takes great time to build a docs website for a multi-framework library, you know?*\n\u003e - **Documentation comments**:\\\n\u003e *Unstable APIs may change frequently, so we would have to rewrite TypeDoc comments without a break.*\n\u003e - **Examples**:\\\n\u003e *Projects in the [examples](examples) directory are actively used during development, but they do not yet serve as actual example projects.*\n\u003e - **Developer workflow**\n\n\u003cdiv\u003e\n  \u003cimg src=\".github/images/sparkles.svg\" align=\"left\" width=\"64\" height=\"64\" /\u003e\n  \u003ch3\u003estar4\u003c/h3\u003e\n  \u003cp\u003eOur official design system and UI library\u003c/p\u003e\n\u003c/div\u003e\n\n[~~Documentation~~](https://tmol4.github.io/star4) · [Report a bug](https://github.com/tmol4/star4/issues) · [Request a feature](https://github.com/tmol4/star4/issues)\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3\u003eTable of contents\u003c/h3\u003e\u003c/summary\u003e\n\n- [Features](#features)\n- [Usage](#usage)\n  - [Installation](#installation)\n  - [Theming](#theming)\n    - [Creating a theme](#creating-a-theme)\n    - [Applying styles](#applying-styles)\n    - [Color schemes](#color-schemes)\n    - [Fonts](#fonts)\n  - [Components](#components)\n    - [Identifiable components (React only)](#identifiable-components-react-only)\n- [Acknowledgements](#acknowledgements)\n- [Contributing](#contributing)\n  - [Working group](#working-group)\n- [License](#license)\n\n\u003c/details\u003e\n\n\n## Features\n\n- 🧰 Multi-framework support\n  - [React](packages/react/README.md)\n  - [SolidJS](packages/react/README.md)\n- 🎨 Design based on [Material Design 3](https://m3.material.io \"m3.material.io\")\n- 🧱 Primitive and complex components\n- 🧩 Modular structure\n\n## Usage\n\n### Installation\n\n1. Add the Vanilla Extract plugin to the project\\\n\\\n  The library can be used in any project which supports [Vanilla Extract](https://vanilla-extract.style \"vanilla-extract.style\"). All available integrations can be found at [*\"Bundler Integration\"*](https://vanilla-extract.style/documentation/getting-started/#bundler-integration \"vanilla-extract.style/documentation/getting-started#bundler-integration\"). Here's a list of currently supported integrations *(at the moment of writing)*:\n   - [Astro](https://vanilla-extract.style/documentation/integrations/astro \"vanilla-extract.style/documentation/integrations/astro\") (via `@vanilla-extract/vite-plugin`)\n   - [esbuild](https://vanilla-extract.style/documentation/integrations/esbuild \"vanilla-extract.style/documentation/integrations/esbuild\") (via `@vanilla-extract/esbuild-plugin`)\n   - [Gatsby](https://vanilla-extract.style/documentation/integrations/gatsby \"vanilla-extract.style/documentation/integrations/gatsby\") (via `gatsby-plugin-vanilla-extract`)\n   - [Next.js](https://vanilla-extract.style/documentation/integrations/next \"vanilla-extract.style/documentation/integrations/next\") (via `@vanilla-extract/next-plugin`)\n   - [Parcel](https://vanilla-extract.style/documentation/integrations/parcel \"vanilla-extract.style/documentation/integrations/parcel\") (via `@vanilla-extract/parcel-transformer`)\n   - [Remix](https://vanilla-extract.style/documentation/integrations/remix \"vanilla-extract.style/documentation/integrations/remix\") (via `@vanilla-extract/vite-plugin`)\n   - [Rollup](https://vanilla-extract.style/documentation/integrations/rollup \"vanilla-extract.style/documentation/integrations/rollup\") (via `@vanilla-extract/rollup-plugin`)\n   - [Vite](https://vanilla-extract.style/documentation/integrations/vite \"vanilla-extract.style/documentation/integrations/vite\") (via `@vanilla-extract/vite-plugin`)\n   - [Webpack](https://vanilla-extract.style/documentation/integrations/webpack \"vanilla-extract.style/documentation/integrations/webpack\") (via `@vanilla-extract/webpack-plugin`)\n1. Add the Vanilla Extract core library ([`@vanilla-extract/css`](https://npmjs.com/package/@vanilla-extract/css)):\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://npmjs.com\"\u003enpm\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      npm install @vanilla-extract/css\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://pnpm.io\"\u003epnpm\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      pnpm add @vanilla-extract/css\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://yarnpkg.com\"\u003eYarn\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      yarn add @vanilla-extract/css\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://bun.sh\"\u003eBun\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      bun add @vanilla-extract/css\n      ```\n    \u003c/details\u003e\n1. Install star4's Vanilla Extract utility package ([`@star4/vanilla-extract`](https://npmjs.com/package/@star4/vanilla-extract)):\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://npmjs.com\"\u003enpm\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      npm install @star4/vanilla-extract\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://pnpm.io\"\u003epnpm\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      pnpm add @star4/vanilla-extract\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://yarnpkg.com\"\u003eYarn\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      yarn add @star4/vanilla-extract\n      ```\n    \u003c/details\u003e\n   \u003cdetails\u003e\n      \u003csummary\u003e\u003ca href=\"https://bun.sh\"\u003eBun\u003c/a\u003e\u003c/summary\u003e\n\n      ```sh\n      bun add @star4/vanilla-extract\n      ```\n    \u003c/details\u003e\n1. Install star4's framework package\n     - React ([`@star4/react`](https://npmjs.com/package/@star4/react)):\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://npmjs.com\"\u003enpm\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         npm install @star4/react\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://pnpm.io\"\u003epnpm\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         pnpm add @star4/react\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://yarnpkg.com\"\u003eYarn\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         yarn add @star4/react\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://bun.sh\"\u003eBun\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         bun add @star4/react\n         ```\n       \u003c/details\u003e\n     - Solid ([`@star4/solid`](https://npmjs.com/package/@star4/solid)):\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://npmjs.com\"\u003enpm\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         npm install @star4/solid\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://pnpm.io\"\u003epnpm\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         pnpm add @star4/solid\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://yarnpkg.com\"\u003eYarn\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         yarn add @star4/solid\n         ```\n       \u003c/details\u003e\n       \u003cdetails\u003e\n         \u003csummary\u003e\u003ca href=\"https://bun.sh\"\u003eBun\u003c/a\u003e\u003c/summary\u003e\n\n         ```sh\n         bun add @star4/solid\n         ```\n       \u003c/details\u003e\n\n### Theming\n\nIn order to start using star4, you must first setup a theme. This can be done using the [`@star4/vanilla-extract`](https://npmjs.com/package/@star4/vanilla-extract) package.\n\n#### Creating a theme\n\nA theme object can be created in an ordinary (non `.css.*`) file using the `createTheme` helper function:\n```ts\nimport { createTheme } from \"@star4/vanilla-extract\";\n\nexport const { contract, theme } = createTheme({/* ... */});\n```\n\nThis function accepts an *options* argument, which is an object specifying theme configuration. Some of its fields are required. Here's a minimalist example:\n```ts\nimport { createTheme } from \"@star4/vanilla-extract\";\n\nexport const { contract, theme } = createTheme({\n  // Use a static color scheme\n  color: {},\n  // Specify font families for different font styles\n  typeface: {\n    plain: \"system-ui\",\n    brand: \"sans-serif\",\n  },\n  // Specify the font family used for Material Symbols icons\n  component: {\n    materialSymbol: {\n      font: \"Material Symbols Outlined\",\n    },\n  },\n});\n```\n\n#### Applying styles\n\nThe `createTheme` helper returns an object containing two functions: `contract` and `theme`.\n\nFirst, create a theme contract using the `contract` helper:\n```ts\n// THIS EXAMPLES ASSUMES:\n// - a star4 theme was created\n// - `contract` was imported into this file\n\nexport const THEME = contract();\n```\n\nThe `theme` function returns an object filled with CSS values, ready to be applied using ([`@vanilla-extract/css`](https://npmjs.com/package/@vanilla-extract/css)) inside of a `.css.*` file. You can use any Vanilla Extract API, depending on your needs.\n\nExample creating a theme which follows system preference, using [`globalStyle`](https://vanilla-extract.style/documentation/global-api/global-style \"vanilla-extract.style/documentation/global-api/global-style\") and [`assignVars`](https://vanilla-extract.style/documentation/api/assign-vars \"vanilla-extract.style/documentation/api/assign-vars\") APIs:\n```ts\n// THIS EXAMPLES ASSUMES:\n// - a star4 theme was created\n// - a theme contract named `THEME` was created\n// - `theme` helper and `THEME` were imported into this file\n\nimport { assignVars, globalStyle } from \"@vanilla-extract/css\";\n\nconst LIGHT_THEME = theme(\"light\");\nconst DARK_THEME = theme(\"dark\");\n\nglobalStyle(\n  \":root, ::backdrop\",\n  {\n    colorScheme: \"light dark\",\n    \"@media\": {\n      \"(prefers-color-scheme: light)\": {\n        vars: assignVars(THEME, LIGHT_THEME),\n      },\n      \"(prefers-color-scheme: dark)\": {\n        vars: assignVars(THEME, DARK_THEME),\n      },\n    },\n  },\n);\n```\nHere is a more complicated example, allowing overriding the current theme mode using a data attribute:\n```ts\n// THIS EXAMPLES ASSUMES:\n// - a star4 theme was created\n// - a theme contract named `THEME` was created\n// - `theme` helper and `THEME` were imported into this file\n\nimport { assignVars, globalStyle } from \"@vanilla-extract/css\";\n\n// A helper function for creating attribute selectors\nconst createThemeSelector = (\n  themes: string | string[],\n  not: boolean = false,\n) =\u003e {\n  const values = typeof themes === \"string\" ? [themes] : themes;\n  const attributes = values.map(\n    theme =\u003e `[data-theme=\"${theme}\"]`,\n  );\n  let is = `:is(${attributes.join(\",\")})`;\n  if(not) is = `:not(${is})`;\n  return `:root${is}, ${is} ::backdrop`;\n}\n\n// Store filled theme objects for reuse\nconst LIGHT_THEME = theme(\"light\");\nconst DARK_THEME = theme(\"dark\");\n\n// Possible data-theme attribute values\nconst DATA_THEME_LIGHT = \"light\";\nconst DATA_THEME_DARK = \"dark\";\n\n\n// Follow system theme mode if no\n// [data-theme=\"light\"] or [data-theme=\"dark\"]\n// attribute was found\nglobalStyle(\n  createThemeSelector([DATA_THEME_LIGHT, DATA_THEME_DARK], true),\n  {\n    colorScheme: \"light dark\",\n    \"@media\": {\n      \"(prefers-color-scheme: light)\": {\n        vars: assignVars(THEME, LIGHT_THEME),\n      },\n      \"(prefers-color-scheme: dark)\": {\n        vars: assignVars(THEME, DARK_THEME),\n      },\n    },\n  },\n);\n\n// If \u003chtml\u003e has a [data-theme=\"light\"]\n// attribute, apply the light theme\nglobalStyle(\n  createThemeSelector(DATA_THEME_LIGHT),\n  {\n    colorScheme: \"light\",\n    vars: assignVars(THEME, LIGHT_THEME),\n  }\n);\n\n// If \u003chtml\u003e has a [data-theme=\"dark\"]\n// attribute, apply the dark theme\nglobalStyle(\n  createThemeSelector(DATA_THEME_DARK),\n  {\n    colorScheme: \"dark\",\n    vars: assignVars(THEME, DARK_THEME),\n  }\n);\n```\n\n#### Color schemes\n\nstar4 uses the [Material You color system](https://m3.material.io/styles/color/system \"m3.material.io/styles/color/system\"), which provides two options for creating color schemes: [**static**](https://m3.material.io/styles/color/static/baseline \"m3.material.io/styles/color/static/baseline\") and [**dynamic**](https://m3.material.io/styles/color/dynamic \"m3.material.io/styles/color/dynamic\"). See [*Choosing a scheme*](https://m3.material.io/styles/color/choosing-a-scheme \"m3.material.io/styles/color/choosing-a-scheme\") for advice.\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eStatic color scheme\u003c/b\u003e\u003c/summary\u003e\n  \u003cbr\u003e\n  \u003cp\u003eLight\u003c/p\u003e\n  \u003cimg src=\"./.github/images/color-scheme-static-light.png\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003cp\u003eDark\u003c/p\u003e\n  \u003cimg src=\"./.github/images/color-scheme-static-dark.png\"\u003e\n\u003c/details\u003e\n\n\u003e [!WARNING]\n\u003e The behaviour of the `color` property might change in the future\n\nThe `color` property is responsible for color scheme configuration. Settings it to an empty object `{}` will assert a static scheme, while creating a dynamic scheme requires specifying a few properties.\n\nExample of a static color scheme:\n```ts\nexport const { contract, theme } = createTheme({\n  // Empty object - using a static color scheme\n  color: {},\n  /* ... other fields... */\n});\n```\nExample of a dynamic color scheme:\n```ts\nexport const { contract, theme } = createTheme({\n  color: {\n    // A total of 9 variants are available\n    variant: \"tonalSpot\"\n    // Can be a hex, rgb CSS color, or an Hct instance\n    sourceColor: \"#00ff00\",\n    // Defaults to 0. Allows changing color scheme contrast\n    contrastLevel: 0,\n  },\n  /* ... other fields... */\n});\n```\n\n#### Fonts\n\nFont family names containing spaces must be quoted in CSS.\n\nHere is a helper function for merging CSS font names:\n```ts\ntype FontFamily = (string | FontFamily)[];\n\nconst fontFamily = (...args: FontFamily): string =\u003e {\n  return args\n    .map(\n      value =\u003e typeof value === \"string\"\n        ? value.includes(\" \")\n          ? `\"${value}\"`\n          : value\n        : fontFamily(...value),\n    )\n    .join(\", \");\n}\n```\n\nIf using variable fonts from [FontSource](https://fontsource.org \"fontsource.org\"), their font family names have ` Variable` appended to them, e.g. `Open Sans Variable`, so here is a helper for FontSource fonts:\n```ts\n// Use system font if available,\n// otherwise load the FontSource font\nconst fontSource = (family: string) =\u003e {\n  return [`${family}`, `${family} Variable`];\n};\n```\nHere's an example showcasing both helpers in action:\n\n```ts\n// Gets transformed to:\n// \"Roboto Flex\", \"Roboto Flex Variable\", \"Open Sans\", \"Open Sans Variable\", Roboto, system-ui, Arial, sans-serif\nconst TYPEFACE_PLAIN = fontFamily(\n  fontSource(\"Roboto Flex\"),\n  fontSource(\"Open Sans\"),\n  \"Roboto\",\n  \"system-ui\",\n  \"Arial\",\n  \"sans-serif\",\n);\n\n// Gets transformed to:\n// Raleway, \"Raleway Variable\", Manrope, \"Manrope Variable\", sans-serif\nconst TYPEFACE_BRAND = fontFamily(\n  fontSource(\"Raleway\"),\n  fontSource(\"Manrope\"),\n  \"sans-serif\",\n);\nexport const { contract, theme } = createTheme({\n  typeface: {\n    plain: TYPEFACE_PLAIN,\n    brand: TYPEFACE_BRAND,\n  },\n  /* other fields */\n});\n\n```\n\n### Components\n\nstar4 framework packages export all available components, most of them contain documentation comments and code samples, so documentation for each component will not be provided here.\n\n#### Identifiable components (React only)\n\nThe [`@star4/react`](https://npmjs.com/package/@star4/react) package provides an additional helper with each component: `.is()`. This is a function which can be used to identify if a React element is a specific element. It is useful for filtering out children elements:\n```tsx\nimport { Children, type ReactNode } from \"react\";\nimport { Button } from \"@star4/react\";\n\n// This component only displays buttons\n// Warns when other elements are passed as children\nexport function OnlyButtons({ children }: { children: ReactNode }) {\n  const buttons = Children.toArray(children)\n    .filter(node =\u003e {\n      const is = Button.is(node);\n      if(!is) console.warn(\n        \"Invalid JSX Element passed to token resolver:\",\n        node,\n      );\n      return is;\n    });\n\n  return buttons;\n}\n```\n\n\u003e [!WARNING]\n\u003e Name and return value of the `createIdentifiableElement` function might change in the future.\n\nMaking your own components identifiable is also possible via the `createIdentifiableElement` helper. We advice you to follow the naming convention shown in the example:\n```tsx\nimport { createIdentifiableElement } from \"@star4/react\";\n\n// forwardRef may also be used instead of direct assignment\nconst ExampleComponent = function Example() {\n\n}\n\nexport const Example = Object.assign(\n  // memo(ExampleComponent) may also be used for memoization\n  ExampleComponent,\n  // IS_EXAMPLE is the description of\n  // a Symbol created to identify the element\n  createIdentifiableElement(\"IS_EXAMPLE\"),\n);\n\n// Use the component\n\u003cExample /\u003e\n\n// Identify the element\nExample.is(something)\n```\n\n## Acknowledgements\n\nstar4 was only possible because of the following amazing projects:\n\n- [**Solid Primitives**](https://primitives.solidjs.community \"primitives.solidjs.community\") - [GitHub](https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element)\\\nThe swiss army knife for SolidJS.\n\u003c!-- ###### GitHub: [solidjs-community/solid-primitives](https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element) --\u003e\n\n- [**Material Web**](https://material-web.dev \"material-web.dev\") - [GitHub](https://github.com/solidjs-community/solid-primitives/tree/main/packages/active-element)\\\nOfficial Material Design 3 web components library.\n\n- [**usehooks-ts**](https://usehooks-ts.com \"usehooks-ts.com\") - [GitHub](https://github.com/juliencrn/usehooks-ts)\\\nAwesome React hooks library.\n\n## Contributing\n\nSee [**CONTRIBUTING.md**](CONTRIBUTING.md).\n\n### Working group\n\n- [@deminearchiver](https://github.com/deminearchiver)\n\n## License\n\nThis project is licensed under the [**MIT License**](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmol4%2Fstar4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmol4%2Fstar4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmol4%2Fstar4/lists"}