From 60c2c2edd5eeaa37fd5a04851dd34069e022b684 Mon Sep 17 00:00:00 2001 From: Benjamin Date: Thu, 21 Aug 2025 10:52:43 +0200 Subject: [PATCH] Introduce series + remove folders (#105) * Add redirects to URLs to remove sections * Drop sections for all blogs * Update slugs in LinkToArticle * Add series information and remove sidebar prev/next/order --- astro.config.mjs | 55 +++++++++++- src/components/get-posts.ts | 2 +- src/components/starlight/Pagination.astro | 87 +++++++++++++++++++ src/content/config.ts | 10 ++- .../blocz-react-responsive-v3-is-out.mdx | 2 +- .../blocz-react-responsive-v4.mdx | 0 .../docs/posts/{Others => }/cra-vs-parcel.mdx | 0 .../posts/{CSS => }/css-before-vs-before.mdx | 0 .../how-does-css-work-the-specificity.mdx | 0 .../{CSS => }/how-to-bump-the-specificity.mdx | 2 +- .../{CSS => }/how-to-learn-css-with-games.mdx | 0 ...-dont-use-stringsplit-nor-stringlength.mdx | 0 ...t-dark-mode-avoid-flickering-on-reload.mdx | 5 +- .../light-dark-mode-corrections.mdx | 17 ++-- .../light-dark-mode-react-implementation.mdx | 5 +- ...dark-mode-system-mode-user-preferences.mdx | 7 +- .../light-dark-mode-the-lazy-way.mdx | 4 +- .../light-dark-mode-the-simple-way.mdx | 7 +- .../light-dark-mode-user-input.mdx | 9 +- ...rating-class-components-to-hooks-rules.mdx | 2 +- .../migrating-class-components-to-hooks.mdx | 0 .../{Others => }/monitoring-websockets.mdx | 0 .../{CSS => }/proper-cross-fade-in-css.mdx | 0 .../react-life-cycles-and-timings.mdx | 0 .../react-refs-and-dom-references.mdx | 0 .../responsive-design-in-react.mdx | 2 +- .../{Others => }/semver-the-unknown-parts.mdx | 0 .../typescript-49-satisfies-operator.mdx | 0 .../typescript-50-new-mode-bundler-esm.mdx | 0 .../typescript-dts-dos-and-donts.mdx | 0 .../{Others => }/visual-regression-tests.mdx | 0 .../{Yarn => }/yarn-lock-how-to-read-it.mdx | 2 +- .../{Yarn => }/yarn-lock-how-to-update-it.mdx | 2 +- .../posts/{Yarn => }/yarn-the-good-parts.mdx | 0 34 files changed, 174 insertions(+), 46 deletions(-) create mode 100644 src/components/starlight/Pagination.astro rename src/content/docs/posts/{Others => }/blocz-react-responsive-v3-is-out.mdx (98%) rename src/content/docs/posts/{Others => }/blocz-react-responsive-v4.mdx (100%) rename src/content/docs/posts/{Others => }/cra-vs-parcel.mdx (100%) rename src/content/docs/posts/{CSS => }/css-before-vs-before.mdx (100%) rename src/content/docs/posts/{CSS => }/how-does-css-work-the-specificity.mdx (100%) rename src/content/docs/posts/{CSS => }/how-to-bump-the-specificity.mdx (85%) rename src/content/docs/posts/{CSS => }/how-to-learn-css-with-games.mdx (100%) rename src/content/docs/posts/{Others => }/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx (100%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-avoid-flickering-on-reload.mdx (98%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-corrections.mdx (91%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-react-implementation.mdx (99%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-system-mode-user-preferences.mdx (98%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-the-lazy-way.mdx (98%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-the-simple-way.mdx (95%) rename src/content/docs/posts/{Dark mode => }/light-dark-mode-user-input.mdx (94%) rename src/content/docs/posts/{React => }/migrating-class-components-to-hooks-rules.mdx (96%) rename src/content/docs/posts/{React => }/migrating-class-components-to-hooks.mdx (100%) rename src/content/docs/posts/{Others => }/monitoring-websockets.mdx (100%) rename src/content/docs/posts/{CSS => }/proper-cross-fade-in-css.mdx (100%) rename src/content/docs/posts/{React => }/react-life-cycles-and-timings.mdx (100%) rename src/content/docs/posts/{React => }/react-refs-and-dom-references.mdx (100%) rename src/content/docs/posts/{React => }/responsive-design-in-react.mdx (96%) rename src/content/docs/posts/{Others => }/semver-the-unknown-parts.mdx (100%) rename src/content/docs/posts/{TypeScript => }/typescript-49-satisfies-operator.mdx (100%) rename src/content/docs/posts/{TypeScript => }/typescript-50-new-mode-bundler-esm.mdx (100%) rename src/content/docs/posts/{TypeScript => }/typescript-dts-dos-and-donts.mdx (100%) rename src/content/docs/posts/{Others => }/visual-regression-tests.mdx (100%) rename src/content/docs/posts/{Yarn => }/yarn-lock-how-to-read-it.mdx (98%) rename src/content/docs/posts/{Yarn => }/yarn-lock-how-to-update-it.mdx (99%) rename src/content/docs/posts/{Yarn => }/yarn-the-good-parts.mdx (100%) diff --git a/astro.config.mjs b/astro.config.mjs index e68a0f1..48d7e7f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -69,12 +69,13 @@ export default defineConfig({ Head: "./src/components/starlight/Head.astro", PageFrame: "./src/components/starlight/PageFrame.astro", PageTitle: "./src/components/starlight/PageTitle.astro", + Pagination: "./src/components/starlight/Pagination.astro", }, }), // Starlight comes with its own sitemap, but it makes all private pages public (and in general all pages public) sitemap({ - lastmod: new Date("2025-01-02"), // Update every time we want to website to be re-crawled + lastmod: new Date("2025-08-21"), // Update every time we want to website to be re-crawled filter: (page) => { // No slides should be exposed if (page.startsWith("https://ayc0.github.io/slides/")) { @@ -88,14 +89,18 @@ export default defineConfig({ if (page.startsWith("https://ayc0.github.io/posts/drafts/")) { return false; } + // Same for the listing of tags posts + if (page.startsWith("https://ayc0.github.io/posts/tags/")) { + return false; + } return true; }, }), ], - // Add redirects for old URLs (before the creation of the React section) redirects: { + // Add redirects for URLs before the creation of the React section "/posts/other/responsive-design-in-react": "/posts/react/responsive-design-in-react", "/posts/other/react-refs-and-dom-references": @@ -104,5 +109,51 @@ export default defineConfig({ "/posts/react/migrating-class-components-to-hooks-rules", "/posts/other/migrating-class-components-to-hooks": "/posts/react/migrating-class-components-to-hooks", + + // Add redirects for URLs before the removal of sections + "/posts/css/css-before-vs-before": "/posts/css-before-vs-before", + "/posts/css/how-does-css-work-the-specificity": + "/posts/how-does-css-work-the-specificity", + "/posts/css/how-to-learn-css-with-games": + "/posts/how-to-learn-css-with-games", + "/posts/css/proper-cross-fade-in-css": "/posts/proper-cross-fade-in-css", + "/posts/dark-mode/light-dark-mode-avoid-flickering-on-reload": + "/posts/light-dark-mode-avoid-flickering-on-reload", + "/posts/dark-mode/light-dark-mode-corrections": + "/posts/light-dark-mode-corrections", + "/posts/dark-mode/light-dark-mode-react-implementation": + "/posts/light-dark-mode-react-implementation", + "/posts/dark-mode/light-dark-mode-system-mode-user-preferences": + "/posts/light-dark-mode-system-mode-user-preferences", + "/posts/dark-mode/light-dark-mode-the-lazy-way": + "/posts/light-dark-mode-the-lazy-way", + "/posts/dark-mode/light-dark-mode-the-simple-way": + "/posts/light-dark-mode-the-simple-way", + "/posts/dark-mode/light-dark-mode-user-input": + "/posts/light-dark-mode-user-input", + "/posts/others/blocz-react-responsive-v3-is-out": + "/posts/blocz-react-responsive-v3-is-out", + "/posts/others/blocz-react-responsive-v4": + "/posts/blocz-react-responsive-v4", + "/posts/others/cra-vs-parcel": "/posts/cra-vs-parcel", + "/posts/others/intlsegmenter-dont-use-stringsplit-nor-stringlength": + "/posts/intlsegmenter-dont-use-stringsplit-nor-stringlength", + "/posts/others/monitoring-websockets": "/posts/monitoring-websockets", + "/posts/others/semver-the-unknown-parts": "/posts/semver-the-unknown-parts", + "/posts/react/migrating-class-components-to-hooks-rules": + "/posts/migrating-class-components-to-hooks-rules", + "/posts/react/migrating-class-components-to-hooks": + "/posts/migrating-class-components-to-hooks", + "/posts/react/react-refs-and-dom-references": + "/posts/react-refs-and-dom-references", + "/posts/react/responsive-design-in-react": + "/posts/responsive-design-in-react", + "/posts/typescript/typescript-49-satisfies-operator": + "/posts/typescript-49-satisfies-operator", + "/posts/typescript/typescript-50-new-mode-bundler-esm": + "/posts/typescript-50-new-mode-bundler-esm", + "/posts/yarn/yarn-lock-how-to-read-it": "/posts/yarn-lock-how-to-read-it", + "/posts/yarn/yarn-lock-how-to-update-it": + "/posts/yarn-lock-how-to-update-it", }, }); diff --git a/src/components/get-posts.ts b/src/components/get-posts.ts index 2206225..b3a32ee 100644 --- a/src/components/get-posts.ts +++ b/src/components/get-posts.ts @@ -1,6 +1,6 @@ import { getCollection, type CollectionEntry } from "astro:content"; -type Post = CollectionEntry<"docs">; +export type Post = CollectionEntry<"docs">; const getTime = (post: Post): number => { if (post.data.createdAt) { diff --git a/src/components/starlight/Pagination.astro b/src/components/starlight/Pagination.astro new file mode 100644 index 0000000..82f10e0 --- /dev/null +++ b/src/components/starlight/Pagination.astro @@ -0,0 +1,87 @@ +--- +import Default from "@astrojs/starlight/components/Pagination.astro"; + +import { getPublishablePosts, type Post } from "@components/get-posts"; + +const getSeriesData = ( + data: Post["data"], +): { name: string; order: number } | undefined => { + let name: string; + let order = 0; + if (!data.series) { + return; + } + if (typeof data.series === "string") { + name = data.series; + } else { + name = data.series.name; + if (data.series.order != null) { + order = data.series.order; + } + } + + return { name: name, order }; +}; + +const thisSeriesData = getSeriesData(Astro.locals.starlightRoute.entry.data); + +Astro.locals.starlightRoute.pagination.prev = undefined; +Astro.locals.starlightRoute.pagination.next = undefined; +if (thisSeriesData) { + const posts = await getPublishablePosts(); + const postsInSameSeries = posts.filter((post) => { + const postSeriesData = getSeriesData(post.data); + if (!postSeriesData) { + return false; + } + return postSeriesData.name === thisSeriesData.name; + }); + + postsInSameSeries.sort((postA, postB) => { + if (!postA.data.createdAt && !postB.data.createdAt) { + return 0; + } + if (!postA.data.createdAt) { + return -1; + } + if (!postB.data.createdAt) { + return 1; + } + if (postA.data.createdAt.getTime() !== postB.data.createdAt.getTime()) { + return postA.data.createdAt.getTime() - postB.data.createdAt.getTime(); + } + + const postASeriesData = getSeriesData(postA.data)!; + const postBSeriesData = getSeriesData(postB.data)!; + return postASeriesData.order - postBSeriesData.order; + }); + + const indexOfCurrentPost = postsInSameSeries.findIndex( + (post) => post.id === Astro.locals.starlightRoute.id, + ); + + if (indexOfCurrentPost !== 0) { + Astro.locals.starlightRoute.pagination.prev = { + type: "link", + label: postsInSameSeries[indexOfCurrentPost - 1]!.data.title, + href: "/" + postsInSameSeries[indexOfCurrentPost - 1]!.slug, + badge: undefined, + isCurrent: false, + attrs: {}, + }; + } + + if (indexOfCurrentPost !== postsInSameSeries.length - 1) { + Astro.locals.starlightRoute.pagination.next = { + type: "link", + label: postsInSameSeries[indexOfCurrentPost + 1]!.data.title, + href: "/" + postsInSameSeries[indexOfCurrentPost + 1]!.slug, + badge: undefined, + isCurrent: false, + attrs: {}, + }; + } +} +--- + + diff --git a/src/content/config.ts b/src/content/config.ts index 38f5721..956d87e 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -23,6 +23,8 @@ const tags = [ "yarn", ] as const; +const series = ["Light/dark"] as const; + export const collections = { docs: defineCollection({ schema: docsSchema({ @@ -34,7 +36,13 @@ export const collections = { .regex(/^\/src\/assets\/[^.]+.(png|jpeg)$/) .optional(), createdAt: z.date().optional(), - tags: z.array(z.string()).optional(), + tags: z.array(z.enum(tags)).optional(), + series: z + .union([ + z.enum(series), + z.object({ name: z.enum(series), order: z.number() }), + ]) + .optional(), }) .and( // Draft pages don’t have any requirements diff --git a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx b/src/content/docs/posts/blocz-react-responsive-v3-is-out.mdx similarity index 98% rename from src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx rename to src/content/docs/posts/blocz-react-responsive-v3-is-out.mdx index 0e9f9e9..25be5be 100644 --- a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx +++ b/src/content/docs/posts/blocz-react-responsive-v3-is-out.mdx @@ -32,7 +32,7 @@ This library evolved as the react community evolved too: - in the v0 we had breakpoints, providers, and support for CSS-in-JS - the v1 was a major re-write in TypeScript and around react hooks (checkout out the following post for tips on how to upgrade class components to hooks) - + - the v2 was a major re-write for react contexts (the previous implementation didn't work if we had multiple providers in the same app) ### v3 diff --git a/src/content/docs/posts/Others/blocz-react-responsive-v4.mdx b/src/content/docs/posts/blocz-react-responsive-v4.mdx similarity index 100% rename from src/content/docs/posts/Others/blocz-react-responsive-v4.mdx rename to src/content/docs/posts/blocz-react-responsive-v4.mdx diff --git a/src/content/docs/posts/Others/cra-vs-parcel.mdx b/src/content/docs/posts/cra-vs-parcel.mdx similarity index 100% rename from src/content/docs/posts/Others/cra-vs-parcel.mdx rename to src/content/docs/posts/cra-vs-parcel.mdx diff --git a/src/content/docs/posts/CSS/css-before-vs-before.mdx b/src/content/docs/posts/css-before-vs-before.mdx similarity index 100% rename from src/content/docs/posts/CSS/css-before-vs-before.mdx rename to src/content/docs/posts/css-before-vs-before.mdx diff --git a/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx b/src/content/docs/posts/how-does-css-work-the-specificity.mdx similarity index 100% rename from src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx rename to src/content/docs/posts/how-does-css-work-the-specificity.mdx diff --git a/src/content/docs/posts/CSS/how-to-bump-the-specificity.mdx b/src/content/docs/posts/how-to-bump-the-specificity.mdx similarity index 85% rename from src/content/docs/posts/CSS/how-to-bump-the-specificity.mdx rename to src/content/docs/posts/how-to-bump-the-specificity.mdx index e5a84a5..ac27ec8 100644 --- a/src/content/docs/posts/CSS/how-to-bump-the-specificity.mdx +++ b/src/content/docs/posts/how-to-bump-the-specificity.mdx @@ -12,7 +12,7 @@ import LinkToPost from "@components/LinkToPost.astro"; Still in draft ::: - + ```css selector[class] { diff --git a/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx b/src/content/docs/posts/how-to-learn-css-with-games.mdx similarity index 100% rename from src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx rename to src/content/docs/posts/how-to-learn-css-with-games.mdx diff --git a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx b/src/content/docs/posts/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx similarity index 100% rename from src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx rename to src/content/docs/posts/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx b/src/content/docs/posts/light-dark-mode-avoid-flickering-on-reload.mdx similarity index 98% rename from src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx rename to src/content/docs/posts/light-dark-mode-avoid-flickering-on-reload.mdx index a90d6b5..dfb43d2 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx +++ b/src/content/docs/posts/light-dark-mode-avoid-flickering-on-reload.mdx @@ -3,10 +3,7 @@ title: "Light/dark mode: avoid flickering on reload" tags: ["webdev", "css", "javascript"] createdAt: 2021-06-01 lastUpdated: 2023-01-15 -prev: true -next: true -sidebar: - order: 5 +series: "Light/dark" description: "When manually handling the theming of your website, you may run into a flicker at the page load from white to black. This is because your JavaScript takes some time to boot and to apply the dark mode. Let’s see how we can fix that" --- diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx b/src/content/docs/posts/light-dark-mode-corrections.mdx similarity index 91% rename from src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx rename to src/content/docs/posts/light-dark-mode-corrections.mdx index 6bd1557..1623634 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx +++ b/src/content/docs/posts/light-dark-mode-corrections.mdx @@ -3,10 +3,7 @@ title: "Light/dark mode: Corrections" tags: ["webdev", "css", "javascript"] createdAt: 2023-01-16 lastUpdated: 2023-01-16 -prev: true -# next: true # Last article -sidebar: - order: 7 +series: "Light/dark" description: "In my previous articles about Light/dark mode, I made a few mistakes, or forgot to mention some elements" --- @@ -18,7 +15,7 @@ When this will be released, all other related posts will also be edited to avoid ## CSS color scheme - + In this post, I only mentioned the meta tag with the name `color-scheme`: @@ -44,7 +41,7 @@ This has been fixed in Firefox 96 🎉 (see [caniuse](https://caniuse.com/mdn-cs ## Native system colors - + In this post, I only mentioned the use of `color-scheme`. But there is also another powerful tool available to us: native system themed colors. @@ -58,7 +55,7 @@ For the whole list of system colors, and their semantic meaning, you can out the ## `:root` with class names - + In this post, I wrote: @@ -84,7 +81,7 @@ html.dark-mode { ## Using data attributes instead of class names - + In this post, I mentioned that we were using 2 classes `.light` and `.dark`. And that we were using this function to control those classes: @@ -144,7 +141,7 @@ function applyTheme(theme) { ## Real time system mode - + In this post, I explained how to use a custom picker and how to use a `system` mode. @@ -152,4 +149,4 @@ I forgot to say that this system mode won’t follow the current theme users hav This mechanism is more complicated and can be explained in its own post. But in the meantime, the React implementation includes this feature: - + diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx b/src/content/docs/posts/light-dark-mode-react-implementation.mdx similarity index 99% rename from src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx rename to src/content/docs/posts/light-dark-mode-react-implementation.mdx index a82df3a..f1fea6c 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx +++ b/src/content/docs/posts/light-dark-mode-react-implementation.mdx @@ -3,10 +3,7 @@ title: "Light/dark mode: React implementation" tags: ["webdev", "css", "react", "javascript", "deep-dive"] createdAt: 2021-06-24 lastUpdated: 2023-01-16 -prev: true -next: true -sidebar: - order: 6 +series: "Light/dark" description: "After building a few different ways of creating light/dark modes for your websites, either in plain CSS, or with a bit of vanilla CSS, we need to tackle the topic of React websites. While most of the core will be the same as previously seen, React requires a few custom bindings for its particular life-cycles & data flow" --- diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx b/src/content/docs/posts/light-dark-mode-system-mode-user-preferences.mdx similarity index 98% rename from src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx rename to src/content/docs/posts/light-dark-mode-system-mode-user-preferences.mdx index 8456952..d442427 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx +++ b/src/content/docs/posts/light-dark-mode-system-mode-user-preferences.mdx @@ -3,10 +3,7 @@ title: "Light/dark mode: system mode + user preferences" tags: ["webdev", "css", "javascript"] createdAt: 2021-05-31 lastUpdated: 2023-01-16 -prev: true -next: true -sidebar: - order: 4 +series: "Light/dark" description: "In all my past articles, I showed either how to create a light/dark mode following your users system without JavaScript, or how to create a light/dark swatch for your website using JavaScript but without system mode. It is time to see how to reconcile those 2 approaches" --- @@ -166,7 +163,7 @@ If you don't want any blink when users will load the page (seeing an empty white See: - + ::: --- diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx b/src/content/docs/posts/light-dark-mode-the-lazy-way.mdx similarity index 98% rename from src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx rename to src/content/docs/posts/light-dark-mode-the-lazy-way.mdx index 41495dc..432d54f 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx +++ b/src/content/docs/posts/light-dark-mode-the-lazy-way.mdx @@ -3,9 +3,7 @@ title: "Light/dark mode: the lazy way" tags: ["webdev", "css"] createdAt: 2021-05-29 lastUpdated: 2023-01-16 -next: true -sidebar: - order: 1 +series: "Light/dark" description: "Let’s see how we can build a dark-mode compatible website, following your user’s system preferences, with 1 line of CSS" --- diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx b/src/content/docs/posts/light-dark-mode-the-simple-way.mdx similarity index 95% rename from src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx rename to src/content/docs/posts/light-dark-mode-the-simple-way.mdx index c6ff05b..b0c6154 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx +++ b/src/content/docs/posts/light-dark-mode-the-simple-way.mdx @@ -3,10 +3,7 @@ title: "Light/dark mode: the simple way" tags: ["webdev", "css"] createdAt: 2021-05-30 lastUpdated: 2021-06-24 -prev: true -next: true -sidebar: - order: 2 +series: "Light/dark" description: "Handling light/dark mode on your websites don’t have to be complex. A few lines of CSS to declare a few CSS variables can be all you need!" --- @@ -15,7 +12,7 @@ import LinkToPost from "@components/LinkToPost.astro"; In the previous post, we've seen how to use the `color-scheme` html meta tag to benefit from the browser default themes. - + In this post, we’ll iterate on that and use our own styles. diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx b/src/content/docs/posts/light-dark-mode-user-input.mdx similarity index 94% rename from src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx rename to src/content/docs/posts/light-dark-mode-user-input.mdx index d5facc3..23a5814 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx +++ b/src/content/docs/posts/light-dark-mode-user-input.mdx @@ -3,10 +3,9 @@ title: "Light/dark mode: user input" tags: ["webdev", "css", "javascript"] createdAt: 2021-05-30 lastUpdated: 2023-01-15 -prev: true -next: true -sidebar: - order: 3 +series: + name: "Light/dark" + order: 1 # Another post was created the 2021-05-30, so this is to say that it needs to be set after description: "In this article, we’ll see how we can implement the logic to switch back & forth between light/dark mode" --- @@ -15,7 +14,7 @@ import LinkToPost from "@components/LinkToPost.astro"; In the previous post, we saw how to use CSS variables to adapt the display to user system preferences. - + But users of your website cannot change their theme directly from the website, they have to change their system mode to change it. Which can be a bit annoying when you want your OS to be in light mode and the website in dark mode for instance. diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx b/src/content/docs/posts/migrating-class-components-to-hooks-rules.mdx similarity index 96% rename from src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx rename to src/content/docs/posts/migrating-class-components-to-hooks-rules.mdx index 1e6ef50..a736dd5 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx +++ b/src/content/docs/posts/migrating-class-components-to-hooks-rules.mdx @@ -39,4 +39,4 @@ If those aren't enough, these are the final rules: If you want to see a concrete application of these rules, you can check this post in which I wrote a detailed migration of [react-only](https://www.npmjs.com/package/react-only): - + diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx b/src/content/docs/posts/migrating-class-components-to-hooks.mdx similarity index 100% rename from src/content/docs/posts/React/migrating-class-components-to-hooks.mdx rename to src/content/docs/posts/migrating-class-components-to-hooks.mdx diff --git a/src/content/docs/posts/Others/monitoring-websockets.mdx b/src/content/docs/posts/monitoring-websockets.mdx similarity index 100% rename from src/content/docs/posts/Others/monitoring-websockets.mdx rename to src/content/docs/posts/monitoring-websockets.mdx diff --git a/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx b/src/content/docs/posts/proper-cross-fade-in-css.mdx similarity index 100% rename from src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx rename to src/content/docs/posts/proper-cross-fade-in-css.mdx diff --git a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx b/src/content/docs/posts/react-life-cycles-and-timings.mdx similarity index 100% rename from src/content/docs/posts/React/react-life-cycles-and-timings.mdx rename to src/content/docs/posts/react-life-cycles-and-timings.mdx diff --git a/src/content/docs/posts/React/react-refs-and-dom-references.mdx b/src/content/docs/posts/react-refs-and-dom-references.mdx similarity index 100% rename from src/content/docs/posts/React/react-refs-and-dom-references.mdx rename to src/content/docs/posts/react-refs-and-dom-references.mdx diff --git a/src/content/docs/posts/React/responsive-design-in-react.mdx b/src/content/docs/posts/responsive-design-in-react.mdx similarity index 96% rename from src/content/docs/posts/React/responsive-design-in-react.mdx rename to src/content/docs/posts/responsive-design-in-react.mdx index b76a899..424bd70 100644 --- a/src/content/docs/posts/React/responsive-design-in-react.mdx +++ b/src/content/docs/posts/responsive-design-in-react.mdx @@ -12,7 +12,7 @@ Hi, I'm Ayc0, maintainer of the library [`@blocz/react-responsive`](https://www. If you want to learn more about it, you can check this post: - + This article will tell you how **not** to use this library. diff --git a/src/content/docs/posts/Others/semver-the-unknown-parts.mdx b/src/content/docs/posts/semver-the-unknown-parts.mdx similarity index 100% rename from src/content/docs/posts/Others/semver-the-unknown-parts.mdx rename to src/content/docs/posts/semver-the-unknown-parts.mdx diff --git a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx b/src/content/docs/posts/typescript-49-satisfies-operator.mdx similarity index 100% rename from src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx rename to src/content/docs/posts/typescript-49-satisfies-operator.mdx diff --git a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx b/src/content/docs/posts/typescript-50-new-mode-bundler-esm.mdx similarity index 100% rename from src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx rename to src/content/docs/posts/typescript-50-new-mode-bundler-esm.mdx diff --git a/src/content/docs/posts/TypeScript/typescript-dts-dos-and-donts.mdx b/src/content/docs/posts/typescript-dts-dos-and-donts.mdx similarity index 100% rename from src/content/docs/posts/TypeScript/typescript-dts-dos-and-donts.mdx rename to src/content/docs/posts/typescript-dts-dos-and-donts.mdx diff --git a/src/content/docs/posts/Others/visual-regression-tests.mdx b/src/content/docs/posts/visual-regression-tests.mdx similarity index 100% rename from src/content/docs/posts/Others/visual-regression-tests.mdx rename to src/content/docs/posts/visual-regression-tests.mdx diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx b/src/content/docs/posts/yarn-lock-how-to-read-it.mdx similarity index 98% rename from src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx rename to src/content/docs/posts/yarn-lock-how-to-read-it.mdx index 0290cf6..75ca5e3 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx +++ b/src/content/docs/posts/yarn-lock-how-to-read-it.mdx @@ -108,4 +108,4 @@ And when `7.12.9` was added, as changing the previously resolved versions could If you're interested in editing this file, you can read: - + diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx b/src/content/docs/posts/yarn-lock-how-to-update-it.mdx similarity index 99% rename from src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx rename to src/content/docs/posts/yarn-lock-how-to-update-it.mdx index 7065df8..6db748b 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx +++ b/src/content/docs/posts/yarn-lock-how-to-update-it.mdx @@ -15,7 +15,7 @@ Knowing how to read a `yarn.lock` file is important: it lists the packages that So, if you really care about your app, you should be able to read this lock file, and here is another post about this: - + If you spot something weird in the lockfile, this article will tell you how to fix it. diff --git a/src/content/docs/posts/Yarn/yarn-the-good-parts.mdx b/src/content/docs/posts/yarn-the-good-parts.mdx similarity index 100% rename from src/content/docs/posts/Yarn/yarn-the-good-parts.mdx rename to src/content/docs/posts/yarn-the-good-parts.mdx -- 2.51.2