diff --git a/sites/chemnitz/Logo.tsx b/sites/chemnitz/Logo.tsx new file mode 100644 index 0000000..7825d7c --- /dev/null +++ b/sites/chemnitz/Logo.tsx @@ -0,0 +1,35 @@ +import { LogoProps } from '@/components/Logo/Logo' +import { processSvg } from '@/utils/processSvg' +import { logoSvg } from './logoSvg' + +export const Logo = ({ + withText = false, + color = '#000000', + height = 75, + textColor = '#000000', +}: LogoProps) => { + if (withText && typeof textColor === 'undefined') { + textColor = color + } + + const viewBox = withText + ? '0 0 711.13577 250.2845' + : '0 0 210 255' + const aspectRatio = withText + ? 711.13577 / 250.2845 + : 210 / 255 + const width = height * aspectRatio + const inner = processSvg(logoSvg, { color, textColor, withText }) + + return ( + + ) +} + +export default Logo diff --git a/sites/chemnitz/config.ts b/sites/chemnitz/config.ts new file mode 100644 index 0000000..63beb47 --- /dev/null +++ b/sites/chemnitz/config.ts @@ -0,0 +1,32 @@ +import { SiteConfig } from '@/config/site' + +const config: SiteConfig = { + id: 'chemnitz', + name: 'Katholische Pfarrei Heilige Mutter Teresa Chemnitz', + shortName: 'Hl. Mutter Teresa', + description: + 'Katholische Pfarrei Heilige Mutter Teresa in Chemnitz – Gottesdienste, Veranstaltungen, Sakramente und Gemeindeleben.', + url: 'https://mutter-teresa-chemnitz.de', + email: 'kontakt@mutter-teresa-chemnitz.de', + keywords: [ + 'Katholische Pfarrei', + 'Heilige Mutter Teresa', + 'Chemnitz', + 'Gottesdienst', + 'Sakramente', + 'Veranstaltungen', + 'Gemeinde', + ], + ogImage: '/og-logo.svg', + baseColor: '#016699', + shade1: '#67A3C2', + shade2: '#DDECF7', + shade3: '#eff6ff', + contrastColor: '#CE490F', + contrastShade1: '#DA764B', + defaultFont: 'lato', + headerFont: 'lato', + borderRadius: '0', +} + +export default config diff --git a/sites/chemnitz/logoSvg.ts b/sites/chemnitz/logoSvg.ts new file mode 100644 index 0000000..296ce38 --- /dev/null +++ b/sites/chemnitz/logoSvg.ts @@ -0,0 +1,213 @@ +// Generated from logo_chemnitz.svg +export const logoSvg = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/sites/chemnitz/logo_chemnitz.svg b/sites/chemnitz/logo_chemnitz.svg new file mode 100644 index 0000000..b2093a4 --- /dev/null +++ b/sites/chemnitz/logo_chemnitz.svg @@ -0,0 +1,211 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sites/dreikoenige/Logo.tsx b/sites/dreikoenige/Logo.tsx new file mode 100644 index 0000000..7ad3941 --- /dev/null +++ b/sites/dreikoenige/Logo.tsx @@ -0,0 +1,30 @@ +import { LogoProps } from '@/components/Logo/Logo' +import { processSvg } from '@/utils/processSvg' +import { logoSvg } from './logoSvg' + +export const Logo = ({ + withText = false, + color = '#000000', + height = 75, + textColor = '#000000', +}: LogoProps) => { + if (withText && typeof textColor === 'undefined') { + textColor = color + } + + const viewBox = withText ? '0 0 215 75' : '0 0 75 75' + const width = withText ? (height * 215) / 75 : height + const inner = processSvg(logoSvg, { color, textColor, withText }) + + return ( + + ) +} + +export default Logo diff --git a/sites/dreikoenige/config.ts b/sites/dreikoenige/config.ts new file mode 100644 index 0000000..b7b6ac2 --- /dev/null +++ b/sites/dreikoenige/config.ts @@ -0,0 +1,32 @@ +import { SiteConfig } from '@/config/site' + +const config: SiteConfig = { + id: 'dreikoenige', + name: 'Katholische Pfarrei Heilige Drei Könige Berlin', + shortName: 'Hl. Drei Könige', + description: + 'Katholische Pfarrei Heilige Drei Könige in Berlin – Gottesdienste, Veranstaltungen, Sakramente und Gemeindeleben.', + url: 'https://dreikoenige.berlin', + email: 'kontakt@dreikoenige.berlin', + keywords: [ + 'Katholische Pfarrei', + 'Heilige Drei Könige', + 'Berlin', + 'Gottesdienst', + 'Sakramente', + 'Veranstaltungen', + 'Gemeinde', + ], + ogImage: '/og-logo.svg', + baseColor: '#426156', + shade1: '#728F8D', + shade2: '#CBD6D5', + shade3: '#E3E9E8', + contrastColor: '#7D1224', + contrastShade1: '#C14953', + defaultFont: 'cairo', + headerFont: 'faustina', + borderRadius: '13px', +} + +export default config diff --git a/sites/dreikoenige/logoSvg.ts b/sites/dreikoenige/logoSvg.ts new file mode 100644 index 0000000..b7628e9 --- /dev/null +++ b/sites/dreikoenige/logoSvg.ts @@ -0,0 +1,367 @@ +// Generated from logo_with_text.svg +export const logoSvg = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/sites/dreikoenige/logo_with_text.svg b/sites/dreikoenige/logo_with_text.svg new file mode 100644 index 0000000..67d83c0 --- /dev/null +++ b/sites/dreikoenige/logo_with_text.svg @@ -0,0 +1,365 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/admin/components/ColorPicker/ColorPicker.tsx b/src/admin/components/ColorPicker/ColorPicker.tsx deleted file mode 100644 index 1d44761..0000000 --- a/src/admin/components/ColorPicker/ColorPicker.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' - -import type { TextFieldClientComponent } from 'payload' -import { TextField, useField } from '@payloadcms/ui' - -const ColorInput = ({ path }: { path: string }) => { - const { value, setValue } = useField({ path }) - - return ( - setValue(e.target.value)} - style={{ - width: 40, - height: 40, - padding: 2, - border: '1px solid var(--theme-elevation-150)', - borderRadius: 4, - cursor: 'pointer', - background: 'none', - flexShrink: 0, - }} - /> - ) -} - -export const ColorPicker: TextFieldClientComponent = (props) => { - return ( -
-
- -
- -
- ) -} - -export default ColorPicker diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx index 3b03b16..1abac4c 100644 --- a/src/app/(home)/layout.tsx +++ b/src/app/(home)/layout.tsx @@ -1,94 +1,56 @@ import type { Metadata } from 'next' import './globals.css' -import { Menu } from '@/components/Menu/Menu' import { Footer } from '@/compositions/Footer/Footer' import { comment } from '@/app/(home)/layout-comment' import { FONT_MAP, getFont } from '@/assets/fonts' import { siteConfig } from '@/config/site' -import { fetchDesign } from '@/fetch/design' -import { fetchSiteConfig } from '@/fetch/siteConfig' import { FetchedMenu } from '@/components/Menu/FetchedMenu' export const dynamic = 'force-dynamic' export async function generateMetadata(): Promise { - let site - try { - site = await fetchSiteConfig() - } catch { - site = null - } - - const name = site?.name || siteConfig.name - const shortName = site?.shortName || siteConfig.shortName - const description = site?.description || siteConfig.description - const url = site?.url || siteConfig.url - const ogImage = site?.ogImage || siteConfig.ogImage - const keywords = - site?.keywords?.map((k) => k.keyword) || siteConfig.keywords - return { title: { - default: name, - template: `%s | ${shortName}`, + default: siteConfig.name, + template: `%s | ${siteConfig.shortName}`, }, - description, - keywords, - metadataBase: new URL(url), + description: siteConfig.description, + keywords: siteConfig.keywords, + metadataBase: new URL(siteConfig.url), openGraph: { - title: name, - description, - url, - siteName: name, - images: [ogImage], + title: siteConfig.name, + description: siteConfig.description, + url: siteConfig.url, + siteName: siteConfig.name, + images: [siteConfig.ogImage], locale: 'de_DE', type: 'website', }, } } -const DESIGN_DEFAULTS = { - baseColor: '#016699', - shade1: '#67A3C2', - shade2: '#DDECF7', - shade3: '#eff6ff', - contrastColor: '#CE490F', - contrastShade1: '#DA764B', - borderRadius: '13px', - defaultFont: 'cairo', - headerFont: 'faustina', -} - export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { - let design - try { - design = await fetchDesign() - } catch { - design = null - } - const selectedDefaultFont = getFont( - design?.defaultFont || DESIGN_DEFAULTS.defaultFont, + siteConfig.defaultFont, FONT_MAP.cairo, ) const selectedHeaderFont = getFont( - design?.headerFont || DESIGN_DEFAULTS.headerFont, + siteConfig.headerFont, FONT_MAP.faustina, ) const themeStyle = { - '--base-color': design?.baseColor || DESIGN_DEFAULTS.baseColor, - '--shade1': design?.shade1 || DESIGN_DEFAULTS.shade1, - '--shade2': design?.shade2 || DESIGN_DEFAULTS.shade2, - '--shade3': design?.shade3 || DESIGN_DEFAULTS.shade3, - '--contrast-color': design?.contrastColor || DESIGN_DEFAULTS.contrastColor, - '--contrast-shade1': - design?.contrastShade1 || DESIGN_DEFAULTS.contrastShade1, - '--border-radius': design?.borderRadius || DESIGN_DEFAULTS.borderRadius, + '--base-color': siteConfig.baseColor, + '--shade1': siteConfig.shade1, + '--shade2': siteConfig.shade2, + '--shade3': siteConfig.shade3, + '--contrast-color': siteConfig.contrastColor, + '--contrast-shade1': siteConfig.contrastShade1, + '--border-radius': siteConfig.borderRadius, '--header-font': selectedHeaderFont.style.fontFamily, } as React.CSSProperties @@ -97,11 +59,11 @@ export default async function RootLayout({
-
+
{children}