Separated inline components from post.tsx
This commit is contained in:
34
components/inline/block-quote.tsx
Normal file
34
components/inline/block-quote.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
|
||||
import { RichTextTemplate } from "@tinacms/schema-tools";
|
||||
|
||||
export interface BlockQuoteProps {
|
||||
children: TinaMarkdownContent;
|
||||
authorName: string;
|
||||
}
|
||||
|
||||
const BlockQuote = (props: BlockQuoteProps) => (
|
||||
<div>
|
||||
<blockquote>
|
||||
<TinaMarkdown content={ props.children } />
|
||||
{ props.authorName }
|
||||
</blockquote>
|
||||
</div>);
|
||||
|
||||
export const blockQuoteSchema: RichTextTemplate = {
|
||||
name: "BlockQuote",
|
||||
label: "Block Quote",
|
||||
fields: [
|
||||
{
|
||||
name: "children",
|
||||
label: "Quote",
|
||||
type: "rich-text"
|
||||
},
|
||||
{
|
||||
name: "authorName",
|
||||
label: "Author",
|
||||
type: "string"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default BlockQuote;
|
||||
40
components/inline/date-time.tsx
Normal file
40
components/inline/date-time.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import format from "date-fns/format";
|
||||
import { Template } from "tinacms";
|
||||
import { RichTextTemplate } from "@tinacms/schema-tools";
|
||||
|
||||
export interface DateTimeProps {
|
||||
format?: string;
|
||||
}
|
||||
|
||||
const DateTime = (props: DateTimeProps) => {
|
||||
const dt = React.useMemo(() => {
|
||||
return new Date();
|
||||
}, []);
|
||||
|
||||
switch (props.format) {
|
||||
case "iso":
|
||||
return <span>{ format(dt, "yyyy-MM-dd") }</span>;
|
||||
case "utc":
|
||||
return <span>{ format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO") }</span>;
|
||||
case "local":
|
||||
return <span>{ format(dt, "P") }</span>;
|
||||
default:
|
||||
return <span>{ format(dt, "P") }</span>;
|
||||
}
|
||||
};
|
||||
|
||||
export const dateTimeSchema: RichTextTemplate = {
|
||||
name: "DateTime",
|
||||
label: "Date & Time",
|
||||
inline: true,
|
||||
fields: [
|
||||
{
|
||||
name: "format",
|
||||
label: "Format",
|
||||
type: "string",
|
||||
options: ["utc", "iso", "local"]
|
||||
}
|
||||
] };
|
||||
|
||||
export default DateTime;
|
||||
48
components/inline/image.tsx
Normal file
48
components/inline/image.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
|
||||
import { Template } from "tinacms";
|
||||
import { anchoringSchema } from "../util/anchoring";
|
||||
import { RichTextTemplate } from "@tinacms/schema-tools";
|
||||
|
||||
export interface ImageProps {
|
||||
children: TinaMarkdownContent;
|
||||
size: "small" | "medium" | "large";
|
||||
imageUrl: string,
|
||||
decorations: string,
|
||||
position: "left" | "middle" | "right"
|
||||
}
|
||||
|
||||
const Image = (props: ImageProps) => (
|
||||
<div>
|
||||
<img src={ props.imageUrl }/>
|
||||
</div>);
|
||||
|
||||
export const imageSchema: RichTextTemplate = {
|
||||
name: "image",
|
||||
label: "Image",
|
||||
inline: true,
|
||||
fields: [
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "string",
|
||||
options: ["small", "medium", "large"]
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
label: "Position",
|
||||
type: "string",
|
||||
options: ["left", "middle", "right"]
|
||||
},
|
||||
{
|
||||
name: "imageUrl",
|
||||
label: "Image",
|
||||
type: "image"
|
||||
},
|
||||
{
|
||||
name: "decorations",
|
||||
label: "Decorations",
|
||||
type: "string"
|
||||
}
|
||||
] };
|
||||
|
||||
export default Image;
|
||||
35
components/inline/inline-definitions.tsx
Normal file
35
components/inline/inline-definitions.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Components } from "tinacms/dist/rich-text";
|
||||
import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
|
||||
import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
|
||||
import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
|
||||
import { Prism } from "tinacms/dist/rich-text/prism";
|
||||
import React from "react";
|
||||
import Image, { ImageProps, imageSchema } from "./image";
|
||||
import { RichTextTemplate } from "@tinacms/schema-tools";
|
||||
|
||||
const inlineComponents: Components<{
|
||||
BlockQuote: BlockQuoteProps;
|
||||
DateTime: DateTimeProps;
|
||||
NewsletterSignup: NewsletterSignupProps;
|
||||
Image: ImageProps;
|
||||
}> = {
|
||||
code_block: (props) => <Prism { ...props } />,
|
||||
BlockQuote,
|
||||
DateTime,
|
||||
NewsletterSignup,
|
||||
img: (props) => (
|
||||
<span className="flex items-center justify-center">
|
||||
<img src={ props.url } alt={ props.alt } />
|
||||
</span>
|
||||
),
|
||||
Image
|
||||
};
|
||||
|
||||
export const richTextTemplates: RichTextTemplate[] = [
|
||||
dateTimeSchema,
|
||||
blockQuoteSchema,
|
||||
newsletterSignupSchema,
|
||||
imageSchema
|
||||
];
|
||||
|
||||
export default inlineComponents;
|
||||
83
components/inline/newsletter-signup.tsx
Normal file
83
components/inline/newsletter-signup.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
|
||||
import React from "react";
|
||||
import format from "date-fns/format";
|
||||
import { RichTextTemplate } from "@tinacms/schema-tools";
|
||||
|
||||
export interface NewsletterSignupProps {
|
||||
placeholder: string;
|
||||
buttonText: string;
|
||||
children: TinaMarkdownContent;
|
||||
disclaimer?: TinaMarkdownContent;
|
||||
}
|
||||
|
||||
const NewsletterSignup = (props: NewsletterSignupProps) => (
|
||||
<div className="bg-white">
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="">
|
||||
<TinaMarkdown content={ props.children } />
|
||||
</div>
|
||||
<div className="mt-8 ">
|
||||
<form className="sm:flex">
|
||||
<label htmlFor="email-address" className="sr-only">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="email-address"
|
||||
name="email-address"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
|
||||
placeholder={ props.placeholder }
|
||||
/>
|
||||
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
|
||||
>
|
||||
{ props.buttonText }
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="mt-3 text-sm text-gray-500">
|
||||
{ props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const newsletterSignupSchema: RichTextTemplate = {
|
||||
name: "NewsletterSignup",
|
||||
label: "Newsletter Sign Up",
|
||||
fields: [
|
||||
{
|
||||
name: "children",
|
||||
label: "CTA",
|
||||
type: "rich-text"
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "string"
|
||||
},
|
||||
{
|
||||
name: "buttonText",
|
||||
label: "Button Text",
|
||||
type: "string"
|
||||
},
|
||||
{
|
||||
name: "disclaimer",
|
||||
label: "Disclaimer",
|
||||
type: "rich-text"
|
||||
}
|
||||
],
|
||||
ui: {
|
||||
defaultItem: {
|
||||
placeholder: "Enter your email",
|
||||
buttonText: "Notify Me"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default NewsletterSignup;
|
||||
Reference in New Issue
Block a user