feat: added project components to simplify structure

schaechinger · Dec 9, 2023 · 2a35ed6 · 2a35ed6
1 parent 5240797
commit 2a35ed6
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 190 deletions.
diff --git a/app/(pages)/(de)/datenschutz/page.tsx b/app/(pages)/(de)/datenschutz/page.tsx
@@ -176,7 +176,7 @@ const PrivacyPage = () => (
 
       <p>
         Das Setzen von Cookies, die zur Ausübung elektronischer Kommunikationsvorgänge oder der
-        Bereitstellung bestimmter, von Ihnen erwünschter Funktionen (z.B. Warenkorb) notwendig
+        Bereitstellung bestimmter, von dir erwünschter Funktionen (z.B. Warenkorb) notwendig
         sind, erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Als Betreiber dieser Website
         habe ich ein berechtigtes Interesse an der Speicherung von Cookies zur technisch
         fehlerfreien und reibungslosen Bereitstellung meiner Dienste. Sofern die Setzung anderer

diff --git a/app/(pages)/(de)/lebenslauf/page.tsx b/app/(pages)/(de)/lebenslauf/page.tsx
@@ -36,7 +36,6 @@ const ResumePage = () => (
           { [
             { slug: 'javascript', name: 'JavaScript' },
             { slug: 'typescript', name: 'TypeScript' },
-            { slug: 'nodejs', name: 'Node.js' },
             { slug: 'css', name: 'CSS/Sass' },
             { slug: 'sql', name: 'SQL' },
             { slug: 'php', name: 'PHP' },
@@ -52,10 +51,12 @@ const ResumePage = () => (
 
         <ul className="flex flex-wrap mt-3 gap-2">
           { [
+            { slug: 'nodejs', name: 'Node.js' },
             { slug: 'vue', name: 'Vue' },
-            { slug: 'react', name: 'React' },
-            { slug: 'quasar', name: 'Quasar' },
             { slug: 'pinia', name: 'Pinia' },
+            { slug: 'quasar', name: 'Quasar' },
+            { slug: 'react', name: 'React' },
+            { slug: 'nextjs', name: 'Next.js' },
             { slug: 'express', name: 'Express.js' },
             { slug: 'mqtt', name: 'MQTT' },
             { slug: 'mocha', name: 'Mocha' },

diff --git a/app/(pages)/(de)/projekte/[slug]/page.tsx b/app/(pages)/(de)/projekte/[slug]/page.tsx
@@ -7,6 +7,7 @@ import DetailBlock from '@components/projects/DetailBlock';
 import ProjectImages from '@components/projects/ProjectImages';
 import ProjectMasterData from '@components/projects/ProjectMasterData';
 import { loadProjectBySlug } from '@lib/contentful';
+import ProjectLinks from '@/app/components/projects/ProjectLinks';
 
 export interface ProjectPageProps {
   params: {
@@ -64,29 +65,7 @@ const ProjectPage = async ({ params }: ProjectPageProps) => {
         ? <DetailBlock id="features" title="Features" content={project.details.features} />
         : null }
 
-      <section id="links" className="pt-10">
-        <h3>Links</h3>
-
-        { project.links?.project
-          ? <p>Das Projekt findest du auf <Link href={project.links.project.link}
-            target="_blank" className="inline-link">{ project.links.project.label }</Link>.</p>
-          : null
-        }
-        { project.links?.code
-          ? <p>Den Code zum Projekt findest du auf <Link href={project.links.code.link}
-            target="_blank" className="inline-link">{ project.links.code.label }</Link>.</p>
-          : null
-        }
-        { project.links?.package
-          ? <p>Du kannst das Paket mit <Link href={project.links.package.link}
-            target="_blank" className="inline-link">{ project.links.package.label }</Link> in dein Projekt einbinden.</p>
-          : null
-        }
-
-        { !project.links
-          ? <p>Das Projekt wird intern verwendet und ist daher nicht öffentlich zugänglich.</p>
-          : null }
-      </section>
+      <ProjectLinks links={project.links} />
 
       <p className="mt-4">
         <LinkButton href="/projekte" label="Zur Projektliste" />

diff --git a/app/(pages)/(de)/projekte/internetmarke/page.tsx b/app/(pages)/(de)/projekte/internetmarke/page.tsx
diff --git a/app/(pages)/(de)/projekte/transportkit/page.tsx b/app/(pages)/(de)/projekte/transportkit/page.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from 'next';
-import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import LinkButton from '@components/LinkButton';
+import DetailBlock from '@components/projects/DetailBlock';
+import ProjectLinks from '@components/projects/ProjectLinks';
 import ProjectMasterData from '@components/projects/ProjectMasterData';
-import { loadProjectBySlug } from '@/app/lib/contentful';
-import { ProjectPageProps } from '../[slug]/page';
+import { loadProjectBySlug } from '@lib/contentful';
 
-export async function generateMetadata(
-  { params }: ProjectPageProps,
-): Promise<Metadata> {
+export async function generateMetadata(): Promise<Metadata> {
   const metadata: Metadata = {
     title: 'Projektdetails',
   };
@@ -38,22 +36,9 @@ const TransportKitPage = async () => {
 
       <ProjectMasterData project={project} />
 
-      <section id="intro" className="pt-10">
-        <h3>Was ist Transportkit</h3>
-
-        <p className="mb-2">
-          Mit TransportKit können Icons von Linien vieler Großstädte einfach in Projekte
-          eingebunden werden.<br />
-          Die Linien sind für helle und dunklere Hintergründe angepasst und können so überall
-          eingesetzt werden.
-        </p>
-
-        <p>
-          Das Projekt ist Open Source und kann auf GitHub heruntergeladen werden. Viel Spaß bei
-          der Nutzung. Bitte beachte vorab mögliche Beschränkungen oder benötigte Lizenzen
-          durch die Rechteinhaber.
-        </p>
-      </section>
+      { project.details?.description
+        ? <DetailBlock id="beschreibung" title="Was ist TransportKit" content={project.details.description} />
+        : null }
 
       <section id="munich" className="pt-10">
         <h3>München</h3>
@@ -87,12 +72,7 @@ const TransportKitPage = async () => {
         )) }
       </section>
 
-      <section id="links" className="pt-10">
-        <h3>Links</h3>
-
-        <p>Den Code zum Projekt findest du auf <Link href="https://github.com/schaechinger/transportkit"
-          target="_blank" className="inline-link">GitHub</Link>.</p>
-      </section>
+      <ProjectLinks links={project.links} />
 
       <p className="mt-4">
         <LinkButton href="/projekte" label="Zur Projektliste" />

diff --git a/app/components/forms/ContactForm.tsx b/app/components/forms/ContactForm.tsx
@@ -16,7 +16,7 @@ const ContactForm = () => {
           <CircleCheck className="text-2xl text-primary-500 -mt-1 mr-2" />
           Deine Anfrage wurde versendet!
         </p>
-        <p>Danke für deine Nachricht, ich werde mich zeitnah bei Ihnen melden.</p>
+        <p>Danke für deine Nachricht, ich werde mich zeitnah bei dir melden.</p>
       </div>
     );
   }

diff --git a/app/components/layout/Navigation.tsx b/app/components/layout/Navigation.tsx
@@ -10,16 +10,16 @@ const Navigation = () => {
   const path = usePathname();
 
   return (
-    <nav className="flex overflow-x-visible lg:flex-col gap-4 lg:gap-2 py-2 border-b-2 border-b-primary-100 lg:border-b-0">
+    <nav className="flex lg:flex-col gap-4 lg:gap-2 py-2 border-b-2 border-b-primary-100 lg:border-b-0">
       <Link
         href="/#ueber-mich"
-        className={`hidden lg:block font-normal${'/' === path ? ' text-primary-500 dark:text-primary-500' : ''}`}
-      >
-        <span className="hidden lg:inline-block">Über mich</span>
-        <Home className="lg:hidden" />
-      </Link>
+        className={`font-normal${'/' === path ? ' text-primary-500 dark:text-primary-500' : ''}`}
+      >Über&nbsp;mich</Link>
       { [
-        { link: '/lebenslauf', label: 'Berufserfahrung' },
+        { link: '/lebenslauf', label: <>
+          <span className="hidden lg:inline">Berufserfahrung</span>
+          <span className="lg:hidden">Erfahrung</span>
+        </> },
         { link: '/projekte', label: 'Projekte' },
         { link: '/kontakt', label: 'Kontakt' },
       ].map((item) => (

diff --git a/app/components/projects/ProjectLinks.tsx b/app/components/projects/ProjectLinks.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link';
+
+import { ProjectLinkData } from '@models/project';
+
+const ProjectLinks = ({ links }: { links?: ProjectLinkData }) => (
+  <section id="links" className="pt-10">
+    <h3>Links</h3>
+
+    { !links
+      ? <p>Das Projekt wird intern verwendet und ist daher nicht öffentlich zugänglich.</p>
+      : ([
+        links?.project
+        ? <p>Das Projekt findest du auf <Link href={links.project.link}
+          target="_blank" className="inline-link">{ links.project.label }</Link>.</p>
+        : null,
+        links?.code
+        ? <p>Den Code zum Projekt findest du auf <Link href={links.code.link}
+          target="_blank" className="inline-link">{ links.code.label }</Link>.</p>
+        : null,
+        links?.github
+        ? <p>Den Code zum Projekt findest du auf <Link
+          href={`https://github.com/${links.github.join('/')}`}
+          target="_blank" className="inline-link">GitHub</Link>.</p>
+        : null,
+        links?.package
+        ? <p>Du kannst das Paket mit <Link href={links.package.link}
+          target="_blank" className="inline-link">{ links.package.label }</Link> in dein Projekt einbinden.</p>
+        : null,
+        links?.npm
+        ? <p>Du kannst das Paket mit <Link href={`https://npmjs.org/package/${links.npm}`}
+          target="_blank" className="inline-link">npm</Link> in dein Projekt einbinden.</p>
+        : null,
+      ]) }
+  </section>
+);
+
+export default ProjectLinks;
diff --git a/app/lib/contentful.ts b/app/lib/contentful.ts
@@ -5,19 +5,6 @@ import { AvailabilityData } from '@models/availability';
 import { CareerData, sortCareerList } from '@models/career';
 import { ProjectData } from '@models/project';
 
-let instance: ContentfulClientApi<any> | null = null;
-
-const connect = () => {
-  if (!instance && process.env.CONTENTFUL_API_KEY) {
-    instance = createClient({
-      space: process.env.CONTENTFUL_SPACE!,
-      accessToken: process.env.CONTENTFUL_API_KEY,
-    });
-  }
-
-  return instance;
-}
-
 type AvailabilityEntrySkeleton = {
   contentTypeId: 'availability',
   fields: {
@@ -86,6 +73,19 @@ type ProjectEntrySkeleton = {
   },
 };
 
+let instance: ContentfulClientApi<any> | null = null;
+
+const connect = () => {
+  if (!instance && process.env.CONTENTFUL_API_KEY) {
+    instance = createClient({
+      space: process.env.CONTENTFUL_SPACE!,
+      accessToken: process.env.CONTENTFUL_API_KEY,
+    });
+  }
+
+  return instance;
+}
+
 const parseEntry = (entry: Entry) => {
   for (let key in entry.fields) {
     const value = entry.fields[key];

diff --git a/app/models/project.ts b/app/models/project.ts
@@ -7,17 +7,21 @@ export interface ProjectLink {
   label: string;
 }
 
+export interface ProjectLinkData {
+  project?: ProjectLink;
+  code?: ProjectLink;
+  github?: string[];
+  package?: ProjectLink;
+  npm?: string;
+}
+
 export interface ProjectImage {
   src: string;
   label?: string;
 }
 
 export interface ProjectData extends CareerData {
-  links?: {
-    project?: ProjectLink;
-    code?: ProjectLink;
-    package?: ProjectLink;
-  };
+  links?: ProjectLinkData;
   type: ProjectType;
   highlight?: boolean;
   images?: ProjectImage[];