Skip to content

Add logo option #6817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 30, 2024
Merged

Add logo option #6817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/uwu.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/components/Layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
16 changes: 13 additions & 3 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down
29 changes: 19 additions & 10 deletions src/components/Layout/TopNav/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 35 additions & 0 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
Copy link
Member

@Daniel15 Daniel15 May 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creating a __html object inline like this is explicitly discouraged in the React docs 😅 we should follow the best practices here.

Can't the script just go in a regular .js file?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no other way to use dangerouslySetInnerHTML, which we have to use since the head rendered by React and browsers ignore script text set by innerText for security reasons.

The cautions about it being unsafe are not applicable, because the string is static. We can't use a .js file because it would require a round trip to fetch the script, so it would run later and flash the wrong theme or logo (see the existing logic for setting the theme in the script tag below this).

When we convert to the App Router, this is supported out of the box with React 19 with the new Resources support https://react.dev/reference/react-dom/components#resource-and-metadata-components

(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: `
Expand Down
16 changes: 16 additions & 0 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading