From 346ed4fcc957649b61309f404b7e05878acfeacd Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 24 Dec 2024 10:29:25 +0100 Subject: [PATCH 1/2] rename created -> createdAt + use it in publisable + in RSS --- src/components/LinkToPost.astro | 1 + src/components/get-posts.ts | 14 +++----------- src/components/starlight/PageTitle.astro | 2 +- src/content/config.ts | 1 + src/content/docs/index.mdx | 1 - .../docs/posts/CSS/css-before-vs-before.mdx | 2 +- .../CSS/how-does-css-work-the-specificity.mdx | 2 +- .../posts/CSS/how-to-learn-css-with-games.mdx | 2 +- .../docs/posts/CSS/proper-cross-fade-in-css.mdx | 2 +- ...ght-dark-mode-avoid-flickering-on-reload.mdx | 2 +- .../Dark mode/light-dark-mode-corrections.mdx | 2 +- .../light-dark-mode-react-implementation.mdx | 2 +- ...t-dark-mode-system-mode-user-preferences.mdx | 2 +- .../Dark mode/light-dark-mode-the-lazy-way.mdx | 2 +- .../light-dark-mode-the-simple-way.mdx | 2 +- .../Dark mode/light-dark-mode-user-input.mdx | 2 +- .../Others/blocz-react-responsive-v3-is-out.mdx | 6 +++--- src/content/docs/posts/Others/cra-vs-parcel.mdx | 2 +- ...er-dont-use-stringsplit-nor-stringlength.mdx | 2 +- .../docs/posts/Others/monitoring-websockets.mdx | 4 ++-- .../posts/Others/semver-the-unknown-parts.mdx | 2 +- ...igrating-class-components-to-hooks-rules.mdx | 2 +- .../migrating-class-components-to-hooks.mdx | 2 +- .../React/react-life-cycles-and-timings.mdx | 2 +- .../React/react-refs-and-dom-references.mdx | 4 ++-- .../posts/React/responsive-design-in-react.mdx | 2 +- .../typescript-49-satisfies-operator.mdx | 2 +- .../typescript-50-new-mode-bundler-esm.mdx | 2 +- .../posts/Yarn/yarn-lock-how-to-read-it.mdx | 2 +- .../posts/Yarn/yarn-lock-how-to-update-it.mdx | 2 +- src/pages/rss.xml.ts | 17 +---------------- 31 files changed, 36 insertions(+), 58 deletions(-) diff --git a/src/components/LinkToPost.astro b/src/components/LinkToPost.astro index bc19f3d..0b61a8e 100644 --- a/src/components/LinkToPost.astro +++ b/src/components/LinkToPost.astro @@ -19,6 +19,7 @@ if (entry == null) { let description: undefined | string; if (includeDate && entry.data.lastUpdated) { + // TODO: rework description = "Last updated " + new Date(entry.data.lastUpdated).toLocaleDateString("en-US", { diff --git a/src/components/get-posts.ts b/src/components/get-posts.ts index 240d3f9..9a33571 100644 --- a/src/components/get-posts.ts +++ b/src/components/get-posts.ts @@ -1,12 +1,8 @@ import { getCollection, type CollectionEntry } from "astro:content"; const getTime = (post: CollectionEntry<"docs">): number => { - if (post.data.lastUpdated instanceof Date) { - return post.data.lastUpdated.getTime(); - } - - if (typeof post.data.lastUpdated === "number") { - return post.data.lastUpdated; + if (post.data.createdAt) { + return post.data.createdAt.getTime(); } return 0; @@ -15,11 +11,7 @@ const getTime = (post: CollectionEntry<"docs">): number => { export const getPublishablePosts = async () => { const posts = await getCollection( "docs", - (post) => - post.data.lastUpdated && - post.data.lastUpdated instanceof Date && - !post.data.draft && - post.data.pagefind, + (post) => post.data.createdAt && !post.data.draft && post.data.pagefind, ); return posts.sort((postA, postB) => getTime(postB) - getTime(postA)); diff --git a/src/components/starlight/PageTitle.astro b/src/components/starlight/PageTitle.astro index 85473b2..49ffcff 100644 --- a/src/components/starlight/PageTitle.astro +++ b/src/components/starlight/PageTitle.astro @@ -19,7 +19,7 @@ const lastUpdatedString = lastUpdated?.toLocaleDateString("en-US", { day: "numeric", }); -// TODO: add created at time +// TODO: add `createdAt` time --- diff --git a/src/content/config.ts b/src/content/config.ts index 50c83a1..301e407 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -5,6 +5,7 @@ export const collections = { docs: defineCollection({ schema: docsSchema({ extend: z.object({ + createdAt: z.date().optional(), image: z.string().optional(), }), }), diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index f917d32..e50985d 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -8,7 +8,6 @@ hero: image: file: "/public/images/favicon.png" # TODO: use a better quality image alt: "Ayc0’s logo" -lastUpdated: false --- import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components"; diff --git a/src/content/docs/posts/CSS/css-before-vs-before.mdx b/src/content/docs/posts/CSS/css-before-vs-before.mdx index 67c357c..10160aa 100644 --- a/src/content/docs/posts/CSS/css-before-vs-before.mdx +++ b/src/content/docs/posts/CSS/css-before-vs-before.mdx @@ -1,7 +1,7 @@ --- title: "CSS :before vs ::before & :after vs ::after" tags: ["html", "webdev", "fundamentals", "css"] -created: 2023-01-17 +createdAt: 2023-01-17 lastUpdated: 2023-01-23 sidebar: order: 2 diff --git a/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx b/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx index f3bbe72..f729adf 100644 --- a/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx +++ b/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx @@ -1,7 +1,7 @@ --- title: "How does CSS work? The specificity" tags: ["css", "webdev"] -created: 2023-01-30 +createdAt: 2023-01-30 lastUpdated: 2023-01-30 sidebar: order: 4 diff --git a/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx b/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx index 74cb973..e1c66ee 100644 --- a/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx +++ b/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx @@ -1,7 +1,7 @@ --- title: "How to learn CSS with games" tags: ["css", "learn"] -created: 2023-01-26 +createdAt: 2023-01-26 lastUpdated: 2023-01-26 sidebar: order: 3 diff --git a/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx b/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx index cac5afa..0d4d4be 100644 --- a/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx +++ b/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx @@ -1,7 +1,7 @@ --- title: "Proper cross-fade in CSS" tags: ["css", "webdev", "tutorial"] -created: 2022-10-06 +createdAt: 2022-10-06 lastUpdated: 2022-10-06 sidebar: order: 1 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx index b566ede..a2acc84 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: avoid flickering on reload" tags: ["webdev", "css", "javascript"] -created: 2021-06-01 +createdAt: 2021-06-01 lastUpdated: 2023-01-15 sidebar: order: 5 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx index 096d4a6..bb61ad3 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: Corrections" tags: ["webdev", "css", "javascript"] -created: 2023-01-16 +createdAt: 2023-01-16 lastUpdated: 2023-01-16 sidebar: order: 7 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx index c5a6edf..3d25d81 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: React implementation" tags: ["webdev", "css", "react", "javascript"] -created: 2021-06-24 +createdAt: 2021-06-24 lastUpdated: 2023-01-16 sidebar: order: 6 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx index a91a2d5..bbdaedc 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: system mode + user preferences" tags: ["webdev", "css", "javascript"] -created: 2021-05-31 +createdAt: 2021-05-31 lastUpdated: 2023-01-16 sidebar: order: 4 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx index 3bc4cff..9fd0be5 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: the lazy way" tags: ["webdev", "css"] -created: 2021-05-29 +createdAt: 2021-05-29 lastUpdated: 2023-01-16 sidebar: order: 1 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx index 08e961e..5b2b1b1 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: the simple way" tags: ["webdev", "css"] -created: 2021-05-30 +createdAt: 2021-05-30 lastUpdated: 2021-06-24 sidebar: order: 2 diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx index ed484b1..e7e03c8 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx @@ -1,7 +1,7 @@ --- title: "Light/dark mode: user input" tags: ["webdev", "css", "javascript"] -created: 2021-05-30 +createdAt: 2021-05-30 lastUpdated: 2023-01-15 sidebar: order: 3 diff --git a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx b/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx index 0c3bc8f..8f8d4ee 100644 --- a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx +++ b/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx @@ -1,7 +1,7 @@ --- title: "@blocz/react-responsive v3 is out" tags: ["react", "responsive", "package"] -created: 2021-03-12 +createdAt: 2021-03-12 lastUpdated: 2021-03-12 --- @@ -25,7 +25,7 @@ The v3 of `@blocz/react-responsive` was just released with few bug fixes and new - define a set of predefined breakpoints and not having to redefine them every time, - breakpoints should be ranges of sizes instead of actual breakpoints: when someone uses `md`, they usually don't want to apply this to `sm` too (except if you specify `md down`). -And none of the libraries that existed at the time were able to provide those features. So I created mine: `react-only`. +And none of the libraries that existed at the time were able to provide those features. So I createdAt mine: `react-only`. This library evolved as the react community evolved too: @@ -111,7 +111,7 @@ By default, breakpoint will use `px` but you can use `em` or any valid CSS unit. ### CSS-in-JS -When we created the library, we were using [styletron](https://github.com/styletron/styletron) for our styles, and we wanted to bind the breakpoints we defined in `@blocz/react-responsive` with the breakpoints used for our styles. +When we createdAt the library, we were using [styletron](https://github.com/styletron/styletron) for our styles, and we wanted to bind the breakpoints we defined in `@blocz/react-responsive` with the breakpoints used for our styles. So we added support for CSS-in-JS with our `toJSON` (for a library like `styletron`) and `toCSS` (for a library like `emotion`) utility functions: diff --git a/src/content/docs/posts/Others/cra-vs-parcel.mdx b/src/content/docs/posts/Others/cra-vs-parcel.mdx index 16c96c4..00071aa 100644 --- a/src/content/docs/posts/Others/cra-vs-parcel.mdx +++ b/src/content/docs/posts/Others/cra-vs-parcel.mdx @@ -1,7 +1,7 @@ --- title: "CRA vs Parcel" tags: ["javascript", "react", "parcel", "bundler"] -created: 2022-09-05 +createdAt: 2022-09-05 lastUpdated: 2023-01-22 --- diff --git a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx index 50539b0..a6a9902 100644 --- a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx +++ b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx @@ -1,7 +1,7 @@ --- title: "Intl.Segmenter(): Don't use string.split() nor string.length" tags: ["javascript", "intl", "encoding", "unicode"] -created: 2023-07-25 +createdAt: 2023-07-25 lastUpdated: 2023-10-10 image: /src/assets/fty25unybapraxyaslkr.png --- diff --git a/src/content/docs/posts/Others/monitoring-websockets.mdx b/src/content/docs/posts/Others/monitoring-websockets.mdx index 0478702..39de622 100644 --- a/src/content/docs/posts/Others/monitoring-websockets.mdx +++ b/src/content/docs/posts/Others/monitoring-websockets.mdx @@ -1,7 +1,7 @@ --- title: "Monitoring WebSockets" tags: ["JavaScript", "Tip", "Monitoring", "WebSocket"] -created: 2024-12-23 +createdAt: 2024-12-23 lastUpdated: 2024-12-23 image: /src/assets/monitoring-websockets.png --- @@ -53,7 +53,7 @@ globalThis.WebSocket = WebSocketWithHooks; ### How does it work? -By overriding the global `WebSocket` object, you gain control over all WebSocket instances created on the page — including those instantiated by third-party libraries. The key is that this script must run as early as possible in the page's lifecycle, ideally as the first or one of the first lines of JavaScript executed. +By overriding the global `WebSocket` object, you gain control over all WebSocket instances createdAt on the page — including those instantiated by third-party libraries. The key is that this script must run as early as possible in the page's lifecycle, ideally as the first or one of the first lines of JavaScript executed. After this, you can create the listeners you want, and even customize them to suit your specific needs. diff --git a/src/content/docs/posts/Others/semver-the-unknown-parts.mdx b/src/content/docs/posts/Others/semver-the-unknown-parts.mdx index e3c88d2..4f9586c 100644 --- a/src/content/docs/posts/Others/semver-the-unknown-parts.mdx +++ b/src/content/docs/posts/Others/semver-the-unknown-parts.mdx @@ -1,7 +1,7 @@ --- title: "Semver: The unknown buildMetadata" tags: ["discuss", "npm", "semver", "versioning"] -created: 2022-07-14 +createdAt: 2022-07-14 lastUpdated: 2022-07-14 --- diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx index 531b38e..61e2fb6 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx @@ -1,7 +1,7 @@ --- title: "Migrating class components to hooks – rules" tags: ["react", "hooks", "migration"] -created: 2020-08-18 +createdAt: 2020-08-18 lastUpdated: 2020-08-18 sidebar: order: 2 diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx index 6bf0e7d..cf3b7d0 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx @@ -1,7 +1,7 @@ --- title: "Migrating class components to hooks" tags: ["react", "hooks", "migration"] -created: 2020-05-03 +createdAt: 2020-05-03 lastUpdated: 2020-05-03 image: /src/assets/react-responsive.png sidebar: diff --git a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx index c48fd50..82a455d 100644 --- a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx +++ b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx @@ -1,7 +1,7 @@ --- title: "React life-cycles & timings" tags: ["lifecycle", "task", "async"] -created: 2024-11-07 +createdAt: 2024-11-07 lastUpdated: 2024-11-07 sidebar: order: 5 diff --git a/src/content/docs/posts/React/react-refs-and-dom-references.mdx b/src/content/docs/posts/React/react-refs-and-dom-references.mdx index 717bbff..bf32218 100644 --- a/src/content/docs/posts/React/react-refs-and-dom-references.mdx +++ b/src/content/docs/posts/React/react-refs-and-dom-references.mdx @@ -1,7 +1,7 @@ --- title: "React refs and dom references" tags: ["react", "refs", "dom"] -created: 2020-08-21 +createdAt: 2020-08-21 lastUpdated: 2020-08-21 sidebar: order: 3 @@ -43,7 +43,7 @@ class MyComponent extends React.Component { ## Render lag -What I call "render lag" is the fact that refs that are bound to DOM elements will always be 1 render late: when doing `ref={inputRef}`, react-dom attached the domElement once it is created and added to DOM tree. So in order for the ref **to be bound to the right DOM element**, a **render need to occur**. +What I call "render lag" is the fact that refs that are bound to DOM elements will always be 1 render late: when doing `ref={inputRef}`, react-dom attached the domElement once it is createdAt and added to DOM tree. So in order for the ref **to be bound to the right DOM element**, a **render need to occur**. Which is why, if you want to **safely use refs** + dom nodes, you should **only access them in methods that run after the renders** (useEffect / useLayoutEffect / componentDidMount / componentDidUpdate). But you shouldn't read refs' value directly within the render itself (render method / useMemo). diff --git a/src/content/docs/posts/React/responsive-design-in-react.mdx b/src/content/docs/posts/React/responsive-design-in-react.mdx index 3cd9b95..ea53ba0 100644 --- a/src/content/docs/posts/React/responsive-design-in-react.mdx +++ b/src/content/docs/posts/React/responsive-design-in-react.mdx @@ -1,7 +1,7 @@ --- title: "Responsive design in React" tags: ["react", "responsive", "breakpoints"] -created: 2021-05-09 +createdAt: 2021-05-09 lastUpdated: 2021-05-09 sidebar: order: 4 diff --git a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx b/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx index 77e9204..b9e8657 100644 --- a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx +++ b/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx @@ -1,7 +1,7 @@ --- title: "TypeScript 4.9: satisfies operator" tags: ["typescript", "operator"] -created: 2022-09-25 +createdAt: 2022-09-25 lastUpdated: 2022-11-21 sidebar: order: 1 diff --git a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx index 2284879..1bfeb2b 100644 --- a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx +++ b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx @@ -1,7 +1,7 @@ --- title: "TypeScript 5.0: new mode bundler & ESM" tags: ["typescript", "javascript"] -created: 2023-04-11 +createdAt: 2023-04-11 lastUpdated: 2023-04-11 sidebar: order: 2 diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx index 732b176..8952dd2 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx +++ b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx @@ -1,7 +1,7 @@ --- title: "Yarn.lock: How to Read it" tags: ["yarn", "config", "lockfile"] -created: 2021-07-27 +createdAt: 2021-07-27 lastUpdated: 2021-09-05 sidebar: order: 1 diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx b/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx index 737d96b..c03d3b4 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx +++ b/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx @@ -1,7 +1,7 @@ --- title: "Yarn.lock: How to Update it" tags: ["yarn", "config", "lockfile"] -created: 2021-09-05 +createdAt: 2021-09-05 lastUpdated: 2021-09-05 sidebar: order: 2 diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts index 9ff0252..577d783 100644 --- a/src/pages/rss.xml.ts +++ b/src/pages/rss.xml.ts @@ -4,21 +4,6 @@ import rss from "@astrojs/rss"; import { getPublishablePosts } from "@components/get-posts"; -import { type CollectionEntry } from "astro:content"; - -// TODO: use the `createdAt` instead of `lastUpdated` -const getPubDate = (post: CollectionEntry<"docs">): Date | undefined => { - if (post.data.lastUpdated instanceof Date) { - return post.data.lastUpdated; - } - - if (typeof post.data.lastUpdated === "number") { - return new Date(post.data.lastUpdated); - } - - return undefined; -}; - export const GET: APIRoute = async (context) => { const posts = await getPublishablePosts(); @@ -30,7 +15,7 @@ export const GET: APIRoute = async (context) => { items: posts.map((post) => ({ title: post.data.title, link: post.slug, - pubDate: getPubDate(post), + pubDate: post.data.createdAt, // TODO: add description to all posts (and make it required + add it to preview to LinkToPost) // description: post.data.description, })), -- 2.51.2 From 41f30a1f042e1e9be73de66b5e19725d6ca7e708 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 24 Dec 2024 10:44:45 +0100 Subject: [PATCH 2/2] unified getCreatedDate with created & updated dates --- src/components/LinkToPost.astro | 18 ++++++--------- src/components/get-posts.ts | 29 ++++++++++++++++++++++++ src/components/starlight/PageTitle.astro | 18 ++++----------- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/components/LinkToPost.astro b/src/components/LinkToPost.astro index 0b61a8e..1c70269 100644 --- a/src/components/LinkToPost.astro +++ b/src/components/LinkToPost.astro @@ -1,6 +1,8 @@ --- -import { LinkCard } from "@astrojs/starlight/components"; import { getEntry } from "astro:content"; +import { LinkCard } from "@astrojs/starlight/components"; + +import { getCreatedDate } from "@components/get-posts"; export interface Props { slug: string; @@ -17,16 +19,10 @@ if (entry == null) { throw new Error(`slug ${slug} isn’t valid`); } -let description: undefined | string; -if (includeDate && entry.data.lastUpdated) { - // TODO: rework - description = - "Last updated " + - new Date(entry.data.lastUpdated).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }); +// TODO: rework to include the real description +let description: string | undefined +if (includeDate) { + description = getCreatedDate(entry) } --- diff --git a/src/components/get-posts.ts b/src/components/get-posts.ts index 9a33571..de80c8f 100644 --- a/src/components/get-posts.ts +++ b/src/components/get-posts.ts @@ -44,3 +44,32 @@ export const getDraftPosts = async () => { return posts.sort((postA, postB) => getTime(postB) - getTime(postA)); }; + +export const getCreatedDate = ( + post: Pick, "data">, +): string => { + if (!post.data.createdAt) { + return ""; + } + + let full = `Posted on ${post.data.createdAt.toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + })}`; + + if (post.data.lastUpdated instanceof Date) { + if ( + post.data.createdAt.toLocaleDateString("en-US") !== + post.data.lastUpdated.toLocaleDateString("en-US") + ) { + full += ` (Edited on ${post.data.lastUpdated.toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })})`; + } + } + + return full; +}; diff --git a/src/components/starlight/PageTitle.astro b/src/components/starlight/PageTitle.astro index 49ffcff..7c08d64 100644 --- a/src/components/starlight/PageTitle.astro +++ b/src/components/starlight/PageTitle.astro @@ -4,22 +4,12 @@ import Default from "@astrojs/starlight/components/PageTitle.astro"; import getReadingTime from "reading-time"; -const readingTime = getReadingTime(Astro.props.entry.body); +import { getCreatedDate } from "@components/get-posts"; -let lastUpdated: Date | undefined; -if (typeof Astro.props.entry.data.lastUpdated === "number") { - lastUpdated = new Date(Astro.props.entry.data.lastUpdated); -} else if (Astro.props.entry.data.lastUpdated instanceof Date) { - lastUpdated = Astro.props.entry.data.lastUpdated; -} +const readingTime = getReadingTime(Astro.props.entry.body); -const lastUpdatedString = lastUpdated?.toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", -}); +const createdDate = getCreatedDate(Astro.props.entry) -// TODO: add `createdAt` time --- @@ -29,7 +19,7 @@ const lastUpdatedString = lastUpdated?.toLocaleDateString("en-US", { Astro.props.entry.data.template === "doc" ? (

{readingTime.text} - {lastUpdatedString ? ` • Last updated ${lastUpdatedString}` : ""} + {createdDate ? ` • ${createdDate}` : ''}

) : null } -- 2.51.2