Fix builds (#585)

* WIP: Fix builds

* Update lockfile

.eleventy.js

@@ -1,13 +1,14 @@
-const htmlmin = require("html-minifier");
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const {Liquid} = require("liquidjs");
-const markdownIt = require("markdown-it");
+import htmlmin from "html-minifier";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import {Liquid} from "liquidjs";
+import markdownIt from "markdown-it";
+import octiconTag from "./js/octicons-liquid/tag.js";
 
 function watchAndPass(file, config) {
     config.addWatchTarget(file);
     config.addPassthroughCopy(file);
 }
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
     watchAndPass("./assets/js", eleventyConfig);
     watchAndPass("./assets/dist", eleventyConfig);
     watchAndPass("./assets/img", eleventyConfig);
@@ -53,7 +54,7 @@ module.exports = function (eleventyConfig) {
         root: ["_includes"]
     };
     const liquid = new Liquid(options);
-    liquid.registerTag('octicon', require("./js/octicons-liquid/tag.js"));
+    liquid.registerTag('octicon', octiconTag);
     eleventyConfig.setLibrary("liquid", liquid);
 
     // Customize markdown-it settings

apps/apps.liquid

@@ -4,7 +4,7 @@ pagination:
   size: 1
   alias: app
 permalink: "/apps/{{ app.data.slug | slug }}/index.html"
-layout: app.liquid
+layout: app
 ---
 
 {%- for item in pagination.items %}

eslint.config.js

@@ -0,0 +1,19 @@
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  eslintPluginPrettierRecommended,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+);

js/octicons-liquid/tag.js

@@ -1,7 +1,7 @@
 // From https://github.com/github/docs/blob/fa3bb7d4f5dcfdd1b998e1f6892000935e51c851/lib/liquid-tags/octicon.js
 
-const { TokenizationError } = require('liquidjs')
-const octicons = require('@primer/octicons')
+import { TokenizationError } from 'liquidjs'
+import octicons from '@primer/octicons'
 
 const OptionsSyntax = /([a-zA-Z-]+)="([a-zA-Z0-9\d-_\s]+)"*/g
 const Syntax = new RegExp('"(?<icon>[a-zA-Z-]+)"(?<options>(?:\\s' + OptionsSyntax.source + ')*)')
@@ -14,7 +14,7 @@ const SyntaxHelp = 'Syntax Error in tag \'octicon\' - Valid syntax: octicon "<na
  * {% octicon "check" %}
  * {% octicon "check" width="64" aria-label="Example label" %}
  */
-module.exports = {
+export default {
   parse (tagToken) {
     const match = tagToken.args.match(Syntax)
     if (!match) {

package.json

@@ -8,10 +8,10 @@
     "watch:eleventy": "eleventy --serve",
     "build": "eleventy",
     "lint": "eslint script/sync.ts",
-    "sync-data": "ts-node script/sync.ts"
+    "sync-data": "ts-node-esm script/sync.ts"
   },
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy": "^3.0.0-alpha.14",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@primer/css": "^21.0.0",
     "@primer/octicons": "^19.0.0",
@@ -26,17 +26,17 @@
   "devDependencies": {
     "@octokit/rest": "^21.0.0",
     "@types/node": "^20.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "npm-run-all2": "^6.0.0",
     "prettier": "^3.0.0",
-    "ts-node": "^10.5.0",
+    "ts-node": "^10.9.2",
     "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0-alpha.37",
     "yaml": "2.4.5"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "type": "module"
 }

script/sass.js

@@ -1,5 +1,5 @@
-const sass = require("sass");
-const fs = require("fs");
+import fs from 'fs';
+import sass from 'sass';
 
 const result = sass.renderSync({
   file: "assets/sass/styles.scss",

script/sync.ts

@@ -1,6 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
 import { Octokit } from "@octokit/rest";
-import YAML from "yaml";
-import fs from "fs";
+import * as YAML from "yaml";
+import * as fs from "fs";
+import { join, extname } from "path";
 
 function pad(number: number) {
   if (number < 10) {
@@ -12,8 +15,13 @@ function pad(number: number) {
 // Modified version of the toISOString polyfill from https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
 // because I couldn't find a function which outputs the dates like it happened on ruby
 // but the diff from the TS output and the ruby output should be as low as possible
-// @ts-expect-error
-Date.prototype.toRubyString = function () {
+declare global {
+  interface Date {
+    toRubyString(): string;
+  }
+}
+
+Date.prototype.toRubyString = function (this: Date) {
   return (
     this.getUTCFullYear() +
     "-" +
@@ -31,59 +39,57 @@ Date.prototype.toRubyString = function () {
 };
 
 const client = new Octokit({
-  auth: process.env.GITHUB_TOKEN || "",
+  auth: process.env.GITHUB_TOKEN ?? "",
 });
 
 function walk(directory: string, filepaths: string[] = []): string[] {
   const files = fs.readdirSync(directory);
-  for (let filename of files) {
-    const filepath = require("path").join(directory, filename);
+  for (const filename of files) {
+    const filepath = join(directory, filename);
     if (fs.statSync(filepath).isDirectory()) {
       walk(filepath, filepaths);
-    } else if (require("path").extname(filename) === ".md") {
+    } else if (extname(filename) === ".md") {
       filepaths.push(filepath);
     }
   }
   return filepaths;
 }
 
-const files = walk(require("path").join(__dirname, "..", "_apps"));
+const files = walk(join(__dirname, "..", "_apps"));
 
-files.forEach(async (path) => {
-  let data: string = "";
+for (const path of files) {
+  let data = "";
   try {
     try {
       // @ts-expect-error
-      data = fs
-        .readFileSync(path)
-        .toString()
-        .match(/^---(((?!---).|[\r\n])*)[\r\n]---$/m)[0];
+      data = /^---(((?!---).|[\r\n])*)[\r\n]---$/m.exec(
+        fs.readFileSync(path).toString(),
+      )[0];
     } catch {
       console.error(`Error parsing ${path}`);
       console.log(data);
       process.exit(1);
     }
-    let app = YAML.parse(data.replaceAll("---", ""));
+    const app = YAML.parse(data.replaceAll("---", ""));
     console.log(`Syncing ${app.title}`);
 
-    const repoName = app["repository"].split("/");
+    const repoName = app.repository.split("/");
     const repo = await client.rest.repos.get({
       owner: repoName[0],
       repo: repoName[1],
     });
     app.stars = repo.data.stargazers_count;
-    //@ts-expect-error
     app.updated = new Date(repo.data.pushed_at).toRubyString();
 
     if (app.host) {
       const statsFromServer = await fetch(app.host + "/probot/stats");
       if (statsFromServer.status === 200) {
-        let stats: Record<string, unknown> = YAML.parse(
-          await statsFromServer.text()
+        const stats: Record<string, unknown> = YAML.parse(
+          await statsFromServer.text(),
         );
         if (stats.popular) {
-          app.organizations = (<Array<unknown>>stats.popular).map(
-            (org: any) => org.login
+          app.organizations = (stats.popular as unknown[]).map(
+            (org: any) => org.login as string,
           );
         }
       }
@@ -93,7 +99,7 @@ files.forEach(async (path) => {
     content = content.replace(
       data,
       `---
-${YAML.stringify(app)}---`
+${YAML.stringify(app)}---`,
     );
     fs.writeFileSync(path, content);
     console.log(`Done for ${app.title}`);
@@ -107,4 +113,4 @@ ${YAML.stringify(app)}---`
     console.log(e);
     process.exit(1);
   }
-});
+}

script/watchsass.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const sass = require('sass');
+import fs from 'fs';
+import sass from 'sass';
 
 const result = sass.renderSync({
     file: "assets/sass/styles.scss",

tsconfig.json

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
         "strict": true,
-        "target": "ES2021",
-        "esModuleInterop": true,
+        "target": "ES2022",
+        "module": "ES2022",
         "moduleResolution": "node"
     },
     "ts-node": {},