Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renatoxm/gatsbyshowcase
Getsby simple website
https://github.com/renatoxm/gatsbyshowcase
bootstrap bootstrap5 gatsby gatsbyjs typescript
Last synced: 16 days ago
JSON representation
Getsby simple website
- Host: GitHub
- URL: https://github.com/renatoxm/gatsbyshowcase
- Owner: renatoxm
- License: mit
- Created: 2023-03-28T16:33:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-17T16:45:44.000Z (over 1 year ago)
- Last Synced: 2024-10-17T15:55:42.730Z (about 1 month ago)
- Topics: bootstrap, bootstrap5, gatsby, gatsbyjs, typescript
- Language: SCSS
- Homepage: https://gatsbyshowcase.vercel.app/
- Size: 6.86 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Gatsby Sample Page
This is a sample Gatsby landing page in Typescript with Bootstrap 5, GraphQL and MongoDB for presentation purposes only.
This project was created only as a portfolio showcase, just the landing page works.
## Features
- [x] Gatsby 5
- [x] React 18
- [x] TypeScript
- [x] Bootstrap 5
- [x] ESLint
- [x] Prettier
- [x] Husky
- [x] Commitlint
- [x] lint-staged
- [x] Path Mapping — Import components or images using the `@` prefix
- [x] Pnpm
- [x] PR Workflow — Run Type Check & Linters on Pull Requests
- [x] Jest - JavaScript testing framework
- [x] Cypress - e2e (end to end) testing
- [x] Cypress axe accessibility testing API
- [x] DataDog -Datadog logging and real user monitoring (RUM)
- [ ] Storybook - UI development, testing, and documentation
## Gatsby Features
- [x] Blog contents
- [x] Blog Pagination
- [x] Responsive Images (static & dynamic)
- [x] Blog Search using JS Search (In 'posts' page)
- [ ] Responsive Background Images
- [ ] Forms
## Scripts
- `pnpm start` — Starts the application in development mode at `http://localhost:8000`.
- `pnpm build` — Compile your application and make it ready for deployment.
- `pnpm serve` — Serve the production build of your site
- `pnpm clean` — Wipe out the cache (`.cache` folder).
- `pnpm type-check` — Validate code using TypeScript compiler.
- `pnpm lint` — Runs ESLint for all files in the `src` directory.
- `pnpm format` — Runs Prettier for all files in the `src` directory.
- `pnpm test` — Run tests with Jest.
- `pnpm test:watch` — Run tests on watch mode.
### Path Mapping
TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix.
```tsx
import { Button } from '@/components/Button'
// To import images or other files from the static folder
import avatar from '@/static/avatar.png'
```
## Install the project
```sh
# npm
pnpm i
```
## Starting the project
To start the project locally, run:
```sh
pnpm develop
```
Open `http://localhost:8000` with your browser to see the result.
## Datadog
Gatsby plugin datadog is installed, read more on
Copy ./.env.production.example to ./.env.production and fill your App id, client token and datadog region site.
```sh
cp ./.env.production.example ./.env.production
```
### Logs & error collection
When log collection is enabled datadogLogs will be available on the global window object, so you can use it like this:
```js
datadogLogs.logger.info('Hello World!')
```
See [Datadog’s Browser Log Collection documentation](https://docs.datadoghq.com/logs/log_collection/javascript/#usage) for available methods on the datadogLogs object.
If RUM is enabled, RUM data will automatically be collected. datadogRum is also available on the global window object, so you can use it for [manual error collection](https://docs.datadoghq.com/real_user_monitoring/browser/collecting_browser_errors/?tab=npm#collect-errors-manually) and [custom user actions](https://docs.datadoghq.com/real_user_monitoring/browser/tracking_user_actions/?tab=npm#custom-user-actions), etc.
### Agent installation (ubuntu)
### Starting/stopping Datadog agent (ubuntu)
```sh
#starting
sudo service datadog-agent start
#stopping
sudo service datadog-agent stop
```
## Running Cypress on WSL2
### For good measure, update that linux install (on your shell root)
```sh
sudo apt update
sudo apt upgrade
```
### Install X-server
**Important:** On the page that lets you enable extra settings, be sure to disable access control.
### Add dependencies to your linux distro
For ubuntu
```sh
sudo apt install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
```
I had issues trying to install on ubuntu 22 inside wsl2 so i fixed with:
```sh
sudo apt-get install libpcre3=2:8.39-13ubuntu0.22.04.
```
### Add in your .bashrc
```sh
# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
sudo /etc/init.d/dbus start &> /dev/null
```
### Grant passwordless access for dbus
```sh
sudo visudo -f /etc/sudoers.d/dbus
```
Press CTRL+O to save, then press Enter to confirm. Finally, press CTRL+X to close the editor.
### Go back to your project and launch Cypress
```sh
pnpm cy:open
```
**Important**: Do not forget to run Xlaunch before running cypress!