From 66219cd4b0688243091b19e07973736c9cf40d86 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 19 Nov 2022 22:00:38 +0000 Subject: [PATCH] related posts tweaks --- .jest/__fixtures__/posts.json | 236 ++++++++++++++++++++++ src/components/molecules/RelatedPosts.tsx | 70 +++---- 2 files changed, 272 insertions(+), 34 deletions(-) diff --git a/.jest/__fixtures__/posts.json b/.jest/__fixtures__/posts.json index d82993d7..4dbc52d5 100644 --- a/.jest/__fixtures__/posts.json +++ b/.jest/__fixtures__/posts.json @@ -116,5 +116,241 @@ } } ] + }, + "allArticles": { + "edges": [ + { + "node": { + "id": "6effe45d-0884-527c-9fba-6f7f567979fd", + "fileAbsolutePath": "/Users/m/Code/blog/content/photos/2019-11-03-orszaghaz-ii.md", + "html": "

Inside the Hungarian Parliament Building in Budapest, Hungary.

", + "excerpt": "Inside the Hungarian Parliament Building in Budapest, Hungary.", + "frontmatter": { + "title": "Országház II", + + "linkurl": null, + "tags": null, + "image": { + "childImageSharp": { + "original": { + "src": "/static/2019-11-03-orszaghaz-ii-2dbcf257b4bdf625c24fede935d32425.jpg" + }, + "fluid": { + "aspectRatio": 2.3255813953488373, + "src": "/static/2dbcf257b4bdf625c24fede935d32425/ef7a0/2019-11-03-orszaghaz-ii.jpg", + "srcSet": "/static/2dbcf257b4bdf625c24fede935d32425/23780/2019-11-03-orszaghaz-ii.jpg 100w,\n/static/2dbcf257b4bdf625c24fede935d32425/02ed9/2019-11-03-orszaghaz-ii.jpg 200w,\n/static/2dbcf257b4bdf625c24fede935d32425/ef7a0/2019-11-03-orszaghaz-ii.jpg 400w,\n/static/2dbcf257b4bdf625c24fede935d32425/ac974/2019-11-03-orszaghaz-ii.jpg 600w,\n/static/2dbcf257b4bdf625c24fede935d32425/12c26/2019-11-03-orszaghaz-ii.jpg 800w,\n/static/2dbcf257b4bdf625c24fede935d32425/24914/2019-11-03-orszaghaz-ii.jpg 3793w", + "srcWebp": "/static/2dbcf257b4bdf625c24fede935d32425/a93fc/2019-11-03-orszaghaz-ii.webp", + "srcSetWebp": "/static/2dbcf257b4bdf625c24fede935d32425/b0720/2019-11-03-orszaghaz-ii.webp 100w,\n/static/2dbcf257b4bdf625c24fede935d32425/f6188/2019-11-03-orszaghaz-ii.webp 200w,\n/static/2dbcf257b4bdf625c24fede935d32425/a93fc/2019-11-03-orszaghaz-ii.webp 400w,\n/static/2dbcf257b4bdf625c24fede935d32425/7c0bb/2019-11-03-orszaghaz-ii.webp 600w,\n/static/2dbcf257b4bdf625c24fede935d32425/d1e4e/2019-11-03-orszaghaz-ii.webp 800w,\n/static/2dbcf257b4bdf625c24fede935d32425/0a478/2019-11-03-orszaghaz-ii.webp 3793w", + "sizes": "(max-width: 400px) 100vw, 400px", + "originalImg": "/static/2dbcf257b4bdf625c24fede935d32425/24914/2019-11-03-orszaghaz-ii.jpg", + "originalName": "2019-11-03-orszaghaz-ii.jpg", + "presentationWidth": 400, + "presentationHeight": 300 + } + } + } + }, + "fields": { + "slug": "/orszaghaz-ii/", + "date": "November 03, 2019", + "type": "photo" + } + } + }, + { + "node": { + "id": "c80697e5-681d-5fcc-9dab-c3a3821ff0b1", + "fileAbsolutePath": "/Users/m/Code/blog/content/photos/2019-11-02-orszaghaz-i.md", + "html": "

The Hungarian Parliament Building seen from across the Danube in Budapest, Hungary.

", + "excerpt": "The Hungarian Parliament Building seen from across the Danube in Budapest, Hungary.", + "frontmatter": { + "title": "Országház I", + "linkurl": null, + "tags": null, + "featured": true, + "image": { + "childImageSharp": { + "original": { + "src": "/static/2019-11-02-orszaghaz-i-36d87329aeeda296ae923606e5a4a785.jpg" + }, + "fluid": { + "aspectRatio": 2.3255813953488373, + "src": "/static/36d87329aeeda296ae923606e5a4a785/ef7a0/2019-11-02-orszaghaz-i.jpg", + "srcSet": "/static/36d87329aeeda296ae923606e5a4a785/23780/2019-11-02-orszaghaz-i.jpg 100w,\n/static/36d87329aeeda296ae923606e5a4a785/02ed9/2019-11-02-orszaghaz-i.jpg 200w,\n/static/36d87329aeeda296ae923606e5a4a785/ef7a0/2019-11-02-orszaghaz-i.jpg 400w,\n/static/36d87329aeeda296ae923606e5a4a785/ac974/2019-11-02-orszaghaz-i.jpg 600w,\n/static/36d87329aeeda296ae923606e5a4a785/12c26/2019-11-02-orszaghaz-i.jpg 800w,\n/static/36d87329aeeda296ae923606e5a4a785/b9e8b/2019-11-02-orszaghaz-i.jpg 3708w", + "srcWebp": "/static/36d87329aeeda296ae923606e5a4a785/a93fc/2019-11-02-orszaghaz-i.webp", + "srcSetWebp": "/static/36d87329aeeda296ae923606e5a4a785/b0720/2019-11-02-orszaghaz-i.webp 100w,\n/static/36d87329aeeda296ae923606e5a4a785/f6188/2019-11-02-orszaghaz-i.webp 200w,\n/static/36d87329aeeda296ae923606e5a4a785/a93fc/2019-11-02-orszaghaz-i.webp 400w,\n/static/36d87329aeeda296ae923606e5a4a785/7c0bb/2019-11-02-orszaghaz-i.webp 600w,\n/static/36d87329aeeda296ae923606e5a4a785/d1e4e/2019-11-02-orszaghaz-i.webp 800w,\n/static/36d87329aeeda296ae923606e5a4a785/730f8/2019-11-02-orszaghaz-i.webp 3708w", + "sizes": "(max-width: 400px) 100vw, 400px", + "originalImg": "/static/36d87329aeeda296ae923606e5a4a785/b9e8b/2019-11-02-orszaghaz-i.jpg", + "originalName": "2019-11-02-orszaghaz-i.jpg", + "presentationWidth": 400, + "presentationHeight": 297 + } + } + } + }, + "fields": { + "slug": "/orszaghaz-i/", + "date": "November 02, 2019", + "type": "photo" + } + } + }, + { + "node": { + "id": "2e2c9611-be7b-5bc0-a72b-6c63e2072b5a", + "fileAbsolutePath": "/Users/m/Code/blog/content/posts/2019-10-24-ocean-protocol-and-ipfs-sitting-in-the-merkle-tree/index.md", + "html": "

IPFS is now integrated into the Ocean Protocol stack, allowing you to take advantage of decentralized asset file hosting.

\n
\n
\n

This article was originally posted on Medium in the Ocean Protocol blog.

\n
\n
\n

#✨ Going Decentralized

\n

With Ocean Protocol, you can use centralized storage services like S3, Azure Storage, or your own On-Premise storage to store and retrieve your asset files through Osmosis drivers in Brizo.

\n

But storing asset files in a centralized service poses multiple problems:

\n\n

Initially created to store and efficiently move scientific data sets, the InterPlanetary File System (IPFS) solves all those issues with its goal of transforming the vastly centralized web into a distributed peer-to-peer network.

\n

Files are distributed among multiple nodes, eliminating the single point of failure, legal, and censorship issues. By using content-based instead of location-based addressing of files, URLs won’t break if files are moved.

\n

So we defined OEP-15 to make the ipfs:// protocol a first-class citizen in the Ocean Protocol stack, allowing you to store asset files on IPFS, and use their native IPFS URLs during the publish process.

\n\n

In short, every component in the Ocean Protocol stack now supports publishing and consuming of asset files stored in IPFS which includes support for native IPFS URLs, referencing files with their Content Identifiers (CIDs).

\n

#⛲️ IPFS in Commons Marketplace

\n

Every file stored on IPFS is public by default, so it made perfect sense using this in our Commons Marketplace first. We went through multiple prototypes to end up with our final setup.

\n

During the publish flow you will find an extended Files section for adding a file from an existing URL, and for adding a local file from your device to IPFS.

\n

\n \n \n { - const frontmatterKey = node.frontmatter[key] as [] + let filtered = posts.filter(({ node }) => { + const frontmatterKey = node.frontmatter[key] - if ( - frontmatterKey !== null && - frontmatterKey.some((r: string) => valuesToFind.includes(r)) - ) { - return node - } - }) - .sort(() => 0.5 - Math.random()) - .slice(0, 6) + if ( + frontmatterKey !== null && + frontmatterKey.some((r: string) => valuesToFind?.includes(r)) + ) { + return node + } + }) - return newArray -} + if (!filtered?.length) { + filtered = posts.filter(({ node }) => node) + } -function photosWithDataFilter( - posts: Queries.RelatedPostsQuery['allMarkdownRemark']['edges'] -) { - const newArray = posts - .filter((post) => { - const { fileAbsolutePath } = post.node + filtered = filtered.sort(() => 0.5 - Math.random()).slice(0, 6) - if (fileAbsolutePath.includes('content/photos')) { - return post - } - }) - .sort(() => 0.5 - Math.random()) - .slice(0, 6) - - return newArray + return filtered } export default function RelatedPosts({ @@ -63,12 +65,12 @@ export default function RelatedPosts({ isPhotos?: boolean }): ReactElement { const data = useStaticQuery(query) - const posts = data.allMarkdownRemark.edges function getPosts() { - return isPhotos - ? photosWithDataFilter(posts) - : tags && postsWithDataFilter(posts, 'tags', tags) + const dataByType = isPhotos ? data.allPhotos.edges : data.allArticles.edges + const posts = postsWithDataFilter(dataByType, 'tags', tags) + + return posts } const [filteredPosts, setFilteredPosts] = useState(getPosts())