Forem: Contentful

Create a bot with RSS and webhooks for Mastodon, a Twitter alternative

Bulent Osman Yusuf — Tue, 22 Nov 2022 14:07:09 +0000

Looking for a Twitter alternative? Here's two ways to set up a bot to automatically publish content from your Contentful space to your Mastodon server.

NB: This post was first published on the Contentful Blog.

In recent weeks there’s been a huge surge in interest for an alternative to Twitter. Whether folks want to stretch their wings by learning about new social media platforms, or they’re looking for a simple Twitter replacement, an open source service called Mastodon is trending as the clear favorite.

But there are things to take into account when using Mastodon for the first time. It has its own rules, vocabulary, and ways of operation. Tweets are now “toots.” You no longer have a universal timeline like Twitter, for example, but a thing called a federated timeline. And there’s even an edit button!

In this post, we’ll take a quick tour of Mastodon – and, by extension, a mysterious place called the fediverse (oooooooh). We’ll also show you two simple ways to set up a bot to automatically publish content from your Contentful space to your Mastodon server of choice. Ready? Let’s go!

What is Mastodon?

The Mastodon project first went live in October 2016, and is the creation of software engineer Eugen Rochko. The mascot of the service is an adorable wooly mammoth. The concept is a decentralized social network built from free and open source software, where individuals have the ability to quickly spin up and self-host their own social networking services – while still being able to interact and communicate with one another.

Growth in the past few weeks has been absolutely stellar. According to a toot by Eugen on 7 November, “Hey, so, we’ve hit 1,028,362 monthly active users across the network today. 1,124 new Mastodon servers since Oct. 27, and 489,003 new users. That’s pretty cool.”

Cool is an understatement!

What about the Fediverse?

Mastodon as a service embodies all the characteristics of a fediverse, which is shorthand for federated universe; a set of distinct but interconnected web publishing servers (also known as a node or instance) sharing the same protocols for communication. You have the option to follow and interact with people within your own server (your local timeline) but also with the denizens of neighboring servers which might be dedicated to different interests and specialisms (a federated timeline).

For example, Person A could start a social media node using the Mastodon protocol dedicated to lovers of apples, while Person B could start one dedicated to those who prefer oranges. Users of either social network can freely interact with each other, talk about the joys of fruit salad, and attract followers and comments from both places. But they can also choose to confine themselves to their own network about their preferred fruit. Either option is entirely valid.

Is it free to use Mastodon?

Yes. Mastodon is funded entirely by sponsors who cover the cost of operating individual servers or the salaries of volunteers running them. It’s ad-free and there are definitely no algorithms – no mathematical alchemy behind the scenes serving up content it thinks you might like – just a stream of toots that you’ll see posted in real time.

But there are enough similarities to Twitter to make it recognizable to users of that other service, for example, the use of hashtags, notifications, and followers. And you can access it from your desktop or use mobile apps available for iOS and Android devices, both of the official and unofficial variety.

Free speech is pivotal to Mastodon, but there are guardrails against hate speech and misinformation. The Mastodon Server Covenant is a list of server owners who pledge to provide active moderation against racism, sexism, homophobia and transphobia, plus several other user-first commitments on privacy and terms of service. This offers newcomers reassurance up front that they’re venturing into a safe space, free from trolls and fake news.

Let’s build a bot for Mastodon!

Now that you know a little bit about what makes this Twitter alternative so intriguing in its own right, let’s roll up our sleeves and build something for it!

We’re not ready to create a server of our own on Mastodon just yet, but let’s kick it off with functionality that’s smaller and simpler (but no less useful): a bot that automagically notifies the community when a new post is published to the Contentful blog.

This is a relatively straightforward process because Mastodon provides access to its data over a REST API, just like Contentful does. You have either the option of webhooks or RSS fields (or both) to tie it all together. With some simple alterations, you can follow these same steps to sync your content between other social or microblogging services like Twitter, Instagram, Tumblr, etc.

Wait, what’s a bot?

Did you know? More than half of all web traffic is generated by bots. Why? Because internet bots are able to perform tasks that are simple and repetitive much faster than a human ever could. Wikipedia has a good definition: a bot is a software application that runs automated tasks (scripts) over the internet, such as messaging or publishing content.

What’s a webhook?

Webhooks are unidirectional mechanisms that applications can use to talk to each other when a particular event occurs. Think of a webhook as an automated, one-way communication from one application to another. The first application sends the information to the receiver without waiting for a response. Then, it relies on the receiver to process this information. Read all about it in our ultimate guide to webhooks.

What’s an RSS feed?

RSS (RDF Site Summary or Really Simple Syndication) allows people to subscribe to newly published content via an RSS reader so that they don’t need to manually check websites or channels. An RSS feed takes the form of a standard XML (Extensible Markup Language) file, built of content and tags that define the content, and it looks a bit like HTML. XML is both human and machine readable. Check out the Contentful blog RSS feed here.

Step 1: Sign up for a Mastodon account and choose a server

Let’s start by signing up for an account with Mastodon. The first thing you need to do is pick a server. There are multiple servers available, filterable by topic (Animation! Astronomy! FOSS!) and region, and the ones on this index belong to the Mastodon Server Covenant.

You can always switch servers later if you change your mind. We’re going with mastodon.online, a newer server administered by Mastodon directly. This is the account we have created for the bot (which, being a bot, is limited only to republishing content from the blog and is not moderated by a human).

Step 2: Generate a token in Mastodon

Now that you have a Mastodon account and have familiarized yourself with the service, go to settings > profile > development and select “New Application.”

Fill out some fields describing your project, then, under “Scopes” only select write:statuses among all the checkboxes that you see.

Click “submit,” then a unique token will be generated. Hang on to this information, you’ll need it in a bit.

Step 3 / Option A: Create a webhook in Contentful

a) Sign up for a Contentful account

Our assumption for this tutorial is that you already have a Contentful account, together with a Space that’s already populated with a content model.

If you don’t already have one, then this is the place to go to sign up for an account. And if you want to quickly spin up a blog, we have a roundup of some useful templates here.

Come back when you’re ready to syndicate your content!

b) Create a webhook in Contentful

So, let’s summarize. Our goal is to notify our Mastodon account of changes within specific parameters, e.g. that we have added a new post to the Contentful blog.

The most straightforward approach is to create a webhook in your Contentful Space that communicates directly with Mastodon through the magic of APIs.

Go to your webhooks via your “Settings” menu.

You’ll see a list of your webhooks; create a new one using the “Add Webhook” button.

Now, this is where you’ll configure your webhook.

Name: Whatever you want! We chose “Contentful blog post to Mastodon.”

Webhook URL: This is the URL to the Mastodon API. Use the following format, replacing [YOUR_INSTANCE] and [YOUR_MASTODON_TOKEN] with the values from Steps 1 and 2.

[YOUR_INSTANCE]/api/v1/statuses?access_token=[YOUR_MASTODON_TOKEN]
Trigger: By default, “Trigger for all events” is selected. DO NOT leave it as it is. Change it to “Select specific triggering events” and make it trigger only when an entry is published. You can see what it looks like below.

Headers: You don’t need to add additional headers, but you need to change the “Content type” to application/json.

💡Heads up — you can do all the above steps to set up your webhook programmatically using the Contentful API. You can find the code to do this in this repo.💡

Finally, and this is a crucial step, you need to figure out what you will “toot” every time the webhook triggers.

Remember, we want to automatically send a toot every time an entry is published. You define the text of your toot by using a custom payload on your webhook.

This depends on your content model. In our example, this is what our content model looks like:

Based on our content model, this would be our payload:

{
  "status": "New post! {/payload/fields/title/en-US}. \n [YOUR_WEBSITE]/{/payload/fields/slug/en-US}"
}

The values between the brackets will be replaced by dynamic data from Contentful. Make sure to replace YOUR_WEBSITE with the URL of your blog, e.g., contentful.com/blog.

Step 3 / Option B: Use a third-party automation service

In some scenarios, you may prefer to sync up the two services using a third-party automation tool.

This might be because your content model is in the middle of being revised, for example, or environmental governance rules in your org won’t permit you to create webhooks willy-nilly. We get it, it happens.

For the purposes of this tutorial, we’ll go ahead and create an account with IFTTT, though Zapier would be equally effective.

We’ll need to specify two things for our project to work properly; a trigger and the action. Then we’ll top it off with some details for the web request.

a) This is the trigger

Within IFTTT, click on “Create” or visit https://ifttt.com/create, and follow the prompts to create a dedicated applet.

In the list of services, search for “RSS.”

Choose “New feed item” as your trigger.

Paste the URL of your RSS feed (ours is here), and then create the trigger.

b) And this is the action

Now onto choosing an action; this is what IFTTT will do whenever there’s a new item added to your RSS feed.

We’ll choose “webhook” to send the contents of our RSS entry to the Mastodon API.

Next, choose the “webhook action” to “Make a web request” (it’s the only option), because as we said earlier, we’ll be sending a request to the Mastodon API.

c) Make a web request

Just a few more things you need to add and then we’re done.

First, the URL that will receive the web request, it will be something like:

https://[YOUR_INSTANCE]/api/v1/statuses?access_token=[YOUR_MASTODON_TOKEN]
Then, change the “Method” to “POST” by selecting in the drop down.

Then, for the “Content Type,” select application/json.

Then, in the “Body” section, put a JSON object with the “status” property, that will define a template for what your toots will look like.

In our example, { "status": "{{EntryTitle}} -> {{EntryUrl}}" }, our toots will have a simple format of blog post title and then the URL.

Step 4: Testing, testing

To test your new bot, you should go ahead and publish a sample blog post.

Alternatively, you can live by the seat of your pants and wait until the next time you publish something for real...

Either way, if everything has been set up correctly, you should now have a working bot that fires off a toot every time a new post appears on your site.

Here’s a screenshot of our Contentful bot working its magic on Mastodon – and hey, it’s already got some followers!

Wrapping up: Is Mastodon the best Twitter alternative?

So there you have it. Now you know what Mastodon is, what the fediverse is, and how to tie it all together with your Contentful space.

Is Mastodon really the best Twitter alternative available? We’ll leave that to you to judge, but with this simple little project you can really get your teeth into this intriguing platform and evaluate it for yourself.

Get started! Start building with a free Contentful account, no credit card required. Sign up.

Airtable automation: How I streamlined submissions to the Developer Showcase

Harshil Agrawal — Thu, 13 Oct 2022 14:28:58 +0000

NOTE: This post was first published on the Contentful Blog.

In April 2022, we launched the Developer Showcase to highlight the work of the community. Developers share their projects, apps, videos, or blog posts they’ve created around Contentful. The developer showcase has become the go-to place to see what others are building and get inspired!

If you’ve worked on a project that you believe can help the community, you can go to the Developer Showcase page, and submit the form. If your project meets the criteria, you get an email from us for the next step. In this step, you share more information about the project and yourself. This information is then used on the Developer Showcase page.

The process seems straightforward, but there are a lot of repetitive tasks that are being performed behind the scenes. In this tutorial, I’ll share how automated processes using Airtable and a few other integrations got myself some time back!

The manual process and challenges

As mentioned above, if a developer is interested in adding their project to the showcase, they submit a form on the website with initial details. Once the form is submitted, the developer relations (DevRel) team gets a notification over email with the submission details. We then manually enter the details into a Google Sheet.

Imagine, getting submissions every day, and you have to fill out entries in the Google Sheet manually! Yes, data entry is monotonous and time-consuming. I knew it could be automated and save us time.

After the details were entered in the Google Sheet, team members would review the submissions weekly. We’d check and decide if the submissions met the criteria. If the submission was a good fit, the developer would receive an email from us asking them to fill out another form with more details. The information shared via this form would get added to a Contentful space, which was being used to manage the content on the Developer Showcase page (yes, we use Contentful at Contentful!).

The above process was also manual. We had to manually add the relevant information shared via the form to the Contentful space. This again cost us time. I recognized this as another task that could be automated.

Both the tasks were manual, which meant that the chances of human error were high. There were situations where I would enter the information in the wrong columns when I was in a hurry. This was also becoming monotonous.

Automating the boring parts

I take pride in being lazy! My laziness helps me find solutions that make my tasks joyful. Now that I recognized two tasks that could be automated, I started looking for solutions.

My first step was to migrate to a spreadsheet-like tool that provided better features than Google Sheets. I was looking for a tool that would allow me to easily create automation workflows, configure different views, and also have an easy-to-use API.

Luckily for me, we already use Airtable at Contentful for various projects. I created a base in Airtable for the Developer Showcase which would contain all the details — from the initial form submission details to the final details.

Everyone in the DevRel team is involved in the showcase. All of us decide if a submission should be added to the Developer Showcase. We handle this by voting. For every member of the team, I created a view that would list all the submissions that they haven’t viewed. Having an individual view made it easy for my team to go in, view the project, leave their thoughts, and vote. It hardly takes them 15 minutes now!

The migration to Airtable also involved creating automation to handle the form submissions. After setting up the table and the individual views, I created an automation workflow in Zapier.

This workflow would get triggered whenever there was a submission made to the Developer Showcase form. The workflow would then add the new record to the Airtable base, and also send a Slack message to notify us. All I had to do now was to check if the submission was valid and if it was, update the Valid column in Airtable.

The above workflow replaced the manual labor of entering the data into Google Sheets. The first task was now automated!

Connecting Airtable to Contentful

The other time-consuming task was entering the final details of the submissions to Contentful, and I wanted to automate it next. Now that we were using Airtable to manage the data, I re-created the template for the final submission form in Airtable. This enabled us to capture the data in Airtable itself. Whenever a developer submitted this form with the details, it now got saved in Airtable. There was no need to create an automation workflow to handle it!

The data from the final form submission was in Airtable, and not Contentful, yet. To get this data added automatically to Contentful, I created a workflow in Airtable. If you’re using Airtable, you might know that Airtable doesn’t have webhooks (at the time of writing this article). This means that whenever data is created or updated, you can’t trigger external events.

To overcome this, you can either create automation workflows that run at a certain interval of time, or check for new data and then process that data. A better and faster solution is to use automation within Airtable. It allows you to trigger actions when data is entered or updated.

I created a workflow in Airtable to handle the above scenario. Every time a developer submitted the final form, this workflow would get triggered. It is out of the scope of this article to walk you through all the steps of creating the automation workflow. But, below I’m sharing the code snippet that populates Contentful with the data.

Once the form is submitted, the workflow gets triggered. The next step is to create an action that will add the content to Contentful. Airtable doesn’t have an in-built action for Contentful, so there isn’t a no-code or even a low-code solution available just yet. However, it has an action that allows you to run custom JavaScript code.

While working with this action, I learned that you can’t import npm packages. Hence, using the Contentful Management JavaScript SDK was not possible. Fortunately, Contentful has a REST API to interact with the Management API! I wrote the following code in the “Run a Script” action. This script populated the Contentful space with the data from Airtable.

// @ts-ignore
const SPACE_ID=SPACE_ID
const URL = `https://api.contentful.com/spaces/${SPACE_ID}`
const inputConfig = input.config();
const AUTHORLINK = 'authorLink';
const AUTHOR = 'author';
const ENTRY = 'entry';

const linkId = [];
let authorId;

const makeCall = async (endpoint, method, contentType, body) => {
  return fetch(URL+endpoint, {
    method: method,
    headers: {
      Authorization: 'Bearer MANAGEMENT_TOKEN',
      'Content-Type': 'application/vnd.contentful.management.v1+json',
      'X-Contentful-Content-Type': contentType
    },
    body
  })
}

const checkLinkType = (link) => {
  if(link.includes('github')) {
    return 'Github'
  } else if (link.includes('linkedin')) {
    return 'LinkedIn'
  } else if (link.includes('twitter')) {
    return 'Twitter'
  } else if (link.includes('youtube')) {
    return 'YouTube'
  } else {
    return 'Website'
  }
}

const addAuthorLink = async () => {
    const links = inputConfig.authorLink.split(',');
    for (var link of links) {
        let linkType = checkLinkType(link)
        const response = await makeCall('/environments/master/entries', 'POST', AUTHORLINK, JSON.stringify(
            {
                "fields": {
                    "internalTitle": {
                        "en-US": `${inputConfig.authorName}'s ${linkType}`
                },
                "type": {
                    "en-US": `${linkType}`
                },
                "link": {
                    "en-US":`${link}`
                }
            }
        }))
        const res = await response.json();
        linkId.push(await res.sys.id)
    }
    return linkId
}

const addAuthor = async () =>{
    const links = linkId.map(link => {
        return {
            "sys": {
                "type": "Link",
                "linkType": "Entry",
                "id": link
            }
        }
    })

    const response = await makeCall('/environments/master/entries', 'POST', AUTHOR, JSON.stringify({
        "fields":{
            "name": {
                "en-US": `${inputConfig.authorName}`
            },
            "bio":{
                "en-US": `${inputConfig.authorBio}`
            },
            "links": {
                'en-US': links
            }
        }
    }))
    const res = await response.json();
    authorId = await res.sys.id;
}

const addEntry = async() =>{ 
    const response = await makeCall('/environments/master/entries', 'POST', ENTRY, JSON.stringify({
        "fields": {
            "title": {
            "en-US": `${inputConfig.projectTitle}`
            },
            "description": {
            "en-US": `${inputConfig.projectDesc}`
            },
            "link": {
            "en-US": `${inputConfig.projectLink}`
            },
            "author": {
                "en-US": {
                    "sys": {
                    "type": "Link",
                    "linkType": "Entry",
                    "id": authorId
                    }
                }
            },
            "type": {
              "en-US": {
                "sys" : {
                  "type": "Link",
                  "linkType": "Entry",
                  "id": "FIELD_ID"
                }
              }
            }
        }
    }))
    const res = await response.json();
    console.log(await res)
}

(async () => {
    await addAuthorLink()
    await addAuthor()
    await addEntry()
})()

Walking through the code

Let’s break down the code to understand what is happening. The first few lines are defining some variables that we need later in the code. This includes the space ID, URL of the Management API, content type IDs, as well as the input object from Airtable.

We then define a reusable function makeCall that takes the API endpoint, HTTP method, content type, and the body as the parameters. We use this function to call the Management API.

An author of a Developer Showcase submission can share social links. These links are displayed on the respective author page, e.g., one of our top contributors Teemu Tammela. To identify the type of this link, we are using the checkLinkType function. It returns the type that we have configured in Contentful.

Next, we define the addAuthorLink function. This function creates an array of links shared by the author, gets the link type, and adds them to Contentful. It also returns an array of link IDs that get used in the addAuthor function.

The addAuthor function adds all the information about the author, as well as adds references to the links. The final result, a new entry of the author, is now available with references to the author’s social media accounts.

Lastly, the addEntry function adds the project details and references the author. Since the type of project has not been asked in the form, it is hard-coded. The type is manually updated before the entries are published.

The last action in this automation workflow is sending a message on Slack. Since Airtable has an built-in app for Slack, it was straightforward to set it up!

To summarize the above workflow, every time the Airtable form was submitted, the automation would be triggered. It will execute the “Run a script” action, that runs the above code and adds the content to Contentful. Once the content is successfully added, a message is sent on Slack.

All we have to do now is log in to the Contentful space, review the newly created entries, add the missing assets, and publish the changes!

What’s next?

These workflows have saved us a huge amount of time! We don’t have to manually add data, and we can focus more on highlighting the amazing work the community is doing!

The code currently doesn’t handle images, however. We manually have to add them to Contentful. I couldn’t find a good solution to handle images in Airtable, and I am still on the lookout. If you have worked with images in Airtable and have a solution, please let me know!

There are a lot of other tasks that can be automated in the whole process. But my experience with automation has taught me one thing — start small and automate the things you do often. It has helped me not over-engineer a simple solution.

Now that I have more free time, why don’t you share what you’ve created with Contentful? I would love to see it and share it with the community. Also, let me know which Developer Showcase entries you find the most interesting!

Developer Showcase Spotlight: Low-code examples of building blogs

Bulent Osman Yusuf — Thu, 06 Oct 2022 11:21:26 +0000

Wanna create a blog? Tools are readily available that make it super easy and fun. Contentful, Gatsby and Netlify are your building blocks for building blogs, and in this post I show a few examples.

This post was first published on the Contentful Blog.

My role at Contentful is to manage the company blog, and I love it. We have a dedicated team of developers, designers, writers, and editors all working together to deliver great content –– and I get to pester all of them on a daily basis.

But when the Developer Showcase was launched early this summer, it got me thinking about building a Jamstack site of my own; a sandbox to play in, learn something new, and occasionally break stuff.

The idea was simple: to create a basic blog from modular components, and to do it using existing resources without getting too deep into the code. I wanted to bring together standalone elements like a content management system, a static site generator and hosting provider through the magic of APIs. The grand result would be a site that was performant and secure.

In the end, I got a bit carried away and wound up creating several blogs plus a portfolio to bring them all together. The result is called Get Some Jam. And that’s what’s been so utterly delightful about this project.

Approaching it as a content editor searching for low-code solutions, I found many options for achieving my goal and couldn’t settle on just one. I’m going to tell you all about it in this post, so pull up a seat and make yourself comfortable.

First things first, set up a GitHub account

If you leave here with only one takeaway (other than the fact that Contentful is amazing and you should totally be using it for your next project), it’s that a GitHub account is your passport to many exotic locations on the magical electronic interwebs.

I used to think that GitHub was just a place where developers would store code and collaborate, but it’s a lot more than that. What’s also wonderful about GitHub is that an account functions as a universal identifier on the web, so you don’t need to create accounts with multiple services and then try to remember passwords for each of them. One GitHub account will grant you secure access to everything.

From my personal GitHub account, for example, I created and synced up free accounts with Contentful (content platform), Gatsby (static site generation and deployment), Netlify (deployment), and Vercel (deployment), and between those four entities I was able to build four different websites in about a week.

The only outlier to this process was Google, which has its own authentication protocol for their services. That came into play for this project when it came to buying and managing domains. But Google makes doing this so easy that I really can’t object.

Oh yes, and the OTHER useful thing about GitHub is that it’s your de-facto place for storing and delivering files that go into the upkeep of a website. Which leads us to my first example.

1. Building a low-code blog with Gatsby and Gatsby Cloud

The tech stack for this first blog is very simple and consists of two components: Gatsby and Contentful.

This is because Gatsby offers more than a framework for static site generation, there’s also the option of a fully featured deployment and hosting service called Gatsby Cloud.

So, my first port of call was the official GitHub repository where Contentful maintains a starter blog template built using Gatsby, which has push button deployment for Gatsby Cloud. This template is basic but properly formatted with all the necessary features of a functional blog. Things like an index page, formatting for individual posts and key visuals, plus timestamps, authors, and tagging.

It also comes with a preconfigured content model to populate your Contentful space, and sample posts you can delete later. Much of the heavy lifting is done already for those who are still learning the concept of structured content. My thanks to David Fateh for maintaining this great resource.

Bonus: How to add inline images

While adding some sample entries of my own to this blog, I found a setting that wasn’t to my liking. You’re not able to show inline images in the body of a post. This is because images are a Rich Text Asset that’s not defined (and therefore not queryable) in the content model when setting up the blog for the first time.

After a bit of Googling, I found some helpful blog posts articulating how to resolve the issue. One by Paul Scanlon over on the Gatsby blog and another by Andreea Macoveiciuc on Medium. After a bit of trial and error, I wedged an approximation of their code into my blog-post.js file in starter-gatsby-blog/src/templates/blog-post.js and now images are visible.

Here it is if you’d like to use it yourself:

body {
   raw
   references {
      ... on ContentfulAsset {
         contentful_id
         title
         description
         gatsbyImage(width: 1000)
          __typename
      }
   }
}

I did attempt to have this merged into the main Starter Gatsby Blog repo on GitHub, but it causes issues at startup because it’s an unexpected element in the schema. As long as you use this code after the blog has been generated you’ll be golden.

Would you like to build something more elaborate with Contentful and Gatsby? Check out this guide for a fully featured homepage starter.

2. Building a low-code blog with NextJS and Vercel

Moving on to something slightly more complicated — but not by much — the tech stack for this second blog is three components: Contentful, NextJS and Vercel. In this instance, we’re switching to a new framework and a new deployment service.

Again, this is a basic but functional blog, with a pre-populated content model which looks like:

title – Text field (type short text)

content – Rich Text field

excerpt – Text field (type Long text, full-text search)

coverImage – Media field (type one file)

date – Date and time field

slug – Text field. You can optionally go to the settings of this field, and under Appearance, select Slug to display it as a slug of the title field.

author – Reference field (type one reference)

If you really want to dig into the process yourself, you can follow the instructions on the GitHub repo and create the content model manually from within your Contentful space. OR you could just hit that big blue “deploy” button and have it taken care of for you. Can you guess which option I chose? =D

Not much else to add here, except that this template might be really useful if you’re intent on showcasing high-definition images for each post. You can see our very own Brittany Walker spinning up this same template in a video tutorial here.

3. Building a low-code blog with RemixJS and Vercel

At first glance, this third blog looks exactly the same as the Gatsby Starter Blog. It’s actually a fork and rebuilt from the ground up using the RemixJS framework. For this site, I opted to host it again on Vercel.

This starter blog template is the work of Contentful Software Engineer Marco Link, and has pride of place on the Developer Showcase alongside some other projects of his making.

One tweak that I made to the blog after creating it was to change the date formatting from DE to EN. You can do that by visiting the file to-readable-date.ts in contentful-remix-starter-blog/app/utils and changing the value “de-DE” to “en-GB”.

Would you like to build something more elaborate with Contentful and RemixJS? Check out this guide for a fully featured portfolio starter.

4. Building a low-code portfolio with Gatsby and Netlify

Phew, that’s a lot of blogs! The last piece of the project is to bring them all together in one place, with all the relevant links and a bit of discourse about how they were made and the technologies used. This portfolio site is called “Get Some Jam,” and the pun is very much intended.

I’d been searching the web for a suitable template, and eventually I found the Mate portfolio starter by software engineer Ema Suriano. This is a beautiful single page site with a customizable and responsive design regardless of whether you access it on a desktop, smartphone, or magic mirror. If you end up using this template yourself, be sure to buy them a coffee.

It also has a handy feature to import posts from a Medium account, so that I could offer meta-commentary on the process of creating these posts and lessons learned alongside the links to the sites themselves. I expect that no one will find these posts interesting except perhaps my mother (and even that’s a stretch), but it felt good to document the personal eureka moments as I went along.

Next steps after the sites are built

That’s the story behind my submission of Get Some Jam to the Developer Showcase. Thank you for your attention. And since you’ve made it this far, I’ve two more nuggets of wisdom to share from these low-code examples.

Add webhooks for automating previews and updates

We recently published a detailed guide to using webhooks in Contentful. The ultimate guide, in fact. Just to add my two cents; this is one of the first things to investigate after you’ve set up your site with Contentful and your framework/deployment service of choice. It automates many of the key steps you would normally take when managing a site, such as web page previews or pushing them live when you hit the publish button in Contentful.

Keep an eye on Lighthouse scores

Another fantastic feature that’s available on Gatsby Cloud and Netlify is Lighthouse scores. Essentially, Lighthouse is a tool from Google that analyzes web apps and web pages, collecting modern performance metrics and insights to guide developer best practices. Each time you deploy an update, your new build is given a score between 1–100 for each of the following criteria: Performance, Accessibility, Best Practices, Search Engine Optimization and Progressive Web Apps. This post on the Netlify blog is a great introduction.

Wrapping up

Sitting on the other side of my little project, I have a renewed appreciation for the Contentful content platform. Yes, it’s scalable and versatile and fast and reliable — all of these things are true. But it’s also accessible enough that a non-technical person can roll up their sleeves and build something for themselves.

And this is made possible thanks to a terrific group of developers and creatives who have shared their efforts for the betterment of the community. I proffer a tip of the hat to them all.

Get started! Start building with a free Contentful account, no credit card required. Sign up.

How to get started using Angular with Contentful

Luke Stahl — Tue, 20 Sep 2022 12:47:31 +0000

NOTE: This article originally appeared on the Contentful Blog

Angular and Contentful are popular tools for creating client-side applications or delivering content creation and management services.

Because of its scalable design and productivity-enhancing capabilities, Angular powers the frontend of Google apps used by millions of users worldwide.

Contentful is a cloud-based content management platform that organizes and manages content that can be accessed via various platforms — including websites and mobile apps. It’s a headless system that provides a project-specific framework for managing website content. It’s independent of the frontend, enabling you to use the backend and content infrastructure with any client-side framework — including Angular, React, and Vue, just to name a few.

Contentful also enables you to add and update information that appears on the frontend of your website or mobile application. Additionally, it saves you the time and effort of developing your own backend — which would otherwise require knowledge of a backend language or platforms like Python or Node.js and database administration — and provides various tools to help developers interface the frontend with the backend.

This beginner’s tutorial will demonstrate how to build a full-stack application using Contentful and Angular. In this demonstration, you’ll create a job listings website for developers. All the sample code is stored on GitHub for reference.

Creating content

Let’s get started with Contentful.

First, sign up for a free Contentful account. Next, create an empty space with a content model called JobListing in the Contentful UI. We won’t be showing a step-by-step guide on how to do this here, but you can refer to this page for a detailed walkthrough of creating a space and a content model.

In this demonstration, the Job model has the following fields and types:

Role: Short text
Description: Long text
HowToApply: Rich text
Organization: Short text
Date: Date & time
Skills: Short Text & list

Populate the fields with 3-4 sample job listings by clicking the Content tab, then Add Blog post. After filling out the fields, click Draft and then Publish.

Now that you’ve created and published your job listings, you’ll fetch them from the API and display them with Angular.

One thing to note is that before you can communicate with Contentful, you’ll need an API key consisting of the Space ID, the Access Token, and the Entry ID. You can get these from your Contentful space.

Create an Angular project

Your Angular project will fetch and display the job listings from Contentful. To do this, you’ll:

Create an Angular project and modify the page to display the retrieved content appropriately.
Create an Angular service that can fetch the data.
Include the routes required to navigate the app.
Connect the service to the page and display the fetched content.

Before you start, you’ll need to set up your development environment properly.

Since Angular requires using Angular CLI to scaffold the initial project files and any necessary artifacts during the project’s development, you’ll need to have recent versions of Node.js and npm installed on your development machine.

Installing Node and Angular CLI

There are various ways you can install Node.js on your machine. You can pick one of the following options here:

Obtain an installer compatible with your operating system from the official website.
Make use of the official package manager of your system.
Use a Node version manager such as NVM, which allows you to manage multiple versions of Node on your development machine. We recommend using NVM.

While this article is accessible to anyone, it helps to have an understanding of TypeScript and Angular.

If you already installed Node on your system, head to a terminal and install Angular CLI. This tutorial uses Angular CLI v13.3.7.

If you want to use the same version as this tutorial, you simply need to specify the version when installing the CLI. Open a command line and type:

npm install -g @angular/cli@13.3.7.

After the installation, you’ll be able to use the ng tool from your terminal.

Getting started with Angular

Now it’s time to create our Angular project. In the command-line interface, run the following command:

ng new angularcontentfuldemo --routing --style=css

After confirming, Angular CLI will generate your initial project files, install the packages, and log the process on the command-line interface. The following should be printed after the project’s creation:

✔ Packages installed successfully.
    Successfully initialized git.

Open the app.component.ts file from the src/app folder, and add the following line to the top of the file:

import { ContentService } from './content.service';

Then, in the AppComponent class at the bottom of the file, add this line below title = "angularcontentfuldemo" as follows:

constructor(contentService: ContentService){}

Next, in your terminal, go to the directory of your project:

cd angularcontentfuldemo

You can then serve your Angular application by running the ng serve command as follows:

ng serve

Your app will be served from http://localhost:4200/.

Leave your current command-line interface open for running the development server, and open a new command-line interface for running the commands that follow.

Before proceeding, you’ll need to add your Contentful Space ID and Content Delivery API Access Token to the environment variables of our application. You can create an access token using the Contentful web app or the Content Management API.

Open the src/environments.tsfile and update it as follows:

export const environment = {
  production: false,
  contentful: {
    spaceId: 'YOUR_SPACE_ID',
    accessToken: 'YOUR_ACCESS_TOKEN'
  }
};

Make sure to replace YOUR_SPACE_ID and YOUR_ACCESS_TOKEN with your actual credentials.

Next, you need to install some necessary dependencies, such as contentful, bootstrap, rich-text-types, and rich-text-html-renderer. Navigate to your project’s folder and enter the following commands:

npm install contentful bootstrap 
npm install @contentful/rich-text-types @contentful/rich-text-html-renderer

You’ll use Contentful to connect with Contentful APIs and Bootstrap for styling the Angular UI.

Next, add Bootstrap to your project. There are various ways to add Bootstrap to Angular. In this demonstration, Bootstrap files are included via the angular.json file. Open the configuration file that exists at the root of the project and add the following line:

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
 ]

Open the src/app/app.component.html file and replace it with the following:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <h1>Developers Jobs</h1>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
<div>
  <router-outlet></router-outlet>
</div>

With the code snippet above, you’ve removed the boilerplate markup, except for the router outlet, and added a Bootstrapheader bar. Please note that in order for the styling to take effect, you may need to restart your service.

1. Create the service for communicating with Contentful

Now, you’ll create the service that will encapsulate the code for communicating with Contentful. Go back to your command-line interface and run the following command to generate the service:

ng g s content

Create a content-types.ts file in the src/app/ folder and add the following code:

import * as CFRichTextTypes from "@contentful/rich-text-types";
import * as Contentful from "contentful";

export interface TypeJobListingFields {
    role?: Contentful.EntryFields.Symbol;
    description?: Contentful.EntryFields.Text;
    howToApply?: CFRichTextTypes.Block | CFRichTextTypes.Inline;
    organization?: Contentful.EntryFields.Symbol;
    date?: Contentful.EntryFields.Date;
    skills?: Contentful.EntryFields.Symbol[];
}

export type TypeJobListing = Contentful.Entry<TypeJobListingFields>;

This will be used to type the entries corresponding to your content model. You can either write the types manually like above, or use these automated tools for a more scalable approach:

cf-content-types-generator
contentful-typescript-codegen
contentful-ts-type-generator
contentful-ts-generator
TS Content Types Generator App Open the src/app/content.service.ts file and start by adding the following imports:

import { Injectable } from '@angular/core';
import { createClient } from 'contentful';
import { from } from 'rxjs';
import { environment } from '../environments/environment';
import { TypeJobListingFields } from './content-types';

Next, add the client property and call the createClientfunction to create a client as follows:

@Injectable({
  providedIn: 'root'
})
export class ContentService {

  client = createClient({
    space: environment.contentful.spaceId,
    accessToken: environment.contentful.accessToken
  });
  constructor() {}
}

Then, add the following method after the constructor in the content.service.ts file to fetch content from Contentful:

getJobListings(query?: object){
  return from(
  this.client.getEntries<TypeJobListingFields>(Object.assign({
   content_type: 'jobListing'
  }, query))
  );
}

You call the getEntries method of Contentful to retrieve the entries corresponding to the model content that you pass as the method’s first argument. You use Object.assign to create an object containing the content type and any other queries that you pass to Contentful.

This method also accepts a generic type that defines the type of content that will be returned, which in this case is TypeJobListingFields.

Use the from operator to convert the promise returned from the method to an observable, as this is more convenient to use with Angular.

If you didn’t save your content type ID before, you could get it by clicking contentful > content model, then click on your content model name. Your content type ID should be on the right sidebar.

To fetch a job listing by ID, add the following method below the getJobListings()function in content.service.ts:

getJobListingById(jobListingId: string, query?: any){return from(
   this.client.getEntry<TypeJobListingFields>(jobListingId, query)
   );
}

2. Add routing

After implementing the service, you need to create a component to display the job listings fetched from the backend and add routing.

Go back to your command-line interface and run the following commands:

ng g c jobListings 
ng g c jobListing

This will generate the components’ files and add them to the root application module.

Next, open the src/app/app-routing.module.ts file and start by importing the components as follows:

import { JobListingsComponent } from './job-listings/job-listings.component';
import { JobListingComponent } from './job-listing/job-listing.component';

Then, add the following routes:

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'listings' },
  { path: 'listings', component: JobListingsComponent },
  { path: 'listing/:id', component: JobListingComponent }
];

Here, you define three routes. The first route simply redirects the user to the second route, which routes to the JobListingsComponent.

Open the src/app/job-listings/job-listings.component.ts file and import the service and the other symbols as follows:

import { Component, OnInit } from '@angular/core';
import { ContentService } from '../content.service';
import { TypeJobListingFields } from '../content-types';
import { Entry } from 'contentful';

Next, inside the component’s class, define the following array to hold the fetched job listings:

jobListings: Entry<TypeJobListingFields>[] | undefined;

Next, inject the service via the component’s class as follows:

constructor(public contentService: ContentService) { }

Injecting the service makes it available to the component.

Then, define the following method for fetching the content:

getJobListings(){
  this.contentService.getJobListings()
  .subscribe({
     next: (entryCollection) => {
       this.jobListings = entryCollection.items;
       console.log(this.jobListings);
     }
 });
}

Then, call the previous method inside the ngOnInit() life-cycle method of the component:

ngOnInit(): void {
  this.getJobListings();
}

Life-cycle methods are methods that hook into key events of the component. You can find more information about them in this article.

In the same way, open the src/app/job-listing/job-listing.component.ts file and add the following imports:

import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { ContentService } from '../content.service';
import { TypeJobListingFields } from '../content-types';

Next, define the following property:

jobListing: TypeJobListingFields | null = null;

Next, inject the following services:

constructor(public contentService: ContentService, public route: ActivatedRoute) { }

The ActivatedRoute class provides information about the active route in the outlet.

Next, update the ngOnInit hook of the component as follows:

ngOnInit(): void {
  this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.contentService.getJobListingById(params.get('id') as string)
    )).subscribe({
     next: (entry) => {
       this.jobListing = entry.fields;
    }});
}

When the component is initialized, you get the job’s listing ID from the route using ParamMap with switchMap. Since your service method returns an observable, flatten the observable with the switchMap operator and subscribe to the resulting observable to get the fetched entry and assign it to the jobListing property.

The switchMap operator also cancels any previous ongoing requests. If the user navigates to the route with a different ID while the ContentService is still fetching the content, switchMap removes the previous request and returns the job listing for the current ID.

This code will generate the base list of all jobs, each with a link to a more descriptive page containing the full content.

3. Rendering the content

After that, the next step is to render the content in the component’s template. As our app will contain a list of components that contain a link to the full component description, we now have to construct the full components.

Open the src/app/job-listing/job-listing.component.html file and update it as follows. Be sure to remove the p tag!

Notice that under the How to apply section, you’re displaying the content of the howToApply field, yet you’re getting [object Object] displayed. That’s because this is a Rich Text field, a JSON format for handling complex content structures in a strongly typed manner in Contentful.

This is how the fields appear:

Contentful provides many tools to help you work with the Rich Text feature. Because you’re already installed the @contentful/rich-text-html-rendererpackage, it’s easy to display rich text fields via a documentToHtmlStringfunction.

Since you’re using Angular, you need to use the function with a custom pipe that you can apply to the field in the component’s template to display it correctly.

Go back to your command-line interface and run the following command to generate a pipe:

ng g pipe toHtml

Open the src/app/to-html.pipe.ts file and update it as follows:

import { Pipe, PipeTransform } from '@angular/core';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { Document } from '@contentful/rich-text-types';

@Pipe({
  name: 'toHtml'
})
export class ToHtmlPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return documentToHtmlString(value as Document);
  }
}

You can then go back to the joblisting.component.htmlfile and display the rich text field using the following code:

<div [innerHtml]="jobListing.fields.howToApply | toHtml"></div>

Since the result of applying our custom toHtml pipe to the howToApply field is HTML content, you need to bind to the innerHtml attribute to render it inside the <div>.

After applying the pipe, the field should look like this:

This is the final result with some example job listings:

Further functionality

While this is basic functionality, there are many more things that make Angular a great choice with Contentful. One of the primary benefits of Angular is the potential to develop apps that can be used on the web, native mobile, and desktop.

It offers a number of benefits in terms of both performance and productivity, using APIs including Web Workers and Angular Universal for server-side rendering.

Additionally, Angular also includes high-quality developer tools that simplify the process of developing full projects with multiple apps and libraries. It also comes with its own templatesyntax that extends HTML and may be enhanced with custom components.

Conclusion

This tutorial used Contentful as our Angular application’s backend for managing content on a job listing website. By working through this demonstration, you’ve seen how easy it is to build a full-stack application using Contentful and Angular.

Contentful enables you to accomplish more and separate your front end or view layer from managing content, making it simpler to interface the front end with the back. Additionally, you save time with Contentful because you only need to write and update content once for all the platforms that are integrated with your CMS.

Do you want to quickly and efficiently manage the contents of your Angular application, but don’t want to build a custom back end from scratch? Contentful is the solution you’re looking for.

Ruby on Rails tutorial: Getting started with Contentful

Luke Stahl — Fri, 16 Sep 2022 14:14:13 +0000

NOTE: This article originally appeared on the Contentful Blog

Ruby on Rails, often shortened to Rails, is a Ruby-based Model-View-Controller (MVC) framework for building production-ready web applications and services. Rails provides several out-of-the-box features, such as database migrations and ActiveRecord (ORM), to assist developers as they build applications in minimal time.

Rails shares several similarities with Django, a Python web development framework. However, unlike Django, Rails allows developers to build the controller-specific logic of their application. They also share the convention-over-configuration philosophy and provide standard practices for developers to follow.

Developers building applications with Rails will benefit from leveraging the existing functionalities of gems created by members of the Rails community. For an improved developer experience, Contentful provides several gems that make interacting with its API easier.

To demonstrate how Contentful integrates with Rails, this article will guide you through the process of building a demo job listing application that relies on Contentful for its data. All the sample code is stored on GitHub for reference.

Prerequisites

To follow this tutorial, it’s recommended that you have:

A Contentful account and access to Contentful UI. If you do not have one, create a free account with a free 60-day trial subscription.
The Ruby compiler and Ruby on Rails framework installed on your computer.
A basic familiarity with the Ruby programming language.

Preparing Contentful resources

The purpose of our job listing application is to display open job roles to job seekers. Each job listing contains several details, including the job title, description, location, and salary. To structure the data, we need to define these details on Contentful within a content model.

Using the Contentful UI, create a content model that models the fields within a job post. Each job post will be created as a data entry using this content model. For this tutorial, you will use the default Space created for every Contentful account.

Creating a Contentful content model

Once you’re logged into Contentful, click the Content Model item within the top navigation bar to navigate to the Content Editor page.

In the Create new content type model box, use “jobs” as the content model name, then provide your preferred description.

After saving the content model, use the + Add fields button to add the following fields:

A short text field type named title to store the job role within the job ad,
A rich text field type named description to describe the job being posted,
A short text field type named salary to store a salary range for the job role,
A short text field type named location to store the office address,
A boolean field type named remote to indicate whether the job is remote, and
A media field type named image to store a thumbnail of the job role.

Click the Save button to save the fields you have added to the content model.

With the content model saved, the next step is to add your first entry.

Adding data into the content model

Data entries for your defined content models are managed through the Content page on Contentful. For the jobs content model, we want to add some data entries to populate the Rails application.

Navigate to the Content page and create two entries in the jobs content model. Feel free to copy job details from the Contentful career page or use your preferred details.

Retrieving Contentful API credentials

Contentful provides the Content Delivery API (CDA) for developers to retrieve data stored within a Contentful space. To access the API, provide the access token associated with your Contentful space for authentication. Tokens for a Contentful space are managed on the Settings page within the Contentful UI.

Click the Settings item within the navigation bar to reveal a dropdown, then click A*PI Keys* to view all API keys for your Contentful space.

On the next page, click the Add API Key button on the right-hand side to create the first access token for the space.

Leave all fields within the API Key at their default values and record the Space ID and Content Delivery API - access token values in a secure text editor. In the following section, you’ll use these values while building the frontend of the Ruby project.

At this point, you have created a content model and obtained your Space ID alongside the associated access token. Let’s now build the Rails application to retrieve and display the two entries within the jobs content model.

Building the Ruby on Rails application

Within this tutorial, you will use Contentful as a View Helper to retrieve entries from your Contentful Space.

To begin, execute the two commands below to ensure you have Ruby and Rails installed on your computer.

ruby --version
rails --version

If you do not have Rails installed, you could either install it following the gem command below or walk through the GoRails installation guide to install Rails for your OS:

gem install rails

Next, generate a new application using the Rails CLI with the command below. The --css flag will instruct the Rails installer to use TailwindCSS for styling the application layouts.

rails new contentful-job-ads --css tailwind

This command will create several files and folders that make up the Rails application. You will do the most work within this app directory. The File/folder section of the Rails documentation explains the purpose of each file and directory.

Move into the generated Rails project directory and use bundle to install the two gems below. You’ll use these while building the application.

The Contentful gem for wrapping the Content Delivery and Preview APIs from Contentful. You’ll use the gem to access your content entries within Contentful from the Rails app.
The Rich_text_renderer gem for displaying the description Rich Text within the jobs content model.

cd contentful-job-ads

bundle add contentful rich_text_renderer

Using your preferred code editor, open the contentful-job-ads project to create and modify existing files in the next section.

Defining the application route

The Rails application is intended to display a list of all available jobs on the default page immediately after the opening application. To achieve this design, change the default route within the application from the Rails welcome page to a custom page.

Open the routes.rb file within the config directory and add the path below, which matches the jobs function within the root controller.

Rails.application.routes.draw do
 get '/', to: "root#jobs"
end

Next, use the Rails CLI to generate a controller named root for the path you defined above:

rails generate controller root

Creating a service object

Service objects are Plain Old Ruby Objects (PORO) created for specific functions. These are where developers keep specific business logic to avoid clogging up a controller with unrelated code.

By default, services aren’t included when you generate a Rails application. Create your first service manually with the following steps:

Create a services directory within the contentful-job-ads/app folder.
Create a job_service.rb file and add the code below to build the JobService class.

The JobService class below contains a constructor method that instantiates the Contentful client and stores the instance in a variable. You’ll use the contentful_jobs method to retrieve all entries within the jobs content model, then use the rich_renderer method to render the rich text for the job description.

Replace the CONTENT_SPACE_ACCESS_TOKEN and CONTENTFUL_SPACE_ID placeholders with the access token and space ID credentials you previously obtained from the Contentful UI. Optionally, you can access these credentials using environment variables to ensure they’re not leaked when the application code enters a public code repository like GitHub.

class JobService
  def initialize
    @client ||= Contentful::Client.new(
    access_token: "CONTENTFUL_SPACE_ACCESS_TOKEN",
    space: "CONTENTFUL_SPACE_ID",
    dynamic_entries: :auto,
    raise_errors: true
  )
  end

def rich_renderer
  @renderer = RichTextRenderer::Renderer.new
end

def contentful_jobs
  @client.entries(content_type: "jobs", include: 2)
end
  end

Next, open the contentful-job-ads/config/application.rb file and add the code below into the Application class to load the custom services directory.

config.eager_load_paths << Rails.root.join("app/services")

Creating application view

Create a jobs method within the root controller to instantiate the additional JobsService class. The root controller resides in the app/controllers/root_controller.rb file.

def jobs
    @job_instance = JobService.new
end

Then, create a jobs.html.erb file within the app/views/root folder for the Rails application to render as its default page.

Add the code below to the jobs.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title>All Jobs</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
  <% jobs = @job_instance.contentful_jobs %>
</head>
  <body>
    <div style="width: 80rem;" >
    <nav class="flex flex-col items-center align-center" >
    <div>
    <p class="text-center text-4xl font-semibold" > Work With Us At Contentful! </p>
          <br />
    <p class="text-center text-lg" >
    Together, let's <strong> deliver </strong> the best CMS experience <br /> that  <strong> developers</strong> and digital  <strong> products</strong> can get!
    </p>
    </div>
    </nav>

  <br />
  <br />

<section>
  <div class="flex flex-row justify-between" >
  <div>
  <h1 class="pb-2 text-xl font-semibold" > All Open Roles </h1>
  </div>
  </div>
  <hr />
</section>
<br />

<section>
  <ul>
  <% jobs.each do |product| %>
  <li class="mb-12 pb-2 shadow-xl rounded-lg">
  <div>
  <div class="m-4 flex flex-row justify-between" >
  <div class="flex" >
  <div class="flex items-center  border-2 border-gray-600 mr-3 h-20 w-24 rounded-xl" >
  <img alt="<%= product.title %>" src="https:<%= product.image.url%>" />
    </div>

<div class="mt-2" >
  <p class="font-semibold text-lg mb-2" >
  <%= product.title %>
  </p>

<div class="pt-1 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Engineering</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><%= product.salary %></span>
  </div>
  </div>
  </div>

<div class="flex items-center" >
  <div class="text-right" >
  <p > <%= product.location %></p>
  <p > Posted On: <%= product.created_at.strftime("%B %d %Y") %></p>
  </div>
  </div>
  </div>
<hr />
<div class="m-4" >
  <%= @job_instance.rich_renderer.render(product.description).html_safe  %>
  </div>
  </div>

  </li>
    <% end %>
    </ul>
    </section>
  </div>
</body>
</html>

To confirm that the application is working, you will start the Rails server to view the application you have built so far.

Launch a separate terminal window and execute the watch command below to generate the TailwindCSS classes used in the jobs.html.erb file.

rails tailwindcss:watch

Next, in your existing terminal window, run the command below to start the rails server:

rails server

Note: Alternatively, you can install Foreman on your computer and execute the ./bin/dev command to simultaneously generate the TailwindCSS classes and also run the Rails server in a single terminal.

Using your web browser, navigate to the index page of the running Rails application at local:host3000. You will see the following:

Further functionality

Rails provides other features to extend the basic functionality of the job listing application that we’ve built.

One notable Rails feature is Active Record, which allows developers to design the model layer of an application. Contentful’s contentful_model gem allows you to associate your Rails models with content models.

Conclusion

Congratulations on building a job listing application that retrieves and displays job entries from a Contentful Space! To build the application, you successfully followed the Contentful as a View Helper approach by creating the Contentful client within a Service Object.

Are you interested in building a related project using Contentful? Create a free Contentful account and begin designing your content model!

What is TypeScript and why should you use it?

Harshil Agrawal — Thu, 01 Sep 2022 10:04:30 +0000

NOTE: This article originally appeared on the Contentful Blog

I’ve been learning and using TypeScript for the past year for various projects, and I have been enjoying it. TypeScript provides a great developer experience, and I believe that it has increased my productivity. I don’t have to manually check for errors every time a change gets made, and the inline documentation helps me ship faster. In this article, I will give you an overview of TypeScript, share some of its features, and help you get started.

Before learning about TypeScript, let’s take a step back and revisit JavaScript. Since the earliest days of the World Wide Web, JavaScript has been used to make websites interactive – handle mouse and keyboard events, validate forms, and so on. With time, the language evolved. You can now use JavaScript to build websites and apps for any platform. It can be used to code both the frontend and backend of your website/app. You can build cross-platform apps using React Native and desktop apps with Electron, and you can even use JavaScript for your next IoT project!

With these extensive use cases, the complexity in the codebase increased. For smaller projects, using JavaScript is still fine. However, for larger projects, it became difficult to debug the code and catch errors.

What is the difference between TypeScript and JavaScript?

TypeScript is a superset of JavaScript. It means that TypeScript provides all the features and functionalities of JavaScript with some added features. TypeScript compiles to JavaScript, which the browser understands. TypeScript provides “type safety” (hence the name!) to JavaScript. It was created by Microsoft and is open source. If you’re interested in contributing or just going through the source code, you can find the repository on GitHub.

To understand type safety, consider an example where you define a variable name. In JavaScript, you would use a similar code as below:

var name = "Harshil"

Since this is a variable name and we haven’t defined its type, this variable can have any value. It doesn’t matter if it’s a string, number, boolean, or object. Hence, the below code will execute without errors:

name = 17

name = false

name = {
first: "Harshi",
last: "Agrawal:
}

Using TypeScript, you can define the type string for the variable name, as below:

var name :string = "Harshil"

If you change its value to any other type, the compiler returns an error. Type safety saves a lot of debugging time and helps in keeping the code consistent.

Features of TypeScript

TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects. Moreover, TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc. Explaining all the features is out of the scope of this article. However, I will present two that I find useful.

Interface

You receive an object when you call any Contentful API. This object response contains the necessary data that you need. Similar to the Contentful API, other APIs also send an object as a response.

Interfaces get used to ensure that the object contains the required data with the correct data type. This object can be a response or request body or parameters for a function.

An interface has the following syntax:

interface interfaceName {
    variableOne: type;
    variableTwo: type;
}

Using the above syntax, we can create an interface Profile with the properties name and social.

interface Profile {
    name: string;
    social: string;
}

The above interface can be used as follow:

function hello (params: Profile) {
    return "Find " + params.name + " here " + params.social
}

The above is a simple example of interfaces. There are various other functionalities that interfaces provide. You can set optional properties, extend interfaces to add new properties, and more. To learn more about interfaces, refer to the TypeScript documentation.

Literal Types

Another feature that I find useful is Literal Types. Though, by themselves, they’re not so useful. But one can combine them into unions, which makes the Literal Types useful.

The following example demonstrates the syntax of Literal Types.

let social: "twitter" = "harshil1712"

Here, the variable social has the type “twitter.” However, this isn’t useful on its own.

function greet(message: string, name: "Alice" | "Bob" ){
    //...
}
greet("Hello", "Alice" );
greet("Hey", "Bob");
greet("Hey", "Max"); // Argument of type '"Max"' is not assignable to parameter of type '"Alice" | "Bob"'.

In the above function, the second parameter can only take values that have the type of either “Alice” or “Bob.” This helps us in writing functions that only accept a certain set of known values. They can do much more with Literal Types. Read the official documentation to learn more.

How to use TypeScript?

Now that you have a basic understanding of what TypeScript is, in this section, you will learn how to use TypeScript.

Browsers don’t understand TypeScript. They understand JavaScript code. Hence, the TypeScript code needs to get compiled into JavaScript, and for that, you need the TypeScript compiler.

You can install TypeScript globally using the following npm command. The global installation allows you to run the tsc command anywhere from your terminal.

npm install -g typescript

Once you have installed TypeScript, create an index.ts file and add the following code:

let message:string = "Hello, World!"

function greeting () {
    console.log(message);
}

greeting()

The above code declares a variable message and creates a function that logs the message to the console. To run this code, you have to compile it to JavaScript. Run the following command:

tsc index.ts

You’ll observe that the compiler creates an index.js file with the compiled code.

The TypeScript compiler is flexible and allows you to configure options like the target JavaScript version. At the time of writing this article, the default target is es3.

To configure the compiler options, you can either pass them with the CLI command or create a tsconfig.json. You can learn more about the various configuration options on the TSConfig Reference documentation page.

If you want to use TypeScript in your next Contentful project, we released contentful.js v10 in Beta with enhanced TypeScript support. Check out the changelog and let us know what you think!

Advantages of using TypeScript

TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include:

Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable, declared with no type may be inferred by TypeScript based on its value.
Object oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc.
Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime.
Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors.
Use existing packages – You might want to use an npm package that is written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project. You can learn more about it here.

What is the best way to learn TypeScript?

TypeScript comes with tons of features, and learning and implementing them all together might get overwhelming. I started learning TypeScript by refactoring my JavaScript codebase to TypeScript one line at a time. This helped me to migrate my codebase to TypeScript with minimal effort and helped me dive deeper into the concepts.

The TypeScript Handbook is a great place to learn about TypeScript. It explains the concepts well and contains relevant examples. The handbook is also regularly updated with new features.

There are also tutorials available that will help you with migrating your JavaScript project to TypeScript or help you learn about DOM manipulation in TypeScript.

The Contentful community members have also created apps and tools that can help generate type declarations for your content types and sync TypeScript with your content model.

If you’re looking for your next TypeScript project, why don’t you create an app for your Contentful space with App Framework? The boilerplate is available in TypeScript, where you can learn or brush up your TypeScript knowledge. Happy type checking!

The ultimate guide to Contentful webhooks

Luke Stahl — Tue, 30 Aug 2022 18:36:16 +0000

NOTE: This article originally appeared on the Contentful Blog

As web applications remain an integral and potent driving force of the digital age, developers, stakeholders, and end users can choose from a plethora of the newest technologies to support their applications. One of these tools is the webhook, which virtually any web app can integrate to create dynamic and responsive content.

What are webhooks?

Webhooks are a unidirectional mechanism that applications can use to talk to each other when a particular event occurs. Think of a webhook as an automated, one-way communication from one application to another. The first application sends the information to the receiver without waiting for a response. Then, it relies on the receiver to process this information.

For example, you might use a content management system (CMS) platform to serve as a data source for your application. Ideally, when you update fields of the CMS and publish them, you want your application to know to look for these updates automatically. So, your CMS triggers a webhook that rebuilds the application to mirror the CMS.

The one-way nature of webhooks differentiates them from many other communication systems, such as APIs. Though webhooks serve much of the same purpose as APIs, they’re less resource intensive and more efficient when you need to feed information somewhere asynchronously.

APIs require both a request and a response, adding latency and possibly resulting in the need to poll for data with constant checks. In contrast, using webhooks eliminates the need to constantly check for new data. Instead, whenever a specific event occurs, the webhook automatically notifies you. Also, the one-way nature of webhooks enables multiple locations to receive the transmitted information simultaneously.

The use cases for webhooks primarily depend on what you want to achieve with your application. There are several ways you can use webhooks creatively to meet your goals. For example, with webhooks, you can listen for database changes for a user’s profile completion and then send an email to the user with welcome information, next steps, and so on. Additionally, you can integrate applications — such as Jira, Bitbucket, or a calendar application — with your messaging platform to enable receiving real-time updates.

Now that you’re more familiar with the general idea behind webhooks, let’s explore how you can gain even more function and flexibility with Contentful webhooks.

How Contentful webhooks work

The one-way communication webhooks provide is ideal for a system like Contentful. Contentful webhooks enable updates to flow in real time, as any change occurring within the system can trigger a webhook. The webhook then sends information about these changes or updates to any number of systems.

This low-latency architecture provides much faster communication than a similar API-driven system, ensuring that any change to content within the system is immediately reflected in all connected systems.

Most Contentful webhooks are triggered when either a data, content model, or content state undergoes a change. As a result, any sites or apps listening for that webhook then immediately know they need to update. These functionalities provide the possibility of triggering a chat event, an update event for users, or the rebuilding of your Next.js or Gatsby static website.

Contentful webhooks can be divided into five type categories: ContentType, Entry, Asset, Task, and Release. Moreover, each type supports a variety of actions. For example, for an Entry webhook, Contentful supports all potential actions: create, save, auto_save, archive, unarchive, publish, unpublish, and delete.

The table below displays the capabilities of each webhook type:

In addition to the types mentioned in the table, Contentful also offers some proprietary webhooks for release actions, bulk actions, and scheduled actions. Let’s explore each one of these and how you can use them.

Release and release actions

To understand release actions, you first need to understand a release. A release is a field or tool that you can assign to your content. A primary application for a release might be to mass publish or unpublish the contents from your CMS. For example, if your ecommerce business is having a sales event and you want to publish all the spotlighted sale items, you can create and add the release to these items, then use it to publish and unpublish them.

Release action webhooks can then listen for the release event — in this case, the publish and unpublish activities. Contentful supports two types of release actions: create and execute. The release action webhook is primarily designed to act on another action. For example, once you have published the release, you might want to listen for the release action webhooks. After successful execution, you might want to initiate a new website build to fetch data more efficiently.

Bulk actions

Bulk actions can be especially useful when the data your application displays to the end user is constantly changing, and your headless application needs to consistently remain updated to provide the best user experience. Similar to release action webhooks, Contentful supports create and execute actions with this bulk action webhook.

Returning to the example of the hypothetical ecommerce site, assume you intend to provide discounts on certain products according to the day. For this situation, you can create bulk actions that publish new products at the end of each day and unpublish the previous day’s discounted items.

By listening to bulk action webhooks, you are able to know precisely when the bulk action executes, and can then trigger a build accordingly. Therefore, this type of webhook is extremely beneficial for any site that displays frequently updated dynamic content.

Scheduled actions

Unlike bulk action and release action webhooks, scheduled actions expose webhooks for the create, save, execute, and delete event types. These webhooks can be beneficial for performing such steps as creating a build or running a search after setting up a scheduled action for your content.

Implementing webhooks

In this section, we’ll explain how to implement Contentful webhooks using both the Contentful dashboard and the Contentful API.

Using the Contentful dashboard

Contentful’s dashboard interface makes it easy to create webhooks, regardless of your level of expertise.

Begin by logging into your account. Then, once you’re in the Space, click on the Settings dropdown on the upper navigation bar, as shown below:

After expanding the Settings dropdown, select Webhooks to navigate to the Webhooks dashboard.

In the Webhooks dashboard, you’ll see a list of already created Webhooks (if you have any), a button labeled + Add Webhook toward the upper-right corner of the page, and a right-hand panel that displays another helpful Contentful feature: a selection of several Webhook template options. These templates provide a user-friendly way to create webhooks for your continuous integration/continuous deployment (CI/CD) integrations.

For now, click the + Add Webhook button to open the form, as shown below.

The form requires a name and URL for the webhook. Additionally, unless selected specifically, the created webhooks trigger all the events.

Click the radio button next to Select specific triggering events to see the checkbox selections for the events and types that you want this webhook to listen to. The disabled checkboxes represent the events that Contentful does not support for the given action type.

Then, after moving past the Triggers section, there’s an option to add filters to the webhook. It offers a variety of selections to compare, such as Environment ID, Content Type ID, Entity ID, User ID(created by), User ID (updated by), and logical comparisons using equal, not equal, in, not in, regexp, and not regexp. Additionally, note that you can have more than one filter per webhook, which helps you to have sophisticated conditions.

After the Filters, you have the ability to set the Headers, Content type, Content length, and Payload.

The Payload functionality provides the ability to alter the webhooks format to match your application’s structure. This can save considerable time.

After filling in the necessary details, click Save. You’ve now created a webhook that you can view in the Webhooks dashboard.

You now know how to create a webhook and add a filter using the Contentful graphical user interface (GUI). In the next section, you’ll use Contentful’s API to do the same.

Using the Contentful API to create the webhooks

Contentful also offers the API routes to create and configure the webhooks. But, before you continue using the APIs to retrieve the webhooks, ensure that you have the API key you need to authorize.

You’ll start by fetching the list of existing webhooks. You can get the webhook you created using the GUI by executing a curl request. The only things that you’ll need are the SPACE_ID and API_KEY. The curl request should appear as follows:

curl -X GET "https://api.contentful.com/spaces/<SPACE_ID>/webhook_definitions"
-H "Authorization: Bearer <API_KEY>"
-H "Content-Type: application/vnd.contentful.management.v1+json"

Importing that request into Postman and pressing the Send button yields the previously created webhook with all the information, including the name, URL, space, filters, and headers.

Similarly, you can use the API to create the webhook. To create a webhook via the API, you’ll need the SPACE_ID and API_KEY. Here’s how a basic curl request looks:

curl -X POST "https://api.contentful.com/spaces/<SPACE_ID>/webhook_definitions"
  -d '{"url": "<URL>", "name": "WEBHOOK_NAME", "topics": ["*.*"], , "filters": []}'
  -H 'Authorization: Bearer <API_KEY>'
  -H 'Content-Type: application/vnd.contentful.management.v1+json'

It accepts the four items as a part of the body of the API call, which includes URL, name, topics as an array of topics, and filters as an array of filters.

Topics relate to what kind of changes you want to subscribe to (see the table at the beginning of the article). If you want to subscribe to all the actions across multiple types, you can use ..

Similar to types and events, filters can also be passed in as a JSON object to the body of the API call to create the webhook. Check out what kind of filter constraints the API provides by reviewing the official documentation.

So, if you want a filter similar to the one you created using the GUI, you’ll need to pass the following filters object in the JSON body, like this:

 "filters": [
    {
      "in": [
        {
          "doc": "sys.environment.sys.id"
        },
        [
          "master"
        ]
      ]
    }
  ]

It’s also possible to add multiple logical conditions to behave like a logical “AND”:

"filters": [
    {
      "in": [
        {
          "doc": "sys.environment.sys.id"
        },
        [
          "master",
        ]
      ]
    },
    {
      "equals": [
        {
          "doc": "sys.id"
        },
        "146353"
      ]
    }
  ]

With the following information in mind, you can use the API with Postman.

The following JSON object was passed to create a similar webhook as what you made using the GUI:

{
    "url": "https://www.example-app.com/api/update",
    "name": "Trigger Build API",
    "topics": [
        "*.*"
    ],
    "filters": [
        {
            "in": [
                {
                    "doc": "sys.environment.sys.id"
                },
                [
                    "master"
                ]
            ]
        }
    ]
}

After the successful request, you should get a similar response from the API:

Wrapping up

Contentful’s wide variety of webhooks can be largely beneficial for doing various tasks, such as building a static website after a set of actions, running a script to generate index files for the search, and sending a notification to the stakeholders after completion of scheduled or bulk actions.

Contentful also offers two ways to create webhooks using the API and GUI, providing a balance of flexibility and function. Sign up for a free Contentful account and see how our market-leading content platform can support your project or business.

A hands-on tutorial for using Contentful with Vue

Luke Stahl — Thu, 18 Aug 2022 15:43:00 +0000

NOTE: This article originally appeared on the Contentful Blog

An advantage of using a headless CMS is that it allows you to have a single data source. You can use Contentful’s REST APIs to serve content to multiple devices, such as web, mobile, and IoT devices, or different tech stacks on the client side.

Contentful is an integrated, API-first content platform that enables you to create and deliver engaging digital experiences quickly and efficiently.

This article demonstrates how to set up a project on Contentful, create a space, add data, and publish this data. Then, it goes through how to pull the data and display it on your web app using Vue.

Vue is a frontend framework that allows you to implement web applications while improving scalability quickly. It abstracts low-level functionalities, letting you manage and display data properly. It also allows you to reuse code using components, meaning you can reuse a user interface without repeating code.

In this demo, you’ll use the Content Delivery API to get ecommerce data and display it within a reusable Vue component. Specifically, you’ll build an ecommerce store that allows you to select and display bags and add them to a cart. You can view the complete project code on GitHub.

Getting started

To get started, create your free Contentful account.

When you sign up, you’ll automatically get your first space. You can think of a space as a project within Contentful. For this tutorial, you can either rename the space that was created automatically or create a new one.

Next, create a content model and content type. Consult the beginner’s guide to Contentful for step-by-step instructions.

Your content type needs a name that describes your collective data entries. Since this demo is an ecommerce store for bags, name the content type “Bags.”

Next, create fields in your content model. For your bag store, you need three fields: Title, ImageUrl, and Description. Be sure that the imageUrl points to a valid image or else the display will not work properly.

Click + AddField and add a new field.

Now, click the Content tab and add some example entries using these fields. Make sure to publish each entry once you add it.

For example, below is a listing for a brown messenger handbag, including a title, description, and URL.

After a few entries have been added and published, you’ll be ready to pull your data from a RESTful API.

Using Contentful’s Content Delivery API

Contentful makes it possible to access your data using the Content Delivery API. This REST API allows you to access the data in your space through a single request. Contentful provides a GraphQL endpoint, but this demo will focus on the REST API.

Now that you’ve added all your data to the dashboard, you can pull the data into your Vue application using the Content Delivery API. To proceed, make sure you have the following:

Space ID — This is a unique ID associated with each space.
Content Delivery API access token — This is a token used when interacting with the Content Delivery API.

You can find both by clicking Settings in the top-right of the dashboard and selecting API Keys.

Add the following endpoint on Postman, and it will return all our field entries:

https://cdn.contentful.com/spaces/{SPACE_ID}/environments/master/entries?access_token={ACCESS_TOKEN}

Your data is now returned from Contentful’s endpoint. Your next task is setting up your Vue code and pulling the data.

Installing Vue CLI

To initiate your Vue app, you need to install Vue CLI globally on your machine. If you already have it installed, you can skip this step.

npm install -g @vue/cli

Once it’s installed, you’ll use Vue CLI to initiate your project. Initiate a new project using this command in your terminal:

vue create vue-ecommerce-site

Within your terminal, you’ll have to manually select your preferred options for your project until the appropriate Vue boilerplate code is ready. Please select Vue 2, as that is what this tutorial is based upon. We suggest you deselect both Babel and Linter, as they can cause complications. Proceed with the installation. Once the installation is completed, you can navigate to your project’s folder:

cd vue-ecommerce-site

Now, let’s install vue-router. Please install the following version:

npm i vue-router@3.5.4

Also, install axios. You’ll use this popular HTTP client to make your API request to Contentful:

npm i axios

Then, start the server:

npm run serve

It should fire up your project, and you should see this in the browser:

Go into the components folder and create two new components called ContentfulComponent.vue and CartComponent.vue.

ContentfulComponent.vue displays the list of bags, while CartComponent.vue will display our cart.

Now, let’s make use of our vue-router. Create a router folder inside our src and within the router, we can now add index.js.

import VueRouter from 'vue-router'
import ContentfulComponent from '../components/ContentfulComponent.vue'
import CartComponent from '../components/CartComponent.vue';
import Vue from "vue";

Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'ContentfulComponent',
    component: ContentfulComponent
  },
  {
    path: '/cart',
    name: 'CartComponent',
    component: CartComponent
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})
export default router

Now, go into your main.js and import the router.

import Vue from "vue"
import App from "./App.vue"
import router from "./router/index"

Vue.config.productionTip = false

new Vue({
  router,
render: h => h(App)
}).$mount("#app");

Then, go into your App.vue file, which is automatically created in the boilerplate, and import the component for use. Do not remove the styling.

<template>
  <div id="app">
    <h3>Bags Store</h3>
    <img
      alt="E-commerce logo"
      src="https://photo-cdn2.icons8.com/cfD33FbEpD4Srs0gXnuRWXFlet6KXB0dnU-YHbZTVzU/rs:fit:715:1072/czM6Ly9pY29uczgu/bW9vc2UtcHJvZC5h/c3NldHMvYXNzZXRz/L3NhdGEvb3JpZ2lu/YWwvMS9lY2JjNzFj/YS00NjU2LTRjNWIt/OTM1MC0wMTBlMTI4/N2I4ODYuanBn.jpg"
      width="25%"
    />
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
};
</script>

Now, go into the ContentfulComponent.vue file and implement your data. First, declare the theBags array under data:

data() {
  return {
    theBags: []
  }
}

Next, add a new function called getBags under methods:

methods: {
    getBags() {
      axios
        .get(
          "https://cdn.contentful.com/spaces/{SPACE_ID}/environments/master/entries?access_token={ACCESS_TOKEN}"
        )
        .then((res) => {
          console.log(res.data.items);
          this.theBags = res.data.items;
        });
    },
  },

This pulls your data and assigns it to the theBags array you’ve declared earlier. You need to import axios using the following command:

import axios from "axios";

Finally, to fully implement your business logic, you’ll add a mounted lifecycle that executes on load. Add this.getBags(); so it can trigger the function once the page loads.

mounted() {
    this.getBags();
},

Within the , you’ll loop over the theBags array and display its elements.

<template> 
  <div> 
    <div v-if="theBags"> 
      <div :key="bag.fields.title" v-for="bag in theBags"> 
        <div class="indi__item"> 
          <img class="indi__img" :src="bag.fields.imageUrl" /> 
          <h3>{{ bag.fields.title }}</h3> 
          <h3>Description: {{ bag.fields.description }}</h3> 
        </div> 
      </div> 
    </div> 
  </div> 
</template>

Find the full code for the component below. Be sure to add your own space ID and Content Delivery API access token.

<template> 
  <div> 
    <router-link to="/cart"><h3>Open Cart</h3></router-link>
    <div v-if="theBags"> 
      <div :key="bag.fields.title" v-for="bag in theBags"> 
        <div class="indi__item"> 
          <img class="indi__img" :src="bag.fields.imageUrl" /> 
          <h3>{{ bag.fields.title }}</h3> 
          <h3>Description: {{ bag.fields.description }}</h3> 
        </div> 
      </div> 
    </div> 
  </div> 
</template> 
<script> 
import axios from "axios"; 

export default { 
  name: "ContentfulComponent", 
  data() { 
    return { 
      theBags: [], 
    }; 
  }, 
  methods: { 
    getBags() { 
      axios 
        .get( 
          "https://cdn.contentful.com/spaces/{SPACE_ID}/environments/master/entries?access_token={ACCESS_TOKEN}" 
        ) 
        .then((res) => { 
          console.log(res.data.items); 
          this.theBags = res.data.items; 
        }); 
    }, 
  }, 
  mounted() { 
    this.getBags(); 
  }, 
}; 
</script>

You can also add the following styling:

<style>
.indi__item {
  border: 1px solid black;
  margin-bottom: 2rem;
  padding: 0.5rem;
  display: grid;
  justify-items: center;
}
.indi__img {
  height: 16rem;
  margin-bottom: 1rem;
}
</style>

And here’s what this code looks like in action:

Letting shoppers add items to their cart

Next, you’ll create a cart feature for your online bag store. This lets your shoppers select the bags they need and add them to their cart.

Return to your ContentfulComponent.vue file and add a new method under methods called addToCart.

Add the code below to this method. With this code, you create a cart item in local storage, allowing your application to store the specific item you want to save to the cart. Then, to enhance user experience, you add an alert to notify users when they have successfully added an item to the cart.

addToCart(item) { 
      if (!localStorage.getItem("cart")) { 
        localStorage.setItem("cart", JSON.stringify([])); 
      } 
      //console.log(item); 
      let cartItems = []; 
      cartItems = JSON.parse(localStorage.getItem("cart")) || []; 

      localStorage.getItem("cart"); 
      cartItems.push(item); 
      console.log(cartItems); 

      localStorage.setItem("cart", JSON.stringify(cartItems)); 
      alert("added to cart"); 
},

You also need to add a button to trigger this addToCart function. You’ll add this to the "indiitem" class under :

<div class="indi__item"> 
  <img class="indi__img" :src="bag.fields.imageUrl" /> 
  <h3>{{ bag.fields.title }}</h3> 
  <h3>Description: {{ bag.fields.description }}</h3> 
  <button @click="addToCart(bag.fields)">Add to cart</button> 
</div>

Here’s what your demo now looks like:

Creating the cart component

Now that you’ve added the option to add an item to the cart, you need to give shoppers access to view their carts. So, it’s time to create a cart component that displays all the items in a shopper’s cart.

This component will loop through the cart’s local storage and display the cart list. Plus, users can remove individual items they don’t want from their cart.

To build the cart component, add a script tag, where you’ll add an empty cart array into data.

 data() {
    return {
      cart: [],
    };
  },

Next, add a method that gets your cart from the local storage and assigns it to the cart array above:

methods: { 
    getCart() { 
      if (!localStorage.getItem("cart")) { 
        localStorage.setItem("cart", JSON.stringify([])); 
      } 
      this.cart = JSON.parse(localStorage.getItem("cart")); 
    }, 
  },

Then, add a beforeMount lifecycle to trigger the getCart method on load.

beforeMount() { 
    this.getCart(); 
  },

The final method you need to add is the removeFromCart method, which allows you to remove a particular item from the cart array in the local storage. It receives the imageUrl from the item and uses findIndex() to return the index of that specific item in the array. Then, it uses that index to remove the item from the array using splice() and saves the updated array in the local storage cart item.

methods: { 
removeFromCart(itemImage) { 
    const cartItems = JSON.parse(localStorage.getItem("cart")); 
    const index = cartItems.findIndex(({ imageUrl }) => imageUrl === itemImage); 
    cartItems.splice(index, 1); 
    localStorage.setItem("cart", JSON.stringify(cartItems)); 
    this.cart = JSON.parse(localStorage.getItem("cart")); 
   }, 
}

Your template now looks like this:

<template> 
  <div> 
    <h1>Cart</h1> 
    <div v-for="item of cart" :key="item.id"> 
      <div class="indi__item"> 
        <p>{{ item.name }}</p> 
        <img class="indi__img" :src="item.imageUrl" /> 
        <button @click="removeFromCart(item.imageUrl)">remove from cart</button> 
      </div> 
    </div> 
    <router-link to="/"><h3>Back to store</h3></router-link> 
  </div> 
</template>

This code loops through the cart array and displays individual items. For each item, there is a button that can be used to remove the item by firing removeFromCart.

Here’s the full component code:

<template> 
  <div> 
    <h1>Cart</h1> 
    <div v-for="item of cart" :key="item.id"> 
      <div class="indi__item"> 
        <p>{{ item.name }}</p> 
        <img class="indi__img" :src="item.imageUrl" /> 
        <button @click="removeFromCart(item.imageUrl)">Remove from cart</button> 
      </div> 
    </div> 
    <router-link to="/"><h3>Back to store</h3></router-link> 
  </div> 
</template> 

<script> 
export default { 
  name: "CartComponent", 
  data() { 
    return { 
      cart: [], 
    }; 
  }, 
  methods: { 
    removeFromCart(itemId) { 
      const cartItems = JSON.parse(localStorage.getItem("cart")); 
      const index = cartItems.findIndex(({ imageUrl }) => imageUrl === itemId); 
      cartItems.splice(index, 1); 
      localStorage.setItem("cart", JSON.stringify(cartItems)); 
      this.cart = JSON.parse(localStorage.getItem("cart")); 
    }, 
    getCart() { 
      if (!localStorage.getItem("cart")) { 
        localStorage.setItem("cart", JSON.stringify([])); 
      } 
      this.cart = JSON.parse(localStorage.getItem("cart")); 
    }, 
  }, 
  beforeMount() { 
    this.getCart(); 
  }, 
}; 
</script>

And, here’s your cart:

Wrapping up

Using a bag ecommerce store as an example, this tutorial explored how to add data to Contentful and display it in a Vue application. You can find all the relevant code in this repo on GitHub.

A key advantage of building an Vue app using Contentful is that you’ll be working alongside an active community of avid users. So, if you come across any challenges, you can join the Contentful Community to seek help from fellow developers.

To expand on everything you’ve learned in this tutorial, start building with Contentful for free today — no credit card required.

What's a framework? All about software frameworks

Luke Stahl — Tue, 16 Aug 2022 14:55:00 +0000

NOTE: This article originally appeared on the Contentful Blog

As a programmer, you know that web development and software development can be complex work. A framework can make your job easier, and save you the trouble of writing your code totally from scratch. The right framework can also reduce your development time by making it faster to design and troubleshoot.

What is a framework?

A framework is a boilerplate that facilitates development by offering infrastructure that you can build your own code on top of. Or, you can think of it as a template that provides pre-coded and reusable functions to facilitate software development.

That all sounds very abstract, so here’s a quick example to make things more concrete: Let’s say you’re a frontend developer taking on a full-stack development project. You might use one of the many popular backend frameworks that provide server-side functionality you need, then add your custom code for the frontend.

Most programming languages have at least one associated framework, if not more. JavaScript frameworks include Vue and Angular, Ruby has Ruby on Rails, Python has Django, and so on. The contents of a framework can vary broadly depending on the framework, its language, and its purpose.

In most cases, popular frameworks are open source and maintained by a community of developers. For example, Vercel makes Next.js because it speeds up app development, and makes it simpler for developers to use their service.

Why do we use frameworks?

In short, frameworks make development much simpler for you and your team. Since some of the code is already written and tested, a framework can speed up the development process, improve security, reduce the risk of errors, and a whole lot more.

For more in-depth information about what frameworks can do for you, see “What are the benefits of frameworks?” below.

Types of frameworks

As you might guess, frameworks can be used for a variety of development projects. You can find frameworks for software development, web development, working with APIs, and even doing data science work.

But here are the types that you’ll come across most often and a few popular examples of each. Note that some frameworks can extend across categories.

Front-end frameworks

These web-application frameworks are used for the development of the front end (visible portions) of a web application, such as layout and design.

Angular: An open-sourceJavaScript framework for developing single-page applications.
Vue: An open-sourceJavaScript framework for building user interfaces and single-page applications.

Back-end frameworks

These frameworks are used for the development of the backend of web apps, or the components that handle server-side functionality.

Ruby on Rails: A Ruby-based, server-side framework for developing web applications.
Django: A high-level Python framework for web development.
Express: A node.js framework for developing web and mobile applications.

Mobile development frameworks

Used to assist in the development of mobile applications for Android, iOS, and more — or even cross-platform applications that rely on the same codebase.

React Native: An open-source UI framework maintained by Meta (Facebook) for developing cross-platform mobile apps on Android, iOS, Android TV, MacOS, and more.
Flutter: An open-source UI framework maintained by Google. Can be used to develop mobile apps for developing cross-platform mobile apps.

Software framework vs code library

If you’re having trouble telling the difference between a framework and a code library, don’t worry, you’re not alone. This distinction confuses many seasoned programmers.

Contentful’s Senior Software Engineer David Fateh explained the two terms by comparing development to the process of building a house. A framework, he says, is like a construction blueprint: A template that defines a basic structure for your build. A code library is more like a carpenter’s tool belt: It has tools designed to perform specific tasks.

Developer Advocate Alvin Bryan offers a real-world example to drive the point home: Unity and Unreal are both frameworks for developing games. They both use different programming languages, one uses C++ and the other uses C#. But they might use the same library for the task of managing and controlling sound. That means they both call that library to perform a specific task.

To get a bit more technical, the distinction between a framework and a coding library can be explained by a concept called inversion of control. When you use a library, your code calls the library to perform a specific task, for a specific outcome. When you use a framework, it calls your code.

What are the benefits of a framework?

Frameworks offer a skeleton to build on so that programmers don’t have to start from scratch when building software or web applications. In short, it will reduce your software or web development costs and reduce your development time.

You can focus on one area of development: If you’re a full-stack developer and you have a knack for backend development, you can use a framework to cover the frontend functionality. Now you can focus on what you’re best at.
Improved productivity: You or your company can use a framework to cover reusable generic functions. This saves programmers from writing code for the parts of the software or web application that don’t change from project to project. On top of that, as you learn a framework for a language like Java, you can get even faster at development — and this will improve your productivity even further.
Easier testing: Frameworks can help you eliminate problems faster when you begin troubleshooting. If you’re using a reputable frontend framework, for instance, you can be sure that it’s working properly and focus your troubleshooting on the backend.
Speed: When you develop an application from scratch, your code for certain functionality might be less than perfectly optimized. (We all know deadlines can be tight.) When you use a framework for that same functionality, you are using code that has been developed and continuously reworked to provide the highest possible speed. In short: frameworks can make your apps much faster.
Reliability: A framework is maintained by developers who will test the code rigorously to ensure top-notch reliability. They’ll also ensure that it meets changing requirements so you don’t get caught with a web application that suddenly doesn’t work.
Documentation: Good frameworks come with extensive documentation and community support. That is a big reason to use a framework, where you have regularly updated resources for reference, and other people to learn from and share experiences with.
Better security: Whether your framework is maintained by a company like Meta or Microsoft, or a community of programmers, you can trust that it has been tested and re-tested to address the security vulnerabilities of the programming language.

What are the challenges of a framework?

Frameworks are great for many kinds of software and web development, but they’re not perfect. Here are some potential challenges to keep in mind as you explore the possibility of using a framework.

You need to learn the framework, and language: A framework can help speed up development for a programmer, but they aren’t simply plug-and-play tools. You’ll need to learn the framework itself — and know the programming language the framework is based on. For example, if you like the idea of using Django, you’ll also need to know Python to make it work.
Structural limitations: Even the most advanced frameworks aren’t designed to do everything. They’re designed for a specific purpose — such as offering a specific set of backend functionality. That makes them less useful for other tasks.
There are a lot of them: Frameworks are popular these days, and it can be difficult to choose the right one. You’ll need to be careful to find one that works best for your application, and stick with it to get the most out of it.

How do you pick the right framework?

If you are a programmer at a company, they will likely have a set of frameworks they like to use for various backend, frontend, and web development projects. Or, if you plan to work with a service like Contentful, they will likely have frameworks they can recommend for your software or web development.

That makes it simple.

If you’re looking for a framework on your own, there are questions you can ask to make the decision easier. For instance, what programming languages do you know? Is it important to use an open-source framework? What functionality do you need in a framework? Are you stronger as a frontend developer than a backend developer, or vice versa? What kind of project are you working on?

Once you’ve answered these questions, look for the frameworks that are tailored toward your requirements. Then, do research to find out what other programmers think of a framework. Find the community of programmers that uses the framework and ask them whether they think it’s right for you.

There are a lot of resources out there, whether you’re working on frontend development using JavaScript, or backend with Python. So don’t always pick the newest, shiniest framework. Do your homework and find the tool that’s right for you.

What frameworks does Contentful recommend?

If you’re planning to work with Contentful, we are agnostic about the framework you use for tooling on the backend. So find what works best for you, your company, and your particular software.

On the frontend, Contentful endorses React. In fact, we use it ourselves as part of the tooling in our App Framework. This is because it’s a widely adopted framework, it offers high usability, and it enables you to develop fast, scalable frontend applications. However, if you aren’t familiar with React or would prefer to use something else, Contentful’s rest APIs and GraphQL API make it straightforward and simple to integrate into your workflow, no matter which framework you choose.

If you’re looking to integrate Contentful with other digital tools, you can use our own App Framework. Here’s how to build custom apps with this tool.

The value of frameworks

Frameworks can go a long way toward improving your software and web development projects. They offer fast, reliable patterns that you can use to avoid the trouble of starting from scratch.

There are a variety of these tools out there, connected to programming languages from Java to Python, and intended for tasks as varied as backend development and data science.

The options can be difficult to navigate, but with a little research you can find a framework that works for you. And the right framework will bring big benefits: It will reduce development time, save money, and ultimately help you make better applications and websites.

Content migration from Drupal 7 to Contentful: A step-by-step guide

Bulent Osman Yusuf — Wed, 20 Jul 2022 14:36:51 +0000

NOTE: This article originally appeared on the Contentful Blog. Sharing here on behalf of the author Patrick Geers.

Folks, we have an important question. Are you considering migrating your content from Drupal to Contentful? Then this post will show you how. Carpe diem!

Drupal 7 is officially reaching end of life on November 1, 2023. After that point, all support for this legacy content management system will come to a close.

So how should you plan for the change? Sure, you could start using the latest version of Drupal. Or — and maybe this is a wild and crazy idea, but hear us out — you could move everything over to a new CMS.

After all, if you’ve taken this long to move on from Drupal 7, there’s likely a good reason why you were taking your time.

Let’s hazard a guess: Was it a feeling of dissatisfaction with using a monolithic CMS? Is it too complex to maintain? Do you desire a conscious uncoupling? To upgrade to something more versatile for your content needs?

It’s time to use Contentful! We have a lot of resources on this site to outline the benefits of adopting a headless CMS. But rather than dive into a discussion about content strategy and data migration, this post explains how to migrate content from Drupal 7 to Contentful.

We’ll be outlining the workflow of a migration project step by step, together with examples, migration tools, and command line prompts.

Before we dive in, there are two prerequisites in order for this guide to be useful. First, you have worked with Drupal 7. Second, you have some knowledge of the command line interface in Contentful.

Ready? Let’s go!

A galactic guide to building a blog with Next.js and Contentful

Luke Stahl — Mon, 04 Apr 2022 14:25:58 +0000

In a galaxy far, far away, there lived an individual who was known as the grill and breakfast guy. So he set out on an epic quest to become not just a Padawan Chef but a Master Chef, like those who came before him.

This is a guide to building a blog with Contentful while using the popular JavaScript framework Next.js. If you haven’t caught on already, it’s a Star Wars-themed cookbook filled with recipes handed down from multiple family members and friends. I’m hopeful that you’ll enjoy this journey and the build out of this app. May the FOOD be with you.

Episode I: The Phantom Starter

To get your project started you need to follow along with this amazing Next.js and Contentful starter guide crafted by Developer Advocate Brittany Walker. This walkthrough will help create your project, connect your Contentful account and deploy with Vercel. Following this starter you’ll be able to implement any of the additional features detailed below.

Episode II: Attack of the Webhooks

Now that you have your project created, running it locally, and connected to Contentful, let’s add a webhook. By connecting it to your Vercel project, it will notify Vercel every time you make change to your content and trigger Contentful to rebuild.

To add a webhook, go to settings in the Contentful web app and simply select “Add Webhook,” or you can use the Vercel template which we can do because this project is already deployed there. If you are taking the manual approach, here is the Webhooks documentation to help you along.

Episode III: Revenge of the Disqus

With any good blog, having the ability for readers to interact is a must. On multiple occasions I’ve used Disqus when adding a comments section. However, being new to Next.js I wasn’t certain where to add it and Disqus doesn’t have integration with Next.js within its tool. So here are the steps to adding Disqus.

First, sign up for an account at Disqus. They have a free plan which will get the job done. After signing up, you’ll need to click “I want to install Disqus on my site.” Follow the instructions by adding your website name and category. Again, you won’t see Next.js listed in the platforms section, so you will need to choose a manual universal code install. I will be providing an example of my code below.

Now you are in luck because there is Disqus React, an npm package for Disqus. In your terminal run:

npm install disqus-react

Next we are going to add a comment.js file to the components folder and add the following code:

// /components/comment.js
import {DiscussionEmbed} from "disqus-react"
const DisqusComments = ({ post }) => {
 const disqusShortname = "stahlwalkercookbook" // use your shortName from Disqus project
 const disqusConfig = {
   url: `https://cookblog.vercel.app/posts/${post.slug}`, // use your URL
   identifier: post.slug, // Single post slug
   title: post.title // Single post title
 }
 return (
   <div>
     <DiscussionEmbed
       shortname={disqusShortname}
       config={disqusConfig}
     />
   </div>
 )
}
export default DisqusComments;

Next we need to import the Disqus component into the [slug.js] file located in the posts folder in your pages directory. Then it’s just a matter of finding where you’d like the comments to populate, I placed it at the end of my blog posts.

Episode IV: A New Social Share

I’m a fan of the ability to share your blog across whatever social networks you prefer. We’re going to use another npm package to add social sharing. In the terminal of your project run:

npm i next-share

From there you can add the following code to your [slug.js] file. I added this component after my article, before the comments. You’ll need to update the URL to your site’s URL to grab all the individual posts. From here, people will be able to share not just your site but the blog post you’ve written. Below is an example:

// /pages/posts/[slug.js]
      <div className="social">
           <h2>Looks tasty, share with friends</h2>
           <FacebookShareButton
             url={`https://cookblog.vercel.app/posts/${post.slug}`} >
             <FacebookIcon size={32} round />
           </FacebookShareButton>
           <TwitterShareButton
             url={`https://cookblog.vercel.app/posts/${post.slug}`} >
             <TwitterIcon size={32} round />
           </TwitterShareButton>
      </div>

Episode V: The Open Graphs Strike Back

Now to make sure everything looks great when links from your blog are shared, we’re going to work on updating the open graph tags. Open graph tags hold metadata that is used by search engines and social media platforms. This section focuses on updating your open graph tags and including Twitter and Facebook.

The file we are working with is located in the components directory and named meta.js.

Make sure to customize yours to fit your project. For example, you’ll have to create a project in Facebook to obtain your fb:app_id. With Twitter, I created a “summary_large_image” Twitter card, alternatively you can just put “summary” if you prefer the smaller content display.

One problem I ran into was that images were not properly displaying. This was because the image meta properties require a full image URL, so keep that in mind while updating.

Here is an example of what my meta tags look like:

// /components/meta.js

     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@LucasStahl11" />
     <meta name="twitter:creator" content="@LucasStahl11" />
     <meta name="twitter:title" content="Stahlwalker Cookbook" />
     <meta name="twitter:description" content="A blog dedicated to cooking up recipes for all those far far and away." />
     <meta property="twitter:image" content="https://cookblog.vercel.app/images/starwarssocialfinal.jpg"/>

     <meta property="og:title" content="Stahlwalker Cookbook"/>
     <meta property="og:type" content="website"/>
     <meta property="og:url" content="https://cookblog.vercel.app/"/>
     <meta property="og:image" content="https://cookblog.vercel.app/images/starwarssocialfinal.jpg"/>
     <meta property="fb:app_id" content="add Facebook id"/>
     <meta property="og:description" content="A blog dedicated to cooking up recipes for all those far far and away."/>

To validate these are working correctly you can check Twitter’s validator and Facebook’s debugger.

Regarding your Favicon images, those can be located in the public directory. Here is a link to a Favicon generator to create the correct image sizes you need to replace the current Next.js image.

Episode VI: Return of the Categories

Having your blog posts is one thing but wouldn’t it be cool if you could sort them by a category tag? To do this, we need to add another field to the content model, which we can do in the “Content Model” section in the Contentful web app. In the “Post” content type, I added a new text field and selected the “short” and “list” options. This new field means you can start tagging your blog posts that later can be searched. In my cookbook, I categorized the recipes by cuisine type.

Once you have your content model updated, you need to update your GraphQL query in your code. In the api.js file located in your “lib” directory, add the name of the new field to the query variable. I called my field foodCategory. If you are unsure how your query should look, this is where you can use the GraphQL playground app to make sure your queries are correct.

To install the GraphQL playground app. You’ll find this by navigating to “Apps” and clicking on “Manage Apps” in the top menu of your Contentful app. Simply click install and then this feature will be available to querying data within your project. Note, you’ll need to configure this app, so have your Contentful Preview API token available.

I wanted the category to be listed under the header on the blog post pages. I added foodCategory as a prop for my PostHeader component so that I could access the category within the PostHeader component.

    // /pages/posts/[slug.js]      
               <PostHeader
               title={post.title}
               coverImage={post.coverImage}
               foodCategory={post.foodCategory}
               date={post.date}
               author={post.author}
               />

If you would like users to be allowed to search by category, you could add an API search tool such as Algolia or Elasticsearch. You may also want to filter all blog posts by category and build that out. This is the first step in the process.

Episode VII: The CSS Awakens

I have zero experience with Tailwind and it comes pre-installed with this project. If you are like me and want to get back to the basics you can style with regular CSS. The styles folder is located in the public directory, you’ll just have to apply a class (and remember since we are using Next.js you will need to use “className”) to the containers you are looking to style.

Since this is a Star Wars-themed cookbook, I used Google Fonts to get a font that had the look and feel similar to what has been used in the films. I also used Font Awesome for social icons. I added both libraries to my app.js Head tag.

Episode VIII: The Last Load More Button

At this point, my homepage was displaying all of my blog posts. I wanted to have more control over how many posts were listed. You have the option to add pagination, and if that interests you, I suggest taking a look at the following blog on Next.js pagination with Contentful. If you want something simple and sweet you can add a load more button. In this instance I went with the latter.

I modified the existing more-stories component which allowed me to control how many posts to display and how many should appear when a user clicks to load more. I also used a prop to determine if the component should display a load more button since it is used in multiple places. Here is an example of what that looks like:

// /components/more-stories.js
import React, { useState } from 'react';
import PostPreview from '../components/post-preview'

export default function MoreStories({ posts, showMore }) {
 const [ postNum, setPostNum] = useState(4); // Default number of posts displayed
  function handleClick() {
   setPostNum(prevPostNum => prevPostNum + 4) 
 }

 posts.length + 1 === postNum ? showMore = false : showMore = true;

 return (
   <section>
     <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
       More Recipes
     </h2>
     <div className="grid grid-cols-0 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
       {posts.slice(0, postNum).map((post) => (
         <PostPreview
           key={post.slug}
           title={post.title}
           coverImage={post.coverImage}
           date={post.date}
           author={post.author}
           slug={post.slug}
           excerpt={post.excerpt}
         />
       ))}
     </div>

    {showMore && (
         <button className="load-more" onClick={handleClick}>Load More</button>
       )}
   </section>
 )
}

Once you have the code updated in your component, make sure to add the new prop, showMore, to the component in the index.js file:

// /pages/index.js
{morePosts.length > 0 && <MoreStories posts={morePosts} showMore={true} />}

And there you have it, your load more should be in effect!

Episode IX: Rise of the Stahlwalker Cookbook

And that is how I created my first Next.js project. We took a starter and built it out by adding apps, a commenting section, the ability to share, styled it with CSS rather than Tailwind and added a load more options for viewers to dive further into your blog posts. To see all of the final code, you can access it here.

The Next.js and Contentful starter guide really inspired me, so I’d love to see what you’ve built with it as well! I’m planning on continuing to add features to my new blog but if you’d like to check it out, here is the live version of the Stahlwalker Cookbook project.

Forma 36 v4 released, GraphQL cheat sheet and Jamstack events

Brittany Walker — Wed, 09 Feb 2022 19:47:04 +0000

Happy February!

I hope your start to 2022 was great. We're very excited to share what we've been working on! Our biggest news is that we released v4 of our design system, Forma 36. Additionally, the developer relations team participated in many fun events and we've published some new content to help you build faster and better with Contentful.

Let's take a look!

Contentful corner

Forma 36 v4 has been released

We are very happy to announce the full release of Forma 36 v4, our open-source design system created to help developers easily customize Contentful's UI.

This release includes highly anticipated updates that improve the user and developer experience. Our React components are now WCAG level AAA compliant, you can now pull in just the components that you need, which decreases bundle size, and all styling is encapsulated within components, meaning additional CSS imports are not required. These updates make it easier and faster for developers like you to use Forma 36 with your Contentful projects.

Want a behind-the-scenes look at the development of this release? Head over to our blog. For instructions on how to use the latest version of Forma 36, explore our in-depth guide or migration FAQs.

GraphQL API cheat sheet

As a developer, there's a lot to remember and Contentful has your back. I've put together a cheat sheet of commonly used GraphQL features, queries and tips for you to reference as you're building.

Get started with Contentful and Gatsby

Did you know it takes less than 10 minutes to spin up a blog using Gatsby and Contentful? If you're curious about how to do it, check out our Gatsby and Contentful starter walkthrough.

Work with us!

Our Developer Relations team is growing! We're looking for a U.S.-based director of developer experience and an EMEA-based developer advocate. You could be just the fit for these roles if you have experience with front-end technologies and developer communities (bonus points if you enjoy building fun projects). Please don't hesitate to apply or make referrals --- we'd love to have you on our team.

Events with partners

We've partnered with a few friends to bring you some fun events the past couple of months.

In December Stefan partnered with Gatsby to show you how you can quickly create a Jamstack project.

Then, in January, he and Netlify's Jason Lengstorf donned their bunny and hippo house slippers to host a webinar on how to serve and cache content on demand for faster build times and improved site performance.

Get informed on future events --- visit our developer events page.

Links we like

Mess with DNS

Changing DNS settings can be a nerve-wracking experience. Lucky for us, Julia Evans built a fun tool where you can experiment with DNS without the consequences.

Lynn Fisher's annual portfolio refresh

Since 2007, designer Lynn Fisher has released an annual portfolio refresh. This year's version is a delight, pushing the limits of what can be done with SVGs and CSS web animation. See what she achieved.

Better screen reader experiences with CSS

In one of my favorite livestreams, Ben Myers demonstrates how to navigate with screen readers and how your CSS can impact them in ways you might not realize or have even considered.

Changelog

Easily disable and enable webhooks

You can now disable and enable webhooks in one click, giving you more flexibility to manage integrations with Contentful.

Retrieve asset fields in multiple locales

We modified the GraphQL API so users can request fields on an asset in multiple locales.

Environments governance

With environment governance, admins can ensure that users only see the environments they need, letting them be much more confident in making changes, and avoid mistakes that could affect your end users.

Read the changelog here

Have a great month!

That's it for February! Visit our developer portal for even more news. The portal also houses developer blog posts, videos and tutorials. You can subscribe to our newsletter here! As always, feel free to contact us on Slack or Twitter to let us know how we can better support your awesome builds.