Skip to content
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

Jump to bottom

Revert "docs: refactor (WIP)" #850

Merged
merged 1 commit into from
Dec 23, 2023
Merged

Revert "docs: refactor (WIP)" #850

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
1 change: 0 additions & 1 deletion packages/kitchen-sink/src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@ button:disabled {
}
}


pre {
white-space: pre-wrap;
/* css-3 */
Expand Down
32 changes: 0 additions & 32 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions website/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
126 changes: 63 additions & 63 deletions website/components/home/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,75 @@ const Showdown = dynamic(() =>
export function About() {
return (
<>
<div>
<Container>
<div className="lg:p-4 space-y-6 md:flex md:gap-20 justify-center md:space-y-0 lg:items-center">
<div className="md:w-7/12 lg:w-1/2">
<Graphic />
</div>
<div className="md:w-7/12 lg:w-1/2">
<h2 className="text-3xl font-bold text-zinc-900 md:text-4xl dark:text-white">
React at the speed of raw JS
</h2>
<p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
Million.js automatically optimizes React, making it run way
faster. It's one of the top performers in the{' '}
<a
href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
target="_blank"
rel="noreferrer"
className="nx-text-primary-600 underline decoration-from-font [text-underline-position:from-font]"
>
JS Framework Benchmark
</a>
.
</p>
<div className="divide-y space-y-4 divide-zinc-100 dark:divide-zinc-800">
<div className="mt-8 flex gap-4 md:items-center">
<div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
<LightningIcon />
</div>
<div className="w-5/6">
<h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
Up to 70% faster* than React.
</h4>
<p className="text-zinc-500 dark:text-zinc-400">
* - Benchmarks may not represent real-world performance.
</p>
</div>
</div>
<div className="pt-4 flex gap-4 md:items-center">
<div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
<ClockIcon />
</div>
<div className="w-5/6">
<h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
Integrate and ship in minutes.
</h4>
<p className="text-zinc-500 dark:text-zinc-400">
No need to learn a new framework. Works with your existing
React components.
</p>
</div>
</div>
</div>
<div className="mt-10 text-xs bg-gradient-to-b dark:from-zinc-500 dark:to-[#111] dark:hover:to-zinc-500 inline-block text-transparent bg-clip-text from-zinc-500 to-white hover:to-zinc-500 opacity-40 hover:opacity-50 transition-opacity">
Note: It's important to note that benchmarks (via JS Framework
Benchmark) do not represent real-life performance. Million.js
does include some limitations. You may see more performance
improvement if you have more data / UI heavy apps.
</div>
</div>
</div>
</Container>
</div>
<div className="relative">
<Container>
<h3 className="text-2xl text-center font-bold text-zinc-900 dark:text-white md:text-3xl lg:text-4xl">
What's in Million.js?
</h3>
<p className="mt-3 text-center text-zinc-600 dark:text-zinc-300 md:text-md lg:text-lg">
The tools to make React faster, automatically.
All the tools to make React faster, automatically.
</p>
<div className="relative mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<Card
Expand Down Expand Up @@ -77,68 +139,6 @@ export function About() {
</Container>
<Blur />
</div>
<div>
<Container>
<div className="lg:p-4 space-y-6 md:flex md:gap-20 justify-center md:space-y-0 lg:items-center">
<div className="md:w-7/12 lg:w-1/2">
<Graphic />
</div>
<div className="md:w-7/12 lg:w-1/2">
<h2 className="text-3xl font-bold text-zinc-900 md:text-4xl dark:text-white">
React at the speed of raw JS
</h2>
<p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
Million.js optimizes React, improving its performance. It stands
out as one of the top performers in the{' '}
<a
href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
target="_blank"
rel="noreferrer"
className="nx-text-primary-600 underline decoration-from-font [text-underline-position:from-font]"
>
JS Framework Benchmark
</a>
.
</p>
<div className="divide-y space-y-4 divide-zinc-100 dark:divide-zinc-800">
<div className="mt-8 flex gap-4 md:items-center">
<div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
<LightningIcon />
</div>
<div className="w-5/6">
<h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
Up to 70% faster* than React.
</h4>
<p className="text-zinc-500 text-sm dark:text-zinc-400">
* - Benchmarks may not represent real-world performance.
</p>
</div>
</div>
<div className="pt-4 flex gap-4 md:items-center">
<div className="w-12 h-12 flex gap-4 rounded-full bg-purple-100 dark:bg-purple-900/20">
<ClockIcon />
</div>
<div className="w-5/6">
<h4 className="font-semibold text-lg text-zinc-700 dark:text-purple-300">
Integrate and ship in minutes.
</h4>
<p className="text-zinc-500 text-sm dark:text-zinc-400">
No need to learn a new framework. Works with your existing
React components.
</p>
</div>
</div>
</div>
<p className="mt-10 text-xs bg-gradient-to-b dark:from-zinc-500 dark:to-[#111] dark:hover:to-zinc-500 inline-block text-transparent bg-clip-text from-zinc-500 to-white hover:to-zinc-500 opacity-40 hover:opacity-50 transition-opacity">
Note: Benchmarks (via JS Framework Benchmark) do not represent
real-life performance. Million.js does have some limitations.
Performance improvements may be more noticeable with apps that
include more data / UI components.
</p>
</div>
</div>
</Container>
</div>
</>
);
}
Expand Down
113 changes: 0 additions & 113 deletions website/components/home/community.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion website/components/home/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const faq = [
question: <>How is it fast?</>,
answer: (
<>
It uses a novel approach to the virtual DOM called the block virtual DOM.
We use a novel approach to the virtual DOM called the block virtual DOM.
You can read more on what the block virtual DOM is with{' '}
<Link
className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
Expand Down
21 changes: 4 additions & 17 deletions website/components/home/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import OpenSaucedLogo from '../../public/opensauced.svg';
import MetamaskLogo from '../../public/metamask.svg';
import { Container } from './container';
import { ShimmerButton } from './shimmer-button';
import { Tooltip as ReactTooltip } from 'react-tooltip';

const CountUp = dynamic(() => import('react-countup'), {
loading: () => <span>70</span>,
Expand All @@ -30,27 +29,15 @@ export function Hero() {
<p className="mt-8 text-xl text-zinc-600 dark:text-zinc-300 leading-8">
The{' '}
<span className="font-medium dark:text-zinc-100">
<span
data-tooltip-id="virtual-dom-explanation"
className="text-purple-500 hover:text-purple-700"
>
Virtual DOM
</span>{' '}
Replacement
Virtual DOM Replacement
</span>{' '}
for React. Experience improved performance for UI and data-heavy
React apps. Minimal effort required - all it takes is {' '}
for React. Gain big performance wins for UI and data heavy React
apps. Dead simple to use – try it out with{' '}
<Link href="/docs" className="font-medium hover:underline">
a single plugin
just one plugin
</Link>
.
</p>
<ReactTooltip
id="virtual-dom-explanation"
place="bottom"
style={{ width: '50%', zIndex: '13' }}
content="The Virtual DOM is a technique in web development, like React.js, that boosts efficiency by first making changes to a virtual copy of the DOM before updating the actual DOM."
/>
<div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
<Link href="/docs" className="w-full sm:w-max">
<ShimmerButton
Expand Down
5 changes: 2 additions & 3 deletions website/components/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { About } from './about';
import { Community } from './community';
import { CTA } from './cta';
import { FAQ } from './faq';
import { Hero } from './hero';
Expand All @@ -10,8 +9,8 @@ export function Home() {
<main className="space-y-40 mb-40">
<Hero />
<About />
{/* <Showcase /> */}
<Community />
<Showcase />
<FAQ />
<CTA />
</main>
);
Expand Down
Loading
Loading