pages/.eleventy.js

const pluginTailwind = require('eleventy-plugin-tailwindcss');
const { url } = require('./src/_data/site');

// ocoge start
const md = require('markdown-it')({ html: true });
// const EleventyFetch = require("@11ty/eleventy-fetch");
const metascraper = require('metascraper')([
  require('metascraper-description')(),
  require('metascraper-image')(),
  require('metascraper-logo')(),
  require('metascraper-logo-favicon')(),
  require('metascraper-publisher')(),
  require('metascraper-title')(),
  require('metascraper-url')()
]);
const got = require('got');
// ocoge end

module.exports = (config) => {
  config.addPlugin(pluginTailwind, {
    src: 'src/assets/css/*'
  });

  config.setDataDeepMerge(true);

  config.addPassthroughCopy('src/assets/img/**/*');
  config.addPassthroughCopy({ 'src/posts/img/**/*': 'assets/img/' });

  config.addWatchTarget("src/assets/js/");

  config.addLayoutAlias('default', 'layouts/default.njk');
  config.addLayoutAlias('post', 'layouts/post.njk');

  config.addFilter('readableDate', require('./lib/filters/readableDate'));
  config.addFilter('minifyJs', require('./lib/filters/minifyJs'));

  config.addTransform('minifyHtml', require('./lib/transforms/minifyHtml'));

  config.addCollection('posts', require('./lib/collections/posts'));
  config.addCollection('tagList', require('./lib/collections/tagList'));
  config.addCollection('pagedPosts', require('./lib/collections/pagedPosts'));
  config.addCollection('pagedPostsByTag', require('./lib/collections/pagedPostsByTag'));

  // ocoge start
  config.addPassthroughCopy({ 'src/assets/oc-css/**/*': 'assets/css/' });
  config.addPassthroughCopy('src/assets/floatbox/**/*');

  // Shortcodes

  // 注釈
  var ann = 0;
  config.addShortcode('annotate', conf => {
    if (conf) ann = 1;
    else ann++;
    let n = String(ann);
    return `<sup><a href="#${n}">${n}</a></sup>`;
  });
  var sm = 0;
  config.addPairedShortcode('small', (content, conf) => {
    if (conf) sm = 1;
    else sm++;
    content = md.renderInline(content);
    return `<small id="${sm}">${sm}. ${content}</small>`;
  });

  // キャプション付きセンタリング画像
  config.addPairedShortcode('centerimg', (content, img) => {
    content = md.renderInline(content);
    return `<figure class="center"><img loading="lazy" src="/assets/img/${img}">
<figcaption>${content}</figcaption>
</figure>`;
  });

  // インライン画像
  config.addShortcode('inlineimg', conf => {
    return `<img loading="lazy" class="inline" src="/assets/img/${conf.img}" style="height: ${conf.height ? conf.height : '32px'}">`;
  });

  // 単純なボックス
  config.addPairedShortcode('simplebox', (content, cls) => {
    content = md.renderInline(content);
    return `<div class="${cls}"><p>${content}</p></div>`;
  });

  // 現在の年(footerで使用)
  config.addShortcode("year", () => `${new Date().getFullYear()}`);

  // Youtube 埋め込み
  config.addPairedShortcode("youtube", (content, conf) => {
    content = md.renderInline(content);
    return `<figure class="youtube"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/${conf.videoid}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption>${content}</figcaption></figure>`;
  });

  // 強調表示（インライン）
  config.addPairedShortcode("strong", (content, conf) => {
    content = md.renderInline(content);
    return `<span style="font-weight:bold; color:${conf.color ? conf.color : 'initial'}">${content}</span>`;
  });

  // IconBox
  config.addPairedShortcode("iconbox", (content, conf) => {
    content = md.renderInline(content);
    return `<div class="iconbox">
    <span class="box-title"><i class="${conf.iconclass ? conf.iconclass : "fa-solid fa-circle-exclamation"}"></i></span>
    <p>${content}</p>
    </div>`;
  });

  // Blog Card
  config.addAsyncShortcode("blogcard", async (conf) => {
    try {
      var { body: html, url } = await got(conf.link);
    } catch (error) {
      console.error('MyTryCatchError: ' + error);
      return '<p>404</p>';
    }

    const metadata = await metascraper({ html, url });

    // uri に "localhost" を使えるようにする：ポート80 でローカルwebサーバを立てておく
    // なんか勝手に localhost が ocoge.club に書き換わるのでそちらも対策
    if (metadata.url) { metadata.url = metadata.url.replace('http://localhost', ''); metadata.url = metadata.url.replace('https://ocoge.club', ''); }
    if (metadata.image) { metadata.image = metadata.image.replace('http://localhost', ''); metadata.image = metadata.image.replace('https://ocoge.club', ''); }
    if (metadata.logo) { metadata.logo = metadata.logo.replace('http://localhost', ''); metadata.logo = metadata.logo.replace('https://ocoge.club', ''); }

    return `<div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="${metadata.url}">${metadata.title}</a></h4>${metadata.image ? `<img loading="lazy" class="blogcard__image" src="${metadata.image}">` : ``}${metadata.description ? `<p class="blogcard__description">${metadata.description}</p>` : ""}<div class="blogcard__meta">${metadata.logo ? `<img loading="lazy" class="blogcard__logo" src="${metadata.logo}">` : ""}${metadata.publisher ? `<span class="blogcard__publisher">${metadata.publisher}</span>` : ""}</div></article></div>`;
    // const metadata = await EleventyFetch(`https://api.microlink.io/?url=${conf.link}`, {
    //   duration: "1w",
    //   type: "json",
    // });
    // return `<div class="card"><article class="blogcard">
    // <h4 class="blogcard__heading"><a class="blogcard__link" href="${metadata.data.url}">${metadata.data.title}</a></h4>
    // ${metadata.data.image ? `<img class="blogcard__image" src="${metadata.data.image.url}" width="${metadata.data.image.width}" height="${metadata.data.image.height}" alt="">` : ``}
    // ${metadata.data.description ? `<p class="blogcard__description">${metadata.data.description}</p>` : ""}
    // <small class="blogcard__meta">
    // ${metadata.data.logo ? `<img class="blogcard__logo" src="${metadata.data.logo.url}" width="${metadata.data.logo.width}" height="${metadata.data.logo.height}" alt="">` : ""}
    // ${metadata.data.publisher ? `<span class="blogcard__publisher">${metadata.data.publisher}</span>` : ""}</small>
    // </article></div>`;
  });

  // FloatBox
  config.addPairedShortcode("floatbox", (content, conf) => {
    content = md.renderInline(content);
    w = conf.width ? conf.width : 'auto'
    return `<figure style="max-width: ${w}; margin: 0 auto;"><div class="floatbox"
    data-fb-options="colorTheme:${conf.colortheme ? conf.colortheme : 'silver'}" style="width: 100%;">
    <a href="/assets/img/${conf.img}" title="${conf.title ? conf.title : ''}"><img loading="lazy" src="/assets/img/${conf.img}" style="width: 100%;"></a></div>
    <figcaption>${content}</figcaption>
    </figure>`;
  });

  // 別窓リンク
  config.addPairedShortcode("link_new", (content, conf) => {
    content = md.renderInline(content);
    return `<a href="${conf.uri}" target="_new" title="${conf.title ? conf.title : ''}">${content} <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>`
  });

  // マーカー
  config.addPairedShortcode("span", (content, clss) => {
    content = md.renderInline(content);
    return `<span class="${clss}">${content}</span>`;
  });

  // レッスン（アコーディオン）
  config.addPairedShortcode("lesson", (content, conf) => {
    content = md.renderInline(content);
    return `<details class="lesson">
  <summary class="lesson"> <i class="fa-solid fa-pen-to-square"></i> レッスン：${conf.summary}</summary>
  <div class="lesson"><div class="slide">${content}</div></div>
</details>`;
  });

  // ブロックプログラム（アコーディオン）
  config.addPairedShortcode("blockprogram", (content, conf) => {
    content = md.renderInline(content);
    return `<details class="lesson">
  <summary class="blockprogram"> <i class="fa-solid fa-computer-mouse"></i> 『オコゲ』ブロックプログラム：${conf.summary}</summary>
  <div class="lesson"><div class="slide">${content}</div></div>
</details>`;
  });


  // 吹き出し
  // 話者アイコン（左）
  config.addShortcode("talkicon_l", function (conf) {
    return `<div class="balloon">
  <div class="faceicon">
    <img src="/assets/img/${conf.img}">
   <p>${conf.name ? conf.name : ''}</p>
  </div>`;
  });
  //吹き出し（左）
  config.addPairedShortcode("says_l", function (content) {
    content = md.renderInline(content);
    return `<div class="chatting">
<div class="says">${content}</div>
</div>
</div>`;
  });
  //話者アイコン（右）
  config.addShortcode("talkicon_r", function (conf) {
    return `<div class="balloon_right">
<div class="faceicon_right">
   <img src="/assets/img/${conf.img}">
   <p>${conf.name ? conf.name : ''}</p>
 </div>`;
  });
  //吹き出し（右）
  config.addPairedShortcode("says_r", function (content) {
    content = md.renderInline(content);
    return `<div class="chatting">
<div class="says_right"><p>${content}</p></div>
</div>
</div>`;
  });
  // 考える吹き出し
  config.addPairedShortcode("think_l", content => {
    content = md.renderInline(content);
    return `  <div class="chatting">
  <div class="think-l-bal-s"></div>
  <div class="think-l-bal-l"></div>
    <div class="tamathink">
      <p>${content}</p>
    </div>
  </div>
  </div>`;
  });
  // ocoge end

  return {
    dir: {
      input: 'src',
      output: 'htdocs'
    },
    // pathPrefix: "/subfolder/",
    templateFormats: ['md', 'njk', 'html'],
    dataTemplateEngine: 'njk',
    markdownTemplateEngine: 'njk'
  };
};