{"id":18447784,"url":"https://github.com/stoplightio/elements-starter-gatsby","last_synced_at":"2025-04-08T00:32:27.020Z","repository":{"id":39969199,"uuid":"291124998","full_name":"stoplightio/elements-starter-gatsby","owner":"stoplightio","description":"Gatsby starter for Stoplight Elements components","archived":true,"fork":false,"pushed_at":"2023-10-28T04:48:37.000Z","size":12144,"stargazers_count":3,"open_issues_count":6,"forks_count":1,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-05T22:43:21.923Z","etag":null,"topics":["gatsby","stoplight-elements"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stoplightio.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":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-08-28T19:02:04.000Z","updated_at":"2024-09-04T13:23:52.000Z","dependencies_parsed_at":"2022-08-25T09:01:10.783Z","dependency_job_id":null,"html_url":"https://github.com/stoplightio/elements-starter-gatsby","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/stoplightio%2Felements-starter-gatsby","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements-starter-gatsby/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements-starter-gatsby/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stoplightio%2Felements-starter-gatsby/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stoplightio","download_url":"https://codeload.github.com/stoplightio/elements-starter-gatsby/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755460,"owners_count":20990618,"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":["gatsby","stoplight-elements"],"created_at":"2024-11-06T07:14:26.058Z","updated_at":"2025-04-08T00:32:22.006Z","avatar_url":"https://github.com/stoplightio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stoplight Elements - Gatsby Example\n\nStoplight Elements provides components that can be used in any React application.\nThis example project demonstrates usage with Gatsby.\n\n## Table Of Contents\n\n* [Try the example locally](#try-the-example)\n* [Set up Elements in your own Gatsby app](#elements-in-your-gatsby-app)\n  * [Step 1 - Install Elements](#step-1---install-elements)\n  * [Step 2 - Include the styles](#step-2---include-the-styles)\n  * [Ready to go](#ready-to-go)\n\n## Try the example\n\nClone the [@stoplight/elements-starter-gatsby](https://github.com/stoplightio/elements-starter-gatsby) and install dependencies.\n\n```bash\ngit clone https://github.com/stoplightio/elements-starter-gatsby.git\n\ncd elements-starter-gatsby\n\nyarn\n```\n\nAlternatively install it as a Gatsby starter using `gatsby-cli`.\n\n```bash\nyarn global add gatsby-cli\n\ngatsby new elements-starter-gatsby https://github.com/stoplightio/elements-starter-gatsby\n\ncd elements-starter-gatsby\n\nyarn\n```\n\nIf the above was successful, you can launch the example project using `yarn start`.\n\nNow if you open your browser and navigate to `http://localhost:8000/` as instructed, you will see a page with two links to Stoplight Elements components.\n\n![example](https://user-images.githubusercontent.com/14196079/91562747-00453080-e93e-11ea-9e6a-49e6647c594c.png)\n\n## Elements in your own Gatsby app\n\n### Step 1 - Install Elements\n\nInstall Elements and it's peer dependencies:\n\n```bash\nyarn add @stoplight/elements @stoplight/prism-http mobx\n```\n\n### Step 2 - Include the styles\n\nYou can import the CSS file directly into your component files\n\n```jsx\nimport '@stoplight/elements/styles/elements.min.css';\n```\n\nor into your CSS\n\n```css\n@import '~@stoplight/elements/styles/elements.min.css';\n```\n\n### Ready to go\n\nCongratulations! At this point, you are ready to use *Stoplight Elements* in your Gatsby application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstoplightio%2Felements-starter-gatsby","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstoplightio%2Felements-starter-gatsby","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstoplightio%2Felements-starter-gatsby/lists"}