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
- [] 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.
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
ongatsby-config.js
)browserconfig.xml
is onstatic
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