Various Astro Check Issues

astro/package.json

@@ -21,20 +21,22 @@
     "@iconify-json/cib": "1.1.8",
     "@iconify-json/simple-icons": "1.2.67",
     "@plausible-analytics/tracker": "0.4.4",
+    "@popperjs/core": "^2.11.8",
     "astro": "^6.3.8",
     "astro-icon": "1.1.5",
     "astro-lazy-youtube-embed": "0.5.5",
     "astro-og-canvas": "0.11.1",
     "astro-robots-txt": "1.0.0",
     "bootstrap": "5.3.8",
     "lodash-es": "^4.18.1",
-    "@popperjs/core": "^2.11.8",
     "sanitize-html": "2.13.0",
     "sass": "1.77.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
+    "@types/bootstrap": "^5.2.11",
     "@types/lodash-es": "^4.17.12",
+    "@types/sanitize-html": "^2.16.1",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.14.0"
   }

astro/src/components/ExternalLink.astro

@@ -8,6 +8,8 @@ interface Props {
   gaps?: boolean;
   // Whether to force the link to be completely inline with surrounding text. Defaults to false.
   inline?: boolean;
+  // Defines the custom relationship between the linked resource and the current document. Defaults to .
+  rel ?: string;
 }
 
 const {
@@ -16,6 +18,7 @@ const {
   title = undefined,
   gaps = false,
   inline = false,
+  rel = "noopener noreferrer",
 } = Astro.props;
 
 import { Icon } from "astro-icon/components";
@@ -43,11 +46,11 @@ import { Icon } from "astro-icon/components";
   }
 </style>
 <a
-  href={href}
-  title={title}
+  {href}
+  {title}
   class:list={["icon-link", extraClasses, inline && "d-inline"]}
   target="_blank"
-  rel="noopener noreferrer"
+  {rel}
   >{
     /* prettier-ignore */
     gaps ?

astro/src/components/Hero.astro

@@ -8,7 +8,7 @@ interface Props {
   theme?: string;
   columns?: string;
   actionBreakpoint?: string;
-  actionBarItems?: number;
+  actionBarItems?: 1 | 2 | 3 | 4 | 5 | 6 | `${1 | 2 | 3 | 4 | 5 | 6}`;
 }
 
 const {

astro/src/components/HeroWithBreadcrumbs.astro

@@ -1,6 +1,5 @@
 ---
 import { getImage } from "astro:assets";
-import { isEmpty } from "lodash-es";
 
 import type { ImageMetadata } from "astro";
 import type { Breadcrumbs } from "@lib/types";

astro/src/components/SocialLinks.astro

@@ -4,11 +4,11 @@ import { Icon } from "astro-icon/components";
 
 // TODO: Not specific enough as a type
 export interface SocialLinkDictionary {
-  [index: string]: URL | undefined;
+  [index: string]: URL | string | undefined;
 }
 
 interface LinkConfig {
-  href: URL;
+  href: URL | string;
   icon: string;
   service: string;
   description: string;
@@ -23,7 +23,7 @@ interface Props {
 }
 
 const { links, label = "", iconSize = "2em", gap = 2 } = Astro.props;
-const brandingThemes = {
+const brandingThemes : Record<string, string> = {
   email: "primary",
 };
 
@@ -36,9 +36,9 @@ const socialLinks: Array<LinkConfig> = toPairs(links).map(([type, url]) => {
     else return `cib:${kebabCase(type)}`;
   })();
 
-  const href = type == "email" ? `mailto:${url}` : url;
-  const service = type == "linkedin" ? "LinkedIn" : startCase(type);
-  const description = type == "email" ? "address" : "profile";
+  const href = (type === "email" ? `mailto:${url}` : url) ?? "#";
+  const service = type === "linkedin" ? "LinkedIn" : startCase(type);
+  const description = type === "email" ? "address" : "profile";
   const theme = brandingThemes[type] ?? type;
 
   return {

astro/src/components/StaffList.astro

@@ -2,8 +2,10 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import { sortBy } from "lodash-es";
 
+type Roles = keyof CollectionEntry<"staff">["data"]["roles"];
+
 interface Props {
-  team: string; // TODO: declare enum;
+  team: Roles;
   size?: string;
 }
 

astro/src/components/TeamMemberBio.astro

@@ -7,9 +7,12 @@ import type { CollectionEntry } from "astro:content";
 import { components } from "../lib/mdx";
 import { render } from "astro:content";
 
+
+type Roles = keyof CollectionEntry<"staff">["data"]["roles"];
+
 interface Props {
   member: CollectionEntry<"staff">;
-  role: string | boolean;
+  role: Roles | boolean;
 }
 
 const { member, role = "default" } = Astro.props;

astro/src/components/ThemedColumn.astro

@@ -4,7 +4,7 @@ import type { Props as ThemedBoxProps } from "@components/ThemedBox.astro";
 
 import Column from "@components/Column.astro";
 
-interface Props extends ColumnProps, ThemedBoxProps {}
+interface Props extends Omit<ColumnProps, 'class' | 'style'>, ThemedBoxProps {}
 
 const {
   theme = undefined,

astro/src/components/TipLicense.astro

@@ -10,7 +10,10 @@ const { class: extraClasses = "" } = Astro.props;
 ---
 
 <div class={extraClasses}>
+  {/* TODO: Adjust astro to allow custom namespacing on tags
   <p class="text-center" xmlns:cc="http://creativecommons.org/ns#">
+   */}
+  <p class="text-center">
     This work is licensed under
     <ExternalLink
       inline

astro/src/components/TipRegistration.astro

@@ -1,16 +1,12 @@
 ---
 interface Props {
   theme?: string;
-  newsletters?: boolean;
-  announcements?: boolean;
   border?: number;
   defaultWidth?: boolean;
 }
 
 const {
   theme = "info-contrast",
-  newsletters = false,
-  announcements = false,
   border = 2,
   defaultWidth = false,
 } = Astro.props;

astro/src/layouts/DAFLayout.astro

@@ -16,7 +16,7 @@ import FlexColumn from "@components/FlexColumn.astro";
 import { Icon } from "astro-icon/components";
 import Metadata from "@components/Metadata.astro";
 
-const { metadata, title } = Astro.props;
+const { metadata } = Astro.props;
 if (!metadata.site) metadata.site = "Digital Accessibility Framework";
 
 const entries = await getCollection("daf");
@@ -275,12 +275,13 @@ const navLinks = Object.fromEntries(
   <script src="src/scripts/headings.js"></script>
   {
     import.meta.env.PROD && (
-      <script
-        is:inline
-        defer
-        data-domain="accessiblecommunity.org"
-        src="https://plausible.io/js/script.js"
-      />
+      <script>
+        import { init } from '@plausible-analytics/tracker';
+        init({
+          domain: 'accessiblecommunity.org',
+          bindToWindow: true
+        });
+      </script>
     )
   }
 </html>

astro/src/layouts/EscapeRoomLayout.astro

@@ -5,7 +5,6 @@ import { getEntry } from "astro:content";
 import Metadata from "../components/Metadata.astro";
 import Branding from "../components/Branding.astro";
 import Column from "../components/Column.astro";
-import FooterLinkList from "../components/navigation/FooterLinkList.astro";
 import HeaderER from "../components/HeaderER.astro";
 import { Icon } from "astro-icon/components";
 import Row from "../components/Row.astro";
@@ -139,12 +138,13 @@ const Socials = socialEntry?.data.groups[0];
     <script src="../scripts/body-no-scroll.js"></script>
     {
       import.meta.env.PROD && (
-        <script
-          is:inline
-          defer
-          data-domain="accessiblecommunity.org"
-          src="https://plausible.io/js/script.js"
-        />
+        <script>
+          import { init } from '@plausible-analytics/tracker';
+          init({
+            domain: 'accessiblecommunity.org',
+            bindToWindow: true
+          });
+        </script>
       )
     }
   </body>

astro/src/lib/blog.ts

@@ -1,42 +1,47 @@
-import { getCollection, getEntries, type CollectionEntry } from "astro:content";
+import type { CollectionEntry, ReferenceDataEntry } from "astro:content";
+
+import { getCollection, getEntries, } from "astro:content";
 import { isEmpty, isNil, reverse, sortBy, uniqBy } from "lodash-es";
 
+type Blog = CollectionEntry<"blogs">;
+type Blogs = Array<Blog>;
+
 export function formatAuthorName(author: CollectionEntry<"staff">): string {
   const { name, cited } = author.data;
   const { first, middle, last } = cited || name;
   return [first, middle, last].filter((n) => n).join(" ");
 }
 
 export async function getBlogAuthors(
-  blogs?,
+  blogs?: Blogs,
 ): Promise<Array<CollectionEntry<"staff">>> {
   blogs = isNil(blogs) ? await getCollection("blogs") : blogs;
   if (isEmpty(blogs)) return [];
   // Id uniqueness is key.
   const authorIDs = [...new Set(blogs.map((b) => b.data.author.id).flat())];
-  const authorRefs = authorIDs.map((id) => ({
+  const authorRefs: Array<ReferenceDataEntry<"staff">> = authorIDs.map((id) => ({
     id,
     collection: "staff",
   }));
   const authors: Array<CollectionEntry<"staff">> = await getEntries(authorRefs);
   return sortBy(authors, ["data.name.first"]);
 }
 
-export async function getBlogTopics(blogs?) {
+export async function getBlogTopics(blogs?: Blogs) {
   blogs = isNil(blogs) ? await getCollection("blogs") : blogs;
   if (isEmpty(blogs)) return [];
   const topics = [...new Set(blogs.map((blog) => blog.data.tags).flat())];
   topics.sort();
   return topics;
 }
 
-export async function getBlogDates(blogs?) {
+export async function getBlogDates(blogs?: Blogs) {
   blogs = isNil(blogs) ? await getCollection("blogs") : blogs;
   if (isEmpty(blogs)) return [];
 
   const dates = blogs.map((blog) => ({
     date: blog.data.published,
-    sort: `${blog.data.published.getYear()}.${blog.data.published.getMonth().toLocaleString(
+    sort: `${blog.data.published.getFullYear()}.${blog.data.published.getMonth().toLocaleString(
       'en-US', {
         minimumIntegerDigits: 2,
         useGrouping: false
@@ -56,7 +61,7 @@ export async function getBlogDates(blogs?) {
   );
 }
 
-export async function orderByRecent(blogs?) {
+export async function orderByRecent(blogs?: Blogs) {
   blogs = isNil(blogs) ? await getCollection("blogs") : blogs;
   if (isEmpty(blogs)) return [];
 
@@ -68,20 +73,20 @@ export async function orderByRecent(blogs?) {
   return sortedBlogs;
 }
 
-export async function getMostRecent(blogs?) {
+export async function getMostRecent(blogs?: Blogs) {
   const sortedBlogs = await orderByRecent(blogs);
   return sortedBlogs[0];
 }
 
 export interface BlogCatalog {
-  blogs: Array<CollectionEntry<"blogs">>;
+  blogs: Blogs;
   authors: Array<CollectionEntry<"staff">>;
   topics: Array<string>;
   dates: Array<string>;
-  recent: CollectionEntry<"blogs">;
+  recent: Blog;
 }
 
-export async function getBlogCatalog(blogs?): Promise<BlogCatalog> {
+export async function getBlogCatalog(blogs?: Blogs): Promise<BlogCatalog> {
   blogs = isNil(blogs) ? await orderByRecent(blogs) : blogs;
   const topics = await getBlogTopics(blogs);
   const authors = await getBlogAuthors(blogs);