Migrate from Docusaurus 1 to Docusaurus 3 (#17043)
Co-authored-by: fisker Cheung <lionkay@gmail.com>
This commit is contained in:
Lehoczky Zoltánandfisker Cheung authored and GitHub committed
1 parent
3e2f487049
commit
6a612520bc
119 files changed
+9687
-7789
No files matched your search
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #19828a;
|
||||
--ifm-color-primary-dark: #16757c;
|
||||
--ifm-color-primary-darker: #156e75;
|
||||
--ifm-color-primary-darkest: #115b61;
|
||||
--ifm-color-primary-light: #1b8f98;
|
||||
--ifm-color-primary-lighter: #1d959f;
|
||||
--ifm-color-primary-lightest: #21a9b3;
|
||||
--ifm-code-font-size: 90%;
|
||||
--ifm-button-border-radius: calc(0.8rem * var(--ifm-button-size-multiplier));
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--navbar-color: #1a2b34;
|
||||
|
||||
--color-yellow: #f8bc45;
|
||||
--color-yellow-dark: #f7b126;
|
||||
--color-yellow-darker: #f6ab17;
|
||||
--color-yellow-darkest: #d69108;
|
||||
--color-yellow-light: #f9c764;
|
||||
--color-yellow-lighter: #facd73;
|
||||
--color-yellow-lightest: #fbdda1;
|
||||
|
||||
--color-pink: #c596c7;
|
||||
--color-pink-dark: #b87fbb;
|
||||
--color-pink-darker: #b274b5;
|
||||
--color-pink-darkest: #9c559f;
|
||||
--color-pink-light: #d2add3;
|
||||
--color-pink-lighter: #d8b8d9;
|
||||
--color-pink-lightest: #ebdaeb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--ifm-color-primary: #56b3b4;
|
||||
--ifm-color-primary-dark: #4aa5a6;
|
||||
--ifm-color-primary-darker: #459c9d;
|
||||
--ifm-color-primary-darkest: #398081;
|
||||
--ifm-color-primary-light: #68bbbc;
|
||||
--ifm-color-primary-lighter: #72bfc0;
|
||||
--ifm-color-primary-lightest: #8dcccd;
|
||||
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.button--primary:active,
|
||||
.button--primary.button--active {
|
||||
--ifm-button-background-color: var(--ifm-color-primary-dark);
|
||||
--ifm-button-border-color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
.button--secondary:active,
|
||||
.button--secondary.button--active {
|
||||
--ifm-button-background-color: var(--ifm-color-secondary-dark);
|
||||
--ifm-button-border-color: var(--ifm-color-secondary-dark);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
--ifm-navbar-background-color: var(--navbar-color);
|
||||
--ifm-navbar-link-hover-color: #68bbbc;
|
||||
}
|
||||
|
||||
.hero {
|
||||
--ifm-hero-background-color: var(--navbar-color);
|
||||
}
|
||||
|
||||
.footer {
|
||||
--ifm-footer-background-color: #20232a;
|
||||
}
|
||||
|
||||
.header-github-link::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background-color: var(--ifm-navbar-link-color);
|
||||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
|
||||
transition: background-color var(--ifm-transition-fast)
|
||||
var(--ifm-transition-timing-default);
|
||||
}
|
||||
|
||||
.header-github-link:hover::before {
|
||||
background-color: var(--ifm-navbar-link-hover-color);
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.footer__github-stars {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import Link from "@docusaurus/Link";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
import Heading from "@theme/Heading";
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {string} props.title
|
||||
* @param {ReactNode} props.children
|
||||
*/
|
||||
function Card({ title, children }) {
|
||||
return (
|
||||
<div class="card margin-vert--sm">
|
||||
<div class="card__header">
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<p>{children}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Help() {
|
||||
return (
|
||||
<Layout title="Prettier · Opinionated Code Formatter">
|
||||
<main className="margin-vert--xl container">
|
||||
<div className="margin-bottom--lg">
|
||||
<Heading as="h1">Need help?</Heading>
|
||||
<div>This project is maintained by a dedicated group of people;</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<Card title="Browse Docs">
|
||||
Learn more using the{" "}
|
||||
<Link to="/docs">documentation on this site</Link>.
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Card title="Join the community">
|
||||
Ask questions about the documentation and project.
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Card title="Stay up to date">
|
||||
Find out what's new with this project.
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,371 @@
|
||||
import clsx from "clsx";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import Layout from "@theme/Layout";
|
||||
import AnimatedLogo from "@sandhose/prettier-animated-logo";
|
||||
import Heading from "@theme/Heading";
|
||||
import styles from "./index.module.css";
|
||||
import { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
function DraggableLogo() {
|
||||
const [rolling, setRolling] = useState(false);
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {DragEvent} event
|
||||
*/
|
||||
const onDragStart = (event) => {
|
||||
event.preventDefault();
|
||||
setRolling(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.logoWrapper}
|
||||
draggable="true"
|
||||
onDragStart={onDragStart}
|
||||
onTouchStart={onDragStart}
|
||||
>
|
||||
<AnimatedLogo
|
||||
version="wide"
|
||||
rolling={rolling}
|
||||
onAnimationEnd={() => setRolling(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Tidelift() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const tideliftUrl = siteConfig.customFields.tideliftUrl;
|
||||
|
||||
return (
|
||||
<Link className={styles.tidelift} to={tideliftUrl}>
|
||||
PRETTIER FOR ENTERPRISE
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function HomepageHeader() {
|
||||
return (
|
||||
<header className={clsx("hero hero--dark", styles.heroBanner)}>
|
||||
<Tidelift />
|
||||
|
||||
<div className="container">
|
||||
<div className={styles.logoWrapperContainer}>
|
||||
<DraggableLogo />
|
||||
</div>
|
||||
<div className={styles.heroButtonContainer}>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--primary button--lg",
|
||||
styles.heroButton,
|
||||
)}
|
||||
to="pathname:///playground/"
|
||||
target="_self"
|
||||
>
|
||||
Try It Online
|
||||
</Link>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--secondary button--lg",
|
||||
styles.heroButton,
|
||||
)}
|
||||
to="/docs/install"
|
||||
>
|
||||
Install Prettier
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function SyntaxSection() {
|
||||
return (
|
||||
<section className={styles.syntaxSection}>
|
||||
<Link
|
||||
to="https://sentry.shop/products/syntax-prettier-tee"
|
||||
className={clsx(styles.syntaxLink, "container")}
|
||||
>
|
||||
<div className="margin-bottom--md">
|
||||
Limited edition tshirts are now available to buy! $10 per tshirt goes
|
||||
to maintain the project.
|
||||
</div>
|
||||
<img width={860} alt="" src="/images/syntaxfm/1.webp" />
|
||||
</Link>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TldrSection() {
|
||||
return (
|
||||
<div className={clsx(styles.tldrSection, styles.sectionPadding)}>
|
||||
<div className={clsx("container", styles.tldrSectionInner)}>
|
||||
<div className={styles.tldrSectionColumn}>
|
||||
<Heading as="h2">What is Prettier?</Heading>
|
||||
<ul>
|
||||
<li>An opinionated code formatter</li>
|
||||
<li>Supports many languages</li>
|
||||
<li>Integrates with most editors</li>
|
||||
<li>
|
||||
<a href={"/docs/option-philosophy"}>Has few options »</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.tldrSectionColumn}>
|
||||
<Heading as="h2">Why?</Heading>
|
||||
<ul>
|
||||
<li>Your code is formatted on save</li>
|
||||
<li>No need to discuss style in code review</li>
|
||||
<li>Saves you time and energy</li>
|
||||
<li>
|
||||
<Link to={"/docs/why-prettier"}>And more »</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LanguagesSection() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const languages = siteConfig.customFields.supportedLanguages;
|
||||
|
||||
const languageChunks = languages.reduce((acc, language) => {
|
||||
const last = acc.at(-1);
|
||||
if (
|
||||
last &&
|
||||
last.length < 2 &&
|
||||
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
|
||||
language.variants.length <
|
||||
9
|
||||
) {
|
||||
last.push(language);
|
||||
} else {
|
||||
acc.push([language]);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className={clsx(styles.sectionPadding, styles.languageSection)}>
|
||||
<div className="container">
|
||||
<Heading as="h2">Works with the Tools You Use</Heading>
|
||||
<div className={styles.languageSectionGrid}>
|
||||
{languageChunks.map((languageChunk, index) => (
|
||||
<div key={index}>
|
||||
{languageChunk.map((language) => (
|
||||
<LanguageItem key={language.name} {...language} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {string} props.name
|
||||
* @param {string?} props.nameLink
|
||||
* @param {string} props.image
|
||||
* @param {string[]} props.variants
|
||||
*/
|
||||
function LanguageItem({ name, nameLink, image, variants }) {
|
||||
return (
|
||||
<div className={styles.languageItem}>
|
||||
<img src={image} className={styles.languageItemImage} alt="" />
|
||||
<ul className={styles.languageItemList}>
|
||||
<li>{nameLink ? <a href={nameLink}>{name}</a> : name}</li>
|
||||
|
||||
{variants.map((variant) => (
|
||||
<li key={variant}>
|
||||
<Markdown>{variant}</Markdown>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EditorSupportSection() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const editors = siteConfig.customFields.editors;
|
||||
const githubUrl = siteConfig.customFields.githubUrl;
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.sectionPadding, styles.editorSection)}>
|
||||
<div className="container">
|
||||
<Heading as="h2">Editor Support</Heading>
|
||||
<div className={styles.editorSectionGrid}>
|
||||
{editors.map((editor) => (
|
||||
<Editor key={editor.name} {...editor} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.editorSectionButtonContainer}>
|
||||
<div>
|
||||
<span className="margin-right--sm">Got more?</span>
|
||||
<Link
|
||||
to={`${githubUrl}/edit/main/website/data/editors.yml`}
|
||||
className={clsx("button button--outline button--primary")}
|
||||
>
|
||||
Send a PR
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {string} props.content
|
||||
* @param {string} props.image
|
||||
* @param {string} props.name
|
||||
*/
|
||||
function Editor({ content = "", image, name }) {
|
||||
return (
|
||||
<div className={styles.editorItem}>
|
||||
<img src={image} className={styles.editorItemImage} alt="" />
|
||||
<div>
|
||||
<Heading as="h3">{name}</Heading>
|
||||
<Markdown>{content.replaceAll("\n", " \n")}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersSection() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const users = siteConfig.customFields.users;
|
||||
const showcase = users
|
||||
.filter((user) => user.pinned)
|
||||
.map((user, i) => (
|
||||
<a key={i} href={user.infoLink} className={styles.userItem}>
|
||||
<img
|
||||
src={user.greyImage}
|
||||
title={user.caption}
|
||||
className={styles.userItemImage}
|
||||
/>
|
||||
</a>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.sectionPadding, styles.userSection)}>
|
||||
<div className="container padding-bottom--md">
|
||||
<Heading as="h2">Used By People You Rely On</Heading>
|
||||
<div className={styles.userSectionGrid}>{showcase}</div>
|
||||
<div className={styles.userSectionButtonContainer}>
|
||||
<div>
|
||||
<Link to="/users" className={clsx("button button--primary")}>
|
||||
See others
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<Heading as="h2">Established in the Ecosystem</Heading>
|
||||
|
||||
<div className={styles.ecosystemGrid}>
|
||||
<div className={styles.ecosystemGridItem}>
|
||||
<Link
|
||||
to="https://2021.stateofjs.com/en-US/other-tools/utilities"
|
||||
style={{ marginTop: "15px" }}
|
||||
aria-label="Statistic for utility tools in the State of JavaScript survey"
|
||||
>
|
||||
<img src="/images/state_of_js_grey.svg" alt="" />
|
||||
</Link>
|
||||
<div>
|
||||
<p>Regularly used by:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
|
||||
More than 83% of respondents to State of JS 2021.
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
|
||||
More than 70% of respondents to State of JS 2020.
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.ecosystemGridItem}>
|
||||
<Link
|
||||
to="https://github.com/prettier/prettier"
|
||||
aria-label="Prettier on GitHub"
|
||||
>
|
||||
<img src="/images/github_grey.svg" alt="" />
|
||||
</Link>
|
||||
<div>
|
||||
<p>
|
||||
More than{" "}
|
||||
<strong data-placeholder="dependent-github">8.9 million</strong>{" "}
|
||||
dependent repositories on GitHub
|
||||
</p>
|
||||
<Link
|
||||
className="button button--primary"
|
||||
to="https://github.com/prettier/prettier/network/dependents"
|
||||
>
|
||||
Check Them Out
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.ecosystemGridItem}>
|
||||
<Link
|
||||
to="https://npmjs.com/package/prettier"
|
||||
aria-label="Prettier on NPM"
|
||||
>
|
||||
<img src="/images/npm_grey.svg" alt="" />
|
||||
</Link>
|
||||
<div>
|
||||
<p>
|
||||
More than{" "}
|
||||
<strong data-placeholder="dependent-npm">18.7k</strong>{" "}
|
||||
dependent packages on npm
|
||||
</p>
|
||||
<Link
|
||||
className="button button--primary"
|
||||
to="https://www.npmjs.com/browse/depended/prettier"
|
||||
aria-label="See every dependent npm packages"
|
||||
>
|
||||
See them all
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<div className="home">
|
||||
<Layout
|
||||
title="Prettier · Opinionated Code Formatter"
|
||||
description={siteConfig.tagline}
|
||||
>
|
||||
<HomepageHeader />
|
||||
<SyntaxSection />
|
||||
<TldrSection />
|
||||
<LanguagesSection />
|
||||
<EditorSupportSection />
|
||||
<UsersSection />
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
:global(.home) {
|
||||
--ifm-navbar-shadow: none;
|
||||
|
||||
--color-tidelift: #f6914d;
|
||||
--color-tidelift-darker: #e67c36;
|
||||
|
||||
--ifm-h2-font-size: 2.125rem;
|
||||
--ifm-heading-font-weight: 500;
|
||||
--ifm-heading-margin-top: 1.25rem;
|
||||
--ifm-heading-margin-bottom: 2.75rem;
|
||||
|
||||
--ifm-list-margin: 0;
|
||||
--ifm-list-left-padding: 0;
|
||||
}
|
||||
|
||||
.heroBanner {
|
||||
--ifm-color-primary: var(--color-yellow);
|
||||
--ifm-color-primary-dark: var(--color-yellow-dark);
|
||||
--ifm-color-secondary: var(--color-pink);
|
||||
--ifm-color-secondary-dark: var(--color-pink-dark);
|
||||
|
||||
padding: 3rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.heroBanner {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logoWrapperContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.logoWrapper > svg {
|
||||
cursor: ew-resize;
|
||||
height: auto;
|
||||
max-width: calc(100vw - 30px);
|
||||
}
|
||||
|
||||
.heroButtonContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 443px) {
|
||||
.heroButtonContainer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.heroButton {
|
||||
--ifm-button-color: var(--ifm-color-gray-900);
|
||||
}
|
||||
|
||||
.tidelift {
|
||||
--ifm-link-hover-decoration: none;
|
||||
--ifm-link-hover-color: var(--ifm-color-gray-900);
|
||||
|
||||
background: var(--color-tidelift) url(/images/tidelift-small.png) 10px
|
||||
no-repeat;
|
||||
background-size: 24px;
|
||||
color: var(--ifm-color-gray-900);
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
border-radius: 14px 0 0 14px;
|
||||
padding: 6px 14px 6px 44px;
|
||||
z-index: 10;
|
||||
font-weight: 500;
|
||||
transition-property: color, background, border-color;
|
||||
transition-duration: var(--ifm-button-transition-duration);
|
||||
transition-timing-function: var(--ifm-transition-timing-default);
|
||||
}
|
||||
|
||||
.tidelift:hover {
|
||||
background-color: var(--color-tidelift-darker);
|
||||
}
|
||||
|
||||
.syntaxSection {
|
||||
--ifm-color-primary: var(--color-yellow);
|
||||
--ifm-color-primary-dark: var(--color-yellow-dark);
|
||||
|
||||
background-color: var(--ifm-color-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.syntaxLink {
|
||||
--ifm-link-hover-color: var(--ifm-color-gray-900);
|
||||
--ifm-container-width: 860px;
|
||||
--ifm-container-width-xl: 860px;
|
||||
|
||||
color: var(--ifm-color-gray-900);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.sectionPadding {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.tldrSection {
|
||||
--ifm-color-primary: var(--color-yellow);
|
||||
--ifm-color-primary-dark: var(--color-yellow-dark);
|
||||
--ifm-link-color: var(--ifm-color-primary);
|
||||
--ifm-link-hover-color: var(--ifm-color-primary);
|
||||
|
||||
background-color: #182025;
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.tldrSectionInner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.tldrSectionColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tldrSection h2:before {
|
||||
content: "# ";
|
||||
}
|
||||
|
||||
.tldrSectionColumn ul li {
|
||||
list-style: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.tldrSectionColumn li::before {
|
||||
content: "* ";
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.languageSection {
|
||||
--ifm-color-primary: var(--color-pink);
|
||||
--ifm-color-primary-dark: var(--color-pink-dark);
|
||||
--ifm-link-color: var(--ifm-color-white);
|
||||
--ifm-link-hover-color: var(--ifm-color-white);
|
||||
color: var(--ifm-color-white);
|
||||
background-color: var(--navbar-color);
|
||||
}
|
||||
|
||||
.languageSection h2 {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.languageSectionGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.languageSectionGrid > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.languageItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.languageItemImage {
|
||||
width: 50px;
|
||||
margin: 0 1.25rem;
|
||||
}
|
||||
|
||||
.languageItemList {
|
||||
list-style: none;
|
||||
--ifm-paragraph-margin-bottom: 0;
|
||||
}
|
||||
|
||||
.languageItemList li:first-of-type {
|
||||
--ifm-link-color: var(--ifm-color-primary);
|
||||
--ifm-link-hover-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.languageItemList li + li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.languageItem code,
|
||||
.editorItem code {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.editorSection {
|
||||
--ifm-color-primary: #56b3b4;
|
||||
--ifm-link-color: var(--ifm-color-white);
|
||||
--ifm-link-hover-color: var(--ifm-color-white);
|
||||
color: var(--ifm-color-white);
|
||||
background-color: #182025;
|
||||
}
|
||||
|
||||
.editorSection h2 {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.editorSectionGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 3.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.editorSectionGrid > * {
|
||||
flex: 0 1 262px;
|
||||
}
|
||||
|
||||
.editorItem {
|
||||
--ifm-heading-margin-top: 1.25rem;
|
||||
--ifm-heading-margin-bottom: 0px;
|
||||
--ifm-paragraph-margin-bottom: 0;
|
||||
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.editorItemImage {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.editorSectionButtonContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 3.75rem;
|
||||
|
||||
--ifm-font-color-base-inverse: var(--ifm-color-gray-1000);
|
||||
}
|
||||
|
||||
.userSection {
|
||||
--ifm-color-primary: #6f7b81;
|
||||
--ifm-color-primary-dark: #637075;
|
||||
--ifm-button-color: #1a2b34;
|
||||
background-color: var(--navbar-color);
|
||||
}
|
||||
|
||||
.userSection h2 {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.userSectionGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.userItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
.userItem:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.userItemImage {
|
||||
width: 200px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 736px) {
|
||||
.userItemImage {
|
||||
max-height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.userSectionButtonContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.ecosystemGrid {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 736px) {
|
||||
.ecosystemGrid {
|
||||
gap: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ecosystemGridItem {
|
||||
display: grid;
|
||||
grid-template-columns: auto 260px;
|
||||
gap: 0.8rem;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #b0c4ce;
|
||||
--ifm-link-color: #b0c4ce;
|
||||
--ifm-link-hover-color: var(--ifm-color-white);
|
||||
--ifm-list-left-padding: 2rem;
|
||||
--ifm-paragraph-margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ecosystemGridItem img {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.ecosystemGridItem li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import Layout from "@theme/Layout";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import Heading from "@theme/Heading";
|
||||
import Admonition from "@theme/Admonition";
|
||||
import styles from "./index.module.css";
|
||||
import clsx from "clsx";
|
||||
import Link from "@docusaurus/Link";
|
||||
|
||||
export default function Users() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
const users = siteConfig.customFields.users;
|
||||
|
||||
const showcase = users.map((user, i) => (
|
||||
<div key={i} className={styles.logoItem}>
|
||||
<Link to={user.infoLink}>
|
||||
<img src={user.image} title={user.caption} />
|
||||
</Link>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<Layout title="Who's using Prettier?">
|
||||
<main className={clsx("margin-vert--xl", styles.main)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className="text--center">
|
||||
Who’s Using This?
|
||||
</Heading>
|
||||
|
||||
<Admonition
|
||||
type="info"
|
||||
title="Prettier is regularly used by:"
|
||||
className="margin-vert--lg"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
|
||||
More than <strong>83%</strong> of respondents to State of JS
|
||||
2021 (10282 developers out of 12360).
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
|
||||
More than <strong>70%</strong> of respondents to State of JS
|
||||
2020 (14880 developers out of 20974).
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Admonition>
|
||||
|
||||
<section>
|
||||
<div className={styles.logoGrid}>{showcase}</div>
|
||||
<div className="text--center margin-bottom--lg">
|
||||
...and{" "}
|
||||
<Link to="https://www.npmjs.com/browse/depended/prettier">
|
||||
many more projects
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.main {
|
||||
--ifm-container-width: 990px;
|
||||
--ifm-container-width-xl: 990px;
|
||||
}
|
||||
|
||||
.logoGrid {
|
||||
--min-item-size: 168px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logoGrid > * {
|
||||
flex: 1 1 var(--min-item-size);
|
||||
}
|
||||
|
||||
.logoItem,
|
||||
.logoItem > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logoItem a {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logoItem img {
|
||||
max-height: 64px;
|
||||
width: 128px;
|
||||
}
|
||||
Reference in new issue
Block a user