-
Install
node8.13.0brew install n && n 8.13.0 -
Install
yarnnpm install -g yarn
-
Clone this repository
git clone https://github.com/unisonweb/unisonweb-org.git
-
Install dependencies
cd unisonweb-org && yarn install
-
Create
.envfilecp .env.example .env
-
Update
.envvariablesALGOLIA_INDEX_NAME= ALGOLIA_APP_ID= ALGOLIA_SEARCH_ONLY_KEY= ALGOLIA_ADMIN_KEY=These variables can be found in the following locations:
- The "API Keys" page in the Alogia app.
- The "Environment" section of Settings > Build & Deploy in the Netlify Dashboard.
-
Install gridsome
yarn global add @gridsome/cli
-
Start local webserver
gridsome develop
New members may be added to Netlify on the "Members" tab of the Unison Computing team.
Script analytics may be added to the site on the "Post processing" section of Settings > Build & Deploy in the Netlify Dashboard.
Documentation: https://www.netlify.com/docs/inject-analytics-snippets
- A new build is deployed every time the GitHub repo changes.
- Each build gets a unique URL to preview changes.
- All deploys can be viewed on the "Deploys" tab".
- Click any deploy to see the deploy log. From the deploy log screen, click "Preview deploy" to see what's been built.
- To publish changes to the live site, simply merge them into the
productionbranch.
- Form submissions are stored in the "Forms" tab.
- Outgoing notifications for form submiossions can be configured on the "Form notifications" section of Settings > Forms.
- Form data may be piped into 3rd party applications (i.e. Mailchimp, Sendgrid, Google Sheets) by connecting with a Zapier account.
- Add a custom domain.
- In your DNS settings, add a CNAME record with a
nameof "www" and avalueof "unisoncomputing-com.netlify.com". - Wait for DNS to propogate (usually < 5 mins).
- Website is live.
All editable content is located in src/data/.
-
Cookies Notice The wording for the cookies notice can be found in
src/data/components/cookies-notice.yml. -
Site Navigation A list of links can be found in
src/data/components/site-nav.yml. -
Docs Sidebar A list of links can be found in
src/data/components/doc-sidebar.yml. -
Docs Pages Page content is stored as markdown in
src/data/docs/.Each markdown file must include frontmatter with
titleanddescriptionproperties. These properties are used in the<title>and<meta name="description">tags in the<head>of each page:--- title: An Interesting Title description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ---
-
Blog Posts Post content is stored as markdown in
src/data/blog/posts/. Each markdown file should be namedindex.mdand placed into folder (along with related images) named like so:2019-04-04-writeup-of-our-first-unison-meetupThis ^ naming convention will yield the following permalink:
www.unisonweb.org/2019/04/04/writeup-of-our-first-unison-meetupIn addition to the
titleanddescriptionproperties, each markdown file's frontmatter must also include adate,author,slug(used to form the URL), andcategoriesproperty:--- slug: first-unison-meetup title: Writeup of our first Unison meetup description: placeholder date: 2019-04-04 author: Paul Chuisano categories: ["news"] ---
-
Blog Categories Categories are defined as markdown files in
src/data/blog/categories/.Each markdown file's frontmatter should include
id,title,emoji, andcolorproperties like so:--- id: engineering title: Engineering emoji: ⚛️ color: pink ---
The value for the
colorproperty should match the name of a color defined insrc/data/colors.yml.
The names and hex values for all colors used across the site are located in src/data/colors.yml. To change a color, simply call the palette() function with the name the color you'd like to reference.
.element {
color: palette(purple);
}By default, the palette() function will return the base hex value (defined the src/data/colors.yml). Optionally, you may pass a second argument to return the value of the related tone.
.element {
color: palette(blue, dark);
}All available tones are defined in src/assets/styles/config/_palettes.scss, and are listed below for your convenience:
xxx-dark: 80% darkxx-dark: 55% darkx-dark: 45% darkdark: 20% darkmid: 20% lightlight: 45% lightx-light: 60% lightxx-light: 75% lightxxx-light: 90% light
Codeblocks may include (optional) frontmatter for altering their appearance:
```unison
---
title: output
filename: filename
---
42, 9.7, 1e100, "hello", +99, -42, true, false -- various literals
```title can be any value with eight (8) characters or less. If the value of the title is set to output or ucm, the codeblock will be rendered with an alternate icon.
filename can be any value with fifty (50) characters or less.
By default, codeblocks are rendered with line numbers. Line numbers may optionally be changed to carets with show-carets: true, or hidden altogether with show-numbers: false.
Colors for syntax highlighting in codeblocks are defined in src/assets/styles/common/codeblock/_tokens.scss:
.token {
@at-root .un-codeblock & {
&.comment { color: palette(gray, light); }
&.char {}
&.string { color: palette(black); }
&.keyword { color: palette(green); }
&.import_statement {}
&.builtin { color: palette(blue); }
&.number { color: palette(green); }
&.operator { color: palette(green); }
&.hvariable { color: palette(gray, xx-dark); }
&.constant { color: palette(purple); }
&.punctuation { color: palette(pink); }
}
}Regex patterns to identify tokens are defined here: https://github.com/unisonweb/prism/blob/master/components/prism-unison.js.
Eventually, the regex patterns need to be updated to match the Unison language. Once complete, a PR should be submitted to include Unison syntax highlighting in the main repository.