This is the source code for the website ebpf.io. For more information, see the contribute page.

• Getting Started
• Usage
  • Run the website
  • Build the website
  • Run the built website
  • Clean Gatsby cache
• Project Structure
• Code Style
  • ESLint
  • Prettier
  • VS Code
• Contact

1. Clone this repository

git clone [email protected]:ebpf-io/ebpf.io-website.git

2. Install dependencies

npm install

3. Fill environment variables

cp .env.example .env

npm run start

npm run build

npm run serve

npm run clean

├── src
│   ├── components
│   │  ├── pages — React components that are being used specifically on a certain page
│   │  └── shared — React components that are being used across the whole website
│   ├── hooks
│   ├── images
│   ├── pages
│   ├── styles
│   ├── templates
│   ├── utils
│   └── html.jsx — HTML template for all generated pages. Read more about it here — gatsbyjs.org/docs/custom-html
├── static
│   └── fonts
├── gatsby-browser.js — Usage of the Gatsby browser APIs. Read more about it [here](gatsbyjs.org/docs/browser-apis)
├── gatsby-config.js — Main configuration file for a Gatsby site. Read more about it [here](gatsbyjs.org/docs/gatsby-config)
├── gatsby-node.js — Usage of the Gatsby Node APIs. [Read more about it here](gatsbyjs.org/docs/node-apis)
└── gatsby-ssr.js — Usage of the Gatsby server-side rendering APIs. [Read more about it here](gatsbyjs.org/docs/ssr-apis)

1. Main JavaScript File
2. Index File

1. Folder with images and icons
2. Folder with data

Also, each component may include another component that follows all above listed rules.

component
├── nested-component
│  ├── data
│  │  └── nested-component-lottie-data.json
│  ├── images
│  │  ├── nested-component-image.jpg
│  │  ├── nested-component-inline-svg.inline.svg
│  │  └── nested-component-url-svg.url.svg
│  ├── nested-component.js
│  └── index.js
├── data
│  └── component-lottie-data.json
├── images
│  ├── component-image.jpg
│  ├── component-inline-svg.inline.svg
│  └── component-url-svg.url.svg
├── component.js
└── index.js

ESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on Airbnb style guide.

Additional commands:

npm run lint

Run it to check the current status of eslint issues across project.

npm run lint:fix

Run it to fix all possible issues.

Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.

Additional commands:

npm run format

Run it to format all files across the project.

Following extensions required to simplify the process of keeping the same code style across the project:

• ESLint
• Prettier

After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".

To enable Prettier go to Preferences -> Settings -> type "Format". Then check that you have esbenp.prettier-vscode as default formatter, and also enable "Format On Save".

Reload VS Code and auto-format will work for you.

Open an issue, or better yet, reach out on Slack.