From 62acd973c437754e81b28d38730888025ef0b069 Mon Sep 17 00:00:00 2001 From: Adrian Bienias Date: Fri, 7 Jul 2023 16:27:30 +0200 Subject: [PATCH] feat: Swizzle DocCard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Haven't found any other way to remove 📄️ icon from CardLink. It also enabled removing description directly without CSS hack. --- .../01-podstawy-gita/index.mdx | 2 +- .../index.mdx | 2 +- .../index.mdx | 2 +- .../07-pakiety/01-webpack-4/index.mdx | 2 +- .../02-podstawy-reduxa/index.mdx | 2 +- .../01-implementacja-autentykacji/index.mdx | 2 +- .../02-mini-projekt-z-next-js/index.mdx | 2 +- src/css/custom.css | 8 -- src/theme/DocCard/index.tsx | 81 +++++++++++++++++++ src/theme/DocCard/styles.module.css | 27 +++++++ 10 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 src/theme/DocCard/index.tsx create mode 100644 src/theme/DocCard/styles.module.css diff --git a/docs/01-podstawy/06-kontrola-wersji/01-podstawy-gita/index.mdx b/docs/01-podstawy/06-kontrola-wersji/01-podstawy-gita/index.mdx index d62fb22a8..429386ed1 100644 --- a/docs/01-podstawy/06-kontrola-wersji/01-podstawy-gita/index.mdx +++ b/docs/01-podstawy/06-kontrola-wersji/01-podstawy-gita/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Podstawy Gita - + diff --git a/docs/02-ux-ui/01-projektowanie-interfejsu-i-doswiadczen-uzytkownikow/index.mdx b/docs/02-ux-ui/01-projektowanie-interfejsu-i-doswiadczen-uzytkownikow/index.mdx index 4357d63e9..047ebd0f9 100644 --- a/docs/02-ux-ui/01-projektowanie-interfejsu-i-doswiadczen-uzytkownikow/index.mdx +++ b/docs/02-ux-ui/01-projektowanie-interfejsu-i-doswiadczen-uzytkownikow/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Projektowanie interfejsu i doświadczeń użytkowników - + diff --git a/docs/02-ux-ui/02-praktyczne-szkolenie-projektowania-ux-ui/index.mdx b/docs/02-ux-ui/02-praktyczne-szkolenie-projektowania-ux-ui/index.mdx index 249d6e218..b4a96c1a8 100644 --- a/docs/02-ux-ui/02-praktyczne-szkolenie-projektowania-ux-ui/index.mdx +++ b/docs/02-ux-ui/02-praktyczne-szkolenie-projektowania-ux-ui/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Praktyczne szkolenie projektowania UX/UI - + diff --git a/docs/03-frontend/07-pakiety/01-webpack-4/index.mdx b/docs/03-frontend/07-pakiety/01-webpack-4/index.mdx index 203251339..c337f178d 100644 --- a/docs/03-frontend/07-pakiety/01-webpack-4/index.mdx +++ b/docs/03-frontend/07-pakiety/01-webpack-4/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Webpack 4 - + diff --git a/docs/03-frontend/08-zarzadzanie-stanem/02-podstawy-reduxa/index.mdx b/docs/03-frontend/08-zarzadzanie-stanem/02-podstawy-reduxa/index.mdx index 3ffc06904..18c49da16 100644 --- a/docs/03-frontend/08-zarzadzanie-stanem/02-podstawy-reduxa/index.mdx +++ b/docs/03-frontend/08-zarzadzanie-stanem/02-podstawy-reduxa/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Podstawy Reduxa - + diff --git a/docs/05-fullstack/01-autentykacja-i-autoryzacja/01-implementacja-autentykacji/index.mdx b/docs/05-fullstack/01-autentykacja-i-autoryzacja/01-implementacja-autentykacji/index.mdx index c062b2c40..d9f5e1d08 100644 --- a/docs/05-fullstack/01-autentykacja-i-autoryzacja/01-implementacja-autentykacji/index.mdx +++ b/docs/05-fullstack/01-autentykacja-i-autoryzacja/01-implementacja-autentykacji/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Implementacja autentykacji - + diff --git a/docs/05-fullstack/06-next-js/02-mini-projekt-z-next-js/index.mdx b/docs/05-fullstack/06-next-js/02-mini-projekt-z-next-js/index.mdx index 0797db0c1..99b289f5a 100644 --- a/docs/05-fullstack/06-next-js/02-mini-projekt-z-next-js/index.mdx +++ b/docs/05-fullstack/06-next-js/02-mini-projekt-z-next-js/index.mdx @@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList" # Mini projekt z Next.js - + diff --git a/src/css/custom.css b/src/css/custom.css index ee7b1133b..989203f07 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -104,11 +104,3 @@ .video iframe { @apply aspect-video w-full; } - -.DocCardList--no-description .card h2 { - @apply mb-0; -} - -.DocCardList--no-description .card p { - @apply hidden; -} diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx new file mode 100644 index 000000000..79d835048 --- /dev/null +++ b/src/theme/DocCard/index.tsx @@ -0,0 +1,81 @@ +import React from "react" +import clsx from "clsx" +import Link from "@docusaurus/Link" +import { findFirstCategoryLink } 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 ( + + {children} + + ) +} +function CardLayout({ href, icon, title, description }) { + return ( + +

+ {icon} {title} +

+ {description && ( +

+ {description} +

+ )} + + ) +} +function CardCategory({ item }) { + const href = findFirstCategoryLink(item) + // Unexpected: categories that don't have a link have been filtered upfront + if (!href) { + return null + } + return ( + + ) +} +function CardLink({ item }) { + const icon = isInternalUrl(item.href) ? "" : "🔗" + return ( + + ) +} +export default function DocCard({ item }) { + switch (item.type) { + case "link": + return + case "category": + return + 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 000000000..4f7ad27f4 --- /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; +}