From e9d485fe3b5db8c426ac03b30ed8917df0baa62d Mon Sep 17 00:00:00 2001 From: Pauline Date: Sun, 26 Nov 2023 17:13:07 -0500 Subject: feat(lint): switch to eslint config and formatting (use vscode for autoformat) --- apps/website/src/components/base/Button.astro | 50 ++++----- apps/website/src/components/base/CodeBlock.astro | 42 ------- apps/website/src/components/base/Footer.astro | 5 +- apps/website/src/components/base/Header.astro | 40 +++---- apps/website/src/components/base/Navbar.astro | 34 +++--- .../src/components/base/NavbarElement.astro | 123 +++++++++++---------- apps/website/src/components/base/Paragraph.astro | 32 +++--- .../src/components/base/ScreenOverlay.astro | 16 +-- .../base/ScrollbarOverlayContainer.astro | 16 +-- apps/website/src/components/base/Section.astro | 54 ++++----- apps/website/src/components/base/Tag.astro | 15 ++- apps/website/src/components/icons/Icon.astro | 32 +++--- apps/website/src/components/logos/Logo.astro | 78 ++++++------- 13 files changed, 251 insertions(+), 286 deletions(-) (limited to 'apps/website/src/components') 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; --- {iconLeft && } - {text ? text : } + {text || } {iconRight && } 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 @@ } - - 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 @@ --- - + 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 { - 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}` : ''); --- - - - + + + - \ No newline at end of file + 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}` : ''}`; --- -
-
- {twoColumn ? ( -
- -
+
+
+ {twoColumn + ? ( +
+ +
-
- -
- ) : ( - - )} -
-
+
+ +
+ ) + : ( + + )} +
+
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; --- -
- - - -
- +
+ + + +
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 } --- - + 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.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(/ `${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.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(/ `${key}="${value}"`).join(' ')}`); +} +catch (err) { + console.error(`Error occurred while loading SVG. Logo name is ${logo}.`); console.error(err); } --- - + -- cgit