Announcement - a Slidev Addon Component

A small component to add an announcement to a page.

Latest Update

• Fix errors in ReadMe.md

Installing Announcements

To add to your Slidev presentation use:

pnpm i slidev-addon-announcement --save

Alternatively, add to the addons section in your package.json:

"slidev": {
    "addons": [
        "slidev-addon-announcement"
    ]
}

Add the following to your slides.md:

---
addons:
  - announcement
---

Using Announcement

Used in the form:

<Announcement type="TYPE_IDENTIFIER" title="OPTIONAL_TITLE" PARAMETERS >
    Just something to think about
</Announcement>

Types

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

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 

Learn more about Slidev at the documentation.