TheActionDev

Write dev.to articles with GitHub Action.

Start writing dev.to articles with TheActionDev-template

Notice

⚠️ Deprecation of v1 and v2

As of May 28, 2022, v1 and v2 has been fully sunset and no longer functions

Due to the deprecation of the underlying utility functions, the TheActionDev GitHub Action has released v3 which will use the js-yaml library for parsing front-matter in articles.

I will be restricting any updates to the v1 and v2 Actions to security updates and hotfixes.

Migration from v1 and v2 to v3

The v3 uploader has a few breaking changes for users

• Multiple tags have not been assigned as string with colon(,) or have been deprecated. Instead of use YAML Array List to assign it.

What is 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. This action is scan your Github Repository based on directory input and finds articles based on the Jekyll front matter in markdown files.

Basic Usage

• You'll first need to create a YAML file to describe the workflow in your project (e.g. .github/workflows/TheActionDev.yml).
• Generate dev.to apiKey by following Forem API Docs
• Add your apiKey to GitHub Secret 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)

Inputs

api-key

dev.to api key.

directory

Relative path to your articles(*.md) directory.

ignore

The file you want to ignore by this action. This feature is implemented by @actions/glob, So you also provide glob pattern with it. Following files are ignored by default :

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md
• CHANGELOG.md
• Pull Request Templates
• Issue Templates

For example, you want ignore all articles inside foo sub-directory, The ignore input look like this:

.....

 - name: Sycing Article to dev.to
   uses: ful1e5/TheActionDev@v3
   with:
     api-key: ${{ secrets.DEVTO_API_KEY }}
     directory: ./articles
-     ignore: foo/bar.md, foo/hello.md
+     ignore: foo/**.md

.....

Writing Article with TheActionDev

Front Matter

Original Docs at DEV editor guide

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

• title: the title of your article
• published: boolean or date that determines whether your article is published. The next case exist:
  • Boolean is true the article will be published.
  • Boolean is false the article will be not published.
  • Date is in the past the article will be published.
  • Date is in the future the article will be not published.
• description: description area in Twitter cards and open graph cards
• tags: max of four tags, needs to be YAML Array List
• 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.
• organization_id: numerical identifier of the organization that this post will be publish under.

Front Matter default value

tag	value	required
title	null	yes
published	false	no
description	null	no
tags	[]	no
canonical_url	null	no
cover_image	null	no
series	null	no
organization_id	null	no

Article Basics

• 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.

Examples

Basic Article

---
title:  TheActionDev
description: Hello World
published: false
tags:
  - typescript
  - javascript
  - github
series: TheActionDev
---

First Post with **TheActionDev**

{% github ful1e5/TheActionDev %}

Scheduled Article

---
title:  TheActionDev
description: Hello World
published: 2023-01-01T22:00:00+02:00
tags:
  - typescript
  - javascript
  - github
series: TheActionDev
---

Second Post with **TheActionDev**

{% github ful1e5/TheActionDev %}

Development

Check docs/DEVELOPMENT.md

Branding

• Assets: Figma
• Font: JoyStick

Inspiration

• DEV Docs
• vscode-devto extension for vscode
• typescript-action

Contributing

Check CONTRIBUTING.md, any suggestions for features and contributions to the continuing code masterelopment can be made via the issue tracker or code contributions via a Fork & Pull requests.