From 8f90133e1e93703690b26e6ce280d6ab8fdfd470 Mon Sep 17 00:00:00 2001 From: Henrique Ramos Date: Wed, 26 Feb 2025 21:05:19 -0300 Subject: [PATCH] chore: use space instead of tab for formatting --- .vscode/extensions.json | 1 - .vscode/settings.json | 14 +- astro.config.mjs | 8 +- biome.json | 56 ++-- src/layouts/SlideLayout.astro | 6 +- src/pages/[id].astro | 2 +- src/pages/index.astro | 4 +- .../flexbox/components/CSSPropertyDemo.svelte | 36 +-- src/slides/statex-gamedev/index.astro | 10 +- src/theme/index.css | 247 +++++++++--------- src/theme/variables.css | 56 ++-- src/utils/getAstroPages.ts | 36 +-- src/utils/getSlides.ts | 21 +- svelte.config.js | 6 +- tsconfig.json | 42 +-- 15 files changed, 278 insertions(+), 267 deletions(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index d6c5f21..22a1505 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,4 @@ { "recommendations": ["astro-build.astro-vscode"], - "" "unwantedRecommendations": [] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 561f047..78a4286 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,9 +1,9 @@ { - "editor.defaultFormatter": "biomejs.biome", - // allow autocomplete for ArkType expressions like "string | num" - "editor.quickSuggestions": { - "strings": "on" - }, - // prioritize ArkType's "type" for autoimports - "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"] + "editor.defaultFormatter": "biomejs.biome", + // allow autocomplete for ArkType expressions like "string | num" + "editor.quickSuggestions": { + "strings": "on" + }, + // prioritize ArkType's "type" for autoimports + "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"] } diff --git a/astro.config.mjs b/astro.config.mjs index 1d02b15..5f4c33e 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,9 @@ // @ts-check -import { defineConfig } from 'astro/config'; +import { defineConfig } from "astro/config"; -import svelte from '@astrojs/svelte'; +import svelte from "@astrojs/svelte"; // https://astro.build/config export default defineConfig({ - integrations: [svelte()] -}); \ No newline at end of file + integrations: [svelte()], +}); diff --git a/biome.json b/biome.json index 2eb0751..adaa75d 100644 --- a/biome.json +++ b/biome.json @@ -1,30 +1,30 @@ { - "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", - "vcs": { - "enabled": false, - "clientKind": "git", - "useIgnoreFile": false - }, - "files": { - "ignoreUnknown": false, - "ignore": [] - }, - "formatter": { - "enabled": true, - "indentStyle": "tab" - }, - "organizeImports": { - "enabled": true - }, - "linter": { - "enabled": true, - "rules": { - "recommended": true - } - }, - "javascript": { - "formatter": { - "quoteStyle": "double" - } - } + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "vcs": { + "enabled": false, + "clientKind": "git", + "useIgnoreFile": false + }, + "files": { + "ignoreUnknown": false, + "ignore": [] + }, + "formatter": { + "enabled": true, + "indentStyle": "space" + }, + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + }, + "javascript": { + "formatter": { + "quoteStyle": "double" + } + } } diff --git a/src/layouts/SlideLayout.astro b/src/layouts/SlideLayout.astro index 2720f98..77e7aed 100644 --- a/src/layouts/SlideLayout.astro +++ b/src/layouts/SlideLayout.astro @@ -1,8 +1,8 @@ --- export interface Props { - title: string; - authors: string[]; - description?: string; + title: string; + authors: string[]; + description?: string; } import Layout from "./BaseLayout.astro"; import "reveal.js/dist/reveal.css"; diff --git a/src/pages/[id].astro b/src/pages/[id].astro index 36745f9..406dc8b 100644 --- a/src/pages/[id].astro +++ b/src/pages/[id].astro @@ -3,7 +3,7 @@ import SlideLayout from "@layouts/SlideLayout.astro"; import { getSlides } from "@utils/getSlides"; export const getStaticPaths = () => - getSlides().map((slide) => ({ params: { id: slide.id }, props: { slide } })); + getSlides().map((slide) => ({ params: { id: slide.id }, props: { slide } })); const { slide } = Astro.props; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index ea34149..bd9be68 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,8 +3,8 @@ import Layout from "@layouts/BaseLayout.astro"; import { getSlides } from "@utils/getSlides"; const slides = getSlides() - .filter(({ draft }) => !draft) - .sort((c1, c2) => (c1.title > c2.title ? -1 : 1)); + .filter(({ draft }) => !draft) + .sort((c1, c2) => (c1.title > c2.title ? -1 : 1)); --- diff --git a/src/slides/flexbox/components/CSSPropertyDemo.svelte b/src/slides/flexbox/components/CSSPropertyDemo.svelte index cd3aa13..cf9c3d4 100644 --- a/src/slides/flexbox/components/CSSPropertyDemo.svelte +++ b/src/slides/flexbox/components/CSSPropertyDemo.svelte @@ -1,26 +1,26 @@
diff --git a/src/slides/statex-gamedev/index.astro b/src/slides/statex-gamedev/index.astro index a32da47..c9edfcb 100644 --- a/src/slides/statex-gamedev/index.astro +++ b/src/slides/statex-gamedev/index.astro @@ -1,8 +1,10 @@ --- -export const title = "Finite State Machines with XState for Game Development using Three.js" -export const authors = ["Henrique Ramos"] -export const publishedAt = "2024-12-13" -export const description = "Using XState Finite State Machines to coordinate character actions in a Three.js game" +export const title = + "Finite State Machines with XState for Game Development using Three.js"; +export const authors = ["Henrique Ramos"]; +export const publishedAt = "2024-12-13"; +export const description = + "Using XState Finite State Machines to coordinate character actions in a Three.js game"; ---
diff --git a/src/theme/index.css b/src/theme/index.css index 6861f0c..a1a9e18 100644 --- a/src/theme/index.css +++ b/src/theme/index.css @@ -1,43 +1,48 @@ @import "./variables"; @import url("https://fonts.googleapis.com/css2?family=Anaheim:wght@400..800&family=Overpass+Mono:wght@300..700&display=swap"); - body { - background: var(--background); + background: var(--background); } -section.has-dark-background, h1, h2, h3, h4, h5, h6 { - color: var(--main-color); +section.has-dark-background, +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--main-color); } .reveal-viewport { - background: var(--background); - background-color: var(--background-color); + background: var(--background); + background-color: var(--background-color); } .reveal { - font-family: var(--main-font); - font-size: var(--main-font-size); - font-weight: normal; - color: var(--main-color); + font-family: var(--main-font); + font-size: var(--main-font-size); + font-weight: normal; + color: var(--main-color); } .reveal ::selection { - color: var(--selection-color); - background: var(--selection-background-color); - text-shadow: none; + color: var(--selection-color); + background: var(--selection-background-color); + text-shadow: none; } .reveal ::-moz-selection { - color: var(--selection-color); - background: var(--selection-background-color); - text-shadow: none; + color: var(--selection-color); + background: var(--selection-background-color); + text-shadow: none; } .reveal .slides section, .reveal .slides section > section { - line-height: 1.3; - font-weight: inherit; + line-height: 1.3; + font-weight: inherit; } /********************************************* @@ -45,35 +50,35 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal :is(h1, h2, h3, h4, h5, h6) { - margin: var(--heading-margin); - color: var(--heading-color); + margin: var(--heading-margin); + color: var(--heading-color); - font-family: var(--heading-font); - font-weight: var(--heading-font-weight); - line-height: var(--heading-line-height); - letter-spacing: var(--heading-letter-spacing); + font-family: var(--heading-font); + font-weight: var(--heading-font-weight); + line-height: var(--heading-line-height); + letter-spacing: var(--heading-letter-spacing); - text-transform: var(--heading-text-transform); - text-shadow: var(--heading-text-shadow); + text-transform: var(--heading-text-transform); + text-shadow: var(--heading-text-shadow); - word-wrap: break-word; + word-wrap: break-word; } .reveal h1 { - font-size: var(--heading1-size); + font-size: var(--heading1-size); } .reveal h2 { - font-size: var(--heading2-size); + font-size: var(--heading2-size); } .reveal h3 { - font-size: var(--heading3-size); + font-size: var(--heading3-size); } .reveal h4 { - font-size: var(--heading4-size); + font-size: var(--heading4-size); } .reveal h1 { - text-shadow: var(--heading1-text-shadow); + text-shadow: var(--heading1-text-shadow); } /********************************************* @@ -81,170 +86,170 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal p { - margin: var(--block-margin) 0; - line-height: 1.3; + margin: var(--block-margin) 0; + line-height: 1.3; } /* Remove trailing margins after titles */ .reveal :is(h1, h2, h3, h4, h5, h6):last-child { - margin-bottom: 0; + margin-bottom: 0; } /* Ensure certain elements are never larger than the slide itself */ .reveal :is(img, video, iframe) { - max-width: 95%; - max-height: 95%; + max-width: 95%; + max-height: 95%; } .reveal :is(strong, b) { - font-weight: bold; + font-weight: bold; } .reveal em { - font-style: italic; + font-style: italic; } .reveal :is(ol, dl, ul) { - display: inline-block; - text-align: left; - margin: 0 0 0 1em; + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } .reveal ol { - list-style-type: decimal; + list-style-type: decimal; } .reveal ul { - list-style-type: disc; + list-style-type: disc; } .reveal ul ul { - list-style-type: square; + list-style-type: square; } .reveal ul ul ul { - list-style-type: circle; + list-style-type: circle; } .reveal :is(ul ul, ul ol, ol ol, ol ul) { - display: block; - margin-left: 40px; + display: block; + margin-left: 40px; } .reveal dt { - font-weight: bold; + font-weight: bold; } .reveal dd { - margin-left: 40px; + margin-left: 40px; } .reveal blockquote { - display: block; - position: relative; - width: 70%; - margin: var(--block-margin) auto; - padding: 5px; + display: block; + position: relative; + width: 70%; + margin: var(--block-margin) auto; + padding: 5px; - font-style: italic; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } .reveal blockquote :is(p:first-child, p:last-child) { - display: inline-block; + display: inline-block; } .reveal q { - font-style: italic; + font-style: italic; } .reveal pre { - display: block; - position: relative; - width: 90%; - margin: var(--block-margin) auto; + display: block; + position: relative; + width: 90%; + margin: var(--block-margin) auto; - text-align: left; - font-size: 0.55em; - font-family: var(--code-font); - line-height: 1.2em; + text-align: left; + font-size: 0.55em; + font-family: var(--code-font); + line-height: 1.2em; - word-wrap: break-word; + word-wrap: break-word; - box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { - font-family: var(--code-font); - text-transform: none; - tab-size: 2; + font-family: var(--code-font); + text-transform: none; + tab-size: 2; } .reveal pre code { - display: block; - padding: 5px; - overflow: auto; - max-height: 400px; - word-wrap: normal; + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; } .reveal .code-wrapper { - white-space: normal; + white-space: normal; } .reveal .code-wrapper code { - white-space: pre; + white-space: pre; } .reveal table { - margin: auto; - border-collapse: collapse; - border-spacing: 0; + margin: auto; + border-collapse: collapse; + border-spacing: 0; } .reveal table th { - font-weight: bold; + font-weight: bold; } .reveal table :is(th, td) { - text-align: left; - padding: 0.2em 0.5em 0.2em 0.5em; - border-bottom: 1px solid; + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } -.reveal table :is(th[align='center'], td[align='center']) { - text-align: center; +.reveal table :is(th[align="center"], td[align="center"]) { + text-align: center; } -.reveal table :is(th[align='right'], td[align='right']) { - text-align: right; +.reveal table :is(th[align="right"], td[align="right"]) { + text-align: right; } .reveal table tbody tr:last-child :is(th, td) { - border-bottom: none; + border-bottom: none; } .reveal sup { - vertical-align: super; - font-size: smaller; + vertical-align: super; + font-size: smaller; } .reveal sub { - vertical-align: sub; - font-size: smaller; + vertical-align: sub; + font-size: smaller; } .reveal small { - display: inline-block; - font-size: 0.6em; - line-height: 1.2em; - vertical-align: top; + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } .reveal small * { - vertical-align: top; + vertical-align: top; } .reveal img { - margin: var(--block-margin) 0; + margin: var(--block-margin) 0; } /********************************************* @@ -252,20 +257,20 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal a { - color: var(--link-color); - text-decoration: none; - transition: color 0.15s ease; + color: var(--link-color); + text-decoration: none; + transition: color 0.15s ease; } .reveal a:hover { - color: var(--link-colohover); - text-shadow: none; - border: none; + color: var(--link-colohover); + text-shadow: none; + border: none; } .reveal .roll span:after { - color: #fff; + color: #fff; - background: var(--link-colodark); + background: var(--link-colodark); } /********************************************* @@ -273,17 +278,17 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal .frame { - border: 4px solid var(--main-color); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + border: 4px solid var(--main-color); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .reveal a .frame { - transition: all 0.15s linear; + transition: all 0.15s linear; } .reveal a:hover .frame { - border-color: var(--link-color); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + border-color: var(--link-color); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } /********************************************* @@ -291,7 +296,7 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal .controls { - color: var(--link-color); + color: var(--link-color); } /********************************************* @@ -299,15 +304,15 @@ section.has-dark-background, h1, h2, h3, h4, h5, h6 { *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); - color: var(--link-color); + background: rgba(0, 0, 0, 0.2); + color: var(--link-color); } /********************************************* * PRINT BACKGROUND *********************************************/ @media print { - .backgrounds { - background-color: var(--background-color); - } + .backgrounds { + background-color: var(--background-color); + } } diff --git a/src/theme/variables.css b/src/theme/variables.css index f3808b9..c8b1a2d 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -1,38 +1,38 @@ :root { - --background: #000; - --background-color: #000; - --base-spacing: 8px; + --background: #000; + --background-color: #000; + --base-spacing: 8px; - --main-font: "Anaheim", sans-serif; - --main-font-size: 40px; - --main-color: #eee; + --main-font: "Anaheim", sans-serif; + --main-font-size: 40px; + --main-color: #eee; - --block-margin: 20px; + --block-margin: 20px; - --heading-margin: 0 0 20px 0; - --heading-font: "Overpass Mono", monospace; - --heading-color: #fff; - --heading-line-height: 1.2; - --heading-letter-spacing: normal; - --heading-text-transform: none; - --heading-text-shadow: #aaa; - --heading-font-weight: 800; - --heading1-text-shadow: #aaa; + --heading-margin: 0 0 20px 0; + --heading-font: "Overpass Mono", monospace; + --heading-color: #fff; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: none; + --heading-text-shadow: #aaa; + --heading-font-weight: 800; + --heading1-text-shadow: #aaa; - --heading1-size: 3.77em; - --heading2-size: 3.5rem; - --heading3-size: 1.55em; - --heading4-size: 1em; + --heading1-size: 3.77em; + --heading2-size: 3.5rem; + --heading3-size: 1.55em; + --heading4-size: 1em; - --code-font: monospace; + --code-font: monospace; - --link-color: #aaaaff; - --link-color-dark: color-mix(in srgb, var(--link-color), #000 10%); - --link-color-hover: color-mix(in srgb, var(--link-color), #000 20%); + --link-color: #aaaaff; + --link-color-dark: color-mix(in srgb, var(--link-color), #000 10%); + --link-color-hover: color-mix(in srgb, var(--link-color), #000 20%); - --selection-background-color: #888; - --selection-color: #fff; + --selection-background-color: #888; + --selection-color: #fff; - --overlay-element-bg-color: 0, 0, 0; - --overlay-element-fg-color: 240, 240, 240; + --overlay-element-bg-color: 0, 0, 0; + --overlay-element-fg-color: 240, 240, 240; } diff --git a/src/utils/getAstroPages.ts b/src/utils/getAstroPages.ts index 0467c80..f560d04 100644 --- a/src/utils/getAstroPages.ts +++ b/src/utils/getAstroPages.ts @@ -2,12 +2,12 @@ import type { AstroInstance } from "astro"; import { type } from "arktype"; type Opts> = { - files: Record; - schema: type; + files: Record; + schema: type; }; const astroPageType = type({ - "draft?": "boolean", + "draft?": "boolean", }); /** @@ -18,22 +18,22 @@ const astroPageType = type({ * @returns The Astro pages in the root of the given path, or looks for index.astro files in subdirectories (single level). */ const getAstroPages = & AstroInstance>({ - files, - schema, + files, + schema, }: Opts) => - Object.values(files).map((module) => { - const validate = schema.and(astroPageType)(module); - if (validate instanceof type.errors) - throw new Error(`Invalid module${module.file}: ${validate.summary}`); + Object.values(files).map((module) => { + const validate = schema.and(astroPageType)(module); + if (validate instanceof type.errors) + throw new Error(`Invalid module${module.file}: ${validate.summary}`); - return { - id: ( - module.file - .split("/") - .at(module.file.includes("index.astro") ? -2 : -1) ?? "" - ).replace(".astro", ""), - ...module, - }; - }); + return { + id: ( + module.file + .split("/") + .at(module.file.includes("index.astro") ? -2 : -1) ?? "" + ).replace(".astro", ""), + ...module, + }; + }); export default getAstroPages; diff --git a/src/utils/getSlides.ts b/src/utils/getSlides.ts index 528bf52..a531cae 100644 --- a/src/utils/getSlides.ts +++ b/src/utils/getSlides.ts @@ -2,7 +2,12 @@ import type { AstroInstance } from "astro"; import getAstroPages from "./getAstroPages"; import { type } from "arktype"; -const schema = type({ title: "string", description: "string", authors: "string[]", publishedAt: "string" }); +const schema = type({ + title: "string", + description: "string", + authors: "string[]", + publishedAt: "string", +}); type Slide = AstroInstance & typeof schema.infer & { [key: string]: unknown }; @@ -12,10 +17,10 @@ type Slide = AstroInstance & typeof schema.infer & { [key: string]: unknown }; * @returns The slides. */ export const getSlides = () => - getAstroPages({ - files: import.meta.glob( - ["@slides/**/index.astro", "@slides/*.astro"], - { eager: true }, - ), - schema, - }); + getAstroPages({ + files: import.meta.glob( + ["@slides/**/index.astro", "@slides/*.astro"], + { eager: true }, + ), + schema, + }); diff --git a/svelte.config.js b/svelte.config.js index 522c1ef..cf44f38 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,5 +1,5 @@ -import { vitePreprocess } from '@astrojs/svelte'; +import { vitePreprocess } from "@astrojs/svelte"; export default { - preprocess: vitePreprocess(), -} + preprocess: vitePreprocess(), +}; diff --git a/tsconfig.json b/tsconfig.json index 27d8754..dbbe666 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,23 @@ { - "extends": "astro/tsconfigs/strict", - "include": [".astro/types.d.ts", "**/*"], - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@components/*": ["src/components/*"], - "@layouts/*": ["src/layouts/*"], - "@assets/*": ["src/assets/*"], - "@theme/*": ["src/theme/*"], - "@theme": ["src/theme/index.css"], - "@slides/*": ["src/slides/*"], - "@utils/*": ["src/utils/*"] - }, - "moduleResolution": "Bundler", - "strictNullChecks": true, - "allowJs": true, - "strict": true, - "skipLibCheck": true, - "exactOptionalPropertyTypes": true - }, - "exclude": ["dist"] + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@components/*": ["src/components/*"], + "@layouts/*": ["src/layouts/*"], + "@assets/*": ["src/assets/*"], + "@theme/*": ["src/theme/*"], + "@theme": ["src/theme/index.css"], + "@slides/*": ["src/slides/*"], + "@utils/*": ["src/utils/*"] + }, + "moduleResolution": "Bundler", + "strictNullChecks": true, + "allowJs": true, + "strict": true, + "skipLibCheck": true, + "exactOptionalPropertyTypes": true + }, + "exclude": ["dist"] }