From 0176754ff2102e075c864d209ab878702428490a Mon Sep 17 00:00:00 2001
From: alex <57722812+alexwhitmore@users.noreply.github.com>
Date: Mon, 16 Oct 2023 02:37:25 -0600
Subject: [PATCH 1/2] docs(www): add astro dark mode implementation (#1755)
* docs(www): add astro dark mode implementation
* docs(www): reduce redundancy in mode toggle
---
apps/www/config/docs.ts | 5 +
apps/www/content/docs/dark-mode/astro.mdx | 121 ++++++++++++++++++++++
apps/www/content/docs/dark-mode/index.mdx | 13 +++
3 files changed, 139 insertions(+)
create mode 100644 apps/www/content/docs/dark-mode/astro.mdx
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 35f47b824a..1f1352f90a 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -147,6 +147,11 @@ export const docsConfig: DocsConfig = {
href: "/docs/dark-mode/vite",
items: [],
},
+ {
+ title: "Astro",
+ href: "/docs/dark-mode/astro",
+ items: [],
+ },
],
},
{
diff --git a/apps/www/content/docs/dark-mode/astro.mdx b/apps/www/content/docs/dark-mode/astro.mdx
new file mode 100644
index 0000000000..01e4ffe422
--- /dev/null
+++ b/apps/www/content/docs/dark-mode/astro.mdx
@@ -0,0 +1,121 @@
+---
+title: Astro
+description: Adding dark mode to your astro app.
+---
+
+## Dark mode
+
+
+
+### Create an inline theme script
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+---
+
+
+
+
+
+ Astro
+
+
+
+```
+
+### Add a mode toggle
+
+```tsx title="src/components/ModeToggle.tsx"
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+ const [theme, setThemeState] = React.useState<
+ "theme-light" | "dark" | "system"
+ >("theme-light")
+
+ React.useEffect(() => {
+ const isDarkMode = document.documentElement.classList.contains("dark")
+ setThemeState(isDarkMode ? "dark" : "theme-light")
+ }, [])
+
+ React.useEffect(() => {
+ const isDark =
+ theme === "dark" ||
+ (theme === "system" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
+ document.documentElement.classList[isDark ? "add" : "remove"]("dark")
+ }, [theme])
+
+ return (
+
+
+
+
+
+ setThemeState("theme-light")}>
+ Light
+
+ setThemeState("dark")}>
+ Dark
+
+ setThemeState("system")}>
+ System
+
+
+
+ )
+}
+```
+
+### Display the mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+import { ModeToggle } from '@/components/ModeToggle';
+---
+
+
+
+
+
+ Astro
+
+
+
+```
+
+
diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx
index 214118d608..c743279c3c 100644
--- a/apps/www/content/docs/dark-mode/index.mdx
+++ b/apps/www/content/docs/dark-mode/index.mdx
@@ -30,6 +30,19 @@ description: Adding dark mode to your site.
Vite
+
+
+ Astro
+
## Other frameworks
From 4083876e805a7934c98776794e2fed7630f89c63 Mon Sep 17 00:00:00 2001
From: Robert Soriano
Date: Mon, 16 Oct 2023 01:56:08 -0700
Subject: [PATCH 2/2] docs: update Remix config to use ESM (#1710)
* docs(remix): replace postcss config sample to use export default
* docs(remix): replace tailwind config sample to use export default
---------
Co-authored-by: shadcn
---
apps/www/content/docs/installation/remix.mdx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx
index 71235ba825..a2e8965a9a 100644
--- a/apps/www/content/docs/installation/remix.mdx
+++ b/apps/www/content/docs/installation/remix.mdx
@@ -59,7 +59,7 @@ npm add -D tailwindcss@latest autoprefixer@latest
Then we create a `postcss.config.js` file:
```js
-module.exports = {
+export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
@@ -71,7 +71,7 @@ And finally we add the following to our `remix.config.js` file:
```js {4-5}
/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
+export default {
...
tailwind: true,
postcss: true,