Chore/fix lint

.github/workflows/generator.yml

@@ -9,6 +9,7 @@ jobs:
         runs-on: ubuntu-latest
         permissions:
             contents: write
+            pull-requests: write
         steps:
             - name: Checkout
               uses: actions/checkout@v4
@@ -40,6 +41,18 @@ jobs:
                   NODE_VERSION: '22'
 
             - name: Commit and Push changes
+              id: auto-commit
               uses: stefanzweifel/git-auto-commit-action@v5
               with:
-                  commit_message: "chore: auto-generate data and og images"
+                  commit_options: '--no-verify'
+                  commit_message: 'chore: auto-generate data and og images'
+
+            - name: Comment on PR
+              if: steps.auto-commit.outputs.changes_detected == 'true'
+              uses: thollander/actions-comment-pull-request@v3
+              with:
+                  message: |
+                      ### Data Generation Update
+                      New data and OG images have been automatically generated. 
+                      Please **review the changes** and ensure that any missing **descriptions** or **colors** are filled in manually.
+                  github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint.yml

@@ -1,8 +1,8 @@
 name: Lint
 
 on:
-    push:
     pull_request:
+        branches: [main]
 
 jobs:
     lint:

.github/workflows/preview.yml

@@ -0,0 +1,63 @@
+name: Preview Deployment
+
+on:
+    pull_request:
+        types: [opened, synchronize, reopened]
+        branches: [main]
+
+jobs:
+    deploy-preview:
+        runs-on: ubuntu-latest
+        environment: production
+        permissions:
+            contents: read
+            deployments: write
+            pull-requests: write
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 10
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: pnpm
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Generate and Build
+              run: |
+                  pnpm generate:data
+                  pnpm generate:og
+                  pnpm build
+              env:
+                  NODE_VERSION: '22'
+
+            - name: Deploy Preview to Cloudflare Pages
+              id: preview
+              uses: cloudflare/wrangler-action@v3
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  command: pages deploy dist --project-name=4byte-dev --branch=${{ github.head_ref }}
+                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+                  wranglerVersion: '3'
+
+            - name: Add or Update PR Comment
+              uses: marocchino/sticky-pull-request-comment@v2
+              with:
+                  header: preview-url
+                  message: |
+                      **Preview Deployment is Ready!**
+
+                      You can test the updates in this PR in a live environment by clicking the link below:
+                      [View Preview](${{ steps.preview.outputs.deployment-url }})
+
+                      *(This environment is specific to this PR and does not affect the `main` branch. The content at this link will update automatically when you push new commits to the PR.)*

scripts/generate-og.mjs

@@ -67,9 +67,9 @@ async function makeSvg(title, color, isArticle, lang = 'en', logo) {
 												type: 'img',
 												props: {
 													src: `data:image/png;base64,${logo}`,
-													height: 48
+													height: 48,
 												},
-											}
+											},
 										],
 									},
 								},
@@ -146,7 +146,7 @@ async function makeSvg(title, color, isArticle, lang = 'en', logo) {
 									type: 'img',
 									props: {
 										src: `data:image/png;base64,${logo}`,
-										height: 48
+										height: 48,
 									},
 								},
 								{

src/components/LanguageSelector.astro

@@ -35,7 +35,7 @@ const dropdownClass = isUp
 	>
 		<span class="i-lucide-globe w-4 h-4"></span>
 		<span data-lang-code>{langLabels?.[currentLang] || currentLang.toUpperCase()}</span>
-		{!isUp && <span data-lang-chevron class="i-lucide-chevron-down w-3 h-3 transition-transform"></span>}
+		{!isUp && <span data-lang-chevron class="i-lucide-chevron-down w-3 h-3 transition-transform" />}
 	</button>
 
 	<div

src/components/Sidebar.astro

@@ -15,8 +15,21 @@ interface Props {
 
 const { lang, currentPath, labels } = Astro.props
 
-const categories = lang === 'en' ? categoriesEn : categoriesTr
-const tags = lang === 'en' ? tagsEn : tagsTr
+interface Category {
+	slug: string
+	name: string
+	description: string
+	articleCount: number
+}
+
+interface Tag {
+	slug: string
+	name: string
+	articleCount: number
+}
+
+const categories: Category[] = lang === 'en' ? categoriesEn : categoriesTr
+const tags: Tag[] = lang === 'en' ? tagsEn : tagsTr
 
 const navLabels = labels.nav as Record<string, string> | undefined
 const themeLabels = labels.theme as Record<string, string> | undefined

src/components/TopBar.astro

@@ -12,7 +12,12 @@ interface Props {
 
 const { lang, currentPath, labels } = Astro.props
 
-const rawArticles = lang === 'en' ? rawArticlesEn : rawArticlesTr
+interface Article {
+	slug: string
+	title: string
+}
+
+const rawArticles: Article[] = lang === 'en' ? rawArticlesEn : rawArticlesTr
 const mappedArticles = rawArticles.map((a) => ({
 	id: a.slug,
 	title: a.title,

src/data/en/articles.json

@@ -1 +1 @@
-[]
+[]

src/data/en/categories.json

@@ -1 +1 @@
-[]
+[]

src/data/en/tags.json

@@ -1 +1 @@
-[]
+[]

src/data/tr/articles.json

@@ -1 +1 @@
-[]
+[]

src/data/tr/categories.json

@@ -1 +1 @@
-[]
+[]

src/data/tr/tags.json

@@ -1 +1 @@
-[]
+[]

src/i18n/index.ts

@@ -42,7 +42,7 @@ export function getOtherLang(currentLang: string): string {
 	return SUPPORTED_LANGS.find((l) => l !== currentLang) || DEFAULT_LANG
 }
 
-export function getHreflangLinks(currentPath: string, currentLang: string): Array<{ lang: string; href: string }> {
+export function getHreflangLinks(currentPath: string): Array<{ lang: string; href: string }> {
 	const links: Array<{ lang: string; href: string }> = []
 	for (const lang of SUPPORTED_LANGS) {
 		const href = getAlternatePath(lang, currentPath)

src/layouts/BaseLayout.astro

@@ -39,7 +39,7 @@ const siteName = SITE.name
 const fullTitle = title ? `${title} | ${siteName}` : siteName
 const langConfig = LANGUAGES[currentLang as keyof typeof LANGUAGES]
 
-const hreflangLinks = getHreflangLinks(currentPath, currentLang)
+const hreflangLinks = getHreflangLinks(currentPath)
 
 const jsonLdWebSite = {
 	'@context': 'https://schema.org',

src/layouts/DocsLayout.astro

@@ -2,7 +2,6 @@
 import BaseLayout from './BaseLayout.astro'
 import Sidebar from '../components/Sidebar.astro'
 import TopBar from '../components/TopBar.astro'
-import { DEFAULT_LANG, LANGUAGES } from '../helper.mjs'
 import { getLangFromUrl, loadLabels, t } from '../i18n/index.ts'
 
 interface Props {

src/pages/categories/[slug].astro

@@ -5,26 +5,26 @@ import categoriesTr from '../../data/tr/categories.json'
 import categoriesEn from '../../data/en/categories.json'
 import { getLangFromUrl, t } from '../../i18n/index.ts'
 
+interface Category {
+	slug: string
+	name: string
+	description: string
+	articleCount: number
+}
+
 const lang = getLangFromUrl(Astro.url)
-const categories = lang === 'en' ? categoriesEn : categoriesTr
 const labels = await import(`../../data/${lang}/labels.json`).then((m) => m.default)
 
 export async function getStaticPaths() {
 	const allArticles = await getCollection('articles')
 	const paths = []
 
-	for (const lang of ['tr', 'en']) {
-		const langCategories = lang === 'en' ? categoriesEn : categoriesTr
+	for (const currentLang of ['tr', 'en']) {
+		const langCategories: Category[] = currentLang === 'en' ? categoriesEn : categoriesTr
 		for (const cat of langCategories) {
-			const catArticles = allArticles.filter(
-				(a) =>
-					a.data.lang === lang &&
-					a.data.category.toLowerCase().replace(/\s+/g, '-') === cat.slug &&
-					a.data.status === 'Published',
-			)
 			paths.push({
 				params: { slug: cat.slug },
-				props: { category: cat, lang },
+				props: { category: cat, lang: currentLang },
 			})
 		}
 	}

src/pages/categories/index.astro

@@ -4,8 +4,15 @@ import categoriesTr from '../../data/tr/categories.json'
 import categoriesEn from '../../data/en/categories.json'
 import { getLangFromUrl, t } from '../../i18n/index.ts'
 
+interface Category {
+	slug: string
+	name: string
+	description: string
+	articleCount: number
+}
+
 const lang = getLangFromUrl(Astro.url)
-const categories = lang === 'en' ? categoriesEn : categoriesTr
+const categories: Category[] = lang === 'en' ? categoriesEn : categoriesTr
 const labels = await import(`../../data/${lang}/labels.json`).then((m) => m.default)
 ---
 

src/pages/en/categories/[slug].astro

@@ -4,23 +4,21 @@ import { getCollection } from 'astro:content'
 import categoriesEn from '../../../data/en/categories.json'
 import { t } from '../../../i18n/index.ts'
 
+interface Category {
+	slug: string
+	name: string
+	description: string
+	articleCount: number
+}
+
 const lang = 'en'
 const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.default)
 
 export async function getStaticPaths() {
-	const allArticles = await getCollection('articles')
-	return categoriesEn.map((cat) => {
-		const catArticles = allArticles.filter(
-			(a) =>
-				a.data.lang === 'en' &&
-				a.data.category.toLowerCase().replace(/\s+/g, '-') === cat.slug &&
-				a.data.status === 'Published',
-		)
-		return {
-			params: { slug: cat.slug },
-			props: { category: cat },
-		}
-	})
+	return categoriesEn.map((cat: Category) => ({
+		params: { slug: cat.slug },
+		props: { category: cat },
+	}))
 }
 
 const { category } = Astro.props

src/pages/en/categories/index.astro

@@ -3,6 +3,13 @@ import DocsLayout from '../../../layouts/DocsLayout.astro'
 import categoriesEn from '../../../data/en/categories.json'
 import { t } from '../../../i18n/index.ts'
 
+interface Category {
+	slug: string
+	name: string
+	description: string
+	articleCount: number
+}
+
 const lang = 'en'
 const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.default)
 ---
@@ -20,7 +27,7 @@ const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.d
 		<p class="text-muted-foreground dark:text-muted-dark-foreground mb-8">{t(labels, 'categories.description')}</p>
 		<div class="grid gap-4 md:grid-cols-2">
 			{
-				categoriesEn.map((cat) => (
+				categoriesEn.map((cat: Category) => (
 					<a
 						href={`/en/categories/${cat.slug}`}
 						class="block p-5 bg-background dark:bg-background-dark rounded-lg shadow-flat-sm hover:shadow-flat-md transition-shadow"

src/pages/en/tags/[slug].astro

@@ -4,20 +4,20 @@ import { getCollection } from 'astro:content'
 import tagsEn from '../../../data/en/tags.json'
 import { t } from '../../../i18n/index.ts'
 
+interface Tag {
+	slug: string
+	name: string
+	articleCount: number
+}
+
 const lang = 'en'
 const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.default)
 
 export async function getStaticPaths() {
-	const allArticles = await getCollection('articles')
-	return tagsEn.map((tag) => {
-		const tagArticles = allArticles.filter(
-			(a) => a.data.lang === 'en' && a.data.tags.includes(tag.slug) && a.data.status === 'Published',
-		)
-		return {
-			params: { slug: tag.slug },
-			props: { tag },
-		}
-	})
+	return tagsEn.map((tag: Tag) => ({
+		params: { slug: tag.slug },
+		props: { tag },
+	}))
 }
 
 const { tag } = Astro.props

src/pages/en/tags/index.astro

@@ -3,6 +3,12 @@ import DocsLayout from '../../../layouts/DocsLayout.astro'
 import tagsEn from '../../../data/en/tags.json'
 import { t } from '../../../i18n/index.ts'
 
+interface Tag {
+	slug: string
+	name: string
+	articleCount: number
+}
+
 const lang = 'en'
 const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.default)
 ---
@@ -20,7 +26,7 @@ const labels = await import(`../../../data/${lang}/labels.json`).then((m) => m.d
 		<p class="text-muted-foreground dark:text-muted-dark-foreground mb-8">{t(labels, 'tags.description')}</p>
 		<div class="flex flex-wrap gap-3">
 			{
-				tagsEn.map((tag) => (
+				tagsEn.map((tag: Tag) => (
 					<a
 						href={`/en/tags/${tag.slug}`}
 						class="inline-flex items-center gap-2 px-4 py-2.5 bg-background dark:bg-background-dark rounded-md shadow-flat-sm hover:shadow-flat-md transition-shadow font-mono text-sm"