docs: Fix Mobile Menu, Light Mode Updated, Copy to Clipboard Fixed (#363

)

www/src/LandingPageComponents/Banner/banner.astro

@@ -4,17 +4,17 @@ import Icon from "astro-icon";
 
 <section>
  <div class="overflow-x-hidden">
- <div class="relative w-full h-full overflow-hidden py-16 xl:py-32">
+ <div class="relative w-full h-full overflow-hidden py-16 xl:py-32 z-0">
  <div
- class="absolute top-16 left-[25%] lg:left-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white mix-blend-overlay rounded-full filter blur-xl opacity-30 animate-blob -z-10 select-none touch-none overflow-hidden"
+ class="absolute top-20 left-[10%] lg:left-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob -z-10 select-none touch-none overflow-hidden"
  >
  </div>
  <div
- class="absolute top-16 right-[25%] lg:right-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white mix-blend-overlay rounded-full filter blur-xl opacity-30 animate-blob animation-delay-2000 -z-10 select-none touch-none overflow-hidden"
+ class="absolute top-16 right-[10%] lg:right-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-2000 -z-10 select-none touch-none overflow-hidden"
  >
  </div>
  <div
- class="absolute bottom-6 sm:bottom-8 left-[38%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white mix-blend-overlay rounded-full filter blur-xl opacity-30 animate-blob animation-delay-4000 -z-10 select-none touch-none overflow-hidden"
+ class="absolute bottom-32 sm:bottom-8 right-[33%] sm:right-[38%] lg:right-[42%] lg:bottom-10 w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-white opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-4000 -z-10 select-none touch-none overflow-hidden"
  >
  </div>
  <div class="mx-auto max-w-8xl lg:px-8">

www/src/LandingPageComponents/Footer/footer.astro

@@ -19,7 +19,7 @@
  </div>
  <div>
  <ul
- class="flex items-center justify-center flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 lg:space-x-8"
+ class="grid grid-cols-2 gap-6 sm:flex items-center justify-center flex-col sm:flex-row text-center lg:space-x-8"
  >
  <li>
  <a

www/src/LandingPageComponents/Navbar/navbar.astro

@@ -7,42 +7,42 @@ const currentPage = Astro.url.pathname;
 <nav
  class={currentPage === "/"
  ? `flex flex-col relative justify-between items-center pt-3 z-50 text-slate-50`
- : `flex flex-col relative justify-between items-center pt-3 bg-white dark:bg-slate-900 z-50`}
+ : `flex flex-col relative justify-between items-center pt-3 bg-t3-purple-50 dark:bg-slate-900 z-50`}
  aria-label="Global"
 >
- <div class="flex items-center justify-between w-full px-6">
+ <div class="flex items-center justify-between w-full px-6 pb-2">
  <div class="flex justify-between items-center w-full md:w-auto">
  <div>
  <a class="" href="/">
  <img src="/assets/Logo.svg" width="60" height="60" alt="T3 Logo" />
  </a>
  </div><div class="hidden -space-x-1 md:flex md:ml-10">
  <a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="/en/introduction"
  ><span class="">Docs</span>
  </a>
  <a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="/en/faq"
  ><span class="">FAQ</span>
  </a><a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="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/t3-oss/create-t3-app"
  target="_blank"
  rel="noopener noreferrer"
  ><span class="">Github</span>
  </a><a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-300 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="https://init.tips"
  target="_blank"
  rel="noopener noreferrer"
  ><span class="">T3 Stack</span>
  </a>
  </div>
  </div>
- <div class="menu-toggle">
- <SidebarToggle client:idle />
+ <div>
+ <SidebarToggle currentPage={currentPage} client:idle />
  </div>
  <div
  class="hidden md:block shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"

www/src/LandingPageComponents/Tweets/tweet.astro

@@ -27,9 +27,9 @@ const {
 import { Image } from "@astrojs/image/components";
 ---
 
-<div class="max-w-xl mx-auto my-6">
+<div class="max-w-xl mx-auto my-2">
  <article
- class="border-t border-b border-gray-400 p-2 hover:bg-gray-100 flex flex-wrap items-start cursor-pointer bg-white bg-cover rounded-lg"
+ class="border-t border-b border-gray-400 px-4 pt-4 pb-1 hover:bg-gray-100 flex flex-wrap items-start cursor-pointer bg-white bg-cover rounded-lg"
  >
  <Image
  src={avatar}
@@ -39,14 +39,14 @@ import { Image } from "@astrojs/image/components";
  class="rounded-full w-12 h-12 mr-3"
  alt={`@${handle}'s Avatar`}
  />
- <div class="flex flex-wrap justify-start items-start flex-1">
+ <div class="flex flex-wrap justify-start flex-1">
  <div class="flex-1 flex items-center">
  <h3 class="mr-2 font-bold hover:underline">
  <a
  href={`https://twitter.com/${handle}`}
  target="_blank"
  rel="noopener noreferrer"
- class="hover:text-[#1da1f2]"
+ class="hover:text-[#1da1f2] text-sm sm:text-base"
  >{author}
  </a>
  </h3>

www/src/LandingPageComponents/Tweets/tweets.astro

@@ -3,8 +3,8 @@ import Tweet from "./tweet.astro";
 ---
 
 <section class="pb-16">
- <div class="flex flex-col lg:flex-row items-center justify-center">
- <div class="w-fit lg:mb-48 p-1 sm:p-2">
+ <div class="flex flex-col lg:flex-row items-center justify-center mx-3">
+ <div class="w-fit lg:mb-48 sm:p-2">
  <Tweet
  author="Emilia Zapata"
  avatar="https://pbs.twimg.com/profile_images/1426010455055638531/xUFu5JP7_400x400.jpg"
@@ -18,7 +18,7 @@ import Tweet from "./tweet.astro";
  tweetId="1553580714591158272"
  />
  </div>
- <div class="w-fit p-1 sm:p-2">
+ <div class="w-fit sm:p-2">
  <Tweet
  author="Antonio Pitasi"
  avatar="https://pbs.twimg.com/profile_images/1478681149824245762/OPY0MMZX_400x400.jpg"
@@ -43,7 +43,7 @@ import Tweet from "./tweet.astro";
  tweetId="1544944058291953664"
  />
  </div>
- <div class="w-fit lg:mt-52 p-1 sm:p-2">
+ <div class="w-fit lg:mt-52 sm:p-2">
  <Tweet
  author="Anthony (ajcwebdev.x)"
  avatar="https://pbs.twimg.com/profile_images/1549247631867711488/hK_Qr-Dx_400x400.png"

www/src/components/footer/avatarList.astro

@@ -5,7 +5,6 @@ type Props = {
 };
 const { path } = Astro.props as Props;
 const resolvedPath = `www/${path}`;
-console.log(resolvedPath);
 const url = `https://api.github.com/repos/t3-oss/create-t3-app/commits?path=${resolvedPath}`;
 const commitsURL = `https://github.com/t3-oss/create-t3-app/commits/main/${resolvedPath}`;
 

www/src/components/header/search.tsx

@@ -50,9 +50,9 @@ export default function Search() {
  type="button"
  ref={searchButtonRef}
  onClick={onOpen}
- className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium dark:text-white text-gray-700 dark:bg-white bg-slate-100 rounded-lg"
+ className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-t3-purple-400 shadow-inner shadow-t3-purple-700 dark:shadow-t3-purple-300 rounded-lg"
  >
- <div className="flex items-center justify-center text-slate-900 stroke-slate-900">
+ <div className="flex items-center justify-center text-white dark:text-slate-900 dark:stroke-slate-900">
  <svg width="24" height="24" fill="none">
  <path
  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -63,10 +63,12 @@ export default function Search() {
  />
  </svg>
 
- <span className="pl-1 lg:pl-3 text-slate-900">Search</span>
+ <span className="pl-1 lg:pl-3 text-white dark:text-slate-900">
+ Search
+ </span>
  </div>
 
- <span className="border px-1 rounded-md border-slate-900 text-slate-900">
+ <span className="border px-1 rounded-md border-white text-white dark:border-slate-900 dark:text-slate-900">
  <span className="sr-only">Press </span>
 
  <kbd>/</kbd>

www/src/components/header/sidebarToggle.tsx

@@ -2,7 +2,9 @@
 import type { FunctionalComponent } from "preact";
 import { useState, useEffect } from "preact/hooks";
 
-const MenuToggle: FunctionalComponent = () => {
+const MenuToggle: FunctionalComponent<{ currentPage: string }> = ({
+ currentPage,
+}) => {
  const [sidebarShown, setSidebarShown] = useState(false);
 
  useEffect(() => {
@@ -21,12 +23,16 @@ const MenuToggle: FunctionalComponent = () => {
  aria-pressed={sidebarShown ? "true" : "false"}
  id="menu-toggle"
  onClick={() => setSidebarShown(!sidebarShown)}
- className="z-20 text-slate-900 stroke-slate-900 block md:hidden dark:text-white"
+ className={
+ currentPage === "/"
+ ? `z-20 block md:hidden text-white`
+ : `z-20 block md:hidden text-black dark:text-white`
+ }
  >
  <svg
  xmlns="http:https://www.w3.org/2000/svg"
- width="1.7em"
- height="1.7em"
+ width="2em"
+ height="2em"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"

www/src/components/leftSidebar/leftSidebar.astro

@@ -13,22 +13,34 @@ const langCode = getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
-<nav aria-labelledby="grid-left" class="max-w-sm mr-4">
+<nav
+ aria-labelledby="grid-left"
+ class={currentPage === "/"
+ ? `pt-6 pb-28 h-full`
+ : `overflow-y-scroll md:overflow-hidden h-full pb-32`}
+>
  <div class="max-w-lg mx-auto p-3 pt-6 md:hidden">
  <Search client:idle />
  </div>
  <ul
- class="h-full p-8 max-h-[100vh] overflow-x-visible overflow-y-auto dark:text-slate-50 text-slate-800"
+ class="p-8 h-full overflow-x-visible overflow-y-scroll sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
  >
  {
  Object.entries(sidebar).map(([header, children]) => (
  <li>
  <div>
- <h2 class="text-xl dark:text-slate-50 text-slate-800">{header}</h2>
+ <h2
+ class={
+ currentPage === "/"
+ ? `text-2xl sm:text-xl text-slate-50`
+ : `text-2xl sm:text-xl dark:text-slate-50 text-slate-900 `
+ }
+ >
+ {header}
+ </h2>
  <ul>
  {children.map((child) => {
  const url = Astro.site?.pathname + child.link;
- console.log(currentPageMatch, child.link);
  return (
  <li>
  <a
@@ -39,8 +51,8 @@ const sidebar = SIDEBAR[langCode];
  class={`
  ${
  currentPageMatch === child.link
- ? "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 font-extrabold "
- : "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200"
+ ? "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold text-lg sm:text-base"
+ : "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-lg sm:text-base"
  }
  
  transition-colors

www/src/components/pageContent/pageContent.astro

@@ -50,17 +50,29 @@ const title = frontmatter.title;
 
  let blocks = document.querySelectorAll("pre");
  blocks.forEach((block) => {
- block.className = "relative w-full";
+ block.className = "relative inline-flex w-full h-full hover:cursor-pointer";
  let copyButton = document.createElement("button");
  copyButton.className =
- "absolute right-1 top-1 border border-slate-50 rounded-lg px-2 py-1 text-sm hover:text-slate-800 hover:bg-gray-100 focus:outline-none focus:shadow-outline text-brand-primary";
+ "inline-flex absolute right-1 top-1 border border-slate-50 rounded-lg px-2 py-1 text-sm hover:text-slate-800 hover:bg-gray-100 focus:outline-none focus:shadow-outline text-brand-primary";
  copyButton.innerHTML = copySVG;
  copyButton.addEventListener("click", () => {
+ let text = "";
  const pre = copyButton.parentElement;
  let code = pre?.querySelector("code");
- let text = code?.innerText;
+ if (code) {
+ text = code.innerText;
+ } else {
+ const span = pre?.querySelector("span");
+ if (span) {
+ text = span.innerText;
+ }
+ }
  if (text) {
- navigator.clipboard.writeText(text);
+ try {
+ navigator.clipboard.writeText(text);
+ } catch (err) {
+ console.error("Failed to copy: ", err);
+ }
  copyButton.innerHTML = `<svg
  stroke="currentColor"
  fill="currentColor"
@@ -85,6 +97,7 @@ const title = frontmatter.title;
  }, 1000);
  }
  });
+
  block.appendChild(copyButton);
  });
 </script>

www/src/components/rightSidebar/moreMenu.astro

@@ -19,7 +19,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
  {
  editHref && (
  <li
- class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-500 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+ class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
  >
  <a class="flex pl-2" href={editHref} target="_blank">
  <svg
@@ -47,7 +47,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
  {
  CONFIG.COMMUNITY_INVITE_URL && (
  <li
- class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-500 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+ class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
  >
  <a class="flex pl-2" href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
  <svg

www/src/components/rightSidebar/tableOfContents.tsx

@@ -49,14 +49,16 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
  }, []);
 
  return (
- <div className="w-full text-slate-900 dark:text-slate-50">
+ <div className="w-full ">
  <h2 className="text-lg my-4 font-semibold">On this page</h2>
- <ul className="w-full border-l-2 border-slate-800 dark:border-brand-primary my-1">
+ <ul className="w-full border-l-2 border-t3-purple-300 marker:text-t3-purple-300 dark:border-t3-purple-200 my-1">
  <li
- className={`pl-2 ${activeId === "overview" ? "active" : ""}`.trim()}
+ className={`pl-2 marker:bg-t3-purple-300 ${
+ activeId === "overview" ? "active" : ""
+ }`.trim()}
  >
  <a
- className="text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300"
+ className="text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 "
  href="#overview"
  >
  Overview
@@ -69,8 +71,10 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
  return (
  <li key={i} className="w-full list-none pl-2">
  <a
- className={`pl-${padding} hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 ${
- activeId === heading.slug ? "font-bold " : ""
+ className={`pl-${padding} hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 marker:text-t3-purple-300 ${
+ activeId === heading.slug
+ ? "font-bold text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 dark:hover:text-t3-purple-100"
+ : "text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 dark:hover:text-t3-purple-100"
  }`}
  href={`#${heading.slug}`}
  >

www/src/layouts/landingPage.astro

@@ -25,11 +25,11 @@ import "@docsearch/css";
  <link rel="icon" type="image/ico" href="/favicon.ico" />
  <meta name="generator" content={Astro.generator} />
  </head>
- <body class="relative">
+ <body class="relative h-full">
  <Navbar />
  <aside
  id="grid-left"
- class="hidden sticky h-[100vh] bottom-0 -top-20 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
+ class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
  title="Site Navigation"
  >
  <LeftSidebar currentPage={currentPage} />

www/src/layouts/mainLayout.astro

@@ -129,17 +129,17 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
  <body>
  <Navbar />
  <main
- class="bg-white dark:bg-slate-900 w-full justify-items-center grid grid-cols-1 px-6 md:px-0 md:grid-cols-3 h-full relative"
+ class="bg-t3-purple-50 dark:bg-slate-900 w-full justify-items-center grid grid-cols-1 md:grid-cols-3 h-full relative overflow-y-auto"
  >
  <aside
  id="grid-left"
- class="hidden sticky h-[100vh] bottom-0 top-10 z-10 place-self-start bg-white dark:bg-slate-900 pt-16 col-span-1 col-start-1"
+ class="hidden sticky h-[100vh] bottom-0 top-10 z-10 place-self-start bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 pt-16 md:col-span-1 md:col-start-1 w-full"
  title="Site Navigation"
  >
  <LeftSidebar currentPage={currentPage} />
  </aside>
  <div
- class="w-full sm:col-start-2 sm:col-span-2 lg:col-span-1 lg:col-start-2 place-self-start px-3"
+ class="w-full sm:col-start-2 sm:col-span-2 lg:col-span-1 lg:col-start-2 place-self-start px-6"
  >
  <PageContent
  frontmatter={frontmatter}