{"id":27734203,"url":"https://github.com/pixel-point/gatsby-starter","last_synced_at":"2025-10-30T05:17:51.049Z","repository":{"id":55145580,"uuid":"232637171","full_name":"pixel-point/gatsby-starter","owner":"pixel-point","description":"DEPRECATED for the sake of https://github.com/pixel-point/gatsby-tailwind-starter","archived":false,"fork":false,"pushed_at":"2023-07-07T23:10:35.000Z","size":3769,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-01T20:53:04.354Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/pixel-point.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}},"created_at":"2020-01-08T19:02:18.000Z","updated_at":"2024-12-20T03:30:19.000Z","dependencies_parsed_at":"2025-04-28T13:13:21.975Z","dependency_job_id":null,"html_url":"https://github.com/pixel-point/gatsby-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pixel-point/gatsby-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fgatsby-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fgatsby-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fgatsby-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fgatsby-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixel-point","download_url":"https://codeload.github.com/pixel-point/gatsby-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fgatsby-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265312134,"owners_count":23745179,"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":"2025-04-28T13:02:40.607Z","updated_at":"2025-10-30T05:17:50.979Z","avatar_url":"https://github.com/pixel-point.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixel Point Gatsby Starter\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n  - [Run website](#run-the-website)\n  - [Build website](#build-the-website)\n  - [Run built website](#run-built-website)\n  - [Clean Gatsby cache](#clean-gatsby-cache)\n- [Project Structure](#project-structure)\n- [Code Style](#code-style)\n  - [ESLint](#eslint)\n  - [Prettier](#prettier)\n  - [VS Code](#vs-code)\n- [Style Variables](#style-variables)\n\n## Getting Started\n\n1. Clone this repository\n\n```bash\ngit clone git@github.com:pixel-point/gatsby-starter.git\n```\n\n2. Install dependencies\n\n```bash\nnpm install\n```\n\n3. Copy .env.example and rename it into .env\n\n## Usage\n\n### Run the website\n\n```bash\nnpm run start\n```\n\n### Build the website\n\n```bash\nnpm run build\n```\n\n### Run the built website\n\n```bash\nnpm run serve\n```\n\n### Clean Gatsby cache\n\n```bash\nnpm run clean\n```\n\n## Project Structure\n\n```text\n├── src\n│   ├── components\n│   │  ├── pages — React components that are being used specifically on a certain page\n│   │  └── shared — React components that are being used across the whole website\n│   ├── hooks\n│   ├── images — Images that are being quired using graphql. Read more about it here — gatsbyjs.org/docs/working-with-images. Also note, that folder structure should be equal to the structure of components folder\n│   ├── layouts\n│   ├── pages\n│   ├── styles\n│   ├── templates\n│   ├── utils\n│   └── html.js — HTML template for all generated pages. Read more about it here — gatsbyjs.org/docs/custom-html\n├── static\n│   └── fonts - Self-hosted fonts\n├── gatsby-browser.js — This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. Read more about it here — gatsbyjs.org/docs/browser-apis\n├── gatsby-config.js — This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. Read more about it here — gatsbyjs.org/docs/gatsby-config\n├── gatsby-node.js — This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. Read more about it here — gatsbyjs.org/docs/node-apis\n└── gatsby-ssr.js — This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. Read more about it here — gatsbyjs.org/docs/ssr-apis\n```\n\n## Component Folder Structure\n\n### Each component includes\n\n1. Main JavaScript File\n2. SASS File\n3. Index File\n\n### Each component optionally may include\n\n1. Folder with images\n2. Folder with icons\n\nAlso, each component may include another component that follows all above listed rules.\n\n### Example structure\n\n```bash\ncomponent\n├── nested-component\n│  ├── images\n│  │  └── image.png\n│  ├── icons\n│  │  └── icon.svg\n│  ├── nested-component.js\n│  ├── nested-component.module.scss\n│  └── index.js\n├── images\n│  └── image.png\n├── icons\n│  └── icon.svg\n├── component.js\n├── component.module.scss\n└── index.js\n```\n\n## Code Style\n\n### ESLint\n\n[ESLint](https://eslint.org/) helps find and fix code style issues and force developers to follow same rules. Current configuration is based on [Airbnb style guide](https://github.com/airbnb/javascript).\n\nAdditional commands:\n\n```bash\nnpm run lint\n```\n\nRun it to check the current status of eslint issues across project.\n\n```bash\nnpm run lint:fix\n```\n\nRun it to fix all possible issues.\n\n### Prettier\n\n[Prettier](https://prettier.io/) helps to format code based on defined rules. [Difference between Prettier and ESLint](https://prettier.io/docs/en/comparison.html).\n\nAdditional commands:\n\n```bash\nnpm run format\n```\n\nRun it to format all files across the project.\n\n### VS Code\n\nFollowing extensions required to simplify the process of keeping the same code style across the project:\n\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\nAfter installation enable \"ESLint on save\" by adding to your VS Code settings.json the following line:\n\n```json\n\"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true\n}\n```\n\nYou can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type \"Open settings.json\".\n\nTo enable Prettier go to Preferences -\u003e Settings -\u003e type \"Format\". Then check that you have esbenp.prettier-vscode as default formatter, and also enable \"Format On Save\".\n\nReload VS Code and auto-format will work for you.\n\n## Style Variables\n\nAll style variables that being used across the whole application are stored in [src/styles/variables.scss](/src/styles/variables.scss).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixel-point%2Fgatsby-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixel-point%2Fgatsby-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixel-point%2Fgatsby-starter/lists"}