DEV Community: sudo-self

Deploy Buttons Generator Beautiful Deployment Badges

sudo-self — Mon, 15 Dec 2025 04:32:05 +0000

Ever spent time searching for the right deployment button badges for your GitHub repository?

Or worse, manually writing Markdown or HTML for each platform? I've built a fun simple tool that solves this problem!

Deploy Buttons Generator

The Problem: Manual Badges Are Tedious

As developers, we want to make it easy for others to deploy our projects. Deployment buttons (those beautiful badges that say "Deploy to Netlify", "Deploy to Vercel", etc.) are essential for this. But creating them manually is time-consuming:

finding the correct button SVG/image URL for each platform
You need the correct deployment URL structure
You have to write both Markdown and HTML versions
You need to update them if the repo URL changes

The Solution: One-Click Deployment Button Generation

Deploy Buttons Generator automates this entire process. Simply enter your GitHub username and repository name, and instantly get deployment buttons for 12 popular platforms:

Netlify
Vercel
Heroku
Railway
Render
DigitalOcean
Cloudflare Workers
CodeSandbox
StackBlitz
Glitch
Firebase Hosting
Replit

How It Works

incredibly simple

Enter your GitHub username
Enter your repository name
Click "Generate Buttons"

That's it! The tool generates beautifully formatted deployment buttons for all supported platforms in both Markdown and HTML formats.

Example Output

For the Vercel deploy button, you'll get both formats:

Markdown Format

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/sudo-self/link-in-bio)

HTML Format

<a href="https://vercel.com/new/clone?repository-url=https://github.com/sudo-self/link-in-bio" target="_blank">
  <img src="https://vercel.com/button" alt="Deploy with Vercel">
</a>

Rendered Result

A few versions out there. Free to use and free of spam and junk...

The source code is also avaliable sudo-self/deploybuttons.

Stay Creative!

Calculator

sudo-self — Thu, 24 Apr 2025 07:23:15 +0000

A calculator is a device or software application used to perform mathematical operations.

Deploy with workers

sudo-self — Tue, 10 Sep 2024 04:40:41 +0000

Button Generator

The Button Generator is a tool designed to streamline the deployment process for projects hosted on GitHub. By creating a "Deploy to Cloudflare Workers" button, you can simplify the deployment process, allowing users to deploy your application to Cloudflare Workers with a single click.

This button provides a convenient way for users to deploy your project directly to Cloudflare Workers, which is ideal for projects that benefit from serverless architecture and global distribution.

How It Works

By embedding a simple script tag into your webpage, you can integrate the deploy button functionality. This script will dynamically add a floating button to your webpage. When users click this button, it opens a popup that facilitates one-click deployments to Cloudflare Workers. This integration is especially useful for streamlining the deployment process for your users and enhancing their experience.

To include the deploy button generator on your webpage, simply add the following script tag:

<script src="https://sudo-self.github.io/deploy-button/deploy-button.js"></script>

Example Widget

How to Create Your Deploy Button

Get your GitHub repository URL

You need the GitHub repository URL in the format https://github.com/USERNAME/REPO

USERNAME is your GitHub username.
REPO is the name of your repository.

Construct the deploy button URL

https://deploy.workers.cloudflare.com/?url=https://github.com/USERNAME/REPO

Replace USERNAME and REPO with your actual GitHub username and repository name. This URL links directly to Cloudflare's Workers deployment system, enabling seamless deployment of your project with a single click.

dicebear api

sudo-self — Tue, 14 May 2024 06:10:14 +0000

because why not.....

Blog with comments..

sudo-self — Fri, 10 May 2024 07:40:11 +0000

Firebase SDK is plug and play

Blog with comments...

*consider rules with DB codepen is purely an example

initialize

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR DATABASE URL".
projectid: "YOUR_PROJECT_ID",
storageBucket: "YOUR_ STORAGE _BUCKET",
messaging Senderld: "YOUR_MESSAGING_SENDER_ID",
appld: "YOUR_APP_ID"
measurementld: "YOUR_ MEASUREMENT_ID"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

read, write, and display comments

var database = firebase.database();

var commentsContainer = document.getElementById("comments-container");

function displayComments() {
  database.ref("comments").on("value", function (snapshot) {
    commentsContainer.innerHTML = "";
    snapshot.forEach(function (childSnapshot) {
      var comment = childSnapshot.val().text;
      var timestamp = new Date(childSnapshot.val().timestamp);

      var commentElement = document.createElement("div");
      commentElement.classList.add("comment");

      var commentTextElement = document.createElement("div");
      commentTextElement.classList.add("comment-text");
      commentTextElement.textContent = comment;
      commentElement.appendChild(commentTextElement);

      var timestampElement = document.createElement("div");
      timestampElement.classList.add("comment-timestamp");
      timestampElement.textContent = timestamp.toLocaleString();
      commentElement.appendChild(timestampElement);

      commentsContainer.appendChild(commentElement);
    });
  });
}

displayComments();

document
  .getElementById("comment-form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    var commentInput = document.getElementById("comment-input").value;
    if (commentInput.trim() !== "") {
      var newCommentRef = database.ref("comments").push();
      newCommentRef.set({
        text: commentInput,
        timestamp: firebase.database.ServerValue.TIMESTAMP
      });
      document.getElementById("comment-input").value = "";
    }
  });

css to fit your style

body {
  font-family: Arial, sans-serif;
  background-color: #748b97;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 560px;
  margin: 14px auto;
  padding: 14px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 8px;
}

#comments-container {
  margin-bottom: 14px;
}

.comment {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

.comment-text {
  margin-bottom: 5px;
}

.comment-timestamp {
  color: #888;
  font-size: 0.9em;
}

#comment-form {
  display: flex;
}

#comment-input {
  flex: 1;
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}

Blog with comments...

GitHub-repo-api

sudo-self — Fri, 03 May 2024 08:15:46 +0000

GitHub api to search GitHub repos by username

several frameworks all implementing github RestFul APIs.

made with react app, tailwind, and vercel.

V2 Demo: https://gitreactrepos.vercel.app

V1 Demo: https://user-repos.vercel.app

github's build your own octocat: https://myoctocat.com

Create a React App

npx create-react-app my-app
cd my-app
npm start

add tailwind.css

npm install -D tailwindcss
npx tailwindcss init
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Fetch Repos and Followers by username

//api
fetch(`https://api.github.com/users/${username}`);
      const data = await response.json();

//username
 const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch(`https://api.github.com/users/${username}`);
      const data = await response.json();
      setProfile(data);
      await fetchRepos(username);
      await fetchFollowers(username);

//repos
 const fetchRepos = async (username) => {
    try {
      const response = await fetch(
        `https://api.github.com/users/${username}/repos`
      );
      const data = await response.json();
      setRepos(data);

//followers
  const fetchFollowers = async (username) => {
    try {
      const response = await fetch(
        `https://api.github.com/users/${username}/followers`
      );
      const data = await response.json();
      setFollowers(data);

return json via JSX with tailwind.css


//repos
{Array.isArray(repos) && repos.length > 0 && (
        <div className="repos-container bg-gray-100 text-red-800 rounded-lg shadow-lg p-4 mb-4 mx-auto md:w-1/3" style={{ overflowY: "auto" }}>
          <h3 className="text-lg font-semibold">Repositories</h3>
          <ul className="list-none">
            {repos.map((repo) => (
              <li key={repo.id}>
                <a href={repo.html_url}>{repo.name}</a>
              </li>
            ))}
          </ul>
        </div>
      )}

//followers
      {Array.isArray(followers) && followers.length > 0 && (
        <div className="followers-container bg-gray-100 text-red-800 rounded-lg shadow-lg p-4 mb-4 mx-auto md:w-1/3" style={{ overflowY: "auto" }}>
          <h3 className="text-lg font-semibold">Followers</h3>
          <ul className="list-none">
            {followers.map((follower) => (
              <li key={follower.id}>
                <a href={follower.html_url}>{follower.login}</a>
              </li>
            ))}
          </ul>
        </div>
      )}

implementing tsParticles with npm

npm install tsparticles-engine

import { loadFull } from "tsparticles";
import particlesOptions from "./particles.json";

initialize engine

 useEffect(() => {
    if (init) {
      return;
    }

    initParticlesEngine(async (engine) => {
      await loadFull(engine);
    }).then(() => {
      setInit(true);
    });
  }, [])

particles.json (sample)

{
  "autoPlay": true,
  "background": {
    "color": {
      "value": "#000"
    },
    "image": "",
    "position": "",
    "repeat": "",
    "size": "",
    "opacity": 1
  },

Demo: https://gitreactrepos.vercel.app

Magic .mp3 Burner

sudo-self — Sun, 07 Apr 2024 13:50:37 +0000

Many argue mp3s are dead. The internet is not. Here is mp3 to html

Magic Mp3 Burner

Production
Magic Mp3 Burner

CodePen
Magic MP3 Burner

html download

      <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Mp3 Player</title>
          </head>
          <body style="background-color: #f0f0f0;">
            <center>
              <h2>Mp3 Playlist</h2>
              <audio controls>
                <source src="data:audio/mp3;base64,${base64Data}" type="audio/mp3">
                Your browser does not support the audio element.
              </audio>
            </center>

            <div style="position: fixed; bottom: 0; left: 0; right: 0; background-color: black; color: white; padding: 10px; text-align: center;">
              <a href="https://mp3-burn.pages.dev" style="color: white; text-decoration: none;">made with&nbsp;&#10084;&nbsp;Magic Mp3 Burner&nbsp;&nbsp;&copy;2024</a>
            </div>
          </body>
          </html>
``


[Magic Mp3 Burner](https://mp3-burn.pages.dev)<br>

Base 64

sudo-self — Fri, 29 Mar 2024 23:02:43 +0000

Upload an image
base64 encode
download as a .txt
download as a .css (background use)
copy string to clipboard

Buttons

//copy to clipboard

function copyToClipboard() {
  const textarea = document.getElementById("encodedCode");
  textarea.select();
  document.execCommand("copy");
  alert("Code copied to clipboard!");
}

//download txt

function downloadImage() {
  const base64EncodedImage = document.getElementById("encodedCode").value;
  const blob = new Blob([base64EncodedImage], { type: "text/plain" });

  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "sudo-self.txt"; //file name here//
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  alert("Text file downloaded!");
}

//download css

function downloadCSS() {
  const base64EncodedImage = document.getElementById("encodedCode").value;
  const cssContent = `body {
        background-image: url("${base64EncodedImage}");
        background-repeat: no-repeat;
        background-size: 80%;
        background-attachment: fixed;
      }`;
  const blob = new Blob([cssContent], { type: "text/plain" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "sudo-self.css"; //file name here//
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  alert("CSS file downloaded!");
}

function displayImage(input) {
  var file = input.files[0];
  var imageType = /image.*/;

  if (file.type.match(imageType)) {
    var reader = new FileReader();

    reader.onload = function (e) {
      var img = new Image();
      img.src = reader.result;

      img.onload = function () {
        var width = this.width;
        var height = this.height;
        document.getElementById("thumbnail").src = this.src;
        document.getElementById("thumbnail").style.display = "inline";
        document.getElementById("resolution").innerText =
          width + " x " + height;
      };
    };

    reader.readAsDataURL(file);
  } else {
    alert("File format not supported!");
  }
}

http request

sudo-self — Fri, 22 Mar 2024 08:23:17 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Production

https://denodock.deno.dev

Playground

https://dash.deno.com/playground/deno-html-json

calling friends with a request.

🙋🏽SERVER
🙋🏿‍♂️TEXT
🙋🏻‍♀️HTML
🙋🏽JSON
🙋🏿‍♂️AUDIO

Imagine you're at a party, and you ask a friend to message the DJ across the room. In HTTP, your browser sends a request to a server asking to drop the bass. The DJ processes your request and sends back the track. This exchange is the essence of an HTTP request.

To demonstrate this browser action I chose to use a single typescript file main.ts developed via deno playground. https://deno-html-json.deno.dev.

🙋🏿‍♂️server.ts

// deno server.ts

import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts";

🙋🏻‍♀️html

if (pathname.startsWith("/html")) {
    const html = `
      <html>
        <p><a style="color:green">html<b class="text-blue-500"></b><br><marquee style="1"><img src="https://api.iconify.design/logos:html-5.svg?color=%23669c35" alt="HTML Icon" class="inline h-5 w-5 mx-1"></a></p>
      </html>`;
    return new Response(html, { headers: { "content-type": "text/html; charset=UTF-8" } });
  }

🙋🏻‍♀️text

if (pathname.startsWith("/text")) {
    const text = "This is plain text. I like to keep things simple around here";
    return new Response(text, { headers: { "content-type": "text/plain; charset=UTF-8" } });
  }

🙋🏽json

if (pathname.startsWith("/json")) {
    const json = JSON.stringify({ "json": "could not find a valid date for my structure" });
    return new Response(json, { headers: { "content-type": "application/json; charset=UTF-8" } });
  }

🙋🏿‍♂️ java

// Random Words

  const getRandomWord = () => {
    const words = ["text", "audio", "html", "json", "pdf"];
    const randomIndex = Math.floor(Math.random() * words.length);
    return { word: words[randomIndex], color: getRandomDarkColor() };
  };

Cloudflare R2 (storage)
Deno Typescript (playground)
Tailwind (CDN)
Dev.to (contest and inspirtation)
Github (workflow)

Source https://github.com/sudo-self/http-request.git

Dark Mode

sudo-self — Mon, 11 Mar 2024 09:59:20 +0000

Life is already complicated.

dark mode doesn't have to be.

add a class to an SVG to use as a toggle

class="dark-mode-svg" onclick="toggleDarkMode()"

.dark-mode {
background-color: #333;
color: grey;
}

.dark-mode-svg {
fill: #333;
color: grey;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 900px;
cursor: pointer;

function toggleDarkMode() {
  const body = document.body;
  const isDarkMode = body.classList.contains("dark-mode");
  body.classList.toggle("dark-mode", !isDarkMode);
}

htmx chat

sudo-self — Thu, 07 Mar 2024 03:17:08 +0000

AJAX, CSS Transitions, WebSockets, in HTML

sucessor to intercooler = HTMX

npm install htmx.org

NUNCHUCKS

 npm install nunjucks

DAISYUI

npm i -D daisyui@latest

POCKETBASE

https://pocketbase.io

web htmx-chat

Colorful Counter

sudo-self — Wed, 06 Mar 2024 19:29:27 +0000

upstash-rediss.deno.dev

counters may be dime a dozen however a vast space for creativity is there. serverless. Another page view counter in production.

Typescript with deno is straight forward.

// server.ts
Deno.serve((_request: Request) => {
  return new Response("serverless data with Upstash");
});

Wasting no time head over to Upstash create a Redis serverless database.

Once complete there are two key pieces of info were gonna grab for the project that make up the rest API were gonna use to access our data....

UPSTASH_REDIS_REST_URL

UPSTASH_REDIS_REST_TOKEN

copy them to a temporary file or leave a tab open then move them them directly to .env via playground.

deno runtime.

curl -fsSL https://deno.land/install.sh | sh

In the quickstarts we find the handler function. all the work is done here just grab this and start a new deno playground. Deno Playground

import { serve } from "https://deno.land/std@0.142.0/http/server.ts";
import { Redis } from "https://deno.land/x/upstash_redis@v1.14.0/mod.ts";

serve(async (_req: Request) => {

    if( ! _req.url.endsWith("favicon.ico") ) {
        const redis = new Redis({
            url: '**YOUR ENDPOINT**',
            token: '**YOUR TOKEN**',
        })

        const counter = await redis.incr("deno-counter");
        return new Response(JSON.stringify({ counter }), { status: 200 });
    }


});

save & deploy.

The url should now return a json.

{"count":197}

Json

Upstash endpoint and token moved to .env via playground settings.



        const token = Deno.env.get("UPSTASH_REDIS_TOKEN");

        const redisUrl = Deno.env.get("UPSTASH_REDIS_URL");

Then all were doing in that same space is rendering html with a tailwind CDN.

const counter = await redis.incr("deno-counter");
${counter}

//deno.json

{
  "tasks": {
    "dev": "deno run --watch main.ts"
  }
}

implement in production, another project, or keep creating.

export to GitHub direct from playground.

upstash-rediss.deno.dev

//Generating random colors

const randomColor = generateRandomHexColor();

function generateRandomHexColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    return "#" + randomColor;
}

//html with tailwind CDN and GitHub buttons 

 <!DOCTYPE html>
            <html lang="en">
            <head>

                <script async defer src="https://buttons.github.io/buttons.js"></script>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Counter</title>
                <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
            </head>
            <body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
                <div class="max-w-md w-full mx-auto rounded-lg p-6 mb-4" style="background-color: <u>${randomColor};</u>">
                    <div class="bg-white shadow-md rounded-lg p-6">
                        <h1 class="text-3xl font-semibold text-center mb-4 cursor-pointer text-green-500 hover:text-green-600" onclick="location.reload()">Counter</h1>
                        <div class="text-center">
                            <p class="text-5xl font-bold mb-4"><u>${counter}</u></p>
                            <p class="text-lg text-gray-500 mb-4">https://upstash-rediss.deno.dev</p>
                            <a class="github-button" href="https://github.com/sudo-self/upstash-deno" data-color-scheme="no-preference: dark; light: dark; dark: dark_high_contrast;" data-icon="octicon-star" data-size="large" aria-label="Star sudo-self/upstash-deno on GitHub">Star</a>
                            <p class="text-lg text-gray-500 mb-4">MAC address: ${macAddress}</p>
                        </div>
                    </div>
                </div>
            </body>
            </html>

Guthub.com/sudo-self/upstash-deno