themes

Author: brauliodiez

04-frameworks/15-astro/17-temas/.github/workflows/deploy.yml

@@ -0,0 +1,44 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build the project
+        run: npm run build
+
+      - name: Upload to GitHub Pages
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v1

04-frameworks/15-astro/17-temas/.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

04-frameworks/15-astro/17-temas/.prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("prettier-plugin-astro")],
+};

04-frameworks/15-astro/17-temas/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

04-frameworks/15-astro/17-temas/astro.config.mjs

@@ -0,0 +1,9 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [preact()]
+});

04-frameworks/15-astro/17-temas/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ejemplo",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/preact": "^3.5.4",
+    "astro": "^4.16.13",
+    "preact": "^10.25.0",
+    "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "prettier-plugin-astro": "^0.14.1"
+  }
+}

04-frameworks/15-astro/17-temas/public/favicon.svg

@@ -2,3 +2,124 @@
 
 No siempre tenemos que tirar de islas para todo, en este caso vamos a ver como tener tema claro y oscuro en nuestro sitio sin tener que tirar de islas.
 
+En esta caso con JavaScript y CSS lo vamos a dejar listo :).
+
+# Manos a la obra
+
+Vamos a añadir un componente para elegir el tema:
+
+_./src/components/theme-icon.astro_
+
+```tsx
+---
+---
+<button id="themeToggle">
+  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
+    <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
+  </svg>
+</button>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+  }
+  .sun { fill: black; }
+  .moon { fill: transparent; }
+
+  :global(.dark) .sun { fill: transparent; }
+  :global(.dark) .moon { fill: white; }
+</style>
+```
+
+Vamos añadir este componente en el _header_ de la página:
+
+_./src/components/header.astro_
+
+```diff
+---
+import Hamburger from './hamburger.astro';
++ import ThemeIcon from './theme-icon.astro';
+import Navigation from './navigation.astro';
+---
+<header>
+  <nav>
+    <Hamburger />
++   <ThemeIcon />
+    <Navigation />
+  </nav>
+</header>
+```
+
+Y ahora vamos a añadir CSS global para definir los temas oscuros y claros:
+
+_./src/styles/global.css_
+
+````diff
+html {
+  background-color: #f1f5f9;
+  font-family: sans-serif;
+}
+
++ html.dark {
++  background-color: #0d0950;
++  color: #fff;
++ }
++
++ .dark .nav-links a {
++  color: #fff;
++ }
+``
+
+Y volvemos al _header_ para añadir la lógica de cambio de tema (esta vez la vamos a hacer en JavaScript en línea, lo podríamos sacar a un fichero ts).
+
+
+_./src/components/theme-icon.astro_
+
+```diff
+</button>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+  }
+  .sun { fill: black; }
+  .moon { fill: transparent; }
+
+  :global(.dark) .sun { fill: transparent; }
+  :global(.dark) .moon { fill: white; }
+</style>
+
+
++ <script is:inline>
++  const theme = (() => {
++    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
++      return localStorage.getItem('theme');
++    }
++    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
++      return 'dark';
++    }
++      return 'light';
++  })();
++
++  if (theme === 'light') {
++    document.documentElement.classList.remove('dark');
++  } else {
++    document.documentElement.classList.add('dark');
++  }
++
++  window.localStorage.setItem('theme', theme);
++
++  const handleToggleClick = () => {
++    const element = document.documentElement;
++    element.classList.toggle("dark");
++
++    const isDark = element.classList.contains("dark");
++    localStorage.setItem("theme", isDark ? "dark" : "light");
++  }
++
++  document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
++ </script>
+````

04-frameworks/15-astro/17-temas/readme.md

@@ -0,0 +1,17 @@
+---
+import Social from "./social.astro";
+---
+
+<footer>
+  <Social platform="twitter" username="lemoncoders" />
+  <Social platform="github" username="lemoncode" />
+  <Social platform="youtube" username="lemoncoders" />
+</footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+</style>

04-frameworks/15-astro/17-temas/src/components/footer.astro

@@ -0,0 +1,22 @@
+import type { FunctionComponent, h } from "preact";
+import { useState } from "preact/hooks";
+
+interface GreetingProps {
+  messages: string[];
+}
+
+const Greeting: FunctionComponent<GreetingProps> = ({ messages }) => {
+  const randomMessage = (): string =>
+    messages[Math.floor(Math.random() * messages.length)];
+
+  const [greeting, setGreeting] = useState<string>(messages[0]);
+
+  return (
+    <div>
+      <h3>{greeting}! Thank you for visiting!</h3>
+      <button onClick={() => setGreeting(randomMessage())}>New Greeting</button>
+    </div>
+  );
+};
+
+export default Greeting;