add middleware to process external links substituting for ExternalLinksIntegration #1469
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Deployed on https://deploy-preview-1469--utelecon.netlify.app |
cm-ayf
approved these changes
Mar 16, 2025
aymkx
changed the title
|
方針を変えます。
手元の結果を貼っておきます。 |
|
diffを小さくしました。検証が容易になったと思います。
git checkout 3c1adc1fbd11d50d8b0db90c33db81d78f6e45dd
git checkout bcc461a5520aa2f7f05db5c3c35a16f7ad0d3a87 src/lib/ExternalLinksIntegration.ts
npx astro build --outDir dist_old
git switch -f 20250316_enable_rehype-external-link_in_development
npx astro build
diff -ruwB dist_old dist
|
aymkx
commented
Mar 18, 2025
cm-ayf
reviewed
Mar 18, 2025
|
approve していいような気もする vs リグレッションがあったらこわい |
|
何度もすみません、追加で修正をいれました。ExternalLinksIntegration利用時から以下の差分が生じます。
|
cm-ayf
reviewed
Mar 20, 2025
README.md
Outdated
| @@ -114,7 +114,8 @@ Markdownファイルのフロントマターにかける設定は以下の通り | |||
| - 外部リンクは，別タブで開くのが一般的です． | |||
| - すべての外部リンクに対してこの属性を明示的に付与するのは冗長であり，また忘れる可能性も高いため，自動で付与すべきです． | |||
| - 実装 | |||
| - [`ExternalLinksIntegration.ts`](src/lib/ExternalLinksIntegration.ts)で実現しています．ここでは，ビルド後に全てのHTMLファイルをRehypeで改めてパースし，[`rehype-external-links`](https://github.com/rehypejs/rehype-external-links)を適用しています． | |||
| - [Astroのミドルウェア機能](https://docs.astro.build/ja/guides/middleware/)を用いて[`externalLinks.ts`](src/middleware/externalLinks.ts)で実現しています．ここでは，アクセスしてきたユーザーに配信するHTMLをレスポンスの途中で一度Rehypeでパースし，[`rehype-external-links`](https://github.com/rehypejs/rehype-external-links)を適用してから送信するという動作によりページを処理しています． | |||
There was a problem hiding this comment.
ここでは、……
これは微妙に偽で、実際はレンダリング時に後処理を噛ませているだけですね
There was a problem hiding this comment.
そういうシミュレーションなのはわかるんですが、なんて言うといいですかね
There was a problem hiding this comment.
ここでは，レンダリング後のHTMLを
distに保存する前に一度Rehypeでパースし，rehype-external-linksを適用するという動作によりページを処理しています．
にしました
src/middleware/externalLinks.ts
Outdated
Comment on lines
45
to
48
| const processor = unified() | ||
| .use(rehypeParse) | ||
| .use(rehypeExternalLinks, rehypeExternalLinksOptions) | ||
| .use(rehypeStringify); |
There was a problem hiding this comment.
今気づいたんですが、request ごとに processor を作ってて使い回してないんですね……。
かなり嬉しくないです。options.test が動的に作れなくなるのを考慮しても、1つを使い回すようにしたいです。
There was a problem hiding this comment.
どうしますかね……モジュールレベルの状態作ります？
There was a problem hiding this comment.
compare to f947016
案1
diff --git a/src/middleware/externalLinks.ts b/src/middleware/externalLinks.ts
index 1b0909cab..c20218783 100644
--- a/src/middleware/externalLinks.ts
+++ b/src/middleware/externalLinks.ts
@@ -1,4 +1,5 @@
import type { MiddlewareHandler } from "astro";
+import type { Element } from "hast";
import rehypeExternalLinks, {
type Options as RehypeExternalLinksOptions,
} from "rehype-external-links";
@@ -6,11 +7,30 @@ import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
import { unified } from "unified";
+type Anchor = Element & { tagName: "a"; properties: { href: string } };
+
+function isAnchor(e: Element): e is Anchor {
+ return e.tagName === "a" && typeof e.properties.href === "string";
+}
+
+const state: { hostname?: string } = {};
+
const rehypeExternalLinksOptions: RehypeExternalLinksOptions = {
target: "_blank",
rel: ["noopener", "noreferrer"],
content: { type: "text", value: "" },
contentProperties: { className: ["external-link"] },
+ test: (e: Element) => {
+ if (!isAnchor(e)) {
+ // shall be unreachable
+ return true;
+ }
+ try {
+ return new URL(e.properties.href).hostname !== state.hostname;
+ } catch {
+ return true;
+ }
+ },
};
const processor = unified()
@@ -20,7 +40,12 @@ const processor = unified()
const mimeHtmlPattern = /^\s*text\/html(?:[\s;].*|$)/;
-const onRequest: MiddlewareHandler = async (_, next) => {
+export const onRequest: MiddlewareHandler = async (
+ { site: { hostname } = {} },
+ next
+) => {
+ state.hostname = hostname;
+
const response = await next();
if (response.headers.get("content-type")?.match(mimeHtmlPattern)) {
@@ -35,5 +60,3 @@ const onRequest: MiddlewareHandler = async (_, next) => {
return response;
};
-
-export default onRequest;
案2
diff --git a/src/middleware/externalLinks.ts b/src/middleware/externalLinks.ts
index 1b0909cab..c26979829 100644
--- a/src/middleware/externalLinks.ts
+++ b/src/middleware/externalLinks.ts
@@ -1,31 +1,63 @@
import type { MiddlewareHandler } from "astro";
-import rehypeExternalLinks, {
- type Options as RehypeExternalLinksOptions,
-} from "rehype-external-links";
+import type { Element, Root } from "hast";
+import rehypeExternalLinks from "rehype-external-links";
import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
-import { unified } from "unified";
+import { unified, type Processor } from "unified";
-const rehypeExternalLinksOptions: RehypeExternalLinksOptions = {
- target: "_blank",
- rel: ["noopener", "noreferrer"],
- content: { type: "text", value: "" },
- contentProperties: { className: ["external-link"] },
-};
+type Anchor = Element & { tagName: "a"; properties: { href: string } };
+
+function isAnchor(e: Element): e is Anchor {
+ return e.tagName === "a" && typeof e.properties.href === "string";
+}
-const processor = unified()
- .use(rehypeParse)
- .use(rehypeExternalLinks, rehypeExternalLinksOptions)
- .use(rehypeStringify);
+class State {
+ hostname?: string;
+ private _processor: Processor<Root, Root, undefined, Root, string>;
+
+ constructor() {
+ this._processor = unified()
+ .use(rehypeParse)
+ .use(rehypeExternalLinks, {
+ target: "_blank",
+ rel: ["noopener", "noreferrer"],
+ content: { type: "text", value: "" },
+ contentProperties: { className: ["external-link"] },
+ test: (e: Element) => {
+ if (!isAnchor(e)) {
+ // shall be unreachable
+ return true;
+ }
+ try {
+ return new URL(e.properties.href).hostname !== this.hostname;
+ } catch {
+ return true;
+ }
+ },
+ })
+ .use(rehypeStringify);
+ }
+
+ get processor() {
+ return this._processor;
+ }
+}
+
+const state = new State();
const mimeHtmlPattern = /^\s*text\/html(?:[\s;].*|$)/;
-const onRequest: MiddlewareHandler = async (_, next) => {
+export const onRequest: MiddlewareHandler = async (
+ { site: { hostname } = {} },
+ next
+) => {
+ state.hostname = hostname;
+
const response = await next();
if (response.headers.get("content-type")?.match(mimeHtmlPattern)) {
return new Response(
- (await processor.process(await response.text())).value,
+ (await state.processor.process(await response.text())).value,
{
status: response.status,
headers: response.headers,
@@ -35,5 +67,3 @@ const onRequest: MiddlewareHandler = async (_, next) => {
return response;
};
-
-export default onRequest;There was a problem hiding this comment.
hostname チェックって必要でしょうか……？
むしろ hostname チェックは行わず、utelecon の絶対URLがあったら表示が変になって気付ける、のほうがいい気がしています。
There was a problem hiding this comment.
表示が変になって気付ける
現状気付けてないのがdevモードで気付けるようになる、という話ではありますね、たしかに
There was a problem hiding this comment.
ちなみに、「utelecon内部のページであっても外部リンクとして（別タブで）開かせたい場合は絶対URLを書くだけでよい」という暗黙知ができたとしても、あんまりネガティブには思わないですか？
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
rehypeプラグインを容易に追加できるMarkdownおよびMDXによるページに対し、developmentモード（
npm run dev実行時）でも外部リンクのアイコンを表示するようにします。最終的にはすべてのHTMLファイルにアイコンを挿入する必要があるため、ビルド時（
npm run build実行時）には既存のexternalLinksインテグレーションは引き続き必要となります。