Colophon

Custom components

I’ve created a couple of custom components that I use in various parts of my site.

`Tiged.astro`

I am often calling on my students to grab starter kits from my Instructor Repository and put them into their Student Workbook. To do that, I have them use the tiged command in the VS Code terminal.

For students new to programming, I have found this approach a lot faster and simpler than trying to guide them on how to handle zip files and put them in the right place. More importantly, I don’t have to mess around with creating or maintaining those zip files! I just have to put some starter code in my instructor repo!

---
import { Aside, Code, Steps } from '@astrojs/starlight/components';

/* Usage:

<Tiged
    repo="DG-InClass/SDEV-1150-A04-Jan-2026/"
    from="sk/lesson-04"
    to="./src/lesson-04" />

*/
interface Props {
    repo: string,
    from: string,
    to: string,
    read?: string
}

const { repo, from, to, read = 'ReadMe.md' }:Props = Astro.props;
const code = `pnpm dlx tiged --disable-cache --force ${repo}${from} ${to}`;
---

<Aside title="Starter Kit" icon="cloud-download">

For this demo, you need to have your <b>Student Workbook</b> open in Visual Studio Code.

<Steps>
    <ol>
        <li>
            Open the terminal window and paste in the following single line.

            <Code code={code} lang="ps" title="Run from the root of your repository" wrap={true} />
        </li>
        <li>
            Walk through the steps in the `{read}` of the new lesson.
        </li>
    </ol>
</Steps>
</Aside>

`When.astro`

In Jan 2026, I’ve been teaching few new courses, and I’ve been given lesson plans to follow in class. But sometimes the plan doesn’t match reality.

The <When /> component allows me to make a quick note about when the particular lesson was planned to be delivered and when it was actually delivered.

---
import { Aside } from '@astrojs/starlight/components';

/* Usage:

<When planned="Feb 1" actual="Feb 4" />

*/
interface Props {
    planned: string,
    actual?: string
}

const { planned, actual = "TBD" }:Props = Astro.props;
---

<Aside type="note" title="Scheduled">
    Planned for {planned} &ndash; Delivered on {actual}
</Aside>