astek-community-website

TODO

• favicon
• [] Image viewer
• [] Environment variables (https://www.gatsbyjs.org/docs/environment-variables/)
• frontendchecklist.com/
• [] Replace inline style by withStyles
• Helmet SEO tags (og, etc) on ArticleTemplate
  • https://github.com/Vagr9K/gatsby-advanced-starter/blob/master/src/components/SEO/SEO.jsx
• [] test SEO with https://search.google.com/structured-data/testing-tool/u/0/
• Sitemap (https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/)
• Syntax highlighting (https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/)
• [] Analytics

What's included

• jest for testing
• React 16.
• Eslint in dev mode with the airbnb config and prettier formatting rules.
• Prettier
• normalize.css
• React Helmet
• Material ui

Development

npm run dev will start a development server on port 8042.

Css-in-js

https://github.com/cssinjs/jss

Plugins

The gatsby plugins can be found on https://github.com/gatsbyjs/gatsby/tree/master/packages.

gatsby-link

A <Link> component for Gatsby.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link

gatsby-plugin-react-helmet

Provides drop-in support for server rendering data added with React Helmet.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet

gatsby-remark-images

Processes images in markdown so they can be used in the production build.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images

Inspirations

Inspirations for gatsby can be found on gatsby starters.

• https://github.com/saschajullmann/gatsby-starter-gatsbythemes

Architecture

We use Gatsby under the hood.

Images

Logo

The logo is declined in both red and black versions.

• black: #000000
• red: #e53935 (red['500'])

Icons generation

To generate the different icons, we used the https://realfavicongenerator.net/ website with the logo_red.svg file.

Once the tarball downloaded:

• the favicon files must be put on static.
• all the other images files (png, svg) must be put on /static/icons

Note:

• manifest.xml is generated by gatsby (gatsby-plugin-manifest on gatsby-config.js)
• browserconfig.xml is on static and created by us

Here the following configuration to use:

Favicon for iOS - Web Clip

• Settings > Use the original favicon as is. iOS will fill the transparent regions with black.
• Settings > Background color > #ffffff
• Assets > iOS 7 and Later

Favicon for Android Chrome

• Main settings > No change, keep the master picture as it is.
• App name: LabAstek
• Theme color: #ffffff
• Assets > Modern versions > Create only recommended, high resolution icons

Windows Metro

• Settings > #e53935
• Settings > Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.

macOS Safari

• Settings > Use a silhouette of the original image. Works well with pictures with significant transparent regions.
• Settings > Theme color > #e53935

Directories

plugins

Contains our custom gatsby plugins.

post

A git submodule. Contains the posts of the blog

public

Contains the builded public data

src

components

Set of :

• generic components
• components used by the Pages defined on pages

layouts

Contains our Layout components. The Layout is the body of our app.

modules

A module can contains :

• utilities
• constants (constants file or directory)
• formatters (format file or directory)
• configuration

pages

Contains the different pages of our blog.

Warning: Bugs can appear with gatsby if there is other files than pages files in the root of this directory. For components, use /components directory.

style

Our sass style code

templates

Contains our gatsby templates.

Templates are linked to an url on gatsby-node.js