Adding a Training page

astro/astro.config.mjs

@@ -70,7 +70,7 @@ export default defineConfig({
           // Social Media
           'facebook', 'instagram', 'linkedin', 'rss-fill', 'tiktok', 'globe', 'mastodon', 'twitter',
           // Descriptive
-          'gift-fill', 'pencil-fill', 'people-fill', 'person-fill', 'puzzle-fill', 'stopwatch-fill', 'tools',
+          'bag-fill', 'file-earmark-text-fill', 'gift-fill', 'palette-fill', 'pencil-fill', 'people-fill', 'person-fill', 'puzzle-fill', 'stopwatch-fill', 'tools', 'universal-access-circle',
         ],
         // CoreUI Brands
         cib: [

astro/src/components/navigation/FooterLinkList.astro

@@ -34,7 +34,7 @@ import { Icon } from "astro-icon/components";
                   role="img"
                   aria-hidden="true"
                 />)
-              }{ branded ? <Branding text={name} /> : name}</ExternalLink>
+              }{ branded ? <Branding class="fix-left" text={name} /> : name}</ExternalLink>
             : <a {href} class="link-light footer-link">{
                 icon && (<Icon
                   class:list={["fli", iconCls]}
@@ -43,7 +43,7 @@ import { Icon } from "astro-icon/components";
                   role="img"
                   aria-hidden="true"
                 />)
-              }{ branded ? <Branding text={name} /> : name}</a>
+              }{ branded ? <Branding class="fix-left" text={name} /> : name}</a>
           }
         </li>
       ))}
@@ -58,5 +58,10 @@ import { Icon } from "astro-icon/components";
     height: 1em;
     width: auto;
     margin-right: 0.2em;
+
+    & + :global(.fix-left) {
+      display: inline;
+      margin-left: -0.33em;
+    }
   }
 </style>

astro/src/content.config.ts

@@ -30,6 +30,16 @@ const blogs = defineCollection({
   }),
 });
 
+const courses = defineCollection({
+  loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/courses" }),
+  schema: z.object({
+    title: z.string(),
+    icon: z.string(),
+    order: z.int().positive(),
+    cost: z.int().nonnegative(),
+  }),
+});
+
 const markdown = defineCollection({
   loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/markdown" }),
 });
@@ -255,6 +265,7 @@ export const collections = {
   atotw,
   blogs,
   collaborators,
+  courses,
   daf,
   // escapeRoomKits,
   escapeRoomThemes,

astro/src/content/courses/comprehensive-web.mdx

@@ -0,0 +1,10 @@
+---
+title: Comprehensive Web Accessibility
+icon: 'bi:globe'
+order: 3
+cost: 6000
+---
+
+import ExternalLink from "@components/ExternalLink.astro";
+
+This 12-hour training covers the ins and outs of web accessibility for content creators, designers, developers, and project managers. It includes an introduction to accessibility laws and the <ExternalLink inline href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</ExternalLink> standards, functional needs related to accessibility, and assistive technology. We will walk through how to meet the requirements for WCAG 2.2 A & AA standards. We typically break this course up into 2-3 hour segments with homework in between.

astro/src/content/courses/document.md

@@ -0,0 +1,8 @@
+---
+title: Document Accessibility
+icon: 'bi:file-earmark-text-fill'
+order: 6
+cost: 1000
+---
+
+This 60-minute training covers how to create accessible documents, emails, and spreadsheets in Microsoft and Google environments.

astro/src/content/courses/intro-digital.md

@@ -0,0 +1,8 @@
+---
+title: Intro to Digital Accessibility
+icon: 'bi:universal-access-circle'
+cost: 1500
+order: 1
+---
+
+This 90-minute training briefly covers accessibility standards and laws. It then focuses on web accessibility through the lens of the needs of people with disabilities. Learn how to create accessible content that broadens your audience and impact.

astro/src/content/courses/intro-ta11y.mdx

@@ -0,0 +1,10 @@
+---
+title: Intro to Accessibility Evaluations
+icon: ta11y-logo
+cost: 0
+order: 2
+---
+
+import ExternalLink from "@components/ExternalLink.astro"
+
+This 30-minute training introduces you to <ExternalLink inline gaps href="https://www.ta11y.org/">_ta11y.org_,</ExternalLink> a free accessibility evaluation tool. We will introduce you to the learning library and evaluation opportunities available.

astro/src/content/courses/procurement.md

@@ -0,0 +1,8 @@
+---
+title: Procuring Accessibly
+icon: 'bi:bag-fill'
+order: 7
+cost: 3000
+---
+
+This 3-hour training is designed for anyone purchasing accessible digital products and hardware. It covers an introduction to accessibility, how to read and verify a Voluntary Product Accessibility Template (VPAT),  and additional information about writing accessibility requirements into contracts.

astro/src/content/courses/social-media.md

@@ -0,0 +1,8 @@
+---
+title: Social Media Accessibility
+icon: 'bi:people-fill'
+cost: 1500
+order: 4
+---
+
+This 90-minute training covers how to make your content accessible on most major social media platforms. It will also discuss how accessibility principles can help expand your reach. Learn how to create accessible media content that broadens your audience and impact.

astro/src/content/courses/visualizations.md

@@ -0,0 +1,8 @@
+---
+title: Complex Images, Maps, and Data Visualizations
+icon: 'bi:palette-fill'
+order: 5
+cost: 2000
+---
+
+This 2-hour hands-on training provides a deep dive into describing images and creating text and other alternatives for images and visualizations, starting from the basics and working through how to handle maps and data visualizations. A picture may be worth 1,000 words, but we will teach you how to create efficient and meaningful descriptions and alternatives.

astro/src/content/navigation/projects.json

@@ -25,6 +25,9 @@
       "name": "Accessible Escape Room",
       "branded": true,
       "href": "/escape-room/"
+    }, {
+      "name": "Accessibility Training",
+      "href": "/training/"
     }, {
       "name": "Digital Evaluations",
       "href": "/evaluations/"

astro/src/pages/images/og/pages/[...name].ts

@@ -148,6 +148,27 @@ Your donation goes towards supporting our programs and technology to build disab
         position: ["center", "start"],
       },
     },
+    training: {
+      title: "Accessibility Training",
+      description:
+        "Accessible Community provides training courses on digital accessibility that are informed by professional expertise and lived experience with the diverse disabilities in our community.",
+      // border: {
+      //   color: [0, 255, 0],
+      //   width: 72,
+      //   side: 'inline-start',
+      // },
+      logo: {
+        path: "./public/images/favicon.png",
+        size: [72],
+      },
+      bgImage: {
+        path: "./src/images/colored-hero/classroom-blue.png",
+        fit: "fill",
+        position: ["end", "end"],
+      },
+      padding: 60,
+      cacheDir: false,
+    },
     volunteer: {
       title: "Volunteer at Accessible Community",
       description:

astro/src/pages/training/index.astro

@@ -0,0 +1,109 @@
+---
+import type { PageMetadata } from "@lib/types";
+
+import { getOpenGraphImageData } from "@lib/og-image";
+import { getCollection, render } from "astro:content";
+import { sortBy } from "lodash-es";
+
+import components from "@lib/mdx";
+import Branding from "../../components/Branding.astro";
+import FlexColumn from "../../components/FlexColumn.astro";
+import Hero from "../../components/Hero.astro";
+import { Icon } from "astro-icon/components";
+import Layout from "../../layouts/Layout.astro";
+import Row from "../../components/Row.astro";
+import ShadowBoxSection from "../../components/ShadowBoxSection.astro";
+import ThemedSection from "../../components/ThemedSection.astro";
+
+import heroBg from "../../images/colored-hero/classroom.png";
+
+const courses = sortBy(
+  await getCollection("courses"),
+  [(course) => course.data.order],
+);
+
+const title = "Accessibility Training";
+const metadata: PageMetadata = {
+  title,
+  description: "Accessibility Training Courses that Accessible Community offers",
+  image: getOpenGraphImageData(Astro.site, "pages", "training"),
+};
+---
+
+<Layout {title} {metadata}>
+  <Hero
+    image={heroBg}
+    slot="header"
+  >
+    <div class="py-4" slot="heading">
+      <h1 class="display-2 text-bg-hero mx-auto" style="--bs-bg-opacity: 0.6; max-width: 12em;">
+        <strong>Accessibility training</strong><br />
+        that accommodates you.
+      </h1>
+    </div>
+    <div slot="prologue" style="--bs-bg-opacity: 0.6">
+      Getting started in accessibility? Learn more with our <a
+        class="link-light"
+        href="/tips">Tip of the Week</a
+      >.
+    </div>
+  </Hero>
+
+  <ThemedSection styling="tertiary">
+    <h2 class="display-3 mb-4">
+      About our <strong>training</strong>.
+    </h2>
+    <p>
+      <Branding>Accessible Community</Branding> provides training courses on digital accessibility that are informed by professional expertise and lived experience with the diverse disabilities in our community. Our offerings range from a focused 60-minute, topic-centered instruction to in-depth, multi-day training sessions. We provide our training virtually unless other arrangements are made. As many people within your organization as you desire can attend, and you are welcome to record the training for internal use. We offer 1-2 hours of additional support through our office hours with the purchase of a course.
+    </p>
+
+    <div
+      class="border-top border-bottom border-primary-subtle mt-5 py-2 text-primary text-center"
+    >
+      Please <a href="mailto:info@accessiblecommunity.org">contact us</a> for more information or to schedule a course.
+    </div>
+  </ThemedSection>
+
+  <ShadowBoxSection id="ta11y" theme="primary-subtle" fluid={false}>
+    <h2 slot="lead" class="display-3 text-primary-emphasis text-center mb-4">
+      Our <strong>course</strong> catalog.
+    </h2>
+    <Row baseRowCols="1" lgRowCols="2" class="row-gap-4 my-4">
+      {
+        courses.map((c) => (
+          <FlexColumn class="feature col justify-content-between">
+            <div class="d-flex align-items-center gap-2 mb-1">
+              <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient">
+                <Icon class="bi" name={c.data.icon} aria-hidden="true" />
+              </div>
+              <h3 class="my-1 display-5 text-primary">
+                <Branding text={c.data.title} no-aria />
+              </h3>
+            </div>
+            <p class="ms-5 me-3 mb-2 text-brand">
+              <strong>Cost:</strong> {c.data.cost === 0 ? 'Free' : `\$${c.data.cost.toLocaleString('en')}`}
+            </p>
+            <div class="ms-5 me-3 flex-fill">
+              {render(c).then(({ Content }) => (
+                <Content {components} />
+              ))}
+            </div>
+          </FlexColumn>
+        ))
+      }
+    </Row>
+  </ShadowBoxSection>
+</Layout>
+
+<style>
+  .feature-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.75rem;
+  }
+
+  .feature-icon .bi {
+    height: 1.5em;
+    width: auto;
+  }
+</style>