Merge pull request #12 from python-chile/feat/personalize-stations

Feat/personalize stations

Author: ale0aranda

public/stations/lab-oak/sala-final.webp

@@ -27,21 +27,28 @@ const accountHref = withBase("/cuenta");
   <a
     hidden
     href={accountHref}
-    class="text-ink hover:border-accent hover:text-brand focus-visible:outline-brand inline-flex items-center gap-2 border-b-2 border-transparent px-1 py-1.5 font-mono text-xs font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2"
+    class="group focus-visible:outline-brand inline-flex items-center gap-2.5 rounded-md px-1 py-2 focus-visible:outline-2 focus-visible:outline-offset-4"
     data-github-account
   >
     <img
       src=""
       alt=""
-      width="28"
-      height="28"
-      class="border-ink/10 size-7 rounded-full border object-cover"
+      width="32"
+      height="32"
+      class="border-ink/10 size-8 rounded-full border object-cover transition-transform duration-200 motion-safe:group-hover:scale-105"
       data-github-avatar
     />
 
-    <span class="hidden max-w-28 truncate sm:block" data-github-name></span>
+    <span class="relative hidden pb-1 sm:block">
+      <span
+        class="text-ink group-hover:text-brand block max-w-28 truncate text-sm font-bold transition-colors"
+        data-github-name></span>
 
-    <span aria-hidden="true" class="text-brand">→</span>
+      <span
+        aria-hidden="true"
+        class="bg-accent absolute right-0 bottom-0 left-0 h-0.5 origin-left scale-x-0 rounded-full transition-transform duration-300 group-hover:scale-x-100"
+      ></span>
+    </span>
   </a>
 
   <script>

src/components/auth/GitHubAuth.astro

@@ -1,61 +1,12 @@
 ---
 import GitHubAuth from "@/components/auth/GitHubAuth.astro";
-import { withBase } from "@/lib/paths";
-
-const homeUrl = withBase("/");
-const logoUrl = withBase("/brand/pythonchile.png");
+import PythonChileBrand from "@/components/ui/PythonChileBrand.astro";
 ---
 
 <header class="relative z-30 flex items-center justify-between py-5">
-  <a
-    href={homeUrl}
-    aria-label="Ir al inicio de PySchool"
-    class="logo-link focus-visible:outline-brand inline-flex focus-visible:outline-2 focus-visible:outline-offset-4"
-  >
-    <img
-      src={logoUrl}
-      alt="Python Chile"
-      width="1920"
-      height="611"
-      decoding="async"
-      class="h-9 w-auto object-contain sm:h-10"
-    />
-  </a>
+  <PythonChileBrand />
 
   <div class="relative pt-3">
     <GitHubAuth />
   </div>
-
-  <style>
-    .logo-link {
-      transition: transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1);
-    }
-
-    .logo-underline path {
-      fill: none;
-      stroke: var(--color-brand);
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-dasharray: 180;
-      stroke-dashoffset: 180;
-      transition: stroke-dashoffset 400ms ease;
-    }
-
-    .logo-link:hover,
-    .logo-link:focus-visible {
-      transform: scale(1.04) rotate(-1deg);
-    }
-
-    .logo-link:hover .logo-underline path,
-    .logo-link:focus-visible .logo-underline path {
-      stroke-dashoffset: 0;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .logo-link,
-      .logo-underline path {
-        transition: none;
-      }
-    }
-  </style>
 </header>

src/components/home/HomeHeader.astro

@@ -1,6 +1,9 @@
 <style is:global>
   .station-content pre:not([data-python-output]) {
     position: relative;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     margin-top: 1.5rem;
     overflow: hidden;
     border: 1px solid rgb(16 29 39 / 18%);
@@ -10,42 +13,68 @@
 
   .station-content pre:not([data-python-output]) .code-header {
     display: flex;
+    min-width: 0;
     align-items: center;
     justify-content: space-between;
+    gap: 1rem;
     min-height: 2.5rem;
     padding: 0.4rem 0.75rem;
     border-bottom: 1px solid rgb(16 29 39 / 10%);
     background: var(--color-paper);
   }
 
   .station-content pre:not([data-python-output]) .code-lang {
+    overflow: hidden;
+    color: var(--color-brand);
     font-family: var(--font-mono);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.12em;
-    color: var(--color-brand);
+    text-overflow: ellipsis;
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   .station-content pre:not([data-python-output]) code {
     display: block;
-    min-width: max-content;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     overflow-x: auto;
     padding: 1rem 1.1rem;
     background: transparent !important;
     font-family: var(--font-mono);
     font-size: 0.9rem;
     line-height: 1.8;
+    white-space: pre;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .station-content pre:not([data-python-output]) code::-webkit-scrollbar {
+    height: 0.45rem;
+  }
+
+  .station-content pre:not([data-python-output]) code::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .station-content pre:not([data-python-output]) code::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgb(100 116 139 / 35%);
   }
 
   .station-content :not(pre) > code {
+    max-width: 100%;
     border-bottom: 2px solid var(--color-accent);
     background: #edf4ff;
     padding: 0.1rem 0.3rem;
     color: var(--color-ink);
     font-family: var(--font-mono);
     font-size: 0.9em;
     font-weight: 600;
+    overflow-wrap: anywhere;
   }
 
   .station-content pre:not([data-python-output]) + p,
@@ -59,6 +88,7 @@
     display: grid;
     width: 1.75rem;
     height: 1.75rem;
+    flex-shrink: 0;
     place-items: center;
     border: 1px solid rgb(16 29 39 / 15%);
     border-radius: 0.35rem;
@@ -115,6 +145,30 @@
     opacity: 1;
     transform: scale(1);
   }
+
+  @media (max-width: 39.999rem) {
+    .station-content pre:not([data-python-output]) {
+      border-radius: 0.4rem;
+    }
+
+    .station-content pre:not([data-python-output]) code {
+      padding: 0.9rem;
+      font-size: 0.8rem;
+      line-height: 1.7;
+    }
+
+    .station-content pre:not([data-python-output]) .code-header {
+      padding-right: 0.6rem;
+      padding-left: 0.6rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .copy-btn,
+    .copy-btn svg {
+      transition: none;
+    }
+  }
 </style>
 
 <script>
@@ -149,32 +203,68 @@
         header.className = "code-header";
 
         const languageLabel = document.createElement("span");
+
         languageLabel.className = "code-lang";
         languageLabel.textContent = language;
 
         const copyButton = document.createElement("button");
+
         copyButton.type = "button";
         copyButton.className = "copy-btn";
+
         copyButton.setAttribute("aria-label", "Copiar código");
+
         copyButton.setAttribute("title", "Copiar código");
+
         copyButton.innerHTML = `
-          <svg class="icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <rect x="9" y="9" width="12" height="12" rx="2"></rect>
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+          <svg
+            class="icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              x="9"
+              y="9"
+              width="12"
+              height="12"
+              rx="2"
+            ></rect>
+
+            <path
+              d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+            ></path>
           </svg>
-          <svg class="check" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="20 6 9 17 4 12"></polyline>
+
+          <svg
+            class="check"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline
+              points="20 6 9 17 4 12"
+            ></polyline>
           </svg>
         `;
 
         copyButton.addEventListener("click", async () => {
           try {
             await copyText(code.textContent ?? "");
+
             copyButton.classList.add("is-copied");
+
             copyButton.setAttribute("aria-label", "Código copiado");
 
             window.setTimeout(() => {
               copyButton.classList.remove("is-copied");
+
               copyButton.setAttribute("aria-label", "Copiar código");
             }, 1_400);
           } catch {
@@ -191,5 +281,6 @@
   }
 
   setupCodeBlocks();
+
   document.addEventListener("astro:page-load", setupCodeBlocks);
 </script>

src/components/station/content/CodeBlocks.astro

@@ -6,25 +6,37 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<details class="group relative" data-station-hint>
+<details
+  class="group border-line-soft overflow-hidden border bg-white"
+  data-station-hint
+>
   <summary
-    class="text-muted hover:bg-accent/25 hover:text-ink flex h-10 cursor-pointer list-none items-center gap-2 px-3 font-mono text-xs font-bold tracking-widest uppercase transition-colors"
+    class="text-muted hover:bg-accent/20 hover:text-ink flex min-h-12 cursor-pointer list-none items-center gap-2 px-4 font-mono text-xs font-bold tracking-widest uppercase transition-colors"
   >
-    <span class="text-brand" aria-hidden="true">✦</span>
+    <span class="text-brand" aria-hidden="true"> ✦ </span>
 
-    {title}
+    <span>{title}</span>
 
     <span
-      class="ml-1 text-base font-normal transition-transform group-open:rotate-45"
+      class="ml-auto text-base font-normal transition-transform group-open:rotate-45"
       aria-hidden="true"
     >
       +
     </span>
   </summary>
 
   <div
-    class="border-ink/20 text-muted shadow-action absolute bottom-full left-0 z-20 mb-3 w-64 border bg-white p-4 text-base leading-7 sm:w-80"
+    class="hint-content border-line-soft text-muted border-t px-4 py-4 text-sm leading-7"
+    data-station-hint-content
   >
     <slot />
   </div>
 </details>
+
+<style>
+  .hint-content[data-embedded="true"] {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+</style>