docs(blog): add new article: 15 GitHub Repositories You’ll Wish You Found Sooner

[calebephrem]

What does this PR do?

• Adds new article: 15 GitHub Repositories You’ll Wish You Found Sooner
• Add proper indentation for headers (h1 and h2) in toc
• Add twitter-card looking like ui for pages and blog
• Make dark mode the default theme

Closes

• Closes Make dark mode the default theme #69

Type of change(s)

• Bug fix
• New feature
• Documentation update
• Style / UI change
• Refactor (no functional change)
• Performance improvement
• Other

Checklist

• I've tested this change locally and it works as expected
• bun run lint or npm run lint completes without warnings or errors
• bun run build or npm run build completes successfully
• My commit messages follow Conventional Commits (e.g. feat: ..., fix: ..., chore: ...)
• I've updated relevant documentation (README, comments, etc.) if needed
• I've removed any temporary debugging code (e.g. console.log)

[beetle-ai]

Summary by Beetle

This PR enhances the website's blog functionality with improved table of contents formatting, adds a new comprehensive GitHub repositories article, introduces Twitter card-style link previews for blog content, and switches the default theme from light to dark mode. The changes span across blog content, markdown rendering, styling, and theme configuration, creating a more polished and visually cohesive reading experience.

📁 File Changes Summary (Consolidated across all commits):

File	Status	Changes	Description
app/blog/[slug]/page.tsx app/pages/[slug]/page.tsx	Modified	+4/-0	Added rehypeRaw plugin to both blog and pages markdown renderers to support raw HTML elements (required for Twitter card-style link previews).
app/globals.css	Modified	+57/-25	Comprehensive styling updates: (1) Swapped default theme from light to dark mode with new color palette, (2) Added .card class styling for Twitter card-style link previews with flexbox layout, image handling, and hover effects, (3) Adjusted blockquote and markdown-alert padding for better spacing.
states/theme.ts	Modified	+2/-2	Changed default theme from "light" to "dark" and updated fallback logic to use current theme state instead of hardcoded light mode.
content/blog/android-developer-verification.md content/blog/discord-grid-ban-explained.md content/blog/top-15-amazing-github-repos.md	Modified	+160/-31	(1) Converted all second-level headers from ## to # for proper hierarchy, (2) Added Twitter card-style link previews (<a class="card">) with images and descriptions to blog articles, (3) Enhanced top-15-amazing-github-repos.md with card previews for all 15 repositories.
content/blog/coming-soon.md	Modified	+2/-2	Converted second-level headers from ## to # for consistent header hierarchy.
content/blog/how-discord-scams-work.md	Modified	+26/-27	(1) Converted all second-level headers from ## to # for proper hierarchy, (2) Marked article as featured by uncommenting featured: true frontmatter.
content/blog/top-15-amazing-github-repos.md	Added	+110/-0	New comprehensive article listing 15 high-quality GitHub repositories with descriptions, covering resources for learning algorithms, system design, open-source alternatives, ML, and more.
lib/markdown.tsx	Modified	+8/-4	Enhanced slugify() function to strip markdown link syntax [text](url) before generating slugs, preventing malformed anchor IDs in table of contents.
package.json	Modified	+1/-0	Added rehype-raw@^7.0.0 dependency to support raw HTML rendering in markdown.
bun.lock	Modified	+23/-0	Updated lock file with rehype-raw and its dependencies (entities, hast-util-from-parse5, hast-util-parse-selector, hast-util-raw, hast-util-to-parse5, parse5, vfile-location, web-namespaces).

Total Changes: 11 files changed, +393 additions, -91 deletions

🗺️ Walkthrough:

graph TD
A["Blog Content Rendering"] --> B["Markdown Parser"]
B --> C["rehypeRaw Plugin"]
C --> D["Raw HTML Support"]
D --> E["Twitter Card Links"]
F["Theme System"] --> G["Default: Dark Mode"]
G --> H["Color Palette"]
H --> I["CSS Variables"]
J["Blog Articles"] --> K["Header Hierarchy Fix"]
K --> L["Proper TOC Indentation"]
L --> M["Markdown Link Slugify"]
E --> N["Card Styling"]
N --> O["Flexbox Layout"]
O --> P["Image + Text Preview"]
Q["New Article"] --> R["15 GitHub Repos"]
R --> S["Resource Collection"]
S --> E
style A fill:#90a0ff
style G fill:#90a0ff
style R fill:#90a0ff
style E fill:#0f0f32
style N fill:#0f0f32

Loading

🎯 Key Changes:

• Table of Contents Indentation: Fixed second-level headers in blog articles by converting ## to # and adding conditional ml-sm text-xs classes to properly indent level-2 TOC items, improving visual hierarchy.
• Twitter Card-Style Link Previews: Introduced new .card class styling that renders links as rich preview cards with images, titles, descriptions, and footers—enabling blog authors to embed attractive link previews directly in markdown using raw HTML <a class="card"> elements.
• Markdown Link Slug Handling: Enhanced the slugify() function to strip markdown link syntax before generating anchor IDs, preventing malformed slugs like foobar-httpsfoobarcom and ensuring clean table of contents links.
• Dark Mode as Default: Switched the default theme from light to dark mode by updating CSS variables in :root and changing the theme state initialization, providing a modern dark aesthetic out of the box.
• New GitHub Resources Article: Added comprehensive "15 GitHub Repositories You'll Wish You Found Sooner" article featuring curated open-source resources with Twitter card previews for each repository, enhancing discoverability and visual appeal.
• Raw HTML Support in Markdown: Added rehype-raw plugin to markdown renderers, enabling authors to embed custom HTML elements (like the card previews) directly in markdown content while maintaining safety through controlled element rendering.
• Featured Article Flag: Uncommented the featured: true frontmatter in the Discord scams article, marking it for prominent display in the blog listing.

📊 Impact Assessment:

• Security: The addition of rehype-raw plugin requires careful consideration—while it enables rich HTML content, it could potentially expose XSS vulnerabilities if user-generated content is rendered. However, since this is a static blog with author-controlled content, the risk is minimal. The implementation should include content sanitization if user submissions are ever enabled.
• Performance: The new rehype-raw dependency adds a small bundle size increase (~23KB based on lock file additions), but this is negligible for a static site. The card styling uses efficient CSS flexbox with no JavaScript overhead. The enhanced slugify() function adds minimal computational cost (one regex replacement per heading).
• Maintainability: The code changes improve maintainability by (1) standardizing header hierarchy across blog articles, (2) providing a reusable .card component pattern for link previews, (3) centralizing theme configuration in a single state file. The markdown link slug fix prevents future bugs with malformed anchor IDs. However, the raw HTML card syntax in markdown is less maintainable than a dedicated React component would be—consider creating a custom markdown component for cards in future iterations.
• Testing: The PR lacks explicit test coverage for the new functionality. Recommended test additions: (1) unit tests for the enhanced slugify() function with markdown links, (2) visual regression tests for the .card styling across different viewport sizes, (3) integration tests verifying rehype-raw correctly renders card HTML without breaking markdown parsing, (4) theme switching tests to ensure dark mode loads correctly as default and light mode toggle works properly.

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

• Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
• Comment @beetle on any PR to start analysis manually
• Comment @beetle stop to stop any ongoing analysis

---

Follow us: Beetle · X · LinkedIn

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	rehype-raw@​7.0.0

View full report

[beetle-ai]

Converting all section headings from level 2 (##) to level 1 (#) breaks the markdown document hierarchy. A markdown document should have only one level 1 heading (the main title), with sections as level 2 and subsections as level 3. Multiple level 1 headings will cause issues with table of contents generation, document outline parsing, and semantic structure. This contradicts the PR goal of "improved table of contents formatting."

Confidence: 4/5

Suggested Fix

Revert the heading level changes. Keep the section headings at level 2 (##) instead of converting them to level 1 (#). The proper structure should be:

# Main Document Title (level 1 - only one per document)
## Section Heading (level 2)
### Subsection if needed (level 3)

If the intent is to improve visual hierarchy or styling, that should be handled through CSS in app/globals.css rather than changing the markdown structure itself.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In content/blog/android-developer-verification.md, the section headings have been changed from level 2 (##) to level 1 (#), which breaks proper markdown hierarchy. A document should have only one level 1 heading (the main title). Revert all section headings back to level 2 (##) to maintain proper document structure for table of contents generation and semantic parsing. If visual styling changes are needed, handle them through CSS instead.

📍 This suggestion applies to lines 13-117

[beetle-ai]

Same issue as Comment #1: Converting section headings from level 2 (##) to level 1 (#) breaks markdown document hierarchy. This file has the same heading level changes that violate proper markdown structure. See Comment #1 for detailed explanation and fix guidance.

Confidence: 5/5

Suggested Fix

Revert the heading level changes. Keep the section headings at level 2 (##) instead of converting them to level 1 (#):

Suggested change

	## What to expect

and

Suggested change

	## Why we're doing this

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In content/blog/coming-soon.md, revert the section headings from level 1 (#) back to level 2 (##). Lines 11 and 22 should use ## instead of # to maintain proper markdown hierarchy where only the main title is level 1.

📍 This suggestion applies to lines 11-22

[beetle-ai]

Converting all section headings from level 2 (##) to level 1 (#) breaks markdown document hierarchy. A document should have only one level 1 heading (the main title), with sections as level 2 and subsections as level 3. Multiple level 1 headings will cause issues with table of contents generation, document outline parsing, and semantic structure. This is the same issue as previously reported in Comments #1 and #2 for other blog files.

Confidence: 5/5

Suggested Fix

Revert all section headings back to level 2 (##). The proper structure should be:

Suggested change

	## What people were noticing

Suggested change

	## Discord's response

Suggested change

	## So why did a chessboard get flagged as CSAM?

Suggested change

	## The part that made it so much worse

Suggested change

	## Why this matters beyond one bad weekend

Suggested change

	## The takeaway

If the intent is to improve visual hierarchy or styling, that should be handled through CSS in app/globals.css rather than changing the markdown structure itself.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In content/blog/discord-grid-ban-explained.md, revert all section headings from level 1 (#) back to level 2 (##). Lines 16, 31, 43, 61, 77, and 85 should use ## instead of # to maintain proper markdown hierarchy where only the main title is level 1. This maintains consistency with proper markdown structure for table of contents generation.

📍 This suggestion applies to lines 16-85

[beetle-ai]

Same issue as Comments #1, #2, and #3: Converting section headings from level 2 (##) to level 1 (#) breaks markdown document hierarchy. This file has systematic heading level changes throughout (lines 18, 33, 35, 58, 78, 92, 111, 113, 128, 138, 163, 171, 173, 187, 201, 215, 236, 263, 265, 286, 295, 310, 321, 329, 340) that violate proper markdown structure. A document should have only one level 1 heading (the main title), with sections as level 2 and subsections as level 3.
See Comments #1, #2, and #3 for detailed explanation and fix guidance. The fix is to revert all section headings back to level 2 (##) instead of level 1 (#).

Confidence: 5/5

Suggested Fix

Revert all section headings from level 1 (#) back to level 2 (##). The proper structure should be:

Suggested change

	## Why These Scams Keep Working

Suggested change

	## Account & Credential Theft Scams

Suggested change

	### 1. The "Free Nitro" Gift Scam

And apply the same pattern throughout the document: main sections use ##, numbered subsections use ###.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In content/blog/how-discord-scams-work.md, revert all section headings from level 1 (#) back to level 2 (##). The numbered subsections (1-14) should use level 3 (###). This maintains proper markdown hierarchy where only the main title is level 1. Lines affected: 18, 33, 35, 58, 78, 92, 111, 113, 128, 138, 163, 171, 173, 187, 201, 215, 236, 263, 265, 286, 295, 310, 321, 329, 340. This is consistent with the fix needed in other blog files and maintains proper table of contents generation.

📍 This suggestion applies to lines 18-340

[devhub-bot]

Note

Linting checks passed successfully 🎉

All formatting and code quality checks are clean.

You're good to merge 🚀

[beetle-ai]

This new blog post uses Level 1 headings (#) for all 15 repository entries (lines 15, 21, 27, 33, 39, 45, 51, 57, 63, 69, 75, 81, 87, 96, 102, 108), which breaks proper markdown document hierarchy. A markdown document should have only one Level 1 heading (the main title from frontmatter), with section headings as Level 2 (##). Multiple Level 1 headings will cause issues with table of contents generation, document outline parsing, and semantic structure. This is the same issue already flagged in Comments #1-4 for other blog files in this PR.

Confidence: 5/5

Suggested Fix

Convert all repository entry headings from Level 1 (#) to Level 2 (##). For example:

Suggested change

	# 1. [Awesome Lists](https://github.com/sindresorhus/awesome) (by [Sindre Sorhus](https://github.com/sindresorhus))
	[sindresorhus/awesome](https://github.com/sindresorhus/awesome) is basically a huge collection of useful stuff for developers. It contains links to hundreds of carefully picked resources covering programming languages, tools, learning materials, software, and much much more. Think of it as a giant index of interesting things on the internet, all organized in one GitHub repository.
	<a class="card" href="https://github.com/sindresorhus/awesome">
	<div>
	<h1>Awesome</h1>
	<p>😎 Awesome lists about all kinds of interesting topics</p>
	<footer>sindresorhus/awesome</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/sindresorhus/awesome" alt="sindresorhus/awesome" />
	</a>
	# 2. [The Algorithms](https://github.com/thealgorithms) (by [The Algorithms](https://github.com/thealgorithms))
	[The Algorithms](https://github.com/thealgorithms) is a collection of open-source repositories that implement algorithms and data structures in different programming languages. It’s a great place to browse through real implementations, understand how algorithms work, and see how the same ideas are written across different languages.
	<a class="card" href="https://github.com/thealgorithms">
	<div>
	<h1>The Algorithms</h1>
	<p>Open Source resource for learning Data Structures & Algorithms and their implementation in any Programming Language</p>
	<footer>thealgorithms</footer>
	</div>
	<img src="https://avatars.githubusercontent.com/u/20487725?s=200&v=4" alt="thealgorithms" />
	</a>
	# 3. [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x) (by [CodeCrafters](https://github.com/codecrafters-io))
	[codecrafters-io/build-your-own-x](https://github.com/codecrafters-io/build-your-own-x) is a collection of guides that show you how to build things from scratch. It covers projects like databases, operating systems, programming languages, web servers, and other software, making it a great place to learn by actually building your favorite tools and technologies yourself.
	<a class="card" href="https://github.com/codecrafters-io/build-your-own-x">
	<div>
	<h1>Build Your Own X</h1>
	<p>Master programming by recreating your favorite technologies from scratch.</p>
	<footer>codecrafters-io/build-your-own-x</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/codecrafters-io/build-your-own-x" alt="codecrafters-io/build-your-own-x" />
	</a>
	# 4. [Free For Dev](https://github.com/ripienaar/free-for-dev) (by [@ripienaar](https://github.com/ripienaar))
	[ripienaar/free-for-dev](https://github.com/ripienaar/free-for-dev) is a huge list of free services and resources for developers. It covers everything from hosting and databases to APIs, monitoring, testing, and other tools, making it a handy place to look when you need something without spending money.
	<a class="card" href="https://github.com/ripienaar/free-for-dev">
	<div>
	<h1>Free For Dev</h1>
	<p>A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev</p>
	<footer>ripienaar/free-for-dev</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ripienaar/free-for-dev" alt="ripienaar/free-for-dev" />
	</a>
	# 5. [Free Programming Books](https://github.com/EbookFoundation/free-programming-books) (by [Free Ebook Foundation](https://github.com/EbookFoundation))
	[EbookFoundation/free-programming-books](https://github.com/EbookFoundation/free-programming-books) is a massive collection of free programming books and learning resources. It covers a wide range of programming languages and topics, making it an easy place to find something to learn without having to pay for a course or book.
	<a class="card" href="https://github.com/EbookFoundation/free-programming-books">
	<div>
	<h1>Free Programming Books</h1>
	<p>📚 Freely available programming books</p>
	<footer>EbookFoundation/free-programming-books</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/EbookFoundation/free-programming-books" alt="EbookFoundation/free-programming-books" />
	</a>
	# 6. [roadmap.sh](https://github.com/nilbuild/developer-roadmap) (by [Kamran Ahmed](https://github.com/nilbuild))
	[nilbuild/developer-roadmap](https://github.com/nilbuild/developer-roadmap) is a collection of roadmaps, guides, and educational content that help you figure out what to learn and in what order, with interactive visual roadmaps. It covers everything from frontend and backend development to DevOps, AI, databases, and more, making it useful when you’re not sure what to learn next.
	<a class="card" href="https://github.com/nilbuild/developer-roadmap">
	<div>
	<h1>roadmap.sh</h1>
	<p>Interactive roadmaps, guides and other educational content to help developers grow in their careers.</p>
	<footer>nilbuild/developer-roadmap</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/nilbuild/developer-roadmap" alt="nilbuild/developer-roadmap" />
	</a>
	# 7. [Computer Science](https://github.com/ossu/computer-science) (by [Open Source Society University](https://github.com/ossu))
	[ossu/computer-science](https://github.com/ossu/computer-science) is a complete, self-guided computer science curriculum made from free online courses and resources. It covers topics like programming, algorithms, computer systems, and theory, giving you a structured way to learn computer science on your own.
	<a class="card" href="https://github.com/ossu/computer-science">
	<div>
	<h1>Computer Science</h1>
	<p>🎓 Path to a free self-taught education in Computer Science!</p>
	<footer>ossu/computer-science</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ossu/computer-science" alt="ossu/computer-science" />
	</a>
	# 8. [Engineering Blogs](https://github.com/kilimchoi/engineering-blogs) (by [Kilim Choi](https://github.com/kilimchoi))
	[kilimchoi/engineering-blogs](https://github.com/kilimchoi/engineering-blogs) is a collection of engineering blogs from companies and developers around the world. It’s a great place to discover how real teams build, scale, and solve problems, while learning from their experiences along the way.
	## 1. [Awesome Lists](https://github.com/sindresorhus/awesome) (by [Sindre Sorhus](https://github.com/sindresorhus))

Suggested change

	# 1. [Awesome Lists](https://github.com/sindresorhus/awesome) (by [Sindre Sorhus](https://github.com/sindresorhus))
	[sindresorhus/awesome](https://github.com/sindresorhus/awesome) is basically a huge collection of useful stuff for developers. It contains links to hundreds of carefully picked resources covering programming languages, tools, learning materials, software, and much much more. Think of it as a giant index of interesting things on the internet, all organized in one GitHub repository.
	<a class="card" href="https://github.com/sindresorhus/awesome">
	<div>
	<h1>Awesome</h1>
	<p>😎 Awesome lists about all kinds of interesting topics</p>
	<footer>sindresorhus/awesome</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/sindresorhus/awesome" alt="sindresorhus/awesome" />
	</a>
	# 2. [The Algorithms](https://github.com/thealgorithms) (by [The Algorithms](https://github.com/thealgorithms))
	[The Algorithms](https://github.com/thealgorithms) is a collection of open-source repositories that implement algorithms and data structures in different programming languages. It’s a great place to browse through real implementations, understand how algorithms work, and see how the same ideas are written across different languages.
	<a class="card" href="https://github.com/thealgorithms">
	<div>
	<h1>The Algorithms</h1>
	<p>Open Source resource for learning Data Structures & Algorithms and their implementation in any Programming Language</p>
	<footer>thealgorithms</footer>
	</div>
	<img src="https://avatars.githubusercontent.com/u/20487725?s=200&v=4" alt="thealgorithms" />
	</a>
	# 3. [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x) (by [CodeCrafters](https://github.com/codecrafters-io))
	[codecrafters-io/build-your-own-x](https://github.com/codecrafters-io/build-your-own-x) is a collection of guides that show you how to build things from scratch. It covers projects like databases, operating systems, programming languages, web servers, and other software, making it a great place to learn by actually building your favorite tools and technologies yourself.
	<a class="card" href="https://github.com/codecrafters-io/build-your-own-x">
	<div>
	<h1>Build Your Own X</h1>
	<p>Master programming by recreating your favorite technologies from scratch.</p>
	<footer>codecrafters-io/build-your-own-x</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/codecrafters-io/build-your-own-x" alt="codecrafters-io/build-your-own-x" />
	</a>
	# 4. [Free For Dev](https://github.com/ripienaar/free-for-dev) (by [@ripienaar](https://github.com/ripienaar))
	[ripienaar/free-for-dev](https://github.com/ripienaar/free-for-dev) is a huge list of free services and resources for developers. It covers everything from hosting and databases to APIs, monitoring, testing, and other tools, making it a handy place to look when you need something without spending money.
	<a class="card" href="https://github.com/ripienaar/free-for-dev">
	<div>
	<h1>Free For Dev</h1>
	<p>A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev</p>
	<footer>ripienaar/free-for-dev</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ripienaar/free-for-dev" alt="ripienaar/free-for-dev" />
	</a>
	# 5. [Free Programming Books](https://github.com/EbookFoundation/free-programming-books) (by [Free Ebook Foundation](https://github.com/EbookFoundation))
	[EbookFoundation/free-programming-books](https://github.com/EbookFoundation/free-programming-books) is a massive collection of free programming books and learning resources. It covers a wide range of programming languages and topics, making it an easy place to find something to learn without having to pay for a course or book.
	<a class="card" href="https://github.com/EbookFoundation/free-programming-books">
	<div>
	<h1>Free Programming Books</h1>
	<p>📚 Freely available programming books</p>
	<footer>EbookFoundation/free-programming-books</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/EbookFoundation/free-programming-books" alt="EbookFoundation/free-programming-books" />
	</a>
	# 6. [roadmap.sh](https://github.com/nilbuild/developer-roadmap) (by [Kamran Ahmed](https://github.com/nilbuild))
	[nilbuild/developer-roadmap](https://github.com/nilbuild/developer-roadmap) is a collection of roadmaps, guides, and educational content that help you figure out what to learn and in what order, with interactive visual roadmaps. It covers everything from frontend and backend development to DevOps, AI, databases, and more, making it useful when you’re not sure what to learn next.
	<a class="card" href="https://github.com/nilbuild/developer-roadmap">
	<div>
	<h1>roadmap.sh</h1>
	<p>Interactive roadmaps, guides and other educational content to help developers grow in their careers.</p>
	<footer>nilbuild/developer-roadmap</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/nilbuild/developer-roadmap" alt="nilbuild/developer-roadmap" />
	</a>
	# 7. [Computer Science](https://github.com/ossu/computer-science) (by [Open Source Society University](https://github.com/ossu))
	[ossu/computer-science](https://github.com/ossu/computer-science) is a complete, self-guided computer science curriculum made from free online courses and resources. It covers topics like programming, algorithms, computer systems, and theory, giving you a structured way to learn computer science on your own.
	<a class="card" href="https://github.com/ossu/computer-science">
	<div>
	<h1>Computer Science</h1>
	<p>🎓 Path to a free self-taught education in Computer Science!</p>
	<footer>ossu/computer-science</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ossu/computer-science" alt="ossu/computer-science" />
	</a>
	# 8. [Engineering Blogs](https://github.com/kilimchoi/engineering-blogs) (by [Kilim Choi](https://github.com/kilimchoi))
	[kilimchoi/engineering-blogs](https://github.com/kilimchoi/engineering-blogs) is a collection of engineering blogs from companies and developers around the world. It’s a great place to discover how real teams build, scale, and solve problems, while learning from their experiences along the way.
	## 2. [The Algorithms](https://github.com/thealgorithms) (by [The Algorithms](https://github.com/thealgorithms))

Suggested change

	# 1. [Awesome Lists](https://github.com/sindresorhus/awesome) (by [Sindre Sorhus](https://github.com/sindresorhus))
	[sindresorhus/awesome](https://github.com/sindresorhus/awesome) is basically a huge collection of useful stuff for developers. It contains links to hundreds of carefully picked resources covering programming languages, tools, learning materials, software, and much much more. Think of it as a giant index of interesting things on the internet, all organized in one GitHub repository.
	<a class="card" href="https://github.com/sindresorhus/awesome">
	<div>
	<h1>Awesome</h1>
	<p>😎 Awesome lists about all kinds of interesting topics</p>
	<footer>sindresorhus/awesome</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/sindresorhus/awesome" alt="sindresorhus/awesome" />
	</a>
	# 2. [The Algorithms](https://github.com/thealgorithms) (by [The Algorithms](https://github.com/thealgorithms))
	[The Algorithms](https://github.com/thealgorithms) is a collection of open-source repositories that implement algorithms and data structures in different programming languages. It’s a great place to browse through real implementations, understand how algorithms work, and see how the same ideas are written across different languages.
	<a class="card" href="https://github.com/thealgorithms">
	<div>
	<h1>The Algorithms</h1>
	<p>Open Source resource for learning Data Structures & Algorithms and their implementation in any Programming Language</p>
	<footer>thealgorithms</footer>
	</div>
	<img src="https://avatars.githubusercontent.com/u/20487725?s=200&v=4" alt="thealgorithms" />
	</a>
	# 3. [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x) (by [CodeCrafters](https://github.com/codecrafters-io))
	[codecrafters-io/build-your-own-x](https://github.com/codecrafters-io/build-your-own-x) is a collection of guides that show you how to build things from scratch. It covers projects like databases, operating systems, programming languages, web servers, and other software, making it a great place to learn by actually building your favorite tools and technologies yourself.
	<a class="card" href="https://github.com/codecrafters-io/build-your-own-x">
	<div>
	<h1>Build Your Own X</h1>
	<p>Master programming by recreating your favorite technologies from scratch.</p>
	<footer>codecrafters-io/build-your-own-x</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/codecrafters-io/build-your-own-x" alt="codecrafters-io/build-your-own-x" />
	</a>
	# 4. [Free For Dev](https://github.com/ripienaar/free-for-dev) (by [@ripienaar](https://github.com/ripienaar))
	[ripienaar/free-for-dev](https://github.com/ripienaar/free-for-dev) is a huge list of free services and resources for developers. It covers everything from hosting and databases to APIs, monitoring, testing, and other tools, making it a handy place to look when you need something without spending money.
	<a class="card" href="https://github.com/ripienaar/free-for-dev">
	<div>
	<h1>Free For Dev</h1>
	<p>A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev</p>
	<footer>ripienaar/free-for-dev</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ripienaar/free-for-dev" alt="ripienaar/free-for-dev" />
	</a>
	# 5. [Free Programming Books](https://github.com/EbookFoundation/free-programming-books) (by [Free Ebook Foundation](https://github.com/EbookFoundation))
	[EbookFoundation/free-programming-books](https://github.com/EbookFoundation/free-programming-books) is a massive collection of free programming books and learning resources. It covers a wide range of programming languages and topics, making it an easy place to find something to learn without having to pay for a course or book.
	<a class="card" href="https://github.com/EbookFoundation/free-programming-books">
	<div>
	<h1>Free Programming Books</h1>
	<p>📚 Freely available programming books</p>
	<footer>EbookFoundation/free-programming-books</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/EbookFoundation/free-programming-books" alt="EbookFoundation/free-programming-books" />
	</a>
	# 6. [roadmap.sh](https://github.com/nilbuild/developer-roadmap) (by [Kamran Ahmed](https://github.com/nilbuild))
	[nilbuild/developer-roadmap](https://github.com/nilbuild/developer-roadmap) is a collection of roadmaps, guides, and educational content that help you figure out what to learn and in what order, with interactive visual roadmaps. It covers everything from frontend and backend development to DevOps, AI, databases, and more, making it useful when you’re not sure what to learn next.
	<a class="card" href="https://github.com/nilbuild/developer-roadmap">
	<div>
	<h1>roadmap.sh</h1>
	<p>Interactive roadmaps, guides and other educational content to help developers grow in their careers.</p>
	<footer>nilbuild/developer-roadmap</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/nilbuild/developer-roadmap" alt="nilbuild/developer-roadmap" />
	</a>
	# 7. [Computer Science](https://github.com/ossu/computer-science) (by [Open Source Society University](https://github.com/ossu))
	[ossu/computer-science](https://github.com/ossu/computer-science) is a complete, self-guided computer science curriculum made from free online courses and resources. It covers topics like programming, algorithms, computer systems, and theory, giving you a structured way to learn computer science on your own.
	<a class="card" href="https://github.com/ossu/computer-science">
	<div>
	<h1>Computer Science</h1>
	<p>🎓 Path to a free self-taught education in Computer Science!</p>
	<footer>ossu/computer-science</footer>
	</div>
	<img src="https://opengraph.githubassets.com/1/ossu/computer-science" alt="ossu/computer-science" />
	</a>
	# 8. [Engineering Blogs](https://github.com/kilimchoi/engineering-blogs) (by [Kilim Choi](https://github.com/kilimchoi))
	[kilimchoi/engineering-blogs](https://github.com/kilimchoi/engineering-blogs) is a collection of engineering blogs from companies and developers around the world. It’s a great place to discover how real teams build, scale, and solve problems, while learning from their experiences along the way.
	## 3. [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x) (by [CodeCrafters](https://github.com/codecrafters-io))

And apply the same pattern to all remaining entries (lines 33, 39, 45, 51, 57, 63, 69, 75, 81, 87, 96, 102). Also change the final heading on line 108 from # The End... to ## The End....

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In content/blog/top-15-amazing-github-repos.md, convert all repository entry headings from Level 1 (#) to Level 2 (##). Lines 15, 21, 27, 33, 39, 45, 51, 57, 63, 69, 75, 81, 87, 96, 102, and 108 should use ## instead of # to maintain proper markdown hierarchy where only the main title is Level 1. This maintains consistency with the markdown structure fixes needed in other blog files and ensures proper table of contents generation.

📍 This suggestion applies to lines 15-108

[beetle-ai]

The CSS comment syntax is broken. Line 56 opens a comment with /*[data-theme="dark"] { but the closing comment marker */ is placed on line 65 after the closing brace }*/. This creates invalid CSS because the comment spans multiple lines but the opening /* and closing */ are not properly paired. The entire dark mode theme block (lines 56-65) will be treated as a comment, which is likely the intent, but the syntax is malformed.
The issue is that line 56 should have the opening /* on its own or properly formatted, and line 65 should have the closing */ on its own line or properly formatted. Currently, the comment markers are embedded within the code structure in a way that could cause CSS parsing issues.

Confidence: 5/5

Suggested Fix

Suggested change

	/*
	[data-theme="dark"] {
	--accent: #90a0ff;
	--accent-muted: #90a0ff75;
	--bg-primary: #05050a;
	--bg-secondary: #080818;
	--bg-tertiary: #0f0f32;
	--text-primary: #e0e0e0;
	--text-secondary: #ccccd0;
	--text-tertiary: #8a8aaf;
	}
	*/

Properly format the multi-line comment by placing /* on its own line before the block and */ on its own line after the block. This ensures the CSS parser correctly recognizes the entire dark mode theme block as a comment.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In app/globals.css around lines 56-65, the CSS comment syntax for the dark mode theme block is malformed. The opening /* is embedded on line 56 with code, and the closing */ is embedded on line 65 with a closing brace. Properly format this as a multi-line comment by placing /* on its own line before the block and */ on its own line after the block to ensure correct CSS parsing.

📍 This suggestion applies to lines 56-65

[calebephrem]

De entire thing is commented out 💀

[beetle-ai]

@calebephrem I encountered an error while generating a response. Please try again.

[calebephrem]

yeah the thing that acts as h1 is the title prop (in the metadata), the rest i've done intentionally