feat: external resource card

refs acid-info/logos-brand-guidelines#13

refs acid-info/logos-brand-guidelines#14

packages/logos-docusaurus-theme/src/client/components/KeepRatio/KeepRatio.module.scss

@@ -0,0 +1,38 @@
+.root {
+  position: relative;
+  display: inline-block;
+  font-size: 0 !important;
+
+  &.fullWidth {
+    width: 100%;
+    height: auto;
+  }
+
+  &.fullHeight {
+    width: auto;
+    height: 100%;
+  }
+
+  .content {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  &:not(.keep) {
+    .root {
+      height: auto;
+      width: auto;
+    }
+
+    .content {
+      position: relative;
+      top: unset;
+      left: unset;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/components/KeepRatio/KeepRatio.tsx

@@ -0,0 +1,77 @@
+import clsx from 'clsx'
+import React from 'react'
+import styles from './KeepRatio.module.scss'
+
+export const KeepRatio: React.FC<
+  React.PropsWithChildren<{
+    width: number
+    height: number
+    fullWidth?: boolean
+    fullHeight?: boolean
+    rootProps?: React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >
+    contentProps?: React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >
+
+    keep?: boolean
+    containerWidth?: number | string
+    containerHeight?: number | string
+  }>
+> = ({
+  children,
+  width,
+  height,
+  fullHeight: _fullHeight = false,
+  fullWidth: _fullWidth = true,
+  rootProps,
+  contentProps,
+  containerWidth,
+  containerHeight,
+  keep = true,
+}) => {
+  const fullWidth = !_fullHeight && _fullWidth
+  const fullHeight = !fullWidth
+  const ratio = (fullHeight ? height / width : width / height) * 100
+
+  return (
+    <div
+      {...(rootProps ?? {})}
+      className={clsx(
+        styles.root,
+        fullWidth && styles.fullWidth,
+        fullHeight && styles.fullHeight,
+        keep && styles.keep,
+        rootProps?.className,
+      )}
+    >
+      <div
+        {...(contentProps ?? {})}
+        className={clsx(styles.content, contentProps?.className)}
+      >
+        {children}
+      </div>
+      {keep && (
+        <svg
+          style={{
+            pointerEvents: 'none',
+            height: fullHeight
+              ? '100%'
+              : containerHeight
+              ? `calc(${height} / ${width} * ${containerWidth})`
+              : 'auto',
+            width: fullWidth
+              ? '100%'
+              : containerHeight
+              ? `calc(${width} / ${height} * ${containerHeight})`
+              : 'auto',
+          }}
+          viewBox={`0 0 ${fullWidth ? ratio : 100} ${fullHeight ? ratio : 100}`}
+        ></svg>
+      )}
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/KeepRatio/index.ts

@@ -0,0 +1 @@
+export * from './KeepRatio'

packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.scss

@@ -0,0 +1,90 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-erc {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  text-decoration: none !important;
+  min-height: 144px;
+}
+
+.mdx-erc__icon {
+  padding: 16px 16px 16px 8px;
+}
+
+.mdx-erc__inner {
+  flex-grow: 1;
+  padding: 16px;
+}
+
+.mdx-erc:hover {
+  .mdx-erc__title {
+    text-decoration: underline !important;
+  }
+}
+
+.mdx-erc__logo {
+  width: 32px !important;
+  height: 32px !important;
+
+  svg {
+    width: 32px !important;
+    height: 32px !important;
+  }
+}
+
+.mdx-erc__title {
+  margin-top: 32px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  max-height: calc(2 * var(--lsd-body1-lineHeight));
+}
+
+.mdx-erc__description {
+  margin-top: 8px;
+}
+
+.mdx-erc--with-preview {
+  display: flex;
+  flex-direction: column;
+
+  .mdx-erc__preview-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .mdx-erc__icon {
+    display: none;
+  }
+
+  .mdx-erc__inner {
+    padding: 16px;
+    display: grid;
+    gap: 0 16px;
+    grid-template-columns: 32px auto;
+    grid-template-rows: auto auto;
+  }
+
+  .mdx-erc__logo {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    align-self: center;
+  }
+
+  .mdx-erc__title {
+    margin-top: 0;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    max-height: calc(1 * var(--lsd-body1-lineHeight));
+  }
+
+  .mdx-erc__description {
+    margin-top: 4px;
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.tsx

@@ -0,0 +1,83 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React from 'react'
+import { IconExternalLink } from '../../Icon'
+import './ExternalResourceCard.scss'
+import { KeepRatio } from '../../KeepRatio'
+
+export type ExternalResourceCardProps = Omit<
+  React.HTMLProps<HTMLAnchorElement>,
+  'title'
+> & {
+  logoSrc?: string
+  logoSrcDark?: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  previewSrc?: string
+  previewSrcDark?: string
+}
+
+export const ExternalResourceCard: React.FC<ExternalResourceCardProps> = ({
+  title,
+  logoSrc,
+  logoSrcDark,
+  description,
+  previewSrc,
+  previewSrcDark,
+  ...props
+}) => {
+  const withPreview = !!(previewSrc || previewSrcDark)
+
+  return (
+    <a
+      target="_blank"
+      {...props}
+      className={clsx(
+        props.className,
+        'mdx-erc',
+        withPreview && 'mdx-erc--with-preview',
+      )}
+    >
+      {withPreview && (
+        <KeepRatio width={16} height={9} fullWidth>
+          <ThemedImage
+            sources={{
+              dark: previewSrcDark ?? previewSrc ?? '',
+              light: previewSrc ?? previewSrcDark ?? '',
+            }}
+            alt={(typeof title === 'string' && title) || 'preview image'}
+            className="mdx-erc__preview-image"
+          />
+        </KeepRatio>
+      )}
+      <div className="mdx-erc__inner">
+        {(logoSrc || logoSrcDark) && (
+          <ThemedImage
+            sources={{
+              dark: logoSrcDark ?? logoSrc ?? '',
+              light: logoSrc ?? logoSrcDark ?? '',
+            }}
+            alt={(typeof title === 'string' && title) || 'logo'}
+            className="mdx-erc__logo"
+          />
+        )}
+        <Typography variant="body1" component="div" className="mdx-erc__title">
+          {title}
+        </Typography>
+        {description && (
+          <Typography
+            variant="body1"
+            component="div"
+            className="mdx-erc__description"
+          >
+            {description}
+          </Typography>
+        )}
+      </div>
+      <div className="mdx-erc__icon">
+        <IconExternalLink className="mdx-erc__external-link" />
+      </div>
+    </a>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/index.ts

@@ -0,0 +1 @@
+export * from './ExternalResourceCard'

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -3,6 +3,7 @@ export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'
 export * from './DocMetadata'
+export * from './ExternalResourceCard'
 export * from './FeatureList'
 export * from './Grid'
 export * from './Hero'