chore: rename facet file extensions to .html · burrito.space/diffuse@acf8292

+31 -2

_config.ts

··· 1 + import type { RequestHandler } from "lume/core/server.ts"; 1 2 import { dotenvRun } from "@dotenv-run/esbuild"; 2 3 import lume from "lume/mod.ts"; 3 4 ··· 17 18 src: "./src", 18 19 server: { 19 20 debugBar: false, 21 + middlewares: [facetHtmlMiddleware], 20 22 }, 21 23 }); 22 24 ··· 210 212 211 213 // MISC 212 214 213 - site.add([".htm"]); 215 + site.add([".html"]); 214 216 site.add([".json"]); 215 - site.add([".txt"]); 216 217 site.use(sourceMaps()); 217 218 218 219 site.script("copy-type-defs", () => { ··· 232 233 site.addEventListener("afterBuild", () => { 233 234 // site.run("copy-type-defs"); 234 235 }); 236 + 237 + // MIDDLEWARE 238 + 239 + // Facet HTML files are HTML fragments fetched via JS, not full pages. 240 + // Serving them as text/plain prevents Lume's dev server from injecting 241 + // its live-reload <script> tag into the fetched content. 242 + async function facetHtmlMiddleware( 243 + request: Request, 244 + next: RequestHandler, 245 + ): Promise<Response> { 246 + const { pathname } = new URL(request.url); 247 + console.log(pathname); 248 + 249 + const isFacetHtml = pathname.endsWith(".html"); 250 + const response = await next(request); 251 + 252 + if (!isFacetHtml || !response.headers.get("content-type")?.includes("html")) { 253 + return response; 254 + } 255 + 256 + const headers = new Headers(response.headers); 257 + headers.set("content-type", "text/plain; charset=utf-8"); 258 + return new Response(response.body, { 259 + status: response.status, 260 + statusText: response.statusText, 261 + headers, 262 + }); 263 + }

src/facets/examples/generate-playlist.html.txt src/facets/examples/generate-playlist.html

src/facets/examples/now-playing.html.txt src/facets/examples/now-playing.html

+14 -14

src/facets/index.vto

··· 14 14 # FACETS 15 15 16 16 builtIn: 17 - - url: "themes/blur/artwork-controller/facet.html.txt" 17 + - url: "themes/blur/artwork-controller/facet.html" 18 18 title: "Blur / Artwork controller" 19 19 desc: > 20 20 Audio playback controller with an artwork display. 21 - - url: "facets/tools/auto-queue.html.txt" 21 + - url: "facets/tools/auto-queue.html" 22 22 title: "Tools / Automatic Queue" 23 23 desc: > 24 24 Everything you need to automatically put tracks into the queue. 25 - - url: "facets/tools/v3-import.html.txt" 25 + - url: "facets/tools/v3-import.html" 26 26 title: "Tools / V3.x Import" 27 27 desc: > 28 28 Import data from Diffuse v3. 29 - - url: "themes/webamp/browser/facet.html.txt" 29 + - url: "themes/webamp/browser/facet.html" 30 30 title: "Webamp / Browser" 31 31 desc: > 32 32 Collection browser + search in a retro, win98, look. 33 - - url: "themes/webamp/configurators/input/facet.html.txt" 33 + - url: "themes/webamp/configurators/input/facet.html" 34 34 title: "Webamp / Input Configurator" 35 35 desc: > 36 36 Windows 98 styled input configurator where you can add music sources. 37 - - url: "themes/webamp/configurators/output/facet.html.txt" 37 + - url: "themes/webamp/configurators/output/facet.html" 38 38 title: "Webamp / Output Configurator" 39 39 desc: > 40 40 Windows 98 styled output configurator where you can manage your data storage. 41 41 42 42 examples: 43 - - url: "facets/examples/now-playing.html.txt" 43 + - url: "facets/examples/now-playing.html" 44 44 title: "Now playing" 45 45 desc: > 46 46 Shows what's currently set to "now playing" in the queue, along with a button to shift the queue to the next track. 47 - - url: "facets/examples/generate-playlist.html.txt" 47 + - url: "facets/examples/generate-playlist.html" 48 48 title: "Generate playlist" 49 49 desc: > 50 50 Make a list of what previously played in the queue. ··· 99 99 <li> 100 100 101 101 102 - <a href="{{ ('themes/webamp/configurators/input/facet.html.txt') |> facetLoaderURL }}">Add</a> audio from various places on the web and your device. 102 + <a href="{{ ('themes/webamp/configurators/input/facet.html') |> facetLoaderURL }}">Add</a> audio from various places on the web and your device. 103 103 104 104 </li> 105 105 <li> 106 106 107 107 108 - <a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetLoaderURL }}">Browse</a> your collection to put something into the queue. 108 + <a href="{{ ('themes/webamp/browser/facet.html') |> facetLoaderURL }}">Browse</a> your collection to put something into the queue. 109 109 110 110 </li> 111 111 <li> 112 112 113 113 114 - <a href="{{ ('facets/tools/auto-queue.html.txt') |> facetLoaderURL }}">Automate</a> adding items to the queue, for infinite playback or listening to a playlist. 114 + <a href="{{ ('facets/tools/auto-queue.html') |> facetLoaderURL }}">Automate</a> adding items to the queue, for infinite playback or listening to a playlist. 115 115 116 116 </li> 117 117 <li> 118 118 119 119 120 - <a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetLoaderURL }}">Play</a> queued songs. 120 + <a href="{{ ('themes/blur/artwork-controller/facet.html') |> facetLoaderURL }}">Play</a> queued songs. 121 121 122 122 </li> 123 123 <li> 124 124 125 125 126 - <a href="{{ ('themes/webamp/configurators/output/facet.html.txt') |> facetLoaderURL }}">Manage</a> your user data, sync with your other devices or other people. 126 + <a href="{{ ('themes/webamp/configurators/output/facet.html') |> facetLoaderURL }}">Manage</a> your user data, sync with your other devices or other people. 127 127 128 128 </li> 129 129 </ol> ··· 135 135 To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing ones here and create one below. 136 136 137 137 138 - For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet.html.txt') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue.html.txt') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet.html.txt') |> facetLoaderURL }}">controller</a> could be used. 138 + For example, say you want to play music; two options would be: (1) <a href="{{ ('themes/webamp/browser/facet.html') |> facetLoaderURL }}">browse</a> for a specific song and add it to the queue, or (2) <a href="{{ ('facets/tools/auto-queue.html') |> facetLoaderURL }}">automatically</a> add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a <a href="{{ ('themes/blur/artwork-controller/facet.html') |> facetLoaderURL }}">controller</a> could be used. 139 139 140 140 141 141 You might ask, why can't I do all of this in just one window? That's what <a href="themes/">themes</a> are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.

src/facets/tools/auto-queue.html.txt src/facets/tools/auto-queue.html

src/facets/tools/v3-import.html.txt src/facets/tools/v3-import.html

src/themes/blur/artwork-controller/facet.html.txt src/themes/blur/artwork-controller/facet.html

src/themes/webamp/browser/facet.html.txt src/themes/webamp/browser/facet.html

src/themes/webamp/configurators/input/facet.html.txt src/themes/webamp/configurators/input/facet.html

src/themes/webamp/configurators/output/facet.html.txt src/themes/webamp/configurators/output/facet.html

Configure Feed

Configure Feed