presently 0.21.0 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d60b3fb59bbf07f0fdd4f3e1756998485049e2b55dc56225160e160af02346e
-  data.tar.gz: 4837aa9c8574f3b759a3199db53ad263d323df5cd6239df7292e8535ad83702c
+  metadata.gz: bceb99c19c4563f60e51fe3e17cce836c7176ebd9b695919af5737ccc87fd4ca
+  data.tar.gz: 102b2bbab9019d17c5aadb85c3f40044c1e94bdb2e587482c246d0c184f5fa36
 SHA512:
-  metadata.gz: b597972eabe2fec25758be28d3630db39756e93e7e2c24c43cfcdbaca3385741c1306748ada054cc7ea9d8bdbe9ba91f05217453cd5bfca3a1be5c2cc885b8d9
-  data.tar.gz: 122236fe265570f0be41163f662376b55df718d28ee52eada7e796c415ea52edd0f8f225649e1b9438d457cbb9281c2d06674274a80a33d6ec7b12ef304bed80
+  metadata.gz: 8edf0ac3857670ce3afe65522bdf9d560b2f909fb68a85a43161200047f6a8fe588be5bef3ee685ca007a927d47999b5afc7c0db65ae43896c78b018ec347ffc
+  data.tar.gz: b8cca4183e4494e9fdd2923e429bc3bdca75310f127eba5474f410214c90f2cd5a0b2d89bb03df1e887673d30b81ebb45320b3af5853b73f137e6fbe6c2554f7

data/context/animated-diagrams.md

@@ -192,7 +192,7 @@ Use semantic classes and CSS custom properties so that meaning remains separate
 .diagram-node {
   --node-color: var(--accent);
   border: 0.08em solid var(--node-color);
-  background: color-mix(in srgb, var(--node-color) 10%, var(--slide-bg));
+  background: color-mix(in srgb, var(--node-color) 10%, var(--slide-background));
 }
 
 .diagram-node[data-tone="storage"] {

data/lib/presently/application.rb

@@ -72,10 +72,11 @@ module Presently
 		
 		# Create a Presently page with the presentation-specific stylesheets.
 		# @parameter view [Live::View] The root view for the page.
+		# @parameter interface [Symbol | Nil] The interface-specific stylesheet to load.
 		# @returns [Page] The presentation page.
-		def make_page(view)
+		def make_page(view, interface: nil)
 			stylesheets = controller.presentation.stylesheets.map(&:url)
-			Page.new(title: title, body: view, stylesheets: stylesheets)
+			Page.new(title: title, body: view, interface: interface, stylesheets: stylesheets)
 		end
 		
 		# Add Presently's application routes.
@@ -83,12 +84,12 @@ module Presently
 		def configure_routes(router)
 			router.get("/") do
 				body = resolver.root(HomeView)
-				Page.new(title: title, body: body).call
+				Page.new(title: title, body: body, interface: :home).call
 			end
 			
-			router.get("/display"){make_page(resolver.root(DisplayView)).call}
-			router.get("/presenter"){make_page(resolver.root(PresenterView)).call}
-			router.get("/record"){make_page(resolver.root(RecordingView)).call}
+			router.get("/display"){make_page(resolver.root(DisplayView), interface: :display).call}
+			router.get("/presenter"){make_page(resolver.root(PresenterView), interface: :presenter).call}
+			router.get("/record"){make_page(resolver.root(RecordingView), interface: :recorder).call}
 			
 			router.route("/recordings", methods: ["GET", "HEAD", "PUT"]) do |request|
 				handle_recording(request, request_parameters(request))

data/lib/presently/export.xrb

@@ -4,6 +4,8 @@
 		<meta charset="UTF-8" />
 		
 		<link rel="stylesheet" href="/_static/index.css" type="text/css" />
+		<link rel="stylesheet" href="/_static/slides.css" type="text/css" />
+		<link rel="stylesheet" href="/_static/export.css" type="text/css" />
 		<link rel="stylesheet" href="/_static/custom.css" type="text/css" />
 		<link rel="stylesheet" href="/_components/@socketry/syntax/themes/base/syntax.css" type="text/css" />
 		<?r self.stylesheets.each do |stylesheet| ?>

data/lib/presently/page.rb

@@ -13,8 +13,17 @@ module Presently
 	class Page < Lively::Page
 		ICON = "/_static/icon.png"
 		STYLESHEETS = [
-			{href: "/_static/site.css", media: "screen"}.freeze,
 			{href: "/_static/index.css", media: "screen"}.freeze,
+		].freeze
+		SLIDES_STYLESHEET = {href: "/_static/slides.css", media: "screen"}.freeze
+		INTERFACE_STYLESHEETS = {
+			home: [{href: "/_static/home.css", media: "screen"}.freeze].freeze,
+			display: [SLIDES_STYLESHEET, {href: "/_static/display.css", media: "screen"}.freeze].freeze,
+			presenter: [SLIDES_STYLESHEET, {href: "/_static/presenter.css", media: "screen"}.freeze].freeze,
+			recorder: [SLIDES_STYLESHEET, {href: "/_static/recorder.css", media: "screen"}.freeze].freeze,
+		}.freeze
+		DEFAULT_INTERFACE_STYLESHEETS = INTERFACE_STYLESHEETS.values.flatten.uniq.freeze
+		TRAILING_STYLESHEETS = [
 			{href: "/_static/custom.css", media: "screen"}.freeze,
 			{href: "/_components/@socketry/syntax/themes/base/syntax.css", media: "screen"}.freeze,
 		].freeze
@@ -31,13 +40,16 @@ module Presently
 		# Initialize a new page.
 		# @parameter title [String] The page title.
 		# @parameter body [Live::View | Nil] The Live view to embed in the page.
+		# @parameter interface [Symbol | Nil] The interface-specific stylesheets to load, or all interface stylesheets by default for compatibility.
 		# @parameter stylesheets [Array(String | Hash)] Presentation-specific stylesheets.
-		def initialize(title: "Presently", body: nil, stylesheets: [])
+		def initialize(title: "Presently", body: nil, interface: nil, stylesheets: [])
+			interface_stylesheets = interface ? INTERFACE_STYLESHEETS.fetch(interface) : DEFAULT_INTERFACE_STYLESHEETS
+			
 			super(
 				title: title,
 				body: body,
 				icon: ICON,
-				stylesheets: STYLESHEETS + stylesheets,
+				stylesheets: STYLESHEETS + interface_stylesheets + TRAILING_STYLESHEETS + stylesheets,
 				imports: IMPORTS,
 				modules: MODULES,
 			)

data/lib/presently/playback.xrb

@@ -7,8 +7,9 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
 		<link rel="icon" type="image/png" href="/_static/icon.png" />
-		<link rel="stylesheet" href="/_static/site.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_static/index.css" type="text/css" media="screen" />
+		<link rel="stylesheet" href="/_static/slides.css" type="text/css" media="screen" />
+		<link rel="stylesheet" href="/_static/playback.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_static/custom.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_components/@socketry/syntax/themes/base/syntax.css" type="text/css" media="screen" />
 		<?r self.stylesheets.each do |stylesheet| ?>

data/lib/presently/version.rb

@@ -5,5 +5,5 @@
 
 # @namespace
 module Presently
-	VERSION = "0.21.0"
+	VERSION = "0.22.0"
 end

data/public/_static/custom.css

@@ -1,74 +1,7 @@
-/* ========================
-   ARCHITECTURE DIAGRAM
-   ======================== */
-
-.arch-diagram {
-	position: relative;
-	width: 100%;
-	height: 80%;
-	font-family: var(--font-mono);
-	font-size: 0.85em;
-}
-
-.arch-box {
-	position: absolute;
-	border-radius: 8px;
-	padding: 0.9rem 1rem;
-}
-
-.arch-box-title {
-	font-weight: bold;
-	margin-bottom: 0.6rem;
-}
-
-.arch-component {
-	border-radius: 4px;
-	padding: 0.35rem 0.5rem;
-	text-align: center;
-	margin-bottom: 0.35rem;
-}
-
-.arch-component:last-child {
-	margin-bottom: 0;
-}
-
-.arch-server {
-	border: 2px solid #f90;
-}
-
-.arch-server .arch-component {
-	border: 1px solid #666;
-}
-
-.arch-display {
-	border: 2px solid #4a9eff;
-}
-
-.arch-display .arch-component {
-	border: 1px solid #666;
-}
-
-.arch-display .arch-ws {
-	border-color: #4a9eff;
-	color: #4a9eff;
-}
-
-.arch-presenter {
-	border: 2px solid #a78bfa;
-}
-
-.arch-presenter .arch-component {
-	border: 1px solid #666;
-}
-
-.arch-presenter .arch-ws {
-	border-color: #a78bfa;
-	color: #a78bfa;
-}
-
-.arch-arrow {
-	position: absolute;
-	text-align: center;
-	color: #888;
-	font-size: 0.8em;
-}
+/*
+ * Add presentation-wide CSS overrides to this file.
+ * Prefer colocated slide- and section-specific stylesheets for focused changes:
+ * `slides/010-introduction.css` styles `slides/010-introduction.md`, while
+ * `slides/020-topic/style.css` styles every slide in `slides/020-topic/`.
+ * It intentionally contains no CSS rules by default.
+ */

data/public/_static/display.css

@@ -0,0 +1,25 @@
+/* ========================
+   DISPLAY VIEW (audience)
+   ======================== */
+
+.display {
+	width: 100vw;
+	height: 100vh;
+	background: var(--slide-background);
+	position: relative;
+	outline: none;
+}
+
+.display .slide-container {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.display .slide-counter {
+	position: absolute;
+	bottom: 1rem;
+	right: 1.5rem;
+	font-size: 0.9rem;
+	opacity: 0.4;
+}

data/public/_static/export.css

@@ -0,0 +1,111 @@
+/* ========================
+   EXPORT PAGE LAYOUT
+   ======================== */
+
+/* Allow multi-page layout — overrides the default full-viewport body. */
+body.export {
+	height: auto;
+	overflow: visible;
+}
+
+/*
+ * Each export-page div maps to one printed page.
+ * Dimensions are set via inline styles from Export::PageSize so they can
+ * be configured at export time. CSS just handles layout and overflow.
+ */
+.export-page {
+	position: relative;
+	overflow: hidden;
+	break-after: page;
+	page-break-after: always;
+}
+
+.export-slide-area {
+	position: relative;
+	overflow: hidden;
+}
+
+/* Notes panel below the slide. */
+.export-notes-area {
+	padding: 0.5rem 2rem 0.5rem;
+	background: #0d0d1f;
+	border-top: 2px solid var(--accent);
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+	overflow: hidden;
+}
+
+/* Meta strip — mirrors the timing bar in the presenter view. */
+.export-meta {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+	flex-shrink: 0;
+	font-size: 0.75rem;
+	opacity: 0.75;
+	font-family: var(--font-sans);
+}
+
+.export-slide-number {
+	font-weight: 600;
+}
+
+.export-filename code {
+	font-family: var(--font-mono);
+	background: rgba(255,255,255,0.08);
+	padding: 0.1em 0.35em;
+	border-radius: 3px;
+	font-size: 0.9em;
+}
+
+.export-elapsed,
+.export-duration {
+	opacity: 0.85;
+}
+
+.export-speaker {
+	margin-left: auto;
+	font-size: 0.8rem;
+	opacity: 0.9;
+}
+
+/* Override the shared notes panel to fit the compact export area. */
+.export-notes-area .notes {
+	min-height: unset;
+	max-height: unset;
+	padding: 0;
+	background: none;
+	border-radius: 0;
+	flex: 1;
+	overflow: hidden;
+}
+
+/* ========================
+   PRINT MEDIA
+   ======================== */
+
+@media print {
+	/* Allow full-document layout. */
+	html, body {
+		height: auto !important;
+		overflow: visible !important;
+	}
+
+	/* Ensure backgrounds (dark theme) are included in the PDF. */
+	html {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+	}
+
+	/* Each export-page is one printed page. */
+	.export-page {
+		break-after: page;
+		page-break-after: always;
+	}
+
+	/* Strip the Live element wrapper chrome from the presenter view if somehow printed. */
+	live-view {
+		display: contents;
+	}
+}

data/public/_static/home.css

@@ -0,0 +1,97 @@
+/* ========================
+   HOME
+   ======================== */
+
+.home {
+	width: 100vw;
+	height: 100vh;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: clamp(2rem, 8vw, 8rem);
+	background:
+		radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35rem),
+		var(--slide-background);
+}
+
+.home-heading,
+.home-interfaces {
+	width: min(72rem, 100%);
+	margin-inline: auto;
+}
+
+.home-heading {
+	margin-bottom: 3rem;
+}
+
+.home-kicker {
+	margin: 0 0 0.75rem;
+	color: var(--accent-light);
+	font-size: 0.9rem;
+	font-weight: 700;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+.home-heading h1 {
+	margin: 0;
+	font-size: clamp(2.5rem, 6vw, 5rem);
+	line-height: 1;
+}
+
+.home-introduction {
+	max-width: 48rem;
+	margin: 1.25rem 0 0;
+	font-size: clamp(1.1rem, 2vw, 1.4rem);
+	line-height: 1.5;
+	opacity: 0.72;
+}
+
+.home-interfaces {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 1rem;
+}
+
+.home-interface {
+	display: flex;
+	min-height: 10rem;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 1.5rem;
+	padding: 1.75rem;
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	border-radius: 0.75rem;
+	background: color-mix(in srgb, var(--surface) 82%, transparent);
+	color: inherit;
+	text-decoration: none;
+	transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
+}
+
+.home-interface:hover,
+.home-interface:focus-visible {
+	border-color: var(--accent-light);
+	background: color-mix(in srgb, var(--surface-light) 85%, transparent);
+	transform: translateY(-0.2rem);
+	outline: none;
+}
+
+.home-interface strong {
+	font-size: 1.4rem;
+}
+
+.home-interface span {
+	line-height: 1.5;
+	opacity: 0.7;
+}
+
+@media (max-width: 48rem) {
+	.home {
+		justify-content: flex-start;
+	}
+	
+	.home-interfaces {
+		grid-template-columns: 1fr;
+	}
+}