From add7a887e03473d0bbeb0879a666910728021604 Mon Sep 17 00:00:00 2001 From: Maarten Dekker Date: Thu, 26 Jan 2023 11:27:50 +0100 Subject: [PATCH] Push Blog and Team to new Collections feature --- .../complete-guide-fullstack-development.md | 11 +-- .../essential-data-structures-algorithms.md | 11 +-- .../blog/how-to-become-frontend-master.md | 11 +-- src/{pages => content}/blog/kitchensink.mdx | 11 +-- src/content/config.ts | 39 +++++++++++ src/content/team/janette-lynch.md | 10 +++ src/content/team/marcell-ziemann.md | 10 +++ src/content/team/robert-palmer.md | 10 +++ src/pages/about.astro | 68 ++++++------------- src/pages/blog.astro | 52 +++++++------- src/pages/blog/[slug].astro | 62 +++++++++++++++++ 11 files changed, 209 insertions(+), 86 deletions(-) rename src/{pages => content}/blog/complete-guide-fullstack-development.md (96%) rename src/{pages => content}/blog/essential-data-structures-algorithms.md (96%) rename src/{pages => content}/blog/how-to-become-frontend-master.md (97%) rename src/{pages => content}/blog/kitchensink.mdx (98%) create mode 100644 src/content/config.ts create mode 100644 src/content/team/janette-lynch.md create mode 100644 src/content/team/marcell-ziemann.md create mode 100644 src/content/team/robert-palmer.md create mode 100644 src/pages/blog/[slug].astro diff --git a/src/pages/blog/complete-guide-fullstack-development.md b/src/content/blog/complete-guide-fullstack-development.md similarity index 96% rename from src/pages/blog/complete-guide-fullstack-development.md rename to src/content/blog/complete-guide-fullstack-development.md index e4b2c24..74ceaff 100644 --- a/src/pages/blog/complete-guide-fullstack-development.md +++ b/src/content/blog/complete-guide-fullstack-development.md @@ -1,11 +1,14 @@ --- +draft: false title: "The Complete Guide to Full Stack Web Development" -excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." -publishDate: "2022-11-08T11:39:36.050Z" -image: "https://images.unsplash.com/photo-1593720213428-28a5b9e94613?&fit=crop&w=430&h=240" +snippet: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." +image: { + src: "https://images.unsplash.com/photo-1593720213428-28a5b9e94613?&fit=crop&w=430&h=240", + alt: "full stack web development" +} +publishDate: "2022-11-08 11:39" category: "Tutorials" author: "Janette Lynch" -layout: "@layouts/BlogLayout.astro" tags: [webdev, tailwindcss, frontend] --- diff --git a/src/pages/blog/essential-data-structures-algorithms.md b/src/content/blog/essential-data-structures-algorithms.md similarity index 96% rename from src/pages/blog/essential-data-structures-algorithms.md rename to src/content/blog/essential-data-structures-algorithms.md index b443dec..0f09b56 100644 --- a/src/pages/blog/essential-data-structures-algorithms.md +++ b/src/content/blog/essential-data-structures-algorithms.md @@ -1,11 +1,14 @@ --- +draft: false title: " Introduction to the Essential Data Structures & Algorithms" -excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." -publishDate: "2022-11-09T16:39:36.050Z" -image: "https://images.unsplash.com/photo-1627163439134-7a8c47e08208?&fit=crop&w=430&h=240" +snippet: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." +image: { + src: "https://images.unsplash.com/photo-1627163439134-7a8c47e08208?&fit=crop&w=430&h=240", + alt: "data structures & algorithms" +} +publishDate: "2022-11-09 16:39" category: "Courses" author: "Marcell Ziemann" -layout: "@layouts/BlogLayout.astro" tags: [webdev, tailwindcss, frontend] --- diff --git a/src/pages/blog/how-to-become-frontend-master.md b/src/content/blog/how-to-become-frontend-master.md similarity index 97% rename from src/pages/blog/how-to-become-frontend-master.md rename to src/content/blog/how-to-become-frontend-master.md index c099f8e..ac655b4 100644 --- a/src/pages/blog/how-to-become-frontend-master.md +++ b/src/content/blog/how-to-become-frontend-master.md @@ -1,11 +1,14 @@ --- +draft: false title: "How to become a Frontend Master" -excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." -publishDate: "2022-11-07T15:39:36.050Z" -image: "https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?&fit=crop&w=430&h=240" +snippet: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." +image: { + src: "https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?&fit=crop&w=430&h=240", + alt: "frontend master" +} +publishDate: "2022-11-07 15:39" category: "Tutorials" author: "Connor Lopez" -layout: "@layouts/BlogLayout.astro" tags: [astro, tailwindcss, frontend] --- diff --git a/src/pages/blog/kitchensink.mdx b/src/content/blog/kitchensink.mdx similarity index 98% rename from src/pages/blog/kitchensink.mdx rename to src/content/blog/kitchensink.mdx index 3e704dd..c1d4e0e 100644 --- a/src/pages/blog/kitchensink.mdx +++ b/src/content/blog/kitchensink.mdx @@ -1,10 +1,13 @@ --- +draft: false title: "Typography Example Post" -excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" -publishDate: "2022-11-05T15:36:19.399Z" +snippet: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat" +publishDate: "2022-11-05 15:36" +image: { + src: "https://images.unsplash.com/photo-1542393545-10f5cde2c810?&fit=crop&w=430&h=240", + alt: "typography" +} category: "Technology" -layout: "@layouts/BlogLayout.astro" -image: "https://images.unsplash.com/photo-1542393545-10f5cde2c810?&fit=crop&w=430&h=240" author: "Charles North" tags: [mdx, astro, blog] --- diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..fa6c60c --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,39 @@ +// 1. Import utilities from `astro:content` +import { z, defineCollection } from 'astro:content'; + +// 2. Define your collection(s) +const blogCollection = defineCollection({ + schema: z.object({ + draft: z.boolean(), + title: z.string(), + snippet: z.string(), + image: z.object({ + src: z.string(), + alt: z.string(), + }), + publishDate: z.string().transform(str => new Date(str)), + author: z.string().default('Astroship'), + category: z.string(), + tags: z.array(z.string()), + }), +}); + +const teamCollection = defineCollection({ + schema: z.object({ + draft: z.boolean(), + name: z.string(), + title: z.string(), + avatar: z.object({ + src: z.string(), + alt: z.string(), + }), + publishDate: z.string().transform(str => new Date(str)), + }), +}); + +// 3. Export a single `collections` object to register your collection(s) +// This key should match your collection directory name in "src/content" +export const collections = { + 'blog': blogCollection, + 'team': teamCollection, +}; \ No newline at end of file diff --git a/src/content/team/janette-lynch.md b/src/content/team/janette-lynch.md new file mode 100644 index 0000000..3debb7d --- /dev/null +++ b/src/content/team/janette-lynch.md @@ -0,0 +1,10 @@ +--- +draft: false +name: "Janette Lynch" +title: "Senior Director" +avatar: { + src: "https://images.unsplash.com/photo-1580489944761-15a19d654956?&fit=crop&w=280", + alt: "Janette Lynch" +} +publishDate: "2022-11-07 15:39" +--- diff --git a/src/content/team/marcell-ziemann.md b/src/content/team/marcell-ziemann.md new file mode 100644 index 0000000..9a304e9 --- /dev/null +++ b/src/content/team/marcell-ziemann.md @@ -0,0 +1,10 @@ +--- +draft: false +name: "Marcell Ziemann" +title: "Principal Strategist" +avatar: { + src: "https://images.unsplash.com/photo-1633332755192-727a05c4013d?&fit=crop&w=280", + alt: "Marcell Ziemann" +} +publishDate: "2022-11-08 15:39" +--- diff --git a/src/content/team/robert-palmer.md b/src/content/team/robert-palmer.md new file mode 100644 index 0000000..9cf6e8d --- /dev/null +++ b/src/content/team/robert-palmer.md @@ -0,0 +1,10 @@ +--- +draft: false +name: "Robert Palmer" +title: "Marketing Engineer" +avatar: { + src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&fit=crop&w=280", + alt: "Robert Palmer" +} +publishDate: "2022-11-09 15:39" +--- diff --git a/src/pages/about.astro b/src/pages/about.astro index 8432c24..a5a23a8 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,45 +1,14 @@ --- +import { getCollection } from "astro:content"; +import { Picture } from "@astrojs/image/components"; import Layout from "@layouts/Layout.astro"; import Container from "@components/container.astro"; import Sectionhead from "@components/sectionhead.astro"; -import { Picture } from "@astrojs/image/components"; -const TeamImg1 = - "https://images.unsplash.com/photo-1580489944761-15a19d654956?&fit=crop&w=280"; -const TeamImg2 = - "https://images.unsplash.com/photo-1633332755192-727a05c4013d?&fit=crop&w=280"; -const TeamImg3 = - "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&fit=crop&w=280"; - -const team = [ - { - name: "Janette Lynch", - title: "Senior Director", - avatar: { - src: TeamImg1, - width: 480, - height: 560, - }, - }, - { - name: "Marcell Ziemann", - title: "Principal Strategist", - avatar: { - src: TeamImg2, - width: 580, - height: 580, - }, - }, - { - name: "Robert Palmer", - title: "Marketing Engineer", - avatar: { - src: TeamImg3, - width: 580, - height: 580, - }, - }, -]; +// Filter team entries with 'draft: false' & date before current date +const publishedTeamMembers = await getCollection("team", ({ data }) => { + return !data.draft && data.publishDate < new Date(); +}); --- @@ -61,24 +30,31 @@ const team = [
{ - team.map((item) => ( + publishedTeamMembers.map((teamMemberEntry) => (
-

{item.name}

-

{item.title}

+

+ {" "} + {teamMemberEntry.data.name} +

+

+ {" "} + {teamMemberEntry.data.title} +

)) diff --git a/src/pages/blog.astro b/src/pages/blog.astro index dbd8c5e..916a37d 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -1,62 +1,66 @@ --- +import { getCollection } from "astro:content"; import { Picture } from "@astrojs/image/components"; +import Layout from "@layouts/Layout.astro"; import Container from "@components/container.astro"; import Sectionhead from "@components/sectionhead.astro"; -import Layout from "@layouts/Layout.astro"; -import { getFormattedDate } from "@utils/all"; -import { log } from "astro/dist/core/logger/core"; -// Use Astro.glob() to fetch all posts, and then sort them by date. -const posts = (await Astro.glob("./blog/*.{md,mdx}")).sort( - (a, b) => - new Date(b.frontmatter.publishDate).valueOf() - - new Date(a.frontmatter.publishDate).valueOf() -); -console.log(posts[0].frontmatter.image); +// Filter blog entries with 'draft: false' & date before current date +const publishedBlogEntries = await getCollection("blog", ({ data }) => { + return !data.draft && data.publishDate < new Date(); +}); + +// Sort content entries by publication date +publishedBlogEntries.sort(function (a, b) { + return b.data.publishDate.valueOf() - a.data.publishDate.valueOf(); +}); --- Our Blog - We write about building startups and thoughts going on our mind. + + We write about building startups and thoughts going on our mind. +