feat: Add imagesDimensions field.

[dohooo]

WHAT

🤖[deprecated] Generated by Copilot at 3fc91b6

This pull request adds functionality to detect and store the dimensions of images that are part of the metadata content for pages and feed items. It uses the image-size package as a dependency and modifies the database schema, the Prisma schema, the API routes, and the types to handle the image dimensions. It also adds a helper function decoratePageForImageDimensions to fetch and add the dimensions from the image files.

🤖[deprecated] Generated by Copilot at 3fc91b6

We are the masters of the image size
We know the width and height of every file
We store the dimensions in the JSONB
We decorate the pages with the metadata

WHY

Now, The /api/feed and /api/pages api could include the image dimensions field. The client could use this field to better display the cover image in some situations, such as in the masonry list.

Caching image dimensions

/api/feed Fetching result:

{
    "list": [
        {
            "metadata": {
                "uri": "ipfs://QmfH9THegRpjAdyGheK36qPnJ6rVPnQaft1vQwB8LGj1R3",
                "content": {
                    "tags": [
                        "post",
                        "starknet"
                    ],
                    "type": "note",
                    "title": "StarkNet 代币释放在即，其主网数据表现如何？",
                    "sources": [
                        "xlog"
                    ],
                    "summary": "“区块链三难题”，或 “可扩展性三难题”，强调了区块链平台想要去平衡安全性、去中心化和可扩展性将面临的挑战。通常情况下，区块链架构只能有效地优先考虑其中两个难题。例如，以太坊优先考虑了安全性和去中心化，导致了可扩展性方面面临着许多挑战。但以太坊社区已经认识到可扩展性的重要性…",
                    "attributes": [
                        {
                            "value": "StarkNet-dai-bi-shi-fang-zai-ji--qi-zhu-wang-shu-ju-biao-xian-ru-he-",
                            "trait_type": "xlog_slug"
                        }
                    ],
                    "attachments": [
                        {
                            "name": "cover",
                            "address": "ipfs://QmV263n5pNv8XTfASLeFLiAzmnaLCjPoBd2Dc7QrfAequo",
                            "mime_type": "image/png"
                        }
                    ],
                    "date_published": "2023-09-18T16:00:00.000Z",
                    "audio": "",
                    "frontMatter": {},
                    "cover": "ipfs://QmV263n5pNv8XTfASLeFLiAzmnaLCjPoBd2Dc7QrfAequo",
                    "images": [
                        "ipfs://QmV263n5pNv8XTfASLeFLiAzmnaLCjPoBd2Dc7QrfAequo"
                    ],
                    "slug": "StarkNet-dai-bi-shi-fang-zai-ji--qi-zhu-wang-shu-ju-biao-xian-ru-he-",
                    "disableAISummary": false,
                    "readingTime": 5,
                    "imageDimensions": { // New field
                        "ipfs://QmV263n5pNv8XTfASLeFLiAzmnaLCjPoBd2Dc7QrfAequo": {
                            "width": 755,
                            "height": 429,
                            "uri": "https://ipfs.4everland.xyz/ipfs/QmV263n5pNv8XTfASLeFLiAzmnaLCjPoBd2Dc7QrfAequo"
                        }
                    }
                }
            },
            "characterId": 59765,
            "noteId": 10,
            "character": {
                "handle": "486-5551",
                "characterId": "59765",
                "metadata": {
                    "content": {
                        "bio": "hi",
                        "name": "486",
                        "type": "character",
                        "avatars": [
                            "ipfs://QmQ28CvbppVkNPq6VoU8uGM1gbKKFtb6KVtwqwnRfymUpz"
                        ]
                    }
                }
            },
            "createdAt": "2023-11-22T15:08:48.000Z"
        }
    ],
    "cursor": "59765_10",
    "count": 1
}

/api/pages Fetching result:

{
    "list": [
        {
            "metadata": {
                "uri": "ipfs://QmYswh25pPx9amgzSD1CKXtcG1mV2vDsiRVBYEcW55Nf6b",
                "content": {
                    "tags": [
                        "short"
                    ],
                    "type": "note",
                    "title": "通往公园的路口",
                    "sources": [
                        "xlog"
                    ],
                    "attributes": [
                        {
                            "value": "6XMCfqZiVE64VzMtUsHhY",
                            "trait_type": "xlog_slug"
                        }
                    ],
                    "attachments": [
                        {
                            "name": "image",
                            "address": "ipfs://QmZwwhc2qAGPHVeCY83ETUnuoABBJMqvU4nAjUzv3Mx6VN",
                            "mime_type": "image/jpeg"
                        }
                    ],
                    "date_published": "2023-11-21T03:39:23.774Z",
                    "summary": "➡️",
                    "audio": "",
                    "frontMatter": {},
                    "cover": "",
                    "images": [
                        "ipfs://QmZwwhc2qAGPHVeCY83ETUnuoABBJMqvU4nAjUzv3Mx6VN"
                    ],
                    "slug": "6XMCfqZiVE64VzMtUsHhY",
                    "disableAISummary": false,
                    "readingTime": 0,
                    "imageDimensions": { // New field
                        "ipfs://QmZwwhc2qAGPHVeCY83ETUnuoABBJMqvU4nAjUzv3Mx6VN": {
                            "width": 960,
                            "height": 1280,
                            "uri": "https://ipfs.4everland.xyz/ipfs/QmZwwhc2qAGPHVeCY83ETUnuoABBJMqvU4nAjUzv3Mx6VN"
                        }
                    }
                }
            },
            "characterId": 56651,
            "noteId": 7,
            "createdAt": "2023-11-21T03:39:27.000Z",
            "stat": {
                "viewDetailCount": 9,
                "commentsCount": 0,
                "likesCount": 1
            },
            "_count": {
                "fromNotes": 0,
                "links": 1
            }
        }
    ],
    "count": 1,
    "cursor": "56651_7"
}

HOW

🤖[deprecated] Generated by Copilot at 3fc91b6

• Add image-size package as a dependency to get image dimensions (link, link, link, link)
• Add image_dimensions column to Metadata table in database schema (link, link)
• Add imageDimensions property to ExpandedNote type (link)
• Add functions to request, cache, and decorate image dimensions in src/queries/page.server.ts (link, link, link)
• Call decoratePageForImageDimensions function in feed and pages routes to add image dimensions to metadata content (link, link, link, link)

CLAIM REWARDS

For first-time contributors, please leave your xLog address and Discord ID below to claim your rewards.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
xlog	⬜️ Ignored (Inspect)	Visit Preview		Dec 5, 2023 9:52am

[github-actions]

📦 Next.js Bundle Analysis for xlog

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	88 KB (🟡 +11 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!