https://github.com/georgesboris/gatsby-typescript-starter

Simple Gatsby starter with Typescript support.
https://github.com/georgesboris/gatsby-typescript-starter

Last synced: about 2 months ago
JSON representation

Simple Gatsby starter with Typescript support.

• Host: GitHub
• URL: https://github.com/georgesboris/gatsby-typescript-starter
• Owner: georgesboris
• License: mit
• Created: 2019-09-10T02:40:05.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T09:39:59.000Z (about 2 years ago)
• Last Synced: 2023-07-31T15:57:51.478Z (over 1 year ago)
• Language: CSS
• Size: 2.85 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gatsby Typescript Starter

Simple gatsby starter with Typescript support.

## Component folder structure by example

```

/components

  /components

    /GlobalComponent

      GlobalComponent.tsx

  /ComponentA

    /components

      /ComponentASubComponent

        ComponentASubComponent.tsx

    ComponentA.tsx

  /ComponentB

    ComponentB.tsx

```

In the example above:

- `ComponentA` could import `ComponentASubComponent`

- `ComponentB` could **not** import `ComponentASubComponent`

- Both components could import `GlobalComponent`

```

/ComponentA

  /components

  /images

  ComponentA.tsx

  ComponentA.css

```

Each component folder should hold all it's related files including styles and other assets. There are almost no exceptions for sharing assets globally, so thread carefully.

## Component file structure by example

```javascript

/**

 * Imports

 */

import React from 'react'

/**

 * Types

 */

type Props = {

  title: string

  subtitle?: string

}

/**

 * Styles (if using CSS-in-JS)

 */

const Wrapper = styled.section`

  display: flex;

`

const Title = styled.h1`

  font-weight: bold;

`

const Subtitle = styled.p`

  font-size: 0.9em;

`

/**

 * Main Component

 */

export default function MyComponent({ title, subtitle }: Props) {

  return (

    

      {title}

      {subtitle && {subtitle}}

    

  )

}

```