diff --git a/src/components/Backlink.astro b/src/components/Backlink.astro index 028aca7..f5bfc18 100644 --- a/src/components/Backlink.astro +++ b/src/components/Backlink.astro @@ -1,6 +1,7 @@ --- import { Sprite } from 'astro-icon'; -import Link from '../components/Link.astro'; + +import { Link } from '../components'; export interface Props { backLink?: string; diff --git a/src/components/Headline.astro b/src/components/Headline.astro deleted file mode 100644 index ede93b9..0000000 --- a/src/components/Headline.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -interface Props { - as?: string; - children?: any; - class?: string; -} - -const { as = 'h2', class: className, ...props } = Astro.props; -const Element = as; ---- - - - - diff --git a/src/components/Headline.tsx b/src/components/Headline.tsx new file mode 100644 index 0000000..27881a8 --- /dev/null +++ b/src/components/Headline.tsx @@ -0,0 +1,28 @@ +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 mbs-16 first-of-type:mbs-0 dark:font-extrabold', + className + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/Legal.astro b/src/components/Legal.astro index e260a47..79af079 100644 --- a/src/components/Legal.astro +++ b/src/components/Legal.astro @@ -1,5 +1,6 @@ --- -import { LegalDate } from './LegalDate'; +import { LegalDate } from '.'; + import { site } from '../data/site'; --- diff --git a/src/components/Link.astro b/src/components/Link.astro deleted file mode 100644 index 9ff933e..0000000 --- a/src/components/Link.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -import type { HTMLAttributes } from 'astro/types'; - -type Props = HTMLAttributes<'a'>; - -const props = { ...Astro.props }; -const { class: className } = props; - -if (typeof props.href !== 'string') props.href = '#'; - -const isExternal = props.href.startsWith('http'); ---- - - - - diff --git a/src/components/Link.tsx b/src/components/Link.tsx new file mode 100644 index 0000000..ca5405d --- /dev/null +++ b/src/components/Link.tsx @@ -0,0 +1,27 @@ +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/MainNavigation.astro b/src/components/MainNavigation.astro index 2fa6db9..030e497 100644 --- a/src/components/MainNavigation.astro +++ b/src/components/MainNavigation.astro @@ -1,5 +1,7 @@ --- -import Link from './Link.astro'; +import cx from 'classnames'; + +import { Link } from '.'; import navigation from '../data/navigation.json'; @@ -12,9 +14,10 @@ const currentPath = new URL(Astro.request.url).pathname; navigation.map(({ title, url }) => (
  • {title} diff --git a/src/components/PageFooter.astro b/src/components/PageFooter.astro index 658cf1c..063914c 100644 --- a/src/components/PageFooter.astro +++ b/src/components/PageFooter.astro @@ -1,8 +1,8 @@ --- -import RSSLink from './RSSLink.astro'; -import Subnavigation from './Subnavigation.astro'; import Legal from './Legal.astro'; +import RSSLink from './RSSLink.astro'; import SocialLinks from './SocialLinks.astro'; +import Subnavigation from './Subnavigation.astro'; import UpLink from './UpLink.astro'; --- diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro index 73a43c9..fc4a9fb 100644 --- a/src/components/RSSLink.astro +++ b/src/components/RSSLink.astro @@ -1,8 +1,7 @@ --- import { Sprite } from 'astro-icon'; -import Link from './Link.astro'; -import Subsubheadline from './Subsubheadline.astro'; +import { Link, Subsubheadline } from '.'; ---
    diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro index 320dff0..8de7ef2 100644 --- a/src/components/SocialLinks.astro +++ b/src/components/SocialLinks.astro @@ -1,7 +1,7 @@ --- import { Sprite } from 'astro-icon'; -import Link from './Link.astro'; +import { Link } from '.'; import data from '../data/social-links.json'; --- diff --git a/src/components/Subheadline.astro b/src/components/Subheadline.astro deleted file mode 100644 index 6bd686a..0000000 --- a/src/components/Subheadline.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -interface Props { - as?: string; - children?: any; - class?: string; -} - -const { as = 'h3', class: className, ...props } = Astro.props; -const Element = as; ---- - - - - diff --git a/src/components/Subheadline.tsx b/src/components/Subheadline.tsx new file mode 100644 index 0000000..96c818c --- /dev/null +++ b/src/components/Subheadline.tsx @@ -0,0 +1,28 @@ +import cx from 'classnames'; + +import type { ComponentChild, FunctionalComponent } from 'preact'; + +interface Props { + as?: any; + class?: string; + children: ComponentChild; +} + +export const Subheadline: FunctionalComponent = ({ + as = 'h3', + class: className, + children, + ...props +}) => { + const Tag = as; + const classes = cx( + 'text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold', + className + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/Subnavigation.astro b/src/components/Subnavigation.astro index 7dca0e4..0834987 100644 --- a/src/components/Subnavigation.astro +++ b/src/components/Subnavigation.astro @@ -1,7 +1,9 @@ --- +import cx from 'classnames'; + import data from '../data/subnavigation.json'; -import Link from './Link.astro'; +import { Link } from '.'; const currentPath = new URL(Astro.request.url).pathname; --- @@ -13,9 +15,10 @@ const currentPath = new URL(Astro.request.url).pathname;
  • {title} diff --git a/src/components/Subsubheadline.astro b/src/components/Subsubheadline.astro deleted file mode 100644 index 9f421ba..0000000 --- a/src/components/Subsubheadline.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -interface Props { - as?: string; - children?: any; - class?: string; -} - -const { as = 'h4', class: className, ...props } = Astro.props; -const Element = as; ---- - - - - diff --git a/src/components/Subsubheadline.tsx b/src/components/Subsubheadline.tsx new file mode 100644 index 0000000..02e8b88 --- /dev/null +++ b/src/components/Subsubheadline.tsx @@ -0,0 +1,28 @@ +import cx from 'classnames'; + +import type { ComponentChild, FunctionalComponent } from 'preact'; + +interface Props { + as?: any; + class?: string; + children: ComponentChild; +} + +export const Subsubheadline: FunctionalComponent = ({ + as = 'h4', + class: className, + children, + ...props +}) => { + const Tag = as; + const classes = cx( + 'text-3 font-black tracking-tight mbe-5 mbs-14 first-of-type:mbs-0 dark:font-extrabold', + className + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/Text.tsx b/src/components/Text.tsx new file mode 100644 index 0000000..a8c91a9 --- /dev/null +++ b/src/components/Text.tsx @@ -0,0 +1,28 @@ +import cx from 'classnames'; + +import type { ComponentChild, FunctionalComponent } from 'preact'; + +interface Props { + as?: any; + class?: string; + children: ComponentChild; +} + +export const Text: FunctionalComponent = ({ + as = 'p', + class: className, + children, + ...props +}) => { + const Tag = as; + const classes = cx( + 'text-3 font-normal tracking-normal mbe-10 mbs-0 last-of-type:mbe-0 dark:font-light', + className + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx new file mode 100644 index 0000000..7a4b587 --- /dev/null +++ b/src/components/TextLink.tsx @@ -0,0 +1,24 @@ +import cx from 'classnames'; + +import type { FunctionalComponent, JSX } from 'preact'; + +import { Link } from '.'; + +interface Props extends JSX.HTMLAttributes {} + +export const TextLink: FunctionalComponent = ({ + class: className, + children, + ...props +}: Props) => { + const classes = cx( + 'font-semibold text-shibui-950 underline decoration-shibui-900/20 decoration-4 underline-offset-auto no-common-ligatures no-discretionary-ligatures hover:!decoration-accent focus:!decoration-accent dark:text-shibui-200/[0.87] dark:decoration-shibui-100/20', + className as string + ); + + return ( + + {children} + + ); +}; diff --git a/src/components/Title.astro b/src/components/Title.astro deleted file mode 100644 index 1a50760..0000000 --- a/src/components/Title.astro +++ /dev/null @@ -1,17 +0,0 @@ ---- -interface Props { - as?: string; - children?: any; - class?: string; -} - -const { as = 'h1', class: className, ...props } = Astro.props; -const Element = as; ---- - - - - diff --git a/src/components/Title.tsx b/src/components/Title.tsx new file mode 100644 index 0000000..8222239 --- /dev/null +++ b/src/components/Title.tsx @@ -0,0 +1,25 @@ +import cx from 'classnames'; + +import type { ComponentChild, FunctionalComponent } from 'preact'; + +interface Props { + as?: any; + class?: string; + children: ComponentChild; +} + +export const Title: FunctionalComponent = ({ + as = 'h1', + class: className, + children, + ...props +}) => { + const Tag = as; + const classes = cx('text-7 font-black tracking-tight mbe-13 dark:font-extrabold', className); + + return ( + + {children} + + ); +}; diff --git a/src/components/UpLink.astro b/src/components/UpLink.astro index 3f29285..898a728 100644 --- a/src/components/UpLink.astro +++ b/src/components/UpLink.astro @@ -1,7 +1,7 @@ --- import { Sprite } from 'astro-icon'; -import Link from './Link.astro'; +import { Link } from '.'; ---
    diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..cc1a832 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,8 @@ +export * from './Headline'; +export * from './LegalDate'; +export * from './Link'; +export * from './Subheadline'; +export * from './Subsubheadline'; +export * from './Text'; +export * from './TextLink'; +export * from './Title';