amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

uwu (#6817)

Browse Source
This commit is contained in:
Ricky
2024-04-30 01:05:08 -04:00
committed by GitHub
parent e538800cfe
commit 1df378ffa1
6 changed files with 91 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/uwu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

8
src/components/Layout/Footer.tsx
View File

@@ -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}>

16
src/components/Layout/HomeContent.js
View File

@@ -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

29
src/components/Layout/TopNav/TopNav.tsx
View File

@@ -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

35
src/pages/_document.tsx
View File

@@ -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: `

16
src/styles/index.css
View File

@@ -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;
}
}