sync

src/components/ShowcaseTabs.jsx

@@ -1,4 +1,3 @@
-import { Button } from "../components/ui/button";
 import {
   Card,
   CardContent,
@@ -13,38 +12,7 @@ import {
   TabsTrigger,
 } from "../components/ui/tabs";
 
-const data = [
+import { data } from "../content/showcase";
-  {
-    value: "thisPage",
-    handle: "Projekt 1",
-    title: "This Page",
-    description: "random text",
-    images: [
-      { src: "temp.jpg", alt: "text" },
-      { src: "temp.jpg", alt: "text2" },
-    ],
-  },
-  {
-    value: "thatPage",
-    title: "That Page",
-    handle: "Projekt 2",
-    description: "random text",
-    images: [
-      { src: "temp.jpg", alt: "text" },
-      { src: "temp.jpg", alt: "text2" },
-    ],
-  },
-  {
-    value: "otherPge",
-    title: "Other Page",
-    handle: "Projekt 3",
-    description: "random text",
-    images: [
-      { src: "temp.jpg", alt: "text" },
-      { src: "temp.jpg", alt: "text2" },
-    ],
-  },
-];
 
 export function ShowcaseTabs() {
   return (
@@ -54,18 +22,26 @@ export function ShowcaseTabs() {
     >
       <TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
         {data.map((item) => (
-          <TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
+          <TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
         ))}
       </TabsList>
       {data.map((item) => (
-        <TabsContent value={item.value} className="h-full">
+        <TabsContent value={item.value} className="h-full" key={item.value}>
           <Card className="h-[90%] my-auto">
             <CardHeader>
               <CardTitle>{item.title}</CardTitle>
-              <CardDescription>{item.description}</CardDescription>
+              <CardDescription>
+                <span className="text-pretty">{item.description}</span>
+              </CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="h-[85%] w-full">
-              <img src="/temp.jpg" alt="" />
+              <div className="h-full w-full">
+                <img
+                  src={item.image}
+                  alt={item.imageAlt}
+                  className="object-cover h-full w-full rounded-lg  "
+                />
+              </div>
             </CardContent>
           </Card>
         </TabsContent>

src/components/ui/card.jsx

@@ -5,7 +5,7 @@ import { cn } from "../../lib/utils"
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+    className={cn("rounded-lg border border-bkg bg-card text-card-foreground shadow-sm", className)}
     {...props} />
 ))
 Card.displayName = "Card"

src/components/ui/dropdown-menu.jsx

@@ -36,7 +36,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props} />
@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props} />
@@ -94,7 +94,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-bkg",
       className
     )}
     {...props}>

src/content/showcase.js

@@ -0,0 +1,29 @@
+export const data = [
+	{
+	  value: "thisPage",
+	  handle: "Projekt 1",
+	  title: "This Page",
+	  href: "/potato",
+	  description: "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
+	  image: "/temp.jpg", 
+	  imageAlt: "text" 
+	},
+	{
+	  value: "thatPage",
+	  title: "That Page",
+	  handle: "Projekt 2",
+	  href: "/potat2",
+	  description: "random text",
+	  image: "/temp.jpg", 
+	  imageAlt: "text" 
+	},
+	{
+	  value: "otherPage",
+	  title: "Other Page",
+	  handle: "Projekt 3",
+	  href: "/kartoffeln",
+	  description: "random text",
+	  image: "/temp.jpg", 
+	  imageAlt: "text" 
+	},
+  ];

src/layouts/MainLayout.astro

@@ -21,7 +21,7 @@ import "../style/index.css";
             document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));});
         </script>
         <Navbar transition:persist/>
-        <div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth" transition:animate="slide">
+        <div class="bg-bkg h-dvh overflow-y-scroll snap-mandatory snap-y scroll-smooth " transition:animate="slide" style="scrollbar-width: thin;">
             <slot />
         </div>
     </body>

src/layouts/MarkDownPostLayout.astro

@@ -0,0 +1,7 @@
+---
+const { frontmatter } = Astro.props;
+---
+
+<h1>{frontmatter.title}</h1>
+<p>{frontmatter.autor}</p>
+<slot />

src/layouts/SinglePage.astro

@@ -1,4 +1,4 @@
-<div class="snap-start w-screen h-screen overflow-clip pt-14">
+<div class="snap-start h-screen overflow-clip pt-14">
 	<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
 		<div
 			class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"

src/pages/index.astro

@@ -1,7 +1,18 @@
 ---
-import { getLocaleByPath } from "astro:i18n";
+import type { GetStaticPaths } from "astro";
 import MainLayout from "../layouts/MainLayout.astro";
 
+export const getStaticPaths = (() => {
+  return [
+    {params: {lang: "en"}},
+    {params: {lang: "cs"}},
+    {params: {lang: "de"}},
+    {params: {lang: "fr"}}
+  ];
+}) satisfies GetStaticPaths;
+
+const { lang } = Astro.params
+
 // Don't remove - redirects user to language version for the preffered language
 if (Astro.preferredLocale) {
   return Astro.redirect(`/${Astro.preferredLocale}/`);
@@ -9,7 +20,7 @@ if (Astro.preferredLocale) {
 
 ---
 
-<MainLayout title="sitetitle" description="sitedescription" lang="en">
+<MainLayout title="sitetitle" description="sitedescription" lang={lang}>
   <h1>Welcome</h1>
   <p>
     You shouldn't be here. please continue to one of the following:

src/style/index.css

@@ -46,12 +46,12 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
             --background: 224 71% 4%;
             --foreground: 213 31% 91%;
             --input: 216 34% 17%;
-            --muted: 223 47% 11%;
+            --muted: 0 0% 15%;
             --muted-foreground: 215.4 16.3% 56.9%;
             --popover: 224 71% 4%;
             --popover-foreground: 215 20.2% 65.1%;
-            --border: 216 34% 17%;
+            --border: 9 20% 21%;
-            --card: 224 71% 4%;
+            --card: 0 0% 15%;
             --card-foreground: 213 31% 91%;
             --destructive: 0 63% 31%;
             --destructive-foreground: 210 40% 98%;