From b1784bc2a60f8e9a0da364a2c46dee1318cbbde5 Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 18:42:00 +0100 Subject: [PATCH 1/7] chore: added intelliJ project files to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e28fdd0..f0718f8 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,4 @@ yarn.lock # other folders .vercel .netlify +.idea From ff12afbf1548103cfc6cbac5a7403397be4e89bb Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 18:45:01 +0100 Subject: [PATCH 2/7] feat: added tags and tag handling added tags to fontmatter metadata and displaying in a list on BlogCart while checking if prop has values. --- src/components/BlogCard.astro | 28 +++++++++++++++++++++++----- src/pages/index.astro | 10 +++++++++- src/pages/snippets.astro | 27 ++++++++++++++++++--------- 3 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 199c74c..2603859 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -5,19 +5,37 @@ export interface Props { pubDate: string; url: string | undefined; contributedBy: string; + tags: string[]; } -let { title, description, pubDate, url, contributedBy } = Astro.props; +let { title, description, pubDate, url, contributedBy, tags } = Astro.props; const shortDate = new Date(pubDate).toLocaleDateString("en", { dateStyle: "short", }); url = url + "/"; --- -
  • - +
  • + -

    {title}

     + +

    {title}

    + +     +
    + { + tags.map((tag) => ( + + {tag} + + )) + } +
    -
    • \ No newline at end of file + diff --git a/src/pages/index.astro b/src/pages/index.astro index 7daac74..91f3b7b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,6 +7,7 @@ interface Frontmatter { pubDate: string; description: string; contributedBy: string; + tags: string; } const metadata = { @@ -25,7 +26,7 @@ blogs = blogs.sort(
    - +

    item.trim()) + : [] + } /> )) } diff --git a/src/pages/snippets.astro b/src/pages/snippets.astro index fbe0d55..99c8dcd 100644 --- a/src/pages/snippets.astro +++ b/src/pages/snippets.astro @@ -7,6 +7,7 @@ interface Frontmatter { pubDate: string; description: string; contributedBy: string; + tags: string; } let blogs = await Astro.glob("./snippets/*.mdx"); @@ -28,15 +29,23 @@ blogs = blogs.sort(
      { - blogs.map((post) => ( - - )) + blogs.map((post) => { + console.log("post", post); + return ( + item.trim()) + : [] + } + /> + ); + }) }
    From bf1a8438bd33b61208cf2029f538a6c268f61959 Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 19:01:56 +0100 Subject: [PATCH 3/7] refactor: logic only used in BlogCard simplified interface, refactored to models file for better reusability. --- src/components/BlogCard.astro | 7 +++++-- src/pages/index.astro | 16 ++-------------- src/pages/models.ts | 7 +++++++ src/pages/snippets.astro | 15 ++------------- src/pages/snippets/v15-standalone.mdx | 14 +++++++++----- 5 files changed, 25 insertions(+), 34 deletions(-) create mode 100644 src/pages/models.ts diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 2603859..2e5a9b9 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -5,13 +5,16 @@ export interface Props { pubDate: string; url: string | undefined; contributedBy: string; - tags: string[]; + tags: string | null; } let { title, description, pubDate, url, contributedBy, tags } = Astro.props; const shortDate = new Date(pubDate).toLocaleDateString("en", { dateStyle: "short", }); url = url + "/"; + +// preprocess tags +const tagsProcessed = tags ? tags.split(",").map((item) => item.trim()) : []; ---
  • { - tags.map((tag) => ( + tagsProcessed.map((tag) => ( {tag} diff --git a/src/pages/index.astro b/src/pages/index.astro index 91f3b7b..8d673c7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,13 +2,7 @@ import Layout from "@layouts/Layout.astro"; import BlogCard from "@components/BlogCard.astro"; import { Icon } from "astro-icon"; -interface Frontmatter { - title: string; - pubDate: string; - description: string; - contributedBy: string; - tags: string; -} +import { Frontmatter } from "./models"; const metadata = { title: "Angular Snippets", @@ -62,13 +56,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={ - post.frontmatter.tags - ? post.frontmatter.tags - .split(",") - .map((item) => item.trim()) - : [] - } + tags={post.frontmatter.tags} /> )) } diff --git a/src/pages/models.ts b/src/pages/models.ts new file mode 100644 index 0000000..1729359 --- /dev/null +++ b/src/pages/models.ts @@ -0,0 +1,7 @@ +export interface Frontmatter { + title: string; + pubDate: string; + description: string; + contributedBy: string; + tags: string; +} diff --git a/src/pages/snippets.astro b/src/pages/snippets.astro index 99c8dcd..17dec5c 100644 --- a/src/pages/snippets.astro +++ b/src/pages/snippets.astro @@ -1,14 +1,7 @@ --- import Layout from "@layouts/Layout.astro"; import BlogCard from "@components/BlogCard.astro"; - -interface Frontmatter { - title: string; - pubDate: string; - description: string; - contributedBy: string; - tags: string; -} +import { Frontmatter } from "./models"; let blogs = await Astro.glob("./snippets/*.mdx"); blogs = blogs.sort( @@ -38,11 +31,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={ - post.frontmatter.tags - ? post.frontmatter.tags.split(",").map((item) => item.trim()) - : [] - } + tags={post.frontmatter.tags} /> ); }) diff --git a/src/pages/snippets/v15-standalone.mdx b/src/pages/snippets/v15-standalone.mdx index d4a80d2..6b3cd1f 100644 --- a/src/pages/snippets/v15-standalone.mdx +++ b/src/pages/snippets/v15-standalone.mdx @@ -1,6 +1,7 @@ --- title: Angular 15 Standalone Components description: "Easy example of Angular 15 standalone components in existing projects" +tags: angular15, standalone components # comma separated list which gets trimmed pubDate: Feb 22, 2022 contributedBy: "@olierxleben" --- @@ -9,22 +10,25 @@ Here is a quick example of how to use a standalone component in an existing NgMo Let`s start with the component itself. ```typescript -import {Component} from '@angular/core'; +import { Component } from "@angular/core"; @Component({ - selector: 'fancy-button', + selector: "fancy-button", standalone: true, // magic lies here template: ` - `, }) -export class ButtonComponent { -} +export class ButtonComponent {} ``` + --- + And for the integration in an NgModule, you can just do the following: ```typescript From d5af939d869197a2c8808da3791973e97eb0fedb Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 21:10:18 +0100 Subject: [PATCH 4/7] refactor: treat tags as string[] --- src/components/BlogCard.astro | 7 ++----- src/pages/index.astro | 2 +- src/pages/models.ts | 2 +- src/pages/snippets.astro | 2 +- src/pages/snippets/v15-standalone.mdx | 2 +- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 2e5a9b9..2603859 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -5,16 +5,13 @@ export interface Props { pubDate: string; url: string | undefined; contributedBy: string; - tags: string | null; + tags: string[]; } let { title, description, pubDate, url, contributedBy, tags } = Astro.props; const shortDate = new Date(pubDate).toLocaleDateString("en", { dateStyle: "short", }); url = url + "/"; - -// preprocess tags -const tagsProcessed = tags ? tags.split(",").map((item) => item.trim()) : []; ---
  • item.trim()) : [];
    { - tagsProcessed.map((tag) => ( + tags.map((tag) => ( {tag} diff --git a/src/pages/index.astro b/src/pages/index.astro index 8d673c7..5a9ed41 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -56,7 +56,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={post.frontmatter.tags} + tags={post.frontmatter.tags || []} /> )) } diff --git a/src/pages/models.ts b/src/pages/models.ts index 1729359..b44bea9 100644 --- a/src/pages/models.ts +++ b/src/pages/models.ts @@ -3,5 +3,5 @@ export interface Frontmatter { pubDate: string; description: string; contributedBy: string; - tags: string; + tags?: string[]; } diff --git a/src/pages/snippets.astro b/src/pages/snippets.astro index 17dec5c..05e6e25 100644 --- a/src/pages/snippets.astro +++ b/src/pages/snippets.astro @@ -31,7 +31,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={post.frontmatter.tags} + tags={post.frontmatter.tags || []} /> ); }) diff --git a/src/pages/snippets/v15-standalone.mdx b/src/pages/snippets/v15-standalone.mdx index 6b3cd1f..875ce3a 100644 --- a/src/pages/snippets/v15-standalone.mdx +++ b/src/pages/snippets/v15-standalone.mdx @@ -1,7 +1,7 @@ --- title: Angular 15 Standalone Components description: "Easy example of Angular 15 standalone components in existing projects" -tags: angular15, standalone components # comma separated list which gets trimmed +tags: ["angular15", "standalone components"] # comma separated list which gets trimmed pubDate: Feb 22, 2022 contributedBy: "@olierxleben" --- From b0de1675d72d06c02f8da2782282c7e734f1671b Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 21:16:44 +0100 Subject: [PATCH 5/7] feat: added tags to snippet page adjusted CSS, cleanup --- src/components/BlogCard.astro | 2 +- src/layouts/BlogLayout.astro | 7 +++++++ src/pages/snippets.astro | 1 - 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 2603859..e2036a3 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -29,7 +29,7 @@ url = url + "/";
    { tags.map((tag) => ( - + {tag} )) diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 76e3fa7..95e9197 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -93,6 +93,13 @@ const canonicalURL = new URL(Astro.url).href; + { + frontmatter.tags.map((tag) => ( + + {tag} + + )) + } {frontmatter.contributedBy} diff --git a/src/pages/snippets.astro b/src/pages/snippets.astro index 05e6e25..e77c958 100644 --- a/src/pages/snippets.astro +++ b/src/pages/snippets.astro @@ -23,7 +23,6 @@ blogs = blogs.sort(
      { blogs.map((post) => { - console.log("post", post); return ( Date: Thu, 23 Feb 2023 21:39:11 +0100 Subject: [PATCH 6/7] refactor: tags is mandatory, so added tags to all snippets --- src/pages/index.astro | 2 +- src/pages/snippets.astro | 2 +- src/pages/snippets/source-map.mdx | 11 ++++++----- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 5a9ed41..8d673c7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -56,7 +56,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={post.frontmatter.tags || []} + tags={post.frontmatter.tags} /> )) } diff --git a/src/pages/snippets.astro b/src/pages/snippets.astro index e77c958..3f847ef 100644 --- a/src/pages/snippets.astro +++ b/src/pages/snippets.astro @@ -30,7 +30,7 @@ blogs = blogs.sort( pubDate={post.frontmatter.pubDate} url={post.url} contributedBy={post.frontmatter.contributedBy} - tags={post.frontmatter.tags || []} + tags={post.frontmatter.tags} /> ); }) diff --git a/src/pages/snippets/source-map.mdx b/src/pages/snippets/source-map.mdx index 6ff7b39..2401eb9 100644 --- a/src/pages/snippets/source-map.mdx +++ b/src/pages/snippets/source-map.mdx @@ -1,18 +1,20 @@ --- title: Make source maps available for reporting tools description: "Make source maps available for reporting tools" +tags: [json, sourceMaps] pubDate: Feb 20, 2022 contributedBy: "@SantoshYadavDev" --- -import BlogImage from "@components/BlogImage.astro" -import SourceMap from "@images/source-map.jpg" -Do you want to upload source-map to an reporting tool like +import BlogImage from "@components/BlogImage.astro"; +import SourceMap from "@images/source-map.jpg"; + +Do you want to upload source-map to an reporting tool like @datadoghq , but want to make sure no one can debug the code due to sourceMap - --- + Set below property in build options, the source-map will not be mapped to the bundle, but you will get a source map. ```json @@ -21,5 +23,4 @@ Set below property in build options, the source-map will not be mapped to the bu } ``` - From a89223405d70ecf57bbb925480837ed7045ef870 Mon Sep 17 00:00:00 2001 From: Oliver Erxleben Date: Thu, 23 Feb 2023 21:47:19 +0100 Subject: [PATCH 7/7] refactor: moved tags to own component and display below date --- src/components/BlogCard.astro | 12 +++--------- src/components/TagsLine.astro | 13 +++++++++++++ src/layouts/BlogLayout.astro | 11 ++++------- 3 files changed, 20 insertions(+), 16 deletions(-) create mode 100644 src/components/TagsLine.astro diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index e2036a3..acb4dab 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -1,4 +1,6 @@ --- +import TagsLine from "./TagsLine.astro"; + export interface Props { title: string; description: string; @@ -26,15 +28,7 @@ url = url + "/";

      {title}

      -
      - { - tags.map((tag) => ( - - {tag} - - )) - } -
      + diff --git a/src/components/TagsLine.astro b/src/components/TagsLine.astro new file mode 100644 index 0000000..612f748 --- /dev/null +++ b/src/components/TagsLine.astro @@ -0,0 +1,13 @@ +--- +const { tags } = Astro.props; +--- + +
      + { + tags.map((tag) => ( + + {tag} + + )) + } +
      diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 95e9197..e03f77e 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -2,6 +2,7 @@ import "@fontsource/inter/variable.css"; import "@fontsource/fira-code"; import Header from "@components/Header.astro"; +import TagsLine from "@components/TagsLine.astro"; let { pubDate } = Astro.props.content; const { frontmatter } = Astro.props; @@ -93,17 +94,13 @@ const canonicalURL = new URL(Astro.url).href; - { - frontmatter.tags.map((tag) => ( - - {tag} - - )) - } {frontmatter.contributedBy} +
      + +