uwu (#6817)

reactjs · Apr 30, 2024 · 1df378f · 1df378f
1 parent e538800
commit 1df378f
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 13 deletions.
diff --git a/public/images/uwu.png b/public/images/uwu.png
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
@@ -285,6 +285,14 @@ export function Footer() {
  dir="ltr">
  &copy;{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}>

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
@@ -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

diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
@@ -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

diff --git a/src/pages/_document.tsx b/src/pages/_document.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: `

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -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;
+ }
+}