Repository files navigation

Getyarn.

All commands are run from the root of the project, from a terminal:

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 themetadata.json file that is defined in thesrc/data folder.

All site pages are*name*.astro and*name*.md files defined ay any level within thesrc/pages folder. To reach an individual page in your browser you can simply walk the file system and construct theurl accordingly.

Let's assume the following folder structure:

├── src/│   └── pages/│   │   ├── blog/│   │   │   ├── post1.md│   │   │   ├── post2.md│   │   │   └── post3.md│   │   │   └── index.astro│   │   └── index.astro

Theurl to visitpost1.md would be:/blog/post1. Notice that theindex.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:

---importLayoutfrom'@layouts/Layout.astro'---<Layoutnavbar>  <main>new page here</main></Layout>

From here, the sky's the limit.

To create a new article add a*blogName*.md file insrc/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:truetoken:'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  -devopsheroImage:'introducing-astro.jpg'---

When a post is ready to go live, you can remove thedraft attribute, so it can be indexed by algolia.

Notice that drafts go live under/blog/drafts/*blogName*. If you want you can provide atoken attribute in the frontmatter to serve your article under/blog/drafts/*blogName*/*token*. Thetoken is not a mandatory field.

TheheroImage picture must be stored in thesrc/assets/blog folder and it must be of.jpg format. Thetags 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'importherofrom'../../assets/blog/mock.jpg'#hello world<Imagealt='image'src={hero} />

To know more about the props you can pass to theImage component, check out thislink.

The blog page is completely driven by Algolia Instant Search. This means that while writing a draft, your article won't appear in theblog 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 thesrc/data/case-studies folder. Their format ismd 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 thepages object where you want it to appear. In this case, we want it to appear in thecase-studies page, so we add a/case-studies key with aweight attribute. Theweight 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 thepages 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 thesrc/assets/case-studies/ directory.

People are defined in thesrc/data/people folder. Their format ismd 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 thesrc/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:trueexpertise:  -'Web Servers'  -'Data Driven Apps'  -'Performance'---##SuccessesDuring the 80s he wrote a number of games...

Theexpert key is used to determine if the person needs a dedicated page. Theexpertise 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...---

theweight 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 thesrc/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:trueweight:4googleJobs:{location:'London',position:'Head of Marketing',publishedDate:'2021-03-11'}---##Job DescriptionWant 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. Thedraft attribute is used to hide the job from the list. Theweight 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 inalgolia/index.cljs.

To manually rebuild the index, runyarn run algolia.