Fetch config via api and move config to data directory

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