Merge pull request #15 from vim-denops/add-codeblock-title

Add codeblock title

Author: lambdalisue

.github/workflows/mdbook.yml

@@ -32,17 +32,22 @@ jobs:
       MDBOOK_VERSION: 0.4.36
     steps:
       - uses: actions/checkout@v4
-      - name: Install mdBook
-        run: |
-          curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf -y | sh
-          rustup update
-          cargo install --force --version ${MDBOOK_VERSION} mdbook
-          cargo install --force mdbook-alerts
+
+      - name: Install mdbook and cargo-binstall binaries
+        uses: taiki-e/install-action@v2
+        with:
+          tool: mdbook,cargo-binstall
+
+      - name: Install mdbook extensions
+        run: cargo binstall -y mdbook-alerts
+
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v4
+
       - name: Build with mdBook
         run: mdbook build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.github/workflows/test.yml

@@ -16,6 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - uses: actions/cache@v4
         with:
           path: |
@@ -26,18 +27,24 @@ jobs:
             target/
             .tools/
           key: ${{ runner.os }}-cargo
+
       - uses: denoland/[email protected]
         with:
           deno-version: ${{ env.DENO_VERSION }}
-      - name: Install mdBook
-        run: |
-          curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf -y | sh
-          rustup update
-          cargo install --force --version ${MDBOOK_VERSION} mdbook
-          cargo install --force mdbook-alerts
+
+      - name: Install mdbook and cargo-binstall binaries
+        uses: taiki-e/install-action@v2
+        with:
+          tool: mdbook,cargo-binstall
+
+      - name: Install mdbook extensions
+        run: cargo binstall -y mdbook-alerts
+
       - name: Build with mdBook
         run: mdbook build
+
       - name: Format
         run: deno fmt --check
+
       - name: Misspell
         uses: reviewdog/[email protected]

assets/codeblock-title.css

@@ -0,0 +1,8 @@
+.codeblock-title {
+  display: block;
+  margin: 0;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  color: color-mix(in srgb, var(--fg), #777 50%);
+  background-color: color-mix(in srgb, var(--bg), #777 20%);
+}

assets/codeblock-title.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const codeblocks = document.querySelectorAll("pre code");
+  codeblocks.forEach((codeblock) => {
+    const found = [...codeblock.classList.values()].find((v) =>
+      v.startsWith("title=")
+    );
+    if (found) {
+      const title = found.replace(/^title=/, "");
+      const titleElement = document.createElement("header");
+      titleElement.classList.add("codeblock-title");
+      titleElement.textContent = title;
+      codeblock.parentNode.prepend(titleElement, codeblock);
+    }
+  });
+});

book.toml

@@ -7,5 +7,7 @@ title = "Denops Documentation"
 
 [output.html]
 default-theme = "coal"
+additional-js = ["assets/codeblock-title.js"]
+additional-css = ["assets/codeblock-title.css"]
 
 [preprocessor.alerts]

src/getting-started/README.md

@@ -21,8 +21,8 @@ $HOME
 
 Next, write the following TypeScript code in `main.ts`:
 
-```typescript:denops/denops-getting-started/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
+```typescript,title=denops/denops-getting-started/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {
@@ -38,13 +38,13 @@ export const main: Entrypoint = (denops) => {
 Add the following line to your Vim or Neovim configuration file (e.g.,
 `~/.vimrc` or `~/.config/nvim/init.vim`):
 
-```vim
+```vim,title=~/.vimrc
 set runtimepath+=~/denops-getting-started
 ```
 
 Or Neovim Lua configuration file (e.g., `~/.config/nvim/init.lua`):
 
-```lua
+```lua,title=~/.config/nvim/init.lua
 vim.opt.runtimepath:append("~/denops-getting-started")
 ```
 

src/getting-started/explanation.md

@@ -91,7 +91,7 @@ easily call.
 In the Getting Started, we wrote the following code in the `main.ts` file:
 
 ```typescript
-import type { Entrypoint } from "jsr:@denops/[email protected]";
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {
@@ -107,7 +107,7 @@ Let's break down this code step by step.
 ### About Imports
 
 ```typescript
-import type { Entrypoint } from "jsr:@denops/[email protected]";
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
 ```
 
 The first line imports the `Entrypoint` type from the [@denops/std] standard
@@ -215,7 +215,7 @@ For example, use
 Vim's function instead of `denops.call` like:
 
 ```typescript
-import * as fn from "jsr:@denops/[email protected]/function";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
 
 // Bad (result1 is `unknown`)
 const result1 = await denops.call("expand", "%");

src/tutorial/helloworld/adding-an-api.md

@@ -6,9 +6,9 @@ will enhance the plugin by adding an API.
 Open `denops/denops-helloworld/main.ts` and rewrite the content with the
 following code:
 
-```typescript:denops/denops-helloworld/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { assert, is } from "jsr:@core/unknownutil@3.18.1";
+```typescript,title=denops/denops-helloworld/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { assert, is } from "jsr:@core/unknownutil@^4.3.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/helloworld/calling-vim-features.md

@@ -4,9 +4,9 @@ If you want to use a Vim feature from your Denops plugin, you can call it via
 the `denops` instance passed to the plugin's `main` function. You can rewrite
 `main.ts` as follows to register the `DenopsHello` as a Vim command:
 
-```ts:denops/denops-helloworld/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { assert, is } from "jsr:@core/unknownutil@3.18.1";
+```typescript,title=denops/denops-helloworld/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { assert, is } from "jsr:@core/unknownutil@^4.3.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {
@@ -29,7 +29,7 @@ export const main: Entrypoint = (denops) => {
 Then, rewrite `plugin/denops-helloworld.vim` to automatically call the `init`
 API on plugin load via the `DenopsPluginPost:{plugin_name}` autocmd:
 
-```vim:plugin/denops-helloworld.vim
+```vim,title=plugin/denops-helloworld.vim
 if exists('g:loaded_denops_helloworld')
   finish
 endif

src/tutorial/helloworld/creating-a-minimal-denops-plugin.md

@@ -31,8 +31,8 @@ denops-helloworld
 
 Here is the content of the `denops/denops-helloworld/main.ts` file:
 
-```typescript:denops/denops-helloworld/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
+```typescript,title=denops/denops-helloworld/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
 
 export const main: Entrypoint = (denops) => {
   console.log("Hello, Denops from TypeScript!");

src/tutorial/helloworld/creating-a-minimal-vim-plugin.md

@@ -13,7 +13,7 @@ denops-helloworld
 
 The content of the `plugin/denops-helloworld.vim` file is as follows:
 
-```vim:plugin/denops-helloworld.vim
+```vim,title=plugin/denops-helloworld.vim
 if exists('g:loaded_denops_helloworld')
   finish
 endif
@@ -45,13 +45,13 @@ Upon startup, Vim searches and loads files named `plugin/*.vim` in directories
 specified in `runtimepath`. To activate the plugin, add the following line to
 your Vim configuration file (e.g., `~/.vimrc` or `~/.config/nvim/init.vim`):
 
-```vim
+```vim,title=~/.vimrc
 set runtimepath+=~/denops-helloworld
 ```
 
 For Neovim's Lua configuration file (e.g., `~/.config/nvim/init.lua`), use:
 
-```lua
+```lua,title=~/.config/nvim/init.lua
 vim.opt.runtimepath:append("~/denops-helloworld")
 ```
 

src/tutorial/maze/adjusting-maze-size-to-fit-the-window.md

@@ -7,10 +7,10 @@ to have a maze that fits the current window size.
 Let's modify the plugin to ensure the generated maze fits the current window
 size.
 
-```typescript:denops/denops-helloworld/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import * as fn from "jsr:@denops/[email protected]/function";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-helloworld/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/creating-applicative-plugin.md

@@ -11,7 +11,7 @@ the maze plugin that will satisfy your crazy addictive maze solver friend.
 First, modify `plugin/denops-maze.vim` to accept the `Maze` command with an
 optional argument.
 
-```vim:plugin/denops-maze.vim
+```vim,title=plugin/denops-maze.vim
 if exists('g:loaded_denops_maze')
   finish
 endif
@@ -32,13 +32,13 @@ Then, modify the `main.ts` file to accept the optional argument for a custom
 opener, generate a maze that fits the current window size, configure the buffer
 options to make it non-file readonly buffer, etc.
 
-```ts:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { batch, collect } from "jsr:@denops/[email protected]/batch";
-import * as fn from "jsr:@denops/[email protected]/function";
-import * as op from "jsr:@denops/[email protected]/option";
-import { Maze } from "npm:@thewizardbear/[email protected]";
-import { assert, is } from "jsr:@core/unknownutil@3.18.1";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { batch, collect } from "jsr:@denops/std@^7.0.0/batch";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
+import * as op from "jsr:@denops/std@^7.0.0/option";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
+import { assert, is } from "jsr:@core/unknownutil@^4.3.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/outputting-content-to-buffer.md

@@ -6,9 +6,9 @@ the maze to a buffer so that users can yank the maze with daily Vim operations!
 
 Let's modify the code to make the generated maze output to a buffer.
 
-```ts:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/properly-configured-the-buffer.md

@@ -6,12 +6,12 @@ configure the buffer options to make the buffer non-modifiable and remove the
 buffer after closure. Open the `main.ts` file and modify the `maze` method as
 follows:
 
-```typescript:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import * as buffer from "jsr:@denops/[email protected]/buffer";
-import * as fn from "jsr:@denops/[email protected]/function";
-import * as op from "jsr:@denops/[email protected]/option";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import * as buffer from "jsr:@denops/std@^7.0.0/buffer";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
+import * as op from "jsr:@denops/std@^7.0.0/option";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/properly-create-a-virtual-buffer.md

@@ -9,11 +9,11 @@ In this section, we will use the `buffer` module of `@denops/std` to create a
 proper virtual buffer that concretizes the buffer content. Let's modify the
 `main.ts` file as follows:
 
-```typescript:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import * as buffer from "jsr:@denops/[email protected]/buffer";
-import * as fn from "jsr:@denops/[email protected]/function";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import * as buffer from "jsr:@denops/std@^7.0.0/buffer";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/reduce-the-number-of-rpc-calls.md

@@ -5,13 +5,13 @@ significantly influences the plugin's performance. In this section, we aim to
 enhance performance by reducing the number of RPC calls using the `batch` module
 from `@denops/std`. Let's revise the `main.ts` file as follows:
 
-```typescript:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { batch, collect } from "jsr:@denops/[email protected]/batch";
-import * as buffer from "jsr:@denops/[email protected]/buffer";
-import * as fn from "jsr:@denops/[email protected]/function";
-import * as op from "jsr:@denops/[email protected]/option";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { batch, collect } from "jsr:@denops/std@^7.0.0/batch";
+import * as buffer from "jsr:@denops/std@^7.0.0/buffer";
+import * as fn from "jsr:@denops/std@^7.0.0/function";
+import * as op from "jsr:@denops/std@^7.0.0/option";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {

src/tutorial/maze/utilizing-third-party-library.md

@@ -28,9 +28,9 @@ directory tree will look like this:
 
 The content of the `denops/denops-maze/main.ts` file will be:
 
-```typescript:denops/denops-maze/main.ts
-import type { Entrypoint } from "jsr:@denops/[email protected]";
-import { Maze } from "npm:@thewizardbear/[email protected]";
+```typescript,title=denops/denops-maze/main.ts
+import type { Entrypoint } from "jsr:@denops/std@^7.0.0";
+import { Maze } from "npm:@thewizardbear/maze_generator@^0.4.0";
 
 export const main: Entrypoint = (denops) => {
   denops.dispatcher = {
@@ -45,7 +45,7 @@ export const main: Entrypoint = (denops) => {
 
 The content of the `plugin/denops-maze.vim` file will be:
 
-```vim:plugin/denops-maze.vim
+```vim,title=plugin/denops-maze.vim
 if exists('g:loaded_denops_maze')
   finish
 endif
@@ -70,7 +70,7 @@ augroup END
 > `denops#plugin#wait_async()` in the function to wait for plugin load, like
 > this:
 >
-> ```vim
+> ```vim,title=plugin/denops-maze.vim
 > if exists('g:loaded_denops_maze')
 >   finish
 > endif