diff options
Diffstat (limited to 'apps/website/src/components')
| -rw-r--r-- | apps/website/src/components/base/Button.astro | 10 | ||||
| -rw-r--r-- | apps/website/src/components/base/Card.astro | 12 | ||||
| -rw-r--r-- | apps/website/src/components/base/CodeBlock.astro | 21 | ||||
| -rw-r--r-- | apps/website/src/components/base/FormattedDate.astro | 20 | ||||
| -rw-r--r-- | apps/website/src/components/base/Header.astro | 8 | ||||
| -rw-r--r-- | apps/website/src/components/base/Navbar.astro | 6 | ||||
| -rw-r--r-- | apps/website/src/components/base/NavbarElement.astro | 90 | ||||
| -rw-r--r-- | apps/website/src/components/base/Paragraph.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/components/base/ScrollbarOverlayContainer.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/components/base/Section.astro | 4 | ||||
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 13 | ||||
| -rw-r--r-- | apps/website/src/components/icons/Icon.astro | 4 | ||||
| -rw-r--r-- | apps/website/src/components/logos/Logo.astro | 7 |
13 files changed, 88 insertions, 111 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro index 438bafd..285052a 100644 --- a/apps/website/src/components/base/Button.astro +++ b/apps/website/src/components/base/Button.astro @@ -51,8 +51,8 @@ const className = [ const Element = rest.href ? 'a' : 'button' as any; --- -<Element {...rest} class={className}> - {iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>} - {text || <slot />} - {iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>} -</Element> + <Element {...rest} class={className}> + {iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>} + {text || <slot/>} + {iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>} + </Element> diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro index b3fbc00..7cc51b2 100644 --- a/apps/website/src/components/base/Card.astro +++ b/apps/website/src/components/base/Card.astro @@ -4,8 +4,8 @@ import Icon from '@components/icons/Icon.astro'; import type { HTMLAttributes } from 'astro/types'; interface Props extends HTMLAttributes<'div'> { - icon: Icons; - text?: string; + icon: Icons + text?: string } const { @@ -16,7 +16,7 @@ const { --- <!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. --> -<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0"> - <Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon> - <p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p> -</div> + <div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0"> + <Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon> + <p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p> + </div> diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro deleted file mode 100644 index fd2cdd6..0000000 --- a/apps/website/src/components/base/CodeBlock.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- - ---- - -<pre class="flex flex-col bg-gray-800 whitespace-pre border border-gray-50 rounded-2xl text-sm"> - <!-- TODO: un-shit this --> - <code><ca>public</ca> <cb>class</cb> <cc>MyConfig</cc> <cd>{</cd></code> - <code></code> - <code> <ce>@</ce><ca>Switch</ca><cd>(</cd><ca>name</ca> <ce>=</ce> <cf>"Sub Switch"</cf><cd>,</cd> <ca>type</ca> <ce>=</ce> <ca>OptionType</ca><cd>.</cd><cb>SWITCH</cb><cd>)</cd></code> - <code> <cb>public</cb> <cc>static boolean subSwitch</cc> <ce>=</ce> <cg>false</cg><cd>;</cd></code> - <code></code> - <code> <ca>public MyConfig</ca><cd>() {</cd></code> - <code> <cb>super</cb><cd>(</cd><cb>new</cb> <ca>Mod</ca><cd>(</cd><cf>"My Mod"</cf><cd>,</cd> <ca>ModType</ca><cd>.</cd><cb>UTIL_QOL</cb><cd>),</cd> <cf>"config.json"</cf><cd>);</cd></code> - <code></code> - <code> <cb>addDependency</cb><cd>(</cd><cf>"subSwitch"</cf><cd>, ()</cd> <ce>-></ce> <cd>{</cd></code> - <code> // Do stuff here!</code> - <code> <cd>});</cd></code> - <code> <cd>}</cd></code> - <code></code> - <code><cd>}</cd></code> -</pre> diff --git a/apps/website/src/components/base/FormattedDate.astro b/apps/website/src/components/base/FormattedDate.astro index 1bcce73..af538b9 100644 --- a/apps/website/src/components/base/FormattedDate.astro +++ b/apps/website/src/components/base/FormattedDate.astro @@ -1,17 +1,17 @@ --- interface Props { - date: Date; + date: Date } const { date } = Astro.props; --- -<time datetime={date.toISOString()}> - { - date.toLocaleDateString('en-us', { - year: 'numeric', - month: 'short', - day: 'numeric', - }) - } -</time> + <time datetime={date.toISOString()}> + { + date.toLocaleDateString('en-us', { + year: 'numeric', + month: 'short', + day: 'numeric', + }) + } + </time> diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro index 70dc799..1ab879e 100644 --- a/apps/website/src/components/base/Header.astro +++ b/apps/website/src/components/base/Header.astro @@ -25,13 +25,13 @@ const { } = Astro.props; const Element = sizes[size] as any; // Unfortunately gotta do this -const className = (align == 'inherit' ? '' : `text-${align} `) - + (size == 'xxl' ? ' page-header' : '') +const className = (align === 'inherit' ? '' : `text-${align} `) + + (size === 'xxl' ? ' page-header' : '') + (attr.class ? ` ${attr.class}` : ''); --- <Element {...attr} class={className}> - <slot /> + <slot/> </Element> <style> @@ -74,4 +74,4 @@ const className = (align == 'inherit' ? '' : `text-${align} `) font-weight: inherit; } } -</style> + </style> diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro index 8fa98df..15f7638 100644 --- a/apps/website/src/components/base/Navbar.astro +++ b/apps/website/src/components/base/Navbar.astro @@ -1,6 +1,6 @@ --- -import config from 'config'; import type { Config } from '@webtypes/Config'; +import config from 'config'; import NavbarElement from './NavbarElement.astro'; --- @@ -9,12 +9,12 @@ import NavbarElement from './NavbarElement.astro'; <nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center"> <ul class="flex flex-row justify-start gap-4"> {(config as Config).navbar.left.map((element, index) => ( - <NavbarElement {element} {index} /> + <NavbarElement {element} {index}/> ))} </ul> <ul class="flex flex-row justify-end gap-4"> {(config as Config).navbar.right.map((element, index) => ( - <NavbarElement {element} {index} /> + <NavbarElement {element} {index}/> ))} </ul> </nav> diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro index 17c3662..6d549bf 100644 --- a/apps/website/src/components/base/NavbarElement.astro +++ b/apps/website/src/components/base/NavbarElement.astro @@ -1,11 +1,11 @@ --- -import type { LogoType, NavbarElement } from '@webtypes/Config'; -import Logo from '@components/logos/Logo.astro'; import Icon from '@components/icons/Icon.astro'; -import ScreenOverlay from './ScreenOverlay.astro'; +import Logo from '@components/logos/Logo.astro'; +import type { LogoType, NavbarElement } from '@webtypes/Config'; import Header from './Header.astro'; -import Tag from './Tag.astro'; +import ScreenOverlay from './ScreenOverlay.astro'; import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro'; +import Tag from './Tag.astro'; interface Props { element: NavbarElement @@ -25,66 +25,64 @@ const { ? ( <a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500"> {element.text && element.text} - {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />} - {element.dropdown && <Icon icon="chevron-down" />} + {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>} + {element.dropdown && <Icon icon="chevron-down"/>} </a> - ) + ) : ( <p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default"> {element.text && element.text} - {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />} - {element.dropdown && <Icon icon="chevron-down" />} + {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>} + {element.dropdown && <Icon icon="chevron-down"/>} </p> - )} + )} {element.dropdown && ( - <ScreenOverlay class="max-sm:group-focus-within:opacity-100" /> - <input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"> + <ScreenOverlay class="max-sm:group-focus-within:opacity-100"/> + <input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"/> <div class={` - transition-opacity - fixed md:absolute right-0 max-sm:bottom-0 - max-sm:overflow-hidden - max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen - pointer-events-none opacity-0 + transition-opacity + fixed md:absolute right-0 max-sm:bottom-0 + max-sm:overflow-hidden + max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen + pointer-events-none opacity-0 - md:top-full md:right-0 + md:top-full md:right-0 - group-focus-within:pointer-events-auto group-focus-within:opacity-100 - focus-within:pointer-events-auto focus-within:opacity-100 - hover:pointer-events-auto hover:opacity-100 - `} - > + group-focus-within:pointer-events-auto group-focus-within:opacity-100 + focus-within:pointer-events-auto focus-within:opacity-100 + hover:pointer-events-auto hover:opacity-100 + `}> <ScrollbarOverlayContainer tabindex="-1" class={` - bg-gray-50 - rounded-t-lg md:rounded-lg - transition-transform - max-sm:translate-y-1/3 max-sm:left-0 - group-focus-within:translate-y-0 - max-h-full md:max-h-96 overflow-y-auto - md:shadow-lg - `} - > + bg-gray-50 + rounded-t-lg md:rounded-lg + transition-transform + max-sm:translate-y-1/3 max-sm:left-0 + group-focus-within:translate-y-0 + max-h-full md:max-h-96 overflow-y-auto + md:shadow-lg + `}> <ul class="p-4"> {element.dropdown.map(item => ( <li> <a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]"> - <div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50"> - <div class="w-[36px]"> - {item.logo && <Logo size={40} logo={item.logo} />} - </div> + <div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50"> + <div class="w-[36px]"> + {item.logo && <Logo size={40} logo={item.logo}/>} + </div> - <div class="flex flex-col justify-start items-start"> - <div class="flex flex-row gap-2"> - <Header size="sm" class="text-gray-800">{item.name}</Header> - {item.tag && <Tag>{item.tag}</Tag>} - </div> - <p class="text-sm text-gray-400 font-light">{item.description}</p> - </div> - </div> - </a> - </li> + <div class="flex flex-col justify-start items-start"> + <div class="flex flex-row gap-2"> + <Header size="sm" class="text-gray-800">{item.name}</Header> + {item.tag && <Tag>{item.tag}</Tag>} + </div> + <p class="text-sm text-gray-400 font-light">{item.description}</p> + </div> + </div> + </a> + </li> ))} </ul> </ScrollbarOverlayContainer> diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro index 832b296..ffb1030 100644 --- a/apps/website/src/components/base/Paragraph.astro +++ b/apps/website/src/components/base/Paragraph.astro @@ -27,5 +27,5 @@ const className = [ --- <p class={className} {...props}> - {text || <slot />} + {text || <slot/>} </p> diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro index 84bedf5..235dbc7 100644 --- a/apps/website/src/components/base/ScrollbarOverlayContainer.astro +++ b/apps/website/src/components/base/ScrollbarOverlayContainer.astro @@ -48,4 +48,4 @@ const { ...attr } = Astro.props; background-color: #00000040; } } -</style> + </style> diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro index 4edf1ba..55e3737 100644 --- a/apps/website/src/components/base/Section.astro +++ b/apps/website/src/components/base/Section.astro @@ -19,8 +19,8 @@ const { const twoColumn = Astro.slots.has('left') || Astro.slots.has('right'); const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-4${ - twoColumn ? ` ${maxWidth == 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : '' - }${props.class ? ` ${props.class}` : ''}`; + twoColumn ? ` ${maxWidth === 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : '' +}${props.class ? ` ${props.class}` : ''}`; --- <section class={`w-full flex justify-center ${wrapperClass ?? ''}`}> diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index c1b32d1..95ffd05 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -2,20 +2,21 @@ import type { HTMLAttributes } from 'astro/types'; interface Props extends HTMLAttributes<'div'> { - dir?: string; - wrapperClass?: string; + dir?: string + wrapperClass?: string } const { - dir = "left", - wrapperClass = "" + dir = 'left', + wrapperClass = '', } = Astro.props; --- <div class={ `w-full bg-blue-100 flex flex-row gap-2.5 overflow-hidden slider - ${dir === "right" ? "reverse" : ""} - ${wrapperClass}`}> + ${dir === 'right' ? 'reverse' : ''} + ${wrapperClass}` +}> <slot /> </div> diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro index b36d412..693948d 100644 --- a/apps/website/src/components/icons/Icon.astro +++ b/apps/website/src/components/icons/Icon.astro @@ -1,11 +1,11 @@ --- -import { parse } from 'node-html-parser'; import type { HTMLAttributes } from 'astro/types'; +import { parse } from 'node-html-parser'; export type Icons = 'chevron-down' | 'download' | 'book-open'; interface Props extends HTMLAttributes<'svg'> { - icon: Icons + icon: Icons size?: number | [number, number] } diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro index ad41aad..52bfe34 100644 --- a/apps/website/src/components/logos/Logo.astro +++ b/apps/website/src/components/logos/Logo.astro @@ -10,19 +10,18 @@ export interface Props extends HTMLAttributes<'svg'> { const { logo, - silent = false, size = undefined, ...attr } = Astro.props; let svg: string | undefined; try { - if (logo == undefined) + if (logo === undefined) return; const dir = '../../../public/media'; svg = (await import(`${dir}/${logo.replaceAll('.', '/')}.svg?raw` /* @vite-ignore */)).default; - if (svg == undefined) + if (svg === undefined) return; if (typeof size == 'number' || Array.isArray(size)) { @@ -52,4 +51,4 @@ catch (err) { --- - <Fragment set:html={svg} /> + <Fragment set:html={svg}/> |