The official Peach website.
The content can be edited via the Markdown and JSON files in the content and blog directories.
Every Markdown file is a page and contains the content for that particular page.
The file name is the path it will appear on on the website: faq/account.md
-> /faq/account/
The Markdown files con contain so called frontmatter, which allows to add data to that page.
This is used to e.g. reference a special template
, list keywords
or associate a teaserImage
with that page.
There are two ways translations need to maintained
The content folder contains sub folders for each locale.
The default
locale is used for english and respectively additional languages use different locale folder (e.g. es
).
Each subfolder then contains the content in the respective language.
Templates are separate from content as they execute logic to create dynamic content. To translate texts in templates a helper function is being used:
i18n('TEXTID', lang)
TEXTID
: the ID of the textlang
: global variable that is set to the current locale
Translations themselves are maintained in JSON files in the translations folder. Each json-file is called by the locale they are used for.
The Markdown content can have a special kind of HTML comment (<!--[section_name]-->
) which splits the content into inividual sections.
This is done to assign chunks of content to different parts of the page, which can then be referenced in the page's template.
See the homepage content and homepage template for an example.
The filenames of the blogposts are prefixed by the date those posts should be published at.
Note: This is just a reference for the displayed date and not automated so that the posts go live on that date!
There are some cases in which the Markdown got enriched with custom blocks like box
, note
, figures
and buttons
.
Those blocks are for layout purposes and wrap the content into containers which are styled with CSS.
These blocks start and end with at least three colons :::
and can be nested by incrementing the number of colons to the outside:
::::figures 3 // starts the figures block
:::box tech-peach // starts the box block
Actual content
::: // ends the box block
:::: // ends the figures block
On the Join Us page this is used to manage the open position descriptions.
Within the ::::figures 3
block, you can add a block like this, to post a new job listing:
:::box tech-peach
### Local market growth hacker
We are looking for someone to help us develop the regions UK, Germany, Spain and Italy.
:::
The site is published on GitHub Pages:
Whenever the content of the main
branch changes, the site gets build and a new version goes online.
This allows for a convenient workflow like this:
Whenever you want to do updates to the content, create a branch, do the changes and publsih it as a pull request on GitHub.
Netlify builds and hosts previews for those pull requests targeting the main
branch.
Once everything is done you can merge the pull request and the updates will appear on the website.
Node.js is a prerequisite, the dependencies are managed via npm. Once you have cloned this repo, you can setup the packages:
npm install
Create a build and rebuild on file change:
npm start
This will bring up the dev server and pattern library on localhost:3000.
Use this command to create an optimized production build:
npm run prod
This builds a deployable version into the dist
folder.