https://github.com/jahtx/jameshernandez.net

A portfolio website and blog using Gatsby 5, React 18, and TypeScript. Features include Contact Form, Search, and DarkMode.
https://github.com/jahtx/jameshernandez.net

gatsby typescript

Last synced: about 2 months ago
JSON representation

A portfolio website and blog using Gatsby 5, React 18, and TypeScript. Features include Contact Form, Search, and DarkMode.

• Host: GitHub
• URL: https://github.com/jahtx/jameshernandez.net
• Owner: jahtx
• Created: 2024-05-14T23:59:12.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-12-26T00:25:10.000Z (about 2 months ago)
• Last Synced: 2024-12-26T01:18:27.993Z (about 2 months ago)
• Topics: gatsby, typescript
• Language: CSS
• Homepage:
• Size: 21.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  






Non-opinionated TypeScript starter for Gatsby

A TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start.







  


  

  

    

  





  Created by João Pedro with the help of many wonderful contributors.






## Features

- ⚡️ Gatsby 5

- ⚛️ React 18

- ⛑ TypeScript

- 🐐 Tests — Vitest and Testing Library out of the box

- 📏 ESLint — To find and fix problems in your code

- 💖 Prettier — Code Formatter for consistent style

- 🐶 Husky — For running scripts before committing

- 🚓 Commitlint — To make sure your commit messages follow the convention

- 🖌 Renovate — To keep your dependencies up to date

- 🚫 lint-staged — Run ESLint and Prettier against staged Git files

- 👷 PR Workflow — Run Type Check & Linters on Pull Requests

- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs

- 🗂 Path Mapping — Import components or images using the `@` prefix

## Quick Start

The best way to start with this template is using the [Gatsby CLI](https://www.gatsbyjs.com/docs/reference/gatsby-cli/).

```

npx gatsby new starter-ts https://github.com/jpedroschmitz/gatsby-starter-ts

```

### Development

To start the project locally, run:

```bash

pnpm start

```

Open `http://localhost:8000` with your browser to see the result.

## Documentation

### Requirements

- Node.js >= 18

- pnpm 7

### Directory Structure

- [`__helpers__`](./__helpers__/) — Helpers files for testing configuration.


- [`__mocks__`](./__mocks__/) — Mocks for testing.


- [`.github`](.github) — GitHub configuration including the CI workflow.


- [`.husky`](.husky) — Husky configuration and hooks.


- [`src`](./src) — Application source code, including pages, components, styles.

### 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 Vitest.

- `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';

```

### Switch to Yarn/npm

This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the `pnpm-lock.yaml` file, install the dependencies with Yarn/npm, change the CI workflow, Husky Git hooks to use Yarn/npm commands, and uninstall the `gatsby-plugin-pnpm` plugin (you also need to remove it from the `gatsby-config` file).

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.