Fixes to improve SEO (#162)

laurakalbag · web-flow · commit 192e56251434 · 2023-07-31T13:13:00.000+01:00
* Add poster images for video MP4s (SEO fix)

* Fix broken URLs to blog posts
diff --git a/blog/2022-07-18-just-use-hooks-xstate-in-react-components/index.mdx b/blog/2022-07-18-just-use-hooks-xstate-in-react-components/index.mdx
@@ -16,7 +16,7 @@ Are you a React developer using [XState](https://xstate.js.org/) to model your a
 
 In this post I’ll review the most common way to use the [`@xstate/react`](https://xstate.js.org/docs/packages/xstate-react/) library in a project. I’ll then demonstrate how encapsulation and reuse of state machines can be achieved by using hooks in your components, with some examples. I’ll also touch on the advantages and disadvantages to using this level of abstraction.
 
-For more background, you can check out [“Just Use Props”: An opinionated guide to React and XState](https://stately.ai/blog/just-use-props-an-opinionated-guide-to-react-and-xstate) by Matt Pocock.
+For more background, you can check out [“Just Use Props”: An opinionated guide to React and XState](https://stately.ai/blog/2021-01-11-just-use-props-an-opinionated-guide-to-react-and-xstate) by Matt Pocock.
 
 After years of usage in the wild, and in response to confusion and frustration about hooks, the React Team has been putting a lot of effort into making the use of hooks clearer and simpler. Now is the perfect time to re-explore how hooks, when used effectively, can help make component creation easier.
 
diff --git a/blog/2022-08-03-whats-new-august-2022/index.mdx b/blog/2022-08-03-whats-new-august-2022/index.mdx
@@ -10,7 +10,7 @@ date:  2022-08-05
 
 ## Updates to our VS Code extension
 
-Our [XState VS Code extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode) has now been installed 10k times! Install the extension yourself from inside VS Code or find the [XState extension on the Open VSX Registry](https://stately.ai/blog/xstate-vscode-extension-now-available-on-the-open-vsx-registry) to enjoy the following new features.
+Our [XState VS Code extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode) has now been installed 10k times! Install the extension yourself from inside VS Code or find the [XState extension on the Open VSX Registry](https://stately.ai/blog/2022/03/11/xstate-vscode-extension-now-available-on-the-open-vsx-registry) to enjoy the following new features.
 
 <!--truncate-->
 
diff --git a/blog/2023-01-20-whats-new-in-2023/index.mdx b/blog/2023-01-20-whats-new-in-2023/index.mdx
@@ -9,7 +9,7 @@ slug: 2023-01-20-whats-new-in-2023
 date: 2023-01-20
 ---
 
-Happy 2023! The Stately team is back from their [first off-site of the year in Lisbon](https://twitter.com/statelyai/status/1615394794251096065) and excited to get started on our plans for this year. We thought we’d kick off the year with a reminder of all the features we’ve released since the [Stately Studio 1.0 release](https://stately.ai/blog/introducing-stately-studio-10) in October. It’s been just three months, and we already have so much to share.
+Happy 2023! The Stately team is back from their [first off-site of the year in Lisbon](https://twitter.com/statelyai/status/1615394794251096065) and excited to get started on our plans for this year. We thought we’d kick off the year with a reminder of all the features we’ve released since the [Stately Studio 1.0 release](https://stately.ai/blog/2022-10-18-introducing-stately-studio-1-0) in October. It’s been just three months, and we already have so much to share.
 
 <!--truncate-->
 
@@ -51,7 +51,7 @@ If you want to learn more about using the Stately Studio and XState, check out [
 
 ## Docs
 
-[We’ve finally launched our new Stately docs](https://stately.ai/blog/introducing-the-stately-docs). We now have docs for the Stately Studio and XState, with how-tos, tutorials, code examples, and much more. And yes, the new docs have dark mode!
+[We’ve finally launched our new Stately docs](https://stately.ai/blog/2023-01-19-introducing-the-stately-docs). We now have docs for the Stately Studio and XState, with how-tos, tutorials, code examples, and much more. And yes, the new docs have dark mode!
 
 ![Stately docs homepage.](2023-01-19-docs.png)
 
diff --git a/blog/2023-05-04-everything-new-since-stately-studio-1-0/index.mdx b/blog/2023-05-04-everything-new-since-stately-studio-1-0/index.mdx
@@ -14,7 +14,7 @@ It’s been more than six months since the release of Stately Studio 1.0, and we
 
 ## Version History
 
-We’ve added [Version History](https://stately.ai/blog/track-changes-as-you-work-with-version-history) to Stately Studio, so you can easily track the changes made to your machines over time, whether you want to align your machines with versions in your codebase or record milestones for your machine. Version History is the first of our new features exclusively for [Pro users](https://stately.ai/docs/studio-pro-plan).
+We’ve added [Version History](https://stately.ai/blog/2023-05-02-version-history) to Stately Studio, so you can easily track the changes made to your machines over time, whether you want to align your machines with versions in your codebase or record milestones for your machine. Version History is the first of our new features exclusively for [Pro users](https://stately.ai/docs/studio-pro-plan).
 
 [Try out all these features with our 30-day free trial →](https://stately.ai/pricing)
 
@@ -30,7 +30,7 @@ Stately Studio now includes live simulation in Simulate mode. Share your machine
 
 Import from Code was one of our most-requested features from users who had already created machines using XState or our Stately Viz. You can now import an existing machine (or multiple machines!) from JavaScript, TypeScript or JSON using the code panel in the editor’s right tool menu or the Machines list in the left drawer.
 
-[Read more about Import from Code →](https://stately.ai/blog/new-in-the-studio-import-from-code)
+[Read more about Import from Code →](https://stately.ai/blog/2022-11-29-import-from-code)
 
 ![Code panel open in the Studio with the Import button highlighted.](2023-05-04-import-from-code.png)
 
@@ -44,7 +44,7 @@ Users on our Pro plan can now also import machines from GitHub. You can import e
 
 Recovery Mode is one of those features we hope you never have to use. We now try to detect any missing connectivity or backend failure on our end while you’re editing your machines. We will let you know if a connectivity issue or other failure happens and start saving your work locally on your device. The next time you visit the Studio from that same device, we compare what we saved with the machine from the server. If the versions are different, we will give you the option to restore the saved copy to a new machine.
 
-[Read more about Recovery Mode →](https://stately.ai/blog/new-in-the-studio-machine-restore)
+[Read more about Recovery Mode →](https://stately.ai/blog/2022-12-22-machine-recovery)
 
 ## XState VS Code update
 
diff --git a/blog/2023-06-14-supercharge-the-canvas/index.mdx b/blog/2023-06-14-supercharge-the-canvas/index.mdx
@@ -50,7 +50,7 @@ Being able to stay on the canvas keeps you closer to your content, lets interact
 
 For example, we enhanced the Edit Menu to support adding [actions](/docs/xstate-v5/actions#using-actions-in-stately-studio), tags, and other data to [states](/docs/xstate-v5/states#using-states-in-stately-studio) and [transitions](/docs/xstate-v5/transitions#using-transitions-and-events-in-stately-studio). And most items on the canvas can then be edited directly.
 
-<video src="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/create-from-canvas.mp4#t=0.1" width="720" controls preload="metadata">
+<video src="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/create-from-canvas.mp4" width="720" controls preload="metadata" poster="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/create-from-canvas-poster.png">
   <p><a href="https://youtube.com/watch?v=ck9uGikxJ8k">Watch this video on YouTube.</a></p>
 </video>
 
@@ -153,7 +153,7 @@ Because color will be used in diagrams in dynamic and varied ways, we implemente
 
 Set a color by selecting a state or transition and choosing the one you want from the Edit Menu above it. You can set colors separately on states and on transitions. Effect blocks and other attached details inherit their color. 
 
-<video src="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/colors-2.mp4#t=0.1" width="720" controls preload="metadata">
+<video src="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/colors-2.mp4" width="720" controls preload="metadata" poster="https://ascelcgzufjyvdzuplwo.supabase.co/storage/v1/object/public/videos/create-from-canvas-poster.png">
   <p><a href="https://youtube.com/watch?v=Yiij2FaGSd0">Watch this video on YouTube.</a></p>
 </video>
 
diff --git a/docs/import-from-github.mdx b/docs/import-from-github.mdx
@@ -85,6 +85,6 @@ When your machine is hosted at GitHub:
 
 :::info
 
-Read more in [our blog post about importing a machine from a GitHub URL](https://stately.ai/blog/import-machines-from-github).
+Read more in [our blog post about importing a machine from a GitHub URL](https://stately.ai/blog/2023-03-09-import-all-machines-from-github-repo).
 
 :::
diff --git a/docs/xstate/typescript/typegen.mdx b/docs/xstate/typescript/typegen.mdx
@@ -241,11 +241,7 @@ Instead of enums, use typegen and rely on the strength of the type-safety provid
 
 ## Nesting typegen files
 
-When you use typegen, you'll notice that it generates new type files.
-If you use VS Code we have made it easy for you to nest these files.
-Our extension will automatically ask you if you want to enable nesting.
-If you want to know more about file-nesting, you can [read the blog post where we introduced nesting typegen files
-](https://stately.ai/blog/nesting-xstate-typegen-files).
+When you use typegen, you'll notice that it generates new type files. If you use VS Code we have made it easy for you to nest these files. Our extension will automatically ask you if you want to enable nesting. If you want to know more about file-nesting, you can [read the blog post where we introduced nesting typegen files](https://stately.ai/blog/2022-06-13-nesting-typegen-files).
 
 ## Known limitations
 
