Skip to content
Compass Docs

Quick Start

In this guide, we’ll run you through how to:

  • Download, and install your own Compass instance
  • Customise to match your institution’s branding Stub
  • Add your first tab, and card!

Prerequisites

Before getting started, ensure you have the following installed:

Installing

  1. Clone the Repository

    Terminal window
    git clone https://github.com/leowilkin/compass.git
    cd compass

  2. Move into the App Directory

    Terminal window
    cd app

  3. Install Dependencies

    Terminal window
    npm install

  4. Start the Development Server

    Terminal window
    npm run dev

The app should now be running locally. Open your browser and navigate to http://localhost:4321/ (or your default Astro port) to see it in action.

Customising

Add your first tab

By default, Compass comes bundled with three blank tabs. However, should you wish to start from scratch, here is a guide explaining how to add a custom tab.

A tab is a collection of cards, like Sport, Safeguarding etc

  1. Create a new Component in src/components/Tabs/ in the format {Tab Name}Tab.astro by copying the contents of TemplateTab.astro

    • astro.config.mjs
    • package.json
    • src
    • Directorycomponents
      • DirectoryTabs
        • TemplateTab.astro
        • {TabName}Tab.astro
        • …
    • Directorypages/
      • …

  2. Replace {title} with your title. Do not include the curly braces.

  3. Replace {link} with the link to the app. Do not include the curly braces.

  4. Replace {svg} with the SVG path. See SVG Docs for more info.

  5. Add your tab to the Navbar by going to src/components/Nav.astro, and importing the Tab like this:

    src/components/Nav.astro
    import {Tab Name} from './Tabs/{Tab Name}Tab.astro'

    and by adding the Tab in the body like this:

    src/components/Nav.astro
    <{Tab Name} />

  6. Make the page by duplicating the template page named _template.astro, and renaming it to the link name.

  7. Change the variables in the file in curly brackets. Do not include the curly brackets.

Add your first card

Next, you’ll want to add cards to your page. By default, the template tab comes with a few blank cards, but should you want to learn how to create your own, here is a short guide explaining.

  1. Go to the page that you want to add the Card to. e.g. src/pages/academic.astro

  2. Copy and paste this template structure below the last card:

    src/pages/academic.astro
    <Card title=" " link=" " svg=" " />

  3. Fill in the details about Title and Link

  4. See SVG Docs for information about how to add an icon.