feat: migrate from jekyll to astro (#1162)

* feat: init astro project for rewriting origami page

* feat: origami documentation

* feat: add footer and more tidying up

* fix: fix the bug for styling

* fix: remove console.log

* feat: astro-storyblock-page

* fix: fix lockfile.json

* fix: merge with main

* feat: add footer and more tidying up

* fix: fix lockfile.json

* feat: origami documentation

* fix: fix the bug for styling

* fix: remove console.log

* feat: automatically generate secondary nav

* backstage: deploey to heroku

* backstage: add index.astro files in nested folders to generate secondary nav
- add readme
- add RUNBOOK

* feat: astr-blog-page

* backstage: improve devX by using build sevice and dropping SASS

* fix: removed console.log

* backstage: simplify style generation scrtipt and update readme

* backstage: move build serrvice styles inside layout

* feat: showing doc pages

* backstage: add code hightling

* docs: update mustache template with actual iframes

* feat: doclayout

* feat: add images

* feat: move the image asset to public folder

* backstage: move posts to content instead of pages

* backstage: update md frontmatter and render blogs correctly

* backstage: move emails to a content folder
move email helper scripts to the helpers folder
- fix issues with markdown rendering
- add missing parts in head component to render everything comepletly

* backstage: add chart.js script tags if frontmatter has hasCharts defined

* feat: principle moved into content

* feat: Document principle move to content

* feat: update naming principle to doc

* feat: change the schema

* backstage: - write astro page for email deployment
- refactor sending newsletter function

* backstage: recover old routing for md files to avoid redirects

* fix: the link on principles

* backstage: update readm and add scripts for sending the newsletter

* backstage: - add mdx integration
- update email template in astro file
- and EMIAL_SEND variable for sending emails
- add body tags around layout content

* fix: routing issue

* backstage: upate routing for components

* backstage: - create new component for doc layout that helps us to render content from md files
- refactor other pages that relied on this layout

* backstage: - remove redirect from md fiels and write them inside redirects.js
- remove all jekuill liquid templating from the md files

* backstage: remove commented out code

* backstage: - add 404
- add sitemap
- add RSS feed

* docs: update readme

* backstage: go fullon build service

* backstage: add custom email slug frontmatter data for handling old URLs

* backstage: update contact details

* fix: navigation bar
- rename content from documents to documentation to math the name of a content to a page path

* backstage: remove ruby related code

* backstage: add svelte init

* backstage: add initial components for barchart

* backstage: move graph to a blog

* backstage: update package.lock and work-spaces file

* backstage: simpplify secondary navbar API

* backstage: dont generate bar chart data on build or dev runs
update readme with instructions on how to generate data

* backstage: remove fs-jetpack from astro-website

* backstage: - add margin after the barchart
- remove p tags from mdx

* backstage: add comentary on barchsarts

* backstage: fix issue with build for new website

* backstage: update build script

* Update 2023-08-02-data-vis.mdx with links

* docs: Update 2023-08-02-data-vis.mdx - typo

* docs: update blog data-vis blog post

---------

Co-authored-by: Behnaz <[email protected]>
Co-authored-by: Lee Moody <[email protected]>

.github/labeler.yml

@@ -172,7 +172,7 @@ html:
   - apps/storybook/addons/html/**/*
 markdown-tabs:
   - apps/storybook/addons/markdown-tabs/**/*
+astro-website:
+  - apps/astro-website/**/*
 storybook:
   - apps/storybook/**/*
-website:
-  - apps/website/**/*

.github/workflows/build-websites.yml

@@ -18,10 +18,6 @@ jobs:
       with:
         node-version: 16.x
         cache: 'npm'
-    - uses: ruby/setup-ruby@v1
-      with:
-        ruby-version: 2.7.6
-        bundler-cache: true
     - run: npm i -g npm@7
     - run: npm ci
     - run: bash ./scripts/build-website.bash

.github/workflows/test.yml

@@ -175,10 +175,10 @@ jobs:
             - 'apps/storybook/addons/html/**'
           apps/storybook/addons/markdown-tabs:
             - 'apps/storybook/addons/markdown-tabs/**'
+          apps/astro-website:
+            - 'apps/astro-website/**'
           apps/storybook:
             - 'apps/storybook/**'
-          apps/website:
-            - 'apps/website/**'
   test:
     if: ${{ needs.changes.outputs.components != '[]' && needs.changes.outputs.components != '' }}
     needs: changes

app.json

@@ -8,9 +8,6 @@
     {
     "url": "https://github.com/raxod502/heroku-buildpack-git-lfs"
     },
-    {
-      "url": "heroku/ruby"
-    },
     {
       "url": "heroku/nodejs"
     }

apps/astro-website/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/astro-website/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode", "svelte.svelte-vscode"],
+  "unwantedRecommendations": []
+}

apps/astro-website/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/astro-website/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "*.mdx": "markdown"
+  }
+}

apps/astro-website/README.md

@@ -0,0 +1,61 @@
+# Origami [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
+
+This is the source code for the Origami website as well as a place to open up issues on Origami as a whole. Please visit [origami.ft.com] if you're looking for the documentation.
+
+## Editing this site
+
+This is a rough guide to editing this site, and where the content lives. The site is built using [Astro](https://docs.astro.build/en/getting-started).
+
+### Pages
+
+Pages live in the [`pages` folder](src/pages). We store them in this folder to avoid cluttering up the root path of the repo. Astro router is based on directory structure. Folder names are used to create the URL path, so `src/pages/documentation/index.astro` becomes `/documentation` on the site.
+
+Providing `index.astro` file in each directory also helps us to generate secondary navigations where needed. We automatically detect ancestor and children navigation items based on the directory structure and pathname of urls to generate breadcrumb navigation.
+
+### Styles
+
+For styling the site we are using [Origami build service](https://www.ft.com/__origami/service/build/v3/). Astro supports using SCSS out of the box but we had performance issues while hot reload updating on local development server. Using build service allows us to use bundled CSS for components, that has better performance and improves developer experience. All the bundled styles are loaded in the [Layout.astro](src/layouts/Layout.astro) file.
+
+### Technical documentation pages
+
+The actual documentation for Origami lives in the [`pages/documentation`](src/pages/documentation/) folder and it includes [`components`](src/pages/documentation/components), [`services`](src/pages/documentation/services), [`principles`](src/pages/documentation/principles), and [`tutorials`](src/pages/documentation/tutorials) folders. This should contain an easier-to-digest version of the Origami specification as well as in depth guides on how to use Origami.
+
+### Racing bar charts
+
+For Origami's ten year anniversary we created a racing bar chart to show the growth of Origami components over time. The data for this chart is stored in the [racing-bar-chart-data.json](src/content/barchart-data/component-data.json) file. The chart is rendered in the [RacingBarChart.astro](src/content/posts/2023-08-02-data-vis.mdx) blog post. The data for racing bar chart does not update manually and if you want to have fresh data for next deployment you will need to run `npm run generate-bar-chart-data` command.
+
+### Blog posts
+
+Blog posts live in the [`posts` folder](src/content/posts) and the file names are prefixed with the post date. Posts can include an `author` frontmatter value to signify who wrote the post, and an array of `tags` which are displayed alongside the post. The `description` frontmatter is particularly important for blog posts as it is displayed as a preview on the blog listing. The `publishDate` frontmatter for a date that newsletter was published. And `tldr` frontmatter is used to display a summary of the post before the main content. If it is omitted the description will be used instead.
+
+Newsletter blog posts must have an accompanying email, this is outlined in the section ["Authoring and sending a newsletter"](#authoring-and-sending-a-newsletter).
+
+## Authoring and sending a newsletter
+
+Writing the Origami monthly newsletter extends the instructions for blog posts, as we also publish an email to the FT's Product and Technology department.
+
+The process:
+
+1. Branch off `main` and create the required files. The format for the newsletter is strict, and you should probably copy an older newsletter to make sure it's correct. You need a file in this repo, replacing the date as appropriate (set to the expected published date):
+
+   - `src/content/posts/YYYY-MM-DD-newsletter.md`: for the blog post on the website
+
+2. Write the newsletter. This is best done in the blog post, as this is standard Markdown.
+
+3. Open a pull-request on this repo, and get it approved by another member of the team. Once approved, merge into master. This must be done _on_ or _after_ the publish date indicated by the post file name. The blog post is now published, check it on the live site.
+
+4. Now you'll need send the newsletter as an email. This is done from your machines CLI. To avoid copy/paste errors in the HTML we created [email page template](src/pages/emails/[slug].astro) in Astro. The email also has required front-matter: a `title` which becomes the subject of the email.
+
+5. **It is very important to review the email before sending it**. To review you can visit `emails/newsletter-YYYY-MM` locally or on [deployed site](https://origami.ft.com/). If you want to test the newsletter email prior to publishing, you can send email without `EMAIL_RECIPIENTS` variable defined. This will send email to all origami team members. If you are still developing email locally and want to an email received just by you you can use your personal email for `EMAIL_RECIPIENTS` variable (you will need to add `EMAIL_LOCAL=true` variable and you will also need to be running local development server on localhost:3000) and setting `EMAIL_SEND=true` should send a newsletter to your email.
+
+6. Once reviewed, run the following command to send the email: `EMAIL_SOURCE_HTML=YYYY-MM EMAIL_RECIPIENTS=XX@XX EMAIL_API_KEY=XXXXXX EMAIL_SEND=true npm run send-newsletter`, where `YYYY` and `MM` correspond to the year and month of the newsletter, `XX@XX` is the recipient email, and `XXXXXX` is an email platform API key (you can find this in the Origami vault).
+
+7. The email is sent! Enjoy
+
+## Running locally
+
+1. Install dependencies: `npm i`
+2. To run dev server: `npm run dev` or `npm run start`
+3. Visit <http://localhost:3000/>
+
+[origami.ft.com]: http://origami.ft.com/

apps/website/RUNBOOK.md → apps/astro-website/RUNBOOK.md

@@ -72,7 +72,7 @@ NotApplicable
 
 ## Architecture
 
-The Origami website is built using [Jekyll](http://jekyllrb.com/) and is hosted on [GitHub Pages](https://pages.github.com/). Commits on the `master` branch are automatically deployed.
+The Origami website is built using [Astro](http://astro.build/) and is hosted on [GitHub Pages](https://pages.github.com/). Commits on the `main` branch are automatically deployed.
 
 ## First Line Troubleshooting
 
@@ -100,7 +100,7 @@ This system has no data to recover, apart from Markdown stored in the GitHub rep
 
 ## Release Details
 
-The website is updated automatically when a new commit appears on the `master` branch.
+The website is updated automatically when a new commit appears on the `main` branch.
 
 ## Key Management Details
 

apps/astro-website/astro.config.mjs

@@ -0,0 +1,27 @@
+import {defineConfig} from "astro/config"
+import {fileURLToPath} from "url"
+import path, {dirname} from "path"
+import {redirects} from "./redirects"
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import svelte from '@astrojs/svelte';
+
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// https://astro.build/config
+export default defineConfig({
+	vite: {
+		resolve: {
+			alias: {
+				"@": `${path.resolve(__dirname, "src")}/`,
+			},
+		},
+	},
+	site: "https://origami.ft.com/",
+	compressHTML: true,
+	outDir: "../../origami.ft.com",
+	redirects: redirects,
+	integrations: [ mdx(), sitemap(), svelte()]
+})

apps/astro-website/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es6",
+    "paths": {
+      "@/*": ["./src/*"],
+    }
+  }
+}

apps/astro-website/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "astro-website",
+	"private": true,
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"author": "",
+	"license": "ISC",
+	"type": "module",
+	"volta": {
+		"node": "18.16.0",
+		"npm": "9.7.1"
+	},
+	"scripts": {
+		"generate-bar-chart-data": "node src/helpers/generate-bar-chart-data.js",
+		"dev": "astro dev",
+		"start": "astro dev",
+		"preview": "astro preview",
+		"astro": "astro",
+		"send-newsletter": "node src/helpers/email-newsletter.js"
+	},
+	"dependencies": {
+		"@astrojs/mdx": "^0.19.7",
+		"@astrojs/rss": "^2.4.3",
+		"@astrojs/sitemap": "^2.0.1",
+		"@astrojs/svelte": "^3.1.0",
+		"astro": "^2.9.0",
+		"axios": "^1.4.0",
+		"cheerio": "^1.0.0-rc.12",
+		"d3-array": "^3.2.4",
+		"d3-scale": "^4.0.2",
+		"html-to-text": "^9.0.5",
+		"markdown-it": "^13.0.1",
+		"sanitize-html": "^2.11.0",
+		"sass": "^1.63.4"
+	}
+}