feat: replace twiiter image with image (#6977)

- set post image as og:image
- remove image on posts where it is not needed

website/content/blog/decap-3-1-0-beta-0.md

@@ -3,7 +3,7 @@ title: Decap 3.1.0-beta.0
 author: Martin Jagodic
 description: This beta release brings React 18
 meta_description: ""
-twitter_image: /img/decap-3.1.0-beta.0.png
+image: /img/decap-3.1.0-beta.0.png
 date: 2023-10-24T09:01:53.438Z
 ---
 The main feature of this release is the upgrade to React 18. This is a large change with potential side effects, so we decided to release a beta version.
@@ -12,4 +12,4 @@ We kindly invite everyone to test, especially Gatsby users, who were most eagerl
 
 NPM: <https://www.npmjs.com/package/decap-cms/v/3.1.0-beta.0>
 
-GitHub Pull Request: <https://github.com/decaporg/decap-cms/pull/6941>
+GitHub Pull Request: <https://github.com/decaporg/decap-cms/pull/6941>

website/content/blog/decap-3.md

@@ -4,7 +4,7 @@ description: >-
   First release as Decap CMS is now available
 date: 2023-08-23T08:00:00.000Z
 author: Martin Jagodic
-twitter_image: /img/decap-3.png
+image: /img/decap-3.png
 ---
 We are happy to announce that the first release of Decap CMS is now available. It is released under 3.0 to honor the 2 major versions of the Netlify CMS.
 

website/content/blog/git-based-cms-definition-features-best-practices.md

@@ -4,7 +4,7 @@ author: Martin Jagodic
 description: A dive into the definition, main features, caveats, and best
   practices of a Git-based CMS. This will help you make an informed decision for
   your next project.
-twitter_image: /img/definition-features-best-practices.png
+image: /img/definition-features-best-practices.png
 date: 2023-11-15T09:18:08.062Z
 ---
 In this post, we'll dive into the definition, main features, caveats, and best practices of Git-based CMS, helping you make an informed decision for your next project.
@@ -59,4 +59,4 @@ Research your options thoroughly, as there are numerous Git-based CMS platforms
 
 Git-based CMS offers versioning, simplicity, and security, making it a joy to install, use, and maintain. It is suitable for small to large projects, but there is an upper limit to its scalability.
 
-It streamlines the CMS experience, reducing complexity and offering greater control over your content. In essence, it’s the most of CMS for the least amount of moving parts.
+It streamlines the CMS experience, reducing complexity and offering greater control over your content. In essence, it’s the most of CMS for the least amount of moving parts.

website/content/blog/github-discussions.md

@@ -4,7 +4,6 @@ description: >-
   What was once category on Netlify Answers is now moving to GitHub Discussions on the main repository.
 date: 2023-03-09T10:30:00.000Z
 author: Martin Jagodic
-twitter_image: /img/preview-link-published.png
 ---
 Netlify CMS used the Discourse subforum on https://answers.netlify.com/, which is not an option for Decap as we are not affiliated with Netlify anymore.
 

website/content/blog/introducing-decap.md

@@ -4,7 +4,6 @@ description: >-
   Decap CMS is a rebranded version of Netlify CMS, offering a simple, easy-to-use, open source, git-based CMS.
 date: 2023-02-23T10:30:00.000Z
 author: Martin Jagodic
-twitter_image: /img/preview-link-published.png
 canonical_url: https://techhub.p-m.si/insights/introducing-decap-cms
 ---
 We are proud to introduce Decap CMS, the [rebranded version of Netlify CMS](https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/). We took this step because we didn't like that this awesome project was slowly dying, and we wanted to ensure that it would continue to be supported and improved.

website/content/blog/march-23-status-update.md

@@ -4,7 +4,6 @@ description: >-
   Updating Slate, fixing Cypress tests, and preparing for the first PR
 date: 2023-03-31T08:00:00.000Z
 author: Anže Demšar
-twitter_image: /img/preview-link-published.png
 ---
 We took over this project a month ago and although there were not many commits to the main repository, we have been working on the project under the hood. We want the first Decap release to be a drop-in replacement, and we want to make sure that it works.
 

website/content/blog/moving-to-discord.md

@@ -4,7 +4,6 @@ description: >-
   We are migrating our community chat from Slack to Discord
 date: 2023-03-01T10:30:00.000Z
 author: Martin Jagodic
-twitter_image: /img/preview-link-published.png
 ---
 During the transition period, we will be active on both services, and Slack will remain open until it dies off. This decision was based on the fact that when we took over, the most requested feature on Slack was to migrate to Discord, and we were already considering it ourselves.
 

website/content/blog/software-reviews-gold-medal-2023.md

@@ -3,7 +3,7 @@ title: Decap Receives Software Reviews Gold Medal for 2023
 author: Martin Jagodic
 description: Decap has been named a top content marketing tool in the Software
   Reviews Content Marketing Data Quadrant Awards for 2023.
-twitter_image: /img/sr-gold_medal-2023.png
+image: /img/sr-gold_medal-2023.png
 date: 2023-05-15T08:00:00.000Z
 ---
 Decap (ex-Netlify CMS) has been recognized as a top content marketing tool in the 2023 Software Reviews Content Marketing Data Quadrant Awards. With a score of 9.1 out of 10 and 100% user satisfaction, Decap proves its value in enhancing content marketing workflows.
@@ -18,4 +18,4 @@ The Software Reviews Awards evaluate tools based on user feedback. Decap's high
 
 According to users, Decap CMS stands out for its intuitive interface, robust and extensive features, and good collaboration among content teams. Real-time previews and integration with git streamline workflows, leading to increased productivity and smoother content creation and editing processes. The tool's extensive content publishing capabilities enable businesses to distribute content across various channels and tailor it to target audiences. This customization maximizes engagement and drives better results.
 
-This award belongs to the community that built this tool over the years. For us (the new maintainers) this proves that we are responsible for an awesome tool and it gives us motivation to keep it alive and kicking.
+This award belongs to the community that built this tool over the years. For us (the new maintainers) this proves that we are responsible for an awesome tool and it gives us motivation to keep it alive and kicking.

website/src/components/layout.js

@@ -53,6 +53,7 @@ function Layout({ hasPageHero, children }) {
           >
             <Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
               <meta name="description" content={description} />
+              <meta name="og:image" content="https://decapcms.org/img/og-image.jpg" />
               <link
                 rel="stylesheet"
                 href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,900|Roboto+Mono:400,700"

website/src/html.js

@@ -12,7 +12,6 @@ class HTML extends React.Component {
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <meta name="apple-mobile-web-app-title" content="Decap CMS" />
           <meta name="application-name" content="Decap CMS" />
-          <meta property="og:image" content="https://decapcms.org/img/og-image.jpg" />
 
           <link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32" />
           <link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16" />

website/src/templates/blog-post.js

@@ -9,22 +9,20 @@ import BlogPostTemplate from '../components/blog-post-template';
 
 function BlogPost({ data }) {
   const { html, frontmatter } = data.markdownRemark;
-  const { author, title, date, description, meta_description, twitter_image, canonical_url } =
-    frontmatter;
+  const { author, title, date, description, meta_description, image, canonical_url } = frontmatter;
   const { siteUrl } = data.site.siteMetadata;
-  const twitterImageUrl =
-    twitter_image && `${trimEnd(siteUrl, '/')}/${trimStart(twitter_image, '/')}`;
-
-  const desc = meta_description || description;
+  const imageUrl = image && `${trimEnd(siteUrl, '/')}/${trimStart(image, '/')}`;
+  const desc = description || meta_description;
 
   return (
     <Layout>
       <Helmet>
         <title>{title}</title>
         {desc && <meta name="description" content={desc} />}
+        {image && <meta name="og:image" content={imageUrl} />}
         {canonical_url && <link rel="canonical" href={canonical_url} />}
       </Helmet>
-      <TwitterMeta title={title} description={desc} image={twitterImageUrl} />
+      <TwitterMeta title={title} description={desc} image={imageUrl} />
       <BlogPostTemplate title={title} author={author} date={date} html={html} />
     </Layout>
   );
@@ -46,7 +44,7 @@ export const pageQuery = graphql`
         # meta_description
         date(formatString: "MMMM D, YYYY")
         author
-        twitter_image
+        image
         canonical_url
       }
       html

website/static/admin/config.yml

@@ -165,7 +165,7 @@ collections:
           widget: text,
           required: false,
         }
-      - { label: Twitter Image, name: twitter_image, widget: image }
+      - { label: Image, name: image, widget: image }
       - { label: Date, name: date, widget: date }
       - { label: Body, name: body, widget: markdown }
   - name: community