uwu (#6817)

Author: rickhanlonii

public/images/uwu.png

@@ -285,6 +285,14 @@ export function Footer() {
             dir="ltr">
             ©{new Date().getFullYear()}
           </div>
+          <div className="uwu-visible text-xs">
+            Logo by
+            <ExternalLink
+              className="ms-1"
+              href="https://twitter.com/sawaratsuki1004">
+              @sawaratsuki1004
+            </ExternalLink>
+          </div>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/learn" isHeader={true}>

src/components/Layout/Footer.tsx

@@ -26,6 +26,7 @@ import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
+import * as React from 'react';
 
 function Section({children, background = null}) {
   return (
@@ -115,12 +116,15 @@ export function HomeContent() {
     <>
       <div className="ps-0">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
+          <div className="uwu-visible flex justify-center">
+            <img className="uwu-visible h-24 lg:h-40" src="/images/uwu.png" />
+          </div>
           <Logo
             className={cn(
-              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
+              'uwu-hidden mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
             )}
           />
-          <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
+          <h1 className="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
@@ -489,7 +493,13 @@ export function HomeContent() {
           </div>
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
-            <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
+            <div className="uwu-visible flex justify-center">
+              <img
+                className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
+                src="/images/uwu.png"
+              />
+            </div>
+            <Logo className="uwu-hidden text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               Welcome to the <br className="hidden lg:inline" />
               React community

src/components/Layout/HomeContent.js

@@ -249,16 +249,25 @@ export default function TopNav({
                 {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
               <div className="f">
-                <NextLink
-                  href="/"
-                  className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
-                  <Logo
-                    className={cn(
-                      'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
-                    )}
-                  />
-                  <span className="sr-only 3xl:not-sr-only">React</span>
-                </NextLink>
+                <div className="uwu-visible">
+                  <NextLink
+                    href="/"
+                    className={`active:scale-95 mt-0.5 overflow-hidden transition-transform relative items-center justify-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                    <img className="h-8" src="/images/uwu.png" />
+                  </NextLink>
+                </div>
+                <div className="uwu-hidden">
+                  <NextLink
+                    href="/"
+                    className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                    <Logo
+                      className={cn(
+                        'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                      )}
+                    />
+                    <span className="sr-only 3xl:not-sr-only">React</span>
+                  </NextLink>
+                </div>
               </div>
               <div className="flex flex-column justify-center items-center">
                 <NextLink

src/components/Layout/TopNav/TopNav.tsx

@@ -19,6 +19,41 @@ const MyDocument = () => {
         }}
       />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                (function () {
+                  try {
+                    var preferredUwu;
+                    try {
+                      preferredUwu = localStorage.getItem('uwu');
+                    } catch (err) { }
+  
+                    const isUwuValue = window.location 
+                      && window.location.search
+                      && window.location.search.match(/uwu=(true|false)/);
+                      
+                    if (isUwuValue) {
+                      const isUwu = isUwuValue[1] === 'true';
+                      if (isUwu) {
+                        try {
+                          localStorage.setItem('uwu', true);
+                        } catch (err) { }
+                        document.documentElement.classList.add('uwu');
+                        console.log('uwu mode enabled. logo credits to @sawaratsuki1004 via https://github.com/SAWARATSUKI/ServiceLogos');
+                      } else {
+                        try {
+                          localStorage.removeItem('uwu', false);
+                        } catch (err) { }
+                      }
+                    } else if (preferredUwu) {
+                      document.documentElement.classList.add('uwu');
+                    }
+                  } catch (err) { }
+                })();
+              `,
+          }}
+        />
         <script
           dangerouslySetInnerHTML={{
             __html: `

src/pages/_document.tsx

@@ -737,3 +737,19 @@ ol.mdx-illustration-block {
   transition-delay: 1s;
   pointer-events: none;
 }
+
+.uwu-visible {
+  display: none;
+}
+.uwu-hidden {
+  display: flex;
+}
+
+.uwu {
+  .uwu-visible {
+    display: flex;
+  }
+  .uwu-hidden {
+    display: none;
+  }
+}