Skip to content

Commit

Permalink
style(docs): minor refreshment of documentation styles (#2045)
Browse files Browse the repository at this point in the history
  • Loading branch information
andrii-bodnar authored Oct 11, 2024
1 parent 85873d9 commit 9699ade
Show file tree
Hide file tree
Showing 10 changed files with 111 additions and 154 deletions.
4 changes: 2 additions & 2 deletions website/src/components/Features.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
grid-row: 2;
grid-column: 1 / -1;
height: 0;
z-index: 0;
z-index: -1;

img {
bottom: 120px;
bottom: -30px;
position: absolute;
left: -150px;
width: 900px;
Expand Down
94 changes: 61 additions & 33 deletions website/src/components/Features.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,15 @@ const FEATURES: FeatureDetails[] = [
title: "Universal",
description: (
<p>
Use it everywhere. <code>@lingui/core</code> provides the essential intl functionality which works in any
JavaScript project, while <code>@lingui/react</code> offers components for leveraging React rendering.
Use it everywhere.{" "}
<a href="/ref/core">
<code>@lingui/core</code>
</a>{" "}
provides the essential intl functionality which works in any JavaScript project, while{" "}
<a href="/ref/react">
<code>@lingui/react</code>
</a>{" "}
offers components for leveraging React rendering, including React Server Components (RSC) support.
</p>
),
image: "universal.svg",
Expand All @@ -27,10 +34,16 @@ const FEATURES: FeatureDetails[] = [
{
title: "Powerful Tooling",
description: (
<p>
Manage the whole intl workflow using Lingui CLI. It extracts messages from source code, validates messages from
translators and checks that all messages are translated before shipping to production.
</p>
<>
<p>
Manage your intl workflow with the Lingui <a href="/ref/cli">CLI</a>,{" "}
<a href="/ref/vite-plugin">Vite plugin</a>, and <a href="/ref/eslint-plugin">ESLint plugin</a>.
</p>
<p>
The CLI extracts, compiles and validates messages, while the Vite plugin compiles catalogs on the fly, and the
ESLint plugin helps catch common usage errors.
</p>
</>
),
image: "tooling.png",
additionalClass: "",
Expand All @@ -39,8 +52,8 @@ const FEATURES: FeatureDetails[] = [
title: "Full Rich-Text Support",
description: (
<p>
Use React components inside localized messages without any limitations. Writing rich-text messages is as easy as
writing JSX.
Seamlessly use React components within localized messages, without any restrictions. Creating rich-text messages
feels just like writing JSX.
</p>
),
image: "rich-text.svg",
Expand All @@ -49,19 +62,24 @@ const FEATURES: FeatureDetails[] = [
{
title: "AI Translations Ready",
description: (
<p>
For AI to do great translations for you, context is critical. Translating UI copy is difficult because it&apos;s
usually a list of short strings without enough context. Lingui&apos;s localization formats allow developers to
write descriptions of where and how your keys are used.
</p>
<>
<p>
For AI to do great translations for you, context is critical. Translating UI copy is difficult because
it&apos;s usually a list of short strings without enough context.
</p>
<p>
Lingui&apos;s localization formats allow developers to write descriptions of where and how their keys are
used.
</p>
</>
),
image: "ai-ready.png",
additionalClass: "",
},
{
title: "Headache-Free Professional Localization",
description: (
<div>
<>
<div className={"margin-bottom--sm"}>
<code>Candidate knows 1 language</code>, but{" "}
<code>
Expand All @@ -70,34 +88,39 @@ const FEATURES: FeatureDetails[] = [
.
</div>
<p>
You don&apos;t have to know how many plurals the language has. Create a product in one language, and deliver a
perfect translation to users. Lingui follows Unicode ICU standards to handle plurals, genders, and selects.
No need to know how many plurals the language has. Create a product in one language and deliver a perfect
translation to users. Lingui follows Unicode ICU standards to handle plurals, genders and selects.
</p>
</div>
</>
),
image: "clean-and-readable.png",
additionalClass: styles.featureCardCellWide,
},
{
title: "Battle-Proven & Future Proof",
description: (
<p>
During the last 7 years, we&apos;ve seen a lot of localization projects and developed a tool to handle them all.
<br />
If your team needs to edit source texts without developer involvement, or you want the ability to deliver the
most recent translations directly to your customers – we&apos;ve got you covered.
</p>
<>
<p>
Over the past few years, we have seen a lot of localization projects and developed a tool to handle them all.
</p>
<p>
If your team needs to edit source texts without developer involvement, or you want the ability to deliver the
most recent translations directly to your customers – we&apos;ve got you covered.
</p>
</>
),
image: "time.svg",
additionalClass: styles.featureCardCellWide,
},
{
title: "Suitable for All Localization Platforms",
description: (
<p>
Integrate Lingui into your existing workflow. It supports message keys as well as auto-generated messages.
Translations are stored in JSON or standard PO file, which is supported in almost all translation tools.
</p>
<>
<p>Integrate Lingui with your existing workflow. It supports both explicit and auto-generated message keys.</p>
<p>
Translations are stored in JSON or a standard PO file, which is supported by almost all translation tools.
</p>
</>
),
image: "all-platforms.svg",
additionalClass: "",
Expand All @@ -107,7 +130,7 @@ const FEATURES: FeatureDetails[] = [
description: (
<p>
Lingui has been used and tested by thousands of satisfied users and has been proven to provide accurate and
efficient i18n and l10n results. Join the thousands of satisfied customers.
efficient i18n and l10n results. Join the community.
</p>
),
image: "verified.svg",
Expand All @@ -116,11 +139,16 @@ const FEATURES: FeatureDetails[] = [
{
title: "Fully Fledged",
description: (
<p>
Lingui is a general-purpose framework with bindings for React. Use it on a server in Node.js or Vanilla
JavaScript.
<br />A set of optional modules would implement lazy loading of language packs, user locale detection, and more.
</p>
<>
<p>
Lingui is a general-purpose framework with bindings for React (including RSC). It can be used on a server with
Node.js or in Vanilla JavaScript.
</p>
<p>
Extend its functionality with optional modules for features like lazy loading of language packs, automatic
user locale detection, and more.
</p>
</>
),
image: "fledged.svg",
additionalClass: styles.featureCardCellWide,
Expand Down
3 changes: 3 additions & 0 deletions website/src/components/Header.module.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
.heroBanner {
text-align: center;
position: relative;
padding-top: 0;
padding-left: 2rem;
padding-right: 2rem;

&Holder {
padding: 0;
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Header = (): React.ReactElement => {
const ogImage = `${siteConfig.url}/img/og-image.png`;

return (
<header className={clsx("hero", styles.heroBanner)}>
<header className={clsx(styles.heroBanner)}>
<Head>
<title>{siteConfig.title}</title>
<meta property="og:image" content={ogImage} />
Expand Down Expand Up @@ -43,7 +43,7 @@ const Header = (): React.ReactElement => {
<h1 className={clsx(styles.heroTitle)}>{siteConfig.tagline}</h1>
<p className={"margin-bottom--lg"}>
JavaScript library for internalization (i18n) of JavaScript projects. Supports React (including RSC and
React Native), Vue, Node.js, and Angular.
React Native), Vue, Node.js, and more.
</p>

<div className={clsx(styles.heroButtons, "name", "margin-vert--md")}>
Expand Down
7 changes: 2 additions & 5 deletions website/src/components/PartnerBanner.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.Partner {
margin-bottom: 86px;
margin-top: 3rem;
margin-bottom: 6rem;
position: relative;
z-index: 1000;

Expand All @@ -8,7 +9,3 @@
color: var(--p-color);
}
}

.muted {
color: grey;
}
11 changes: 5 additions & 6 deletions website/src/components/PartnerBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
import React from "react";
import clsx from "clsx";

import styles from "./PartnerBanner.module.scss";

const PartnerBanner = (): React.ReactElement => {
return (
<section className={clsx(styles.Partner, "col col--6 col--offset-3")}>
<section className={styles.Partner}>
<div className="container text--center">
<a
href={"https://crowdin.com/?utm_source=lingui.dev&utm_medium=referral&utm_campaign=lingui.dev"}
target={"_blank"}
rel="noreferrer"
>
<p className={"text--center text--uppercase"}>Presented By</p>
<p className="text--center text--uppercase">Presented By</p>
<div>
<img
className={clsx("margin-bottom--sm")}
className="margin-bottom--sm"
alt="Crowdin"
src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cDark.png#gh-light-mode-only"
width="auto"
height="32px"
/>
<img
className={clsx("margin-bottom--sm")}
className="margin-bottom--sm"
alt="Crowdin"
src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cWhite.png#gh-dark-mode-only"
width="auto"
height="32px"
/>
<p className={clsx(styles.muted)}>Agile localization for tech companies</p>
<p className="text--secondary">Agile localization for tech companies</p>
</div>
</a>
</div>
Expand Down
9 changes: 2 additions & 7 deletions website/src/components/Users.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
padding: 0;

&Holder {
padding-top: 4rem;
padding-bottom: 4rem;
padding-top: 2rem;
padding-bottom: 2rem;
border-radius: var(--lingui-card-raduis);
background: var(--lingui-gray-bg);

Expand Down Expand Up @@ -38,11 +38,6 @@
transition: 0.2s;
}

.user,
.muted {
color: grey;
}

.user:hover {
text-decoration: none;

Expand Down
10 changes: 8 additions & 2 deletions website/src/components/Users.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,13 @@ const Users = (): React.ReactElement => {
<h2>Loved by hundreds of teams, including:</h2>
<div className={clsx("row", styles.usersList)}>
{USERS.map((user, idx) => (
<a href={user.link} key={idx} target="_blank" rel="noreferrer" className={styles.user}>
<a
href={user.link}
key={idx}
target="_blank"
rel="noreferrer"
className={clsx(styles.user, "text--secondary")}
>
<img
className={clsx(styles.logo, "margin-bottom--sm")}
alt={user.name}
Expand All @@ -91,7 +97,7 @@ const Users = (): React.ReactElement => {
))}
</div>

<p className={styles.muted}>And many more...</p>
<p className="text--secondary">And many more...</p>
</div>
</div>
</section>
Expand Down
Loading

0 comments on commit 9699ade

Please sign in to comment.