This is a repo for an ongoing development of a landing page written in react
.
The latest releases can be found under releases.
- clone the repo
- hit
npm i
- set up
GraphCMS
andgatsby-config.js
. Documentation - start local develoment environment by
gatsby develop
[NOTE]: The documentation of each components, with examples are under construction.
Until then, check the individual code for each component to get more insight.
task | status | props |
---|---|---|
<HeaderH1> |
✅ | text:string , className:string |
<HeaderH2> |
✅ | text:string , className:string |
<Button> |
✅ | bgColor: string , className: string , onClick: func , children: React.node , isAnimation: boolean |
<Paragraph> |
✅ | text: String , className: String |
<TestimonialItem> |
✅ | index: Number , src: String , alt: String , className: String |
<Map /> |
✅ | TODO: graphql |
<Team> |
✅ | TODO: graphql |
<Phone /> |
✅ | children: React.node , className: String , animationEnd: String , secondaryImage: String , secondaryImageZoom: Number |
<Macbook /> |
✅ | children: React.node , barTitle: String , frameUrl: String |
PRs are welcome. To contribute to this repo, first fork
it, create a local branch
with some meaningful name, and start working. When you are done, submit a PR
and I'll review it.
We are not using class
based components, only stateless function
components. You must follow the rules set by the provided ESlint
configuration. husky
package is applied, so you will not be able to commit to this repository if the requirements are not met.
Example:
/**
* @author zilahir
* @function MenuItem
* */
const MenuItem = () => (
<div>MenuItem</div>
)
export default MenuItem
NOTE: Please comment your components under the import section, so it's purpose will be clearly stated.
-
We are using
flex-grid
system in this project. More particularly this one. -
We are using
css modules
, but withscss
syntax. Keep thescss
as organizad as possible, try to avoid endless nesting. -
You are not allowed to use
#id
selectors. -
Write as generic components as possible to help reusability.
-
Using
prop-types
are mandatory. Read the docs ofprop-types
here if you are not familiar with it. -
Try to avoid installing 3rd party
react
components, unless it's a must. Try to implement everything by your own.
Since hooks
has been introduced to react
, let's aim to use them.
For example:
import React, { useState } from 'react'
const [isVisible, setIsVisible] = useState(false)
and when you need to set it's value
setIsVisible(true)
Read more about react-hooks
in it's documentation
For hooks
follow the naming conventions, as in the example above. If a variable needs to be set to a specific value, use the set
in the naming, so it will be consequent, and readable.
Each component have to be in components
folder.
-
in
common/<component-name>
, if it's a common component. -
in
pages/<page-name>
, if it's a page.
The structure of the folders tried to be kept as consistent and self explanary explanatory as possible. Everything goes where it belongs.
├── App.js
├── App.test.js
├── actions
│ ├── actionTypes.js
│ └── test.js
├── assets
│ └── img
├── components
│ ├── Footer
│ │ ├── Footer.module.scss
│ │ └── index.js
│ └── common
│ ├── Button
│ │ ├── Button.module.scss
│ │ └── index.js
├── reducers
│ └── test.js
├── pages
│ ├── Home
│ │ ├── Home.module.scss
│ │ └── index.js
└── styles
├── mixins
│ ├── Button.scss
└── variables.scss
The filenames
and foldernames
should be in the following format:
<SomeComponent>
/ index.js
/ SomeComponent.module.scss
We are using camelCase
naming conventons for both variable names, and classNames
, for example:
TopHeader
, isVisible
, etc.
The scss modules
are always important for a specific component as styles
.
import styles from ./TopHeader.module.scss
and then referencing them as:
<div className={styles.topHeaderWrapper}>
...
</div>
styled-component
are part if this repository also, use it if a component requires styles related props, such as color
, width
, etc.
Example:
import styled from 'styled-components`
const DemoStyledComponent = styled.span`
display: flex;
&:before {
content: '';
width: ${props => props.width}px;
...
...
...
}
`
And then referencing them as the following:
<DemoStyledComponent width={200} />
Using the !important
rule in CSS
is strictly forbidden. If you come accross a problem which can be solved by using !important
you need to redefine your CSS
, or your component
or both.
Follow the rules of HTML
tag nesting, to avoid validateDOMnesting(...)
warnings.
We are using two different font familier here. Both provided by Google fonts
.
KoHo
Roboto
The headings (h1
, h2
, etc.) are KoHo
, and body texts (p
, span
, etc.) are Roboto
.
Even for placeholders, it's forbidden to hardcode any texts into the code. Let's mimic some API
, to help in the future connect some graphQl
. Future plan is once the initial release is done, port this to gatsbyJs
Example:
export const headerMenu = {
menuItems: [
{ key: 1, label: 'Home', slug: 'home' },
{ key: 2, label: 'About us', slug: 'aboutus' },
],
getHeaderMenu: () => headerMenu.menuItems,
}
Then reference it as the following:
import { headerMenu } from <path-to-file>
const menuItem = headerMenu.getHeaderMenu();
Here's a list of important dependencies we are using in this project:
gatsbyJS
framer-motion
react-waypoint
redux
redux-thunk
(not in use currently)styled-components
react-parallax
react-responsive
react-map-gl
Please read the documentation of these packages if you are not familiar with them.
On the website, there is a map incuded. To be able to use it, you need to provide your own TOKEN
for it. To learn how to use the tokens, visit the related part of the documentation.
Since we are using gatsbyJS
, you must the related way of declaring env
variables.
Gatsby
prefixes the env
variables with GATSBY_
, so your token will be something like:
GATSBY_MAPBOX_ACCESS_TOKEN=<YOURTOKEN>
This project is automatically deployed from branch master
, using netlify
. You can follow the development process on this url.
In case of questions, drop me a message.
- This project is licenced under MIT licence.
- The photos are in this repo are from pexels.com
If you have design suggestioin, or any type of UI / UX related interaction idea's, open an issue and let's discuss it.