feat: add author and tags entities

fbuireu · Dec 20, 2023 · 4f12642 · 4f12642
1 parent c53828d
commit 4f12642
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 82 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -19,6 +19,7 @@ export default defineConfig({
             },
         }),
     ],
+    prefetch: true,
     output: 'server',
     adapter: netlify(),
     vite: {

diff --git a/src/consts.ts b/src/consts.ts
@@ -1,2 +1,9 @@
 export const SITE_TITLE = 'Bianca Fiore';
 export const SITE_DESCRIPTION = 'Welcome to my website!';
+
+export const DEFAULT_DATE_OPTIONS: Intl.DateTimeFormatOptions = {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
diff --git a/src/content/articles/first-post.md b/src/content/articles/first-post.md
@@ -3,6 +3,8 @@ title: 'First post'
 description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 08 2022'
 featuredImage: ''
+tags: ['first', 'post']
+author: 'Bianca Fiore'
 slug: 'first-post'
 ---
 

diff --git a/src/content/articles/markdown-style-guide.md b/src/content/articles/markdown-style-guide.md
@@ -3,6 +3,8 @@ title: 'Markdown Style Guide'
 description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
 publishDate: 'Jul 01 2022'
 featuredImage: ''
+tags: ['second', 'post']
+author: 'Bianca Fiore'
 slug: 'markdown-style-guide'
 ---
 
@@ -98,7 +100,7 @@ November 18, 2015.
 #### Output
 
 | Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
+|-----------|----------|--------|
 | _italics_ | **bold** | `code` |
 
 ## Code Blocks
@@ -129,13 +131,13 @@ Output
 ```html
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Example HTML5 Document</title>
-    </head>
-    <body>
-        <p>Test</p>
-    </body>
+<head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+</head>
+<body>
+<p>Test</p>
+</body>
 </html>
 ```
 
@@ -162,40 +164,40 @@ Output
 #### Syntax
 
 ```markdown
--   List item
--   Another item
--   And another item
+- List item
+- Another item
+- And another item
 ```
 
 #### Output
 
--   List item
--   Another item
--   And another item
+- List item
+- Another item
+- And another item
 
 ### Nested list
 
 #### Syntax
 
 ```markdown
--   Fruit
-    -   Apple
-    -   Orange
-    -   Banana
--   Dairy
-    -   Milk
-    -   Cheese
+- Fruit
+    - Apple
+    - Orange
+    - Banana
+- Dairy
+    - Milk
+    - Cheese
 ```
 
 #### Output
 
--   Fruit
-    -   Apple
-    -   Orange
-    -   Banana
--   Dairy
-    -   Milk
-    -   Cheese
+- Fruit
+    - Apple
+    - Orange
+    - Banana
+- Dairy
+    - Milk
+    - Cheese
 
 ## Other Elements — abbr, sub, sup, kbd, mark
 

diff --git a/src/content/articles/second-post.md b/src/content/articles/second-post.md
@@ -3,6 +3,8 @@ title: 'Second post'
 description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 22 2022'
 featuredImage: ''
+tags: ['post']
+author: 'Bianca Fiore'
 slug: 'second-post'
 ---
 

diff --git a/src/content/articles/third-post.md b/src/content/articles/third-post.md
@@ -3,6 +3,8 @@ title: 'Third post'
 description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 15 2022'
 featuredImage: ''
+tags: []
+author: 'Bianca Fiore'
 slug: 'third-post'
 ---
 

diff --git a/src/content/articles/using-mdx.mdx b/src/content/articles/using-mdx.mdx
@@ -3,6 +3,8 @@ title: 'Using MDX'
 description: 'Lorem ipsum dolor sit amet'
 publishDate: 'Jul 02 2022'
 featuredImage: ''
+tags: ['first', 'post']
+author: 'Bianca Fiore'
 slug: 'using-mdx'
 ---
 
@@ -23,6 +25,8 @@ If you have existing content authored in MDX, this integration will hopefully ma
 Here is how you import and use a UI component inside of MDX.  
 When you open this page in the browser, you should see the clickable button below.
 
+
+
 import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro';
 
 <HeaderLink href="#" onclick="alert('clicked!')">
@@ -34,5 +38,5 @@ import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro';
 -   [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
 -   [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
 -   **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are
-    still required to create interactive components. Otherwise, all components in your MDX will render as static HTML
-    (no JavaScript) by default.
+still required to create interactive components. Otherwise, all components in your MDX will render as static HTML
+(no JavaScript) by default.
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -7,6 +7,8 @@ const articles = defineCollection({
         publishDate: z.coerce.date(),
         updatedDate: z.coerce.date().optional(),
         featuredImage: z.string().optional(),
+        tags: z.string().array().optional(),
+        author: z.string(),
     }),
 });
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,11 +5,12 @@ import Testimonials from '@components/organisms/testimonials/Testimonials.astro'
 import MyWork from '@components/organisms/myWork/MyWork.astro';
 import LatestArticles from '@components/organisms/latestArticles/LatestArticles.astro';
 
-// current todo: fresh from the blog
+// current todo: fresh from the blog (variants)
 // todo: latest articles following(https://scroll-driven-animations.style/demos/stacking-cards/css/)
 // todo: reveal on enter viewport (check current implementation). add .reveal to test
 // todo: SEO + HTML structure
 // todo: view transitions
+// todo: theme toggle
 // todo: add vitest
 // todo: add CIs
 ---
@@ -18,13 +19,4 @@ import LatestArticles from '@components/organisms/latestArticles/LatestArticles.
     <Testimonials />
     <MyWork />
     <LatestArticles />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-
 </BaseLayout>
diff --git a/src/pages/tags/[...tag].astro b/src/pages/tags/[...tag].astro
@@ -0,0 +1,32 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from 'src/ui/components/templates/baseLayout/BaseLayout.astro';
+import ArticleLayout from 'src/ui/components/templates/articleLayout/ArticleLayout.astro';
+
+export async function getStaticPaths() {
+    const allPosts = await getCollection('articles');
+    const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags)?.flat())];
+
+    return uniqueTags?.map((tag) => {
+        const filteredPosts = allPosts.filter((post) =>
+            post.data.tags.includes(tag),
+        );
+        return {
+            params: { tag },
+            props: { posts: filteredPosts },
+        };
+    });
+}
+
+const { tag = '' } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<BaseLayout title={tag}>
+    <p>Posts tagged with {tag}</p>
+    <ul>
+        {posts?.map((post) =>
+            <ArticleLayout title={post.data.title} />,
+        )}
+    </ul>
+</BaseLayout>
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
@@ -0,0 +1,7 @@
+---
+import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro';
+---
+
+<BaseLayout title="" description="">
+    <h1>Hello, blog!</h1>
+</BaseLayout>
diff --git a/src/ui/components/atoms/logo/logo.css b/src/ui/components/atoms/logo/logo.css
@@ -12,7 +12,7 @@
         svg {
             transition:
                 scale 0.2s,
-                fill 0.2s;
+                fill 0.3s;
         }
 
         &.--is-scrolling:not(.--is-menu-open) svg {

diff --git a/src/ui/components/organisms/header/components/menuButton/menuButton.css b/src/ui/components/organisms/header/components/menuButton/menuButton.css
@@ -18,7 +18,7 @@
         border: 1px solid var(--neutral-main);
         height: calc(var(--header-height) * 0.85);
         position: absolute;
-        transition: border 0.3s;
+        transition: border 0.2s;
         translate: 0 -25%;
         width: calc(var(--header-height) * 0.85);
         z-index: 20;

diff --git a/src/ui/components/organisms/header/utils/intersectionObserver/intersectionObserver.ts b/src/ui/components/organisms/header/utils/intersectionObserver/intersectionObserver.ts
@@ -1,39 +1,53 @@
+const SELECTORS = {
+    HEADER: '.header',
+    LATEST_ARTICLES: '.latest-articles__wrapper',
+    SITE_LOGO_SVG: '.site__logo svg',
+    HEADER_MENU_TEXT: '.header',
+    HEADER_MENU_OUTLINES: '.header__menu-button__outline',
+};
+
+const getComputedStyleValue = (property: string): string =>
+    getComputedStyle(document.documentElement).getPropertyValue(property);
+
+function isIntersecting(element: HTMLElement): boolean {
+    const { HEADER: HEADER_SELECTOR } = SELECTORS;
+    const headerOffsetHeight = (document.querySelector(HEADER_SELECTOR) as HTMLElement).offsetHeight / 2;
+    const threshold = element.offsetTop - headerOffsetHeight;
+    const sectionBottom = element.offsetTop + element.offsetHeight - headerOffsetHeight;
+
+    return window.scrollY >= threshold && window.scrollY < sectionBottom;
+}
+
 export function intersectionObserver(): void {
-    function handleScroll() {
-        let hasIntersected = false;
-        const WHITE = getComputedStyle(document.documentElement).getPropertyValue('--white');
-        const BLACK = getComputedStyle(document.documentElement).getPropertyValue("--neutral-main'");
-        const HEADER = document.querySelector('.header') as HTMLElement;
-        const LATEST_ARTICLES = document.querySelector('.latest-articles__wrapper') as HTMLElement;
-        const SITE_LOGO_SVG = document.querySelector('.site__logo svg') as HTMLElement;
-        const HEADER_MENU_TEXT = document.querySelector('.header__menu-text') as HTMLElement;
-        const HEADER_MENU_OUTLINES = document.querySelectorAll(
-            '.header__menu-button__outline'
-        ) as unknown as HTMLElement[];
-        const ELEMENTS_TO_INTERSECT: HTMLElement[] = [LATEST_ARTICLES];
-
-        if (!HEADER || !LATEST_ARTICLES) return;
-
-        ELEMENTS_TO_INTERSECT.forEach(({ offsetTop, offsetHeight }) => {
-            const headerOffsetHeight = HEADER.offsetHeight / 2;
-            const threshold = offsetTop - headerOffsetHeight;
-            const sectionBottom = offsetTop + offsetHeight - headerOffsetHeight;
-
-            if (window.scrollY >= threshold && window.scrollY < sectionBottom) hasIntersected = true;
-        });
-
-        if (hasIntersected) {
-            HEADER.classList.add('--hue-change');
-            SITE_LOGO_SVG.style.fill = WHITE;
-            HEADER_MENU_TEXT.style.color = WHITE;
-            HEADER_MENU_OUTLINES.forEach((element) => (element.style.borderColor = WHITE));
-        } else {
-            HEADER.classList.remove('--hue-change');
-            SITE_LOGO_SVG.style.fill = BLACK;
-            HEADER_MENU_TEXT.style.color = BLACK;
-            HEADER_MENU_OUTLINES.forEach((element) => (element.style.borderColor = BLACK));
-        }
-    }
+    const WHITE = getComputedStyleValue('--white');
+    const BLACK = getComputedStyleValue('--neutral-main');
+    const {
+        HEADER: HEADER_SELECTOR,
+        LATEST_ARTICLES: LATEST_ARTICLES_SELECTOR,
+        SITE_LOGO_SVG: SITE_LOGO_SVG_SELECTOR,
+        HEADER_MENU_TEXT: HEADER_MENU_TEXT_SELECTOR,
+        HEADER_MENU_OUTLINES: HEADER_MENU_OUTLINES_SELECTOR,
+    } = SELECTORS;
 
-    window.addEventListener('scroll', handleScroll);
+    const HEADER = document.querySelector(HEADER_SELECTOR) as HTMLElement;
+    const LATEST_ARTICLES = document.querySelector(LATEST_ARTICLES_SELECTOR) as HTMLElement;
+    const SITE_LOGO_SVG = document.querySelector(SITE_LOGO_SVG_SELECTOR) as HTMLElement;
+    const HEADER_MENU_TEXT = document.querySelector(HEADER_MENU_TEXT_SELECTOR) as HTMLElement;
+    const HEADER_MENU_OUTLINES = document.querySelectorAll(HEADER_MENU_OUTLINES_SELECTOR) as unknown as HTMLElement[];
+
+    if (!HEADER || !LATEST_ARTICLES) return;
+
+    const hasIntersected = isIntersecting(LATEST_ARTICLES);
+
+    if (hasIntersected) {
+        SITE_LOGO_SVG.style.fill = WHITE;
+        HEADER_MENU_TEXT.style.color = WHITE;
+        HEADER_MENU_OUTLINES.forEach((element) => (element.style.borderColor = WHITE));
+    } else {
+        SITE_LOGO_SVG.style.fill = BLACK;
+        HEADER_MENU_TEXT.style.color = BLACK;
+        HEADER_MENU_OUTLINES.forEach((element) => (element.style.borderColor = BLACK));
+    }
 }
+
+window.addEventListener('scroll', intersectionObserver);