Slidev Theme - NMT (Unofficial)

A Slidev theme based on the The unnamed - VS Code theme by Elio Struyf.

This (unofficial) theme is for use IT lecturers at North Metropolitan TAFE.

We are restricting the customisation ability, but welcome feedback.

Latest Update

• Add Announcement component (Skip to Components section)
• Update ReadMe.md
• Minor fixes to heading styles

Usage

Add the following front-matter to your slides.md.

Start Slidev then it will prompt you to install the theme automatically.

---
theme: nmt
---

Layouts

The theme currently has the following layouts:

• about-me
• center
• cover
• default
• end
• grid
• section
• two-cols
• two-cols-2-1
• image
• image-side
• and the ones from Slidev itself

Have included the Announcements component in the theme, which can be used in any layout.

The image layout adapted from

• https://github.com/alexanderdavide/slidev-theme-academic

Cover

Usage

---
layout: cover
---

About me

Usage

---
layout: about-me

helloMsg: Your Presenter
name: Adrian Gould
position: left
company: "North Metropolitan TAFE"
jobRole: "ASL | HelpDesk Admin | ScreenCraft Admin"
subjects: "SaaS, API Dev, IoT"
msTeams: "Teams: [email protected]"
website: "https://northmetrotafe.wa.edu.au"
github: "https://github.com/adygcode"
imageSrc: /ajg-designer.png
---

Center

Usage

---
layout: center
---

Section

Usage

---
layout: section
---

Two columns

Usage

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

Two columns 2-1

Usage

---
layout: two-cols-2-1
---

# Left

This shows on the left

::right::

# Right

This shows on the right

Default

Usage

---
layout: default
---

Components

Announcement component

A small component to add an announcement to a page.

Note: Experiencing issues with adding as an external dependency so moved code within theme. Separate package to be investigated further.

Used in the form:

<Announcement type="default" title="Default Note" inline compact >
    Just something to think about
</Announcement>

• Types:

  • type="type_identifier"
  • where type_identifier is one of:
    • brainstorm
    • duration
    • idea
    • default
    • info
    • important
    • priority
    • warning
    • error

• Options:

  • compact or compact="true|false"
    • a smaller sized version (optional, default false)
  • title="..."
    • title text (...) shown before the slot content (optional)
  • inline or inline="true|false"
    • allow multiple announcements on a line (optional, default false)
  • width="fit|full"
    • resizes to full width or fit to content (optional, default fit)

Icon Override

It is possible to override the icons:

<Announcement type="info" title="Heads up">
    Custom icon via slot
    <template #icon>
        <i class="i-fa7-solid-user-ninja h-5 w-5 mt-0.5"></i>
    </template>
</Announcement>

Parameters (PARAMETERS)

Replace the PARAMETERS with the option(s) you wish to employ.

The PARAMETERS are:

• compact or compact="true|false"
  • A smaller sized version
  • Optional
  • Default false (also when omitted)
• title="..."
  • Title text (...) shown before the slot content
  • Optional
• inline or inline="true|false"
  • Allow multiple announcements on a line
  • Optional
  • Default false (also when omitted)
• width="fit|full"
  • Resizes the announcement to full or content width
  • Optional
  • Default fit (also when omitted)
  • Resizes to full width
  • Or fit to content

Examples of Announcement Component

The variants are shown below:

Default Note

<Announcement type="default" title="Default Note">
    Just something to think about
</Announcement>

Idea

<Announcement type="idea" title="Idea" >
    A useful idea could be identified using this variant
</Announcement>

Brainstorm

<Announcement type="brainstorm" title="Brainstorm" inline>
    Use to identify when brainstorming of ideas is an activity
</Announcement>

Duration

<Announcement type="duration" title="Duration" >
    Use to identify how long a section could take
</Announcement>

Error

<Announcement type="error" title="Error" >
    Identify common errors, boo-boos and actual errors
</Announcement>

Warning

<Announcement type="warning" >
    Warn when an action could be dangerous, or should carefully be completed
</Announcement>

Information

<Announcement type="info" >
    Information that could be useful for the current section
</Announcement>

Important

<Announcement type="important" title="Important">
    When it is really important to complete an action
</Announcement>

Priority

<Announcement type="priority" compact width="full">
    Do or Read this before you do anything else
</Announcement>

Overriding icons

<Announcement type="info" title="Heads up">
    Custom icon via slot
    <template #icon>
        <i class="i-fa7-solid-user-ninja h-5 w-5 mt-0.5"></i>
    </template>
</Announcement>

Requirements

Following packages are required for use:

• 'unocss'
• '@iconify-json/fa7-brands'
• '@iconify-json/fa7-regular'
• '@iconify-json/fa7-solid'
• '@unocss/preset-icons'

You may manually install these using:

npm

npm i -D @unocss/preset-icons unocss
npm i -D @iconify-json/fa7-brands @iconify-json/fa7-regular 
npm i -D @iconify-json/fa7-solid

pnpm

pnpm i -D @unocss/preset-icons unocss
pnpm i -D @iconify-json/fa7-brands @iconify-json/fa7-regular 
pnpm i -D @iconify-json/fa7-solid