YLD Website
Link
Storybook
How to run:
Clone project and install dependencies:
git clone [email protected]:yldio/yld.io.git
cd yld.io
yarn
Copy the environment variables from .env.example to .env file:
cp .env.example .env
In order to access data from contentful make sure that you have an .env file that matches the contentful keys and tokens:
CONTENTFUL_TOKEN=(see in contentful/settings/API keys "meetup > Content Delivery API - Access Token")
CONTENTFUL_SPACE=(see in contentful/settings/API keys "meetup > Space ID")
GATSBY_ENVIRONMENT="development"
# For local Lambda development
MEETUP_API_SECRET - OAuth Secret
MEETUP_API_KEY - OAuth Key
MEETUP_EMAIL - See below
MEETUP_PASS - See below
CMS_CRUD
You can now run:
yarn develop
We have some docs to make it easier for you to get started:
Running Tests
All tests are run through scripts within package.json so check there for details.
N.B. You need to yarn run build prior to running testcafe and lighthouse testing scripts.
Tech used
Tests stack
Content in
Blog
How does the blog work? Good question! See here
Deployment
The website and lambda are built (yarn build) and deployed on Netlify to our production environment (https://www.yld.io) when:
- a new commit is pushed to our production (
master) branch, read more here; - the Contentful data is updated (via webhook).
Also, for each Pull Request that's open, a Deploy Preview is created, allowing for that branch to be tested and shared amongst stakeholders.
Automated deployments
Zapier is a great tool for automating certain tasks, e.g. tracking changes to RSS feeds or simple scheduling requests to certain endpoints. We depend on it for several of our automated deployments, all listed below.
📬 Webhook automated deployments
We are using Netlify webhooks/build hooks to automate new builds when services we use update. Each service has its own webhook url set up in Netlify.
Keep in mind if you need to urgently alter any of the automated builds but don't have access to the services below, it's possible to just remove the webhook url from Netlify and stop it temporarily!
Medium
Zapier is subscribed to the yld engineering medium account via an RSS feeds, it checks every hour for new content. Upon new content zapier makes a post request to Netlify to trigger a fresh build.
The account is registered under [email protected], for access speak with Carlos Vilhena.
ƛ Netlify lambda automated deployments
Utilising Netlify's functions.
Meetup
Local development requires:
MEETUP_API_SECRET - OAuth secret, defined in our meetup.com account
MEETUP_API_KEY - OAuth Client ID, defined in our meetup.com account
MEETUP_EMAIL - Meetup account email login
MEETUP_PASS - Meetup account password
CONTENTFUL_SPACE - Our Contentful space ID
CMS_CRUD - A personal access token generated from your Contentful account settings (listed under the Content management tokens section in settings > APIs) to allow writing to the yld Contentful space. Anyone with a Contentful account can generate one of these. The token used in production is registered to the [email protected] Contentful account.
./src/functions/meetup-oauth.js
./src/functions/meetup-callback.js
This lambda takes our meetup event data and publishes it to Contentful.
Due to meetups use of OAuth 2.0, the flow here requires some authentication prior to starting to work that deals with the meetup and contentful data.
Flow:
- Zapier triggers the
meetup-oauth.jslambda - Meetup OAuth service calls the redirect URL,
https://yld.io/.netlify/functions/meetup-callback.js - Within
meetup-callback.jswe perform some authentication and include the returned session tokens within all of our meetup API requests as an Authorization header. - Once all of the contentful updates and new entries have been made we return
log, an object detailing all of the updated/created meetup events in contentful. logis then returned back tomeetup-oauthendpoint and the process ends.
For another explanation of the flow check the meetup guides here
WARNING - Due to the sensitive login information that is required to develop this lambda you are encourage to exercise common sense when handling these login details.
Lever
./src/functions/lever.js
Utilises Gatsby's onPostBuild functionality - see how we utilise it here and Gatsby docs here
Lever webhooks are extremely limited so we have to write our own lambda to check for updated roles. Zapier pings the the public lambda every hour. Using the onPostBuild functionality we write the current role ids to a public file named meta.json. The lambda compares the ids we get from lever and the ones currently on the site, if there are any differences we use the URL stored within LAMBDA_LEVER_WEBHOOK to make a POST request to deploy the site.
The zap is within the zapier account registered to [email protected]
Github
Local development requires:
GITHUB_TOKEN - A personal access token generated on your personal github account. Create one here with the following scopes: public_repo, read:org, read:user
CONTENTFUL_SPACE - see How to run section
CMS_CRUD - see How to run section
./src/functions/github.js
The aim of this lambda is to have up to date metrics of yld's open source contribution on the site. We do this by aggregating data on a lambda and publishing it to Contentful. It is split into two sections, repos and meta.
-
Repos We want to store data regarding specific repos that members of yld have contributed to e.g. node, react, enzyme etc. By creating a
githubRepocontent type on Contentful with only a URL value editable, we are able to create references to these repos that can be used throughout the site but have metrics that are only available to update via the API medium. This ensures data is always valid and accurate. -
Meta Meta data is used a summary of all the repositories that yldio organisation has contributed to. This data is written directly to the Open Source content type.
Main @yld.io/oss-stats to aggregate all open source contributions for yldio organisation members.
Content Model notes
This section serves as a information repository for some of our content models, stating what they represent and explaining some of their fields, if needed.
Speciality
This content type describe YLD's specialities (Design and engineering methodologies, technologies, models, patterns, etc). These specialities may or may not have their own page and that's decided based on the content.
- generate: a boolean value that indicates wether a page should be generate for the current speciality;
- Blogpost tags: comma-separated list of tags that should be considered when displaying the latest blog posts for the current speciality. By default, the speciality title is already added as a tag, so this fields are added to that base filtering.
Browser support
Browsers people are using to access our website, based on google analytics:
- 70% chrome
- 23% safari
- 3.5% firefox
- 0.15% IE
We current support:
- Chrome
- Firefox
- Safari
- Edge
We're working towards supporting IE11 & introducing graceful fallbacks for earlier versions (for where this sits in our priorities, see trello).
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent