Welcome to CHIARTECH

Just a regular gatsby landing page for now :)

Gatsby

Set up the basic gatsby framework by following this guide

Typescript

Implemented Typescript according to this guide

Gatsby and TypeScript path support

Provided with gatsby-plugin-root-import & tsconfig.json

Gatsby path support

1. Install the package

   npm install gatsby-plugin-root-import

2. Add the following lines to your gatsby-config.js, under your plugins:

   {
     resolve: `gatsby-plugin-root-import`,
     options: {
       ["@src"]: `${__dirname}/src`,
       ["@pages"]: `${__dirname}/src/pages`,
       ["@components"]: `${__dirname}/src/components`,
       ["@assets"]: `${__dirname}/src/assets`
     }
   }

Material UI Theme support

Implemented according to this guide

Custom font with icomoon for logo SVG usage in header

Head over to icomoon.io.

1. Create new empty set

2. Upload your svg or select icons you intend to use

3. (optional) Position and resize your SVG

4. Press 'Generate Font' & Download the ZIP

5. Unzip it locally

6. Copy the files in the fonts folder to your project

7. add a fonts.css file in the same folder with the following content

   @font-face {
     font-family: "icomoon";
     src: url("./icomoon.eot?u9xe6o");
     src: url("./icomoon.eot?u9xe6o#iefix") format("embedded-opentype"), url("./icomoon.ttf?u9xe6o")
         format("truetype"), url("./icomoon.woff?u9xe6o") format("woff"), url("./icomoon.svg?u9xe6o#icomoon")
         format("svg");
     font-weight: normal;
     font-style: normal;
     font-display: block;
   }

8. (optional) bind the path in your gatsby paths & restart gatsby

9. Bind it in your project by importing the related css file on top of your page or component like so

   import "../assets/fonts/fonts.css"

Set up favicon

Under gatsby-config.js find gatsby-plugin-manifest and change the icon option to match the path to the SVG or PNG containing your logo

Custom sciFi styling for the header and logo

Inspired by the Arwes Project. Using the fonts, text-shadow and coloring. Base components are based on material-ui due to their extensive and feature rich support.

The circle animation is implemented based on the pure CSS loader at loading.io

Set up fluid background image with webp

Install gatsby-background-image

npm i gatsby-background-image -S

1. Set up a static query to retrieve the contents from graphql
2. Check your graphql to generate your query. Should be under localhost:8000/__graphql
   • you can browse allFile -> edges -> node -> relativePath to see which images you have available
3. Point towards the location of your background image

useStaticQuery <
  Background >
  graphql`
    query BACKGROUND_QUERY {
      file(
        relativePath: {
          eq: "flight-through-deep-space-nebula-footage-077483924_prevstill.webp"
        }
      ) {
        childImageSharp {
          fluid(quality: 90, maxWidth: 1920) {
            srcWebp
          }
        }
      }
    }
  `

1. Pass it as an argument to useStyles().
2. Point towards the path in your background url like so:

background: ({ fileName }: StyleProps) => `url(${fileName})`

Dynamic pagelinks

This step is optional, and mainly intended to keep your links up to date with the pages you have created You may use this with page links, but the same technique will work for blog posts as well

1. Set up a query for the site pages
2. Filter out the system pages, such as '404' and '/'
3. Return an object of title & path, to separate the lable from the href.
   • Remove special characters such as '-' and '/' from the title property
4. Capitalize the title in it's usage

textTransform: 'capitalize'

Enjoy the ride!