Two Perfect Events & Weddings website code made with GatsbyJs, Netlify, and DatoCMS.
- Update all packages to the latest and test for issues
- Setup with Gatsby Cloud Dashboard
- Setup with DatoCMS - TPE DatoCMS Admin
- Setup with Netlify Hosting - TPE Netlify Admin
- Setup pre-commit hooks again via husky, prettier, & eslint
- gatsby-plugin-react-axe ??
- gatsby-plugin-svg-sprite ??
- gatsby-plugin-svgr ??
- Remove and clean up all unneeded code, packages, and tooling
- gatsby-plugin-google-tagmanager
- gatsby-plugin-facebook-pixel
- (TBD) [gatsby-plugin-google-analytics]
- (TBD) [gatsby-plugin-robots-txt]
- (TBD) [gatsby-plugin-sitemap]
- Configure GitHub Actions to handle CI/CD tests on a master or stage branch?
- Write more robust unit tests for all components and custom hook
- Possibly add support for MDX and markdown
- Add more Storybook add-ons with more component demos
- Add a Contributing section to README
- ???
- Eslint/Prettier configured
- Scores 100% on a11y / Performance / PWA / SEO
- PWA (desktop & mobile)
- Easy to customize
- Nice project structure
- Amazing illustrations by Undraw.co
- Tablet & mobile friendly
- Continuous deployment with Vercel
- Or with Netlify, check Netlify branch
- A contact form protected by Google Recaptcha
- Can be deployed with one click
- Functional components with
RecomposeReact Hooks!ready to migrate to React hooks! - Fetches your Github pinned projects with most stars (You could customize this if you wish)
🚀 DatoCMS Integration >>
- gatsby-source-datocms and dependency for gatsby-transformer-remark were added along with some of the gatsby-starter-datocms code which is suffixed with *-cms.js.
- None of the sass styling and packages were installed for this code so it will be unstyled. The content is being pulled from our DatoCMS project though.
.
├── data
│ └── config # SEO related tags
├── src
│ └── assets # Assets
│ │ │── icons # icons
│ │ │── illustrations # illustrations from (undraw.co)
│ │ └── thumbnail # cover of your website when it's shared to social media
│ ├── components # Components
│ │ │── common # Common components
│ │ │── landing # Components used on the landing page
│ │ └── theme # Header & Footer
│ └── pages # Pages
└── static # favicon & Netlify redirectsYou will need to have node and yarn installed.
You can use npx (recommended) or install the gatsby-cli globally.
Clone and install the project:
git clone [email protected]:retrospct/two-perfect-events.git
cd two-perfect-events
yarnThis section is a WIP
This project uses concepts from Git Flow and GitHub Flow for branching. I recommend going through the GitHub Flow link first and then skimming the branching portions of the Git Flow article. It's not much reading overall, shouldn't take too much time.
To start the development servers:
yarn developIf all was successful, you should see links to two development servers in the Node terminal. You can open these url in any browser that you would like.
This is the development server that allows you to preview your website. It comes with hot-module reloading, which means that you should see your changes almost immediately without having to refresh the browser tab.
This is the development server that allows you to interact with the your site's GraphQL data via the GraphiQL IDE.
| Script | Description |
|---|---|
develop |
Start the development server with hot module reloading. |
dev |
Alias for develop. |
format |
Format your code with Prettier. |
clean |
Delete the .cache and public directories. |
test |
Run your Jest tests once. |
test:watch |
Run your Jest tests in watch mode. |
lint |
Lint your code with ESLint. |
lint:watch |
Lint your code with ESLint in watch mode. |
lint:fix |
Lint your code with ESLint and attempt to fix linting issues. |
serve |
Serve the production build of your site for testing. |
build |
Compile your application and make it ready for deployment |
storybook |
Starts Storybook. |
build-storybook |
Compiles your stories and makes them ready for deployment. |
This library is pre-configured with styled-components.
Global styles are defined in the src/styles/global-styles.tsx file using the createGlobalStyle function provided by styled-components. The global styles are injected in the Layout component via the component that is provided from the createGlobalStyle function.
The global style also includes the styles from css-modern-reset, which aims to provide a sensible reset of browser styles.
You can define your theme styles in the /src/styles/theme file. The theme will be available in any styled-component via props.theme and to any other component via the useTheme hook.
The theme utilizes the use-media library, which allows you to track the state of a CSS media queries. This works by passing a boolean for each screen size that you defined in your theme. Just define your screen sizes in src/styles/theme.
src/pages/about.tsx includes various examples (with comments) of using styled-components and framer-motion with the theme provider.
This starter is also preconfigured to work with the css prop:
import styled from 'styled-components'
const MyComponent = () => (
<div>
<h1
css={`
color: #333;
`}
>
Hello World!
</h1>
</div>
)Note: The css prop does not play nicely with the jsx-no-multiline-js ESLint rule. You may want to disable the rule if you plan on using the css prop. This can be done in the .eslintrc.js file.
I personally do not use the css prop and prefer to define styled-components outside of the component definition. My general rule is if the component that is using a styled-component is the only component that uses it, I define the styled-component in the same file. Otherwise, I will move it out to a components/common directory.
import styled from 'styled-components'
const Heading = styled.h1`
color: #333;
`
const MyComponent = () => (
<div>
<Heading>Hello World!</Heading>
</div>
)This starter also includes a CSSDebugger component. This component allows you to easily debug your styles by drawing outlines around all elements and applying a grid in the background. It also includes a toggle button that you can optionally use during debugging.
Note: You can drag the toggle button around if it gets in your way.
The CSSDebugger component is used in the layout.tsx component.
This project includes a combination of ESLint, TSLint, and React-A11y rules for React and TypeScript code, which are extended from the eslint-config-gojutin npm package. Many of the rules favor a functional approach with a strong emphasis on immutability and strong type definitions. Since all of the rules and dependencies are included in this package, you can easily remove it if you prefer to wire up your own linting configuration.
The rules are listed as key/value pairs. The key represents the rule name and the value (number) represents the setting of the rule:
0 |
off |
1 |
warn |
2 |
error |
Here is an example of a rule:
"immutable/no-this": 2This particular rule disallows the use of the this keyword, which will result in an error.
Storybook is available by creating stories in the src/stories directory and running the yarn storybook script. Your storybook will be availble at http://localhost:6006.
You can also compile a production build of your Storybook by running yarn build:storybook. The compiled production build will be located in a /storybook-static directory.
This section is a WIP, tests will be enforced via GitHub Actions but tooling should be used in development. Will add more info later.
Lint your files and fix all linting issues.
yarn lintRun your test suite and fix any broken tests.
yarn testThis section is a WIP. CI/CD pipeline not fully configured but the basics are already setup for deploy.
- Automate and enforce linting, best practices, styling, and tests with GitHub Actions
- Document the deployment pipeline
- Setup the remaining deployment pipeline
ex: feature_* or fix_* (merge) > develop (PR, preview generated) > *not setup yet* stage (PR, deploy to prod once approved) > master (prod)
Built with Gatsby - the blazing-fast static site generator for React.
Project scaffolded from Gatsby Starter Typescript Deluxe.
That's about it. Now, build something awesome 😀
This repo contains a static website written with GatsbyJS, integrated with content coming from DatoCMS.
If you want to use try this out yourself, you first need to set up a project on DatoCMS which will host your data.
You can sign up for a free account and then you can simply click this button:
First, install the dependencies of this project:
yarn installAdd an .env file containing the read-only API token of your DatoCMS site:
echo 'DATO_API_TOKEN=abc123' >> .envThen, to run this website in development mode (with live-reload):
yarn developTo build the final, production ready static website:
yarn buildThe final result will be saved in the public directory.
The goal of this project is to show how easily you can create static sites using the content (text, images, links, etc.) stored on DatoCMS. This project is configured to fetch data from a specific administrative area using the API DatoCMS provides.
You can find further information about how to integrate DatoCMS with Gatsby in our documentation.
This websites uses:
- Yarn as package manager;
- GatsbyJS as website generator;
- gatsby-source-datocms to integrate the website with DatoCMS.
🗒️ Starter Features - gatsby-starter-typescript-deluxe
- TypeScript for type-safe code.
- Styled-Components for all your styles.
- modern-css-reset for a reset of sensible default styles.
- Framer Motion for awesome animations.
- gatsby-image and gatsby-transformer-sharp for optimized images.
- gatsby-plugin-manifest / SEO component for an SEO-friendly PWA.
- Storybook with add-ons for showing off your awesome components.
- Jest and React Testing library for snapshots and unit tests.
- ESLint (with TSLint and Prettier) to make your code look its best.
- React Axe and React A11y for accessibility so that your site is awesome for everyone.