ci(check): Add astro check step (withastro#2341)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

.github/workflows/ci.yml

@@ -15,6 +15,20 @@ env:
   NODE_OPTIONS: "--max_old_space_size=4096"
 
 jobs:
+  astrocheck:
+    name: Check for type issues with astro check
+    runs-on: ubuntu-latest
+    env:
+      FORCE_COLOR: true
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Tools & Dependencies
+        uses: ./.github/actions/install
+
+      - name: Run Check
+        run: pnpm run check
   eslint:
     name: Check for code issues with ESLint
     runs-on: ubuntu-latest
@@ -62,4 +76,4 @@ jobs:
         uses: ./.github/actions/install
 
       - name: Run Check
-        run: pnpm run test    
+        run: pnpm run test

package.json

@@ -8,6 +8,7 @@
     "build": "astro build",
     "test": "vitest",
     "preview": "astro preview",
+    "check": "astro check",
     "format": "pnpm run format:code",
     "format:ci": "pnpm run format:imports && pnpm run format:code",
     "format:code": "prettier -w . --cache --plugin-search-dir=.",

src/components/Aside.astro

@@ -33,8 +33,8 @@ const { viewBox, d } = icons[type];
 <aside class={`content ${type}`} aria-label={title}>
 	<p class="title" aria-hidden="true">
 		<span class="icon">
-			<svg xmlns="http://www.w3.org/2000/svg" {viewBox} width={16} height={16}>
-				<path fill-rule="evenodd" {d}></path>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}>
+				<path fill-rule="evenodd" d={d}></path>
 			</svg>
 		</span>
 		{title}

src/components/ContributorList.astro

@@ -9,10 +9,10 @@ export interface Props {
 const { githubRepo = 'withastro/docs' } = Astro.props as Props;
 const contributorsLink = `https://github.com/${githubRepo}/graphs/contributors`;
 
-const printError = (e) =>
+const printError = (e: Error) =>
 	console.warn(`[error]  /src/components/ContributorList.astro\n         ${e?.message ?? e}`);
 
-async function getContributors(repo, page = 1) {
+async function getContributors(repo: string, page = 1): Promise<{ login: string; id: number }[]> {
 	try {
 		const pageSize = 100;
 		const url = `https://api.github.com/repos/${repo}/contributors?per_page=${pageSize}&page=${page}`;
@@ -47,7 +47,7 @@ async function getContributors(repo, page = 1) {
 		}
 
 		return data;
-	} catch (e) {
+	} catch (e: any) {
 		printError(e);
 		return new Array();
 	}

src/components/DeployGuidesNav.astro

@@ -42,7 +42,7 @@ const services: Service[] = [
 ---
 
 <CardsNav
-	{minimal}
+	minimal={minimal}
 	class="deploy-guides-nav"
 	links={services.map(({ title, slug, supports }) => ({
 		title,

src/components/HeadCommon.astro

@@ -33,17 +33,19 @@ import '@fontsource/ibm-plex-mono/400-italic.css';
 <!-- Double-click to highlight code blocks (inline only). -->
 <script>
 	document.addEventListener('dblclick', (el) => {
-		if (el.target.nodeName !== 'CODE') {
-			return;
-		}
-		if (el.target.parentElement.nodeName === 'PRE') {
-			return;
-		}
+		const node = el.target as Node;
+		if (!node) return;
+		if (node.nodeName !== 'CODE') return;
+		if (node.parentElement?.nodeName === 'PRE') return;
+
 		let range = new Range();
-		range.setStart(el.target, 0);
-		range.setEnd(el.target, 1);
-		document.getSelection().removeAllRanges();
-		document.getSelection().addRange(range);
+		range.setStart(node, 0);
+		range.setEnd(node, 1);
+		const selection = document.getSelection();
+		if (selection) {
+			selection.removeAllRanges();
+			selection.addRange(range);
+		}
 	});
 </script>
 <!-- Fathom - beautiful, simple website analytics -->

src/components/Header/ThemeToggleButton.tsx

@@ -7,7 +7,7 @@ interface Props {
 		useLight: string;
 		useDark: string;
 	};
-	isInsideHeader: boolean;
+	isInsideHeader?: boolean;
 }
 
 const themes = ['light', 'dark'];

src/components/IntegrationsNav.astro

@@ -16,7 +16,7 @@ function categoryLinksFromPages(pages: MarkdownInstance<Frontmatter>[], category
 		.filter((page) => page.frontmatter.category === category)
 		.map((page) => {
 			const [scope, name] = page.frontmatter.title.split(' ').shift()!.split('/');
-			const pageUrl = page.url.replace('/en/', `/${lang}/`) + '/';
+			const pageUrl = page.url!.replace('/en/', `/${lang}/`) + '/';
 			return {
 				title:
 					'<span class="scope">' +

src/components/LeftSidebar/LeftSidebar.astro

@@ -60,13 +60,13 @@ if (isReference) {
 			type={'learn'}
 			defaultActiveTab={activeTab}
 			sidebarSections={learnSections}
-			{currentPageMatch}
+			currentPageMatch={currentPageMatch}
 		/>
 		<SidebarContent
 			type={'api'}
 			defaultActiveTab={activeTab}
 			sidebarSections={apiSections}
-			{currentPageMatch}
+			currentPageMatch={currentPageMatch}
 		/>
 		<li>
 			<CommunityMenu hideOnLargerScreens={true} />

src/components/NavGrid/Card.astro

@@ -16,7 +16,7 @@ const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props a
 	<BrandLogo brand={logo} />
 	<div class="stack">
 		<h3>
-			<a {href} aria-current={current ? 'page' : 'false'}>
+			<a href={href} aria-current={current ? 'page' : 'false'}>
 				<slot name="title" />
 			</a>
 		</h3>

src/components/NavGrid/CardsNav.astro

@@ -23,13 +23,11 @@ const currentPage = new URL(Astro.request.url).pathname;
 
 <section class:list={['cards-nav', classes]}>
 	<slot />
-	<Grid {minimal}>
+	<Grid minimal={minimal}>
 		{
 			links.map(({ href, logo, title, tags }) => (
 				<Card
-					{minimal}
-					{logo}
-					{href}
+					{...{ minimal, logo, href }}
 					current={currentPage.includes(href)}
 					class={Object.keys(tags || {}).join(' ')}
 				>

src/components/Video.astro

@@ -31,7 +31,7 @@ const defaultLang = fileCaptions.find((caption) => caption.lang == lang) ? lang
 	{
 		fileCaptions.map(({ lang, path }) => (
 			<track
-				label={languages[lang]}
+				label={languages[lang as keyof typeof languages]}
 				src={path}
 				kind="captions"
 				srclang={lang}

src/components/tabs/TabbedContent.astro

@@ -65,15 +65,15 @@ const { tabs } = Astro.props as Props;
 				tab.setAttribute('role', 'tab');
 				tab.setAttribute('id', this.id + 'tab' + this.count++);
 				tab.setAttribute('tabindex', '-1');
-				tab.parentNode.setAttribute('role', 'presentation');
+				tab.parentElement?.setAttribute('role', 'presentation');
 				if (!this.TabStore[i]) this.TabStore.push(new Set());
 				this.TabStore[i].add(tab);
 				if ('initial' in tab.dataset && tab.dataset.initial !== 'false') initialTab = i;
 
 				// Handle clicking of tabs for mouse users
 				tab.addEventListener('click', (e) => {
 					e.preventDefault();
-					const currentTab: HTMLElement = tablist.querySelector('[aria-selected]');
+					const currentTab = tablist.querySelector('[aria-selected]');
 					if (e.currentTarget !== currentTab) {
 						this.switchTab(e.currentTarget as HTMLElement, i);
 					}

src/components/tutorial/TutorialNav.astro

@@ -48,7 +48,7 @@ const isCurrentUnit = (unit: typeof units[number]) =>
 											href={`/${lang}/${lesson.slug}/`}
 											aria-current={currentUrl.endsWith(lesson.slug)}
 										>
-											<Progress path={lesson.url} />
+											<Progress path={lesson.url!} />
 											{index}. {lesson.frontmatter.title}
 										</a>
 									</div>

src/i18n/util.ts

@@ -99,19 +99,15 @@ export async function getNav(Astro: AstroGlobal): Promise<NavDict> {
  * ---
  * <FrameworkComponent label={t('articleNav.nextPage')} />
  */
-export function useTranslations(
-	Astro: Readonly<AstroGlobal>
-): (key: UIDictionaryKeys) => string | undefined {
+export function useTranslations(Astro: Readonly<AstroGlobal>): (key: UIDictionaryKeys) => string {
 	const lang = getLanguageFromURL(Astro.url.pathname) || 'en';
 	return useTranslationsForLang(lang as UILanguageKeys);
 }
 
-export function useTranslationsForLang(
-	lang: UILanguageKeys
-): (key: UIDictionaryKeys) => string | undefined {
+export function useTranslationsForLang(lang: UILanguageKeys): (key: UIDictionaryKeys) => string {
 	return function getTranslation(key: UIDictionaryKeys) {
 		const str = translations[lang]?.[key] || translations[fallbackLang][key];
-		if (str === undefined) console.error(`Missing translation for “${key}” in “${lang}”.`);
+		if (str === undefined) throw new Error(`Missing translation for “${key}” in “${lang}”.`);
 		return str;
 	};
 }

src/layouts/BaseLayout.astro

@@ -128,11 +128,11 @@ if (isFallback) canonicalURL.pathname = canonicalURL.pathname.replace(`/${lang}/
 	</head>
 
 	<body>
-		<Header {currentPage} />
+		<Header currentPage={currentPage} />
 		<main class="layout">
 			<aside id="left-sidebar" class="sidebar">
 				<slot name="primary-sidebar">
-					<LeftSidebar {currentPage} />
+					<LeftSidebar currentPage={currentPage} />
 				</slot>
 			</aside>
 			<aside id="right-sidebar" class="sidebar">

src/layouts/DeployGuideLayout.astro

@@ -1,14 +1,14 @@
 ---
 import MainLayout from './MainLayout.astro';
 import DeployGuidesNav from '../components/DeployGuidesNav.astro';
-import BrandLogo from '~/components/BrandLogo.astro';
+import BrandLogo, { Props as LogoProps } from '~/components/BrandLogo.astro';
 
-const brand = Astro.url.pathname.replace(/\/$/, '').split('/').pop();
+const brand = Astro.url.pathname.replace(/\/$/, '').split('/').pop() as LogoProps['brand'];
 ---
 
 <MainLayout {...Astro.props}>
 	<div class="image-wrapper">
-		<BrandLogo {brand} size="9rem" shape={brand === 'deno' ? 'circle' : 'rounded'} />
+		<BrandLogo brand={brand} size="9rem" shape={brand === 'deno' ? 'circle' : 'rounded'} />
 	</div>
 	<slot />
 	<DeployGuidesNav minimal />

src/layouts/MainLayout.astro

@@ -18,7 +18,7 @@ const overview = t('rightSidebar.overview');
 ---
 
 <BaseLayout {...Astro.props}>
-	<RightSidebar slot="secondary-sidebar" {content} {headings} {githubEditUrl} />
+	<RightSidebar slot="secondary-sidebar" {...{content, headings, githubEditUrl}} />
 	<PageContent {...{content, previous, next}}>
 		{
 			headings && (

src/pages/[lang]/404.astro

@@ -15,5 +15,5 @@ const t = useTranslations(Astro);
 </SplashLayout>
 
 <script>
-	window.addEventListener('load', () => window.fathom.trackGoal('4KN9VI2W', 0));
+	window.addEventListener('load', () => (window as any).fathom.trackGoal('4KN9VI2W', 0));
 </script>

src/pages/[lang]/[...fallback].astro

@@ -1,27 +1,27 @@
 ---
+import { MarkdownInstance } from 'astro';
 import languages from '../../i18n/languages';
 import { groupPagesByLang } from '../../util/groupPagesByLang';
 
 export async function getStaticPaths() {
-	const allPages = await Astro.glob('../**/*.{md,mdx}');
+	const allPages = await Astro.glob<MarkdownInstance<{}>>('../**/*.{md,mdx}');
 	const pagesByLang = groupPagesByLang(allPages);
 
 	const paths = [];
 	for (const { url } of pagesByLang.en) {
-		const slug = url.slice(4);
+		const slug = url!.slice(4);
 		for (const lang of Object.keys(languages)) {
 			if (lang === 'en') continue;
-			const doesNotNeedFallback = pagesByLang[lang]?.some((p) => p.url.endsWith(slug));
+			const doesNotNeedFallback = pagesByLang[lang]?.some((p) => p.url!.endsWith(slug));
 			if (doesNotNeedFallback) continue;
 			paths.push({ params: { lang, fallback: slug } });
 		}
 	}
 	return paths;
 }
 
-const { fallback } = Astro.params;
-const englishPages = await Astro.glob('../en/**/*.{md,mdx}');
-const { Content } = englishPages.find((p) => p.url.endsWith(fallback));
+const englishPages = await Astro.glob<MarkdownInstance<{}>>('../en/**/*.{md,mdx}');
+const { Content } = englishPages.find((p) => p.url!.endsWith(Astro.params.fallback as string))!;
 ---
 
 <Content />