add specific mdx component for webm

tinacms · Oct 21, 2024 · ee8f740 · ee8f740
1 parent 9df24fd
commit ee8f740
Show file tree

Hide file tree

Showing 22 changed files with 321 additions and 286 deletions.
diff --git a/components/tinaMarkdownComponents/docAndBlogComponents.tsx b/components/tinaMarkdownComponents/docAndBlogComponents.tsx
diff --git a/content/blog/Tina-CMS--Leveljs.mdx b/content/blog/Tina-CMS--Leveljs.mdx
@@ -8,7 +8,7 @@ prev: content/blog/Supercharge-Your-Markdown-Blog-with-AI.mdx
 
 TinaCMS is an open-source, Git-backed headless content management system (CMS) with a unique approach to content storage and retrieval. In this article, we are going to dive into its architecture and discover how Level.js strikes the perfect balance between simplicity and functionality needed by Tina.
 
-<Youtube embedSrc="/img/blog/Tina-CMS--Leveljs/homepage-demo-2b_lmoaj8.webm"/>
+<WebmEmbed embedSrc="/img/blog/Tina-CMS--Leveljs/homepage-demo-2b_lmoaj8.webm"/>
 
 # The Challenge of Building a CMS on Git
 

diff --git a/content/blog/TinaCMS-New-Public-Roadmap.mdx b/content/blog/TinaCMS-New-Public-Roadmap.mdx
@@ -15,6 +15,6 @@ If you'd like to see something make its way into the roadmap, start by creating
 
 Under the hood, the roadmap is also managed with Tina! So we'll be jumping it and keeping this page up to date regularly as plans change and as progress is made. \
 \
-<Youtube embedSrc="/img/blog/tinacms-new-public-roadmap/tina-roadmap.webm"/>
+<WebmEmbed embedSrc="/img/blog/tinacms-new-public-roadmap/tina-roadmap.webm"/>
 
 You can checkout out the new roadmap [here](/roadmap)
diff --git a/content/blog/announcing-tinacms.mdx b/content/blog/announcing-tinacms.mdx
@@ -13,7 +13,7 @@ Today, we’re excited to announce [TinaCMS](https://github.com/tinacms/tinacms)
 
 Tina is not a CMS, in the traditional sense. As in, it’s not a _separate_ system for managing content. Instead, Tina adds editing functionality to your site when running in dev mode locally, or when using [Tina Teams](http://tinacms.org/teams) (cloud)...In fact, I'm writing this post with Tina right now:
 
-<Youtube embedSrc={"/img/blog/announcing-tinacms/tina-cms-announcement-post.webm"} />
+<WebmEmbed embedSrc={"/img/blog/announcing-tinacms/tina-cms-announcement-post.webm"} />
 
 When you install Tina, your site gets a floating _edit_ icon in the corner that toggles an editing pane (left) to expose the CMS fields. This gives your content editors a visual editing experience that’s super intuitive. When you click "Save" Tina writes your content to external data sources, such as markdown or json files. Try the [Gatsby starter site](https://tinacms.org/guides/gatsby/adding-tina/project-setup) to see for yourself.
 

diff --git a/content/blog/custom-field-components.mdx b/content/blog/custom-field-components.mdx
@@ -26,7 +26,7 @@ Throughout the post, I'll refer to a few core TinaCMS concepts such as [forms](h
 
 Tina was intended to be fully customizable and extensible. Creating **custom fields can provide precise control** over the sidebar configuration and styling, along with implementing unique field functionality.
 
-<Youtube embedSrc="/img/blog/custom-field-components/saturate-custom-field.webm"/>
+<WebmEmbed embedSrc="/img/blog/custom-field-components/saturate-custom-field.webm"/>
 
 > Want to jump ahead? Feel free to check out a [**finished version**](https://github.com/kendallstrautman/llama-filters) of the custom range input field seen in the gif above, or take a peak at a more complex [_Authors_ field plugin](https://github.com/tinacms/tina-starter-grande/blob/master/src/fields/authors.js) in the Tina Grande repo.
 

diff --git a/content/blog/simple-markdown-blog-nextjs.mdx b/content/blog/simple-markdown-blog-nextjs.mdx
@@ -19,7 +19,7 @@ Next.js is a framework built on top of React for developing web applications. In
 
 Follow this step-by-step tutorial, and learn **how to implement the following Markdown blog in Next.js**:
 
-<Youtube embedSrc="/img/blog/simple-markdown-blog-nextjs/simple-blog.webm"/>
+<WebmEmbed embedSrc="/img/blog/simple-markdown-blog-nextjs/simple-blog.webm"/>
 
 Now, let's learn how to implement this Next.js blog based on Markdown.
 

diff --git a/content/blog/syntax-highlighting-with-tina.mdx b/content/blog/syntax-highlighting-with-tina.mdx
@@ -42,7 +42,7 @@ yarn dev
 
 Once our Next.js application is running, you can navigate to [http://localhost:3000/post/HelloWorld](http://localhost:3000/post/HelloWorld). From there you will see a blog post that has a code block that looks a lot like regular text. When this is within a paragraph it may be hard for you or your editors to tell the difference between the code and regular text. Adding syntax highlighting will easily fix that!
 
-<Youtube embedSrc="/img/blog/syntax-highlighting-with-tina/before-image.webp"/>
+![Image prior](/img/blog/syntax-highlighting-with-tina/before-image.webp)
 
 ## Adding syntax highlighting
 
@@ -180,7 +180,7 @@ The final step is to use these `components` in our `TinaMarkdown`. To do that we
 
 Now, you can launch using `yarn dev` and navigate back to [http://localhost:3000/post/HelloWorld](http://localhost:3000/post/HelloWorld). You will see that our code block now has Prism syntax highlighting.
 
-<Youtube embedSrc="/img/blog/syntax-highlighting-with-tina/after-image.webp"/>
+![after](/img/blog/syntax-highlighting-with-tina/after-image.webp)
 
 You can find the finished code in our [GitHub](https://github.com/tinacms/examples/tree/main/syntax-highlighting)
 

diff --git a/content/blog/tina-cms-get-started.mdx b/content/blog/tina-cms-get-started.mdx
@@ -57,10 +57,10 @@ Now that you have Tina setup you can launch your application using the following
 
 Now, if you navigate to [http://localhost:3000/admin](http://localhost:3000/admin) you will see a new page. Go ahead and click the Edit with Tina button.
 
-<Youtube embedSrc="/img/blog/getting-started-tina-admin/login-example.webp">
+![](/img/blog/getting-started-tina-admin/login-example.webp)
 You will land on a page that looks like this:
 
-<Youtube embedSrc="/img/blog/getting-started-tina-admin/landing-example.webp">
+![](/img/blog/getting-started-tina-admin/landing-example.webp)
 
 ### Edit the content
 
@@ -250,7 +250,7 @@ Second, there's a `string` field called `body` with `isBody` set to true. By set
 
 Now the new schema is ready, go ahead and restart your server using `yarn tina-dev` and navigate to [http://localhost:3000/admin](http://localhost:3000/admin). You will see that if you select the Blog Posts on the left side nav that you now have all three posts from Next.js.
 
-<Youtube embedSrc="/img/blog/getting-started-tina-admin/post-list-example.webp">
+![](/img/blog/getting-started-tina-admin/post-list-example.webp)
 
 If you choose the first post “dynamic routing” you will see all of the fields that we defined in our schema which match all the front matter. Go ahead and edit some fields like the title or the body and hit save. Now if you navigate to [http://localhost:3000/posts/dynamic-routing](http://localhost:3000/posts/dynamic-routing) you will see those changes!
 

diff --git a/content/blog/tina-is-in-beta.mdx b/content/blog/tina-is-in-beta.mdx
@@ -85,7 +85,7 @@ We also removed old guides that no longer promote Tina's best practices and move
 
 The Tina Starter was built originally to show "the power of Tina" while it did that, we didn't feel that it showed a real-world example. So we went back to the drawing board and created our new [Tina Starter](/guides/tina-cloud/starter/overview/), which includes a landing page, blog, and about pages. You can edit and rearrange the content and we styled it with TailwindCSS to give it some extra shine! Below is an example of just some of the work you can do:
 
-<Youtube embedSrc="/img/blog/tinacms-is-in-beta/edit-alongside-content.webm"/>
+<WebmEmbed embedSrc="/img/blog/tinacms-is-in-beta/edit-alongside-content.webm"/>
 
 ## Media Manager
 

diff --git a/content/blog/using-tinacms-with-nextjs.mdx b/content/blog/using-tinacms-with-nextjs.mdx
@@ -221,7 +221,7 @@ Currently, the Next Blog Starter grabs content from the file system. But since T
 
 The `getStaticPaths` query is going to need to know where all of your markdown files are located, with your current schema you have the option to use `postConnection` which will provide a list of all posts in your `posts` folder. Make sure your local server is running and navigate to http://localhost:4001/altair and select the Docs button. The Docs button gives you the ability to see all the queries possible and the variables returned:
 
-<Youtube embedSrc="/img/docs/altair_doc.webm"/>
+<WebmEmbed embedSrc="/img/docs/altair_doc.webm"/>
 
 So based upon the `postConnection` you will want to query the `sys` which is the filesystem and retrieve the `filename`, which will return all the filenames without the extension.
 

diff --git a/content/docs/editing/blocks.mdx b/content/docs/editing/blocks.mdx
@@ -8,7 +8,7 @@ previous: content/docs/editing/markdown.mdx
 
 Tina supports block-based editing, so that your editors can build out full pages using your pre-defined blocks.
 
-<Youtube embedSrc="/img/docs/your-blocks.webm"/>
+<WebmEmbed embedSrc="/img/docs/your-blocks.webm"/>
 
 Let's say you want your editors to build out a page, and you have 3 main "block" types to start:
 

diff --git a/content/docs/editing/overview.mdx b/content/docs/editing/overview.mdx
@@ -19,11 +19,11 @@ date: '2021-01-01T00:00:00.000Z'
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies urna ut ex varius, sed fringilla nibh posuere. Vestibulum a pulvinar eros, vel varius orci. Sed convallis purus sed tellus pellentesque ornare quis non velit. Quisque eget nibh nec nisl volutpat aliquet. Donec pharetra turpis vitae diam aliquam rutrum. Sed porta elit ut mi vehicula suscipit. Ut in pulvinar nunc.
 ```
 
-<Youtube embedSrc="/img/docs/editing/markdown.webm"/>
+<WebmEmbed embedSrc="/img/docs/editing/markdown.webm"/>
 
 
 But, sometimes you may want to give your editors more of a template to work with. Tina also supports blocks-based editing, so that you can enable your editors to build out full pages using your pre-defined blocks
 
-<Youtube embedSrc="/img/docs/your-blocks.webm"/>
+<WebmEmbed embedSrc="/img/docs/your-blocks.webm"/>
 
 Continue reading to learn more about different ways to edit content with Tina.
diff --git a/content/docs/forestry/accessing-cms.mdx b/content/docs/forestry/accessing-cms.mdx
@@ -20,7 +20,7 @@ The `tinacms build` step outputs the TinaCMS dashboard SPA in your site's build
 
 Once TinaCMS is setup, your editors will access the CMS via (`<your-site-url>/admin`)
 
-<Youtube embedSrc="/img/docs/forestry-migration/accessing-admin.webm"/>
+<WebmEmbed embedSrc="/img/docs/forestry-migration/accessing-admin.webm"/>
 
 ## Extra flexibility
 

diff --git a/content/docs/graphql/cli.mdx b/content/docs/graphql/cli.mdx
@@ -61,4 +61,4 @@ Generating Tina config
 
 Once the graphql server is running, you can start to explore your graphQL content through the Altair client at `http://localhost:3000/admin/index.html#/graphql`
 
-<Youtube embedSrc="/img/docs/altair_doc.webm"/>
+<WebmEmbed embedSrc="/img/docs/altair_doc.webm"/>
diff --git a/content/docs/graphql/overview.mdx b/content/docs/graphql/overview.mdx
@@ -7,4 +7,4 @@ TinaCMS is a git-backed content management system, that generates a GraphQL API
 
 This gives the developer all the benefits of using git-backed content (version control, content-ownership, branching, etc) but also adds a structured API that can easily be queried.
 
-<Youtube embedSrc="/img/docs/altair_doc.webm"/>
+<WebmEmbed embedSrc="/img/docs/altair_doc.webm"/>
diff --git a/content/docs/product-tour.mdx b/content/docs/product-tour.mdx
@@ -14,7 +14,7 @@ Here we give a quick **2 minute overview of TinaCMS**, and how it fits into your
 
 TinaCMS is an open-source Content Management System (CMS) that seamlessly integrates with your Markdown workflow.
 
-<Youtube embedSrc="/img/docs/your-blocks.webm"/>
+<WebmEmbed embedSrc="/img/docs/your-blocks.webm"/>
 
 ### Your Website
 
@@ -56,7 +56,7 @@ TinaCMS is an open-source Content Management System (CMS) that seamlessly integr
 
 - TinaCMS provides an intuitive CMS interface for your editors. For sites using React, TinaCMS supports "Visual Editing" to allow content editors to see real-time changes.
 
-<Youtube embedSrc="/img/docs/your-blocks.webm"/>
+<WebmEmbed embedSrc="/img/docs/your-blocks.webm"/>
 
 ### /admin route
 

diff --git a/content/docs/reference/rich-text-usage/markdown-tables.mdx b/content/docs/reference/rich-text-usage/markdown-tables.mdx
@@ -51,7 +51,7 @@ const MyTable = props => <table>
 ## Showcase
 
 ![](https://res.cloudinary.com/forestry-demo/image/upload/v1726549733/tina-io/docs/2024-09-13_15-59-11_1_y2elbn.gif)
-<Youtube embedSrc="public/img/docs/reference/cells-and-rows.webm"/>
+<WebmEmbed embedSrc="public/img/docs/reference/cells-and-rows.webm"/>
 
 ## Known Issues
 

diff --git a/content/docs/reference/types/object.mdx b/content/docs/reference/types/object.mdx
@@ -45,15 +45,15 @@ Ultimately there are 3 ways to configure this type...
 
 * With `list` set to `false`, the `fields` array can be used to wrap some data – this appears in the editor as a nested page. This can be used to organise the CMS, such as grouping options together, as in the gif below.
 
-<Youtube embedSrc="public/img/docs/reference/rodmap-grid.webm"/>
+<WebmEmbed embedSrc="public/img/docs/reference/rodmap-grid.webm"/>
 
 * With `list` set to `true`, the `fields` array contains the data structure to be repeated – this appears in the editor as above, but grouped as a list.
 
-<Youtube embedSrc="public/img/docs/reference/roadmap-items.webm"/>
+<WebmEmbed embedSrc="public/img/docs/reference/roadmap-items.webm"/>
 
 * With `list` set to `true`, and using `templates` as opposed to `fields` the user can select between associated templates – this appears as above, but pressing the `+`  gives you the option to choose between templates.
 
-<Youtube embedSrc="public/img/docs/reference/text-and-media-component.webm"/>
+<WebmEmbed embedSrc="public/img/docs/reference/text-and-media-component.webm"/>
 
 ## Examples
 

diff --git a/content/docs/tina-cloud/branching.mdx b/content/docs/tina-cloud/branching.mdx
@@ -6,7 +6,7 @@ last_edited: '2023-04-12T10:00:00.000Z'
 > For a more advanced branching and Pull-Request workflow, checkout TinaCloud's [editorial workflow](https://tina.io/editorial-workflow/) (only available on Business and Enterprise plans).
 
 If your content editors need to work on multiple branches, you can enable Tina's branch switching plugin. This allows you to create new branches and switch between them from Tina's UI. In the future, we'll build on this foundation and support creating pull requests, merging, and other related workflows. 
-<Youtube embedSrc="/img/docs/tina-cloud/branch-selector_e5ndeg.webm"/>
+<WebmEmbed embedSrc="/img/docs/tina-cloud/branch-selector_e5ndeg.webm"/>
 
 ## Installation
 

diff --git a/public/img/docs/reference/value-hello-world.png b/public/img/docs/reference/value-hello-world.png
diff --git a/tina/collectionsSchema/blogs.tsx b/tina/collectionsSchema/blogs.tsx
@@ -93,6 +93,17 @@ export const blogsCollection = {
             },
           ],
         },
+        {
+          name: 'WebmEmbed',
+          label: 'Webm Embed',
+          fields: [
+            {
+              type: 'string',
+              name: 'embedSrc',
+              label: 'Embed SRC',
+            }
+          ]
+        },
         {
           name: 'GraphQLCodeBlock',
           label: 'GraphQL Code Block',

diff --git a/tina/tina-lock.json b/tina/tina-lock.json