Forem: Kaiz Khatri

Let's give recognition to those supporting our work on GitHub Sponsors.

Kaiz Khatri — Thu, 09 Feb 2023 10:37:59 +0000

To shoutout your sponsors, all you need to do is use the image endpoint https://sponsor-spotlight.vercel.app/sponsor and append your GitHub Sponsor program-eligible username as the login query parameter in a markdown image tag. For example:

![shoutout-sponsors](https://sponsor-spotlight.vercel.app/sponsor?login=ful1e5)

This will display a "Shoutout" image for a random sponsor with every request.

In some instances, you may receive a message for onboarding new sponsors.

If you have not joined the GitHub Sponsorship program or if your GitHub username cannot be found, the following will appear:

Why Sponsor Spotlight?

As a popular open-source project author or maintainer, you are likely aware of the crucial role played by your sponsors. These sponsors play a vital part in ensuring the success of our project, and it is essential to acknowledge their contributions in a meaningful way. To do this, you may use tools that generate an image featuring the avatars of all active sponsors, providing an overview of their support for the project.

However, despite the convenience of these tools, I found some visual glitches to be particularly concerning. For instance, the image generated by these tools can consume a significant amount of space in the readme, potentially becoming a distraction for users. Additionally, these tools often lack categorization capabilities, making it challenging to provide individual recognition to sponsors, which can be a significant issue for those who desire more personal recognition for their contributions.

Furthermore, slow response times can result in broken sponsor avatars appearing on certain requests, leading to an unprofessional appearance for your project.

To resolve this issue, I decided to take the time to improve the situation. I was recently accepted into the GitHub Sponsorship Program and had already started receiving my first sponsorship, so I wanted to ensure that everything looked as professional as possible. A big shoutout goes to @splooge for being my first sponsor!

With the goal of making things better, I created a public repository on GitHub called "Sponsor Spotlight". This repository generates a dynamic image (in the form of an SVG) using a serverless function and React. The image displays a random sponsor with each request, and has a subtle animation that gives your project a unique and lively look. It took me a few days and less than a week to make the code compatible with all GitHub users and to hand designed the cute Octocat icons into the SVG format.

The source code for this is available on GitHub for anyone to access. If you have any feature requests or run into any issues, you can report them on the issues page. I welcome your thoughts and am happy to work on solving any problems in my free time.

ful1e5 / sponsor-spotlight

Let's give recognition to those supporting our work.

sponsor-spotlight

This project would like to extend a warm shoutout to our fantastic Github monthly sponsors. Approximately 70% of requests will feature a randomly selected sponsor, with the remaining being utilized for onboarding new sponsors.

Usage

Simply use the image endpoint https://sponsor-spotlight.vercel.app/sponsor and append your GitHub Sponsor program-eligible username as the login query parameter. For example:

![shoutout-sponsors](https://sponsor-spotlight.vercel.app/sponsor?login=ful1e5)

This will display a "Shoutout" image for a random sponsor with every request.

In some instances, you may receive a message for onboarding new sponsors.

If you have not joined the GitHub Sponsorship program or if your GitHub username cannot be found, the following will appear:

Development

Images are generated by a React component and is embedded within an SVG. You can run the project locally using the Vercel CLI by running the following command in your terminal:

vercel dev

And also require Github personal access token (classic)…

View on GitHub

Alternatives

A Gift

Before wrapping up this post, I have a 🎁 for you.

If you like my work and want to help me make open-source development my full-time job, you can support me by becoming a sponsor at @ful1e5.

Thanks for joining me and I'll see you again on the internet. As-salamu alaykum.

This post is powered by TheActionDev

TheActionDev - v3

Kaiz Khatri — Sun, 26 Jun 2022 11:54:35 +0000

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

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

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

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.

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

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…

View on GitHub

I created nonsense 'Hello World' program with GitHub Action and JavaScript. (which failed)

Kaiz Khatri — Tue, 07 Dec 2021 09:30:54 +0000

My Workflow

˙(: nɥɔnɥɔ ıɥɔıɥɔ ɐɥɐɥ ǝɹɐ sƃuıɥʇ ɹǝɥʇo ˙ʎɹoʇsıɥ ʇıƃ s,ʇɔǝɾoɹd ǝɥʇ sı noʎ ɥʇıʍ ǝɹɐɥs ı ƃuıɥʇ ʎןuo ǝɥʇ

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

ful1e5 / gobabygo

A nonsense 'Hello World' program with GitHub Action and JavaScript. (which failed)

gobabygo gobabyfailed

A nonsense "Hello World" with GitHub Action and JavaScript. (which failed)

NFT

index.js

View on GitHub

Additional Resources / Info

Dr. Jo's Quora post

This post is powered by TheActionDev

TheActionDev 🧑‍💻

Kaiz Khatri — Wed, 16 Sep 2020 09:15:53 +0000

About 💬

Hi there 👋, my name is Kaiz Khatri. I'm a full-time opensource ninja and I create cursor themes. Currently, I'm creating Themes Engine to automate the theme generating workflow.
I learned a lot from the Dev Community & GitHub in the last two years.
So today I'm sharing my all experience with this piece of software.
I hope you enjoyed #actionshackathon as much as I did.

My workflow ⚡

What is TheActionDev 🧑‍💻 ?

TheActionDev is Github Action that allows you to write & maintain dev.to articles without touching the dev.to UI. This action is initiated in #ActionsHackathon and is using DEV API. This action is scan your Github Repository based on directory input and finds articles based on the Jekyll front matter in markdown files.

Benefits :

Version Control for dev.to articles ⚡
Time travel 🚀
Collaborate with other people 🤗
Reduce one tab of your web browser 😱

Submission category:

💌 Maintainer must-haves

YAML file or link to code

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

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…

View on GitHub

Additional Resources / Info

Let's handson TheActionDev

🥺 Seriously, you should wait for the #hacktoberfest to submit pull requests.
If not, fill in below the "Emoji Table" with your favourite emoji. You get more info here inside the Source Code category.


😍	✒

TheActionDev 👋

Kaiz Khatri — Sun, 13 Sep 2020 11:35:05 +0000

First Post with TheActionDev 🤩

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

TheActionDev

Write dev.to articles with GitHub Action.

Start writing dev.to articles with TheActionDev-template

⚠️ 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 & maintain dev.to articles without touching the dev.to UI. This action is initiated in ActionsHackathon using [DEV API]…

View on GitHub

Forem: Kaiz Khatri

Let's give recognition to those supporting our work on GitHub Sponsors.

Why Sponsor Spotlight?

ful1e5 / sponsor-spotlight

Let's give recognition to those supporting our work.

sponsor-spotlight

Usage

Development

Alternatives

A Gift

TheActionDev - v3

What's TheActionDev?

Check On GitHub Marketplace

Migrating to v3

Getting Started

Setup

TheActionDev.yml

Front-Matter

Front Matter default value

Article Example

Track Sync

Something Missing?

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

TheActionDev

Notice

⚠️ Deprecation of v1 and v2

Migration from v1 and v2 to v3

What is TheActionDev?

I created nonsense 'Hello World' program with GitHub Action and JavaScript. (which failed)

My Workflow

Submission Category:

Yaml File or Link to Code

ful1e5 / gobabygo

A nonsense 'Hello World' program with GitHub Action and JavaScript. (which failed)

gobabygo gobabyfailed

NFT

index.js

Additional Resources / Info

TheActionDev 🧑‍💻

About 💬

My workflow ⚡

What is TheActionDev 🧑‍💻 ?

Benefits :

Submission category:

YAML file or link to code

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

TheActionDev

Notice

⚠️ Deprecation of v1 and v2

Migration from v1 and v2 to v3

What is TheActionDev?

Additional Resources / Info

Let's handson TheActionDev

TheActionDev 👋

ful1e5 / TheActionDev

Write dev.to articles with GitHub Action.

TheActionDev

⚠️ Deprecation of v1 and v2

Migration from v1 and v2 to v3

What is TheActionDev?

Front Matter `default` value

Migration from `v1` and `v2` to `v3`

Migration from `v1` and `v2` to `v3`

Migration from `v1` and `v2` to `v3`