From 42e8ae354a23e819096edacd37f6f1f3e3bb371c Mon Sep 17 00:00:00 2001 From: _Nik0__ Date: Mon, 9 Dec 2024 23:10:31 +0100 Subject: [PATCH] Test Layout --- src/components/ArrowCard.tsx | 27 +++++ src/components/Blog.tsx | 81 +++++++++----- src/components/Events.tsx | 81 +++++++++----- src/components/Products.tsx | 102 +++++++++++++++++ src/components/nnb/Workshop.tsx | 153 +++++++++++++++----------- src/consts.ts | 15 +-- src/content.config.ts | 18 ++- src/content/products/00-Test/index.md | 13 +++ src/content/products/01-Test/index.md | 13 +++ src/content/products/02-Test/index.md | 13 +++ src/content/products/03-Test/index.md | 13 +++ src/layouts/ArticleTopLayout.astro | 4 +- src/layouts/BottomLayout.astro | 2 +- src/layouts/TopLayout.astro | 2 +- src/pages/products/[...slug].astro | 35 ++++++ src/pages/products/index.astro | 30 +++++ 16 files changed, 471 insertions(+), 131 deletions(-) create mode 100644 src/components/Products.tsx create mode 100644 src/content/products/00-Test/index.md create mode 100644 src/content/products/01-Test/index.md create mode 100644 src/content/products/02-Test/index.md create mode 100644 src/content/products/03-Test/index.md create mode 100644 src/pages/products/[...slug].astro create mode 100644 src/pages/products/index.astro diff --git a/src/components/ArrowCard.tsx b/src/components/ArrowCard.tsx index 887b2bf..9d9dbee 100644 --- a/src/components/ArrowCard.tsx +++ b/src/components/ArrowCard.tsx @@ -5,6 +5,7 @@ type Props = { entry: | CollectionEntry<"blog"> | CollectionEntry<"events"> + | CollectionEntry<"products"> pill?: boolean; }; @@ -15,6 +16,8 @@ export default function ArrowCard({ entry, pill }: Props) { return `/blog/${entry.id}`; case "events": return `/events/${entry.id}`; + case "products": + return `/products/${entry.id}`; default: return "/"; } @@ -92,6 +95,30 @@ export default function ArrowCard({ entry, pill }: Props) { /> + ) : entry.collection === "products" ? ( + // Products cart design + + {entry.data.imageUrl && ( +
+ {entry.data.title} +
+ )} + +
+
+ {entry.data.title} +
+
+ ) : ( // Normal Card Design [] -} + tags: string[]; + data: CollectionEntry<"blog">[]; +}; export default function Blog({ data, tags }: Props) { - const [filter, setFilter] = createSignal(new Set()) - const [posts, setPosts] = createSignal[]>([]) + const [filter, setFilter] = createSignal(new Set()); + const [posts, setPosts] = createSignal[]>([]); createEffect(() => { - setPosts(data.filter((entry) => - Array.from(filter()).every((value) => - entry.data.tags.some((tag:string) => - tag.toLowerCase() === String(value).toLowerCase() + setPosts( + data.filter((entry) => + Array.from(filter()).every((value) => + entry.data.tags.some( + (tag: string) => tag.toLowerCase() === String(value).toLowerCase() + ) ) ) - )) - }) + ); + }); function toggleTag(tag: string) { - setFilter((prev) => - new Set(prev.has(tag) - ? [...prev].filter((t) => t !== tag) - : [...prev, tag] - ) - ) + setFilter( + (prev) => + new Set( + prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag] + ) + ); } return (
-
Filter
+
+ Filtr +
    {(tag) => (
  • -
- ) + ); } diff --git a/src/components/Events.tsx b/src/components/Events.tsx index a9ba28f..6d9f259 100644 --- a/src/components/Events.tsx +++ b/src/components/Events.tsx @@ -1,49 +1,76 @@ -import type { CollectionEntry } from "astro:content" -import { createEffect, createSignal, For } from "solid-js" -import ArrowCard from "@components/ArrowCard" -import { cn } from "@lib/utils" +import type { CollectionEntry } from "astro:content"; +import { createEffect, createSignal, For } from "solid-js"; +import ArrowCard from "@components/ArrowCard"; +import { cn } from "@lib/utils"; type Props = { - tags: string[] - data: CollectionEntry<"events">[] -} + tags: string[]; + data: CollectionEntry<"events">[]; +}; export default function Events({ data, tags }: Props) { - const [filter, setFilter] = createSignal(new Set()) - const [events, setEvents] = createSignal[]>([]) + const [filter, setFilter] = createSignal(new Set()); + const [events, setEvents] = createSignal[]>([]); createEffect(() => { - setEvents(data.filter((entry) => - Array.from(filter()).every((value) => - entry.data.tags.some((tag:string) => - tag.toLowerCase() === String(value).toLowerCase() + setEvents( + data.filter((entry) => + Array.from(filter()).every((value) => + entry.data.tags.some( + (tag: string) => tag.toLowerCase() === String(value).toLowerCase() + ) ) ) - )) - }) + ); + }); function toggleTag(tag: string) { - setFilter((prev) => - new Set(prev.has(tag) - ? [...prev].filter((t) => t !== tag) - : [...prev, tag] - ) - ) + setFilter( + (prev) => + new Set( + prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag] + ) + ); } return (
-
Filter
+
+ Filtr +
    {(tag) => (
  • -
- ) + ); } diff --git a/src/components/Products.tsx b/src/components/Products.tsx new file mode 100644 index 0000000..e0ff0d3 --- /dev/null +++ b/src/components/Products.tsx @@ -0,0 +1,102 @@ +import type { CollectionEntry } from "astro:content"; +import { createEffect, createSignal, For } from "solid-js"; +import ArrowCard from "@components/ArrowCard"; +import { cn } from "@lib/utils"; + +type Props = { + tags: string[]; + data: CollectionEntry<"products">[]; +}; + +export default function Products({ data, tags }: Props) { + const [filter, setFilter] = createSignal(new Set()); + const [products, setProducts] = createSignal[]>( + [] + ); + + createEffect(() => { + setProducts( + data.filter((entry) => + Array.from(filter()).every((value) => + entry.data.tags.some( + (tag: string) => tag.toLowerCase() === String(value).toLowerCase() + ) + ) + ) + ); + }); + + function toggleTag(tag: string) { + setFilter( + (prev) => + new Set( + prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag] + ) + ); + } + + return ( +
+ {/* Filter Section */} +
+
+
+ Filtr +
+
    + + {(tag) => ( +
  • + +
    • + )} +     +
+
+
+ + {/* Product Grid */} +
+
+
+ POKAZYWANIE {products().length} Z {data.length} PRODUKTÓW +
+
+ {products().map((product) => ( + + ))} +
+
+
+
+ ); +} diff --git a/src/components/nnb/Workshop.tsx b/src/components/nnb/Workshop.tsx index ca2c5ac..03f8741 100644 --- a/src/components/nnb/Workshop.tsx +++ b/src/components/nnb/Workshop.tsx @@ -1,72 +1,101 @@ -import type { CollectionEntry } from "astro:content" -import { createEffect, createSignal, For } from "solid-js" -import ArrowCard from "@components/nnb/WorkshopCard" -import { cn } from "@lib/utils" +import type { CollectionEntry } from "astro:content"; +import { createEffect, createSignal, For } from "solid-js"; +import ArrowCard from "@components/nnb/WorkshopCard"; +import { cn } from "@lib/utils"; type Props = { - tags: string[] - data: CollectionEntry<"nnb_workshop">[] -} + tags: string[]; + data: CollectionEntry<"nnb_workshop">[]; +}; export default function Blog({ data, tags }: Props) { - const [filter, setFilter] = createSignal(new Set()) - const [workshop, setWorkshop] = createSignal[]>([]) + const [filter, setFilter] = createSignal(new Set()); + const [workshop, setWorkshop] = createSignal< + CollectionEntry<"nnb_workshop">[] + >([]); - createEffect(() => { - setWorkshop(data.filter((entry) => - Array.from(filter()).every((value) => - entry.data.tags.some((tag:string) => - tag.toLowerCase() === String(value).toLowerCase() - ) - ) - )) - }) + createEffect(() => { + setWorkshop( + data.filter((entry) => + Array.from(filter()).every((value) => + entry.data.tags.some( + (tag: string) => tag.toLowerCase() === String(value).toLowerCase() + ) + ) + ) + ); + }); - function toggleTag(tag: string) { - setFilter((prev) => - new Set(prev.has(tag) - ? [...prev].filter((t) => t !== tag) - : [...prev, tag] - ) + function toggleTag(tag: string) { + setFilter( + (prev) => + new Set( + prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag] ) - } + ); + } - return ( -
-
-
-
Filter
-
    - - {(tag) => ( -
  • - -
    • - )} -     -
-
-
-
-
-
- SHOWING {workshop().length} OF {data.length} ADD-ONS -
-
    - {workshop().map((entryp) => ( -
  • - -
    • - ))} -
-
-
+ return ( +
+
+
+
+ Filtr +
+
    + + {(tag) => ( +
  • + +
    • + )} +     +
+
+
+
+
+
+ SHOWING {workshop().length} OF {data.length} ADD-ONS +
+
    + {workshop().map((entryp) => ( +
  • + +
    • + ))} +
- ) +
+
+ ); } diff --git a/src/consts.ts b/src/consts.ts index 64c63e4..5f0106c 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -31,11 +31,6 @@ export const TEAM: Page = { DESCRIPTION: "See our team.", } -// Other Page -export const OTHERPROJECTS: Page = { - TITLE: "Other Stuff", - DESCRIPTION: "Random unfinished events.", -} // Search Page export const SEARCH: Page = { @@ -43,10 +38,10 @@ export const SEARCH: Page = { DESCRIPTION: "Search all posts and events by keyword.", } -// NNB Workshop -export const NNB_WORKSHOP: Page = { - TITLE: "NNB Workshop", - DESCRIPTION: "Explore modded content.", +// Products Page +export const PRODUCTS: Page = { + TITLE: "Produkty", + DESCRIPTION: "Recent events I have worked on.", } // Links @@ -57,7 +52,7 @@ export const LINKS: Links = [ }, { TEXT: "Produkty", - HREF: "/produkty", + HREF: "/products", }, { TEXT: "Lokalizacja", diff --git a/src/content.config.ts b/src/content.config.ts index 7c7b829..87ed4ab 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -36,6 +36,22 @@ const events = defineCollection({ }), }) + +const products = defineCollection({ + loader: glob({ pattern: '**\/[^_]*.md', base: "./src/content/products" }), + schema: z.object({ + title: z.string(), + summary: z.string(), + date: z.coerce.date(), + tags: z.array(z.string()), + draft: z.boolean().optional(), + demoUrl: z.string().optional(), + repoUrl: z.string().optional(), + imageUrl: z.string().optional(), + }), +}) + + const otherprojects = defineCollection({ loader: glob({ pattern: '**\/[^_]*.md', base: "./src/content/otherprojects" }), schema: z.object({ @@ -93,4 +109,4 @@ const legal = defineCollection({ }), }) -export const collections = { work, blog, events, legal, team, otherprojects, nnb_workshop} +export const collections = { work, blog, events, legal, team, otherprojects, nnb_workshop, products} diff --git a/src/content/products/00-Test/index.md b/src/content/products/00-Test/index.md new file mode 100644 index 0000000..3fe4d76 --- /dev/null +++ b/src/content/products/00-Test/index.md @@ -0,0 +1,13 @@ +--- +title: "Test" +summary: "Test" +date: "Jan 6 2024" +draft: false +tags: + - TEEEST +demoUrl: /mc_nnb +repoUrl: https://github.com/Nikos-Stuff/nikosnextbots +imageUrl: "/previews/sezam_preview.webp" +--- + +Test ABC diff --git a/src/content/products/01-Test/index.md b/src/content/products/01-Test/index.md new file mode 100644 index 0000000..3fe4d76 --- /dev/null +++ b/src/content/products/01-Test/index.md @@ -0,0 +1,13 @@ +--- +title: "Test" +summary: "Test" +date: "Jan 6 2024" +draft: false +tags: + - TEEEST +demoUrl: /mc_nnb +repoUrl: https://github.com/Nikos-Stuff/nikosnextbots +imageUrl: "/previews/sezam_preview.webp" +--- + +Test ABC diff --git a/src/content/products/02-Test/index.md b/src/content/products/02-Test/index.md new file mode 100644 index 0000000..3fe4d76 --- /dev/null +++ b/src/content/products/02-Test/index.md @@ -0,0 +1,13 @@ +--- +title: "Test" +summary: "Test" +date: "Jan 6 2024" +draft: false +tags: + - TEEEST +demoUrl: /mc_nnb +repoUrl: https://github.com/Nikos-Stuff/nikosnextbots +imageUrl: "/previews/sezam_preview.webp" +--- + +Test ABC diff --git a/src/content/products/03-Test/index.md b/src/content/products/03-Test/index.md new file mode 100644 index 0000000..3fe4d76 --- /dev/null +++ b/src/content/products/03-Test/index.md @@ -0,0 +1,13 @@ +--- +title: "Test" +summary: "Test" +date: "Jan 6 2024" +draft: false +tags: + - TEEEST +demoUrl: /mc_nnb +repoUrl: https://github.com/Nikos-Stuff/nikosnextbots +imageUrl: "/previews/sezam_preview.webp" +--- + +Test ABC diff --git a/src/layouts/ArticleTopLayout.astro b/src/layouts/ArticleTopLayout.astro index 6e27b81..533b98d 100644 --- a/src/layouts/ArticleTopLayout.astro +++ b/src/layouts/ArticleTopLayout.astro @@ -3,7 +3,7 @@ import type { CollectionEntry } from "astro:content" import { formatDate, readingTime } from "@lib/utils" type Props = { - entry: CollectionEntry<"events"> | CollectionEntry<"blog"> | CollectionEntry<"nnb_workshop"> + entry: CollectionEntry<"events"> | CollectionEntry<"blog"> | CollectionEntry<"products"> } const { entry } = Astro.props @@ -13,7 +13,7 @@ const { title, summary, date } = data const demoUrl = collection === "events" ? data.demoUrl : null const repoUrl = collection === "events" ? data.repoUrl : null -const imageUrl = collection === "events" ? data.imageUrl : null +const imageUrl = (collection === "events" || collection === "products") ? data.imageUrl : null; --- diff --git a/src/layouts/BottomLayout.astro b/src/layouts/BottomLayout.astro index 7ec2575..dbff71f 100644 --- a/src/layouts/BottomLayout.astro +++ b/src/layouts/BottomLayout.astro @@ -3,7 +3,7 @@ import Container from "@components/Container.astro" ---
- +
\ No newline at end of file diff --git a/src/layouts/TopLayout.astro b/src/layouts/TopLayout.astro index 4edad4e..e7f4d9e 100644 --- a/src/layouts/TopLayout.astro +++ b/src/layouts/TopLayout.astro @@ -3,7 +3,7 @@ import Container from "@components/Container.astro" ---
- +
\ No newline at end of file diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro new file mode 100644 index 0000000..86f997e --- /dev/null +++ b/src/pages/products/[...slug].astro @@ -0,0 +1,35 @@ +--- +import { type CollectionEntry, getCollection } from "astro:content" +import PageLayout from "@layouts/PageLayout.astro" +import TopLayout from "@layouts/TopLayout.astro" +import BottomLayout from "@layouts/BottomLayout.astro" +import ArticleTopLayout from "@layouts/ArticleTopLayout.astro" +import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro" + +// Create the static blog pages +export async function getStaticPaths() { + const products = await getCollection("products") + return products.map((product) => ({ + params: { slug: product.id }, + props: product, + })) +} + +// Get the requested post +type Props = CollectionEntry<"blog"> +const product = Astro.props +const { title, summary } = product.data +--- + + + +
+ +
+ + +
+ +
+ + \ No newline at end of file diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro new file mode 100644 index 0000000..e4eb369 --- /dev/null +++ b/src/pages/products/index.astro @@ -0,0 +1,30 @@ +--- +import { getCollection } from "astro:content" +import PageLayout from "@layouts/PageLayout.astro" +import TopLayout from "@layouts/TopLayout.astro" +import BottomLayout from "@layouts/BottomLayout.astro" +import Products from "@components/Products" +import { PRODUCTS } from "@consts" + +const products = (await getCollection("products")) + .filter(product => !product.data.draft) + .sort((a, b) => b.data.date.getTime() - a.data.date.getTime()) + +const tags = [...new Set(products.flatMap(post => post.data.tags))] + .sort((a, b) => a.localeCompare(b)) +--- + + + +
+ {PRODUCTS.TITLE} +
+ + +
+ +
+ + + +