hatena / hatena-blog-theme-boilerplate Goto Github PK

発生している問題

• Chromeでは公開ウェブサイトからプライベートネットワークエンドポイントへの直接アクセスを非推奨としている
• そのため、現在の設定でアクセスするとCORSエラーとなってしまう
• Access-Control-Request-Private-Network: trueとAccess-Control-Allow-Private-Network: trueを含む必用があるようです¹。
• また、その設定をしてもstylesheetの credential mode が incluedeになっているようでアクセスできないようです²。

解決策

• Access-Control-Request-Private-Network: trueとAccess-Control-Allow-Private-Network: true は vitejs/vite#7134 (comment) で会話されている設定をすることで反映することができそうです。

  ...
  css: {
    devSourcemap: true,
    postcss: {
      plugins: [autoprefixer()],
    },
  },
+  plugins: [
+    {
+      name: "configure-response-headers",
+      configureServer: (server) => {
+        server.middlewares.use((_req, res, next) => {
+          res.setHeader("Access-Control-Request-Private-Network", "true");
+          res.setHeader("Access-Control-Allow-Private-Network", "true");
+          next();
+        });
+      },
+    },
+  ],
};

• credential modeについてはcrossorigin="anonymous"とするとアクセスできるかと思います。

  <script type="module" src="http://localhost:5173/@vite/client"></script>
  <link rel="stylesheet" crossorigin="anonymous" type="text/css" href="http://localhost:5173/scss/boilerplate.scss" />

はてな担当様

新規にサブサイトを作成したらアドレスはhttpsでした。
npm start を実行してもbrowser-syncはhttpのアドレスしか認識してなく自動更新されません。

ローカル環境のアクセス先：
Local: http://localhost:3000
External: http://192.168.3.8:3000
管理画面のアクセス先：
UI: http://localhost:3001
UI External: http://192.168.3.8:3001

質問：
pacage.jnsnのbrowser-syncにどのようなオプションを追加すれば
httpsのサイトと同期できるか教えて頂けないでしょうか。

宜しくお願いいたします。

こちらのデザインテーマを動かした際の発見を報告させてもらいます。

node-sass が動作するNodeのバージョンは指定があります。

https://github.com/sass/node-sass#node-version-support-policy

現状のnode-sassのバージョンだと、対応するNodeのバージョンはNode 8です。
私の環境（Node 16がインストールされている）だと、npm install で詰まりました。

対応するNode 16に対応するnode-sass 7.0.1 にバージョンアップすると npm install および npm run scss が実行可能になったことを共有しておきます。

お世話になっております。

従来のヘッダーですと #globalheader-container にて設定が出来ましたが、
新デザインのヘッダーではこのIDでの設定が利かないようです。

_core.scssファイルにおいて、.entry-content pre内にfont-sizeプロパティが2回登場し、重複しています。

    pre {
        background: $bg-light;
        border: none;
        white-space: pre-wrap;
        text-overflow: ellipsis;
        font-size: 100%;
        line-height: 1.3;
        font-size: .8rem;
        padding: 10px;
        & > code {
            margin: 0;
            padding: 0;
            white-space: pre;
            border: none;
            background-color: transparent;
            font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
        }
    }