Meettya/signal-slides
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: use space instead of tab for formatting

Browse Source
This commit is contained in:
Henrique Ramos 2025-02-26 21:05:19 -03:00
parent 1c281f220d
commit 8f90133e1e
15 changed files with 278 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/extensions.json vendored
View File

@ -1,5 +1,4 @@
{ {
"recommendations": ["astro-build.astro-vscode"], "recommendations": ["astro-build.astro-vscode"],
""
"unwantedRecommendations": [] "unwantedRecommendations": []
} }

14
.vscode/settings.json vendored
View File

@ -1,9 +1,9 @@
{ {
"editor.defaultFormatter": "biomejs.biome", "editor.defaultFormatter": "biomejs.biome",
// allow autocomplete for ArkType expressions like "string | num" // allow autocomplete for ArkType expressions like "string | num"
"editor.quickSuggestions": { "editor.quickSuggestions": {
"strings": "on" "strings": "on"
}, },
// prioritize ArkType's "type" for autoimports // prioritize ArkType's "type" for autoimports
"typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"] "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"]
} }

6
astro.config.mjs
View File

@ -1,9 +1,9 @@
// @ts-check // @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 // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [svelte()] integrations: [svelte()],
}); });

56
biome.json
View File

@ -1,30 +1,30 @@
{ {
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": { "vcs": {
"enabled": false, "enabled": false,
"clientKind": "git", "clientKind": "git",
"useIgnoreFile": false "useIgnoreFile": false
}, },
"files": { "files": {
"ignoreUnknown": false, "ignoreUnknown": false,
"ignore": [] "ignore": []
}, },
"formatter": { "formatter": {
"enabled": true, "enabled": true,
"indentStyle": "tab" "indentStyle": "space"
}, },
"organizeImports": { "organizeImports": {
"enabled": true "enabled": true
}, },
"linter": { "linter": {
"enabled": true, "enabled": true,
"rules": { "rules": {
"recommended": true "recommended": true
} }
}, },
"javascript": { "javascript": {
"formatter": { "formatter": {
"quoteStyle": "double" "quoteStyle": "double"
} }
} }
} }

6
src/layouts/SlideLayout.astro
View File

@ -1,8 +1,8 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
authors: string[]; authors: string[];
description?: string; description?: string;
} }
import Layout from "./BaseLayout.astro"; import Layout from "./BaseLayout.astro";
import "reveal.js/dist/reveal.css"; import "reveal.js/dist/reveal.css";

2
src/pages/[id].astro
View File

@ -3,7 +3,7 @@ import SlideLayout from "@layouts/SlideLayout.astro";
import { getSlides } from "@utils/getSlides"; import { getSlides } from "@utils/getSlides";
export const getStaticPaths = () => 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; const { slide } = Astro.props;
--- ---

4
src/pages/index.astro
View File

@ -3,8 +3,8 @@ import Layout from "@layouts/BaseLayout.astro";
import { getSlides } from "@utils/getSlides"; import { getSlides } from "@utils/getSlides";
const slides = getSlides() const slides = getSlides()
.filter(({ draft }) => !draft) .filter(({ draft }) => !draft)
.sort((c1, c2) => (c1.title > c2.title ? -1 : 1)); .sort((c1, c2) => (c1.title > c2.title ? -1 : 1));
--- ---
<Layout title="Home"> <Layout title="Home">

36
src/slides/flexbox/components/CSSPropertyDemo.svelte
View File

@ -1,26 +1,26 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
type CSSPropertyDemoProps = { type CSSPropertyDemoProps = {
property: string; property: string;
values: string[]; values: string[];
title?: string; title?: string;
defaultValue?: string; defaultValue?: string;
children?: Snippet<[]>; children?: Snippet<[]>;
}; };
const { const {
property, property,
values, values,
title = property, title = property,
defaultValue = values[0], defaultValue = values[0],
}: CSSPropertyDemoProps = $props(); }: CSSPropertyDemoProps = $props();
let selected = $state(defaultValue); let selected = $state(defaultValue);
const handleClick = (value: string) => { const handleClick = (value: string) => {
selected = value; selected = value;
}; };
</script> </script>
<div class="flex-property-demo"> <div class="flex-property-demo">

10
src/slides/statex-gamedev/index.astro
View File

@ -1,8 +1,10 @@
--- ---
export const title = "Finite State Machines with XState for Game Development using Three.js" export const title =
export const authors = ["Henrique Ramos"] "Finite State Machines with XState for Game Development using Three.js";
export const publishedAt = "2024-12-13" export const authors = ["Henrique Ramos"];
export const description = "Using XState Finite State Machines to coordinate character actions in a Three.js game" export const publishedAt = "2024-12-13";
export const description =
"Using XState Finite State Machines to coordinate character actions in a Three.js game";
--- ---
<section> <section>

247
src/theme/index.css
View File

@ -1,43 +1,48 @@
@import "./variables"; @import "./variables";
@import url("https://fonts.googleapis.com/css2?family=Anaheim:wght@400..800&family=Overpass+Mono:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Anaheim:wght@400..800&family=Overpass+Mono:wght@300..700&display=swap");
body { body {
background: var(--background); background: var(--background);
} }
section.has-dark-background, h1, h2, h3, h4, h5, h6 { section.has-dark-background,
color: var(--main-color); h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--main-color);
} }
.reveal-viewport { .reveal-viewport {
background: var(--background); background: var(--background);
background-color: var(--background-color); background-color: var(--background-color);
} }
.reveal { .reveal {
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--main-font-size); font-size: var(--main-font-size);
font-weight: normal; font-weight: normal;
color: var(--main-color); color: var(--main-color);
} }
.reveal ::selection { .reveal ::selection {
color: var(--selection-color); color: var(--selection-color);
background: var(--selection-background-color); background: var(--selection-background-color);
text-shadow: none; text-shadow: none;
} }
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: var(--selection-color); color: var(--selection-color);
background: var(--selection-background-color); background: var(--selection-background-color);
text-shadow: none; text-shadow: none;
} }
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; 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) { .reveal :is(h1, h2, h3, h4, h5, h6) {
margin: var(--heading-margin); margin: var(--heading-margin);
color: var(--heading-color); color: var(--heading-color);
font-family: var(--heading-font); font-family: var(--heading-font);
font-weight: var(--heading-font-weight); font-weight: var(--heading-font-weight);
line-height: var(--heading-line-height); line-height: var(--heading-line-height);
letter-spacing: var(--heading-letter-spacing); letter-spacing: var(--heading-letter-spacing);
text-transform: var(--heading-text-transform); text-transform: var(--heading-text-transform);
text-shadow: var(--heading-text-shadow); text-shadow: var(--heading-text-shadow);
word-wrap: break-word; word-wrap: break-word;
} }
.reveal h1 { .reveal h1 {
font-size: var(--heading1-size); font-size: var(--heading1-size);
} }
.reveal h2 { .reveal h2 {
font-size: var(--heading2-size); font-size: var(--heading2-size);
} }
.reveal h3 { .reveal h3 {
font-size: var(--heading3-size); font-size: var(--heading3-size);
} }
.reveal h4 { .reveal h4 {
font-size: var(--heading4-size); font-size: var(--heading4-size);
} }
.reveal h1 { .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 { .reveal p {
margin: var(--block-margin) 0; margin: var(--block-margin) 0;
line-height: 1.3; line-height: 1.3;
} }
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal :is(h1, h2, h3, h4, h5, h6):last-child { .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 */ /* Ensure certain elements are never larger than the slide itself */
.reveal :is(img, video, iframe) { .reveal :is(img, video, iframe) {
max-width: 95%; max-width: 95%;
max-height: 95%; max-height: 95%;
} }
.reveal :is(strong, b) { .reveal :is(strong, b) {
font-weight: bold; font-weight: bold;
} }
.reveal em { .reveal em {
font-style: italic; font-style: italic;
} }
.reveal :is(ol, dl, ul) { .reveal :is(ol, dl, ul) {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; margin: 0 0 0 1em;
} }
.reveal ol { .reveal ol {
list-style-type: decimal; list-style-type: decimal;
} }
.reveal ul { .reveal ul {
list-style-type: disc; list-style-type: disc;
} }
.reveal ul ul { .reveal ul ul {
list-style-type: square; list-style-type: square;
} }
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; list-style-type: circle;
} }
.reveal :is(ul ul, ul ol, ol ol, ol ul) { .reveal :is(ul ul, ul ol, ol ol, ol ul) {
display: block; display: block;
margin-left: 40px; margin-left: 40px;
} }
.reveal dt { .reveal dt {
font-weight: bold; font-weight: bold;
} }
.reveal dd { .reveal dd {
margin-left: 40px; margin-left: 40px;
} }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: var(--block-margin) auto; margin: var(--block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
} }
.reveal blockquote :is(p:first-child, p:last-child) { .reveal blockquote :is(p:first-child, p:last-child) {
display: inline-block; display: inline-block;
} }
.reveal q { .reveal q {
font-style: italic; font-style: italic;
} }
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: var(--block-margin) auto; margin: var(--block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: var(--code-font); font-family: var(--code-font);
line-height: 1.2em; 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 { .reveal code {
font-family: var(--code-font); font-family: var(--code-font);
text-transform: none; text-transform: none;
tab-size: 2; tab-size: 2;
} }
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; word-wrap: normal;
} }
.reveal .code-wrapper { .reveal .code-wrapper {
white-space: normal; white-space: normal;
} }
.reveal .code-wrapper code { .reveal .code-wrapper code {
white-space: pre; white-space: pre;
} }
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
.reveal table th { .reveal table th {
font-weight: bold; font-weight: bold;
} }
.reveal table :is(th, td) { .reveal table :is(th, td) {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
.reveal table :is(th[align='center'], td[align='center']) { .reveal table :is(th[align="center"], td[align="center"]) {
text-align: center; text-align: center;
} }
.reveal table :is(th[align='right'], td[align='right']) { .reveal table :is(th[align="right"], td[align="right"]) {
text-align: right; text-align: right;
} }
.reveal table tbody tr:last-child :is(th, td) { .reveal table tbody tr:last-child :is(th, td) {
border-bottom: none; border-bottom: none;
} }
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; font-size: smaller;
} }
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; font-size: smaller;
} }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; vertical-align: top;
} }
.reveal small * { .reveal small * {
vertical-align: top; vertical-align: top;
} }
.reveal img { .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 { .reveal a {
color: var(--link-color); color: var(--link-color);
text-decoration: none; text-decoration: none;
transition: color 0.15s ease; transition: color 0.15s ease;
} }
.reveal a:hover { .reveal a:hover {
color: var(--link-colohover); color: var(--link-colohover);
text-shadow: none; text-shadow: none;
border: none; border: none;
} }
.reveal .roll span:after { .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 { .reveal .frame {
border: 4px solid var(--main-color); border: 4px solid var(--main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
} }
.reveal a .frame { .reveal a .frame {
transition: all 0.15s linear; transition: all 0.15s linear;
} }
.reveal a:hover .frame { .reveal a:hover .frame {
border-color: var(--link-color); border-color: var(--link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 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 { .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 { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: var(--link-color); color: var(--link-color);
} }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: var(--background-color); background-color: var(--background-color);
} }
} }

56
src/theme/variables.css
View File

@ -1,38 +1,38 @@
:root { :root {
--background: #000; --background: #000;
--background-color: #000; --background-color: #000;
--base-spacing: 8px; --base-spacing: 8px;
--main-font: "Anaheim", sans-serif; --main-font: "Anaheim", sans-serif;
--main-font-size: 40px; --main-font-size: 40px;
--main-color: #eee; --main-color: #eee;
--block-margin: 20px; --block-margin: 20px;
--heading-margin: 0 0 20px 0; --heading-margin: 0 0 20px 0;
--heading-font: "Overpass Mono", monospace; --heading-font: "Overpass Mono", monospace;
--heading-color: #fff; --heading-color: #fff;
--heading-line-height: 1.2; --heading-line-height: 1.2;
--heading-letter-spacing: normal; --heading-letter-spacing: normal;
--heading-text-transform: none; --heading-text-transform: none;
--heading-text-shadow: #aaa; --heading-text-shadow: #aaa;
--heading-font-weight: 800; --heading-font-weight: 800;
--heading1-text-shadow: #aaa; --heading1-text-shadow: #aaa;
--heading1-size: 3.77em; --heading1-size: 3.77em;
--heading2-size: 3.5rem; --heading2-size: 3.5rem;
--heading3-size: 1.55em; --heading3-size: 1.55em;
--heading4-size: 1em; --heading4-size: 1em;
--code-font: monospace; --code-font: monospace;
--link-color: #aaaaff; --link-color: #aaaaff;
--link-color-dark: color-mix(in srgb, var(--link-color), #000 10%); --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-hover: color-mix(in srgb, var(--link-color), #000 20%);
--selection-background-color: #888; --selection-background-color: #888;
--selection-color: #fff; --selection-color: #fff;
--overlay-element-bg-color: 0, 0, 0; --overlay-element-bg-color: 0, 0, 0;
--overlay-element-fg-color: 240, 240, 240; --overlay-element-fg-color: 240, 240, 240;
} }

36
src/utils/getAstroPages.ts
View File

@ -2,12 +2,12 @@ import type { AstroInstance } from "astro";
import { type } from "arktype"; import { type } from "arktype";
type Opts<T extends Record<string, unknown>> = { type Opts<T extends Record<string, unknown>> = {
files: Record<string, T>; files: Record<string, T>;
schema: type; schema: type;
}; };
const astroPageType = 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). * @returns The Astro pages in the root of the given path, or looks for index.astro files in subdirectories (single level).
*/ */
const getAstroPages = <T extends Record<string, unknown> & AstroInstance>({ const getAstroPages = <T extends Record<string, unknown> & AstroInstance>({
files, files,
schema, schema,
}: Opts<T>) => }: Opts<T>) =>
Object.values(files).map((module) => { Object.values(files).map((module) => {
const validate = schema.and(astroPageType)(module); const validate = schema.and(astroPageType)(module);
if (validate instanceof type.errors) if (validate instanceof type.errors)
throw new Error(`Invalid module${module.file}: ${validate.summary}`); throw new Error(`Invalid module${module.file}: ${validate.summary}`);
return { return {
id: ( id: (
module.file module.file
.split("/") .split("/")
.at(module.file.includes("index.astro") ? -2 : -1) ?? "" .at(module.file.includes("index.astro") ? -2 : -1) ?? ""
).replace(".astro", ""), ).replace(".astro", ""),
...module, ...module,
}; };
}); });
export default getAstroPages; export default getAstroPages;

21
src/utils/getSlides.ts
View File

@ -2,7 +2,12 @@ import type { AstroInstance } from "astro";
import getAstroPages from "./getAstroPages"; import getAstroPages from "./getAstroPages";
import { type } from "arktype"; 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 }; 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. * @returns The slides.
*/ */
export const getSlides = () => export const getSlides = () =>
getAstroPages<Slide>({ getAstroPages<Slide>({
files: import.meta.glob<true, string, Slide>( files: import.meta.glob<true, string, Slide>(
["@slides/**/index.astro", "@slides/*.astro"], ["@slides/**/index.astro", "@slides/*.astro"],
{ eager: true }, { eager: true },
), ),
schema, schema,
}); });

6
svelte.config.js
View File

@ -1,5 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte'; import { vitePreprocess } from "@astrojs/svelte";
export default { export default {
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
} };

42
tsconfig.json
View File

@ -1,23 +1,23 @@
{ {
"extends": "astro/tsconfigs/strict", "extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"], "include": [".astro/types.d.ts", "**/*"],
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@components/*": ["src/components/*"], "@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"], "@layouts/*": ["src/layouts/*"],
"@assets/*": ["src/assets/*"], "@assets/*": ["src/assets/*"],
"@theme/*": ["src/theme/*"], "@theme/*": ["src/theme/*"],
"@theme": ["src/theme/index.css"], "@theme": ["src/theme/index.css"],
"@slides/*": ["src/slides/*"], "@slides/*": ["src/slides/*"],
"@utils/*": ["src/utils/*"] "@utils/*": ["src/utils/*"]
}, },
"moduleResolution": "Bundler", "moduleResolution": "Bundler",
"strictNullChecks": true, "strictNullChecks": true,
"allowJs": true, "allowJs": true,
"strict": true, "strict": true,
"skipLibCheck": true, "skipLibCheck": true,
"exactOptionalPropertyTypes": true "exactOptionalPropertyTypes": true
}, },
"exclude": ["dist"] "exclude": ["dist"]
} }