DEV Community: Bookland

Creating an Immutable Blog

Bookland — Tue, 15 Aug 2023 18:09:15 +0000

Originally posted on https://blog.dappling.network/i11g-updating-an-immutable-blog/

We needed a blog for dAppling. One of our important marketing efforts revolves around writing engaging and helpful content. The aim of this is to show two things:

We know things.
We share things.

Not only that, but we like to help people in ways that we can. Sharing knowledge, for me, gives great joy.

High-level Goals

So the question is, how can we use the things we know to host and share those things in a way that is:

Search Engine Optimization (SEO)
Pretty
Easy to update

Search Engine Optimization (SEO)

We have posted articles on dev.to, but wanted stronger search on our own domain. The ideation started a few days ago because dev.to does not allow us to use a custom domain. After reading an article advocating to Publish (on your) Own Site, Syndicate Elsewhere

the practice of posting content on your own site first, then publishing copies or sharing links to third parties (like social media silos) with original post links to provide viewers a path to directly interacting with your content.

So the site is hosted on our domain, that's wonderful. Further, the content is statically generated, which means easier to crawl.

Pretty

I went through the templates on the 11ty starter projects page and found this awesome "Bliss" template by Łukasz Wójcik on GitHub. I think it's pretty. Thanks, Łukasz!

Easy to Update

This was a consideration because if other people on our team want to update the blog, it needs to be straightforward enough to not get in anyone's way. Since this is all Markdown, along with this blog post commit, it should be pretty self-explanatory to duplicate an article.

Don't Get me wrong!

I know there are many options to write blogs that are more optimized than what I'm suggesting here. There's Medium, Substack, the aforementioned dev.to, Ghost, the list really goes on, but there's a desire of mine to make something that'll be compatible with our current infrastructure at dAppling, and I'm having fun. This is the best I have come up with, but do note, I've not exhausted all the web's offerings!

Implementing this yourself

I'm using this blog post as a way to explain-by-doing. Here's my workflow, from concept to creation.

Create your Content

One can obsess over the best way to display information, and that display can be in many different formats, but what most people have seemed to converge on is Markdown. Because of its portability, writing the content in markdown first and finding where to host it later is a great strategy. To that end, I am writing this in my favorite editor, Obsidian.

Manage your Files

First, clone the "Bliss" template and open it up locally in your favorite file editor. When managing the files while writing the blog post, it will be helpful to run the website in development mode.

npm i # first install dependencies
npm run dev # start a local server

To manage the files, you have images and content.

For images, I created a folder for the specific blog post and the related images go into this dedicated folder. The image above is then referenced as: ![Obsidian editor with the above content written](/images/11ty-on-ipfs/obsidian-editor.png)
Content goes into the posts' folder with the markdown, saved as 07-19-11ty-on-ipfs.md, the date and title.

And that's it! After running the server, the content with images should now be viewable at http://localhost:8080/<post title>/ because the template we are using, thanks to 11ty, creates that route for us.

Create your dAppling Project

Now this should be the easy part. Head over to dAppling Network, sign in, and create a new project. The steps for this are:

Sign-up and authorize the GitHub App.
Create a new project and select your blog repo.
Accept the build settings, they should be automatically detected.
Hit that big deploy button, and wait!

You'll wait a bit while the code is deployed, and you should get a link to the site deployed on IPFS. We have a friendly URL like blog-xn6nf4.dappling.network and the template should show up!

Update your dAppling Project

Now, to update a new blog post, you can either update your "main" branch, by either pushing directly or by creating a PR and merging it. I will be pushing directly to the branch and let dAppling deploy the site. After that, the site should be live!

Artifacts

I pushed it after writing that paragraph, and it created a preview URL for me. You can view the deployment on dAppling.

And the Commit on GitHub

What Did I learn?

The creation of this blog post was slower than using an editor online. This is mainly from images. I have to take screenshots and then save them locally. I prefer this over hosting them on a website because having them hosted alongside the website guarantees they will always be available, whereas an online service might be down.
Introducing changes to the blog layout is harder than, say Notion, as there aren't many controls over the typed markdown. Luckily, I like the way the site looks out-of-the-box.
I dare conclude that this blog post took me about 4 hours. That is long! I hope it was because of the do-as-I-go approach.

Conclude

I think this set-up with writing and updating in a single place and having deployment handled by dAppling will be convenient enough to use right now. There are some changes I still need to make, like branding on the site. Of course, we also miss out on features like comments and engagement. I guess we will learn more when I make the next post trying to figure out how the heck I syndicate this everywhere.

Thank you for your time, and if you have any questions, do reach out.

Originally posted on https://blog.dappling.network/i11g-updating-an-immutable-blog/

Poetry in Imagery • Meta Image Generation in Next.js

Bookland — Tue, 15 Aug 2023 18:06:25 +0000

When I stroll through the web without intention, every link, title, and image vies for my attention. With a goal in mind, those same links, titles, and images seem to lack dimension. I struggle to find the information I seek; behind each possible link lacking context, I'm left blind.

Meta tags of a website are a helpful guide. Used to share information about potential content behind a link, these small tags can hold enormous amounts of useful data. As long as they are used correctly, that is. I hope their use is expanded and can help and inspire creators to put more energy into their own site's images.

Essence of Representation

Meta tags provide glimpses into the content without requiring users to visit the page itself. These tags can articulate essential details like the title, description, and intended size of the site. Open Graph tags (og), introduced by Facebook, define a way to share a summary of the content, location data, media information, and more.

The tag for an arbitrary image, og:image, I think has the most potential. These images are not mere visual aids; they are the distilled essence of the web page they represent. A visual haiku. For our app dAppling, I wanted to follow GitHub's lead with a desire to give the user as much information as possible.

By way of example, GItHub's meta images. Explained more in their A framework for building Open Graph images article, the image succinctly and, in my opinion, beautifully explains what you will see before you see it. I love these images. From this little representation, I have been able to quickly gather information and confidently ignore or navigate into the site.

The Alchemist's Wand

Creating these visual haiku is a craft, a magical art. With tools like @vercel/og and Next.js, I started my journey.

A flick of the wrist and a small creation appeared

Each project, tied to a unique gradient, becomes recognizable at a glance. To look under the leaves, here's a gist of the generator. The examples above use different IDs:

top https://www.dappling.network/api/og?id=blog
middle https://www.dappling.network/api/og?id=dog
bottom https://www.dappling.network/api/og?id=bog,

Another gesture of the wand; a motion with emotion. Two new cards materialize. You can see the pretty gradient for each of them is consistent (The ID for the following two are meow).

Our beautiful project card contains a preview at a glance. The deployment card adds two more elements.

You can see, without navigating to the site, if your deployment passed or failed. You can get the "verified" badge after someone signs the deployment, attesting its legitimacy.

The Poetry and the Pitfalls • Next.js

Now we come to the unfortunate story. I would love to say these things all worked perfectly, but the real-time creation of these images posed performance challenges. The metaphysical had to meet the physical world of server responses and loading times. You see, when apps like telegram, slack, discord, and the like try to get these images, the data must be created on the fly. This causes a few problems like, how do we get the information for the page on load?

This is solved by getServerSideProps, but also causes the performance hit. In the new app router, the generateImageMetadata function should work nicely. However, when browsing the site normally, one must wait for the metadata to load, even though they are not concerned with the meta image, after all, they're already on the site.

We scaled back, yet the essence remains. The images still capture the spirit, albeit in a more simplistic form.

Learnings and Such

Meta tags are first come first used. That means, if you have multiple meta tags on the page, it'll probably use the first one encountered. This confused me because instead of being able to define site-wide metadata, I had to use Next.js's <Head> element on every page.

<Head>
    <meta ...>
    <meta ...>
</Head>

Having an svg as a meta image will silently fail and ruin your day. Make them png.
Using metadata website checkers do not accurately reflect exactly what will happen on each individual social media platform. They all have their own way to display the images.
- open graph debugger - see if the images work
- meta debugger - view tags in chrome dev tools useful for duplicates
Using local metadata debugging does not accurately reflect the first load of your page. There is a chance the meta tags change as hooks return data. Keep this in mind when using extensions like localhost open graph debugger.
twitter: tags are used by more than just twitter.

The full list of image related tags used:

<meta property="og:url" content={url} />
<meta itemProp="url" content={url} />
<meta itemProp="image" content={imageUrl} />
<meta name="image" content={imageUrl} />
<meta property="og:image" content={imageUrl} />
<meta property="og:image:alt" content="dAppling" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:image" content={imageUrl} />
<meta property="twitter:image:src" content={imageUrl} />
<meta property="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dApplingNetwork" />
<meta name="twitter:creator" content="@dApplingNetwork" />
<meta property="twitter:url" content="https://www.dappling.network" />
<meta property="twitter:title" content="..." />
<meta property="twitter:description" content="..." />

If I were to start over, the process simply is:
start ideating, sketching, and playing with the og playground until you have struck inspiration and want to start migrating to your actual code.
create either a new Next.js project or add the og endpoint to your existing project.
modify the meta tags of your site to include the dynamic url. e.g. https://www.dappling.network/api/og?type=project&id=${projectId}.
test with the tools above
cross your fingers

If you're interested in our exact implementation, the full code can be found in this gist.

The Art of the Web

Meta image generation is both a technical task and an art form. How one can translate the complex into the simple while maintaining beauty. Like a haiku captures a moment, a well-crafted meta image reminds that even in the technical world of web development, there's room for poetry, beauty, and a touch of the metaphysical.

Thank you for your time. If you need help, please reach out to me on telegram.

🙏❤️🌱 What a great day to be alive!

Originally posted on https://blog.dappling.network/poetry-in-imagery-meta-image-generation-in-nextjs/