Open Graph Protocol を利用したリンクカード

GitHub - r4ai/r4ai.dev

Contribute to r4ai/r4ai.dev development by creating an account on GitHub.

github.com

自サービスに埋め込みコード対応をする方法 #oEmbed - Qiita

はじめに自サービスをブログや他サービスに埋め込んで、利用促進をしたい！そんな思いで、埋め込みコードについて調べたこととURLを入力しただけで、埋め込みコードに変換されて表示される方法について調べ…

qiita.com

ファイルベースルーティングフレームワークを作る！

yusukebeさんによる記事

zenn.dev

oEbmed雑整理

Takei Kazuyaさんのスクラップ

zenn.dev

パフォーマンス API - Web API | MDN

パフォーマンス API は、ウェブアプリケーションのパフォーマンスを測定するために使用される一連の規格です。

developer.mozilla.org

Astroアイランド | Docs

Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。

docs.astro.build

Get favicons from any domain using a hidden google API - DEV Community

Did you know ? Google offers a secret URL that can automatically pull the favicon image of any... Tagged with webdev, tooling, todayilearned.

dev.to

Get favicons from any domain using a hidden google API - DEV Community

LETUS 2024

お問い合わせ先学生用 | 教員用定期メンテナンスについて下記時間帯にメンテナンスを行います。この間はシステムをご利用いただけません。停止時間： 4:00～5:30

letus.ed.tus.ac.jp

インラインなリンクはカード化しない

According to the spec, …

https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a is a

https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a https://zenn.dev/yusukebe/articles/7c9f96f8c52b8a

埋め込み機能

Twitter

ツイートが存在しない場合：

Gist

	const main = () => {
	const getElementById = <T extends HTMLElement>(id: string): T \| undefined => (document.getElementById(id) ?? undefined) as T \| undefined;

	const tocElem = getElementById<HTMLDivElement>("TOC");
	if (!tocElem) { throw new Error("TOC element not found"); }

	document.body.style.margin = "0 auto"
	document.body.style.maxWidth = "68rem"

	// create sidebar div
	const sidebar = document.createElement("div");
	sidebar.id = "toc-sidebar";
	sidebar.style.position = "fixed";
	sidebar.style.top = "0";
	sidebar.style.overflowY = "auto";
	sidebar.style.height = "100vh";
	sidebar.style.width = "20rem";
	sidebar.innerHTML = tocElem.innerHTML;

	// create content div
	const content = document.createElement("div");
	content.id = "toc-content";
	content.style.maxWidth = "100%";
	content.style.marginLeft = "22rem";
	content.innerHTML = document.body.innerHTML;

	// append sidebar and content to body
	document.body.innerHTML = "";
	document.body.appendChild(sidebar);
	document.body.appendChild(content);
	}
	main()

view raw extension.ts hosted with ❤ by GitHub

Hello, World!

Sample post for testing purposes.

Bold text
Italic text
~~Strikethrough text~~
Inline code
example.com

Done is better than perfect.

List

unordered list item 1
unordered list item 2
- unordered list item 2.1
- unordered list item 2.2

ordered list item 1
ordered list item 2
1. ordered list item 2.1
2. ordered list item 2.2

Code

Inline code: print("Hello, World!")

def hello_world():
    print("Hello, World!")

fn main() {
    println!("Hello, World!");
}

const helloWorld = () => {
  console.log("Hello, World!");
};

Math

Inline math: $e^{i\pi} + 1 = 0$

Block math:

$$ \forall \epsilon > 0, \exists \delta > 0 \mathrm{s.t.} 0 < |x - a| < \delta \implies |f(x) - b| < \epsilon $$

埋め込み機能のテスト

Open Graph Protocol を利用したリンクカード

インラインなリンクはカード化しない

埋め込み機能

Twitter

Gist

Hello, World!

List

Code

Math

Image

Heading 2

Heading 3

Heading 4

CodePen, JSFiddle, StackBlitz, CodeSandbox

その他 (oEmbed)