概要

以下の記事で、mirador-sync-windowsのMirador 4(3)版を作成したことを紹介しました。

mirador-sync-windowsのM3版を作成しました。
mirador-sync-windowsのM3版を作成しました。
ldas.jp

今回は、本プラグインのリポジトリを公開したので、備忘録です。

リポジトリ

以下で公開しています。

GitHub - nakamura196/mirador-sync-windows: A Mirador 4 plugin that adds the ability to synchronize the windows of a Mirador instance.
A Mirador 4 plugin that adds the ability to synchronize the windows of a Mirador instance. - nakamura196/mirador-sync-windows
GitHub

デモページ

以下からお試しいただけます。

nakamura196.github.io
nakamura196.github.io

GitHub Pagesでの公開に向けて、設定した内容は以下です。

webpack

以下のファイルを一部変更しました。

mirador-sync-windows/webpack.config.js at main · nakamura196/mirador-sync-windows
A Mirador 4 plugin that adds the ability to synchronize the windows of a Mirador instance. - nakamura196/mirador-sync-windows
GitHub

具体的には、以下です。publicPathについて、developmentの場合は、相対パスにしました。これにより、basePathによる問題に対処しました。

return {
    ...config,
    output: {
      filename: 'demo.js',
      path: path.join(__dirname, 'demo/dist'),
      // publicPath: '/'
      publicPath: options.mode === "development" ? './' : '/',
    },
    devServer: {
      hot: true,
      port: 4444,
      static: [
        './demo/dist/',
      ],
    },
    devtool: 'eval-source-map',
    mode: 'development',
    entry: ['./demo/src/index.js'],
    plugins: [
      ...(config.plugins || []),
      new HtmlWebpackPlugin({ template: path.join(__dirname, 'demo/src/index.html') }),
      new ReactRefreshWebpackPlugin(),
    ],
  };

GitHub Actions

GitHub Actionsを使ったGitHub Pagesの利用にあたり、以下のようなymlファイルを用意しました。

テストがうまくいかず、その部分はコメントアウトしていますが、今後修正したいと思います。

mirador-sync-windows/.github/workflows/node.js.yml at main · nakamura196/mirador-sync-windows
A Mirador 4 plugin that adds the ability to synchronize the windows of a Mirador instance. - nakamura196/mirador-sync-windows
GitHub

まとめ

不完全な部分も多いですが、参考になりましたら幸いです。

動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。