Fetch config via api and move config to data directory

public/config-example.json

@@ -1,36 +0,0 @@
-{
-	"home": {
-		"headline": "Portfolio",
-		"text": "As a passionate <b>hobby photographer</b> , I capture the unique beauty and atmosphere of various places. Join me on a visual journey through my lens.",
-		"buttonText": "My Gallery"
-	},
-	"contact": {
-		"headline": "Contact Me",
-		"links": [
-			{
-				"url": "https://www.instagram.com/f1r3wave",
-				"hoverColor": "rgba(211, 122, 238, 0.25)",
-				"image": {
-					"src": "https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png",
-					"alt": "Instagram Logo"
-				}
-			},
-			{
-				"url": "mailto:mail@mail.com",
-				"hoverColor": "rgba(78, 172, 248, 0.25)",
-				"image": {
-					"src": "https://static.vecteezy.com/system/resources/thumbnails/014/440/980/small_2x/email-message-icon-design-in-blue-circle-png.png",
-					"alt": "Email Icon"
-				}
-			}
-		],
-		"imprint": {
-			"enable": false,
-			"headline": "Imprint / Legal Notice",
-			"name": "[Your Full Name]",
-			"address": "[Your Full Address: Street and House Number, Postcode City]",
-			"country": "[YourCountry (e.g., Germany)]",
-			"email": "[Your E-Mail Address]"
-		}
-	}
-}

public/config.json

@@ -1,36 +0,0 @@
-{
-	"home": {
-		"headline": "Portfolio",
-		"text": "As a passionate <b>hobby photographer</b>, I capture the unique beauty and atmosphere of various places. Join me on a visual journey through my lens.",
-		"buttonText": "Visit Gallery"
-	},
-	"contact": {
-		"headline": "Contact Me",
-		"links": [
-			{
-				"url": "https://www.instagram.com/f1r3wave",
-				"hoverColor": "rgba(211, 122, 238, 0.25)",
-				"image": {
-					"src": "https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png",
-					"alt": "Instagram Logo"
-				}
-			},
-			{
-				"url": "mailto:mail@mail.com",
-				"hoverColor": "rgba(78, 172, 248, 0.25)",
-				"image": {
-					"src": "https://static.vecteezy.com/system/resources/thumbnails/014/440/980/small_2x/email-message-icon-design-in-blue-circle-png.png",
-					"alt": "Email Icon"
-				}
-			}
-		],
-		"imprint": {
-			"enable": false,
-			"headline": "Imprint / Legal Notice",
-			"name": "[Your Full Name]",
-			"address": "[Your Full Address: Street and House Number, Postcode City]",
-			"country": "[YourCountry (e.g., Germany)]",
-			"email": "[Your E-Mail Address]"
-		}
-	}
-}

src/app/api/config/route.ts

@@ -0,0 +1,15 @@
+import { configPath, configTemplate } from '@/const/api';
+import fs from 'fs/promises';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  try {
+    const fileBuffer = await fs.readFile(configPath, 'utf8');
+    const config = JSON.parse(fileBuffer);
+    console.log(config);
+    return NextResponse.json(config, { status: 200 });
+  } catch {
+    await fs.writeFile(configPath, JSON.stringify(configTemplate, null, 2));
+    return NextResponse.json(configTemplate, { status: 201 });
+  }
+}

src/const/api.ts

@@ -1,5 +1,44 @@
+import { AppConfig } from '@/interfaces/config';
 import path from 'path';
 
 const dataDir = path.join(process.cwd(), 'data');
 export const imagesDir = path.join(dataDir, 'images');
 export const jsonPath = path.join(dataDir, 'images.json');
+export const configPath = path.join(dataDir, 'config.json');
+
+export const configTemplate: AppConfig = {
+  home: {
+    headline: 'Portfolio',
+    text: 'As a passionate <b>hobby photographer</b>, I capture the unique beauty and atmosphere of various places. Join me on a visual journey through my lens.',
+    buttonText: 'Visit Gallery',
+  },
+  contact: {
+    headline: 'Contact Me',
+    links: [
+      {
+        url: 'https://www.instagram.com/f1r3wave',
+        hoverColor: 'rgba(211, 122, 238, 0.25)',
+        image: {
+          src: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png',
+          alt: 'Instagram Logo',
+        },
+      },
+      {
+        url: 'mailto:mail@mail.com',
+        hoverColor: 'rgba(78, 172, 248, 0.25)',
+        image: {
+          src: 'https://static.vecteezy.com/system/resources/thumbnails/014/440/980/small_2x/email-message-icon-design-in-blue-circle-png.png',
+          alt: 'Email Icon',
+        },
+      },
+    ],
+    imprint: {
+      enable: false,
+      headline: 'Imprint / Legal Notice',
+      name: '[Your Full Name]',
+      address: '[Your Full Address: Street and House Number, Postcode City]',
+      country: '[YourCountry (e.g., Germany)]',
+      email: '[Your E-Mail Address]',
+    },
+  },
+};

src/contexts/ConfigContext.tsx

@@ -1,36 +1,32 @@
-"use client";
+'use client';
 
-import { ConfigContext } from "@/contexts/configExports";
+import { ConfigContext } from '@/contexts/configExports';
-import { AppConfig, ConfigContextType } from "@/interfaces/config";
+import { AppConfig, ConfigContextType } from '@/interfaces/config';
-import React, { useState, useEffect, ReactNode } from "react";
+import React, { ReactNode, useEffect, useState } from 'react';
 
-export const ConfigProvider: React.FC<{ children: ReactNode }> = ({
+export const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-	children,
+  const [config, setConfig] = useState<AppConfig | null>(null);
-}) => {
-	const [config, setConfig] = useState<AppConfig | null>(null);
 
-	useEffect(() => {
+  useEffect(() => {
-		const fetchConfig = async () => {
+    const fetchConfig = async () => {
-			try {
+      try {
-				const response = await fetch("/config.json");
+        const response = await fetch('/api/config');
-				if (!response.ok) {
+        if (!response.ok) {
-					throw new Error(`HTTP error! status: ${response.status}`);
+          throw new Error(`HTTP error! status: ${response.status}`);
-				}
+        }
-				const data: AppConfig = await response.json();
+        const data: AppConfig = await response.json();
-				setConfig(data);
+        setConfig(data);
-			} catch (e: unknown) {
+      } catch (e: unknown) {
-				console.error("Failed to fetch config.json:", e);
+        console.error('Failed to fetch config.json:', e);
-			}
+      }
-		};
+    };
 
-		fetchConfig();
+    fetchConfig();
-	}, []);
+  }, []);
 
-	const value: ConfigContextType = {
+  const value: ConfigContextType = {
-		config,
+    config,
-	};
+  };
 
-	return (
+  return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
-		<ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
-	);
 };