aboutsummaryrefslogtreecommitdiff
path: root/apps/website/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/website/src')
-rw-r--r--apps/website/src/components/base/Button.astro50
-rw-r--r--apps/website/src/components/base/CodeBlock.astro42
-rw-r--r--apps/website/src/components/base/Footer.astro5
-rw-r--r--apps/website/src/components/base/Header.astro40
-rw-r--r--apps/website/src/components/base/Navbar.astro34
-rw-r--r--apps/website/src/components/base/NavbarElement.astro123
-rw-r--r--apps/website/src/components/base/Paragraph.astro32
-rw-r--r--apps/website/src/components/base/ScreenOverlay.astro16
-rw-r--r--apps/website/src/components/base/ScrollbarOverlayContainer.astro16
-rw-r--r--apps/website/src/components/base/Section.astro54
-rw-r--r--apps/website/src/components/base/Tag.astro15
-rw-r--r--apps/website/src/components/icons/Icon.astro32
-rw-r--r--apps/website/src/components/logos/Logo.astro78
-rw-r--r--apps/website/src/layouts/Layout.astro58
-rw-r--r--apps/website/src/pages/index.astro133
-rw-r--r--apps/website/src/types/Config.d.ts46
16 files changed, 377 insertions, 397 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index 0a4dc9f..438bafd 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -1,27 +1,27 @@
---
-import type { Icons } from "@components/icons/Icon.astro";
-import Icon from "@components/icons/Icon.astro";
-import type { HTMLAttributes } from "astro/types";
+import type { Icons } from '@components/icons/Icon.astro';
+import Icon from '@components/icons/Icon.astro';
+import type { HTMLAttributes } from 'astro/types';
const styles = {
// TODO: adjust active / disabled colors
- primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
- secondary: "bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200",
-}
+ primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4',
+ secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200',
+};
const sizes = {
- sm: "px-4 py-2 text-sm",
- md: "px-5 py-3 text-md",
- lg: "px-6 py-3 text-lg rounded-2xl"
-}
+ sm: 'px-4 py-2 text-sm',
+ md: 'px-5 py-3 text-md',
+ lg: 'px-6 py-3 text-lg rounded-2xl',
+};
const iconSize = {
sm: 15,
md: 18,
- lg: 24
-}
+ lg: 24,
+};
-interface Props extends HTMLAttributes<"button"> {
+interface Props extends HTMLAttributes<'button'> {
style?: keyof typeof styles
size?: keyof typeof sizes
text?: string
@@ -31,28 +31,28 @@ interface Props extends HTMLAttributes<"button"> {
}
const {
- style = "primary",
- size = "md",
- text = "",
- iconLeft = "",
- iconRight = "",
+ style = 'primary',
+ size = 'md',
+ text = '',
+ iconLeft = '',
+ iconRight = '',
...rest
} = Astro.props;
const className = [
- "flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4",
- "rounded-xl font-medium",
+ 'flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4',
+ 'rounded-xl font-medium',
styles[style],
sizes[size],
- "transition-colors",
- rest.class
-].join(" ");
+ 'transition-colors',
+ rest.class,
+].join(' ');
-const Element = rest.href ? "a" : "button" as any;
+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 ? text : <slot />}
+ {text || <slot />}
{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
</Element>
diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro
index ceeecc0..fd2cdd6 100644
--- a/apps/website/src/components/base/CodeBlock.astro
+++ b/apps/website/src/components/base/CodeBlock.astro
@@ -19,45 +19,3 @@
<code></code>
<code><cd>&#125;</cd></code>
</pre>
-
-<style>
- /* thanks stackoverflow! https://stackoverflow.com/a/41309213 */
- pre {
- white-space: pre-wrap;
- padding: 10px;
- color: #546E7A;
- }
- pre::before {
- counter-reset: listing;
- }
- pre code {
- counter-increment: listing;
- text-align: left;
- float: left;
- clear: left;
- font-family: 'Roboto Mono', monospace !important;
- font-size: 12px;
- height: 1.5em;
- }
- pre code::before {
- content: counter(listing) " ";
- display: inline-block;
- float: left;
- height: 3em;
- width: 2em;
- padding: 0;
- margin-left: auto;
- margin-right: 10px;
- text-align: right;
- font-family: 'Roboto Mono', monospace !important;
- font-size: 12px;
- }
-
- ca { color: #F07178; font-family: inherit; }
- cb { color: #C792EA; font-family: inherit; }
- cc { color: #82AAFF; font-family: inherit; }
- cd { color: #EFF; font-family: inherit; }
- ce { color: #89DDFF; font-family: inherit; }
- cf { color: #C3E88D; font-family: inherit; }
- cg { color: #F78C6C; font-family: inherit; }
-</style>
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index b24db5f..9bc1c61 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,6 +2,5 @@
---
-<footer class="flex min-h-[400px] bg-blue-100 mt-4">
-
-</footer>
+ <footer class="flex min-h-[400px] bg-blue-100 mt-4">
+ </footer>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index d35ad9f..70dc799 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -1,40 +1,40 @@
---
-import type { HTMLAttributes } from "astro/types"
+import type { HTMLAttributes } from 'astro/types';
const sizes = {
- "xxl": "h1",
- "xl": "h2",
- "lg": "h2",
- "md": "h3",
- "sm": "h4",
- "xs": "h5",
- "xxs": "h6"
+ xxl: 'h1',
+ xl: 'h2',
+ lg: 'h2',
+ md: 'h3',
+ sm: 'h4',
+ xs: 'h5',
+ xxs: 'h6',
};
-type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface Props extends HTMLAttributes<Headers> {
- size?: keyof typeof sizes;
- align?: "left" | "center" | "right" | "inherit";
+ size?: keyof typeof sizes
+ align?: 'left' | 'center' | 'right' | 'inherit'
}
const {
- size = "lg",
- align = "inherit",
+ size = 'lg',
+ align = 'inherit',
...attr
} = Astro.props;
const Element = sizes[size] as any; // Unfortunately gotta do this
-const className = (align == "inherit" ? "" : `text-${align} `)
- + (size == "xxl" ? " page-header" : "")
- + (attr.class ? ` ${attr.class}` : "");
+const className = (align == 'inherit' ? '' : `text-${align} `)
+ + (size == 'xxl' ? ' page-header' : '')
+ + (attr.class ? ` ${attr.class}` : '');
---
-<Element {...attr} class={className}>
- <slot />
-</Element>
+ <Element {...attr} class={className}>
+ <slot />
+ </Element>
-<style>
+ <style>
h1 {
font-size: theme("fontSize.header-lg");
&.page-header {
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
index a3a82fe..8fa98df 100644
--- a/apps/website/src/components/base/Navbar.astro
+++ b/apps/website/src/components/base/Navbar.astro
@@ -1,21 +1,21 @@
---
-import config from "config";
-import type { Config } from "@webtypes/Config";
-import NavbarElement from "./NavbarElement.astro";
+import config from 'config';
+import type { Config } from '@webtypes/Config';
+import NavbarElement from './NavbarElement.astro';
---
-<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
- <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} />
- ))}
- </ul>
- <ul class="flex flex-row justify-end gap-4">
- {(config as Config).navbar.right.map((element, index) => (
- <NavbarElement {element} {index} />
- ))}
- </ul>
- </nav>
-</div>
+ <div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+ <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} />
+ ))}
+ </ul>
+ <ul class="flex flex-row justify-end gap-4">
+ {(config as Config).navbar.right.map((element, index) => (
+ <NavbarElement {element} {index} />
+ ))}
+ </ul>
+ </nav>
+ </div>
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index b0f1282..17c3662 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -1,45 +1,46 @@
---
-import ChevronDown from "@components/icons/ChevronDown.svg";
-import type { LogoType, NavbarElement } from "@webtypes/Config";
-import ScreenOverlay from "./ScreenOverlay.astro";
-import Header from "./Header.astro";
-import Tag from "./Tag.astro";
-import Logo from "@components/logos/Logo.astro";
-import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
-import Icon from "@components/icons/Icon.astro";
+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 Header from './Header.astro';
+import Tag from './Tag.astro';
+import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';
interface Props {
- element: NavbarElement;
- index: number;
+ element: NavbarElement
+ index: number
}
const {
- element,
- index
+ element,
+ index,
} = Astro.props;
---
-<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
- <label for={`navbar-input-${index}`} class="group">
+ <li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+ <label for={`navbar-input-${index}`} class="group">
- {element.path ? (
- <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" />}
- </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" />}
- </p>
- )}
+ {element.path
+ ? (
+ <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" />}
+ </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" />}
+ </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">
- <div class={`
+ {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">
+ <div class={`
transition-opacity
fixed md:absolute right-0 max-sm:bottom-0
max-sm:overflow-hidden
@@ -51,8 +52,11 @@ const {
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={`
+ `}
+ >
+ <ScrollbarOverlayContainer
+ tabindex="-1"
+ class={`
bg-gray-50
rounded-t-lg md:rounded-lg
transition-transform
@@ -60,30 +64,31 @@ const {
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>
+ `}
+ >
+ <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="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>
- </div>
- )}
- </label>
-</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>
+ </div>
+ )}
+ </label>
+ </li>
diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro
index 08fbbdd..832b296 100644
--- a/apps/website/src/components/base/Paragraph.astro
+++ b/apps/website/src/components/base/Paragraph.astro
@@ -1,31 +1,31 @@
---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
const sizes = {
- xs: "text-xs",
- sm: "text-sm",
- md: "text-md",
- lg: "text-lg",
- xl: "text-xl"
-}
+ xs: 'text-xs',
+ sm: 'text-sm',
+ md: 'text-md',
+ lg: 'text-lg',
+ xl: 'text-xl',
+};
-interface Props extends HTMLAttributes<"p"> {
- text?: string,
+interface Props extends HTMLAttributes<'p'> {
+ text?: string
size?: keyof typeof sizes
}
const {
- text = "",
- size = "md",
+ text = '',
+ size = 'md',
...props
} = Astro.props;
const className = [
sizes[size],
- props.class
-].join(" ");
+ props.class,
+].join(' ');
---
-<p class={className} {...props}>
- {text ? text : <slot />}
-</p>
+ <p class={className} {...props}>
+ {text || <slot />}
+ </p>
diff --git a/apps/website/src/components/base/ScreenOverlay.astro b/apps/website/src/components/base/ScreenOverlay.astro
index 7be8bc5..1b97152 100644
--- a/apps/website/src/components/base/ScreenOverlay.astro
+++ b/apps/website/src/components/base/ScreenOverlay.astro
@@ -1,16 +1,16 @@
---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
-interface Props extends HTMLAttributes<"div"> {
- zIndex?: number;
+interface Props extends HTMLAttributes<'div'> {
+ zIndex?: number
}
const {
- zIndex = 0,
- ...rest
+ zIndex = 0,
+ ...rest
} = Astro.props;
---
-<div class="pointer-events-none absolute left-0 top-0">
- <div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
-</div> \ No newline at end of file
+ <div class="pointer-events-none absolute left-0 top-0">
+ <div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
+ </div>
diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
index d8d315d..84bedf5 100644
--- a/apps/website/src/components/base/ScrollbarOverlayContainer.astro
+++ b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
@@ -1,21 +1,21 @@
---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
-interface Props extends HTMLAttributes<"div"> {
+interface Props extends HTMLAttributes<'div'> {
}
const { ...attr } = Astro.props;
---
-<div {...attr}>
- <slot></slot>
-</div>
+ <div {...attr}>
+ <slot></slot>
+ </div>
-<style>
+ <style>
@media (hover: hover) {
div {
-
+
}
div::-webkit-scrollbar {
@@ -48,4 +48,4 @@ const { ...attr } = Astro.props;
background-color: #00000040;
}
}
-</style> \ No newline at end of file
+</style>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index bb7a062..51d9fa1 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -1,40 +1,42 @@
---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
-interface Props extends HTMLAttributes<"section"> {
- maxWidth?: "none" | String;
- colReverse?: boolean;
- wrapperClass?: string;
- wFull?: boolean;
+interface Props extends HTMLAttributes<'section'> {
+ maxWidth?: 'none' | String
+ colReverse?: boolean
+ wrapperClass?: string
+ wFull?: boolean
}
const {
- maxWidth = "1080px",
+ maxWidth = '1080px',
colReverse = true,
- wrapperClass = "",
+ wrapperClass = '',
wFull = true,
...props
} = Astro.props;
-const twoColumn = Astro.slots.has("left") || Astro.slots.has("right");
+const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
-const className = `max-w-[${maxWidth}] ${wFull ? "w-full" : ""} 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}` : "");
+const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : ''} 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}` : ''}`;
---
-<section class={`w-full flex justify-center ${wrapperClass ?? ""}`}>
- <div class={className} {...props}>
- {twoColumn ? (
- <div class="flex flex-col items-start text-left relative">
- <slot name="left"></slot>
- </div>
+ <section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
+ <div class={className} {...props}>
+ {twoColumn
+ ? (
+ <div class="flex flex-col items-start text-left relative">
+ <slot name="left"></slot>
+ </div>
- <div class="flex flex-col items-start text-left relative">
- <slot name="right"></slot>
- </div>
- ) : (
- <slot></slot>
- )}
- </div>
-</section>
+ <div class="flex flex-col items-start text-left relative">
+ <slot name="right"></slot>
+ </div>
+ )
+ : (
+ <slot></slot>
+ )}
+ </div>
+ </section>
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
index e6fd34f..b903344 100644
--- a/apps/website/src/components/base/Tag.astro
+++ b/apps/website/src/components/base/Tag.astro
@@ -1,14 +1,13 @@
---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
-interface Props extends HTMLAttributes<"span"> {}
+interface Props extends HTMLAttributes<'span'> {}
const { ...attr } = Astro.props;
---
-<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
- <span {...attr}>
- <slot></slot>
- </span>
-</div>
-
+ <div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+ <span {...attr}>
+ <slot></slot>
+ </span>
+ </div>
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index bf2b362..b36d412 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -1,28 +1,26 @@
---
-export type Icons = "chevron-down" | "download" | "book-open";
-
import { parse } from 'node-html-parser';
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
+
+export type Icons = 'chevron-down' | 'download' | 'book-open';
-interface Props extends HTMLAttributes<"svg"> {
- icon: Icons;
- size?: number | [number, number];
+interface Props extends HTMLAttributes<'svg'> {
+ icon: Icons
+ size?: number | [number, number]
}
async function getSVG(name: string) {
const file = await import(`./impl/${name}.svg?raw` /* @vite-ignore */);
- if (!file) {
+ if (!file)
throw new Error(`${name} not found`);
- }
const content = parse(file.default);
const svg = content.querySelector('svg');
- if (!svg) {
+ if (!svg)
throw new Error(`${name} is not a valid SVG`);
- }
const { attributes, innerHTML } = svg;
@@ -39,13 +37,12 @@ const {
} = Astro.props as Props;
let svgAttributes = {};
-let html = "";
+let html = '';
try {
const sizeAttributes = () => {
- if (!size) {
+ if (!size)
return {};
- }
if (Array.isArray(size)) {
return {
@@ -58,7 +55,7 @@ try {
width: size,
height: size,
};
- }
+ };
const { attributes: baseAttributes, innerHTML } = await getSVG(icon);
svgAttributes = {
@@ -69,9 +66,10 @@ try {
const colorRegex = /(fill|stroke)=\"([^"]*)\"/g;
html = innerHTML.replaceAll(colorRegex, '$1="currentColor"');
-} catch (err) {
-
+}
+catch (err) {
+ // ignored
}
---
-<svg {...svgAttributes} set:html={html}></svg>
+ <svg {...svgAttributes} set:html={html}></svg>
diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro
index 0b72b91..ad41aad 100644
--- a/apps/website/src/components/logos/Logo.astro
+++ b/apps/website/src/components/logos/Logo.astro
@@ -1,51 +1,55 @@
---
-import type { LogoType } from "@webtypes/Config";
-import type { HTMLAttributes } from "astro/types";
+import type { LogoType } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
-export interface Props extends HTMLAttributes<"svg"> {
- logo: LogoType,
- size?: number | [number, number],
- silent?: boolean,
+export interface Props extends HTMLAttributes<'svg'> {
+ logo: LogoType
+ size?: number | [number, number]
+ silent?: boolean
}
const {
- logo,
- silent = false,
- size = undefined,
- ...attr
+ logo,
+ silent = false,
+ size = undefined,
+ ...attr
} = Astro.props;
let svg: string | undefined;
try {
- if (logo == undefined) return;
- const dir = "../../../public/media";
- svg = (await import(`${dir}/${logo.replaceAll(".", "/")}.svg?raw` /* @vite-ignore */)).default;
-
- if (svg == undefined) return;
-
- if (typeof size == "number" || Array.isArray(size)) {
- // SVG main element regex
- const svgElementRegex = /<svg[^>]*>/;
-
- svg = svg.replace(svgElementRegex, (match) => {
- let newMatch = match;
- if (typeof size == "number") {
- newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`);
- newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`);
- } else if (Array.isArray(size)) {
- newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`);
- newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`);
- }
- return newMatch;
- });
- }
-
- svg = svg.replace(/<svg/, `<svg ${Object.entries(attr).map(([key, value]) => `${key}="${value}"`).join(" ")}`);
-} catch (err) {
- console.error(`Error occurred while loading SVG. Logo name is ${logo}.`)
+ if (logo == undefined)
+ return;
+ const dir = '../../../public/media';
+ svg = (await import(`${dir}/${logo.replaceAll('.', '/')}.svg?raw` /* @vite-ignore */)).default;
+
+ if (svg == undefined)
+ return;
+
+ if (typeof size == 'number' || Array.isArray(size)) {
+ // SVG main element regex
+ const svgElementRegex = /<svg[^>]*>/;
+
+ svg = svg.replace(svgElementRegex, (match) => {
+ let newMatch = match;
+ if (typeof size == 'number') {
+ newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`);
+ newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`);
+ }
+ else if (Array.isArray(size)) {
+ newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`);
+ newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`);
+ }
+ return newMatch;
+ });
+ }
+
+ svg = svg.replace(/<svg/, `<svg ${Object.entries(attr).map(([key, value]) => `${key}="${value}"`).join(' ')}`);
+}
+catch (err) {
+ console.error(`Error occurred while loading SVG. Logo name is ${logo}.`);
console.error(err);
}
---
-<Fragment set:html={svg} />
+ <Fragment set:html={svg} />
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index 51b9922..c4a2ff4 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -1,42 +1,42 @@
---
-import "../styles/global.css";
-import Navbar from "../components/base/Navbar.astro";
-import Favicon from "/media/polyfrost/minimal_bg.svg?url";
-import Footer from "@components/base/Footer.astro";
+import '../styles/global.css';
+import Footer from '@components/base/Footer.astro';
+import Navbar from '../components/base/Navbar.astro';
+import Favicon from '/media/polyfrost/minimal_bg.svg?url';
interface Props {
- title?: string;
- favicon?: string;
+ title?: string
+ favicon?: string
}
const {
- title = 'Polyfrost',
- favicon = Favicon
+ title = 'Polyfrost',
+ favicon = Favicon,
} = Astro.props;
---
<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="description" content="Official website for Polyfrost." />
- <meta name="viewport" content="width=device-width" />
- <link rel="icon" type="image/svg+xml" href={favicon} />
- <meta name="generator" content={Astro.generator} />
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="description" content="Official website for Polyfrost." />
+ <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>
+ <title>{title}</title>
+ </head>
- <body class="bg-gray-50">
- <Navbar />
- <main class="min-h-screen h-auto">
- <slot />
- </main>
- <Footer />
- </body>
-</html>
+ <body class="bg-gray-50">
+ <Navbar />
+ <main class="min-h-screen h-auto">
+ <slot />
+ </main>
+ <Footer />
+ </body>
+ </html>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 30b3ee6..6466d03 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,73 +1,88 @@
---
-import Header from "@components/base/Header.astro";
-import Layout from "../layouts/Layout.astro";
-import Logo from "@components/logos/Logo.astro";
-import Section from "@components/base/Section.astro";
-import Button from "@components/base/Button.astro";
+import Header from '@components/base/Header.astro';
+import Logo from '@components/logos/Logo.astro';
+import Section from '@components/base/Section.astro';
+import Button from '@components/base/Button.astro';
-import Paragraph from "@components/base/Paragraph.astro";
-import CodeBlock from "@components/base/CodeBlock.astro";
+import Paragraph from '@components/base/Paragraph.astro';
+import Layout from '../layouts/Layout.astro';
----
+import { Code } from 'astro:components';
-<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" />
- <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 iconLeft="download" text="Download" />
- <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
- </div>
- </Section>
+---
- <div class="flex flex-col gap-40">
- <Section tabindex="0">
- <div slot="left">
- <Header size="lg" class="text-navy-peony">Forge is complicated</Header>
- <Paragraph size="sm" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph>
- </div>
- <div slot="right" class="w-3/4 md:w-auto">
- <!-- TODO: make proper file names and alt text -->
- <img src="/media/index/index1.svg" alt="stuff" />
+ <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" />
+ <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 iconLeft="download" text="Download" />
+ <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
</div>
</Section>
- <Section tabindex="0" colReverse={false}>
- <div slot="left" class="w-1/2 md:w-auto">
- <img src="/media/index/index2.svg" alt="stuff" />
- </div>
+ <div class="flex flex-col gap-40">
+ <Section tabindex="0">
+ <div slot="left">
+ <Header size="lg" class="text-navy-peony">Forge is complicated</Header>
+ <Paragraph size="sm" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph>
+ </div>
+ <div slot="right" class="w-3/4 md:w-auto">
+ <!-- TODO: make proper file names and alt text -->
+ <img src="/media/index/index1.svg" alt="stuff" />
+ </div>
+ </Section>
- <div slot="right">
- <Header size="lg" class="text-navy-peony">Clients are locked-down</Header>
- <Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
- </div>
- </Section>
+ <Section tabindex="0" colReverse={false}>
+ <div slot="left" class="w-1/2 md:w-auto">
+ <img src="/media/index/index2.svg" alt="stuff" />
+ </div>
- <Section tabindex="0">
- <div slot="left">
- <Header size="lg" class="text-navy-peony">Best of both worlds</Header>
- <Paragraph size="sm" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph>
- </div>
+ <div slot="right">
+ <Header size="lg" class="text-navy-peony">Clients are locked-down</Header>
+ <Paragraph size="sm" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
+ </div>
+ </Section>
- <div slot="right" class="w-3/4 md:w-auto">
- <img src="/media/index/index3.svg" alt="stuff" />
- </div>
- </Section>
+ <Section tabindex="0">
+ <div slot="left">
+ <Header size="lg" class="text-navy-peony">Best of both worlds</Header>
+ <Paragraph size="sm" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph>
+ </div>
- <Section maxWidth="1100px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-8">
- <div slot="left">
- <CodeBlock />
- </div>
+ <div slot="right" class="w-3/4 md:w-auto">
+ <img src="/media/index/index3.svg" alt="stuff" />
+ </div>
+ </Section>
- <div slot="right" class="flex flex-col gap-2">
- <Header size="xl" class="text-blue-500">Written for developers</Header>
- <Paragraph class="text-blue-400 max-w-[500px]">
- With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something
- </Paragraph>
- <div class="flex">
- <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
+ <Section maxWidth="1000px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2">
+ <div slot="left" class='pr-2'>
+ <Code code={`
+ public class MyConfig {
+ @Switch(name = "Sub Switch", type = OptionType.SWITCH)
+ public static boolean subSwitch = false;
+
+ public MyConfig() {
+ super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
+ addDependency("subSwitch", () -> {
+ // Do stuff here
+ });
+ }
+ }
+ `} lang={'java'}/>
</div>
- </div>
- </Section>
- </div>
-</Layout>
+
+ <div slot="right" class="flex flex-col gap-2">
+ <Header size="xl" class="text-blue-500">Written for developers</Header>
+ <Paragraph class="text-blue-400 max-w-[500px]">
+ With Polyfrost's simple APIs, it's easy to integrate your mods into Polyfrost something
+ </Paragraph>
+ <div class="flex">
+ <Button href="/documentation" iconLeft="book-open" style="secondary" text="Documentation" />
+ </div>
+ </div>
+ </Section>
+ </div>
+ </Layout>
diff --git a/apps/website/src/types/Config.d.ts b/apps/website/src/types/Config.d.ts
index 2781b1b..8d76ff7 100644
--- a/apps/website/src/types/Config.d.ts
+++ b/apps/website/src/types/Config.d.ts
@@ -1,34 +1,34 @@
-import { type configConst } from 'config';
+import type { configConst } from 'config';
export type LogoType = (typeof configConst.logos)[number];
export interface Project {
- name: string;
- description: string;
- logo?: LogoType;
- tag?: string;
+ name: string
+ description: string
+ logo?: LogoType
+ tag?: string
}
-export type NavbarDropdown = {
- name: string;
- description: string;
- path: string;
- logo?: LogoType;
- tag?: string;
-};
+export interface NavbarDropdown {
+ name: string
+ description: string
+ path: string
+ logo?: LogoType
+ tag?: string
+}
-export type NavbarElement = {
- text?: string;
- logo?: [string, number];
- path?: string;
- dropdown?: NavbarDropdown[];
-};
+export interface NavbarElement {
+ text?: string
+ logo?: [string, number]
+ path?: string
+ dropdown?: NavbarDropdown[]
+}
export interface Config {
- projects: Project[];
- logos: string[];
+ projects: Project[]
+ logos: string[]
navbar: {
- left: NavbarElement[];
- right: NavbarElement[];
- };
+ left: NavbarElement[]
+ right: NavbarElement[]
+ }
}
generated by cgit (git 2.46.0) at 2024-11-22 12:43:41 +0000