Add config preview

Author: AllRoundJonU

components/ConfigPreview.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { IconFileCode } from '@tabler/icons-react';
+
+interface ConfigPreviewProps {
+    owner: string;
+    repo: string;
+    path: string;
+    branch?: string;
+}
+
+const getLanguage = (path: string): string => {
+    const ext = path.split('.').pop()?.toLowerCase();
+    switch (ext) {
+        case 'lua': return 'lua';
+        case 'js': return 'javascript';
+        case 'ts': return 'typescript';
+        case 'json': return 'json';
+        default: return 'text';
+    }
+};
+
+const ConfigPreview: React.FC<ConfigPreviewProps> = ({ owner, repo, path, branch = 'main' }) => {
+    const [content, setContent] = useState<string>('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchContent = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch(
+                    `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${path}`
+                );
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch file content');
+                }
+
+                const text = await response.text();
+                setContent(text);
+                setError(null);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchContent();
+    }, [owner, repo, path, branch]);
+
+    if (loading) {
+        return (
+            <div className="animate-pulse bg-zinc-200 dark:bg-zinc-800 rounded-lg p-4">
+                <div className="h-4 bg-zinc-300 dark:bg-zinc-700 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-zinc-300 dark:bg-zinc-700 rounded w-1/2"></div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded relative">
+                <strong className="font-bold">Error:</strong>
+                <span className="block sm:inline"> {error}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="border border-zinc-300 dark:border-zinc-700 rounded-lg overflow-hidden">
+            <div className="bg-zinc-100 dark:bg-zinc-800 px-4 py-2 flex items-center border-b border-zinc-300 dark:border-zinc-700">
+                <IconFileCode className="w-5 h-5 text-zinc-500 dark:text-zinc-400 mr-2" />
+                <span className="text-sm text-zinc-600 dark:text-zinc-300 font-mono">{path}</span>
+            </div>
+            <pre className="p-4 bg-white dark:bg-zinc-900 overflow-x-auto">
+                <code className="text-sm font-mono text-zinc-800 dark:text-zinc-200">
+                    {content}
+                </code>
+            </pre>
+        </div>
+    );
+};
+
+export default ConfigPreview;

pages/it-crafting/_meta.json

@@ -1,4 +1,10 @@
 {
+  "config-preview": {
+    "title": "👀・Config Preview",
+    "theme": {
+      "footer": false
+    }
+  },
   "installation": {
     "title": "📥・Installation",
     "theme": {

pages/it-crafting/config-preview.mdx

@@ -0,0 +1,25 @@
+---
+title: it-crafting - Config Preview
+description: Full configuration preview of the it-crafting script
+---
+
+import ConfigPreview from '@components/ConfigPreview'
+import ExternLink from '@components/ExternLink'
+import { IconBrandGithub } from '@tabler/icons-react'
+
+
+# Config Preview
+Here you can find the full configuration of the it-crafting script.
+<ExternLink
+    href="https://github.com/it-scripts/it-crafting/blob/main/shared/config.lua"
+    manualTitle = "it-crafting config.lua"
+    icon = {IconBrandGithub}
+    >
+</ExternLink>
+
+<ConfigPreview 
+    owner="it-scripts"
+    repo="it-crafting"
+    path="shared/config.lua"
+    branch="main"
+/>

pages/it-crafting/installation.mdx

@@ -50,7 +50,7 @@ You can download the latest version of the script for free on the it-script GitH
 | oxmysql | https://github.com/overextended/oxmysql |
 | **Target System** |  |
 | ESX (ox_target) | https://github.com/overextended/ox_target |
-| QbCore (qb-target) | https://github.com/qbcore-framework/qb-target |
+| QbCore (qb-target) | https://github.com/qbcore-framework/qb-target *(Currently not supported!)*|
 
 <Callout type="error">
   You can also you ox_target on your QbCore Server but only if you are using ox_target with version 1.16.0 or older!

theme.config.tsx

@@ -68,7 +68,7 @@ const config: DocsThemeConfig = {
   },
   docsRepositoryBase: "https://github.com/it-scripts/it-scripts.github.io/blob/main",
   footer: {
-    text: "it-scripts © 2024",
+    text: "it-scripts © 2025",
   },
   primaryHue: { dark: 169, light: 169 },
   primarySaturation: { dark: 100, light: 50},