Web/fixes (#1461)

* chore(web): add `main-footer` to docs and remove duplicate

* chore(web):
- reuse `fetchSafe`
- omit `github-actions[bot]` from contributors list

* fix datepicker tests

* chore(web): open `main-footer` links in new tab

* chore(web): navbar - add `rel` attribute to all `a` tags that have `target="_blank"`

* chore(web): fix docs code preview light/dark style background image isolation

Author: SutuSebastian

apps/web/app/docs/[[...slug]]/page.tsx

@@ -62,7 +62,6 @@ export default function DocPage({ params }: Props) {
           </ContentLayout>
         </main>
         <DocsPager doc={doc} />
-        <DocFooter />
         <CarbonAds />
       </div>
       <ToC doc={doc} />
@@ -150,103 +149,6 @@ function DocsPager({ doc }: { doc: Doc }) {
   );
 }
 
-function DocFooter() {
-  return (
-    <Footer className="rounded-none pt-16 shadow-none lg:px-0 dark:bg-gray-900">
-      <div className="w-full">
-        <div className="grid w-full justify-between md:grid-cols-2">
-          <div className="mb-4 max-w-sm lg:mb-0">
-            <Link href="/" className="flex items-center gap-3">
-              <Image alt="" height="32" src="/favicon.svg" width="32" className="size-8" />
-              <span className="text-xl font-semibold text-gray-900 dark:text-gray-100">Flowbite React</span>
-            </Link>
-            <p className="mb-3 mt-4 max-w-sm text-gray-600 dark:text-gray-400">
-              Flowbite is an ecosystem built on top of Tailwind CSS including a component library, block sections, a
-              Figma design system and other resources.
-            </p>
-            <p className="mb-3 mt-4 max-w-sm text-gray-600 dark:text-gray-400">
-              Code licensed{" "}
-              <a
-                href="https://github.com/themesberg/flowbite-react/blob/main/LICENSE"
-                className="text-cyan-600 hover:underline"
-              >
-                MIT
-              </a>
-              , docs{" "}
-              <a
-                href="https://creativecommons.org/licenses/by/3.0/"
-                rel="nofollow noopener noreferrer"
-                className="text-cyan-600 hover:underline"
-              >
-                CC BY 3.0
-              </a>
-            </p>
-          </div>
-          <div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
-            <div>
-              <Footer.Title
-                title="Resources"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://github.com/themesberg/flowbite-react" className="text-base">
-                  GitHub
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/" className="text-base">
-                  Flowbite
-                </Footer.Link>
-                <Footer.Link href="https://tailwindcss.com/" className="text-base">
-                  Tailwind CSS
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/figma/" className="text-base">
-                  Figma
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-            <div>
-              <Footer.Title
-                title="Help & Support"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://discord.gg/4eeurUVvTy" className="text-base">
-                  Discord
-                </Footer.Link>
-                <Footer.Link href="https://github.com/themesberg/flowbite-react/discussions" className="text-base">
-                  Github Discussions
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-            <div>
-              <Footer.Title
-                title="Legal"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://flowbite.com/license/" className="text-base">
-                  License
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/brand/" className="text-base">
-                  Brand guideline
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-          </div>
-        </div>
-        <Footer.Divider />
-        <div className="w-full text-center sm:flex sm:items-center sm:justify-center">
-          <Footer.Copyright
-            by="All Rights Reserved. Flowbite™ is a registered trademark."
-            href="/"
-            year={new Date().getFullYear()}
-            className="text-base"
-          />
-        </div>
-      </div>
-    </Footer>
-  );
-}
-
 function ToC({ doc }: { doc: Doc }) {
   return (
     <div className="hidden w-64 flex-none px-8 xl:block xl:text-sm">

apps/web/app/docs/layout.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { HiMenuAlt1, HiX } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
 import { DocSearchInput } from "~/components/docsearch-input";
+import { MainFooter } from "~/components/main-footer";
 import { NavbarIcons, NavbarLinks } from "~/components/navbar";
 import { DOCS_SIDEBAR, type DocsSidebarItem } from "~/data/docs-sidebar";
 
@@ -36,6 +37,7 @@ export default function DocsLayout({ children }: PropsWithChildren) {
           <DocsSidebar {...state} />
           <div className="w-full min-w-0">{children}</div>
         </div>
+        <MainFooter />
       </div>
     </div>
   );

apps/web/app/page.tsx

@@ -1,4 +1,3 @@
-import { Banner } from "~/components/banner";
 import {
   ComponentsSection,
   ContributorsSection,
@@ -7,11 +6,11 @@ import {
   FigmaSection,
   HeroSection,
   HomeNavbar,
-  MainFooter,
   ReactSection,
   SocialProofSection,
   TailwindSection,
 } from "~/components/homepage";
+import { MainFooter } from "~/components/main-footer";
 
 export default function HomePage() {
   return (

apps/web/components/code-demo.tsx

@@ -244,12 +244,11 @@ function CodePreview({
   children,
 }: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null; iframe?: IFrameData }>) {
   return (
-    <div
-      {...(isRTL && { dir: "rtl" })}
-      className={twMerge("code-preview-wrapper", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
-    >
+    <div {...(isRTL && { dir: "rtl" })} className="code-preview-wrapper">
       <div className="flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
-        <div className="code-responsive-wrapper w-full">
+        <div
+          className={twMerge("code-responsive-wrapper w-full", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
+        >
           <div
             className={twMerge(
               "mx-auto w-full bg-white bg-gradient-to-r dark:bg-gray-900",

apps/web/components/homepage/contributors-section.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import { safeResJson } from "~/helpers/http";
+import { fetchSafe } from "~/helpers/http";
 
 interface Contributor {
   id: number;
@@ -12,9 +12,11 @@ interface Contributor {
 
 async function fetchContributors(): Promise<Contributor[]> {
   try {
-    const result = await fetch("https://api.github.com/repos/themesberg/flowbite-react/contributors?per_page=21");
+    const result = await fetchSafe<Contributor[]>(
+      "https://api.github.com/repos/themesberg/flowbite-react/contributors?per_page=21",
+    );
 
-    return safeResJson(result);
+    return result.filter((contributor) => contributor.login !== "github-actions[bot]");
   } catch (error) {
     return [];
   }

apps/web/components/homepage/index.ts

@@ -5,7 +5,6 @@ export { FeaturedSection } from "./featured-section";
 export { FigmaSection } from "./figma-section";
 export { HeroSection } from "./hero-section";
 export { HomeNavbar } from "./home-navbar";
-export { MainFooter } from "./main-footer";
 export { ReactSection } from "./react-section";
 export { SocialProofSection } from "./social-proof-section";
 export { TailwindSection } from "./tailwind-section";

apps/web/components/homepage/social-proof-section.tsx

@@ -1,9 +1,5 @@
 import Image from "next/image";
-import { safeResJson } from "~/helpers/http";
-
-async function fetchSafe<T>(endpoint: string): Promise<T> {
-  return safeResJson(await fetch(endpoint));
-}
+import { fetchSafe } from "~/helpers/http";
 
 async function fetchStargazers(): Promise<string> {
   try {

apps/web/components/homepage/main-footer.tsx renamed to apps/web/components/main-footer.tsx

@@ -20,6 +20,8 @@ export function MainFooter() {
               Code licensed{" "}
               <a
                 href="https://github.com/themesberg/flowbite-react/blob/main/LICENSE"
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 className="text-cyan-600 hover:underline"
               >
                 MIT
@@ -28,6 +30,7 @@ export function MainFooter() {
               <a
                 href="https://creativecommons.org/licenses/by/3.0/"
                 rel="nofollow noopener noreferrer"
+                target="_blank"
                 className="text-cyan-600 hover:underline"
               >
                 CC BY 3.0
@@ -41,16 +44,26 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://github.com/themesberg/flowbite-react" className="text-base">
+                <Footer.Link
+                  href="https://github.com/themesberg/flowbite-react"
+                  rel="noopener"
+                  target="_blank"
+                  className="text-base"
+                >
                   GitHub
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/" className="text-base">
+                <Footer.Link href="https://flowbite.com/" rel="noopener" target="_blank" className="text-base">
                   Flowbite
                 </Footer.Link>
-                <Footer.Link href="https://tailwindcss.com/" className="text-base">
+                <Footer.Link
+                  href="https://tailwindcss.com/"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  className="text-base"
+                >
                   Tailwind CSS
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/figma/" className="text-base">
+                <Footer.Link href="https://flowbite.com/figma/" rel="noopener" target="_blank" className="text-base">
                   Figma
                 </Footer.Link>
               </Footer.LinkGroup>
@@ -61,10 +74,20 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://discord.gg/4eeurUVvTy" className="text-base">
+                <Footer.Link
+                  href="https://discord.gg/4eeurUVvTy"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  className="text-base"
+                >
                   Discord
                 </Footer.Link>
-                <Footer.Link href="https://github.com/themesberg/flowbite-react/discussions" className="text-base">
+                <Footer.Link
+                  href="https://github.com/themesberg/flowbite-react/discussions"
+                  rel="noopener"
+                  target="_blank"
+                  className="text-base"
+                >
                   Github Discussions
                 </Footer.Link>
               </Footer.LinkGroup>
@@ -75,10 +98,10 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://flowbite.com/license/" className="text-base">
+                <Footer.Link href="https://flowbite.com/license/" rel="noopener" target="_blank" className="text-base">
                   License
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/brand/" className="text-base">
+                <Footer.Link href="https://flowbite.com/brand/" rel="noopener" target="_blank" className="text-base">
                   Brand guideline
                 </Footer.Link>
               </Footer.LinkGroup>

apps/web/components/navbar.tsx

@@ -45,6 +45,7 @@ export function NavbarIcons() {
       </div>
       <Tooltip animation={false} content="View Storybook">
         <a
+          rel="noopener"
           target="_blank"
           href="https://storybook.flowbite-react.com/"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
@@ -54,6 +55,7 @@ export function NavbarIcons() {
       </Tooltip>
       <Tooltip animation={false} content="Join Discord Community">
         <a
+          rel="nofollow noopener noreferrer"
           target="_blank"
           href="https://discord.gg/4eeurUVvTy"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
@@ -63,6 +65,7 @@ export function NavbarIcons() {
       </Tooltip>
       <Tooltip animation={false} content="View on GitHub">
         <a
+          rel="noopener"
           target="_blank"
           href="https://github.com/themesberg/flowbite-react"
           className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
@@ -73,7 +76,12 @@ export function NavbarIcons() {
       <Tooltip animation={false} content="Toggle dark mode">
         <DarkThemeToggle />
       </Tooltip>
-      <a target="_blank" href="https://npmjs.com/package/flowbite-react" className="ml-2 hidden lg:block">
+      <a
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        href="https://npmjs.com/package/flowbite-react"
+        className="ml-2 hidden lg:block"
+      >
         <Badge className="bg-primary-50 px-2 text-sm font-medium text-primary-700 hover:bg-primary-600 hover:text-white sm:block lg:block dark:bg-gray-700 dark:text-primary-500 dark:hover:bg-primary-800 dark:hover:text-white">
           v{version}
         </Badge>

apps/web/helpers/http.ts

@@ -1,5 +1,9 @@
-export function safeResJson<T>(res: Response) {
-  if (res.ok) return res.json() as Promise<T>;
+export async function fetchSafe<T>(endpoint: string): Promise<T> {
+  const response = await fetch(endpoint);
 
-  throw new Error("Internal server error!");
+  if (!response.ok) {
+    throw new Error("Internal server error!");
+  }
+
+  return response.json();
 }

apps/web/styles/docs.css

@@ -666,7 +666,7 @@ code.language-html .token.comment {
     @apply text-gray-500;
   }
 
-  :not(.light) & .code-responsive-wrapper {
+  .code-responsive-wrapper {
     background-color: #111827;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fillRule='evenodd'%3E%3Cg fill='%236b7280' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   }