Warwick AI Website

This is the repo for the Warwick AI website, built to share info about the society to our members, and allow us to write and maintain educational and projects material.

The website is based on the astro-erudite template - which is an opinionated, unstyled static blogging template built with Astro

Note

This website is still being worked on! Please let us know if you spot any issues.

---

Features

• Astro's Islands architecture for selective hydration and client-side interactivity while maintaining fast static site rendering.
• shadcn/ui with Tailwind color conventions for automatic light and dark theme styling. Features accessible, theme-aware UI components for navigation, buttons, and more.
• Expressive Code for enhanced code block styling, syntax highlighting, and code block titles.
• Blog authoring with MDX for component-rich content and $\LaTeX$ math rendering via KaTeX.
• Astro View Transitions in SPA mode for smooth route animations.
• SEO optimization with granular metadata and Open Graph tag control for each post.
• RSS feed and sitemap generation.
• Subpost support for breaking long content into digestible parts and organizing related series.
• Author profiles with a dedicated authors page and multi-author post support.
• Project tags with a dedicated tags page for post categorization and discovery.
• Custom Callout component variants for enhanced technical writing.

Technology Stack

This is a list of the various technologies used to build this site:

Category	Technology Name
Framework	Astro
Styling	Tailwind
Components	shadcn/ui
Content	MDX
Codeblocks	Expressive Code, Shiki
Graphics	Figma
Deployment	Vercel

Getting Started

1. Clone the repository:

   git clone https://github.com/warwickai/website.git
   cd website

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit http://localhost:1234 to get started. The following commands are also available:

   Command	Description
   npm run start	Alias for npm run dev
   npm run build	Run type checking and build the project
   npm run preview	Previews the built project
   npm run astro	Run Astro CLI commands
   npm run prettier	Blanket format all files using Prettier

Customization

Site Configuration

Site config such as metadata, navbar and social links can be edited in src/consts.ts.

export const SITE: Site = {
  title: 'WAI',
  description: // ...
  href: 'https://warwick.ai',
  featuredPostCount: 2,
  postsPerPage: 3,
}

export const NAV_LINKS: SocialLink[] = [
  {
    href: '/blog',
    label: 'blog',
  },
  // ...
]

export const SOCIAL_LINKS: SocialLink[] = [
  {
    href: 'https://github.com/warwickai',
    label: 'GitHub',
  },
  // ...
]

Color Palette

Colors are defined in src/styles/global.css in OKLCH format, using the shadcn/ui convention:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}

[data-theme='dark'] {
  /* ... */
}

Favicons

Favicons are generated using RealFaviconGenerator. To adjust the favicons, replace the files in the public/ directory (such as favicon.ico, favicon.svg, apple-touch-icon.png, etc.) with your own. After updating the favicon files, you'll also need to adjust the references in src/components/Favicons.astro to match your new favicon filenames and paths:

<!-- Replace these with the generated meta tags -->
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Warwick AI" />
<link rel="manifest" href="/site.webmanifest" />

Adding Content

Blog Posts

Add new blog posts as MDX files in the src/content/blog/ directory. Use the following frontmatter structure:

---
title: 'Your Post Title'
description: 'A brief description of your post!'
date: 2024-01-01
tags: ['tag1', 'tag2']
image: './image.png'
authors: ['author1', 'author2']
draft: false
---

The blog post schema is defined as follows:

Field	Type (Zod)	Requirements	Required
title	string	Should be ≤60 characters.	Yes
description	string	Should be ≤155 characters.	Yes
date	coerce.date()	Must be in YYYY-MM-DD format.	Yes
order	number	Sort order for subposts with the same date. Defaults to 0 if not provided.	Optional
image	image()	Should be exactly 1200px × 630px.	Optional
tags	string[]	Preferably use kebab-case for these.	Optional
authors	string[]	If the author has a profile, use the id associated with their Markdown file in src/content/authors/ (e.g. if their file is named jane-doe.md, use jane-doe in the array).	Optional
draft	boolean	Defaults to false if not provided.	Optional

Authors

Add author information in src/content/authors/ as Markdown files. A file named [author-name].md can be associated with a blog post if "author-name" (the id) is added to the authors field:

---
name: 'benji'
pronouns: 'he/him'
avatar: '/path/to/images/fish.png'
bio: 'I am the WAI pet fish!'
website: 'https://warwick.ai'
github: 'https://github.com/warwickai'
mail: '[email protected]'
---

The author schema is defined as follows:

Field	Type (Zod)	Requirements	Required
name	string	n/a	Yes
pronouns	string	n/a	Optional
avatar	string.url() or string.startsWith('/')	Should be either a valid URL or a path starting with /. Preferably use Gravatar with the ?size=256 size parameter.	Yes
bio	string	n/a	Optional
mail	string.email()	Must be a valid email address.	Optional
website	string.url()	Must be a valid URL.	Optional
twitter	string.url()	Must be a valid URL.	Optional
github	string.url()	Must be a valid URL.	Optional
linkedin	string.url()	Must be a valid URL.	Optional
discord	string.url()	Must be a valid URL.	Optional

Tip

You can add as many social media links as you want, as long as you adjust the schema! Make sure you also support the new field in the src/components/SocialIcons.astro component.

Projects

Add projects in src/content/projects/ as Markdown files:

---
name: 'Project A'
description: 'This is an example project description! You should replace this with a description of your own project.'
tags: ['Framework A', 'Library B', 'Tool C', 'Resource D']
image: '/static/1200x630.png'
link: 'https://example.com'
startDate: '2024-01-01'
endDate: '2024-01-01'
---

The project schema is defined as follows:

Field	Type (Zod)	Requirements	Required
name	string	n/a	Yes
description	string	n/a	Yes
tags	string[]	n/a	Yes
image	image()	Should be exactly 1200px × 630px.	Yes
link	string.url()	Must be a valid URL.	Yes
startDate	coerce.date()	Must be in YYYY-MM-DD format.	Optional
endDate	coerce.date()	Must be in YYYY-MM-DD format.	Optional

License

This project is open source and available under the MIT License.