From 526fe22cdab189ef379ec0cd94b82678686b8de1 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Mon, 9 Sep 2024 18:42:43 +0200 Subject: [PATCH] refactor: migrate Preact components to Astro --- src/components/AmazonBook.astro | 24 ++++++ src/components/AmazonBook.tsx | 29 ------- src/components/Backlink.astro | 39 +++++++++ src/components/Backlink.tsx | 40 --------- src/components/Banner.astro | 32 +++++++ src/components/Banner.tsx | 38 --------- src/components/Blockquote.astro | 41 +++++++++ src/components/Blockquote.tsx | 50 ----------- src/components/Book.astro | 21 +++++ src/components/Book.tsx | 22 ----- src/components/Bookshelf.astro | 15 ++++ src/components/Bookshelf.tsx | 16 ---- src/components/ColorStack.astro | 15 ++++ src/components/ColorStack.tsx | 16 ---- src/components/ColorSwatch.astro | 80 ++++++++++++++++++ src/components/ColorSwatch.tsx | 83 ------------------- src/components/DisplayBox.astro | 17 ++++ src/components/DisplayBox.tsx | 22 ----- src/components/Divider.astro | 17 ++++ src/components/Divider.tsx | 16 ---- src/components/DoughnutChart.tsx | 1 + src/components/DownloadLink.astro | 22 +++++ src/components/DownloadLink.tsx | 21 ----- src/components/EmailLink.astro | 26 ++++++ src/components/EmailLink.tsx | 30 ------- src/components/Figure.astro | 29 +++++++ src/components/Figure.tsx | 35 -------- src/components/Flag.astro | 43 ++++++++++ src/components/Flag.tsx | 48 ----------- src/components/GalleryDetail.astro | 5 +- src/components/Headline.astro | 21 +++++ src/components/Headline.tsx | 28 ------- src/components/Image.astro | 1 + src/components/JournalList.astro | 4 +- src/components/Legal.astro | 5 +- src/components/LegalDate.astro | 19 +++++ src/components/LegalDate.tsx | 7 -- src/components/Link.astro | 25 ++++++ src/components/Link.tsx | 27 ------ src/components/ListItem.astro | 17 ++++ src/components/ListItem.tsx | 18 ---- src/components/MainNavigation.astro | 3 +- src/components/MarkdownImage.astro | 1 + src/components/MoreLink.astro | 22 +++++ src/components/MoreLink.tsx | 21 ----- src/components/NetflixFlag.astro | 24 ++++++ src/components/NetflixFlag.tsx | 34 -------- src/components/OdyseeVideo.astro | 23 +++++ src/components/OdyseeVideo.tsx | 24 ------ src/components/OrderedList.astro | 20 +++++ src/components/OrderedList.tsx | 25 ------ src/components/PageFooter.astro | 4 +- src/components/PageHeader.astro | 3 +- src/components/PageTitle.astro | 3 +- src/components/Pagination.astro | 1 + src/components/PrimeVideoFlag.astro | 29 +++++++ src/components/PrimeVideoFlag.tsx | 34 -------- src/components/ProductLink.astro | 20 +++++ src/components/ProductLink.tsx | 26 ------ src/components/ProjectContainer.astro | 9 +- src/components/ProjectContent.astro | 5 +- src/components/ProjectImage.astro | 1 + src/components/ProjectIntro.astro | 17 ++++ src/components/ProjectIntro.tsx | 22 ----- src/components/Pullquote.astro | 38 +++++++++ src/components/Pullquote.tsx | 48 ----------- src/components/RSSLink.astro | 4 +- src/components/RssXml.astro | 1 + src/components/Scripts.astro | 1 + src/components/SearchLink.astro | 4 +- src/components/SearchModal.astro | 5 +- src/components/SocialLinks.astro | 48 +++++++++++ src/components/SocialLinks.tsx | 40 --------- src/components/Spotify.astro | 23 +++++ src/components/Spotify.tsx | 25 ------ src/components/Subheadline.astro | 21 +++++ src/components/Subheadline.tsx | 28 ------- src/components/Subnavigation.astro | 3 +- src/components/Subsubheadline.astro | 21 +++++ src/components/Subsubheadline.tsx | 28 ------- src/components/Tag.astro | 36 ++++++++ src/components/Tag.tsx | 44 ---------- src/components/Text.astro | 18 ++++ src/components/Text.tsx | 28 ------- src/components/TextLink.astro | 21 +++++ src/components/TextLink.tsx | 24 ------ src/components/ThemeToggle.astro | 1 + src/components/Title.astro | 21 +++++ src/components/Title.tsx | 28 ------- src/components/Toolbox.astro | 3 +- src/components/UnorderedList.astro | 20 +++++ src/components/UnorderedList.tsx | 25 ------ src/components/UpLink.astro | 25 ++++++ src/components/UpLink.tsx | 20 ----- src/components/Verse.astro | 28 +++++++ src/components/Verse.tsx | 34 -------- src/components/WriteFile.astro | 1 + src/components/index.ts | 38 --------- .../2022/i-counted-everything-i-own.mdx | 2 +- src/data/social-links.json | 28 ------- src/layouts/AboutLayout.astro | 1 + src/layouts/BaseLayout.astro | 1 + src/layouts/GridLayout.astro | 1 + src/layouts/PageLayout.astro | 1 + src/mdx-components.ts | 66 +++++++-------- src/pages/404.astro | 3 +- src/pages/[...slug].astro | 14 +++- src/pages/ai-art.astro | 7 +- src/pages/ai-art/[...slug].astro | 4 +- src/pages/cv.astro | 21 +++-- src/pages/haiku.astro | 9 +- src/pages/haiku/[...slug].astro | 6 +- src/pages/index.astro | 6 +- src/pages/journal.astro | 3 +- src/pages/projects.astro | 5 +- src/pages/projects/[...slug].astro | 9 +- src/pages/rss-ai-art.xml.js | 1 + src/pages/rss-haiku.xml.js | 1 + src/pages/rss-sketchnotes.xml.js | 1 + src/pages/sketchnotes.astro | 11 ++- src/pages/sketchnotes/[...slug].astro | 4 +- src/pages/tag.astro | 9 +- src/pages/tag/[tag].astro | 7 +- src/pages/traditional-colors-of-japan.astro | 12 ++- src/schema/ai-art.ts | 1 + src/schema/haiku.ts | 1 + src/schema/index.ts | 1 + src/schema/journal.ts | 1 + src/schema/projects.ts | 1 + src/schema/sketchnotes.ts | 1 + 130 files changed, 1154 insertions(+), 1274 deletions(-) create mode 100644 src/components/AmazonBook.astro delete mode 100644 src/components/AmazonBook.tsx create mode 100644 src/components/Backlink.astro delete mode 100644 src/components/Backlink.tsx create mode 100644 src/components/Banner.astro delete mode 100644 src/components/Banner.tsx create mode 100644 src/components/Blockquote.astro delete mode 100644 src/components/Blockquote.tsx create mode 100644 src/components/Book.astro delete mode 100644 src/components/Book.tsx create mode 100644 src/components/Bookshelf.astro delete mode 100644 src/components/Bookshelf.tsx create mode 100644 src/components/ColorStack.astro delete mode 100644 src/components/ColorStack.tsx create mode 100644 src/components/ColorSwatch.astro delete mode 100644 src/components/ColorSwatch.tsx create mode 100644 src/components/DisplayBox.astro delete mode 100644 src/components/DisplayBox.tsx create mode 100644 src/components/Divider.astro delete mode 100644 src/components/Divider.tsx create mode 100644 src/components/DownloadLink.astro delete mode 100644 src/components/DownloadLink.tsx create mode 100644 src/components/EmailLink.astro delete mode 100644 src/components/EmailLink.tsx create mode 100644 src/components/Figure.astro delete mode 100644 src/components/Figure.tsx create mode 100644 src/components/Flag.astro delete mode 100644 src/components/Flag.tsx create mode 100644 src/components/Headline.astro delete mode 100644 src/components/Headline.tsx create mode 100644 src/components/LegalDate.astro delete mode 100644 src/components/LegalDate.tsx create mode 100644 src/components/Link.astro delete mode 100644 src/components/Link.tsx create mode 100644 src/components/ListItem.astro delete mode 100644 src/components/ListItem.tsx create mode 100644 src/components/MoreLink.astro delete mode 100644 src/components/MoreLink.tsx create mode 100644 src/components/NetflixFlag.astro delete mode 100644 src/components/NetflixFlag.tsx create mode 100644 src/components/OdyseeVideo.astro delete mode 100644 src/components/OdyseeVideo.tsx create mode 100644 src/components/OrderedList.astro delete mode 100644 src/components/OrderedList.tsx create mode 100644 src/components/PrimeVideoFlag.astro delete mode 100644 src/components/PrimeVideoFlag.tsx create mode 100644 src/components/ProductLink.astro delete mode 100644 src/components/ProductLink.tsx create mode 100644 src/components/ProjectIntro.astro delete mode 100644 src/components/ProjectIntro.tsx create mode 100644 src/components/Pullquote.astro delete mode 100644 src/components/Pullquote.tsx create mode 100644 src/components/SocialLinks.astro delete mode 100644 src/components/SocialLinks.tsx create mode 100644 src/components/Spotify.astro delete mode 100644 src/components/Spotify.tsx create mode 100644 src/components/Subheadline.astro delete mode 100644 src/components/Subheadline.tsx create mode 100644 src/components/Subsubheadline.astro delete mode 100644 src/components/Subsubheadline.tsx create mode 100644 src/components/Tag.astro delete mode 100644 src/components/Tag.tsx create mode 100644 src/components/Text.astro delete mode 100644 src/components/Text.tsx create mode 100644 src/components/TextLink.astro delete mode 100644 src/components/TextLink.tsx create mode 100644 src/components/Title.astro delete mode 100644 src/components/Title.tsx create mode 100644 src/components/UnorderedList.astro delete mode 100644 src/components/UnorderedList.tsx create mode 100644 src/components/UpLink.astro delete mode 100644 src/components/UpLink.tsx create mode 100644 src/components/Verse.astro delete mode 100644 src/components/Verse.tsx delete mode 100644 src/components/index.ts delete mode 100644 src/data/social-links.json diff --git a/src/components/AmazonBook.astro b/src/components/AmazonBook.astro new file mode 100644 index 0000000..49ab508 --- /dev/null +++ b/src/components/AmazonBook.astro @@ -0,0 +1,24 @@ +--- +// Cspell:words astro +import Book from './Book.astro'; +import Link from './Link.astro'; + +interface Props { + alt?: string; + asin: string; + class?: string; +} + +const { alt = '', asin, class: className, ...props } = Astro.props; + +const amazonImageUrl = `https://images-na.ssl-images-amazon.com/images/P/${asin}.01.LZZZZZZZ.jpg`; +--- + + + + diff --git a/src/components/AmazonBook.tsx b/src/components/AmazonBook.tsx deleted file mode 100644 index d9fd8c6..0000000 --- a/src/components/AmazonBook.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { FunctionalComponent, JSX } from 'preact'; - -import { Book, Link } from '.'; - -interface Props extends JSX.HTMLAttributes { - alt?: string; - asin: string; - class?: string; -} - -export const AmazonBook: FunctionalComponent = ({ - alt = '', - asin, - class: className, - ...props -}) => { - const amazonImageUrl = `https://images-na.ssl-images-amazon.com/images/P/${asin}.01.LZZZZZZZ.jpg`; - - return ( - - - - ); -}; diff --git a/src/components/Backlink.astro b/src/components/Backlink.astro new file mode 100644 index 0000000..a323e35 --- /dev/null +++ b/src/components/Backlink.astro @@ -0,0 +1,39 @@ +--- +// Cspell:words astro tabindex clickarea umami classnames +import cx from 'classnames'; + +import { ArrowLeft } from './icons'; +import Link from './Link.astro'; + +interface Props { + class?: string; + backLink?: string; +} + +const { backLink, class: className, ...props } = Astro.props; + +const classes = cx( + 'col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1', + className +); +--- + +{ + backLink && ( + + + + ) +} diff --git a/src/components/Backlink.tsx b/src/components/Backlink.tsx deleted file mode 100644 index 21bc3b2..0000000 --- a/src/components/Backlink.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent, JSX } from 'preact'; - -import { Link } from '.'; -import { ArrowLeft } from './icons'; - -interface Props extends JSX.HTMLAttributes { - class?: string; - backLink?: string; -} - -export const Backlink: FunctionalComponent = ({ backLink, class: className, ...props }) => { - const classes = cx( - 'col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1', - className - ); - - return ( - <> - {backLink && ( - - - - )} - - ); -}; diff --git a/src/components/Banner.astro b/src/components/Banner.astro new file mode 100644 index 0000000..4a79514 --- /dev/null +++ b/src/components/Banner.astro @@ -0,0 +1,32 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; + +export interface Props { + class?: string; + summary?: string; + open?: boolean; +} + +const { class: className, open, summary, ...props } = Astro.props; + +const classes = cx( + 'rounded-2 bg-black/5 p-10 mbe-10 dark:bg-white/5 [&_p:last-of-type]:mbe-0', + className +); +--- + + diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx deleted file mode 100644 index 39b6542..0000000 --- a/src/components/Banner.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - children: ComponentChild; - summary?: string; - open?: boolean; -} - -export const Banner: FunctionalComponent = ({ - class: className, - children, - open, - summary, - ...props -}) => { - const classes = cx( - 'rounded-2 bg-black/5 p-10 mbe-10 dark:bg-white/5 [&_p:last-of-type]:mbe-0', - className - ); - - return ( - - ); -}; diff --git a/src/components/Blockquote.astro b/src/components/Blockquote.astro new file mode 100644 index 0000000..44727a1 --- /dev/null +++ b/src/components/Blockquote.astro @@ -0,0 +1,41 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; +import TextLink from './TextLink.astro'; + +interface Props { + author?: string; + class?: string; + lang?: string; + source?: string; + sourceUrl?: string; +} + +const { author, class: className, lang = 'en', source, sourceUrl, ...props } = Astro.props; + +const classes = cx( + 'relative overflow-hidden mbe-12 mbs-12 mie-8 mis-8 pie-8 pis-8 md:mie-10 md:mis-10', + className +); +--- + +
+ + { + (author || source) && ( +
+ {(author || source) && '—'} + {author && {author}} + {author && source && ', '} + {source && + (sourceUrl ? ( + + {source} + + ) : ( + {source} + ))} +
+ ) + } +
diff --git a/src/components/Blockquote.tsx b/src/components/Blockquote.tsx deleted file mode 100644 index 15584c8..0000000 --- a/src/components/Blockquote.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent, JSX } from 'preact'; - -import { TextLink } from '.'; - -interface Props extends JSX.HTMLAttributes { - author?: string; - children: ComponentChild; - class?: string; - lang?: string; - source?: string; - sourceUrl?: string; -} - -export const Blockquote: FunctionalComponent = ({ - author, - children, - class: className, - lang = 'en', - source, - sourceUrl, - ...props -}) => { - const classes = cx( - 'relative overflow-hidden mbe-12 mbs-12 mie-8 mis-8 pie-8 pis-8 md:mie-10 md:mis-10', - className - ); - - return ( -
- {children} - {(author || source) && ( -
- {(author || source) && '—'} - {author && {author}} - {author && source && ', '} - {source && - (sourceUrl ? ( - - {source} - - ) : ( - {source} - ))} -
- )} -
- ); -}; diff --git a/src/components/Book.astro b/src/components/Book.astro new file mode 100644 index 0000000..9b2ea8c --- /dev/null +++ b/src/components/Book.astro @@ -0,0 +1,21 @@ +--- +// Cspell:words astro tabindex classnames +import cx from 'classnames'; + +interface Props { + alt?: string; + class?: string; + src: string; +} + +const { alt = '', class: className, src, ...props } = Astro.props; + +const classes = cx( + "image-shadow relative box-border grid h-auto max-w-[250px] shrink grow justify-self-center overflow-hidden align-bottom shadow-book before:absolute before:z-10 before:block before:h-full before:w-[0.5em] before:bg-gradient-to-r before:from-black/30 before:to-transparent before:shadow-book-before before:content-[''] before:rounded-is-1", + className +); +--- + +
+ {alt} +
diff --git a/src/components/Book.tsx b/src/components/Book.tsx deleted file mode 100644 index 1a65c4a..0000000 --- a/src/components/Book.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent, JSX } from 'preact'; - -interface Props extends JSX.HTMLAttributes { - alt?: string; - class?: string; - src: string; -} - -export const Book: FunctionalComponent = ({ alt = '', class: className, src, ...props }) => { - const classes = cx( - "image-shadow relative box-border grid h-auto max-w-[250px] shrink grow justify-self-center overflow-hidden align-bottom shadow-book before:absolute before:z-10 before:block before:h-full before:w-[0.5em] before:bg-gradient-to-r before:from-black/30 before:to-transparent before:shadow-book-before before:content-[''] before:rounded-is-1", - className - ); - - return ( -
- {alt} -
- ); -}; diff --git a/src/components/Bookshelf.astro b/src/components/Bookshelf.astro new file mode 100644 index 0000000..9271d78 --- /dev/null +++ b/src/components/Bookshelf.astro @@ -0,0 +1,15 @@ +--- +// Cspell:words astro minmax classnames +export interface Props { + [key: string]: any; +} + +const { ...props } = Astro.props; +--- + +
+ +
diff --git a/src/components/Bookshelf.tsx b/src/components/Bookshelf.tsx deleted file mode 100644 index c02ba67..0000000 --- a/src/components/Bookshelf.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - children: ComponentChild; -} - -export const Bookshelf: FunctionalComponent = ({ children, ...props }) => { - return ( -
- {children} -
- ); -}; diff --git a/src/components/ColorStack.astro b/src/components/ColorStack.astro new file mode 100644 index 0000000..81e1693 --- /dev/null +++ b/src/components/ColorStack.astro @@ -0,0 +1,15 @@ +--- +// Cspell:words astro minmax +export interface Props { + [key: string]: any; +} + +const { ...props } = Astro.props; +--- + +
+ +
diff --git a/src/components/ColorStack.tsx b/src/components/ColorStack.tsx deleted file mode 100644 index 3f5be9f..0000000 --- a/src/components/ColorStack.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - children: ComponentChild; -} - -export const ColorStack: FunctionalComponent = ({ children, ...props }) => { - return ( -
- {children} -
- ); -}; diff --git a/src/components/ColorSwatch.astro b/src/components/ColorSwatch.astro new file mode 100644 index 0000000..190cea5 --- /dev/null +++ b/src/components/ColorSwatch.astro @@ -0,0 +1,80 @@ +--- +// Cspell:words astro subheadline backface flippable classnames +import cx from 'classnames'; +import Subheadline from './Subheadline.astro'; +import Text from './Text.astro'; + +interface Props { + class?: string; + color: string; + title?: string; + description?: string; +} + +const { class: className, color, title, description, ...props } = Astro.props; + +const classes = cx( + 'h-[100vw] max-h-[200px] w-full max-w-[300px] [perspective:500px]', + { 'cursor-pointer': description }, + className +); + +const flipperClasses = cx( + 'relative transition-transform duration-500 ease-in-out [transform-style:preserve-3d]' +); + +const cardClasses = cx( + 'absolute box-border h-[100vw] max-h-[200px] w-full max-w-[300px] rounded-25 bg-white shadow-book inline-start-0 block-start-0 [perspective:500px] [backface-visibility:hidden] dark:bg-black dark:border-[1px] dark:border-white/20' +); +--- + +
+
+
+
+
+
+ {title && {title}} + + {color} + +
+
+ { + description && ( +
+ {description} +
+ ) + } +
+
+ + + + diff --git a/src/components/ColorSwatch.tsx b/src/components/ColorSwatch.tsx deleted file mode 100644 index a865628..0000000 --- a/src/components/ColorSwatch.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent, JSX } from 'preact'; -import { useState } from 'preact/hooks'; - -import { Subheadline, Text } from '.'; - -interface ColorCardProps extends JSX.HTMLAttributes { - class?: string; -} - -interface Props extends JSX.HTMLAttributes { - class?: string; - color: string; - title?: string; - description?: string; -} - -const ColorCard: FunctionalComponent = ({ - class: className, - children, - ...props -}) => { - const classes = cx( - 'absolute box-border h-[100vw] max-h-[200px] w-full max-w-[300px] rounded-25 bg-white shadow-book inline-start-0 block-start-0 [perspective:500px] [backface-visibility:hidden] dark:bg-black dark:border-[1px] dark:border-white/20', - className - ); - - return ( -
- {children} -
- ); -}; - -export const ColorSwatch: FunctionalComponent = ({ - class: className, - color, - title, - description, - ...props -}) => { - const [active, setActive] = useState(false); - const classes = cx( - 'h-[100vw] max-h-[200px] w-full max-w-[300px] [perspective:500px]', - { 'cursor-pointer': description }, - className - ); - const flipperClasses = cx( - 'relative transition-transform duration-500 ease-in-out [transform-style:preserve-3d]', - { '[transform:rotateY(180deg)]': active } - ); - - const handleClick = () => { - description && setActive(!active); - }; - - return ( -
-
- -
-
- {title && ( - {title} - )} - - {color} - -
- - {description && ( - - {description} - - )} -
-
- ); -}; diff --git a/src/components/DisplayBox.astro b/src/components/DisplayBox.astro new file mode 100644 index 0000000..bfea62e --- /dev/null +++ b/src/components/DisplayBox.astro @@ -0,0 +1,17 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; + +export interface Props { + class?: string; + [key: string]: any; +} + +const { class: className, ...props } = Astro.props; + +const classes = cx('[&_img]:bg-gray-100 [&_img]:p-10', className); +--- + +
+ +
diff --git a/src/components/DisplayBox.tsx b/src/components/DisplayBox.tsx deleted file mode 100644 index 95949d9..0000000 --- a/src/components/DisplayBox.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - children: ComponentChild; -} - -export const DisplayBox: FunctionalComponent = ({ - class: className, - children, - ...props -}) => { - const classes = cx('[&_img]:bg-gray-100 [&_img]:p-10', className); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/Divider.astro b/src/components/Divider.astro new file mode 100644 index 0000000..7c4816e --- /dev/null +++ b/src/components/Divider.astro @@ -0,0 +1,17 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; + +interface Props { + class?: string; +} + +const { class: className, ...props } = Astro.props; + +const classes = cx( + 'border-solid border-black/[0.1] mbe-14 mbs-14 border-bs-0 border-be-1 border-is-0 border-ie-0 dark:border-white/[0.1]', + className +); +--- + +
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx deleted file mode 100644 index ccd98be..0000000 --- a/src/components/Divider.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent } from 'preact'; - -interface Props { - class?: string; -} - -export const Divider: FunctionalComponent = ({ class: className, ...props }) => { - const classes = cx( - 'border-solid border-black/[0.1] mbe-14 mbs-14 border-bs-0 border-be-1 border-is-0 border-ie-0 dark:border-white/[0.1]', - className - ); - - return
; -}; diff --git a/src/components/DoughnutChart.tsx b/src/components/DoughnutChart.tsx index 4ff475b..85b7dfc 100644 --- a/src/components/DoughnutChart.tsx +++ b/src/components/DoughnutChart.tsx @@ -1,3 +1,4 @@ +// Cspell:words deepmerge autocolors chartjs import deepmerge from 'deepmerge'; import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js'; diff --git a/src/components/DownloadLink.astro b/src/components/DownloadLink.astro new file mode 100644 index 0000000..e301273 --- /dev/null +++ b/src/components/DownloadLink.astro @@ -0,0 +1,22 @@ +--- +// Cspell:words astro +import { Download } from './icons'; +import TextLink from './TextLink.astro'; + +interface Props { + href: string; + text: string; +} + +const { href, text, ...props } = Astro.props; +--- + + + {text} + + + diff --git a/src/components/DownloadLink.tsx b/src/components/DownloadLink.tsx deleted file mode 100644 index c7ae6ee..0000000 --- a/src/components/DownloadLink.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { FunctionalComponent, JSX } from 'preact'; - -import { TextLink } from '.'; -import { Download } from './icons'; - -interface Props extends JSX.HTMLAttributes { - href: string; - text: string; -} - -export const DownloadLink: FunctionalComponent = ({ href, text, ...props }) => ( - - {text} - - - -); diff --git a/src/components/EmailLink.astro b/src/components/EmailLink.astro new file mode 100644 index 0000000..98d531d --- /dev/null +++ b/src/components/EmailLink.astro @@ -0,0 +1,26 @@ +--- +// Cspell:words astro +import { MailSend } from './icons'; +import TextLink from './TextLink.astro'; + +interface Props { + text?: string; + icon?: boolean; +} + +const { icon = true, text = 'Email', ...props } = Astro.props; +--- + + + {text} + { + icon && ( + + + ) + } + diff --git a/src/components/EmailLink.tsx b/src/components/EmailLink.tsx deleted file mode 100644 index 2f582c7..0000000 --- a/src/components/EmailLink.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { FunctionalComponent, JSX } from 'preact'; - -import { TextLink } from '.'; -import { MailSend } from './icons'; - -interface Props extends Omit, 'icon'> { - text?: string; -} - -interface EmailLinkProps extends Props { - icon?: boolean; -} - -export const EmailLink: FunctionalComponent = ({ - icon = true, - text = 'Email', - ...props -}) => ( - - {text} - {icon && ( - - - )} - -); diff --git a/src/components/Figure.astro b/src/components/Figure.astro new file mode 100644 index 0000000..a56489c --- /dev/null +++ b/src/components/Figure.astro @@ -0,0 +1,29 @@ +--- +// Cspell:words astro fullsize classnames nowrap figcaption +import cx from 'classnames'; + +export interface Props { + caption?: string; + class?: string; + size?: 'regular' | 'wide' | 'fullsize'; +} + +const { class: className, caption, size = 'regular', ...props } = Astro.props; + +const classes = cx( + 'rounded-4 bg-white/50 p-8 mbe-13 mbs-0 mie-0 mis-0 dark:bg-black/80', + { 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize' }, + className +); +--- + +
+
+ +
+ { + caption && ( +
{caption}
+ ) + } +
diff --git a/src/components/Figure.tsx b/src/components/Figure.tsx deleted file mode 100644 index 236e89d..0000000 --- a/src/components/Figure.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - caption?: string; - children: ComponentChild; - class?: string; - size?: 'regular' | 'wide' | 'fullsize'; -} - -export const Figure: FunctionalComponent = ({ - children, - class: className, - caption, - size = 'regular', - ...props -}) => { - const classes = cx( - 'rounded-4 bg-white/50 p-8 mbe-13 mbs-0 mie-0 mis-0 dark:bg-black/80', - { 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize' }, - className - ); - - return ( -
-
{children}
- {caption && ( -
- {caption} -
- )} -
- ); -}; diff --git a/src/components/Flag.astro b/src/components/Flag.astro new file mode 100644 index 0000000..2db411e --- /dev/null +++ b/src/components/Flag.astro @@ -0,0 +1,43 @@ +--- +// Cspell:words astro classnames darkgrey +import cx from 'classnames'; +import Link from './Link.astro'; + +export interface Props { + class?: string; + href?: string; + label: string; + [key: string]: any; +} + +const { label, class: className, href, ...props } = Astro.props; + +const classes = cx( + 'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80', + className +); +--- + +{ + href ? ( + + + {label} + + + ) : ( + + + {label} + + + ) +} diff --git a/src/components/Flag.tsx b/src/components/Flag.tsx deleted file mode 100644 index 1d0ca5a..0000000 --- a/src/components/Flag.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -import { Link } from '.'; - -interface Props { - class?: string; - href?: string; - label: string; -} - -interface InnerFlagProps { - children: ComponentChild; -} - -const InnerFlag: FunctionalComponent = ({ children }) => ( - <> - - {children} - - -); - -export const Flag: FunctionalComponent = ({ label, class: className, href, ...props }) => { - const classes = cx( - 'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80', - className - ); - - return ( - <> - {href ? ( - - {label} - - ) : ( - - {label} - - )} - - ); -}; diff --git a/src/components/GalleryDetail.astro b/src/components/GalleryDetail.astro index 5de27a0..7cb9cf3 100644 --- a/src/components/GalleryDetail.astro +++ b/src/components/GalleryDetail.astro @@ -1,10 +1,11 @@ --- +// Cspell:words astro classnames import cx from 'classnames'; import { animation, animationDelay } from '../data/site'; import Image from './Image.astro'; -import { Headline } from '.'; +import Headline from './Headline.astro'; const { entry } = Astro.props; @@ -41,7 +42,7 @@ const imageLength = entry.data.images.length; { entry.data.images.map(({ src }: { src: string }, index: number) => (
1 && index > 0, 'justify-self-center lg:col-start-2': diff --git a/src/components/Headline.astro b/src/components/Headline.astro new file mode 100644 index 0000000..9d1c295 --- /dev/null +++ b/src/components/Headline.astro @@ -0,0 +1,21 @@ +--- +// Cspell:words astro classnames keyof +import cx from 'classnames'; + +export interface Props { + as?: keyof astroHTML.JSX.IntrinsicElements; + class?: string; + [key: string]: any; +} + +const { as: Tag = 'h2', class: className, children, ...props } = Astro.props; + +const classes = cx( + 'text-5 font-black tracking-tight mbe-10 dark:font-extrabold [text-wrap:balance]', + className +); +--- + + + + diff --git a/src/components/Headline.tsx b/src/components/Headline.tsx deleted file mode 100644 index 611c7a1..0000000 --- a/src/components/Headline.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - as?: any; - class?: string; - children: ComponentChild; -} - -export const Headline: FunctionalComponent = ({ - as = 'h2', - class: className, - children, - ...props -}) => { - const Tag = as; - const classes = cx( - 'text-5 font-black tracking-tight mbe-10 dark:font-extrabold [text-wrap:balance]', - className - ); - - return ( - - {children} - - ); -}; diff --git a/src/components/Image.astro b/src/components/Image.astro index fff68f1..f4efe58 100644 --- a/src/components/Image.astro +++ b/src/components/Image.astro @@ -1,4 +1,5 @@ --- +// Cspell:words astro classnames import cx from 'classnames'; const { class: className, noMargin, src, ...props } = Astro.props; diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro index ceda414..12aa21d 100644 --- a/src/components/JournalList.astro +++ b/src/components/JournalList.astro @@ -1,4 +1,5 @@ --- +// Cspell:words astro subsubheadline minmax webp import { Picture } from 'astro:assets'; import type { CollectionEntry } from 'astro:content'; @@ -9,7 +10,8 @@ interface Props { import { animation } from '../data/site'; import { pickTwoRandomColors } from '../utils'; -import { Link, Subsubheadline } from '../components'; +import Link from '../components/Link.astro'; +import Subsubheadline from './Subsubheadline.astro'; const { entries } = Astro.props; --- diff --git a/src/components/Legal.astro b/src/components/Legal.astro index 79af079..c20e634 100644 --- a/src/components/Legal.astro +++ b/src/components/Legal.astro @@ -1,5 +1,6 @@ --- -import { LegalDate } from '.'; +// Cspell:words astro +import LegalDate from './LegalDate.astro'; import { site } from '../data/site'; --- @@ -7,7 +8,7 @@ import { site } from '../data/site';
© - + • {site.author} diff --git a/src/components/LegalDate.astro b/src/components/LegalDate.astro new file mode 100644 index 0000000..e2663c8 --- /dev/null +++ b/src/components/LegalDate.astro @@ -0,0 +1,19 @@ +--- + +--- + + + + diff --git a/src/components/LegalDate.tsx b/src/components/LegalDate.tsx deleted file mode 100644 index 23d1e22..0000000 --- a/src/components/LegalDate.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const LegalDate = () => { - const currentDate = new Date(); - const isoDate = currentDate.toISOString(); - const currentYear = currentDate.getFullYear(); - - return ; -}; diff --git a/src/components/Link.astro b/src/components/Link.astro new file mode 100644 index 0000000..b606995 --- /dev/null +++ b/src/components/Link.astro @@ -0,0 +1,25 @@ +--- +// Cspell:words astro classnames noopener noreferrer +import cx from 'classnames'; + +interface Props { + class?: string; + href?: string; + [key: string]: any; +} + +const { class: className, href = '#', ...props } = Astro.props; + +const isExternal = (href as string).startsWith('http'); +const classes = cx('link', { external: isExternal }, className); +--- + + + + diff --git a/src/components/Link.tsx b/src/components/Link.tsx deleted file mode 100644 index ca5405d..0000000 --- a/src/components/Link.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent, JSX } from 'preact'; - -interface Props extends JSX.HTMLAttributes {} - -export const Link: FunctionalComponent = ({ - class: className, - children, - href = '#', - ...props -}: Props) => { - const isExternal = (href as string).startsWith('http'); - const classes = cx('link', { external: isExternal }, className as string); - - return ( - - {children} - - ); -}; diff --git a/src/components/ListItem.astro b/src/components/ListItem.astro new file mode 100644 index 0000000..78cf039 --- /dev/null +++ b/src/components/ListItem.astro @@ -0,0 +1,17 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; + +export interface Props { + class?: string; + [key: string]: any; +} + +const { class: className, ...props } = Astro.props; + +const classes = cx('mbe-2', className); +--- + +
  • + +
    • diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx deleted file mode 100644 index adc0005..0000000 --- a/src/components/ListItem.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - children: ComponentChild; -} - -export const ListItem: FunctionalComponent = ({ class: className, children, ...props }) => { - const classes = cx('mbe-2', className); - - return ( -
  • - {children} -
    • - ); -}; diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro index d5b9f3a..582c666 100644 --- a/src/components/MainNavigation.astro +++ b/src/components/MainNavigation.astro @@ -1,5 +1,6 @@ --- -import { Link } from '.'; +// Cspell:words astro umami shibui +import Link from './Link.astro'; import navigation from '../data/navigation.json'; import SearchLink from './SearchLink.astro'; diff --git a/src/components/MarkdownImage.astro b/src/components/MarkdownImage.astro index 55b0733..c5bdd92 100644 --- a/src/components/MarkdownImage.astro +++ b/src/components/MarkdownImage.astro @@ -1,4 +1,5 @@ --- +// Cspell:words astro classnames import cx from 'classnames'; interface Props { diff --git a/src/components/MoreLink.astro b/src/components/MoreLink.astro new file mode 100644 index 0000000..e080c71 --- /dev/null +++ b/src/components/MoreLink.astro @@ -0,0 +1,22 @@ +--- +// Cspell:words astro +import { ArrowRight } from './icons'; +import TextLink from './TextLink.astro'; + +interface Props { + href: string; + text: string; +} + +const { href, text, ...props } = Astro.props; +--- + + + {text} + + + diff --git a/src/components/MoreLink.tsx b/src/components/MoreLink.tsx deleted file mode 100644 index e3bf755..0000000 --- a/src/components/MoreLink.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { FunctionalComponent, JSX } from 'preact'; - -import { TextLink } from '.'; -import { ArrowRight } from './icons'; - -interface Props extends JSX.HTMLAttributes { - href: string; - text: string; -} - -export const MoreLink: FunctionalComponent = ({ href, text, ...props }) => ( - - {text} - - - -); diff --git a/src/components/NetflixFlag.astro b/src/components/NetflixFlag.astro new file mode 100644 index 0000000..fd860c4 --- /dev/null +++ b/src/components/NetflixFlag.astro @@ -0,0 +1,24 @@ +--- +// Cspell:words astro etflix classnames +import cx from 'classnames'; +import Link from './Link.astro'; + +export interface Props { + class?: string; + id: string; + [key: string]: any; +} + +const { class: className, id, ...props } = Astro.props; + +const classes = cx( + 'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500', + className +); +--- + + + + N + + diff --git a/src/components/NetflixFlag.tsx b/src/components/NetflixFlag.tsx deleted file mode 100644 index 284d034..0000000 --- a/src/components/NetflixFlag.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent } from 'preact'; - -import { Link } from '.'; - -interface Props { - class?: string; - id: string; -} - -export const NetflixFlag: FunctionalComponent = ({ class: className, id, ...props }) => { - const classes = cx( - 'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500', - className - ); - - return ( - - - N - - - ); -}; diff --git a/src/components/OdyseeVideo.astro b/src/components/OdyseeVideo.astro new file mode 100644 index 0000000..0f63d7c --- /dev/null +++ b/src/components/OdyseeVideo.astro @@ -0,0 +1,23 @@ +--- +// Cspell:words astro classnames autoplay allowfullscreen +import cx from 'classnames'; + +export interface Props { + class?: string; + id: string; + [key: string]: any; +} + +const { class: className, id, ...props } = Astro.props; + +const classes = cx('relative aspect-video mbe-10', className); +--- + +
    + +
    diff --git a/src/components/OdyseeVideo.tsx b/src/components/OdyseeVideo.tsx deleted file mode 100644 index adf2758..0000000 --- a/src/components/OdyseeVideo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - id: string; -} - -export const OdyseeVideo: FunctionalComponent = ({ class: className, id, ...props }) => { - const classes = cx('relative aspect-video mbe-10', className); - - return ( -
    - -
    - ); -}; diff --git a/src/components/OrderedList.astro b/src/components/OrderedList.astro new file mode 100644 index 0000000..c3a5c0d --- /dev/null +++ b/src/components/OrderedList.astro @@ -0,0 +1,20 @@ +--- +// Cspell:words astro classnames +import cx from 'classnames'; + +export interface Props { + class?: string; + [key: string]: any; +} + +const { class: className, children, ...props } = Astro.props; + +const classes = cx( + 'list-decimal text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]', + className +); +--- + +
      + +
    diff --git a/src/components/OrderedList.tsx b/src/components/OrderedList.tsx deleted file mode 100644 index f0ad37d..0000000 --- a/src/components/OrderedList.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import cx from 'classnames'; - -import type { ComponentChild, FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - children: ComponentChild; -} - -export const OrderedList: FunctionalComponent = ({ - class: className, - children, - ...props -}) => { - const classes = cx( - 'list-decimal text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]', - className - ); - - return ( -
      - {children} -
    - ); -}; diff --git a/src/components/PageFooter.astro b/src/components/PageFooter.astro index b76fd2a..98031fd 100644 --- a/src/components/PageFooter.astro +++ b/src/components/PageFooter.astro @@ -1,8 +1,10 @@ --- +// Cspell:words astro subnavigation shibui import Legal from './Legal.astro'; import RSSLink from './RSSLink.astro'; +import SocialLinks from './SocialLinks.astro'; import Subnavigation from './Subnavigation.astro'; -import { UpLink, SocialLinks } from '.'; +import UpLink from './UpLink.astro'; ---