new post: RubyKaigi 2024 で LT 登壇した 兼 参加記 & add SpeakerDeck, Mastodon …

…components (#320)

scripts/upload-image-r2

@@ -2,7 +2,20 @@
 
 set -euo pipefail
 
+usage() {
+  echo "usage: $0 <image_path> [<max-width>]"
+  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
 

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<Props> = ({ url }) => {
+  const iframeRef = useRef<HTMLIFrameElement>(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 (
+    <Box
+      my={2}
+      css={css`
+        display: flex;
+        justify-content: center;
+      `}
+    >
+      <iframe
+        ref={iframeRef}
+        className="mastodon-embed"
+        style={{
+          maxWidth: '100%',
+          border: 0,
+        }}
+        width="500"
+        allowFullScreen
+      />
+    </Box>
+  )
+}

src/components/mdx/SpeakerDeck.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Box } from '@chakra-ui/react'
+import * as React from 'react'
+
+type SpeakerDeckProps = {
+  id: string
+}
+
+export const SpeakerDeck: React.FC<SpeakerDeckProps> = ({ id }) => (
+  <Box my={8}>
+    <iframe
+      className="speakerdeck-iframe"
+      src={`https://speakerdeck.com/player/${id}`}
+      allowFullScreen
+      style={{
+        border: '0px',
+        background: 'padding-box padding-box rgba(0, 0, 0, 0.1)',
+        margin: '0px',
+        padding: '0px',
+        borderRadius: '6px',
+        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 40px',
+        width: '100%',
+        height: 'auto',
+        aspectRatio: '560 / 315',
+      }}
+      data-ratio="1.7777777777777777"
+    />
+  </Box>
+)

src/components/mdx/index.tsx

@@ -20,6 +20,8 @@ import { CodeBlock } from '@/components/mdx/CodeBlock'
 import { DocsHeading } from '@/components/mdx/DocsHeading'
 import { Image } from '@/components/mdx/Image'
 import { List } from '@/components/mdx/List'
+import { Mastodon } from '@/components/mdx/Mastodon'
+import { SpeakerDeck } from '@/components/mdx/SpeakerDeck'
 import { Tweet } from '@/components/mdx/Tweet'
 import { YouTube } from '@/components/mdx/YouTube'
 
@@ -97,6 +99,8 @@ export const mdxComponents: MDXComponents = {
 
   Tweet: Tweet,
   YouTube: YouTube,
+  SpeakerDeck: SpeakerDeck,
+  Mastodon: Mastodon,
 }
 
 export const rssComponents: MDXComponents = {
@@ -105,4 +109,15 @@ export const rssComponents: MDXComponents = {
   // FIXME: fix mock of Tweet and YouTube
   Tweet: ({}: React.ComponentProps<typeof Tweet>) => <div>Tweet</div>,
   YouTube: ({}: React.ComponentProps<typeof YouTube>) => <div>YouTube</div>,
+
+  // FIxME: fix mock of SpeakerDeck, the id in props is not a url to view the slide page
+  SpeakerDeck: ({}: React.ComponentProps<typeof SpeakerDeck>) => (
+    <p>SpeakerDeck</p>
+  ),
+
+  Mastodon: ({ url }: React.ComponentProps<typeof Mastodon>) => (
+    <p>
+      Mastodon: <a>{url}</a>
+    </p>
+  ),
 }