diff --git a/generated/tags.json b/generated/tags.json index e5a87d54..23c3bf1d 100644 --- a/generated/tags.json +++ b/generated/tags.json @@ -17,10 +17,11 @@ "Deno": "bg-teal-400 text-teal-900", "Renovate": "bg-indigo-400 text-indigo-900", "GitHub Actions": "bg-sky-400 text-sky-900", - "Astro": "bg-rose-400 text-rose-900", + "React": "bg-violet-400 text-violet-900", "ホムペ": "bg-neutral-400 text-neutral-900", "HTML": "bg-yellow-400 text-yellow-900", "登壇": "bg-emerald-400 text-emerald-900", + "Astro": "bg-rose-400 text-rose-900", "CSS": "bg-neutral-400 text-neutral-900", "ChatGPT": "bg-emerald-400 text-emerald-900", "就職": "bg-purple-400 text-purple-900", diff --git a/public/assets/images/cover/tweet_button.png b/public/assets/images/cover/tweet_button.png new file mode 100644 index 00000000..803377ee Binary files /dev/null and b/public/assets/images/cover/tweet_button.png differ diff --git a/src/content/posts/20230924_ura_mode.md b/src/content/posts/20230924_ura_mode.md index db0a2c96..0cac9ad3 100644 --- a/src/content/posts/20230924_ura_mode.md +++ b/src/content/posts/20230924_ura_mode.md @@ -3,7 +3,7 @@ title: 回転エネルギーを無限に生み出す「NO LIMIT MODE」を実装 pubDate: 2023-09-24T09:00:00Z imgSrc: '/assets/images/cover/no_limit_mode.webp' tags: - - Astro + - React - ホムペ - HTML --- diff --git a/src/content/posts/20231001_put_tweet_button.md b/src/content/posts/20231001_put_tweet_button.md new file mode 100644 index 00000000..31c43681 --- /dev/null +++ b/src/content/posts/20231001_put_tweet_button.md @@ -0,0 +1,50 @@ +--- +title: Tweet ボタンを設置 +description: ホムペに Tweet ボタンを設置しました。みんなツイートしよう +pubDate: 2023-10-01T09:00:00Z +imgSrc: '/assets/images/cover/tweet_button.png' +tags: + - React + - ホムペ + - HTML +--- + +## 概要 + +各記事ページに Tweet ボタンを設置しました。記事下部にあります。 +ついでに OGP 対応しました。 + + + +## プルリクエストと解説 +- [feat: improve twitter by korosuke613 · Pull Request #337 · korosuke613/homepage-2nd](https://github.com/korosuke613/homepage-2nd/pull/337) + - `twitter:card` などの Twitter OGP 関連のメタタグを設置 + - ついでにツイートボタンを設置 +- [fix: twitter ogp by korosuke613 · Pull Request #338 · korosuke613/homepage-2nd](https://github.com/korosuke613/homepage-2nd/pull/338) + - ogp の画像がうまく表示されないので `korosuke613.dev` から画像を読むように修正 + - `twitter:image` などを `og:image` といった汎用的なものに変更 +- [fix: ogp path by korosuke613 · Pull Request #339 · korosuke613/homepage-2nd](https://github.com/korosuke613/homepage-2nd/pull/339) + - やっぱり ogp の画像が表示されない + - `path.join()` してたせいで `https://korosuke613.dev/assets/...` が `https:/korosuke613.dev/assets/...` になってた + - スラッシュが足りねぇ + - マヌケだった + - `URL()` を使うように修正 +- [fix: not use twitter script by korosuke613 · Pull Request #340 · korosuke613/homepage-2nd](https://github.com/korosuke613/homepage-2nd/pull/340) + - 画面遷移した際に Tweet ボタンが表示されないことに気づく。多分 Astro が JS 埋め込んでない + - リロードしたら直る + - そもそも Twitter の謎スクリプトを埋め込んでるのが気持ち悪いので、自前でボタンを作った + - こんな感じで URL 組み立てるだけでいいよ + ```typescript + const url = new URL("https://twitter.com/intent/tweet"); + const params = new URLSearchParams({ + hashtags: "korosuke613dev", + text: props.text, + url: props.url, + related: "shitimi_613", + }); + const href = `${url.href}?${params.toString()}`; + ``` + - 心スッキリだ + + +[^tweet]: 俺は 𝕏 を認めない