Design Concept: Component & Project Structure #6
Assignees
Comments
arcticicestudio
added a commit
that referenced
this issue
Aug 31, 2019
Initially implemented the Gatsby theme and main website package configurations (1). The `gatsby-config.js` files of each "Gatsby Theme" define project-wide site metadata that can be used through the GraphQL API and configures all plugins that will be used. >> Site Metadata All metadata, like defined in GH-6, aew placed in the corresponding folders for configurations (`src/config`) and data (`src/data`). Initially this includes information stored in the `package.json` file of the project. There are also constants for important project root folders to be used in imports later on like route mappings. >> Gatsby Plugins This initial implementations includes the following basic plugins (2) and packages, split up into the corresponding Gatsby theme packages. 1. `@arcticicestudio/gatsby-theme-core` - gatsby-plugin-canonical-urls (3) - gatsby-plugin-catch-links][gh-gp-catl] - gatsby-plugin-no-sourcemaps (4) - gatsby-plugin-react-helmet (5) - gatsby-plugin-remove-trailing-slashes (6) - gatsby-plugin-robots-txt (7) - gatsby-plugin-sharp (8) - gatsby-plugin-sitemap (9) - gatsby-plugin-typescript (10) - gatsby-plugin-webpack-size (11) - gatsby-source-filesystem (12) - gatsby-transformer-hjson (13) - gatsby-transformer-json (14) - gatsby-transformer-sharp (15) - gatsby-transformer-yaml (16) 2. `@arcticicestudio/gatsby-theme-arctic` - gatsby-plugin-svgr (17) - gatsby-plugin-styled-components (18) - gatsby-image (19) 3. `www` - gatsby-plugin-offline (20) - gatsby-plugin-netlify (21) - gatsby-plugin-manifest (22) >> Package Scripts To provide a simple development flow, new package scripts have been created to start the Gatsby's development mode and build a production bundle. This also includes basic scripts like a clean up to remove possible cache problems and previously created bundles and the currently not available "collected" scripts to run all scripts of the same type/task. The npm-run-all (23) package are used to simplify the scripts and prevent unnecessary long chained commands and OS related problems. > Babel Gatsby comes with an already optimized Babel (24) configuration to create SSR "static" websites and apps, but there are also use cases that require to modify and extend this configuration to e.g. add a new Babel plugin for the latest syntax feature/proposal (25) support. Of course Gatsby provides a way through the Node API (26) by implementing the `onCreateBabelConfig` (27) function. "arctic" makes use of the following proposals and plugins: - "ES Class Fields & Static Properties" (28) through `@babel/plugin-proposal-class-properties` (29) (NOTE: This plugin is configured with the enabled `loose` option!) - "ECMAScript Proposal: export default from" (30) through `@babel/plugin-proposal-export-default-from` (31) - `babel-plugin-react-remove-properties` (32) to remove props from React elements like `data-testid` attributes added for simplified querying in automated tests. The plugins and Babel options are implemented using Gatsby's provided actions (33) `setBabelPlugin` and `setBabelOptions`. > Webpack This is almost the same like the modified Babel configuration documented above, but for the Webpack (34) configuration instead. It is used to - configure the plugin `webpack-bundle-analyzer` (35) to generate a "static" report with a JSON stats file stored in a newly created `build` directory within the project root. - configure the plugin `git-revision-webpack-plugin` (36) - configure the plugin `webpack.DefinePlugin` (37) - configure "resolve aliases" (38)] (see GH-6 for details about the structure concept) - `~assets` > `src/assets` - `~atoms` > `src/atoms` - `~config` > `src/config` - `~containers` > `src/containers` - `~data` > `src/data` - `~hooks` > `src/hooks` - `~hooks` > `src/layouts` - `~molecules` > `src/molecules` - `~organisms` > `src/organisms` - `~pages` > `src/pages` - `~stores` > `src/stores` - `~styles` > `src/styles` - `~templates` > `src/templates` - `~utils` > `src/utils` Gatsby also supports this by providing the `onCreateWebpackConfig` (39) function through the Node API (26). > TypeScript In order to make the Webpack "alias imports" with TypeScript, the module resolution (40) has been configured to make the alias names and paths available to the compiler. > React Since Gatsby v2, React (41) is a peer dependency which allows users to freely choose the version they'd like to use. "arctic" is initially build with the currently latest stable version 16.9.0 (42). References: (1) https://gatsbyjs.org/docs/gatsby-config (2) https://gatsbyjs.org/plugins (3) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-canonical-urls (4) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-no-sourcemaps (5) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet (6) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-remove-trailing-slashes (7) https://github.com/mdreizin/gatsby-plugin-robots-txt (8) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp (9) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sitemap (10) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript (11) https://github.com/axe312ger/gatsby-plugin-webpack-size (12) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem (13) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-hjson (14) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-json (15) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp (16) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-yaml (17) https://github.com/zabute/gatsby-plugin-svgr (18) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styled-components (19) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image (20) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline (21) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify (22) https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest (23) https://github.com/mysticatea/npm-run-all (24) https://babeljs.io (25) https://babeljs.io/docs/en/plugins (26) https://www.gatsbyjs.org/docs/node-apis (27) https://www.gatsbyjs.org/docs/node-apis/#onCreateBabelConfig (28) https://github.com/tc39/proposal-class-fields (29) https://babeljs.io/docs/en/babel-plugin-proposal-class-properties (30) https://github.com/tc39/proposal-export-default-from (31) https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from (32) https://github.com/oliviertassinari/babel-plugin-react-remove-properties (33) https://www.gatsbyjs.org/docs/actions (34) https://webpack.js.org (35) https://github.com/webpack-contrib/webpack-bundle-analyzer (36) https://github.com/pirelenito/git-revision-webpack-plugin (37) https://webpack.js.org/plugins/define-plugin (38) https://webpack.js.org/configuration/resolve#resolve-alias (39) https://www.gatsbyjs.org/docs/node-apis#onCreateWebpackConfig (40)https://www.typescriptlang.org/docs/handbook/module-resolution.html (41) https://reactjs.org (42) https://reactjs.org/blog/2019/08/08/react-v16.9.0.html Epics: GH-4 GH-6 Resolves GH-35
2 tasks
arcticicestudio
added a commit
that referenced
this issue
Sep 1, 2019
The `Root` core container is the first and one of the important main data provider components of the main "Gatsby Theme". It represents the base element and entry point that wraps custom application components and serves as a data provider later on. Some of the tasks in the future will be to - provide context `props` and functions for the global styled-components (1) theme through the `ThemeProvider` (2) component - inject global styles through "styled-components" `createglobalstyle` (3) function including typography (GH-5) related data like application-wide used fonts - possibly data stores for state management libraries like "MobX" (4) This initial implementation renders the passed `children` within a `React.Fragment`. The website package uses the component to render the "landing" (root/index) page component. References: (1) https://styled-components.com (2) https://www.styled-components.com/docs/api#themeprovider (3) https://www.styled-components.com/docs/api#createglobalstyle (4) https://mobx.js.org Epics: GH-6 Resolves GH-36
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This epic documents the design concept of the structure for React components, the general layout of the project files and the composition of content like the docs, guides and blog posts.
The text was updated successfully, but these errors were encountered: