add shortcodes for YASGUI

assets/_custom.scss

@@ -4,6 +4,15 @@ body {
   font-family: 'Noto Sans JP', sans-serif;
 }
 
+code, .CodeMirror * {
+  font-family: 'M PLUS 1 Code', monospace;
+  font-weight: 500;
+}
+
+.book-btn {
+  font-weight: bold;
+}
+
 .book-page {
   display: flex;
   flex-flow: column;

assets/_fonts.scss

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@500&family=Noto+Sans+JP&display=swap');

assets/_variables.scss

@@ -0,0 +1,3 @@
+$container-max-width: 100rem;
+
+$toc-width: 12rem;

config.toml

@@ -4,8 +4,26 @@ title = '文化・芸術とLOD ハンズオン'
 
 theme = 'book'
 
+pygmentsCodeFences = true
+
 [params]
 BookRepo = 'https://github.com/Babibubebon/lodc2022-culture-art'
 BookCommitPath = 'commit'
 BookEditPath = 'edit/master'
 BookComments = false
+
+[markup]
+  [markup.highlight]
+    anchorLineNos = false
+    codeFences = true
+    guessSyntax = false
+    hl_Lines = ''
+    hl_inline = false
+    lineAnchors = ''
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = false
+    noClasses = true
+    noHl = false
+    style = 'dracula'
+    tabWidth = 4

content/_index.md

@@ -1,3 +1,7 @@
+---
+title: ""
+---
+
 文化・芸術とLOD ハンズオン
 =====
 

content/docs/mediaartsdb.md

@@ -0,0 +1,50 @@
+---
+title: "メディア芸術データベース"
+weight: 2
+# bookFlatSection: false
+# bookToc: true
+# bookHidden: false
+# bookCollapseSection: false
+# bookComments: false
+# bookSearchExclude: false
+---
+
+# メディア芸術データベース(ベータ版)
+
+https://mediaarts-db.bunka.go.jp/
+
+
+## メディア芸術データベース・ラボ (MADB Lab)
+https://mediag.bunka.go.jp/madb_lab/
+
+- [SPARQLクエリサービス](https://mediag.bunka.go.jp/madb_lab/lod/sparql/)
+- [データセット (Turtle, JSON-LD)](https://mediag.bunka.go.jp/madb_lab/lod/download/)
+
+
+## クエリエディタ
+{{< yasgui id="madb-lod" endpoint="https://mediag.bunka.go.jp/sparql"
+default-query=`PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX schema: <https://schema.org/>
+PREFIX class:    <https://mediaarts-db.bunka.go.jp/data/class#>
+PREFIX ma:       <https://mediaarts-db.bunka.go.jp/data/property#>
+SELECT * WHERE {
+  ?sub ?pred ?obj .
+} LIMIT 10`
+>}}
+
+-----
+
+### 公開年毎にアニメテレビレギュラーシリーズ数を集計する
+{{< yasgui-query yasgui-id="madb-lod" title="公開年毎にTVアニメシリーズ数を集計する" >}}
+PREFIX schema: <https://schema.org/>
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX class: <https://mediaarts-db.bunka.go.jp/data/class#>
+SELECT ?y (COUNT(DISTINCT *) AS ?cnt)  WHERE {
+  ?s a class:AnimationTVRegularSeries ;
+     schema:datePublished ?datePublished .
+}
+GROUP BY (SUBSTR(?datePublished, 1, 4) AS ?y)
+ORDER BY ASC(?y)
+{{< / yasgui-query >}}

content/docs/start.md

@@ -9,3 +9,4 @@ weight: 1
 # bookSearchExclude: false
 ---
 
+# はじめに

layouts/partials/docs/inject/head.html

@@ -0,0 +1,30 @@
+{{ if .HasShortcode "yasgui" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@triply/yasgui@4.2.27/build/yasgui.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/@triply/yasgui@4.2.27/build/yasgui.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.8/theme/dracula.css">
+<script>
+  const yasgui = {};
+  function setYasguiQuery(yasguiId, tabName, query) {
+    let yasguiInstance = yasgui[yasguiId];
+    let tab = yasguiInstance.getTab(tabName);
+    if (!tab) {
+      tab = yasguiInstance.addTab(true, {
+         ...Yasgui.Tab.getDefaults(),
+         requestConfig: yasguiInstance.config.requestConfig,
+         name: tabName,
+         id: tabName });
+    }
+    tab.setQuery(query);
+    tab.yasqe.query();
+  }
+</script>
+<style>
+  .yasr table.dataTable {
+    max-width: 100%;
+  }
+  .yasr table.dataTable tbody td {
+    padding: 2px 4px;
+    font-size: 90%;
+  }
+</style>
+{{ end }}

layouts/shortcodes/yasgui-query.html

@@ -0,0 +1,7 @@
+{{ $q := trim .Inner "\n" }}
+
+{{ highlight $q "sparql" }}
+<a class="book-btn"
+   onclick="setYasguiQuery('{{ .Get "yasgui-id" }}', '{{ .Get "title" }}', '{{ $q }}'); location.href='#{{ .Get "yasgui-id" }}'">
+    ▶ 実行する
+</a>

layouts/shortcodes/yasgui.html

@@ -0,0 +1,29 @@
+<div>
+  {{ with .Get "endpoint" }}
+  <p>
+    Endpoint: <code>{{ . }}</code>
+  </p>
+  {{ end }}
+  <div id="yasgui-{{ .Get "id" }}"></div>
+</div>
+
+<script>
+  yasgui["{{ .Get "id" }}"] = new Yasgui(document.getElementById("yasgui-{{ .Get "id" }}"), {
+    requestConfig: {{ dict "endpoint" (.Get "endpoint") }},
+    persistenceId: "{{ .Get "id" }}",
+    copyEndpointOnNewTab: false,
+    yasqe: {
+      theme: "dracula",
+      {{ with .Get "default-query" }}
+      value: {{ . }}
+      {{ end }}
+    },
+  });
+</script>
+{{ if .Get "endpoint" }}
+<style>
+  #yasgui-{{ .Get "id" }} .yasgui .autocompleteWrapper {
+    display: none !important;
+  }
+</style>
+{{ end }}