chore: format

docs/welcome.mdx

@@ -21,6 +21,7 @@ import * as welcomeContent from "@site/src/pages/_assets/welcome-content";
 
 ## Need Help?
 
-If you need assistance with implementing Ory in your application or have any questions, please check out our [community forum](https://github.com/ory/web/discussions) or [join our Slack channel](https://slack.ory.sh/).
+If you need assistance with implementing Ory in your application or have any questions, please check out our
+[community forum](https://github.com/ory/web/discussions) or [join our Slack channel](https://slack.ory.sh/).
 
 For enterprise support, please [contact Ory](https://www.ory.sh/contact/).

src/components/Welcome/welcome.module.css

@@ -1,41 +1,41 @@
 /* Section styles */
 section {
-    display: block;
-    margin-bottom: 3rem;
-  }
+  display: block;
+  margin-bottom: 3rem;
+}
 
-  /* Section Heading */
-  .sectionHeading {
-    width: 100%;
-    margin-bottom: 1.5rem;
-    margin-top: 3rem;
-  }
+/* Section Heading */
+.sectionHeading {
+  width: 100%;
+  margin-bottom: 1.5rem;
+  margin-top: 3rem;
+}
 
-  .sectionTitle {
-    font-size: var(--ifm-h3-font-size);
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-    color: var(--ifm-color-primary);
-  }
+.sectionTitle {
+  font-size: var(--ifm-h3-font-size);
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  color: var(--ifm-color-primary);
+}
 
-  .sectionDescription {
-    font-size: var(--ifm-font-size-base);
-    margin-bottom: 1rem;
-    color: var(--ifm-color-emphasis-700);
-    max-width: 100%;
-  }
+.sectionDescription {
+  font-size: var(--ifm-font-size-base);
+  margin-bottom: 1rem;
+  color: var(--ifm-color-emphasis-700);
+  max-width: 100%;
+}
 
-  /* Welcome intro text */
-  .welcomeIntro {
-    font-size: 1.1rem;
-    line-height: 1.6;
-    margin-bottom: 2rem;
-    color: var(--ifm-color-emphasis-800);
-  }
+/* Welcome intro text */
+.welcomeIntro {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  color: var(--ifm-color-emphasis-800);
+}
 
-  /* Help section */
-  .helpSection {
-    margin-top: 4rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--ifm-color-emphasis-200);
-  }
+/* Help section */
+.helpSection {
+  margin-top: 4rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}

src/components/Welcome/welcome.tsx

@@ -1,39 +1,39 @@
-import React from "react";
-import { Card, CardGrid, CardItem } from "../WelcomeCard/welcome-card";
-import styles from "./welcome.module.css";
+import React from "react"
+import { Card, CardGrid, CardItem } from "../WelcomeCard/welcome-card"
+import styles from "./welcome.module.css"
 
 // Interface for the section props
 export interface WelcomePageSectionProps {
-    id: string;
-    title?: string;
-    description?: string;
-    cards: Array<CardItem>;
+  id: string
+  title?: string
+  description?: string
+  cards: Array<CardItem>
 }
 
 // Section Component
 const WelcomePageSection: React.FC<WelcomePageSectionProps> = ({
-    id,
-    title,
-    description,
-    cards,
+  id,
+  title,
+  description,
+  cards,
 }) => {
-    return (
-        <section id={id}>
-            {(title || description) && (
-                <div className={styles.sectionHeading}>
-                    {title && <h2 className={styles.sectionTitle}>{title}</h2>}
-                    {description && (
-                        <p className={styles.sectionDescription}>{description}</p>
-                    )}
-                </div>
-            )}
-            <CardGrid>
-                {cards.map((card, index) => (
-                    <Card key={index} {...card} />
-                ))}
-            </CardGrid>
-        </section>
-    );
-};
+  return (
+    <section id={id}>
+      {(title || description) && (
+        <div className={styles.sectionHeading}>
+          {title && <h2 className={styles.sectionTitle}>{title}</h2>}
+          {description && (
+            <p className={styles.sectionDescription}>{description}</p>
+          )}
+        </div>
+      )}
+      <CardGrid>
+        {cards.map((card, index) => (
+          <Card key={index} {...card} />
+        ))}
+      </CardGrid>
+    </section>
+  )
+}
 
-export default WelcomePageSection;
+export default WelcomePageSection

src/components/WelcomeCard/welcome-card.module.css

@@ -1,122 +1,132 @@
 /* Card Grid - Grid layout */
 .cardGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 1.5rem;
-    flex: 1;
-  }
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+  flex: 1;
+}
 
-  /* Card Link (wrapper) */
-  .cardLink {
-    text-decoration: none !important;
-    color: inherit;
-    transition: transform 0.2s ease;
-    display: block;
-    height: 100%;
-  }
+/* Card Link (wrapper) */
+.cardLink {
+  text-decoration: none !important;
+  color: inherit;
+  transition: transform 0.2s ease;
+  display: block;
+  height: 100%;
+}
 
-  .cardLink:hover {
-    transform: translateY(-4px);
-  }
+.cardLink:hover {
+  transform: translateY(-4px);
+}
 
-  /* Base Card Styles */
-  .card {
-    height: 200px; /* Fixed height for all cards */
-    position: relative;
-    transition: all 0.2s ease;
-    background-color: var(--ifm-pre-background);
-    border-radius: 8px;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--ifm-color-emphasis-200);
-    width: 100%;
-    overflow: hidden;
-  }
+/* Base Card Styles */
+.card {
+  height: 200px; /* Fixed height for all cards */
+  position: relative;
+  transition: all 0.2s ease;
+  background-color: var(--ifm-pre-background);
+  border-radius: 8px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  width: 100%;
+  overflow: hidden;
+}
 
-  .card:hover {
-    border-color: var(--ifm-color-primary);
-    transform: translateY(-4px);
-  }
+.card:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-4px);
+}
 
-  /* Icon Container */
-  .iconContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(6, 182, 212, 0.1); /* Light cyan background for light mode */
-    border-radius: 8px;
-    padding: 0.5rem;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 1rem;
-  }
+/* Icon Container */
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(
+    6,
+    182,
+    212,
+    0.1
+  ); /* Light cyan background for light mode */
+  border-radius: 8px;
+  padding: 0.5rem;
+  width: 36px;
+  height: 36px;
+  margin-bottom: 1rem;
+}
 
-  /* Icon */
-  .icon {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    color: #06b6d4; /* Cyan color for icons in light mode */
-  }
+/* Icon */
+.icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  color: #06b6d4; /* Cyan color for icons in light mode */
+}
 
-  /* Card Content */
-  .cardContent {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
+/* Card Content */
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
 
-  /* Card Title */
-  .cardTitle {
-    margin-bottom: 0.25rem;
-    font-weight: 600;
-    font-size: 1rem;
-  }
+/* Card Title */
+.cardTitle {
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+  font-size: 1rem;
+}
 
-  /* Card Description */
-  .cardDescription {
-    margin-bottom: 0;
-    color: var(--ifm-color-emphasis-700);
-    line-height: 1.4;
-    font-size: 0.875rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+/* Card Description */
+.cardDescription {
+  margin-bottom: 0;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.4;
+  font-size: 0.875rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 
-  /* Dark mode styling for cards */
-  :global([data-theme="dark"]) .card {
-    background-color: #1a1a2e;
-    border-color: #2a2a4a;
-  }
+/* Dark mode styling for cards */
+:global([data-theme="dark"]) .card {
+  background-color: #1a1a2e;
+  border-color: #2a2a4a;
+}
 
-  :global([data-theme="dark"]) .iconContainer {
-    background-color: rgba(49, 46, 129, 0.5); /* Indigo background for dark mode */
-  }
+:global([data-theme="dark"]) .iconContainer {
+  background-color: rgba(
+    49,
+    46,
+    129,
+    0.5
+  ); /* Indigo background for dark mode */
+}
 
-  /* Better visibility for SVG icons in dark mode */
-  :global([data-theme="dark"]) .iconContainer svg {
-    stroke-width: 2.5;
-    filter: brightness(1.3);
-    color: #7986cb;
-  }
+/* Better visibility for SVG icons in dark mode */
+:global([data-theme="dark"]) .iconContainer svg {
+  stroke-width: 2.5;
+  filter: brightness(1.3);
+  color: #7986cb;
+}
 
-  /* Mobile view adjustments for cards */
-  @media screen and (max-width: 768px) {
-    .cardGrid {
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 1rem;
-      width: 100%;
-    }
+/* Mobile view adjustments for cards */
+@media screen and (max-width: 768px) {
+  .cardGrid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+    width: 100%;
+  }
 
-    .card {
-      height: 180px;
-      padding: 1.25rem;
-    }
+  .card {
+    height: 180px;
+    padding: 1.25rem;
+  }
 
-    .cardDescription {
-      -webkit-line-clamp: 4;
-    }
+  .cardDescription {
+    -webkit-line-clamp: 4;
   }
+}

src/components/WelcomeCard/welcome-card.tsx

@@ -1,75 +1,75 @@
-import React from "react";
-import Link from "@docusaurus/Link";
-import clsx from "clsx";
-import styles from "./welcome-card.module.css";
+import React from "react"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+import styles from "./welcome-card.module.css"
 
 // Using the existing card structure to maintain system design
 export interface CardItem {
-    title: string;
-    description?: string;
-    language?: string;
-    languageLogoAlt?: string;
-    author?: string;
-    tested?: boolean;
-    repo?: string;
-    docs?: string;
-    isLarge?: boolean;
+  title: string
+  description?: string
+  language?: string
+  languageLogoAlt?: string
+  author?: string
+  tested?: boolean
+  repo?: string
+  docs?: string
+  isLarge?: boolean
 }
 
 // Card Component that works with the existing structure
 export const Card: React.FC<CardItem> = ({
-    title,
-    description,
-    language,
-    languageLogoAlt,
-    author,
-    tested,
-    repo,
-    docs,
-    isLarge,
+  title,
+  description,
+  language,
+  languageLogoAlt,
+  author,
+  tested,
+  repo,
+  docs,
+  isLarge,
 }) => {
-    // Determine which link to use based on the order of priority
-    const link = docs || repo || "";
+  // Determine which link to use based on the order of priority
+  const link = docs || repo || ""
 
-    // Generate language logo path based on language prop
-    const logoPath = language ? `/docs/img/examples/${language}.svg` : null
+  // Generate language logo path based on language prop
+  const logoPath = language ? `/docs/img/examples/${language}.svg` : null
 
-    const cardContent = (
-        <div className={clsx(styles.card, isLarge && styles.cardLarge)}>
-            <div className={styles.iconContainer}>
-                {logoPath && (
-                    <img
-                        className={styles.icon}
-                        src={logoPath}
-                        alt={languageLogoAlt || `${language} icon`}
-                    />
-                )}
-            </div>
-            <div className={styles.cardContent}>
-                <h3 className={styles.cardTitle}>{title}</h3>
-                {description && (
-                    <p className={styles.cardDescription}>{description}</p>
-                )}
-            </div>
-        </div>
-    );
+  const cardContent = (
+    <div className={clsx(styles.card, isLarge && styles.cardLarge)}>
+      <div className={styles.iconContainer}>
+        {logoPath && (
+          <img
+            className={styles.icon}
+            src={logoPath}
+            alt={languageLogoAlt || `${language} icon`}
+          />
+        )}
+      </div>
+      <div className={styles.cardContent}>
+        <h3 className={styles.cardTitle}>{title}</h3>
+        {description && <p className={styles.cardDescription}>{description}</p>}
+      </div>
+    </div>
+  )
 
-    // Every card should be a link
-    if (link) {
-        return (
-            <Link to={link} className={styles.cardLink}>
-                {cardContent}
-            </Link>
-        );
-    }
+  // Every card should be a link
+  if (link) {
+    return (
+      <Link to={link} className={styles.cardLink}>
+        {cardContent}
+      </Link>
+    )
+  }
 
-    // Fallback for cases where no link is provided (should be rare)
-    return cardContent;
-};
+  // Fallback for cases where no link is provided (should be rare)
+  return cardContent
+}
 
 // Card Grid Component
-export const CardGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    return <div className={styles.cardGrid}>{children}</div>;
-};
+export const CardGrid: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return <div className={styles.cardGrid}>{children}</div>
+}
 
-export default { Card, CardGrid };
+export default { Card, CardGrid }