From 9439e3b9a8da401db996ac2a558374c0c03b2cd3 Mon Sep 17 00:00:00 2001 From: Sebastian Wendel Date: Tue, 5 Mar 2024 21:48:36 +0100 Subject: [PATCH] added simple page sceleton --- src/authors/swendel.json | 15 ++++ src/components/Footer.tsx | 43 ++++++++++++ src/components/HeroSection.tsx | 41 +++++++++++ src/components/LinkButton.tsx | 30 ++++++++ src/components/Navbar.tsx | 25 +++++++ src/components/SectionGridContainer.tsx | 37 ++++++++++ src/components/index.ts | 13 ++++ src/content/config.ts | 22 ++++++ src/layouts/BaseLayout.astro | 91 ++++++++++++++++++++++++- src/pages/index.astro | 15 +--- 10 files changed, 317 insertions(+), 15 deletions(-) create mode 100644 src/authors/swendel.json create mode 100644 src/components/Footer.tsx create mode 100644 src/components/HeroSection.tsx create mode 100644 src/components/LinkButton.tsx create mode 100644 src/components/Navbar.tsx create mode 100644 src/components/SectionGridContainer.tsx create mode 100644 src/components/index.ts create mode 100644 src/content/config.ts diff --git a/src/authors/swendel.json b/src/authors/swendel.json new file mode 100644 index 0000000..db42fe3 --- /dev/null +++ b/src/authors/swendel.json @@ -0,0 +1,15 @@ +{ + "firstName": "Sebastian", + "lastName": "Wendel", + "bio": "His focus is on software development as well as platform and cloud engineering.", + "image": { + "default": "/images/sebastian_wendel.jpg", + "alt": "Portrait of Sebastian Wendel" + }, + "social": { + "mastodon": "@swendel@srx.digital", + "linkedin": "https://www.linkedin.com/in/sebastian-wendel-935b8a9a/" + }, + "chat": "swendel@srx.digital", + "homepage": "https://srx.digital/" +} \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..1505ed9 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,43 @@ +import type React from 'react' +import SRXLogo from '@srx/assets/srx-digital-logo.svg?react' + +interface Props { + children?: React.ReactNode +} + +const Footer: React.FC = ({ children }: Props) => { + return ( + <> +
+
+ +
+ +
+ {children} +
+
+ +
+

+ Du möchtest mit uns zusammenarbeiten? Wir freuen uns auf deine E-Mail. +

+ +
+
+ srx digital
+ Development & Operations
+
+ +
+ Sebastian Wendel
+ Wohlwillstraße 2
+ 20359 Hamburg
+
+
+
+ + ) +} + +export default Footer diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx new file mode 100644 index 0000000..6505a56 --- /dev/null +++ b/src/components/HeroSection.tsx @@ -0,0 +1,41 @@ +import React from 'react' + +interface Props { + title: string + subtitle?: string + buttonCaption?: string +} + +const HeroSection: React.FC = ({ title, subtitle, buttonCaption }: Props) => { + return ( + <> +
+

+ {title} +

+ {subtitle &&

{subtitle}

} + {buttonCaption} +
+ +
+
+ + + + { + +
+
+ + ) +} + +export default HeroSection diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx new file mode 100644 index 0000000..90c8a14 --- /dev/null +++ b/src/components/LinkButton.tsx @@ -0,0 +1,30 @@ +import { ArrowRightIcon } from "lucide-react" + +interface Props { + caption: string + className?: string + href?: string + dark?: boolean + newTab?: boolean + small?: boolean +} + +const LinkButton: React.FC = ({ + caption, + className, + dark = false, + href, + newTab, + small, +}: Props) => { + return ( + + {caption} + + + ) +} + +export default LinkButton \ No newline at end of file diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..df99f93 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,25 @@ +import type { Props } from 'astro' +import type React from 'react' +import { useState } from 'react' +import { SectionGridContainer } from '@srx/components' +import SrxLogo from '@srx/assets/srx-digital-logo.svg?react' + +const Navbar: React.FC = ({ }) => { + const [navListOpen] = useState(false) + + return ( + +
+ +
+ + ) +} + +export default Navbar diff --git a/src/components/SectionGridContainer.tsx b/src/components/SectionGridContainer.tsx new file mode 100644 index 0000000..887b943 --- /dev/null +++ b/src/components/SectionGridContainer.tsx @@ -0,0 +1,37 @@ +import type React from 'react' +import type { ElementType } from 'react' + +interface SectionGridContainerProps { + children: React.ReactNode + className?: string + innerClassName?: string + breakpoint?: 'lg' | 'xl' | '2xl' + as?: ElementType +} + +const SectionGridContainer: React.FC = ({ + children, + className, + innerClassName, + breakpoint = 'lg', + as: Tag = 'section', +}) => { + const innerGridBreakpointClasses = { + lg: 'lg:grid-cols-inner lg:gap-4', + xl: 'xl:grid-cols-inner xl:gap-4', + '2xl': '2xl:grid-cols-inner 2xl:gap-4', + } + + return ( +
+ + {children} + +
+ ) +} +export default SectionGridContainer diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..a0e75cd --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,13 @@ +import Navbar from "@srx/components/Navbar"; +import HeroSection from "@srx/components/HeroSection"; +import Footer from "@srx/components/Footer"; +import SectionGridContainer from "@srx/components/SectionGridContainer"; +import LinkButton from "@srx/components/LinkButton"; + +export { + Navbar, + HeroSection, + Footer, + SectionGridContainer, + LinkButton, +} \ No newline at end of file diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..b5f9a9e --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,22 @@ +import { z, defineCollection } from 'astro:content' + +const authorCollection = defineCollection({ + type: 'data', + schema: z.object({ + firstName: z.string(), + lastName: z.string(), + image: z.object({ + default: z.string(), + webp: z.string().optional(), + alt: z.string(), + }), + chat: z.string().optional(), + social: z.string().optional(), + homepage: z.string().optional(), + }), + }) + + export const collections = { + authors: authorCollection, + } + \ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index b823b9a..27f1f87 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,3 +1,92 @@ --- -import "@srx-styles/base.css"; +import "@fontsource-variable/literata"; +import "@fontsource-variable/manrope"; +import "@fontsource-variable/martian-mono"; +import "@srx/styles/base.css"; +import { Footer, Navbar, SectionGridContainer } from "@srx/components"; + +interface Props { + metaTitle?: string; + metaSubtitle?: string; + metaDescription?: string; + metaImage?: string; + metaAuthors?: string[]; + metaType?: string; + metaDate?: string; + metaSchema?: string; +} + +const { + metaTitle = "srx digital", + metaSubtitle = "Development & Operations", + metaDescription = "", + metaImage = "https://srx.digital/srx_digital_opengraph.jpg", + metaAuthors = ["Sebastian Wendel"], + metaType = "website", + metaDate, + metaSchema, +} = Astro.props; --- + + + + + {`${metaTitle} - ${metaSubtitle}`} + + + + + + + + + + { + metaDate && ( + + ) + } + { + metaAuthors?.map((author) => ( + + )) + } + { + metaSchema && ( +