update crosspost dev.to article

Author: basicBrogrammer

components/ArticleTag.vue

@@ -38,6 +38,10 @@ a::before {
   color: black;
   background-color: #fcdc00;
 }
+.typescript {
+  color: white;
+  background-color: #007acc;
+}
 .redux {
   color: white;
   background-color: #764abc;

…ticles/using-git-to-publish-to-dev-to.md …s/using-github-to-crosspost-to-dev-to.mdcontent/articles/using-git-to-publish-to-dev-to.md renamed to content/articles/using-github-to-crosspost-to-dev-to.md content/articles/using-git-to-publish-to-dev-to.md renamed to content/articles/using-github-to-crosspost-to-dev-to.md

@@ -1,8 +1,8 @@
 ---
-title: How you can use github actions to publish to dev.to?
+title: Want to crosspost to dev.to? There's a GitHub action for that.
 published: false
-description: When I create a new markdown article, I don't want to have copy and paste that markdown to multiple other blog sites. So, why not let an octocat handle this work for me with a github action?
-tags: javascript, github, opensource, actions
+description: When I create a new markdown article, I don't want to have copy and paste that markdown to multiple other blog sites. So, why not let an octocat handle this work for me with a GitHub action?
+tags: typescript, github, opensource, actions
 cover_image: https://cdn.nanalyze.com/uploads/2018/07/automation-rpa-teaser.jpg
 ---
 
@@ -17,37 +17,33 @@ Over the last 6 years of Software Development, I've learned a lot, but I've neve
 <br>
 
 1. Let's go over the code.
-2. Let's take a look at how to use the [github action](https://github.com/basicbrogrammer/crosspost-markdown).
+2. Let's take a look at how to use the [GitHub Action](https://github.com/basicbrogrammer/crosspost-markdown).
 
 # DaCode
 
 The first order of business is to find out if your last commit contains articles.
 
 <br>
 
-In order to do so, we will use node's [execSync](https://nodejs.org/api/child_process.html#child_process_child_process_execsync_command_options) function to run a git command which will give us the names of files changed in the given path argument.
-```javascript
-execSync(`git diff-tree --no-commit-id --name-only -r ${process.env.GITHUB_SHA} -- ${path}`)
+In order to do so, we first require 2 inputs from the GitHub workflow: github-token & content-dir. These 2 arguments will be retrieved using the [@actions/core](https://github.com/actions/toolkit/tree/main/packages/core) package. The `github-token` argument will be used to initiate an [Octokit Rest client](https://octokit.github.io/rest.js/v18/) using the [@actions/github](https://github.com/actions/toolkit/tree/main/packages/github) package. We can use this instance to request the commit data. Once we have the response, all we have to do is iterate over the list of files and see if the filename match a given content directory (from the `content-dir` argument).
 
-```
-
-<br>
+```typescript
+import * as core from '@actions/core';
+import * as github from '@actions/github';
 
-Let's take the return value turn it into a string, split the string up by line breaks, filter off any empty strings, and finally remove any leading and trailing whitespace with `trim()`
+export const getFiles = async (): Promise<string[]> => {
+  const octokit = github.getOctokit(core.getInput('github-token'));
 
-<br>
+  const commit = await octokit.repos.getCommit({
+    ...github.context.repo,
+    ref: github.context.sha,
+  });
 
-Putting it all together looks something like this:
-
-```javascript
-const { execSync } = require('child_process');
+  return (commit?.data?.files || [])
+    .map((file: any) => file.filename)
+    .filter((filename: string) => filename.includes(core.getInput('content-dir')));
+};
 
-exports.findFiles = (path) =>
-  execSync(`git diff-tree --no-commit-id --name-only -r ${process.env.GITHUB_SHA} -- ${path}`)
-    .toString()
-    .split('\n')
-    .filter((f) => f.length > 0)
-    .map((f) => f.trim());
 ```
 
 If this code finds markdown files, we will cycle through each file, sending it into a `publish` function.
@@ -58,24 +54,39 @@ We will use node's file system [`readFileSync`](https://nodejs.org/api/fs.html#f
 If the frontmatter indicates the post is `published`, we can go ahead and start crossposting.
 Let's have a look at the current version of the `publish` function.
 
-```javascript
-exports.publish = (path) => {
+```typescript
+import * as core from '@actions/core';
+import * as fs from 'fs';
+import devTo from './dev-to';
+
+const frontmatter = require('@github-docs/frontmatter');
+
+const logResponse = async (title: string, destination: string, publishCallback: Promise<any>): Promise<void> => {
+  const {status} = await publishCallback;
+  console.table({title, destination, status});
+};
+
+const publish = async (path: string): Promise<void> => {
   try {
     const markdown = fs.readFileSync(`./${path}`, 'utf8');
-    const { data } = frontmatter(markdown);
+    const {data} = frontmatter(markdown);
 
     if (data.published) {
-      logResponse(data.title, 'Dev.to', devTo.publish(markdown));
+      if (core.getInput('dev-to-token').length > 0) {
+        logResponse(data.title, 'Dev.to', devTo.publish(markdown));
+      }
     } else {
       console.log(`Article ${data.title} NOT published. Skipping.`);
     }
   } catch (err) {
-    console.error(err);
+    core.setFailed(err.message);
   }
 };
+
+export default publish;
 ```
 
-Currently, I am only crossposting to [dev.to](https://dev.to/basicbrogrammer), but soon I want to update the Github action to crosspost to [hashnode.com](https://hashnode.com/@basicBrogrammer) as well. 🤙
+Currently, I am only crossposting to [dev.to](https://dev.to/basicbrogrammer), but soon I want to update the GitHub Action to crosspost to [hashnode.com](https://hashnode.com/@basicBrogrammer) as well. 🤙
 
 <br>
 
@@ -86,13 +97,17 @@ The `devTo.publish` method uses the auth token and [node-fetch](https://www.npmj
 
 And here is the dead simple code for our DevTo class:
 
-```javascript
+```typescript
+import fetch from 'node-fetch';
+import * as core from '@actions/core';
+
 class DevTo {
+  token: string;
   constructor() {
     this.token = core.getInput('dev-to-token');
   }
 
-  publish(body_markdown) {
+  async publish(body_markdown: string): Promise<any> {
     const body = {
       article: {
         body_markdown,
@@ -106,26 +121,26 @@ class DevTo {
         'Content-Type': 'application/json',
         'api-key': this.token,
       },
-    }).then((response) => response.json());
+    }).then((response: any) => response.json());
   }
 }
 
-module.exports = new DevTo();
+export default new DevTo();
 ```
 
 That's really it. That's all the code needed to keep you from having to copy and paste your blog markdown to multiple distributors!
 
 # DaAction
 
-As I was writing this code, I was like why don't I make it a Github action and share it with anyone that would like to use it. So I did 😎.
+As I was writing this code, I was like why don't I make it a GitHub Action and share it with anyone that would like to use it. So I did 😎.
 
 <br>
 
-Let's take a look at how you can use this action in your Github blog repo.
+Let's take a look at how you can use this action in your GitHub blog repo.
 
 <br>
 
-Inside your Github repo, add a workflow file. Mine is `.github/workflows/crosspost.yml`.
+Inside your GitHub repo, add a workflow file. Mine is `.github/workflows/crosspost.yml`.
 
 <br>
 
@@ -141,6 +156,7 @@ on:
 ```
 
 Next, we need to start writing the yaml for the job itself. First, we will check out the code:
+
 ```yaml
 jobs:
   crosspost:
@@ -154,7 +170,7 @@ Super simple.
 
 <br>
 
-Next step will be to run the crosspost-markdown action and pass in the necessary arguments (content-dir & dev-to-token).
+Next step will be to run the crosspost-markdown action and pass in the necessary arguments (content-dir & dev-to-token). These can be set in the [secrets](https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypted-secrets) section of your repo's settings.
 
 ```yaml
 jobs:
@@ -164,13 +180,14 @@ jobs:
     - name: Checkout Code
       uses: actions/checkout@v2
 
-    - uses: basicBrogrammer/crosspost-markdown@v0.5
+    - uses: basicBrogrammer/crosspost-markdown@v0.1.0 # remember to see what the latest version is 8)
       with:
         content-dir: './content/articles/'
         dev-to-token: ${{ secrets.DEV_TO }}
+        github-token: ${{ secrets.GITHUB_TOKEN }}
 ```
 
-All done. Now when you push to your repo the Github action will run and if you have any new blog posts it will publish them to dev.to.
+All done. Now when you push to your repo the GitHub Action will run and if you have any new blog posts it will publish them to dev.to.
 
 <br>
 

nuxt.config.js

@@ -48,4 +48,15 @@ export default {
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {},
+  // needed to generate dynamic tags that aren't in links
+  generate: {
+    async routes() {
+      const { $content } = require('@nuxt/content')
+      const dynamicRoutes = await $content('articles').only(['slug']).fetch()
+
+      return dynamicRoutes.map((myroute) =>
+        myroute.slug === '/index' ? '/' : '/blog/' + myroute.slug
+      )
+    },
+  },
 }