feat: add custom website setting

Author: gmitch215

nuxt.config.ts

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
 			themeColor: process.env.NUXT_PUBLIC_THEME_COLOR || '#1e40af',
 			favicon: process.env.NUXT_PUBLIC_FAVICON || '/_favicon.ico',
 			faviconPng: process.env.NUXT_PUBLIC_FAVICON_PNG || '/_favicon.png',
+			website: process.env.NUXT_PUBLIC_WEBSITE || '',
 			github: process.env.NUXT_PUBLIC_GITHUB || '',
 			instagram: process.env.NUXT_PUBLIC_INSTAGRAM || '',
 			twitter: process.env.NUXT_PUBLIC_TWITTER || '',

src/components/NavBar.vue

@@ -55,6 +55,16 @@
 					class="grid grid-cols-4 sm:flex items-center space-x-2 sm:space-x-3 md:space-x-4 light:opacity-70"
 					:style="`color: ${settings.themeColor || $config.public.themeColor || '#ffffff'}`"
 				>
+					<NuxtLink
+						v-if="settings.website || $config.public.website"
+						:to="`${settings.website || $config.public.website}`"
+						target="_blank"
+					>
+						<UIcon
+							name="mdi:web"
+							class="size-5 sm:size-6"
+						/>
+					</NuxtLink>
 					<NuxtLink
 						v-if="settings.github || $config.public.github"
 						:to="`https://github.com/${settings.github || $config.public.github}`"

src/components/SettingsForm.vue

@@ -188,6 +188,20 @@
 			<h3 class="text-lg font-semibold mb-4">Social Media</h3>
 
 			<div class="space-y-4">
+				<UFormField
+					label="Website"
+					name="website"
+					help="Your personal website URL"
+				>
+					<UInput
+						v-model="state.website"
+						placeholder="https://example.com"
+						class="w-full"
+						:disabled="loading"
+						icon="mdi:web"
+					/>
+				</UFormField>
+
 				<UFormField
 					label="GitHub"
 					name="github"
@@ -430,6 +444,7 @@ const state = reactive<SettingsInput>({
 	themeColor: '',
 	favicon: '',
 	faviconPng: '',
+	website: '',
 	github: '',
 	twitter: '',
 	instagram: '',
@@ -460,6 +475,15 @@ const isValidUrl = (value: string, allowedHosts: string[]): boolean => {
 };
 
 // Computed properties for social media URLs
+const websiteUrl = computed(() => {
+	if (!state.website) return '';
+	const allowedHosts = ['example.com', 'myblog.com'];
+	if (isValidUrl(state.website, allowedHosts)) {
+		return state.website.startsWith('http') ? state.website : `https://${state.website}`;
+	}
+	return '';
+});
+
 const githubUrl = computed(() => {
 	if (!state.github) return '';
 	const allowedHosts = ['github.com'];

src/composables/useDatabase.ts

@@ -107,6 +107,7 @@ export function useSettings() {
 		themeColor?: string;
 		favicon?: string;
 		faviconPng?: string;
+		website?: string;
 		github?: string;
 		twitter?: string;
 		instagram?: string;

src/server/api/settings.get.ts

@@ -12,6 +12,7 @@ export default defineEventHandler(async (_) => {
 	const favicon = (await kv.get<string>('nuxtpress:setting:favicon')) || config.public.favicon;
 	const faviconPng =
 		(await kv.get<string>('nuxtpress:setting:favicon_png')) || config.public.faviconPng;
+	const website = (await kv.get<string>('nuxtpress:setting:website')) || config.public.website;
 	const github = (await kv.get<string>('nuxtpress:setting:github')) || config.public.github;
 	const twitter = (await kv.get<string>('nuxtpress:setting:twitter')) || config.public.twitter;
 	const instagram =
@@ -30,6 +31,7 @@ export default defineEventHandler(async (_) => {
 		author,
 		favicon,
 		faviconPng,
+		website,
 		github,
 		twitter,
 		instagram,

src/server/api/settings.post.ts

@@ -14,6 +14,7 @@ export default defineEventHandler(async (event) => {
 		themeColor,
 		favicon,
 		faviconPng,
+		website,
 		github,
 		twitter,
 		instagram,
@@ -114,6 +115,19 @@ export default defineEventHandler(async (event) => {
 		}
 	}
 
+	if (website) {
+		// Validate website URL - must start with http:// or https://
+		const urlPattern = /^(https?:\/\/)/;
+		if (!urlPattern.test(website)) {
+			throw createError({
+				statusCode: 400,
+				statusMessage: 'Website must start with http:// or https://'
+			});
+		}
+
+		await kv.set('nuxtpress:setting:website', website);
+	}
+
 	if (github) {
 		let github0 = github;
 		if (github.includes('https://') || github.includes('http://')) {

src/shared/schemas.ts

@@ -31,6 +31,7 @@ export const settingsSchema = z.object({
 		.optional(),
 	favicon: z.string().optional(),
 	faviconPng: z.string().optional(),
+	website: z.url('Must be a valid URL').optional().or(z.literal('')),
 	github: z.string().optional(),
 	twitter: z.string().optional(),
 	instagram: z.string().optional(),