A Next.js project bootstrapped with create-next-app.

• Install
• Run locally
• Create a new blog post
• Shortcodes

1. Clone the engineering blog repository to your machine:
   $ git clone [email protected]:statelyai/eng-blog.git
2. Navigate into the engineering blog folder:
   $ cd eng-blog
3. Install yarn package manager globally if you don’t already have yarn installed on your machine:
   $ npm install -g yarn
4. Install the dependencies for this project:
   $ yarn
5. You’re ready to run the engineering blog

1. Run the development server to spawn a local server on port 3000:
   $ yarn dev
2. Visit http://localhost:3000/ to find your server running.

Blog posts are stored inside content/posts.

1. Create and checkout a new Git branch for your blog post:
   $ git checkout -b my-blog-post-branch-name
2. Use yarn post:create to create a blog post following the CLI (command-line interface) prompts:
   $ yarn post:create
3. Find your new blog post inside content/posts and write your blog post content using markdown format.
4. Save your file to live refresh the local server and preview your post at http://localhost:3000/. If your changes aren”t visible, you may need to stop and restart the local server to trigger a rebuild:
   $ ^C
$ yarn dev
5. Commit and push your Git branch to the eng-blog repository:
   $ git commit -am "Add new blog post"
$ git push origin my-blog-post-branch-name
6. Create a pull request on GitHub for your Git branch to the eng-blog repository to request that the post is published to the live site.

Use yarn post:edit to update an existing blog post’s updatedAt frontmatter field. Follow the CLI prompts to choose an existing blog post from the list.

By default, a post will use the blog’s default open graph image (/public/og-image.png) for the social media meta elements.

Images must be in .png file format. Use the open graph templates in Canva, or ask @laurakalbag to create an image for you.

To override the default image with a new image:

1. Save your image in the /public folder with the same filename as its corresponding blog post. Note: the corresponding filename is not necessary for the functioning of the open graph images, but improves the maintainability of the public folder.
2. Add the ogImage field to the frontmatter of the blog post using the absolute URL:

  ogImage: "https://stately.ai/blog/2019-11-13-no-disabling-a-button-is-not-app-logic.png"

1. Run the development server to spawn a local server on port 3000:
   $ yarn dev
2. In another terminal tab, run yarn test:meta to spawn an instance of localtunnel listening to the same port as the development server:
   $ yarn test:meta
3. The localtunnel process will show a URL in the terminal for a temporary deployment of the development server: your url is: https://exampleurl.com
4. Use this URL with the social media platforms (or any other platform using Open Graph) below to test how they’d preview the home page or any post page meta information:

• Twitter card validator
• LinkedIn post inspector
• Facebook Sharing Debugger (requires Facebook login)

There are a few shortcodes you can use to embed content in markdown.

Use the tweet id for the id attribute. For example, in https://twitter.com/statelyai/status/1461727317429043201, 1461727317429043201 is the ID.

<Tweet id="1461727317429043201" />

Use the YouTube ID for the id attribute. For example in https://www.youtube.com/watch?v=y6aGu0N8z9Q, y6aGu0N8z9Q is the ID.

<Youtube id="y6aGu0N8z9Q" />

Use the Visualizer ID for the id attribute. For example in https://stately.ai/viz/5c325385-a0f4-4eaa-b215-712424369cc2, 5c325385-a0f4-4eaa-b215-712424369cc2 is the ID.

A title is also required to describe your visualization for accessibility and testing purposes:

<Viz id="7c0ec648-09d6-46fe-a912-fc0e46da5094" title="Data fetching modeled as a statechart." />

Configure how the visualization embed displays by passing the options below.

1 is show, 0 is hide:

// Display in visualization mode
<Viz id="5c325385-a0f4-4eaa-b215-712424369cc2" title="Data fetching modeled as a statechart." />

// Display in panels mode showing the state panel without the link to the visualizer
<Viz id="7c0ec648-09d6-46fe-a912-fc0e46da5094" title="Data fetching modeled as a statechart." mode="panels" panels="state" showOriginalLink="0" />

// Display in visualization mode without any controls
<Viz id="5c325385-a0f4-4eaa-b215-712424369cc2" title="Data fetching modeled as a statechart." controls="0" />