Notices by osa9 (osa9@handon.club), page 17

永遠につきまとうアプロ

@inabap ありがとうです！ 実装に取り込んでみます！CSS書いたことある人すごい！

puppeteerでビューポートのサイズ指定しないといけない関係で高さ事前に必要なんだよね。下の部分がずれてるのも多分その計算のどこかがおかしい気がする。puppeteer内で頑張って取得して後からトリミングも出来なくもなさそうだけど実装地味に面倒そう

変なところに出る

描画されてる要素サイズから幅と高さ計算してる関係でスマホ対応がちょっとむずい

スマホからでもペーストして右のボタン押したら動いたよ

下半分切れる原因がよく分かってないから帰ったら調べないと。なんかmarginとかフォントサイズのせいな気はしてる

深夜1時までしこしこ作ってて夜はぐずった子供に定期的に起こされて6時半起きの出社終日説明員だけど元気です

@inabap カードのCSSプリセットに追加するのであとでください！

ちなみにこのサービスのオマージュです

https://poet.so/

カラーリングのCSS編集出来るのでもし良いセットが出来たら共有してください

最初Next.js 13のappで開発してたのに、VercelでPuppeteerを動かすためにはNode.js 14.xに下げないといけなくてappがNode.js 16.x以上じゃないと使えないという罠にはまって憤怒した

ソースコード
https://github.com/osa9/poetodon

画像化はChromiumとPuppeteerでフロントエンドで表示されているものと同じHTML/CSSを動的に生成してスクリーンショット撮る気合実装

あたたかみのあるCSSレンダリング手動実装

最初はvercel/og使おうとしたけどCSSで複雑なグラデーションに対応してなくて諦めた

めっちゃ長いやつ入れるとダウンロード画像が切れるバグあるの直したい

HTML要素の画像化びみょうに難しくてまだ調整しきれてない

bot化やろうと思えばできなくもない

画像投稿は今後対応予定です