chore: replace eslint & prettier w/ biomejs (#21)
* chore: replace eslint & prettier w/ biomejs * fix syntax error in ci.yml workflow * ensure that build CI jobs only run if check job succeeds to save resources
This commit is contained in:
parent
d67e4c81ad
commit
e319626a1a
44 changed files with 2408 additions and 5691 deletions
|
|
@ -1,25 +1,25 @@
|
|||
import { stylesheet } from "typestyle";
|
||||
import { Component, createElement } from "websnacks";
|
||||
import { type Component, createElement } from "websnacks";
|
||||
|
||||
const styles = stylesheet({
|
||||
header: {
|
||||
background: "#6c42bd",
|
||||
color: "#fff",
|
||||
padding: "32px",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 1px 8px -3px #000",
|
||||
},
|
||||
headline: {
|
||||
fontSize: "28px",
|
||||
},
|
||||
header: {
|
||||
background: "#6c42bd",
|
||||
color: "#fff",
|
||||
padding: "32px",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 1px 8px -3px #000",
|
||||
},
|
||||
headline: {
|
||||
fontSize: "28px",
|
||||
},
|
||||
});
|
||||
|
||||
export interface HeaderProps {
|
||||
headline: string;
|
||||
headline: string;
|
||||
}
|
||||
|
||||
export const Header: Component<HeaderProps> = ({ headline }) => (
|
||||
<header className={styles.header}>
|
||||
<h1 className={styles.headline}>{headline}</h1>
|
||||
</header>
|
||||
<header className={styles.header}>
|
||||
<h1 className={styles.headline}>{headline}</h1>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { normalize } from "csstips";
|
||||
import { stylesheet } from "typestyle";
|
||||
import { Component, createElement } from "websnacks";
|
||||
import { type Component, createElement } from "websnacks";
|
||||
|
||||
import { stylesheetPath } from "../config";
|
||||
import { Header } from "./header";
|
||||
|
|
@ -9,60 +9,57 @@ import { Navbar } from "./navbar";
|
|||
normalize();
|
||||
|
||||
const styles = stylesheet({
|
||||
html: {
|
||||
height: "100%",
|
||||
},
|
||||
wrapper: {
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
margin: 0,
|
||||
},
|
||||
main: {
|
||||
flex: 1,
|
||||
},
|
||||
mainBody: {
|
||||
padding: "16px",
|
||||
},
|
||||
navbar: {
|
||||
display: "flex",
|
||||
flex: "0 0 auto",
|
||||
zIndex: 9,
|
||||
},
|
||||
html: {
|
||||
height: "100%",
|
||||
},
|
||||
wrapper: {
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
margin: 0,
|
||||
},
|
||||
main: {
|
||||
flex: 1,
|
||||
},
|
||||
mainBody: {
|
||||
padding: "16px",
|
||||
},
|
||||
navbar: {
|
||||
display: "flex",
|
||||
flex: "0 0 auto",
|
||||
zIndex: 9,
|
||||
},
|
||||
});
|
||||
|
||||
const SITE_TITLE = "Example Site";
|
||||
|
||||
export interface LayoutProps {
|
||||
headline?: string;
|
||||
headline?: string;
|
||||
}
|
||||
|
||||
export const Layout: Component<LayoutProps> = ({ children, headline }) => (
|
||||
<html className={styles.html} lang="en-US">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<title>
|
||||
{SITE_TITLE}
|
||||
{headline && ` | ${headline}`}
|
||||
</title>
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1"
|
||||
/>
|
||||
<link rel="stylesheet" href={stylesheetPath} />
|
||||
</head>
|
||||
<html className={styles.html} lang="en-US">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<title>
|
||||
{SITE_TITLE}
|
||||
{headline && ` | ${headline}`}
|
||||
</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href={stylesheetPath} />
|
||||
</head>
|
||||
|
||||
<body className={styles.wrapper}>
|
||||
<div className={styles.navbar}>
|
||||
<Navbar />
|
||||
</div>
|
||||
<body className={styles.wrapper}>
|
||||
<div className={styles.navbar}>
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<main className={styles.main}>
|
||||
<Header headline={headline || SITE_TITLE} />
|
||||
<main className={styles.main}>
|
||||
<Header headline={headline || SITE_TITLE} />
|
||||
|
||||
<div className={styles.mainBody}>{children}</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<div className={styles.mainBody}>{children}</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,43 +1,43 @@
|
|||
import { stylesheet } from "typestyle";
|
||||
import { Component, createElement } from "websnacks";
|
||||
import { type Component, createElement } from "websnacks";
|
||||
|
||||
const styles = stylesheet({
|
||||
navbar: {
|
||||
minWidth: "140px",
|
||||
borderRight: "1px solid #ddd",
|
||||
background: "#fff",
|
||||
},
|
||||
sectionTitle: {
|
||||
color: "#333",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #333",
|
||||
padding: "6px",
|
||||
margin: "0 4px",
|
||||
fontSize: "18px",
|
||||
},
|
||||
linksList: {
|
||||
padding: "3px 16px 0",
|
||||
},
|
||||
linksListItem: {
|
||||
padding: "6px",
|
||||
},
|
||||
navbar: {
|
||||
minWidth: "140px",
|
||||
borderRight: "1px solid #ddd",
|
||||
background: "#fff",
|
||||
},
|
||||
sectionTitle: {
|
||||
color: "#333",
|
||||
textAlign: "center",
|
||||
borderBottom: "1px solid #333",
|
||||
padding: "6px",
|
||||
margin: "0 4px",
|
||||
fontSize: "18px",
|
||||
},
|
||||
linksList: {
|
||||
padding: "3px 16px 0",
|
||||
},
|
||||
linksListItem: {
|
||||
padding: "6px",
|
||||
},
|
||||
});
|
||||
|
||||
const links = [
|
||||
{ title: "Home", href: "/" },
|
||||
{ title: "Projects", href: "/projects" },
|
||||
{ title: "Home", href: "/" },
|
||||
{ title: "Projects", href: "/projects" },
|
||||
];
|
||||
|
||||
export const Navbar: Component = () => (
|
||||
<nav className={styles.navbar}>
|
||||
<h2 className={styles.sectionTitle}>Navigation</h2>
|
||||
<nav className={styles.navbar}>
|
||||
<h2 className={styles.sectionTitle}>Navigation</h2>
|
||||
|
||||
<ol className={styles.linksList}>
|
||||
{links.map(({ title, href }) => (
|
||||
<li className={styles.linksListItem}>
|
||||
<a href={href}>{title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
<ol className={styles.linksList}>
|
||||
{links.map(({ title, href }) => (
|
||||
<li className={styles.linksListItem}>
|
||||
<a href={href}>{title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
|
|
|
|||
1654
examples/personal-site/package-lock.json
generated
1654
examples/personal-site/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"name": "websnacks-example-personal-site",
|
||||
"scripts": {
|
||||
"build": "websnacks -r ts-node/register build",
|
||||
"dev": "websnacks -r ts-node/register dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstips": "^1.2.0",
|
||||
"ts-node": "^8.10.1",
|
||||
"typestyle": "^2.1.0",
|
||||
"websnacks": "../../"
|
||||
}
|
||||
"name": "websnacks-example-personal-site",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "websnacks -r ts-node/register build",
|
||||
"dev": "websnacks -r ts-node/register dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstips": "^1.2.0",
|
||||
"ts-node": "^8.10.1",
|
||||
"typestyle": "^2.1.0",
|
||||
"websnacks": "../../"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
import { Component, createElement } from "websnacks";
|
||||
import { type Component, createElement } from "websnacks";
|
||||
|
||||
import { Layout } from "../components/layout";
|
||||
|
||||
export const page: Component = () => (
|
||||
<Layout>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
|
||||
dapibus condimentum mauris et egestas. Quisque orci nulla, consequat
|
||||
at erat laoreet, malesuada sodales nisi. Sed in lorem semper lorem
|
||||
placerat fermentum a id arcu. Curabitur non aliquam tellus, sed
|
||||
auctor lacus. Nunc sit amet lectus ultrices, sodales nisl sit amet,
|
||||
luctus nisl. Nunc mollis imperdiet quam, eget sollicitudin leo
|
||||
tincidunt vel. Duis felis dui, imperdiet aliquam bibendum sed,
|
||||
auctor et dolor. Vivamus odio ipsum, venenatis in felis sed, aliquam
|
||||
dictum turpis. Pellentesque pellentesque consequat neque, id
|
||||
imperdiet diam molestie nec. Nullam ut vestibulum est. Pellentesque
|
||||
orci urna, porta vel porta quis, semper ut enim. Donec sit amet urna
|
||||
arcu. Nam tincidunt fermentum ligula a pharetra.{" "}
|
||||
</p>
|
||||
</Layout>
|
||||
<Layout>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus
|
||||
condimentum mauris et egestas. Quisque orci nulla, consequat at erat
|
||||
laoreet, malesuada sodales nisi. Sed in lorem semper lorem placerat
|
||||
fermentum a id arcu. Curabitur non aliquam tellus, sed auctor lacus. Nunc
|
||||
sit amet lectus ultrices, sodales nisl sit amet, luctus nisl. Nunc mollis
|
||||
imperdiet quam, eget sollicitudin leo tincidunt vel. Duis felis dui,
|
||||
imperdiet aliquam bibendum sed, auctor et dolor. Vivamus odio ipsum,
|
||||
venenatis in felis sed, aliquam dictum turpis. Pellentesque pellentesque
|
||||
consequat neque, id imperdiet diam molestie nec. Nullam ut vestibulum est.
|
||||
Pellentesque orci urna, porta vel porta quis, semper ut enim. Donec sit
|
||||
amet urna arcu. Nam tincidunt fermentum ligula a pharetra.{" "}
|
||||
</p>
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import { stylesheet } from "typestyle";
|
||||
import { Component, createElement } from "websnacks";
|
||||
import { type Component, createElement } from "websnacks";
|
||||
|
||||
import { Layout } from "../components/layout";
|
||||
|
||||
const styles = stylesheet({
|
||||
projectsGrid: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
width: "25%",
|
||||
},
|
||||
projectsGrid: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
width: "25%",
|
||||
},
|
||||
});
|
||||
|
||||
export const page: Component = () => (
|
||||
<Layout>
|
||||
<h1>Projects</h1>
|
||||
<Layout>
|
||||
<h1>Projects</h1>
|
||||
|
||||
<div className={styles.projectsGrid}>
|
||||
<div>Project 1</div>
|
||||
<div>Project 2</div>
|
||||
<div>Project 3</div>
|
||||
<div>Project 4</div>
|
||||
<div>Project 5</div>
|
||||
</div>
|
||||
</Layout>
|
||||
<div className={styles.projectsGrid}>
|
||||
<div>Project 1</div>
|
||||
<div>Project 2</div>
|
||||
<div>Project 3</div>
|
||||
<div>Project 4</div>
|
||||
<div>Project 5</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"jsxFactory": "createElement",
|
||||
"target": "ES2018",
|
||||
"lib": ["ES2018"],
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["components/**/*", "pages/**/*"]
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"jsxFactory": "createElement",
|
||||
"target": "ES2018",
|
||||
"lib": ["ES2018"],
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["components/**/*", "pages/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
import { promises as fs } from "fs";
|
||||
import * as path from "path";
|
||||
import { Config } from "websnacks";
|
||||
import { promises as fs } from "node:fs";
|
||||
import * as path from "node:path";
|
||||
import type { Config } from "websnacks";
|
||||
|
||||
import { stylesheetPath } from "./config";
|
||||
|
||||
const config: Config = {
|
||||
// Watch additional files and folders for changes when the dev server is
|
||||
// running.
|
||||
watch: ["components/", "config.ts"],
|
||||
// Hooks to execute after certain rendering events. Currently only
|
||||
// afterSiteRender is supported.
|
||||
hooks: {
|
||||
async afterSiteRender({ outDir }): Promise<void> {
|
||||
// NOTE: we dynamically import typestyle so that the global style
|
||||
// registry is properly updated once all pages are reloaded in
|
||||
// dev. We could also create a typestyle object in config.ts,
|
||||
// or even multiple objects to split up our styles into e.g. a
|
||||
// critical-path.css and noncrticial.css.
|
||||
const { getStyles } = await import("typestyle");
|
||||
const styles = getStyles();
|
||||
await fs.writeFile(path.join(outDir, stylesheetPath), styles);
|
||||
},
|
||||
},
|
||||
// Watch additional files and folders for changes when the dev server is
|
||||
// running.
|
||||
watch: ["components/", "config.ts"],
|
||||
// Hooks to execute after certain rendering events. Currently only
|
||||
// afterSiteRender is supported.
|
||||
hooks: {
|
||||
async afterSiteRender({ outDir }): Promise<void> {
|
||||
// NOTE: we dynamically import typestyle so that the global style
|
||||
// registry is properly updated once all pages are reloaded in
|
||||
// dev. We could also create a typestyle object in config.ts,
|
||||
// or even multiple objects to split up our styles into e.g. a
|
||||
// critical-path.css and noncrticial.css.
|
||||
const { getStyles } = await import("typestyle");
|
||||
const styles = getStyles();
|
||||
await fs.writeFile(path.join(outDir, stylesheetPath), styles);
|
||||
},
|
||||
},
|
||||
};
|
||||
export = config;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue