@riebeckite/plugin-source-files 0.0.32 → 0.0.33

package/README.md

@@ -30,11 +30,33 @@ export default defineConfig({
 
 ## Links and embeds
 
-- `[src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.md)` links to `/source/src/main.ts`.
+- `[src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.md)` links to `/source/src/main.ts/`.
 - `![src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.md)` renders the source in the existing code-block path.
 - `#L10` and `#L10-L20` select lines in an embed. With Code Enhance enabled, those source-page fragments scroll to and highlight the matching line or range.
 
-Each source page includes its vault-relative path, detected language, size, a Copy action, and a Raw link to the normal attachment URL.
+Each source page includes its vault-relative path, detected language, size, and a download link.
+
+## Live examples
+
+The following source is rendered on this page as a source-page link, a full-file embed, and a line-range embed.
+
+#### Source
+
+````md
+[[source-file-example.ts]]
+
+![[source-file-example.ts]]
+
+![[source-file-example.ts#L3-L5]]
+````
+
+#### Rendered
+
+[source-file-example.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.md)
+
+![source-file-example.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.md)
+
+![source-file-example.ts#L3-L5](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.md#L3-L5)
 
 ## Safety and publication
 
@@ -50,7 +72,7 @@ Only files matching `include` and not matching `exclude` are eligible. The plugi
 
 ## Exports
 
-- `sourceFiles(options)` / `sourceFilesPlugin`
+- `sourceFiles(options)` / `sourceFiles`
 - `sourceFilePath(path)`
 - `SourceFilesOptions`
 

package/README_ja.md

@@ -30,11 +30,33 @@ export default defineConfig({
 
 ## リンクと埋め込み
 
-- `[src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.ja.md)` は `/source/src/main.ts` のページへリンクします。
+- `[src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.ja.md)` は `/source/src/main.ts/` のページへリンクします。
 - `![src/main.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/src/main.ts.ja.md)` は既存のコードブロック表示経路でソースを表示します。
 - `#L10` と `#L10-L20` は埋め込みの行範囲を選びます。Code Enhance を有効にすると、ソースページでも該当の行または範囲へスクロールし、強調表示します。
 
-ソースページには Vault 相対パス、検出した言語、サイズ、Copy 操作、通常の添付ファイル URL を指す Raw リンクを表示します。
+ソースページには Vault 相対パス、検出した言語、サイズとダウンロードリンクを表示します。
+
+## 実行例
+
+以下のソースは、このページ上でソースページへのリンク、ファイル全体の埋め込み、行範囲の埋め込みとして実際に描画されます。
+
+#### ソース
+
+````md
+[[source-file-example.ts]]
+
+![[source-file-example.ts]]
+
+![[source-file-example.ts#L3-L5]]
+````
+
+#### 実行例
+
+[source-file-example.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.ja.md)
+
+![source-file-example.ts](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.ja.md)
+
+![source-file-example.ts#L3-L5](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/source-file-example.ts.ja.md#L3-L5)
 
 ## 安全性と公開境界
 
@@ -50,7 +72,7 @@ export default defineConfig({
 
 ## 公開 API
 
-- `sourceFiles(options)` / `sourceFilesPlugin`
+- `sourceFiles(options)` / `sourceFiles`
 - `sourceFilePath(path)`
 - `SourceFilesOptions`
 

package/dist/client.js

@@ -1,17 +1,5 @@
 // client.ts
 function initSourceFiles() {
-  const onClick = async (event) => {
-    const target = event.target;
-    if (!(target instanceof Element)) return;
-    const button = target.closest("[data-source-file-copy]");
-    if (!button) return;
-    const code = document.querySelector(
-      ".rr-source-file .rr-code__code, .rr-source-file pre code"
-    );
-    if (!code?.textContent) return;
-    await navigator.clipboard?.writeText(code.textContent);
-    button.dataset.sourceFileCopied = "true";
-  };
   const updateLineTarget = () => {
     const match = decodeURIComponent(window.location.hash.slice(1)).match(
       /^L(\d+)(?:-L(\d+))?$/i
@@ -38,12 +26,10 @@ function initSourceFiles() {
     target.scrollIntoView({ block: "center" });
     target.focus({ preventScroll: true });
   };
-  document.addEventListener("click", onClick);
   window.addEventListener("hashchange", updateLineTarget);
   document.addEventListener("riebeckite:navigation", updateLineTarget);
   updateLineTarget();
   return () => {
-    document.removeEventListener("click", onClick);
     window.removeEventListener("hashchange", updateLineTarget);
     document.removeEventListener("riebeckite:navigation", updateLineTarget);
   };

package/dist/index.d.ts

@@ -5,5 +5,4 @@ export type SourceFilesOptions = {
     maxBytes?: number;
 };
 export declare function sourceFiles(options: SourceFilesOptions): import("@riebeckite/core").RiebeckitePlugin<SourceFilesOptions>;
-export declare const sourceFilesPlugin: typeof sourceFiles;
 export { sourceFilePath };

package/dist/index.js

@@ -64,11 +64,11 @@ ${source.text}
     type: "source-file",
     pathname: context.pathname,
     title,
-    body: `<main class="rr-source-file" data-source-file="${escapeHtmlAttribute(sourcePath)}"><header class="rr-source-file__header"><h1>${escapeHtml(title)}</h1><dl class="rr-source-file__metadata"><div><dt>Path</dt><dd>${escapeHtml(sourcePath)}</dd></div><div><dt>Language</dt><dd>${escapeHtml(languageFor(sourcePath))}</dd></div><div><dt>Size</dt><dd>${escapeHtml(formatBytes(source.bytes))}</dd></div></dl><div class="rr-source-file__actions"><button type="button" data-source-file-copy>Copy</button><a href="${escapeHtmlAttribute(attachmentUrl(sourcePath))}">Raw</a></div></header>${code}</main>`
+    body: `<main class="rr-source-file" data-source-file="${escapeHtmlAttribute(sourcePath)}"><header class="rr-source-file__header"><h1>${escapeHtml(title)}</h1><p class="rr-source-file__path">${escapeHtml(sourcePath)}</p><dl class="rr-source-file__metadata"><div><dt>Language</dt><dd>${escapeHtml(languageFor(sourcePath))}</dd></div><div><dt>Size</dt><dd>${escapeHtml(formatBytes(source.bytes))}</dd></div></dl><a class="rr-source-file__download" href="${escapeHtmlAttribute(attachmentUrl(sourcePath))}" download>Download source file</a></header>${code}</main>`
   };
 }
 function sourceFilePath(path) {
-  return `/source/${path.split("/").map(encodeURIComponent).join("/")}`;
+  return `/source/${path.split("/").map(encodeURIComponent).join("/")}/`;
 }
 function resolveSourcePath(pathname, manifest, options) {
   for (const entry of manifest.publicEntries) {
@@ -160,6 +160,7 @@ function sourceFiles(options) {
     pageTypes: [
       {
         id: "source-file",
+        directoryIndex: true,
         paths: (context) => listSourceFiles(context.manifest, context.contentSource, options),
         outputDependencies: (context) => {
           const path = resolveSourcePath(
@@ -187,7 +188,6 @@ function sourceFiles(options) {
     ]
   });
 }
-var sourceFilesPlugin = sourceFiles;
 function validateOptions(options) {
   if (!options || !Array.isArray(options.include) || options.include.length === 0) {
     return [
@@ -213,6 +213,5 @@ function validateOptions(options) {
 }
 export {
   sourceFilePath,
-  sourceFiles,
-  sourceFilesPlugin
+  sourceFiles
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-source-files",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.32"
+    "@riebeckite/core": "0.0.33"
   },
   "devDependencies": {
     "tsx": "^4.22.4"

package/style.css

@@ -1,12 +1,28 @@
+.rr-source-file {
+  width: min(100%, var(--rb-layout-article-max, 48rem));
+  margin-inline: auto;
+}
+
 .rr-source-file__header {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.rr-source-file__header h1 {
+  margin: 0;
+}
+
+.rr-source-file__path {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--rb-color-muted, currentColor);
 }
 
 .rr-source-file__metadata {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
+  gap: 0.25rem 1rem;
   margin: 0;
 }
 
@@ -17,15 +33,32 @@
 
 .rr-source-file__metadata dt {
   font-weight: 600;
+  color: var(--rb-color-muted, currentColor);
 }
 
 .rr-source-file__metadata dd {
   margin: 0;
 }
 
-.rr-source-file__actions {
-  display: flex;
-  gap: 0.75rem;
+.rr-source-file__download {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  margin-top: 0.25rem;
+  padding: 0.4rem 0.65rem;
+  border: 1px solid currentColor;
+  color: inherit;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.rr-source-file__download:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.rr-source-file__download:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 .rr-source-file-embed__title {