Kaiz Khatri

@ful1e5

How I write dev.to articles without leaving Vim?

11:15 AM - 21 Jun 2022

What's TheActionDev?

TheActionDev is Github Action that allows you to write & upsert dev.to articles without touching the dev.to UI. This action is initiated in ActionsHackathon and using forem API.

The main goal of TheActionDev is that we can write articles in favorite text editor, make articles collaborative like open source software and, to have version control system for article as software .

Check On GitHub Marketplace

https://github.com/marketplace/actions/theactiondev

Migrating to v3

There is nothing new in v3 but minor changes have been made to the development workflow, Mainly releases tags and branches. Now release tags follow semantic versions with the v prefix. This release pattern allows us to point to a specific version tag and also helps us to merge commits into release branches from main without re-creating the already released version. You can view all changes of v3 in the project's git history.

The main reason behind this release is native YAML support in front-matter thanks to js-yaml library. This means you have to assign the tags key as yaml arrays otherwise, Action will throw an error or ignore the assigned tags.

---
...
- tags: typescript, javascript, github
+ tags:
+   - typescript
+   - javascript
+   - github
...
---

...

Other than that, You will find the updated notice in the README#Notice section as we'll introduce any kind of breaking changes or deprecations.

Getting Started

• Setup
• Front-Matter
• Article Example
• Track Sync
• Something Missing?

Setup

1. You'll first need to create a YAML file to describe the workflow in your project (e.g. .github/workflows/TheActionDev.yml).
2. Generate dev.to apiKey by following Forem API Docs
3. Add your apiKey to GitHub Secret DEVTO_API_KEY by following GitHub Docs

TheActionDev.yml

name: TheActionDev Sync
on:
  push:
    branches:
      - main # your default branch

jobs:
  operations:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Sycing Article to dev.to
        uses: ful1e5/TheActionDev@v3
        with:
          api-key: ${{ secrets.DEVTO_API_KEY }} # Store your 'api-key' in Github Secret
          directory: ./articles # Your article directory
          ignore: Development.md, Production.md # Markdown file you wan't to ignore. Multple files separated by ,(comma)

Front-Matter

Custom variables set for each post, located between the triple-dashed lines in your editor Here is a list of possibilities:

• published: boolean that determines whether or not your article is published
• description: description area in Twitter cards and open graph cards
• tags: max of four tags, needs to be comma-separated
• canonical_url: link for the canonical version of the content
• cover_image: cover image for post, accepts a URL. The best size is 1000 x 420.
• series: post series name.

Front Matter default value

Article Example

• Use YAML to write and format article's front-matter.
• Follow dev.to editor guide for write and format article body.
• You can also use Liquid tags to add rich content such as Tweets, YouTube videos, etc.

---
title: Hello from TheActionDev
description: Hello World
published: false
tags:
  - showdev
  - github
series: foo
---

Just Setup **TheActionDev** for writing dev.to artcles.

{% github ful1e5/TheActionDev %}

Track Sync

You're able track your article status in Actions tab.

Something Missing?

If something is missing in the documentation or if you found some part confusing, please file an issue on the repository with your suggestions for improvement, or tweet at the @ful1e5 account. I love hearing from you!

Support my work with $1 or more on GitHub Sponsors.