{"id":4144,"date":"2023-11-04T23:14:05","date_gmt":"2023-11-04T23:14:05","guid":{"rendered":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/"},"modified":"2023-11-05T05:47:59","modified_gmt":"2023-11-05T05:47:59","slug":"how-to-build-a-blog-with-nuxt-js-and-contentful","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/","title":{"rendered":"How to Build a Blog with Nuxt.js and Contentful"},"content":{"rendered":"<p>In this tutorial, we will learn how to build a blog using Nuxt.js and Contentful. Nuxt.js is a powerful framework for building Vue.js applications, and Contentful is a flexible and scalable content management system (CMS) that allows you to manage and deliver content across multiple platforms.<\/p>\n<p>By the end of this tutorial, you will have a fully functional blog with a dynamic list of blog posts and individual blog post pages. Let&#8217;s get started!<\/p>\n<h2>Prerequisites<\/h2>\n<p>To follow along with this tutorial, you will need the following:<\/p>\n<ul>\n<li>Basic knowledge of JavaScript and Vue.js<\/li>\n<li>Node.js installed on your local machine<\/li>\n<li>Basic knowledge of terminal commands<\/li>\n<\/ul>\n<h2>Step 1: Set Up a Nuxt.js Project<\/h2>\n<p>To start, let&#8217;s create a new Nuxt.js project. Open your terminal and navigate to your desired project directory. Run the following command:<\/p>\n<pre><code class=\"language-bash\">npx create-nuxt-app blog\n<\/code><\/pre>\n<p>This will prompt you to answer a few questions to generate the project. Choose the default options for now.<\/p>\n<p>Once the project is generated, navigate into the project directory:<\/p>\n<pre><code class=\"language-bash\">cd blog\n<\/code><\/pre>\n<p>Now, start the development server:<\/p>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<p>You should see the Nuxt.js logo and a message saying &#8220;Nuxt.js is listening on http:\/\/localhost:3000&#8221;. Open your browser and navigate to `http:\/\/localhost:3000` to see your Nuxt.js app in action.<\/p>\n<h2>Step 2: Set Up Contentful<\/h2>\n<p>Next, we need to set up a Contentful account and create a new space for our blog.<\/p>\n<ol>\n<li>Go to <a href=\"https:\/\/www.contentful.com\/\">Contentful<\/a> and sign up for a new account. Once signed in, you will be taken to the Contentful dashboard.<\/p>\n<\/li>\n<li>\n<p>Click on &#8220;Create Empty Space&#8221;, give your space a name (e.g., &#8220;My Blog&#8221;), and select a region. Click on &#8220;Create Space&#8221; to create the space.<\/p>\n<\/li>\n<li>\n<p>Once the space is created, you will be taken to the space dashboard. From the sidebar, click on &#8220;Content model&#8221; and then click on &#8220;Add content type&#8221;.<\/p>\n<\/li>\n<li>\n<p>Create a content type called &#8220;Blog Post&#8221; with the following fields:<\/p>\n<ul>\n<li>Title (Text field)<\/li>\n<li>Slug (Text field)<\/li>\n<li>Date (Date and time field)<\/li>\n<li>Body (Rich text field)<\/li>\n<\/ul>\n<p>Ensure that &#8220;Slug&#8221; is set as the &#8220;Field ID&#8221; for this content type.<\/p>\n<\/li>\n<li>\n<p>Click on &#8220;Publish&#8221; to publish the content model.<\/p>\n<\/li>\n<li>\n<p>Now that our content model is set up, let&#8217;s create some sample blog posts. From the sidebar, click on &#8220;Content&#8221; and then &#8220;Add blog post&#8221;. Enter a title, slug, date, and body content for each blog post. Repeat this step to create multiple blog posts.<\/p>\n<\/li>\n<li>\n<p>Once you have created some sample blog posts, click on &#8220;Publish&#8221; to publish the posts.<\/p>\n<\/li>\n<li>\n<p>Finally, we need to obtain the API keys required to access our Contentful data. From the sidebar, click on &#8220;Settings&#8221; and then &#8220;API keys&#8221;. Copy the &#8220;Space ID&#8221; and &#8220;Content Delivery API &#8211; access token&#8221; values.<\/p>\n<\/li>\n<\/ol>\n<h2>Step 3: Set Up Contentful Integration<\/h2>\n<p>Now that we have our Nuxt.js project and Contentful space set up, let&#8217;s integrate them together.<\/p>\n<ol>\n<li>In your project directory, open the <code>nuxt.config.js<\/code> file. We need to install and configure the <code>@nuxt\/content<\/code> module to fetch data from Contentful.<\/p>\n<\/li>\n<li>\n<p>Install the required dependencies by running the following command in your terminal:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install @nuxt\/contentful --save\n<\/code><\/pre>\n<ol>\n<li>In the <code>nuxt.config.js<\/code> file, add the following code inside the <code>modules<\/code> array:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">['@nuxt\/content']\n<\/code><\/pre>\n<ol>\n<li>Add the following code block at the end of the <code>nuxt.config.js<\/code> file to configure the <code>@nuxt\/content<\/code> module:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">content: {\n  markdown: {\n    prism: {\n      theme: 'prismjs\/themes\/prism-tomorrow.css'\n    }\n  },\n  fullTextSearchFields: ['title', 'slug'],\n  api: {\n    base: 'https:\/\/cdn.contentful.com',\n    space: '&lt;YOUR_SPACE_ID&gt;',\n    accessToken: '&lt;YOUR_CONTENT_DELIVERY_API_ACCESS_TOKEN&gt;'\n  }\n}\n<\/code><\/pre>\n<p>Replace <code>&lt;YOUR_SPACE_ID&gt;<\/code> and <code>&lt;YOUR_CONTENT_DELIVERY_API_ACCESS_TOKEN&gt;<\/code> with the values you obtained from the Contentful dashboard.<\/p>\n<ol>\n<li>Restart the development server by stopping the running process and running <code>npm run dev<\/code> again.<\/li>\n<\/ol>\n<h2>Step 4: Fetch Blog Posts<\/h2>\n<p>Now that our Contentful integration is set up, let&#8217;s fetch the blog posts from Contentful and display them on the blog homepage.<\/p>\n<ol>\n<li>In your project directory, open the <code>pages\/index.vue<\/code> file.<\/p>\n<\/li>\n<li>\n<p>Replace the existing content inside the <code>&lt;template&gt;<\/code> tag with the following code:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-vue\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;h1&gt;Welcome to My Blog!&lt;\/h1&gt;\n    &lt;div v-for=\"post in blogPosts\" :key=\"post.sys.id\"&gt;\n      &lt;h2&gt;{{ post.fields.title }}&lt;\/h2&gt;\n      {{ formatDate(post.fields.date) }}\n      &lt;nuxt-link :to=\"`\/blog\/${post.fields.slug}`\"&gt;Read More&lt;\/nuxt-link&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<ol>\n<li>In the <code>&lt;script&gt;<\/code> tag, add the following code:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">export default {\n  async asyncData({ $content }) {\n    const blogPosts = await $content('blogPost').fetch()\n\n    return { blogPosts }\n  },\n\n  methods: {\n    formatDate(date) {\n      const options = { year: 'numeric', month: 'long', day: 'numeric' }\n      return new Date(date).toLocaleDateString(undefined, options)\n    }\n  }\n}\n<\/code><\/pre>\n<ol>\n<li>Save the changes and refresh the browser. You should now see the list of blog posts fetched from Contentful on the homepage.<\/li>\n<\/ol>\n<h2>Step 5: Generate Dynamic Blog Post Pages<\/h2>\n<p>Next, let&#8217;s generate dynamic individual blog post pages based on the slugs of the blog posts.<\/p>\n<ol>\n<li>In your project directory, create a new directory called <code>blog<\/code> inside the <code>pages<\/code> directory.<\/p>\n<\/li>\n<li>\n<p>Inside the <code>blog<\/code> directory, create a new file called <code>_slug.vue<\/code>.<\/p>\n<\/li>\n<li>\n<p>Replace the existing content inside the <code>_slug.vue<\/code> file with the following code:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-vue\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;h1&gt;{{ blogPost.fields.title }}&lt;\/h1&gt;\n    &lt;p&gt;Published on {{ formatDate(blogPost.fields.date) }}&lt;\/p&gt;\n    &lt;div v-html=\"blogPost.fields.body\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  async asyncData({ $content, params }) {\n    const blogPost = await $content('blogPost').where({ fields: { slug: params.slug } }).fetch()\n\n    return { blogPost: blogPost[0] }\n  },\n\n  methods: {\n    formatDate(date) {\n      const options = { year: 'numeric', month: 'long', day: 'numeric' }\n      return new Date(date).toLocaleDateString(undefined, options)\n    }\n  }\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<ol>\n<li>Save the changes and navigate to any blog post page (e.g., <code>http:\/\/localhost:3000\/blog\/&lt;YOUR_BLOG_POST_SLUG&gt;<\/code>). You should see the individual blog post page with the content fetched from Contentful.<\/li>\n<\/ol>\n<p>Congratulations! You have successfully built a blog using Nuxt.js and Contentful. You can now create and manage blog posts in Contentful and they will be dynamically rendered on your blog.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we learned how to set up a Nuxt.js project, integrate it with Contentful, fetch and display blog posts from Contentful, and generate dynamic individual blog post pages. Nuxt.js and Contentful make it easy to manage and deliver content for your blog, allowing you to focus on creating engaging content for your readers.<\/p>\n<p>Feel free to explore more features of Nuxt.js and Contentful to enhance your blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will learn how to build a blog using Nuxt.js and Contentful. Nuxt.js is a powerful framework for building Vue.js applications, and Contentful is a flexible and scalable content management system (CMS) that allows you to manage and deliver content across multiple platforms. By the end of <a href=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[872,599,49,1458,870,1457],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a Blog with Nuxt.js and Contentful - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Blog with Nuxt.js and Contentful\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to build a blog using Nuxt.js and Contentful. Nuxt.js is a powerful framework for building Vue.js applications, and Contentful is a flexible and scalable content management system (CMS) that allows you to manage and deliver content across multiple platforms. By the end of Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:59+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Build a Blog with Nuxt.js and Contentful\",\n\t            \"datePublished\": \"2023-11-04T23:14:05+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:59+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\"\n\t            },\n\t            \"wordCount\": 818,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"Contentful\\\"\",\n\t                \"\\\"frontend development\\\"]\",\n\t                \"\\\"Web development\\\"\",\n\t                \"\\\"website creation\\\"]\",\n\t                \"[\\\"blog building\\\"\",\n\t                \"[\\\"nuxt.js\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\",\n\t            \"name\": \"How to Build a Blog with Nuxt.js and Contentful - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:14:05+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:59+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Build a Blog with Nuxt.js and Contentful\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build a Blog with Nuxt.js and Contentful - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Blog with Nuxt.js and Contentful","og_description":"In this tutorial, we will learn how to build a blog using Nuxt.js and Contentful. Nuxt.js is a powerful framework for building Vue.js applications, and Contentful is a flexible and scalable content management system (CMS) that allows you to manage and deliver content across multiple platforms. By the end of Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:05+00:00","article_modified_time":"2023-11-05T05:47:59+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Build a Blog with Nuxt.js and Contentful","datePublished":"2023-11-04T23:14:05+00:00","dateModified":"2023-11-05T05:47:59+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/"},"wordCount":818,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Contentful\"","\"frontend development\"]","\"Web development\"","\"website creation\"]","[\"blog building\"","[\"nuxt.js\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/","url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/","name":"How to Build a Blog with Nuxt.js and Contentful - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:05+00:00","dateModified":"2023-11-05T05:47:59+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-nuxt-js-and-contentful\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Build a Blog with Nuxt.js and Contentful"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4144"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4144"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4144\/revisions"}],"predecessor-version":[{"id":4400,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4144\/revisions\/4400"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4144"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}