navi/psslides
1
0
Fork 0
forked from jan/psslides
Code Pull requests Activity

asdasdasdass

Browse source
This commit is contained in:
jan 2026-09-27 20:18:32 +02:00
parent 9278fe9314
commit bbfb1fce04
12 changed files with 373 additions and 348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
.oxlintrc.json
View file

@ -1,4 +1,42 @@
{ {
"$schema": "./node_modules/oxlint/configuration_schema.json", "$schema": "./node_modules/oxlint/configuration_schema.json",
"ignorePatterns": ["dist/**"] "ignorePatterns": ["dist/**", "node_modules/**"],
"plugins": ["typescript", "unicorn", "oxc", "promise"],
"env": {
"browser": true,
"builtin": true,
"es2024": true
},
"categories": {
"correctness": "error",
"suspicious": "warn",
"perf": "warn"
},
"rules": {
"no-console": "error",
"no-debugger": "error",
"eqeqeq": ["error", "always"],
"no-var": "error",
"prefer-const": "error",
"object-shorthand": "error",
"prefer-template": "error",
"unicorn/prefer-dom-node-append": "error",
"unicorn/prefer-dom-node-remove": "error",
"unicorn/prefer-dom-node-text-content": "error",
"unicorn/prefer-query-selector": "error",
"unicorn/prefer-add-event-listener": "error",
"typescript/no-explicit-any": "error",
"typescript/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
"promise/always-return": "error",
"promise/catch-or-return": "error",
"oxc/no-accumulating-spread": "error"
},
"overrides": [
{
"files": ["**/*.config.json", ".oxlintrc.json", ".prettierrc.json"],
"rules": {
"no-console": "off"
}
}
]
} }

3
.prettierignore Normal file
View file

@ -0,0 +1,3 @@
dist
node_modules
bun.lock

9
.prettierrc.json Normal file
View file

@ -0,0 +1,9 @@
{
"semi": false,
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "none",
"arrowParens": "always"
}

3
bun.lock
View file

@ -10,6 +10,7 @@
}, },
"devDependencies": { "devDependencies": {
"oxlint": "^1.85.0", "oxlint": "^1.85.0",
"prettier": "^3.9.9",
"typescript": "~6.0.2", "typescript": "~6.0.2",
"vite": "^8.3.0", "vite": "^8.3.0",
}, },
@ -146,6 +147,8 @@
"postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="], "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],
"prettier": ["prettier@3.9.9", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg=="],
"rolldown": ["rolldown@1.2.10", "", { "dependencies": { "@oxc-project/types": "=0.151.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.10", "@rolldown/binding-android-arm64": "1.2.10", "@rolldown/binding-darwin-arm64": "1.2.10", "@rolldown/binding-darwin-x64": "1.2.10", "@rolldown/binding-freebsd-x64": "1.2.10", "@rolldown/binding-linux-arm-gnueabihf": "1.2.10", "@rolldown/binding-linux-arm64-gnu": "1.2.10", "@rolldown/binding-linux-arm64-musl": "1.2.10", "@rolldown/binding-linux-ppc64-gnu": "1.2.10", "@rolldown/binding-linux-s390x-gnu": "1.2.10", "@rolldown/binding-linux-x64-gnu": "1.2.10", "@rolldown/binding-linux-x64-musl": "1.2.10", "@rolldown/binding-openharmony-arm64": "1.2.10", "@rolldown/binding-win32-arm64-msvc": "1.2.10", "@rolldown/binding-win32-x64-msvc": "1.2.10" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-OxkA08pSryMK7B3XiFA09B4OJ1xJMPgIYCBMY2xchzpqgBGsV1o0DetPAE+Sl3N3L4oCPiEzmHVSOj7iR04Zog=="], "rolldown": ["rolldown@1.2.10", "", { "dependencies": { "@oxc-project/types": "=0.151.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.10", "@rolldown/binding-android-arm64": "1.2.10", "@rolldown/binding-darwin-arm64": "1.2.10", "@rolldown/binding-darwin-x64": "1.2.10", "@rolldown/binding-freebsd-x64": "1.2.10", "@rolldown/binding-linux-arm-gnueabihf": "1.2.10", "@rolldown/binding-linux-arm64-gnu": "1.2.10", "@rolldown/binding-linux-arm64-musl": "1.2.10", "@rolldown/binding-linux-ppc64-gnu": "1.2.10", "@rolldown/binding-linux-s390x-gnu": "1.2.10", "@rolldown/binding-linux-x64-gnu": "1.2.10", "@rolldown/binding-linux-x64-musl": "1.2.10", "@rolldown/binding-openharmony-arm64": "1.2.10", "@rolldown/binding-win32-arm64-msvc": "1.2.10", "@rolldown/binding-win32-x64-msvc": "1.2.10" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-OxkA08pSryMK7B3XiFA09B4OJ1xJMPgIYCBMY2xchzpqgBGsV1o0DetPAE+Sl3N3L4oCPiEzmHVSOj7iR04Zog=="],
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

48
index.html
View file

@ -1,29 +1,25 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>p/slides</title>
</head>
<head> <body>
<meta charset="UTF-8" /> <div class="container">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <div class="menubar"><b>p/slides</b></div>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div class="slidelist">
<title>p/slides</title> <div class="slide-list-header">
</head> <span>Slides</span>
<button class="add-slide" type="button" aria-label="Add slide">+</button>
<body> </div>
<div class="container"> <div class="slide-list-items"></div>
<div class="menubar"><b>p/slides</b></div> </div>
<div class="slidelist"> <div class="code"></div>
<div class="slide-list-header"> <div class="preview"></div>
<span>Slides</span> </div>
<button class="add-slide" type="button" aria-label="Add slide">+</button> <script type="module" src="/src/main.ts"></script>
</div> </body>
<div class="slide-list-items"></div> </html>
</div>
<div class="code"></div>
<div class="preview">
<div class="slide"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

43
package.json
View file

@ -1,22 +1,25 @@
{ {
"name": "psslides", "name": "psslides",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "oxlint", "lint": "oxlint",
"lint:fix": "oxlint --fix", "lint:fix": "oxlint --fix",
"preview": "vite preview" "format": "prettier --write .",
}, "format:check": "prettier --check .",
"devDependencies": { "preview": "vite preview"
"oxlint": "^1.85.0", },
"typescript": "~6.0.2", "devDependencies": {
"vite": "^8.3.0" "oxlint": "^1.85.0",
}, "prettier": "^3.9.9",
"dependencies": { "typescript": "~6.0.2",
"emmet-monaco-es": "^5.7.0", "vite": "^8.3.0"
"monaco-editor": "0.55.1" },
} "dependencies": {
"emmet-monaco-es": "^5.7.0",
"monaco-editor": "0.55.1"
}
} }

81
src/code-to-element.ts
View file

@ -1,56 +1,57 @@
import { domToSvgDataUrl } from './dom-to-image' import { domToSvgDataUrl } from './dom-to-image'
export interface CodeToElementOptions { export interface CodeToElementOptions {
title?: string title?: string
allowScripts?: boolean allowScripts?: boolean
styles?: string[] styles?: string[]
} }
export function codeToElement( export function codeToElement(code: string, options: CodeToElementOptions = {}): HTMLIFrameElement {
code: string, const iframe = document.createElement('iframe')
options: CodeToElementOptions = {} const sandbox = new Set<string>()
): HTMLIFrameElement {
const iframe = document.createElement('iframe')
const sandbox = new Set<string>()
if (!options.allowScripts) { if (!options.allowScripts) {
sandbox.add('allow-same-origin') sandbox.add('allow-same-origin')
} else { } else {
sandbox.add('allow-scripts') sandbox.add('allow-scripts')
} }
iframe.title = options.title ?? 'Rendered code' iframe.title = options.title ?? 'Rendered code'
iframe.setAttribute('sandbox', Array.from(sandbox).join(' ')) iframe.setAttribute('sandbox', Array.from(sandbox).join(' '))
iframe.srcdoc = `<!doctype html><html><head><meta charset="UTF-8"><style>html,body{margin:0;min-height:100%;}</style>${(options.styles ?? []).join('\n')}</head><body>${code}</body></html>` iframe.srcdoc = `<!doctype html><html><head><meta charset="UTF-8"><style>html,body{margin:0;min-height:100%;}</style>${(options.styles ?? []).join('\n')}</head><body>${code}</body></html>`
return iframe return iframe
} }
export async function createCodeThumbnail( export async function createCodeThumbnail(
code: string, code: string,
options: CodeToElementOptions = {} options: CodeToElementOptions = {}
): Promise<HTMLImageElement> { ): Promise<HTMLImageElement> {
const iframe = codeToElement(code, { title: 'Code thumbnail', ...options, allowScripts: false }) const iframe = codeToElement(code, { title: 'Code thumbnail', ...options, allowScripts: false })
iframe.style.width = '640px' iframe.style.width = '640px'
iframe.style.height = '360px' iframe.style.height = '360px'
iframe.style.position = 'fixed' iframe.style.position = 'fixed'
iframe.style.left = '-10000px' iframe.style.left = '-10000px'
iframe.style.border = '0' iframe.style.border = '0'
document.body.appendChild(iframe) document.body.append(iframe)
try { try {
await new Promise<void>((resolve, reject) => { await new Promise<void>((resolve, reject) => {
iframe.addEventListener('load', () => resolve(), { once: true }) iframe.addEventListener('load', () => resolve(), { once: true })
iframe.addEventListener('error', () => reject(new Error('Unable to render code thumbnail')), { once: true }) iframe.addEventListener(
}) 'error',
() => reject(new Error('Unable to render code thumbnail')),
{ once: true }
)
})
const content = iframe.contentDocument?.body const content = iframe.contentDocument?.body
const thumbnail = document.createElement('img') const thumbnail = document.createElement('img')
if (content) { if (content) {
thumbnail.src = domToSvgDataUrl(content, { width: 640, height: 360 }) thumbnail.src = domToSvgDataUrl(content, { width: 640, height: 360 })
}
return thumbnail
} finally {
iframe.remove()
} }
return thumbnail
} finally {
iframe.remove()
}
} }

106
src/dom-to-image.ts
View file

@ -1,92 +1,50 @@
export interface DomExportOptions { export interface DomExportOptions {
width?: number width?: number
height?: number height?: number
scale?: number
} }
function getElementSize(element: Element) { function getElementSize(element: Element) {
const rect = element.getBoundingClientRect() const rect = element.getBoundingClientRect()
return { return {
width: Math.max(1, Math.ceil(rect.width)), width: Math.max(1, Math.ceil(rect.width)),
height: Math.max(1, Math.ceil(rect.height)) height: Math.max(1, Math.ceil(rect.height))
} }
} }
function copyComputedStyles(source: Element, target: Element) { function copyComputedStyles(source: Element, target: Element) {
const computedStyle = window.getComputedStyle(source) const computedStyle = window.getComputedStyle(source)
const style = Array.from(computedStyle) const style = Array.from(computedStyle)
.map((property) => `${property}:${computedStyle.getPropertyValue(property)}`) .map((property) => `${property}:${computedStyle.getPropertyValue(property)}`)
.join(';') .join(';')
target.setAttribute('style', style) target.setAttribute('style', style)
} }
function cloneWithStyles(source: Node, target: Node) { function cloneWithStyles(source: Node, target: ParentNode) {
if (source.nodeType === Node.ELEMENT_NODE && target.nodeType === Node.ELEMENT_NODE) { if (source.nodeType === Node.ELEMENT_NODE && target.nodeType === Node.ELEMENT_NODE) {
copyComputedStyles(source as Element, target as Element) copyComputedStyles(source as Element, target as Element)
} }
source.childNodes.forEach((child) => { source.childNodes.forEach((child) => {
const clonedChild = child.cloneNode(false) const clonedChild = child.cloneNode(false) as ParentNode
cloneWithStyles(child, clonedChild) cloneWithStyles(child, clonedChild)
target.appendChild(clonedChild) target.append(clonedChild)
}) })
} }
function createSvg(element: Element, options: DomExportOptions) { function createSvg(element: Element, options: DomExportOptions) {
const size = getElementSize(element) const size = getElementSize(element)
const width = options.width ?? size.width const width = options.width ?? size.width
const height = options.height ?? size.height const height = options.height ?? size.height
const clone = element.cloneNode(false) as Element const clone = element.cloneNode(false) as Element
cloneWithStyles(element, clone) cloneWithStyles(element, clone)
const content = new XMLSerializer().serializeToString(clone) const content = new XMLSerializer().serializeToString(clone)
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${content}</foreignObject></svg>` const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${content}</foreignObject></svg>`
return { svg, width, height } return { svg, width, height }
} }
export function domToSvgDataUrl( export function domToSvgDataUrl(element: Element, options: DomExportOptions = {}): string {
element: Element, const { svg } = createSvg(element, options)
options: DomExportOptions = {} return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
): string {
const { svg } = createSvg(element, options)
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
}
export async function domToCanvas(
element: Element,
options: DomExportOptions = {}
): Promise<HTMLCanvasElement> {
const size = getElementSize(element)
const width = options.width ?? size.width
const height = options.height ?? size.height
const scale = options.scale ?? 1
const svgDataUrl = domToSvgDataUrl(element, options)
const image = new Image()
await new Promise<void>((resolve, reject) => {
image.onload = () => resolve()
image.onerror = () => reject(new Error('Unable to render DOM export as an image'))
image.src = svgDataUrl
})
const canvas = document.createElement('canvas')
canvas.width = Math.max(1, Math.ceil(width * scale))
canvas.height = Math.max(1, Math.ceil(height * scale))
const context = canvas.getContext('2d')
if (!context) {
throw new Error('Unable to create a canvas context')
}
context.drawImage(image, 0, 0, canvas.width, canvas.height)
return canvas
}
export async function domToPngDataUrl(
element: Element,
options: DomExportOptions = {}
): Promise<string> {
const canvas = await domToCanvas(element, options)
return canvas.toDataURL('image/png')
} }

33
src/editor.ts
View file

@ -8,27 +8,24 @@ emmetHTML(monaco, ['html'])
emmetCSS(monaco, ['css', 'scss', 'less']) emmetCSS(monaco, ['css', 'scss', 'less'])
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorker(_, label) { getWorker(_, label) {
if (label === 'css' || label === 'scss' || label === 'less') { if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker() return new cssWorker()
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker()
}
return new editorWorker()
} }
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker()
}
return new editorWorker()
}
} }
const MONACO_PARENT = '.code' const MONACO_PARENT = '.code'
export function createEditor() { export function createEditor() {
return monaco.editor.create( return monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
document.querySelector(MONACO_PARENT)!, value: 'test',
{ language: 'html',
value: 'test', theme: 'vs-dark',
language: 'html', automaticLayout: true
theme: 'vs-dark', })
automaticLayout: true }
}
)
}

45
src/main.ts
View file

@ -67,7 +67,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {
const thumbnail = await createCodeThumbnail(slide.code) const thumbnail = await createCodeThumbnail(slide.code)
slideInList.append(slideNumber, thumbnail) slideInList.append(slideNumber, thumbnail)
slideElement.appendChild(slideInList) slideElement.append(slideInList)
if (i !== -1) { if (i !== -1) {
const deleteButton = document.createElement('button') const deleteButton = document.createElement('button')
@ -78,7 +78,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {
deleteButton.addEventListener('click', () => { deleteButton.addEventListener('click', () => {
deleteSlide(Number(slideElement.dataset.slideId)) deleteSlide(Number(slideElement.dataset.slideId))
}) })
slideElement.appendChild(deleteButton) slideElement.append(deleteButton)
} }
if (i === -1) { if (i === -1) {
@ -110,22 +110,45 @@ async function refreshThumbnail(index: number, slide: Slide) {
updateSelection() updateSelection()
} }
const THUMBNAIL_CONCURRENCY = 6
async function mapWithConcurrency<T, R>(
items: T[],
limit: number,
map: (item: T, index: number) => Promise<R>
): Promise<R[]> {
const results: R[] = []
let nextIndex = 0
async function worker() {
while (nextIndex < items.length) {
const index = nextIndex++
// oxlint-disable-next-line no-await-in-loop -- each worker claims one index at a time; the await is what bounds concurrency
results[index] = await map(items[index], index)
}
}
await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
return results
}
async function setSlideList() { async function setSlideList() {
const slideListSlidesList = [{ code: globalSlide }, ...slides] const allSlides = [{ code: globalSlide }, ...slides]
slideList.replaceChildren() slideList.replaceChildren()
slideElements.clear() slideElements.clear()
globalSlideElement = null globalSlideElement = null
for (let i = -1; i < slides.length; i++) { const elements = await mapWithConcurrency(allSlides, THUMBNAIL_CONCURRENCY, (slide, index) =>
slideList.appendChild(await generateSlideThumbnail(slideListSlidesList[i + 1], i)) generateSlideThumbnail(slide, index - 1)
} )
slideList.append(...elements)
updateSelection() updateSelection()
} }
function updateSlideOrder() { function updateSlideOrder() {
if (globalSlideElement) { if (globalSlideElement) {
globalSlideElement.dataset.slideId = '-1' globalSlideElement.dataset.slideId = '-1'
slideList.appendChild(globalSlideElement) slideList.append(globalSlideElement)
} }
for (const [index, slide] of slides.entries()) { for (const [index, slide] of slides.entries()) {
@ -141,8 +164,10 @@ function updateSlideOrder() {
if (slideNumber) { if (slideNumber) {
slideNumber.textContent = `${index + 1}` slideNumber.textContent = `${index + 1}`
} }
slideElement.querySelector<HTMLButtonElement>('.delete-slide')?.setAttribute('aria-label', `Delete slide ${index + 1}`) slideElement
slideList.appendChild(slideElement) .querySelector<HTMLButtonElement>('.delete-slide')
?.setAttribute('aria-label', `Delete slide ${index + 1}`)
slideList.append(slideElement)
} }
updateSelection() updateSelection()
} }
@ -190,7 +215,7 @@ addSlideButton.addEventListener('click', async () => {
const slide = { code: '' } const slide = { code: '' }
slides.push(slide) slides.push(slide)
const slideElement = await generateSlideThumbnail(slide, slides.length - 1) const slideElement = await generateSlideThumbnail(slide, slides.length - 1)
slideList.appendChild(slideElement) slideList.append(slideElement)
updateSlideOrder() updateSlideOrder()
setSlide(slides.length - 1) setSlide(slides.length - 1)
}) })

268
src/style.css
View file

@ -1,209 +1,201 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
--bg: #181818; --bg: #181818;
--bg-raised: #202020; --bg-raised: #202020;
--bg-sunken: #101010; --bg-sunken: #101010;
--text: #e8e8e8; --text: #e8e8e8;
--text-muted: #a0a0a0; --text-muted: #a0a0a0;
--border-color: #3f3f3f; --border-color: #3f3f3f;
--accent: #008800; --accent: #008800;
--accent-text: #ffffff; --accent-text: #ffffff;
--slide-bg: #ffffff; --slide-bg: #ffffff;
--slide-border: #000000; --slide-border: #000000;
} }
body { body {
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
.container { .container {
display: grid; display: grid;
grid-template-columns: minmax(0, 0.6fr) minmax(0, 40%) minmax(0, 1fr); grid-template-columns: minmax(0, 0.6fr) minmax(0, 40%) minmax(0, 1fr);
grid-template-rows: 0.03fr 1fr; grid-template-rows: 0.03fr 1fr;
gap: 0; gap: 0;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas:
"menubar menubar menubar" 'menubar menubar menubar'
"slidelist code preview"; 'slidelist code preview';
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
.menubar { .menubar {
grid-area: menubar; grid-area: menubar;
background-color: var(--accent); background-color: var(--accent);
color: var(--accent-text); color: var(--accent-text);
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.slidelist { .slidelist {
grid-area: slidelist; grid-area: slidelist;
min-width: 0; min-width: 0;
background-color: var(--bg); background-color: var(--bg);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
overflow-y: auto; overflow-y: auto;
} }
.slide-list-header { .slide-list-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
min-height: 3rem; min-height: 3rem;
padding: 0 1rem; padding: 0 1rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
color: var(--text); color: var(--text);
font-weight: 600; font-weight: 600;
} }
.add-slide { .add-slide {
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
padding: 0; padding: 0;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text); color: var(--text);
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
} }
.add-slide:hover, .add-slide:hover,
.add-slide:focus-visible, .add-slide:focus-visible,
.delete-slide:hover, .delete-slide:hover,
.delete-slide:focus-visible { .delete-slide:focus-visible {
border-color: var(--accent); border-color: var(--accent);
color: var(--accent-text); color: var(--accent-text);
background: var(--accent); background: var(--accent);
outline: none; outline: none;
} }
.slide-list-items { .slide-list-items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem; padding: 1rem;
} }
.code { .code {
grid-area: code; grid-area: code;
min-width: 0; min-width: 0;
background-color: var(--bg-sunken); background-color: var(--bg-sunken);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
} }
.preview { .preview {
grid-area: preview; grid-area: preview;
min-width: 0; min-width: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
background-color: var(--bg); background-color: var(--bg);
}
.slide {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--slide-bg);
border: 1px solid var(--slide-border);
} }
.slide-list-item { .slide-list-item {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr); grid-template-columns: 1.25rem minmax(0, 1fr);
gap: 0.4rem; gap: 0.4rem;
align-items: start; align-items: start;
min-width: 0; min-width: 0;
} }
.slide-in-list { .slide-in-list {
grid-column: 1 / -1; grid-column: 1 / -1;
display: grid; display: grid;
grid-template-columns: 1.25rem minmax(0, 1fr); grid-template-columns: 1.25rem minmax(0, 1fr);
gap: 0.4rem; gap: 0.4rem;
align-items: start; align-items: start;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
padding: 0.35rem; padding: 0.35rem;
border: 1px solid var(--slide-border); border: 1px solid var(--slide-border);
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text); color: var(--text);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
} }
.slide-in-list:hover, .slide-in-list:hover,
.slide-in-list:focus-visible { .slide-in-list:focus-visible {
border-color: var(--accent); border-color: var(--accent);
outline: none; outline: none;
} }
.slide-list-item.selected .slide-in-list { .slide-list-item.selected .slide-in-list {
border-color: var(--accent); border-color: var(--accent);
box-shadow: inset 2px 0 0 var(--accent); box-shadow: inset 2px 0 0 var(--accent);
} }
.slide-number { .slide-number {
display: block; display: block;
min-height: 1rem; min-height: 1rem;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; line-height: 1rem;
text-align: center; text-align: center;
} }
.global-slide { .global-slide {
padding-left: 0.25rem; padding-left: 0.25rem;
border-left: 2px solid var(--accent); border-left: 2px solid var(--accent);
} }
.global-slide .slide-number { .global-slide .slide-number {
color: var(--accent); color: var(--accent);
font-weight: 700; font-weight: 700;
} }
.slide-in-list img { .slide-in-list img {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
object-fit: contain; object-fit: contain;
background: var(--slide-bg); background: var(--slide-bg);
} }
.delete-slide { .delete-slide {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
right: 0.25rem; right: 0.25rem;
display: grid; display: grid;
place-items: center; place-items: center;
width: 1.4rem; width: 1.4rem;
height: 1.4rem; height: 1.4rem;
padding: 0; padding: 0;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text); color: var(--text);
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
} }
.slide-list-item:hover .delete-slide, .slide-list-item:hover .delete-slide,
.delete-slide:focus-visible { .delete-slide:focus-visible {
opacity: 1; opacity: 1;
} }

40
tsconfig.json
View file

@ -1,24 +1,24 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2023", "target": "es2023",
"module": "esnext", "module": "esnext",
"lib": ["ES2023", "DOM"], "lib": ["ES2023", "DOM"],
"types": ["vite/client"], "types": ["vite/client"],
"allowArbitraryExtensions": true, "allowArbitraryExtensions": true,
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "verbatimModuleSyntax": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
/* Linting */ /* Linting */
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true, "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true
}, },
"include": ["src"] "include": ["src"]
} }