Merge pull request #14 from dollplayer2501/issues011

#11 fixed?
dollplayer2501 · Dec 8, 2023 · 9b21111 · 9b21111
2 parents f37105d + db74e55
commit 9b21111
Show file tree

Hide file tree

Showing 21 changed files with 169 additions and 10 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -4,7 +4,8 @@
 //
 
 //
-const directoryOutputPlugin = require('@11ty/eleventy-plugin-directory-output');
+const pluginDirectoryOutput = require('@11ty/eleventy-plugin-directory-output');
+const pluginTOC = require('eleventy-plugin-toc');
 
 //
 const collections = require('./source/_config/eleventy.collections.js');
@@ -13,6 +14,7 @@ const shortcodes = require('./source/_config/eleventy.shortcodes.js');
 
 //
 const markdownIt = require('markdown-it');
+const markdownItAnchor = require('markdown-it-anchor');
 
 //
 const { DateTime } = require('luxon');
@@ -22,6 +24,20 @@ const htmlmin = require('html-minifier');
 
 //
 const isProduction = process.env.NODE_ENV === 'product';
+//
+const mdOptions = {
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true
+};
+const mdAnchorOpts = {
+    permalink: true,
+    permalinkClass: 'anchor-link',
+    permalinkSymbol: '#',
+    level: [1, 2, 3, 4]
+};
+
 
 //
 //
@@ -32,7 +48,7 @@ module.exports = function (eleventyConfig) {
     // eleventy-plugin-directory-output
     //
 
-    eleventyConfig.addPlugin(directoryOutputPlugin, {
+    eleventyConfig.addPlugin(pluginDirectoryOutput, {
         columns: {
             filesize: true,
             benchmark: true,
@@ -86,14 +102,28 @@ module.exports = function (eleventyConfig) {
     // Markdown-it
     //
 
-    let markdownIt_options = {
-        // https://github.com/markdown-it/markdown-it#init-with-presets-and-options
-        html: true,
-        breaks: true,
-        linkify: true,
-    };
-    let markdownLib = markdownIt(markdownIt_options);
-    eleventyConfig.setLibrary('md', markdownLib);
+//    let markdownIt_options = {
+//        // https://github.com/markdown-it/markdown-it#init-with-presets-and-options
+//        html: true,
+//        breaks: true,
+//        linkify: true,
+//    };
+//    let markdownLib = markdownIt(markdownIt_options);
+//    eleventyConfig.setLibrary('md', markdownLib);
+
+    eleventyConfig.setLibrary(
+        'md',
+        markdownIt(mdOptions)
+        .use(markdownItAnchor, mdAnchorOpts)
+    );
+
+    eleventyConfig.addPlugin(pluginTOC, {
+        tags: ['h2', 'h3', 'h4'], // which heading tags are selected headings must each have an ID attribute
+        wrapper: 'div',           // element to put around the root `ol`/`ul`
+        wrapperClass: 'toc',      // class for the element around the root `ol`/`ul`
+        ul: true,                 // if to use `ul` instead of `ol`
+        flat: false,              // if subheadings should appear as child of parent or as a sibling
+    });
 
     //
     // 11ty Nunjucks Environment Options
@@ -166,6 +196,9 @@ module.exports = function (eleventyConfig) {
           });
     }
 
+    eleventyConfig.addWatchTarget('./source/contents/**/*.md');
+    eleventyConfig.addWatchTarget('./source/sections/**/*.md');
+
     //
     // display 11ty's events
     //

diff --git a/package.json b/package.json
@@ -24,10 +24,12 @@
         "@11ty/eleventy": "^2.0.1",
         "@11ty/eleventy-plugin-directory-output": "^1.0.1",
         "cross-env": "^7.0.3",
+        "eleventy-plugin-toc": "^1.1.5",
         "html-escaper": "^3.0.3",
         "html-minifier": "^4.0.0",
         "luxon": "^3.4.4",
         "markdown-it": "^13.0.2",
+        "markdown-it-anchor": "^8.6.7",
         "npm-check-updates": "^16.14.11",
         "npm-run-all": "^4.1.5",
         "rimraf": "^5.0.5",

diff --git a/source/_includes/layouts/post.njk b/source/_includes/layouts/post.njk
@@ -2,5 +2,10 @@
 
 
 {% block contentMain %}
+    {% if true == toc %}
+        <hr class="hoge" />
+        {{ content | toc | safe }}
+    {% endif %}
+
     {{ content | safe }}
 {% endblock %}
diff --git a/source/contents/404.md b/source/contents/404.md
@@ -4,6 +4,7 @@ order: 40
 permalink: /404.html
 layout: post.njk
 date: 2022-08-21 01:01:02
+toc: false
 ---
 
 Rem amet deleniti vel error debitis non iure enim et omnis illum? Eum officiis neque ex galisum repellat qui itaque nihil id laboriosam consequuntur aut laboriosam aliquam aut enim veritatis ut quas voluptatum.
diff --git a/source/contents/index.md b/source/contents/index.md
@@ -4,6 +4,7 @@ permalink: /index.html
 order: 50
 layout: home.njk
 date: 2022-08-21 01:01:01
+toc: false
 ---
 
 Lorem ipsum dolor sit amet. Qui incidunt rerum aut expedita aliquam ex magni galisum est quia alias. Est fugit neque est neque possimus quo voluptates ipsa ad dignissimos sapiente ut voluptates laborum. Qui quisquam animi ut quas beatae in excepturi deleniti qui quia modi deleniti expedita. 33 suscipit odit eum eligendi error ad aperiam amet et nostrum ratione in ipsam earum et temporibus dolores. A doloremque architecto sit iusto atque et odio dolore aut praesentium praesentium qui sint deserunt et beatae harum.
diff --git a/source/contents/parent01/child01/grandchild01.md b/source/contents/parent01/child01/grandchild01.md
@@ -4,6 +4,7 @@ permalink: /parent01/child01/grandchild01/index.html
 order: 100
 layout: post.njk
 date: 2022-10-21 01:01:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child01/grandchild02.md b/source/contents/parent01/child01/grandchild02.md
@@ -4,6 +4,7 @@ permalink: /parent01/child01/grandchild02/index.html
 order: 200
 layout: post.njk
 date: 2022-10-21 02:01:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child01/index.md b/source/contents/parent01/child01/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child01/index.html
 order: 1
 layout: post.njk
 date: 2022-10-21 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child02/grandchild01/index.md b/source/contents/parent01/child02/grandchild01/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child02/grandchild01/index.html
 order: 1
 layout: post.njk
 date: 2022-10-22 01:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child02/grandchild02/index.md b/source/contents/parent01/child02/grandchild02/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child02/grandchild02/index.html
 order: 2
 layout: post.njk
 date: 2022-10-22 02:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child02/grandchild03/index.md b/source/contents/parent01/child02/grandchild03/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child02/grandchild03/index.html
 order: 3
 layout: post.njk
 date: 2022-10-22 03:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child02/index.md b/source/contents/parent01/child02/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child02/index.html
 order: 2
 layout: post.njk
 date: 2022-10-22 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/child03/index.md b/source/contents/parent01/child03/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/child03/index.html
 order: 3
 layout: post.njk
 date: 2022-10-23 01:01:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent01/index.md b/source/contents/parent01/index.md
@@ -4,6 +4,7 @@ permalink: /parent01/index.html
 order: 20
 layout: post.njk
 date: 2022-10-20 00:00:01
+toc: false
 ---
 
 In sint veniam ut voluptas obcaecati in Quis maiores cum ratione commodi recusandae dolor! Aut explicabo maiores aut vitae mollitia sit debitis voluptas ut assumenda labore?

diff --git a/source/contents/parent02/child01.md b/source/contents/parent02/child01.md
@@ -4,6 +4,7 @@ permalink: /parent02/child01/index.html
 order: 1
 layout: post.njk
 date: 2022-11-11 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent02/child02.md b/source/contents/parent02/child02.md
@@ -4,6 +4,7 @@ permalink: /parent02/child02/index.html
 order: 2
 layout: post.njk
 date: 2022-11-12 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent02/child03.md b/source/contents/parent02/child03.md
@@ -4,6 +4,7 @@ permalink: /parent02/child03/index.html
 order: 3
 layout: post.njk
 date: 2022-11-13 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/parent02/index.md b/source/contents/parent02/index.md
@@ -4,6 +4,7 @@ permalink: /parent02/index.html
 order: 30
 layout: post.njk
 date: 2022-11-10 00:00:01
+toc: false
 ---
 
 Nam rerum perferendis sit nostrum laborum aut deleniti assumenda quo esse rerum ut officia quasi. Aut quaerat galisum et voluptas commodi qui sapiente laudantium. In labore repellat vel omnis magnam non facilis eius sed aliquid ipsa. Et explicabo voluptas vel temporibus autem ut reprehenderit consectetur ea amet voluptatem et nisi itaque non tempora veritatis non quia consequuntur.
diff --git a/source/contents/test01/index.md b/source/contents/test01/index.md
@@ -4,6 +4,7 @@ order: 11
 permalink: /test01/index.html
 layout: post.njk
 date: 2022-12-12 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/test02/index.md b/source/contents/test02/index.md
@@ -4,6 +4,7 @@ order: 12
 permalink: /test02/index.html
 layout: post.njk
 date: 2022-12-15 00:00:01
+toc: false
 ---
 
 ### {{ title }}

diff --git a/source/contents/test03/index.md b/source/contents/test03/index.md
@@ -0,0 +1,102 @@
+---
+title: Test 03 page, using eleventy-plugin-toc
+order: 13
+permalink: /test03/index.html
+layout: post.njk
+date: 2023-12-05 00:00:01
+toc: true
+---
+
+[link_markdown-it-table-of-contents]: https://www.npmjs.com/package/markdown-it-table-of-contents
+[link_markdown-it-anchor]: https://www.npmjs.com/package/markdown-it-anchor
+[link_eleventy-plugin-toc]: https://www.npmjs.com/package/eleventy-plugin-toc
+
+
+I'm using [markdown-it-table-of-contents][link_markdown-it-table-of-contents] (and [markdown-it-anchor][link_markdown-it-anchor]).  
+When using this to expand the TOC, I understand that it can only be made into a Markdown file.
+
+What I would like to achieve in the future is complete separation of content and TOC.  
+My ideal is a normal layout with TOC on either the left or right and the body in the center.  
+To achieve this, I think you need to tell a template engine like Nunjucks where to extract the TOC and content.  
+However, due to my lack of skills, I was not able to achieve this using the existing system.  
+For this reason, I decided to try another Npm package, [eleventy-plugin-toc][link_eleventy-plugin-toc].
+
+
+### 前述の和訳
+
+私は[markdown-it-table-of-contents][link_markdown-it-table-of-contents]（および[markdown-it-anchor][link_markdown-it-anchor]）を使用しています。  
+これを使って目次を展開する場合、Markdownファイルにするしか、記述できない事は理解しています。
+
+将来的にはコンテンツと目次を完全に分離したいと考えています。  
+私の理想は、TOCが左右どちらかにあり、本文が中央にある通常のレイアウトです。  
+これを実現するには、Nunjucksの様なテンプレートエンジンに目次とコンテンツを抽出する場所を指示する必要があると思います。  
+しかし、私のスキル不足により、既存のシステムではそれを実現することができませんでした。  
+このため、別のNpmパッケージである[eleventy-plugin-toc][link_eleventy-plugin-toc]を試す事にしました。
+
+
+
+
+
+#### 小太鼓はばかのびっくり間汁に甘藍とおろしぶんたで (H4)
+
+いやしばらく正確たますという巻なな。変ませましんたはましではおいでの上手たちのなかがしかとんとんいやでしたて、やつじゃゴーシュをいうられることだです。
+
+きすぎみんなはゴーシュが高くませて一生けん命の手のセロたちから笑っ第何音館のまねをはくすからいたまし。向うは今日飛び立ちてやった。ドアは六しかっこうのようからとまって出した。ラプソディも火花たばこたりおれをぶっつけていた。かっこうもゴーシュをいきなりに見てぼうを窓のようを膨らんてゴーシュが起きあがってそっとむしを許しがきな。
+
+ばたばたすっかり音を音にしたた。ここら思わずにひとりがたべて狸をこりますな。
+
+
+#### ゴーシュへ置いないた (H4)
+
+「どなりでかかえた。音楽、みんなでまわり。云い。」ぼくは今のうちのどんどん半分のところにあいだなく。
+
+頭は音楽でおねずみをしが子へ赤をしゃくにさわってがらんと一生けん命くらべがっんなかへ困るたた。じつにびっくりしが、ふみとあわてていましてなんどへまた巻でそんなに日考えだっます。「ねずみしまい。箱へやりない。云っよ。どこも何をゴーシュにとってなど弾き出しパンは恐いことでてよ。」
+
+やつは生意気そうをひるてかい遁先生を追い払っとでし東のだいがしからねむらや知らてはじめまし。
+
+
+### 弓も合わて床にしないた (H3)
+
+それはぼろぼろいっしょもみじかいんんて専門はまったく永くふしたん。「はじめの夜の糸が。し。」何はそうしたまし。力は手をしと前まし。またはじめはおいおいきっだた。うまい病気ましとしでててしんが居りようましぐったがってしばらくくしゃみをするようなをせとそれでやはり顔に人やめなくまし。こうかとセロもてとうとうしただて悪い気をも一生けん命もお母さんの足たです。
+
+ぐったがってしばらくくしゃみをするようなは何がはじめまし嵐のところ何を鳴ったようになあ猫クラリネットを家につかまえるでここか弾いのがこぼしてつづけました。「ではいきなり前の先生。し。」こらと叫びがとけたかとすわりていきなり風が楽長からよろよろ出てゴーシュしましまし。「まっ黒た。どんなにして来だら。
+
+
+### このどころは手の町はずれたんん (H3)
+
+何にこのもう出だことで。セロ。
+
+演奏までなんだか泣き声一ぺんもないんたなあ。ねずみにセロを云ってやろそれ曲からその火事ゴーシュかっこうとねずみらのねずみじゃのガラスばかにもっていますそんなにこれのちがいはうとうときれんだ。ゴーシュお母さんさん。さんをも云いのたての。ひもというのにどんと云いいた。過ぎもあいは外においてもんのこんこんやったものまい。だってにわかにぐるぐるねずみのセロと押し出したはよ。
+
+
+#### あんななかみんなか外ゴーシュの外からかっこうっといるんから弾きたまし (H4)
+
+「ゴーシュみんなか。」野ねずみも仕上げますように追い払っなまし。また入ってばへしてつかまえながらだしないんは今度じゃ二十ぺんなっならものになっその六位遁たまし。
+
+ひとの楽長が考えるなさっき食うましセロがとうに物すごいそうに弾きがきてホールのはじめであるていますだ。「ありがとうしです。まだおじぎはひどくたなあ。」「みんなませながら」子になっますた。
+
+「これごすみまし。済ましてしまい。」
+
+十ぺん小麦をしょったまし。ホールはつかまえてのいったいを一日をぶっつかったまし。「おれに云いさんを外国なんてもぐり込みていとわかっませ。第一何が叩く扉館へ出すていたのまでひくか。
+
+するとそのまわりだってどこの小太鼓の何まし。いつた。こわくはなったそっちにひるながら。夜までも処のゴーシュが思い切ったりゴーシュだやしましのはみんなましだ。
+
+行っばまわっ。
+
+
+##### 文字は要件メディアが保有しペディアなます以下 (H5)
+
+利用しれ方針を信頼権可能の前記財団がされてはするで、フレーズの目的も、信頼するファイルを研究することという執筆十分ませですてなりなない。
+しかし、アートの回避名は、ライセンスの参考し留意独自なく原則が出版さ、その主題に科さば列で引用しことに書評するれで。またを、運用部分が執筆挙げれている脚注を既に問いしことも、前記ません、自らによるは著作国の許諾として記事中の問題も係ることが、お留意物も、可能の検証にしと記事に引用するたばいるなませ。引用しと、その他の著作もなくかもさますで。
+
+
+##### あるいは、権利にBYとする文という (H5)
+
+たとえば、被利用等に、削除する記事の記事、文章で自由に投稿することをするて、タイトル要件の引用に対象を考慮できことでして、執筆するな例外を許諾、閲覧国発表ないあっとの投稿を行うことも、たとえ短いとしてよいませある。したがって仮には、改変台詞に創作有しれてい方針を決して保有し、事典上に引用しことに対する、権利の記事において部分の引用が厳しい引用ありことをいいな。
+
+
+#### みんなもさっさと狩の扉が見うてこさえよられんものまし (H4)
+
+無理た。ゴーシュはかっきりばかねずみからあるてついこどものひかるたようにぶんおろしながらあけるでするでいよいよ音のやぶれて見ろますでし。「またおどかしよ。」手はこれをしんか愕の長椅子を困るで狸はこれ負けてこい、けれども譜にあわせがねずみに立てましです。するとねずみが二二拍すぎのしんのゴーシュで工合のなかへ夜だけ血走っていたた。「おまえでなさいと。」「トロメライ、狸活動。」おいでも穴へとっがいいてすうなた。「なるべくか。
+
+トロメライにとってんはそのんか。」下待てはそれがいただけたかつまりんへんをできるてまし子の子の馬車がすこし起きあがっですた。