From 91c586b2ef7017915a41d89178a773bde4c3482c Mon Sep 17 00:00:00 2001 From: "Isaac Lombard [SSW]" <152236421+isaaclombardssw@users.noreply.github.com> Date: Tue, 12 Nov 2024 11:23:39 +1100 Subject: [PATCH] Added Tina fields setting the SEO for both docs and blogs (#2433) * added seo for both docs and blogs * re-adding openGraph stuff * removing linting ignore decorators * tina lock file --- pages/blog/[slug].tsx | 32 +++---- pages/docs/[...slug].tsx | 39 +++++---- tina/collectionsSchema/blogs.tsx | 5 ++ tina/collectionsSchema/docs.tsx | 7 +- tina/collectionsSchema/pages.tsx | 87 ++++++++----------- .../sharedFields/seoInformation.tsx | 34 ++++++++ .../textInputWithCount.tsx | 26 ++++++ tina/queries/post.gql | 4 + tina/tina-lock.json | 2 +- 9 files changed, 150 insertions(+), 86 deletions(-) create mode 100644 tina/collectionsSchema/sharedFields/seoInformation.tsx create mode 100644 tina/customTinaFormFields/textInputWithCount.tsx diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 959fedf479..188e4483d5 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -1,26 +1,26 @@ import { client } from '../../tina/__generated__/client' -import * as React from 'react' -import styled from 'styled-components' -import { NextSeo } from 'next-seo' -import { GetStaticProps, GetStaticPaths } from 'next' -import { formatDate, isRelevantPost } from '../../utils' import { - Layout, - Hero, DocsTextWrapper, + Hero, + Layout, } from 'components/layout' -import { fileToUrl } from 'utils/urls' -const fg = require('fast-glob') -import { LastEdited, DocsPagination } from 'components/ui' -import { openGraphImage } from 'utils/open-graph-image' -import { WarningCallout } from '../../utils/shortcodes' -import { useTina } from 'tinacms/dist/react' +import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents' +import { DocsPagination, LastEdited } from 'components/ui' +import { GetStaticPaths, GetStaticProps } from 'next' +import { NextSeo } from 'next-seo' import path from 'path' +import * as React from 'react' +import styled from 'styled-components' +import { useTina } from 'tinacms/dist/react' import { TinaMarkdown } from 'tinacms/dist/rich-text' -import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents' +import { openGraphImage } from 'utils/open-graph-image' +import { fileToUrl } from 'utils/urls' +import { formatDate, isRelevantPost } from '../../utils' +import { WarningCallout } from '../../utils/shortcodes' +const fg = require('fast-glob') function BlogTemplate({ file, siteConfig, ...props }) { @@ -58,9 +58,9 @@ function BlogTemplate({ file, siteConfig, ...props }) { return ( @@ -51,7 +53,8 @@ function _DocTemplate(props) { title: doc_data.next?.title, } const TableOfContents = getTableOfContents(doc_data.body.children) - const description = getSeoDescription(doc_data.body) + const description = doc_data.seo?.description?.trim() || getSeoDescription(doc_data.body); + const title = doc_data.seo?.title || doc_data.title; const { activeIds, contentRef } = useTocListener(doc_data) @@ -74,11 +77,11 @@ function _DocTemplate(props) { return ( <> { + if (value && value.length > 70) { + return "Title should be 70 characters or less"; + } + }, + component: TextInputWithCount(70), + }, + }, + { + type: "string", + label: "Description", + description: "Recommended limit of 150 characters", + name: "description", + component: "textarea", + ui: { + component: TextInputWithCount(150, true), + }, + }, + ], +}; \ No newline at end of file diff --git a/tina/customTinaFormFields/textInputWithCount.tsx b/tina/customTinaFormFields/textInputWithCount.tsx new file mode 100644 index 0000000000..cec9dc9aa5 --- /dev/null +++ b/tina/customTinaFormFields/textInputWithCount.tsx @@ -0,0 +1,26 @@ +//ripped out from SSW's Website 😳 + +import React from "react"; +import { wrapFieldsWithMeta } from "tinacms"; + +export const TextInputWithCount = (max: number, isTextArea: boolean = false) => + wrapFieldsWithMeta(({ input }) => ( +
+ {isTextArea ? ( +