To install all project dependencies use the next command:
npm install
If you already have Space_ID and Content Delivery API access token and do not have access to the Contentful profile that's enough for basic setup.
.env.development
(do not commit it to the VCS)CONTENTFUL_SPACE_ID={SPACE_ID}
CONTENTFUL_ACCESS_TOKEN={ACCESS_TOKEN}
Run the next command to start setup:
npm run setup
Use next information for prompts during setup:
npm run start
http://localhost:8080/
Each changes pushing (direct pushing or via merging a Pull Request) to the:
develop
branch will trigger the deployment to the dev environment to AWS S3 bucket.master
branch will trigger the deployment to the prod environment to GitHub Pages (https://reportportal.io).That's it! Your changes should now be live on the website. If you encounter any issues during the deployment process, please consult the documentation or reach out to the project maintainers for assistance.
npm run dev
) and in production mode npm run build && npm run serve
. You should pay attention whether elements are not shifting/jumping on the initial load in the production mode.Steps
component is used and styled in the HowItWorks componentTo set the font use mixins from font folder
To set the font size and line height use font-scale mixin
To work with different screens use breakpoint mixin. Check styles for mobile on 360px width. To write styles for tablet use breakpoint mixin with $tablet-sm-exact: 768px
variable. To write styles for desktop use breakpoint mixin with $desktop-sm: 1239px
variable. Don't use other screen variables unless it is really needed.
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { renderRichText } from 'gatsby-source-contentful/rich-text';
import { ArticleAuthor } from '../ArticleAuthor';
import from './ArticlePreview.scss';
Use @use instead of @import to import mixins and variables
@use 'src/styles/mixins' as m;
@use 'src/styles/variables' as v;