This is an automated email from the ASF dual-hosted git repository.
fanjia pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-website.git
The following commit(s) were added to refs/heads/main by this push:
new b92d35cd391 Add doc card (#334)
b92d35cd391 is described below
commit b92d35cd3915d62ea0db4a75a1dc21eb145544d8
Author: Jast <[email protected]>
AuthorDate: Fri Sep 13 14:11:42 2024 +0800
Add doc card (#334)
---
src/theme/DocCard/index.js | 121 ++++++++++++++++++++++++++++++++++++
src/theme/DocCard/styles.module.css | 27 ++++++++
2 files changed, 148 insertions(+)
diff --git a/src/theme/DocCard/index.js b/src/theme/DocCard/index.js
new file mode 100644
index 00000000000..982ff35f63f
--- /dev/null
+++ b/src/theme/DocCard/index.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {
+ findFirstCategoryLink,
+ useDocById,
+} from '@docusaurus/theme-common/internal';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+function CardContainer({href, children}) {
+ return (
+ <Link
+ href={href}
+ className={clsx('card padding--lg', styles.cardContainer)}>
+ {children}
+ </Link>
+ );
+}
+function CardLayout({href, icon, title, description}) {
+ return (
+ <CardContainer href={href}>
+ <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+ {icon} {title}
+ </h2>
+ {description && (
+ <p
+ className={clsx('text--truncate', styles.cardDescription)}
+ title={description}>
+ {description}
+ </p>
+ )}
+ </CardContainer>
+ );
+}
+function CardCategory({item}) {
+ const href = findFirstCategoryLink(item);
+ if (!href) {
+ return null;
+ }
+ return (
+ <CardLayout
+ href={href}
+ icon="🗃️"
+ title={item.label}
+ description={
+ item.description ??
+ translate(
+ {
+ message: '{count} items',
+ id: 'theme.docs.DocCard.categoryDescription',
+ description:
+ 'The default description for a category card in the generated
index about how many items this category includes',
+ },
+ {count: item.items.length},
+ )
+ }
+ />
+ );
+}
+function CardLink({ item }) {
+ const isUrl = (str) => {
+ try {
+ new URL(str);
+ return true;
+ } catch {
+ return false;
+ }
+ };
+
+ const isLocalImage = (str) => {
+ return str && str.startsWith('img:');
+ };
+
+ const isSvg = (str) => {
+ return str && (str.endsWith('.svg') || str.includes('.svg?'));
+ };
+
+ const getIconElement = () => {
+ const myEmoji = item?.customProps?.link;
+
+ if (isLocalImage(myEmoji)) {
+ const localImagePath = myEmoji.replace('img:', '');
+ return <img src={localImagePath} alt={item.label} style={{ width:
'17px', height: '17px' }} />;
+ } else if (isSvg(myEmoji)) {
+ return <img
+ src={myEmoji}
+ alt={item.label}
+ style={{width: '18px', height: '18px'}}
+ className="svg-icon"
+ />
+ } else if (isUrl(myEmoji)) {
+ return <img src={myEmoji} alt={item.label} style={{ width: '24px',
height: '24px' }} />;
+ } else {
+ return isInternalUrl(item.href) ? '📄️' : '🔗';
+ }
+ };
+
+ const icon = getIconElement();
+ const doc = useDocById(item.docId ?? undefined);
+
+ return (
+ <CardLayout
+ href={item.href}
+ icon={icon}
+ title={item.label}
+ description={item.description ?? doc?.description}
+ />
+ );
+}
+
+export default function DocCard({item}) {
+ switch (item.type) {
+ case 'link':
+ return <CardLink item={item} />;
+ case 'category':
+ return <CardCategory item={item} />;
+ default:
+ throw new Error(`unknown item type ${JSON.stringify(item)}`);
+ }
+}
diff --git a/src/theme/DocCard/styles.module.css
b/src/theme/DocCard/styles.module.css
new file mode 100644
index 00000000000..4f7ad27f405
--- /dev/null
+++ b/src/theme/DocCard/styles.module.css
@@ -0,0 +1,27 @@
+.cardContainer {
+ --ifm-link-color: var(--ifm-color-emphasis-800);
+ --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+ --ifm-link-hover-decoration: none;
+
+ box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ transition: all var(--ifm-transition-fast) ease;
+ transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+ border-color: var(--ifm-color-primary);
+ box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+ margin-bottom: 0;
+}
+
+.cardTitle {
+ font-size: 1.2rem;
+}
+
+.cardDescription {
+ font-size: 0.8rem;
+}
