Available at kurrawong.ai.
Written in Nuxt, Nuxt Content, Shadcn-vue and Tailwind.
To install, ensure pnpm is installed, then run:
pnpm installThen to run locally, run:
pnpm devWindows users may experience slow install & dev times or other issues. Add pnpm to Defender's list by running the following command in PowerShell as admin:
Add-MpPreference -ExclusionPath $(pnpm store path)This should help improve the speed of installing packages. See https://pnpm.io/installation#on-windows for details.
The Nuxt dev server may also take a long time to start and load in browsers. Instead of going to http://localhost:3000, try http://[::1]:3000. If your computer doesn't support that, try http://127.0.0.1:3000 instead.
See Nuxt Content docs for more info.
Pages are written in Markdown in the content/ folder.
The navbar content is dynamic with the pages file structure, meaning you don't need to update the nav when adding/removing pages.
You can specify the order of pages that appear in the nav by prefixing page titles/folders with numbers, e.g.:
4.tools/
1.index.md
2.prez.md
2.about.md
3.contact.md
1.index.md
Meta information and other data, defined in YAML, goes above the markdown seperated by ---, e.g.:
---
title: Page title
description: Meta description of the page
---
Markdown contentVue components to be used in Markdown pages are located in components/content/. To use them in Markdown pages, simply have a colon : before the name of the component, e.g.:
...
:MyComponent
or
:my-component
...
For components with slots, use two colons before the component name and two colons after the slot content. Named slots are prefixed with # and must go after the default slot. For example:
...
::ComponentDefaultSlot
Slot content goes here
::
::ComponentNamedSlot
Default slot content
#slotName
Named slot content
::
...
You can provide props to components by space-separating them in curly braces {}:
:MyComponent{prop1="value1" prop2="value2"}
For easily adding styled buttons in Markdown with the option of also being a link.
Usage:
::KButton{to="/"}
A button
::
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| to | string | The link for the button to point to. Can be an internal or external URL | ||
| variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "default" | The type or style of the button (see shadcn-vue for more info) | |
| size | "default" | "sm" | "lg" | "icon" | "default" | The size of the button (see shadcn-vue for more info) | |
| class | string | HTML classes, which can include Tailwind styling classes for convenience |
| Slot | Description |
|---|---|
| default | The button's contents |
For containers with borders, or "cards", with an optional title, subtitle, footer and image.
Usage:
::KCard{imgPosition="right" imgHalf}
Card content
#title
Card title
#description
Card description
#footer
Card footer
#img
::
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| imgPosition | "top" | "right" | "bottom" | "left" | "right" | The position of the image if included | |
| imgHalf | boolean | false | Whether the image should take up exactly half the width/height of the card | |
| class | string | HTML classes, which can include Tailwind styling classes for convenience |
| Slot | Description |
|---|---|
| default | The card's body |
| title | The title of the card |
| description | A smaller subtitle for the card |
| footer | A footer that goes below the card main body |
| img | An image that can be positioned with the imgPosition prop |
A simple utility component for easily wrapping other components in a CSS grid. You can configure the grid by using Tailwind classes on this component in Markdown.
Usage:
::KGrid{class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}
...
::
For making case study cards. Uses the KCard component underneath.
Usage:
::KCaseStudy{logo}
Card content
#title
Case Study: Title
#description
Card description
#img
{height="60"}
::
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| logo | boolean | false | Whether the image (if provided) should be in line with the title, for use with logos, instead of the image taking up half the card's width. |
| Slot | Description |
|---|---|
| default | The card's body |
| title | The title of the card |
| description | A smaller subtitle for the card |
| img | An image |
The hero component for the home page. Includes the graph diagram rendering.
For listing staff, including their position, bio and profile picture.
Usage:
::KPerson
The person's bio
#name
### Name
#position
_Position_
#img
{width="220"}
::
| Slot | Description |
|---|---|
| default | The person's bio |
| name | The person's name |
| position | The person's position |
| img | The profile picture |
See the NuxtImage docs for how to include images in Markdown files. The syntax is the same as regular Markdown, but you can provide extra props to be passed to the underlying <NuxtImg /> component, such as placeholder info, provider, quality, densities, etc.
The home page does content negotiation and also accepts the _mediatype query parameter like Prez to optionally serve RDF, e.g. https://kurrawong.ai/?_mediatype=text/turtle or with the header "Accept": "text/turtle".
The RDF is a Turtle file in server/assets/rdf.ttl. This RDF is also rendered as a graph diagram in the hero component on the home page.
Variables to be used in Tailwind classes must be defined as CSS variables in assets/css/tailwind.css. For colours, define them in HSL values without commas. You can also define dark mode-specific values inside the .dark class in that file.
For referencing colour variables elsewhere in CSS, use the convention var(--color-<variable>).