feat: add open source projects section to homepage (#76)

* feat: add open source projects section to homepage

* fix: audit issues

Author: ywarezk

package.json

@@ -57,7 +57,6 @@
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@playwright/test": "^1.54.2",
-    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/istanbul-lib-coverage": "^2.0.6",
     "@types/istanbul-lib-report": "^3.0.3",
@@ -96,6 +95,8 @@
   },
   "pnpm": {
     "overrides": {
+      "lodash": "4.18.1",
+      "lodash-es": "4.18.1",
       "@astrojs/vercel>esbuild": "0.25.0",
       "mdast-util-to-hast": "13.2.1",
       "@mapbox/node-pre-gyp>tar": "7.5.11",
@@ -111,17 +112,10 @@
       "test-exclude>minimatch": "9.0.7",
       "flatted": "3.4.2",
       "yaml-language-server>ajv": "8.18.0",
-      "semantic-release>lodash-es": "4.17.23",
-      "@semantic-release/changelog>lodash": "4.17.23",
-      "@semantic-release/git>lodash": "4.17.23",
       "conventional-changelog-writer>handlebars": "4.7.9",
       "minimatch@3.1.4>brace-expansion": "1.1.13",
       "picomatch@^2.3.1": "2.3.2",
       "picomatch@^4.0.0": "4.0.4",
-      "mermaid>lodash-es": "4.17.23",
-      "chevrotain>lodash-es": "4.17.23",
-      "@chevrotain/cst-dts-gen>lodash-es": "4.17.23",
-      "@chevrotain/gast>lodash-es": "4.17.23",
       "mermaid>dompurify": "3.3.2",
       "yaml": "2.8.3"
     }

pnpm-lock.yaml

@@ -11,7 +11,7 @@ editUrl: false
 publishDate: 2024-09-09
 ---
 
-import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+import { Card } from '@astrojs/starlight/components';
 import CardContentCourse from '~/components/CardContent.astro';
 import LocalCourseCarousel  from '~/components/LocaleCourseCarousel.astro';
 import Hero from '~/components/Hero/Hero.astro';
@@ -50,4 +50,40 @@ import HomeFooter from '~/components/HomeFooter.astro';
 <br/>
 <LocalCourseCarousel title="Node.JS" courseLink="nodejs"/>
 
+## Open Source Projects
+
+Academeez is not only open-sourcing programming education, but also building interesting open source, MIT-licensed projects that are free to use.
+Click a project to learn more.
+If you find a project interesting, feel free to star it and contribute code.
+
+<div style="width: 100%;">
+  <Card>
+    <a
+      href="https://github.com/ywarezk/vscode-code-highlight"
+      style="display: block; width: 100%; color: inherit; text-decoration: none; border: 1px solid var(--sl-color-gray-5); border-radius: 0.75rem; padding: 1rem; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;"
+      onmouseenter="this.style.transform='translateY(-2px)'; this.style.borderColor='var(--sl-color-accent-high)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.12)'"
+      onmouseleave="this.style.transform='translateY(0)'; this.style.borderColor='var(--sl-color-gray-5)'; this.style.boxShadow='none'"
+    >
+      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
+        <img
+          src="/icons/vscode-code-highlight.png"
+          alt="vscode-code-highlight logo"
+          style="width: 44px; height: 44px; object-fit: contain;"
+        />
+        <h3 style="margin: 0;">vscode-code-highlight</h3>
+      </div>
+      <p style="margin: 0;">
+        A VS Code extension for highlighting code and adding notes, including a summary slideshow that presents marked snippets with their comments. It is ideal for developers who want to give lectures and document coding projects with focused code walkthroughs.
+      </p>
+      <img
+        src="/icons/add-notes.gif"
+        alt="vscode-code-highlight demo"
+        loading="lazy"
+        decoding="async"
+        style="display: block; width: 100%; margin-top: 0.9rem; border-radius: 0.6rem; border: 1px solid var(--sl-color-gray-5);"
+      />
+    </a>
+  </Card>
+</div>
+
 <HomeFooter />

public/icons/add-notes.gif

@@ -16,4 +16,21 @@ test.describe('homepage', () => {
 		const count = await thumbs.count();
 		expect(count).toBeGreaterThan(0);
 	});
+
+	test('open source project card links to vscode-code-highlight GitHub repo', async ({ page }) => {
+		await page.goto('/');
+
+		const projectLink = page.getByRole('link', { name: /vscode-code-highlight/i });
+		await expect(projectLink).toBeVisible();
+
+		const [response] = await Promise.all([
+			page.waitForEvent('response', (res) =>
+				res.url().startsWith('https://github.com/ywarezk/vscode-code-highlight')
+			),
+			projectLink.click(),
+		]);
+
+		expect(response.status()).toBeLessThan(400);
+		expect(page.url()).toContain('https://github.com/ywarezk/vscode-code-highlight');
+	});
 });