From 79269ae291b9a81b2239c71836f03f68ee277808 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Sat, 1 Feb 2025 23:42:08 +0800 Subject: [PATCH] fix: katex maths expressions in cloud pricing page --- docs/logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- .../logto-cloud/billing-and-pricing.mdx | 6 ++- src/scss/custom.scss | 8 ++- src/theme/Layout/index.tsx | 51 +++++++++++++++++++ src/theme/Layout/styles.module.css | 21 ++++++++ 10 files changed, 114 insertions(+), 8 deletions(-) create mode 100644 src/theme/Layout/index.tsx create mode 100644 src/theme/Layout/styles.module.css diff --git a/docs/logto-cloud/billing-and-pricing.mdx b/docs/logto-cloud/billing-and-pricing.mdx index df40d06fd4b..c5762659596 100644 --- a/docs/logto-cloud/billing-and-pricing.mdx +++ b/docs/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ In Logto, our [Pro plan](https://logto.io/pricing) is fully self-serve, designed The basic structure looks like this: ```math -\text{Your next bill} = \$16\text{ (base price)} + \text{add-on cost (unbilled usage)} + \text{add-on cost (next cycle charge)} +\begin{align*} +\text{Your next bill} &= \$16 \text{(base price)} \\ +&+ \text{add-on cost (unbilled usage)} \\ +&+ \text{add-on cost (next cycle charge)} +\end{align*} ``` In the console, you'll find a "Your next bill" section in the tenant setting section, where you can monitor and control your upcoming charges. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/de/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index b3be74c327f..a2cbe144dbf 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/de/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ In Logto ist unser [Pro-Plan](https://logto.io/pricing) vollständig selbstbedie Die Grundstruktur sieht folgendermaßen aus: ```math -\text{Deine nächste Rechnung} = \$16\text{ (Grundpreis)} + \text{Zusatzkosten (nicht abgerechnete Nutzung)} + \text{Zusatzkosten (nächste Zyklusgebühr)} +\begin{align*} +\text{Deine nächste Rechnung} &= \$16 \text{(Grundpreis)} \\ +&+ \text{Zusatzkosten (nicht abgerechnete Nutzung)} \\ +&+ \text{Zusatzkosten (nächste Zyklusgebühren)} +\end{align*} ``` In der Konsole findest du im Abschnitt "Deine nächste Rechnung" in den Mandanteneinstellungen, wo du deine bevorstehenden Gebühren überwachen und kontrollieren kannst. diff --git a/i18n/es/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/es/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index 2ce834be079..9e42073bb4e 100644 --- a/i18n/es/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/es/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ En Logto, nuestro [plan Pro](https://logto.io/pricing) es completamente autoserv La estructura básica es la siguiente: ```math -\text{Tu próxima factura} = \$16\text{ (precio base)} + \text{costo adicional (uso no facturado)} + \text{costo adicional (cargo del próximo ciclo)} +\begin{align*} +\text{Tu próxima factura} &= \$16 \text{(precio base)} \\ +&+ \text{costo adicional (uso no facturado)} \\ +&+ \text{costo adicional (cargo del próximo ciclo)} +\end{align*} ``` En la consola, encontrarás una sección "Tu próxima factura" en la configuración del inquilino, donde puedes monitorear y controlar tus próximos cargos. diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/fr/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index 16e48aa172f..e542160ed07 100644 --- a/i18n/fr/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/fr/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ Dans Logto, notre [plan Pro](https://logto.io/pricing) est entièrement en libre La structure de base ressemble à ceci : ```math -\text{Votre prochaine facture} = \$16\text{ (prix de base)} + \text{coût supplémentaire (utilisation non facturée)} + \text{coût supplémentaire (facturation du prochain cycle)} +\begin{align*} +\text{Votre prochaine facture} &= \$16\text{ (prix de base)} \\ +&+ \text{coût supplémentaire (utilisation non facturée)} \\ +&+ \text{coût supplémentaire (facturation du prochain cycle)} +\end{align*} ``` Dans la console, vous trouverez une section "Votre prochaine facture" dans la section des paramètres du locataire, où vous pouvez surveiller et contrôler vos frais à venir. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/ja/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index 6e5eb028c4f..47ee7b0a541 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/ja/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ Logto では、[Pro プラン](https://logto.io/pricing) は完全にセルフ 基本的な構造は次のようになります： ```math -\text{次の請求書} = \$16\text{ (基本価格)} + \text{追加コスト (未請求の使用量)} + \text{追加コスト (次のサイクルの請求)} +\begin{align*} +\text{次の請求書} &= \$16 \text{(基本価格)} \\ +&+ \text{追加コスト (未請求の使用量)} \\ +&+ \text{追加コスト (次のサイクルの請求)} +\end{align*} ``` コンソールでは、テナント設定セクションに「次の請求書」セクションがあり、今後の請求を監視および管理できます。 diff --git a/i18n/pt-BR/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/pt-BR/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index 16c95bd145f..f2498232f6b 100644 --- a/i18n/pt-BR/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/pt-BR/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ No Logto, nosso [plano Pro](https://logto.io/pricing) é totalmente self-service A estrutura básica é assim: ```math -\text{Sua próxima fatura} = \$16\text{ (preço base)} + \text{custo adicional (uso não faturado)} + \text{custo adicional (cobrança do próximo ciclo)} +\begin{align*} +\text{Sua próxima fatura} &= \$16 \text{(preço base)} \\ +&+ \text{custo adicional (uso não faturado)} \\ +&+ \text{custo adicional (cobrança do próximo ciclo)} +\end{align*} ``` No console, você encontrará uma seção "Sua próxima fatura" na seção de configurações do locatário, onde pode monitorar e controlar suas cobranças futuras. diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/i18n/zh-CN/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx index e64905670f8..0e12bba1d46 100644 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx +++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx @@ -13,7 +13,11 @@ sidebar_position: 5 基本结构如下所示： ```math -\text{你的下一个账单} = \$16\text{（基础价格）} + \text{附加费用（未计费使用）} + \text{附加费用（下一个周期费用）} +\begin{align*} +\text{你的下一个账单} &= \$16 \text{（基础价格）} \\ +&+ \text{附加费用（未计费使用）} \\ +&+ \text{附加费用（下一个周期费用）} +\end{align*} ``` 在控制台中，你会在租户设置部分找到“你的下一个账单”部分，可以在这里监控和控制即将到来的费用。 diff --git a/src/scss/custom.scss b/src/scss/custom.scss index 7b546423bb9..aaef3889717 100644 --- a/src/scss/custom.scss +++ b/src/scss/custom.scss @@ -853,4 +853,10 @@ details { border-block: 1px solid var(--logto-line-divider); border-radius: 0; padding: 16px 0; -} \ No newline at end of file +} + +.katex-display { + padding: 1em 0; + margin: 0; + overflow-x: auto; +} diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx new file mode 100644 index 00000000000..eb87a4abd9e --- /dev/null +++ b/src/theme/Layout/index.tsx @@ -0,0 +1,51 @@ +import ErrorBoundary from '@docusaurus/ErrorBoundary'; +import { PageMetadata, SkipToContentFallbackId, ThemeClassNames } from '@docusaurus/theme-common'; +import { useKeyboardNavigation } from '@docusaurus/theme-common/internal'; +import AnnouncementBar from '@theme/AnnouncementBar'; +import ErrorPageContent from '@theme/ErrorPageContent'; +import Footer from '@theme/Footer'; +import type { Props } from '@theme/Layout'; +import LayoutProvider from '@theme/Layout/Provider'; +import Navbar from '@theme/Navbar'; +import SkipToContent from '@theme/SkipToContent'; +import clsx from 'clsx'; +import { type ReactNode } from 'react'; +import 'katex/dist/katex.min.css'; + +import styles from './styles.module.css'; + +export default function Layout(props: Props): ReactNode { + const { + children, + noFooter, + wrapperClassName, + // Not really layout-related, but kept for convenience/retro-compatibility + title, + description, + } = props; + + useKeyboardNavigation(); + + return ( + + + + + + + + + +
+ }> + {children} + +
+ + {!noFooter &&