DEV Community: Wispy

Yo, I built a simple domain name generator, but it's kinda different...

Wispy — Mon, 25 Dec 2023 18:36:10 +0000

Often I start a new project and I want to buy a domain for it. this leaves me at odds sometimes for I know a lot of the projects will not make it, or maybe I will come back to them one day. I have let a lot of domains expire though.

However the process of coming up with domains I absolutely love, and there are already some good existing tools out there I don't want to name a bunch but https://namelix.com/ is fun.

One thing I noticed is that there are a ton of TLD's out there now and a lot of them with specific meaning. You can see the full list here https://data.iana.org/TLD/tlds-alpha-by-domain.txt

I had a an idea 💡

Something was missing from most generators maybe it is out there but I couldn't find it, so I started to build a tool just for me, and kept it on my laptop for months using it each time I needed to come up with a domain.

What does it do?

It's simple really, if you want a unique TLD with a short word you can find the TLD use a thesaurus to find associative words and then go do a domain registrar and see if it is avaialbe like https://stripe.sale or https://vehical.car

You can do this endlessly and make a short list of your favourite but it's time consuming.

That's why I built https://yostatus.com it's super clunky right now and it's not designed yet, but it does the trick for now.

I used Domainr API to check availability, and Domainr API to reroute users to buy links routed through DNSimple. I want have a buy option on the site but for now it's just a fun tool.

The funny thing is I originally used OpenAI to find associative words to the TlD, but it was slow and expensive, and turns out a free thesaurus dictionary API was faster and worked better.

Anyways if your looking for a new domain name maybe this could be another tool in your belt.

I hope I can keep it functional and that it helps just one person that would be great.

Kindly,

Anders from https://wispy.co

How to build a Stripe App OAuth with Next.js: A Beginner's Guide

Wispy — Mon, 25 Dec 2023 18:02:53 +0000

OAuth has become the cornerstone of modern web authentication, allowing users to grant websites and applications access to their information on other websites but without giving them the passwords. This tutorial will guide you through the process of implementing OAuth in a Next.js application, specifically focusing on a common use case: integrating with Stripe App Marketplace.

If you want to skip the hand build process checkout https://stripeapp.build for boilerplate starter point.

Prerequisites
Create a stripe app, following this getting started guide https://stripe.com/docs/stripe-apps/create-app

Follow steps 1,2,3 and three here https://stripe.com/docs/stripe-apps/api-authentication/oauth

Once you have a install link for your app, were ready to implement oAuth in Next JS

What is OAuth?
Before diving into the code, let's understand what OAuth is. It's an open standard for access delegation. In simpler terms, it's a way of letting your users log in to your web application using their information from another website (like Google, Facebook, or Stripe in this case but we are actually allowing our Stripe app to connect to our backend instead of a login process).

Setting Up Your Next.js Environment
For this tutorial, we'll be working with Next.js, a popular React framework. Ensure you have Node.js installed on your computer before starting. Create a new Next.js project by running npx create-next-app my-oauth-app in your terminal, and navigate into your project directory.

Integrating Stripe OAuth
This example demonstrates how to integrate Stripe's OAuth process into a Next.js API route.

Step 1: Setting Up Environment Variables
Create a .env.local file in the root of your project and add your Stripe API keys:

STRIPE_TEST=your_test_api_key
STRIPE_PRODUCTION=your_production_api_key
Replace your_test_api_key and your_production_api_key with your actual Stripe API keys.

Step 2: Writing the OAuth Endpoint
Create a new file under pages/api, say stripe-oauth.js. Here's how you can adapt the provided code snippet for OAuth with Stripe:

import { NextApiRequest, NextApiResponse } from "next";
import btoa from 'btoa'; // You might need to install the 'btoa' package
// Use environment variables for the API key
const STRIPE_API_KEY = process.env.NODE_ENV === 'production' ? process.env.STRIPE_PRODUCTION : process.env.STRIPE_TEST;
const encodedKey = btoa(STRIPE_API_KEY + ":");

// Utility function for setting CORS headers
const setCORSHeaders = () => ({
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers":
    "Content-Type, stripe-signature, Authorization",
});

// Your API endpoint
export async function POST(req: NextApiRequest, res: NextApiResponse) {
  try {
    const body = await req.json();
    const stripeOAuth = await fetch("https://api.stripe.com/v1/oauth/token", {
      method: "POST",
      headers: {
        Authorization: `Basic ${encodedKey}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        code: body.code.value,
        grant_type: "authorization_code",
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        // console.log("stripe-oauth", data);
        return data;
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    const stripeOAuthRefresh = await fetch(
      "https://api.stripe.com/v1/oauth/token",
      {
        method: "POST",
        headers: {
          Authorization: `Basic ${encodedKey}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          refresh_token: stripeOAuth.refresh_token,
          grant_type: "refresh_token",
        }),
      },
    )
      .then((response) => response.json())
      .then(async (data) => {
        return data;
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    return new Response(
      JSON.stringify({
        stripeOAuth: stripeOAuth,
        stripeOAuthRefresh: stripeOAuthRefresh,
      }),
      {
        status: 200,
        headers: {
          ...setCORSHeaders(),
          "Content-Type": "application/json",
        },
      },
    );
  } catch (error) {
    // Check if error is an instance of Error
    if (error instanceof Error) {
      console.error("Error in POST request:", error.message);
      return new Response(error.message, {
        status: 500, // Internal Server Error
        headers: setCORSHeaders(),
      });
    } else {
      // Handle the case where the error is not an instance of Error
      console.error("An unknown error occurred:", error);
      return new Response("An unknown error occurred", {
        status: 500,
        headers: setCORSHeaders(),
      });
    }
  }
}

Step 3: Implementing the Frontend
In your front-end code, create a simple fetch request, that grabs the stripe code from the URL params

Step 4: Testing
Run your application npm run dev and test the OAuth flow. Ensure you handle any errors and the user experience is smooth.

Best Practices and Tips

Security: Always keep your API keys secure. Never expose them in your client-side code.
Environment Variables: Use different keys for development and production to avoid mixing up data.
Error Handling: Implement robust error handling to improve the user experience.
Testing: Regularly test the OAuth flow, especially after updating dependencies or making significant changes to your code.

Conclusion
Integrating OAuth into your Next.js application might seem daunting initially, but it's a powerful tool to enhance user experience and security. By following the steps outlined in this tutorial, you should have a basic but functional OAuth implementation with Stripe in your Next.js application.

Remember, OAuth is a broad topic, and Stripe is just one of the many services that use it. The principles you learned here can be applied to other services as well. Keep exploring and happy coding!

If you are looking to speed up your Stripe App Development checkout https://stripeapp.build for boilerplate code to get you going.

Emojigraph: Conventional Commits Npm package in React with Chart.js and simple-git

Wispy — Wed, 13 Dec 2023 15:47:09 +0000

What am I looking at?

It's a package that graphs your conventional commits into a Emoji Chart based on the number of types of commits. I built this package while working on a side project to see where I was spending my time. What's get measured get's managed don't you know. You can install the package here https://www.npmjs.com/package/react-conventional-commits-graph however it may have bugs so please open an issue since it's my first package. Now let's understand some prerequisites...

Oh and if you want to see the graph live on a page here it is

https://app.stripeappkit.com/api/commits

Understanding Conventional Commits

Conventional commits are a specification for adding human and machine-readable meaning to commit messages. They follow a structured format to make the history of a repository more accessible and easier to navigate. Here's a brief overview of their key elements and importance:

Structured Format: Conventional commits require a specific format for commit messages, typically starting with a type (e.g., feat, fix), optionally followed by a scope, and a description. For example: feat(database): add new indexing feature.
Types of Commits: Common types include feat (new feature), fix (bug fix), docs (documentation changes), style (style changes that do not affect meaning), refactor (code changes that neither fix a bug nor add a feature), test (adding missing tests), and chore (maintenance tasks).
Scope: This is an optional part that describes the part of the codebase affected by the changes (e.g., feat(auth)).
Description: A concise description of the changes made.
Importance:

Improved Readability: Makes it easier to understand the purpose of each commit at a glance.
Automated Tooling: Enables automated tools to process commit messages and generate changelogs, version bumps, and other outputs based on the type of commits.
Team Collaboration: Helps team members quickly understand the nature of changes, improving collaboration and review processes.
Project Management: Assists in tracking the progress of features, fixes, and other types of changes in a project.

In summary, conventional commits provide a standardized way to write commit messages, enhancing readability, supporting tool automation, and improving collaborative development workflows.

Building the NPM Package

We are going to be using mircobundle to package up the npm package for distribution as a react component.

make sure to globally install `microbundle` `npm i -g microbundle`

Steps

create a folder with project name mine was called commit-graph
Copy this into a new package.json file in the folder

    {
     "name": "package-name",
     "description": "package description",
     "version": "1.2.8",
     "type": "module",
     "source": "src/index.js",
     "main": "dist/index.esm.cjs",
     "scripts": {
       "build": "microbundle --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --format es,cjs",
       "dev": "microbundle watch --jsxFragment React.Fragment"
     },
     "dependencies": {
       "chart.js": "^4.4.0",
       "react-chartjs-2": "^5.2.0",
       "simple-git": "^3.21.0"
     },
     "peerDependencies": {
       "react": "^17.0.2",
       "react-dom": "^17.0.2"
     },
     "devDependencies": {
       "@babel/cli": "^7.23.4",
       "@babel/core": "^7.23.5",
       "@babel/preset-env": "^7.23.5",
       "@babel/preset-react": "^7.23.3",
       "babel-loader": "^9.1.3",
       "microbundle": "^0.15.1",
       "webpack-bundle-analyzer": "^4.10.1",
       "webpack-cli": "^5.1.4",
       "webpack-dev-server": "^4.15.1"
     },
     "bin": {
       "extract-commits": "server/processData.js"
     }
   }

Add a server folder at the root and a file called processData.js with the following code

   #!/usr/bin/env node
   import simpleGit from 'simple-git';
   import fs from "fs"

   const localPath = "./";

   // Check if the local repository exists
   if (fs.existsSync(localPath)) {
       // If it exists, use the existing repository
       processData(localPath);
   } else {
       console.error('Local repository does not exist.');
   }

   function processData(path) {
       simpleGit(path).log()
           .then(log => {
               const messages = log.all.map(commit => commit.message);

               // Write commit messages to a JSON file
               fs.writeFileSync('./public/commitMessages.json', JSON.stringify(messages, null, 2));
               console.log('Commit messages have been written to commitMessages.json');
           })
           .catch(err => console.error('Error in analyzing repository:', err));
   }

lastly create a src folder with a components folder and index.js file in the root of src and a CommitChart.js file in the root of components

index.js

export { default as CommitChart } from './components/CommitChart';

CommitChart.js

import { useEffect, useRef, useState } from "react";
import { Bar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

const emojiMap = {
  bugs: "🐛",
  features: "✨",
  chores: "🧹", // Example emoji for chores
  fixes: "🔧", // Example emoji for fixes
  // others: "📦", // Example emoji for others
  docs: "📝",
  refactor: "♻️",
};

const emojiPlugin = {
  id: "emojiPlugin",
  afterDraw: (chart) => {
    const ctx = chart.ctx;

    chart.data.datasets.forEach((dataset, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      meta.data.forEach((bar, index) => {
        const emoji = emojiMap[chart.data.labels[index]];
        const { x, y, base, width, height } = bar;
        const dataValue = dataset.data[index]; // The number of emojis we want to show

        // Calculate the number of rows and columns of emojis based on the data value
        const numRows = Math.ceil(Math.sqrt(dataValue));
        const numCols = Math.ceil(dataValue / numRows);

        // Calculate the size of each emoji to fit the bar's dimensions
        const emojiWidth = width / numCols;
        const emojiHeight = height / numRows;
        const emojiSize = Math.min(emojiWidth, emojiHeight); // Use the smallest to fit both dimensions

        ctx.font = `${emojiSize}px Arial`;

        // Draw the emojis in a grid pattern
        // for (let row = 0; row < numRows; row++) {
        //   for (let col = 0; col < numCols; col++) {
        //     if (row * numCols + col < dataValue) { // Ensure we don't draw more emojis than the data value
        //       const emojiX = x - width / 2 + col * emojiWidth;
        //       const emojiY = base - (numRows - row) * emojiHeight; // Start from the bottom of the bar
        //       ctx.fillText(emoji, emojiX, emojiY);
        //     }
        //   }
        // }
        // ... rest of your plugin code

        // Draw the emojis in a grid pattern
        for (let row = 0; row < numRows; row++) {
          for (let col = 0; col < numCols; col++) {
            if (row * numCols + col < dataValue) {
              // Ensure we don't draw more emojis than the data value
              const emojiX = x - width / 2 + col * emojiWidth;
              const emojiY = base - emojiHeight - row * emojiHeight; // Adjusted to start from the bottom
              // Save the context and rotate the canvas around the emoji's center
              ctx.save();
              ctx.translate(emojiX + emojiSize / 2, emojiY + emojiSize / 2);
              ctx.rotate(Math.PI); // Rotate 180 degrees
              ctx.fillText(emoji, -emojiSize / 2, -emojiSize / 2);
              ctx.restore(); // Restore the context to the original state for the next emoji
            }
          }
        }

        // ... rest of your plugin code
      });
    });
  },
};

// Register the necessary components for Chart.js
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
);
ChartJS.register(emojiPlugin); // Register the custom plugin

const CommitChart = () => {
  const [commitData, setCommitData] = useState({
    labels: [],
    datasets: [],
  });

  const chartRef = useRef(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/commitMessages.json");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const commitMessages = await response.json();

        // Process your commit messages to get the data for the chart
        // Assuming you process the data to the format Chart.js expects
        // Example: { labels: ['Label1', 'Label2'], datasets: [{ data: [1, 2] }] }
        const processedData = processData(commitMessages);

        // If the chart already exists, update it
        if (chartRef.current) {
          chartRef.current.data = processedData;
          chartRef.current.update();
        } else {
          setCommitData(processedData); // Set data for initial chart rendering
        }
      } catch (error) {
        console.error("Failed to fetch commit messages:", error);
      }
    };

    fetchData();
  }, []); // Empty dependency array means this effect runs once after the first render

  const options = {
    scales: {
      x: {
        beginAtZero: true,
      },
      y: {
        // Additional options for the Y-axis can be set here
      },
    },
    maintainAspectRatio: true,
    responsive: true,
    plugins: {
      // ... other plugin configurations
      emojiPlugin: {}, // This is just to enable the plugin
    },
  };

  return (
    <div>
      <h2>Commit Chart</h2>
      <Bar ref={chartRef} data={commitData} options={options} />
    </div>
  );
};

export default CommitChart;

// Helper function to process the raw data
function processData(commitMessages) {
  const counts = {
    bugs: 0,
    features: 0,
    chores: 0,
    fixes: 0,
    // others: 0,
    docs: 0,
    refactor:0,
  };

  commitMessages.forEach((msg) => {
    if (msg.includes("bug:") || msg.includes("🐛")) {
      counts.bugs++;
    } else if (msg.includes("feat:") || msg.includes("✨")) {
      counts.features++;
    } else if (msg.includes("chore:")) {
      counts.chores++;
    } else if (msg.includes("fix:")) {
      counts.fixes++;
    } else if (msg.includes("docs:")) {
      counts.docs++;
    } else if (msg.includes("refactor:")) {
      counts.refactor++;
    }
    //  else {
    // counts.others++; // Count all other commits as 'others'
    // }
  });

  return {
    labels: Object.keys(counts),
    datasets: [
      {
        label: "Number of Commits",
        data: Object.values(counts),
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)", // color for bugs
          "rgba(54, 162, 235, 0.2)", // color for features
          "rgba(255, 206, 86, 0.2)", // color for chores
          "rgba(75, 192, 192, 0.2)", // color for fixes
          "rgba(153, 102, 255, 0.2)", // color for others
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
        ],
        borderWidth: 1,
      },
    ],
  };
}

Finally install yalc globaly npm i -g yalc

With yalc you can run yalc publish and it will create a local link that you can add to your project like running npm i pakcage-name open up your React App, and for now I think it works best in a next JS app running React 17 will be fixing this for all versions. Naviagte there and run yalc addyour-package-name` and now you can import the component and add the script for extract-commits to your package.json

The flow works like this

add script

"scripts": {
"extract-commits": "extract-commits"
}

run npm run extract-commits should see a message that it a file was added to public folder

Got to a page an import the component

import {CommitGraph} from "your-package-name"

use it

return (

)

That's it 😃

Conclusion

In conclusion, the use of this NPM package could help you know where your time is spent.

the approach of integrating an emoji-based commit chart offers an engaging and visually intuitive way to track changes and progress. This feature not only adds an element of fun but also enhances the clarity and comprehensibility of project tracking.

I would say if you have something you built internally publish it to NPM, a great way to advertise your other work.