From cd02e390cca7b7e05fa247e3e949ab3f51bf6a66 Mon Sep 17 00:00:00 2001 From: Fohte / Hayato Kawai Date: Thu, 23 May 2024 11:55:14 +0900 Subject: [PATCH] =?UTF-8?q?new=20post:=20RubyKaigi=202024=20=E3=81=A7=20LT?= =?UTF-8?q?=20=E7=99=BB=E5=A3=87=E3=81=97=E3=81=9F=20=E5=85=BC=20=E5=8F=82?= =?UTF-8?q?=E5=8A=A0=E8=A8=98=20&=20add=20SpeakerDeck,=20Mastodon=20compon?= =?UTF-8?q?ents=20(#320)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/upload-image-r2 | 25 ++- src/components/mdx/Mastodon.tsx | 50 ++++++ src/components/mdx/SpeakerDeck.tsx | 30 ++++ src/components/mdx/index.tsx | 15 ++ .../posts/2024-05-23-rubykaigi2024.mdx | 161 ++++++++++++++++++ 5 files changed, 275 insertions(+), 6 deletions(-) create mode 100644 src/components/mdx/Mastodon.tsx create mode 100644 src/components/mdx/SpeakerDeck.tsx create mode 100644 src/contents/posts/2024-05-23-rubykaigi2024.mdx diff --git a/scripts/upload-image-r2 b/scripts/upload-image-r2 index 2dec25bc..ae01561b 100755 --- a/scripts/upload-image-r2 +++ b/scripts/upload-image-r2 @@ -2,7 +2,20 @@ set -euo pipefail +usage() { + echo "usage: $0 []" + exit 1 +} + image_path="$1" + +[[ -n "$image_path" ]] || usage +[[ -f "$image_path" ]] || { + echo "error: file not found: $image_path" >&2 + exit 1 +} + +max_width="${2:-1000}" extension="${image_path##*.}" checksum="$(openssl dgst -sha1 -binary "$image_path" | openssl base64 | tr '+/' '-_' | tr -d '=')" @@ -21,13 +34,13 @@ fi width="$(identify -format '%w' "$image_path")" -# minimize image size to 1000px width to reduce bandwidth -if [[ "$width" -gt 1000 ]]; then - echo 'resizing image to 1000px width...' >&2 +# minimize image size to $max_width to reduce bandwidth +if [[ "$width" -gt "$max_width" ]]; then + echo "resizing image to ${max_width}px width..." >&2 - resized_image_path="${image_path%.*}-1000.${extension}" - convert "$image_path" -resize '1000x>' "$resized_image_path" - width=1000 + resized_image_path="${image_path%.*}-${max_width}.${extension}" + convert "$image_path" -resize "${max_width}x>" "$resized_image_path" + width="$max_width" image_path="$resized_image_path" fi diff --git a/src/components/mdx/Mastodon.tsx b/src/components/mdx/Mastodon.tsx new file mode 100644 index 00000000..26795541 --- /dev/null +++ b/src/components/mdx/Mastodon.tsx @@ -0,0 +1,50 @@ +'use client' + +import { Box } from '@chakra-ui/react' +import { css } from '@emotion/react' +import React, { useEffect, useRef } from 'react' + +type Props = { + url: string +} + +export const Mastodon: React.FC = ({ url }) => { + const iframeRef = useRef(null) + + useEffect(() => { + const iframe = iframeRef.current + const src = `${url}/embed` + if (iframe == null) return + iframe.src = src + + const script = document.createElement('script') + // e.g. https://social.fohte.net/@fohte/123456789 -> https://social.fohte.net/embed.js + script.src = new URL('/embed.js', url).toString() + script.async = true + + if (!document.head.contains(script)) { + document.head.appendChild(script) + } + }, [url]) + + return ( + +