Merge pull request #501 from phanect/feat-typescriptify

Convert JavaScript files to TypeScript

astro.config.ts

@@ -9,19 +9,16 @@ import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import icon from 'astro-icon';
 import compress from 'astro-compress';
+import type { AstroIntegration } from 'astro';
 
 import astrowind from './vendor/integration';
 
-import {
-  readingTimeRemarkPlugin,
-  responsiveTablesRehypePlugin,
-  lazyImagesRehypePlugin,
-} from './src/utils/frontmatter.mjs';
+import { readingTimeRemarkPlugin, responsiveTablesRehypePlugin, lazyImagesRehypePlugin } from './src/utils/frontmatter';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const hasExternalScripts = false;
-const whenExternalScripts = (items = []) =>
+const whenExternalScripts = (items: (() => AstroIntegration) | (() => AstroIntegration)[] = []) =>
   hasExternalScripts ? (Array.isArray(items) ? items.map((item) => item()) : [items()]) : [];
 
 export default defineConfig({

package.json

@@ -59,11 +59,11 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
-    "rehype-plugin-image-native-lazy-loading": "^1.2.0",
     "sharp": "0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0"
+    "typescript-eslint": "^8.2.0",
+    "unist-util-visit": "^5.0.0"
   }
 }

src/utils/frontmatter.ts

@@ -1,17 +1,18 @@
 import getReadingTime from 'reading-time';
 import { toString } from 'mdast-util-to-string';
-import lazyLoadPlugin from 'rehype-plugin-image-native-lazy-loading';
+import { visit } from 'unist-util-visit';
+import type { MarkdownAstroData, RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark';
 
-export function readingTimeRemarkPlugin() {
+export const readingTimeRemarkPlugin: RemarkPlugin = () => {
   return function (tree, file) {
     const textOnPage = toString(tree);
     const readingTime = Math.ceil(getReadingTime(textOnPage).minutes);
 
-    file.data.astro.frontmatter.readingTime = readingTime;
+    (file.data.astro as MarkdownAstroData).frontmatter.readingTime = readingTime;
+  };
 };
-}
 
-export function responsiveTablesRehypePlugin() {
+export const responsiveTablesRehypePlugin: RehypePlugin = () => {
   return function (tree) {
     if (!tree.children) return;
 
@@ -19,7 +20,7 @@ export function responsiveTablesRehypePlugin() {
       const child = tree.children[i];
 
       if (child.type === 'element' && child.tagName === 'table') {
-        const wrapper = {
+        tree.children[i] = {
           type: 'element',
           tagName: 'div',
           properties: {
@@ -28,12 +29,20 @@ export function responsiveTablesRehypePlugin() {
           children: [child],
         };
 
-        tree.children[i] = wrapper;
-
         i++;
       }
     }
   };
-}
+};
 
-export const lazyImagesRehypePlugin = lazyLoadPlugin;
+export const lazyImagesRehypePlugin: RehypePlugin = () => {
+  return function (tree) {
+    if (!tree.children) return;
+
+    visit(tree, 'element', function (node) {
+      if (node.tagName === 'img') {
+        node.properties.loading = 'lazy';
+      }
+    });
+  };
+};

tsconfig.json

@@ -7,5 +7,6 @@
     "paths": {
       "~/*": ["src/*"]
     }
-  }
+  },
+  "exclude": ["dist/"]
 }

vendor/integration/index.ts

@@ -1,11 +1,12 @@
 import fs from 'node:fs';
 import os from 'node:os';
+import type { AstroConfig, AstroIntegration } from 'astro';
 
-import configBuilder from './utils/configBuilder';
+import configBuilder, { type Config } from './utils/configBuilder';
 import loadConfig from './utils/loadConfig';
 
-export default ({ config: _themeConfig = 'src/config.yaml' } = {}) => {
-  let cfg;
+export default ({ config: _themeConfig = 'src/config.yaml' } = {}): AstroIntegration => {
+  let cfg: AstroConfig;
   return {
     name: 'astrowind-integration',
 
@@ -24,7 +25,7 @@ export default ({ config: _themeConfig = 'src/config.yaml' } = {}) => {
         const virtualModuleId = 'astrowind:config';
         const resolvedVirtualModuleId = '\0' + virtualModuleId;
 
-        const rawJsonConfig = await loadConfig(_themeConfig);
+        const rawJsonConfig = (await loadConfig(_themeConfig)) as Config;
         const { SITE, I18N, METADATA, APP_BLOG, UI, ANALYTICS } = configBuilder(rawJsonConfig);
 
         updateConfig({
@@ -89,19 +90,19 @@ export default ({ config: _themeConfig = 'src/config.yaml' } = {}) => {
           const sitemapExists = fs.existsSync(sitemapFile);
 
           if (hasIntegration && sitemapExists) {
-            const robotsTxt = fs.readFileSync(robotsTxtFile, { encoding: 'utf8', flags: 'a+' });
+            const robotsTxt = fs.readFileSync(robotsTxtFile, { encoding: 'utf8', flag: 'a+' });
             const sitemapUrl = new URL(sitemapName, String(new URL(cfg.base, cfg.site)));
             const pattern = /^Sitemap:(.*)$/m;
 
             if (!pattern.test(robotsTxt)) {
               fs.appendFileSync(robotsTxtFileInOut, `${os.EOL}${os.EOL}Sitemap: ${sitemapUrl}`, {
                 encoding: 'utf8',
-                flags: 'w',
+                flag: 'w',
               });
             } else {
               fs.writeFileSync(robotsTxtFileInOut, robotsTxt.replace(pattern, `Sitemap: ${sitemapUrl}`), {
                 encoding: 'utf8',
-                flags: 'w',
+                flag: 'w',
               });
             }
           }

vendor/integration/utils/configBuilder.ts

@@ -2,7 +2,7 @@ import merge from 'lodash.merge';
 
 import type { MetaData } from '~/types';
 
-type Config = {
+export type Config = {
   site?: SiteConfig;
   metadata?: MetaDataConfig;
   i18n?: I18NConfig;