Get yarn.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
yarn install |
Installs dependencies |
yarn start |
Starts local dev server at localhost:4321 |
yarn run build |
Build your production site to ./dist/ |
yarn run preview |
Preview your build locally, before deploying |
yarn astro check |
Run a linter to check for errors and warnings |
After reading the following section, you should be able to perform the most common updates to the site.
The Navbar and Footer links are driven by the metadata.json file that is defined in the src/data folder.
All site pages are *name*.astro and *name*.md files defined ay any level within the src/pages folder. To reach an individual page in your browser you can simply walk the file system and construct the url accordingly.
Let's assume the following folder structure:
├── src/
│ └── pages/
│ │ ├── blog/
│ │ │ ├── post1.md
│ │ │ ├── post2.md
│ │ │ └── post3.md
│ │ │ └── index.astro
│ │ └── index.astro
The url to visit post1.md would be: /blog/post1. Notice that the index.astro files play a special role, as they are the default page under each single page folder. For example, if you visit: /blog, the /blog/index.astro file is the one served. Clearly, the site homepage is /pages/index.astro.
All you need to create a new page is a *name*.astro file with the following content:
---
import Layout from '@layouts/Layout.astro'
---
<Layout navbar>
<main>new page here</main>
</Layout>From here, the sky's the limit.
To create a new article add a *blogName*.md file in src/pages/blog. You must include all the necessary metadata in the frontmatter of your article for the post to be displayed properly. An example follows:
---
draft: true
token: '1234'
author: 'lda'
layout: '../../layouts/BlogPost.astro'
title: 'Hello world!'
description: "Bring your markdown, we'll handle the rest"
publishedDate: '2022-07-23'
tags:
- cloud
- devops
heroImage: 'introducing-astro.jpg'
---When a post is ready to go live, you can remove the draft attribute, so it can be indexed by algolia.
Notice that drafts go live under /blog/drafts/*blogName*. If you want you can provide a token attribute in the frontmatter to serve your article under /blog/drafts/*blogName*/*token*. The token is not a mandatory field.
The heroImage picture must be stored in the src/assets/blog folder and it must be of .jpg format. The tags are optional.
If your article body contains images, you want to use a .mdx file extension instead of .md. This is because you can import directly in your markdown an image optimizer module, which will make sure to keep your media content within a reasonable size. You can follow the example to see how it works:
---
author: 'lda'
category: 'blog'
...
---
import { Image } from 'astro:assets'
import hero from '../../assets/blog/mock.jpg'
# hello world
<Image alt='image' src={hero} />To know more about the props you can pass to the Image component, check out this link.
The blog page is completely driven by Algolia Instant Search. This means that while writing a draft, your article won't appear in the blog page. To see it, you can go directly to your article url, which is /blog/*blogName*. There, it will hot reload as you edit and save your changes.
Case studies are defined in the src/data/case-studies folder. Their format is md and they are structured as follows:
---
title: 'Electric eBike provider'
subtitle: 'Building the infrastructure for an electric powered bikes scheme'
outcome:
- 'JUXT built the backend infrastructure, dashboards, allocation logic and tracking for a bike-hire scheme in Spanish cities.'
- 'In addition, JUXT built the public kiosk software (using ClojureScript) for individuals to register and hire bikes.'
tech:
- 'Clojure'
- 'ClojureScript'
- 'Postgres'
- 'Datomic'
- 'AWS'
image: 'ebike-ui.jpg'
testimonial:
quote: 'The web applications exceeded our expectations on functionality and time to market. JUXT led the development team through this period of incredible achievements.'
role: 'Technical Director'
by: 'Morgan Ross'
pages: { '/case-studies': { 'weight': 9 } }
---For this specific case study to appear in the site, you need to specify in the pages object where you want it to appear. In this case, we want it to appear in the case-studies page, so we add a /case-studies key with a weight attribute. The weight attribute controls the position of the case study in the list.
For the case studies featured in the homepage, the process is the same. You can simply add an extra key value pair in the pages object as follows:
---
...
"pages": {
"/case-studies": { "weight": 9 },
"/": { "weight": 1 }
}
---The testimonial attribute is optional and it will only appear if you add it to the frontmatter.
Notice that the image for the case study must be a *.jpg file, stored in the src/assets/case-studies/ directory.
People are defined in the src/data/people folder. Their format is md and they are structured as follows:
---
code: 'alx'
name: 'Alex'
lastName: 'Davis'
jobTitle: 'Senior Software Engineer'
image: 'alx.jpg'
linkedin: ''
twitter: ''
github: ''
---A person's image must be a *.jpg file, stored in the src/assets/people/ directory. Not all employees need to create an entry. Though, when they decide to write an article they will need to create one.
For the employees who need a dedicated site page with info about their skills and achievements it's possible to add a set of extra keys in the frontmatter. The following example shows how to do it:
---
code: 'mal'
name: 'Malcolm'
lastName: 'Sparks'
jobTitle: 'CTO'
image: 'mal.jpg'
linkedin: ''
twitter: ''
github: ''
expert: true
expertise:
- 'Web Servers'
- 'Data Driven Apps'
- 'Performance'
---
## Successes
During the 80s he wrote a number of games...The expert key is used to determine if the person needs a dedicated page. The expertise key is used to display a list of skills in the dedicated page.
Moreover, the content of the dedicated page will be the markdown content that follows the frontmatter, so you can write as much as you want.
Finally, an employee can appear in the about page by adding the following key in the frontmatter:
---
...
featured:
weight: 2
...
---the weight attribute describes the order in which the employee will appear in the card list.
careers is a page that lists all the open positions in the company. To create a new opening, add a *.md file in the src/data/careers folder. The format is the following:
---
layout: '../../layouts/CareerPost.astro'
location: 'London / Remote'
department: 'Marketing'
contract: 'Full Time'
position: 'Head of Marketing'
draft: true
weight: 4
googleJobs:
{
location: 'London',
position: 'Head of Marketing',
publishedDate: '2021-03-11'
}
---
## Job Description
Want to ply a Clojure trade in the investment banking world working for JUXT? We build critical applications for our banking clients, using Clojure/ClojureScript along numerous tools and libraries in the ecosystem.
...The googleJobs attribute contains some metadata that will be picked up by Google to host the jobs in their platform. The draft attribute is used to hide the job from the list. The weight attribute is used to order the jobs in the list.
To see a single job you can visit the /careers/*jobName* url.
The Algolia indexing code is written in nbb. The script runs in netlify to make sure the index is always up to date with the latest changes. The script is located in algolia/index.cljs.
To manually rebuild the index, run yarn run algolia.