diff options
Diffstat (limited to 'apps')
22 files changed, 157 insertions, 181 deletions
diff --git a/apps/storybook/package.json b/apps/storybook/package.json index e0009b1..6729f27 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -6,13 +6,13 @@ "build-storybook": "storybook build --no-open" }, "dependencies": { - "@storybook/addon-essentials": "^7.5.3", - "@storybook/addon-interactions": "^7.5.3", - "@storybook/addon-links": "^7.5.3", + "@storybook/addon-essentials": "^7.6.6", + "@storybook/addon-interactions": "^7.6.6", + "@storybook/addon-links": "^7.6.6", "@storybook/addon-styling": "^1.3.7", - "@storybook/blocks": "^7.5.3", - "@storybook/react": "^7.5.3", - "@storybook/react-vite": "^7.5.3", + "@storybook/blocks": "^7.6.6", + "@storybook/react": "^7.6.6", + "@storybook/react-vite": "^7.6.6", "@storybook/testing-library": "^0.2.2", "postcss-pseudo-companion-classes": "^0.1.1", "react": "^18.2.0", @@ -22,15 +22,15 @@ "devDependencies": { "@polyfrost/config": "workspace:*", "@polyfrost/ui": "workspace:*", - "@types/react": "^18.2.38", - "@types/react-dom": "^18.2.17", - "@vitejs/plugin-react": "^4.2.0", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", + "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.16", - "postcss": "^8.4.31", + "postcss": "^8.4.32", "prop-types": "^15.8.1", - "storybook": "^7.5.3", - "tailwindcss": "^3.3.5", - "typescript": "^5.3.2", - "vite": "^5.0.2" + "storybook": "^7.6.6", + "tailwindcss": "^3.4.0", + "typescript": "^5.3.3", + "vite": "^5.0.10" } } diff --git a/apps/website/package.json b/apps/website/package.json index e3fb319..bb13cbe 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -7,6 +7,7 @@ "start": "astro start", "build": "astro build", "preview": "astro preview", + "astro": "astro", "test": "vitest" }, "dependencies": { @@ -16,13 +17,13 @@ "@astrojs/tailwind": "^5.0.2", "astro": "^4.0.6", "sass": "^1.69.5", - "tailwindcss": "^3.3.5", + "tailwindcss": "^3.4.0", "vitest": "^0.34.6" }, "devDependencies": { "@polyfrost/config": "workspace:*", - "@types/node": "~20.10.0", + "@types/node": "~20.10.5", "node-html-parser": "^6.1.11", - "typescript": "^5.3.2" + "typescript": "^5.3.3" } } 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}/> diff --git a/apps/website/src/layouts/BlogPost.astro b/apps/website/src/layouts/BlogPost.astro index ed2a3c3..188aae1 100644 --- a/apps/website/src/layouts/BlogPost.astro +++ b/apps/website/src/layouts/BlogPost.astro @@ -1,10 +1,9 @@ --- +import FormattedDate from '@components/base/FormattedDate.astro'; +import '@styles/blog.css'; import type { CollectionEntry } from 'astro:content'; import Layout from './Layout.astro'; -import '@styles/blog.css'; -import FormattedDate from '@components/base/FormattedDate.astro'; - type Props = CollectionEntry<'blog'>['data']; const { title, description, pubDate, updatedDate, heroImage } = Astro.props; @@ -12,25 +11,25 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <Layout title={title} description={description}> <article> - <div class='hero-image'> - {heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image" />} + <div class="hero-image"> + {heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image"/>} </div> <div class="prose"> <div class="title"> <div class="date"> - <FormattedDate date={pubDate} /> + <FormattedDate date={pubDate}/> { updatedDate && ( <div class="last-updated-on"> - Last updated on <FormattedDate date={updatedDate} /> + Last updated on <FormattedDate date={updatedDate}/> </div> ) } </div> <h1>{title}</h1> - <hr /> + <hr/> </div> - <slot /> + <slot/> </div> </article> </Layout> diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index 4acc407..1af3a1e 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -20,25 +20,25 @@ const { <!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <meta name="description" content={description} /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/svg+xml" href={favicon} /> - <meta name="generator" content={Astro.generator} /> + <meta charset="UTF-8"/> + <meta name="description" content={description}/> + <meta name="viewport" content="width=device-width"/> + <link rel="icon" type="image/svg+xml" href={favicon}/> + <meta name="generator" content={Astro.generator}/> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> - <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"> + <link rel="preconnect" href="https://fonts.googleapis.com"/> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> + <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> + <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> <title>{title}</title> </head> <body class="bg-gray-50"> - <Navbar /> + <Navbar/> <main class="min-h-screen h-auto"> - <slot /> + <slot/> </main> - <Footer /> + <Footer/> </body> </html> diff --git a/apps/website/src/pages/blog/[...slug].astro b/apps/website/src/pages/blog/[...slug].astro index d9995e7..abdde0a 100644 --- a/apps/website/src/pages/blog/[...slug].astro +++ b/apps/website/src/pages/blog/[...slug].astro @@ -19,7 +19,5 @@ const { Content } = await post.render(); --- <BlogPost {...post.data}> - <Content /> + <Content/> </BlogPost> - - diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro index c8f8203..4bccad4 100644 --- a/apps/website/src/pages/blog/index.astro +++ b/apps/website/src/pages/blog/index.astro @@ -1,25 +1,25 @@ --- /// <reference types="../../env.d.ts" /> -import Layout from '../../layouts/Layout.astro'; -import FormattedDate from '../../components/base/FormattedDate.astro' import { getCollection } from 'astro:content'; +import FormattedDate from '../../components/base/FormattedDate.astro'; +import Layout from '../../layouts/Layout.astro'; const posts = (await getCollection('blog')).sort( - (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() + (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(), ); --- -<Layout title='Polyfrost Blog' description='Recieve Polyfrost updates here'> +<Layout title="Polyfrost Blog" description="Recieve Polyfrost updates here"> <section> <ul> { posts.map(post => ( <li> <a href={`blog/${post.slug}/`}> - <img width={720} height={360} src={post.data.heroImage} alt="" /> + <img width={720} height={360} src={post.data.heroImage} alt=""/> <h4 class="title">{post.data.title}</h4> <p class="date"> - <FormattedDate date={post.data.pubDate} /> + <FormattedDate date={post.data.pubDate}/> </p> </a> </li> diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index 6f88bf5..ccc6852 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -1,6 +1,6 @@ --- -import Layout from "@layouts/Layout.astro"; import Section from '@components/base/Section.astro'; +import Layout from '@layouts/Layout.astro'; --- <Layout> <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index 7badc11..e9728a1 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -1,27 +1,27 @@ --- +import Button from '@components/base/Button.astro'; +import Card from '@components/base/Card.astro'; import Header from '@components/base/Header.astro'; -import Logo from '@components/logos/Logo.astro'; +import Paragraph from '@components/base/Paragraph.astro'; import Section from '@components/base/Section.astro'; -import Button from '@components/base/Button.astro'; +import Slider from '@components/base/Slider.astro'; +import Logo from '@components/logos/Logo.astro'; -import Paragraph from '@components/base/Paragraph.astro'; import Layout from '@layouts/Layout.astro'; import { Code } from 'astro:components'; -import Slider from '@components/base/Slider.astro'; -import Card from '@components/base/Card.astro'; --- <Layout> <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> - <Logo size={56} logo="oneconfig.minimal" /> + <Logo size={56} logo="oneconfig.minimal"/> <Header align="center" size="xxl" class="max-w-[600px]"> Meet <b>OneConfig</b>, the library designed for <b>everyone</b>. </Header> <div class="flex flex-row justify-center items-center gap-2"> - <Button href="/projects/oneconfig/download" iconLeft="download" text="Download" /> - <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation" /> + <Button href="/projects/oneconfig/download" iconLeft="download" text="Download"/> + <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> </div> </Section> @@ -33,13 +33,13 @@ import Card from '@components/base/Card.astro'; </div> <div slot="right" class="w-3/4 md:w-auto"> <!-- TODO: make proper file names and alt text --> - <img src="/media/oneconfig/page_media_1.svg" alt="stuff" /> + <img src="/media/oneconfig/page_media_1.svg" alt="stuff"/> </div> </Section> <Section tabindex="0" colReverse={false}> <div slot="left" class="w-1/2 md:w-auto"> - <img src="/media/oneconfig/page_media_2.svg" alt="stuff" /> + <img src="/media/oneconfig/page_media_2.svg" alt="stuff"/> </div> <div slot="right"> @@ -55,13 +55,14 @@ import Card from '@components/base/Card.astro'; </div> <div slot="right" class="w-3/4 md:w-auto"> - <img src="/media/oneconfig/page_media_3.svg" alt="stuff" /> + <img src="/media/oneconfig/page_media_3.svg" alt="stuff"/> </div> </Section> <Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="md:py-20 gap-4 pr-2"> - <div slot="left" class='pr-2'> - <Code code={`public class MyConfig { + <div slot="left" class="pr-2"> + <Code + code={`public class MyConfig { @Switch( name = "Sub Switch", type = OptionType.SWITCH @@ -74,7 +75,8 @@ import Card from '@components/base/Card.astro'; // Do stuff here }); } -}`} lang={'java'}/> +}`} + lang="java"/> </div> <div slot="right" class="flex flex-col gap-2"> @@ -83,7 +85,7 @@ import Card from '@components/base/Card.astro'; With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig. </Paragraph> <div class="flex"> - <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation" /> + <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/> </div> </div> </Section> @@ -95,17 +97,17 @@ import Card from '@components/base/Card.astro'; We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there. </Paragraph> <div class="flex"> - <Button href="/projects/oneconfig/download" iconLeft="download" style="secondary" text="Download" /> + <Button href="/projects/oneconfig/download" iconLeft="download" style="secondary" text="Download"/> </div> </div> <div slot="right"> <!-- TODO: figure out non-arbitrary values --> - <img src="/media/oneconfig/page_media_4.png" class="h-[285px] rounded-2xl" /> + <img src="/media/oneconfig/page_media_4.png" class="h-[285px] rounded-2xl"/> </div> </Section> <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> - <img src="/media/oneconfig/page_media_5.png" class="h-[581px] rounded-2xl" /> + <img src="/media/oneconfig/page_media_5.png" class="h-[581px] rounded-2xl"/> <Header size="xl" align="center" class="w-96">A unified HUD editor</Header> <Paragraph class="w-96 text-center text-gray-400"> Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind. @@ -119,7 +121,7 @@ import Card from '@components/base/Card.astro'; Discover a wide range of mods integrated with OneConfig to enhance your experience. </Paragraph> <div class="flex"> - <Button iconLeft="link-external" text="Discover mods" /> + <Button iconLeft="link-external" text="Discover mods"/> </div> </div> </Section> @@ -148,10 +150,10 @@ import Card from '@components/base/Card.astro'; <div class="grid grid-rows-[repeat(8,_minmax(0,_1fr))] grid-cols-[repeat(7,_minmax(0,_1fr))]"> <!-- TODO: Change placeholder image --> <!-- TODO: Mess around with the sizes to make it look nicer --> - <img src="/media/oneconfig/page_media_4.png" class="rounded-2xl col-[1_/_7] row-[1_/_8]" /> + <img src="/media/oneconfig/page_media_4.png" class="rounded-2xl col-[1_/_7] row-[1_/_8]"/> <div class="rounded-2xl col-[5_/_8] row-[6_/_9] shadow-md bg-white flex flex-col justify-items-start p-8 justify-center"> <Logo logo="oneconfig.logo_text" class="min-w-max"></Logo> - <Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit" /> + <Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/> </div> </div> </Section> diff --git a/apps/website/vitest.config.ts b/apps/website/vitest.config.ts index 85a3538..57b13a0 100644 --- a/apps/website/vitest.config.ts +++ b/apps/website/vitest.config.ts @@ -2,7 +2,6 @@ import { getViteConfig } from 'astro/config'; export default getViteConfig({ - // @ts-expect-error astro moment test: { globals: true, reporters: ['dot'], |