fix: katex maths expressions in cloud pricing page

logto-io · Feb 1, 2025 · 79269ae · 79269ae
1 parent a9e7b58
commit 79269ae
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/...t-BR/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/...t-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/...h-CN/docusaurus-plugin-content-docs/current/logto-cloud/billing-and-pricing.mdx b/...h-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
@@ -853,4 +853,10 @@ details {
   border-block: 1px solid var(--logto-line-divider);
   border-radius: 0;
   padding: 16px 0;
-}
+}
+
+.katex-display {
+  padding: 1em 0;
+  margin: 0;
+  overflow-x: auto;
+}
diff --git a/src/theme/Layout/index.tsx 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 (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(ThemeClassNames.wrapper.main, styles.mainWrapper, wrapperClassName)}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer />}
+    </LayoutProvider>
+  );
+}
diff --git a/src/theme/Layout/styles.module.css b/src/theme/Layout/styles.module.css
@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}