DEV Community: Marvin

How to integrate Plausible into a Next.js project

Marvin — Wed, 17 Mar 2021 00:58:51 +0000

Plausible is a new and privacy-friendly analytics service that is an attractive alternative to Google Analytics. It only stores data that enables a simple analysis of visits to your website. In doing so, Plausible does not track the user across multiple websites (does not store cross-site cookies).

In this article, I assume that you already have a functioning Next.js project running.

Installation

To include plausible in Next, we use the package next-plausible.

So we install this first. Either with yarn:

yarn add next-plausible

Or using npm:

npm install next-plausible

Add Plausible to `_app.js`

Next, we extend the _pages/app.js file (please read this article first if you do not already have this file).

We wrap the existing _app.js code with the PlausibleProvider, which embeds the analysis script and makes it available to the rest of your project.

Our code should now look like this:

import "../styles/globals.css";
import PlausibleProvider from "next-plausible";

function MyApp({ Component, pageProps }) {
  return (
    <PlausibleProvider domain="YOUR-DOMAIN-HERE">
      <Component {...pageProps} />
    </PlausibleProvider>
  );
}

export default MyApp;

Please replace YOUR-DOMAIN-HERE in the domain parameter with the domain of your application.

Done! The visits to your application are now tracked by Plausible.

Tracking goals

Goals can also be tracked with next-plausible, for which a hook is provided. This can be used as follows:

import { usePlausible } from "next-plausible";

export default function Home() {
  const plausible = usePlausible();

  return (
    <div>
      <button onClick={() => plausible("Button")}>Button</button>
    </div>
  );
}

As soon as the button is pressed, an event is tracked at Plausible.

That's it! Your Next.js application now tracks statistics and also goals with Plausible.

Conclusion

Plausible is a great alternative to Google Analytics, which actually respects user privacy and only tracks what is necessary to provide you with simple analyses of user behaviour on your website. With next-plausible there is also a great solution to use Plausible with Next.js.

You can learn more about next-plausible in the related docs.

How to embed DTube videos on a Hugo website

Marvin — Mon, 15 Feb 2021 18:03:28 +0000

Hugo is a fast and easy-to-use generator for static web pages, DTube is a decentralised video streaming platform based on the Avalon blockchain, but originally launched on the Steem blockchain. Users are rewarded in the cryptocurrency DTC (DTube Coin) for activities on the platform.

Hugo already comes with a number of so-called shortcodes, for example to easily embed YouTube videos.

So in this post we will now look at how to develop your own reusable shortcode for embedding DTube videos.

Introduction to Hugo shortcodes
Creating your own shortcodes
DTube shortcode
Full example

Introduction to Hugo shortcodes

Hugo shortcodes allow frequently used, complex HTML snippets to be put into simple template files. For example, a YouTube video can simply be embedded with the following shortcode instead of the actual iFrame code:

# Example

{{< youtube dQw4w9WgXcQ >}}

This shortcode is then replaced in Hugo's build process by the YouTube embed iFrame, so that the embedded YouTube video then appears on the web page.

Creating your own shortcodes

Hugo searches for custom shortcodes in the following locations:

/layouts/shortcodes/<SHORTCODE>.html
/themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html

The first place is for when you want to add the shortcode to your project, the second place is for when you create a theme and want to include your custom shortcode with it.

The name of the shortcode file is later also the name used to use the shortcode in a page.

The format of the shortcode is simply an HTML file that may contain some special parameters, such as the arguments like the ID of the video to be embedded. Of course, you can also use all the features of the Hugo/Go templating system.

DTube shortcode

The normal iFrame embed code of a DTube video looks like this:

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/<USERNAME>/<VIDEO ID>"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

Notice that two parameters (as opposed to the one - the video ID - on YouTube) are required, the username of the channel and the video ID. So our shortcode now also has to accept two parameters instead of one like the YouTube shortcode.

So all we really need to do is put this HTML code into a shortcode file and pass the arguments/parameters (username and video ID) to the iFrame.

Arguments are passed to the shortcode in the .Params array, so to get the first argument we have to use the following code:

{{ index .Params 0 }}

So our shortcode should now look like this:

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

We now save this file at layouts/shortcodes/dtube.html.

That's it! We can now use the shortcode {{</* dtube USERNAME VIDEO_ID */>}} at any point on our page and the DTube video will be embedded at that point.

Full example

layouts/shortcodes/dtube.html

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

Deploy Hugo site to Workers Sites using GitHub Actions

Marvin — Mon, 15 Feb 2021 02:07:42 +0000

In this post we look at how to deploy Hugo sites to Cloudflare Workers Sites using GitHub Actions.

Cloudflare Workers Sites is Cloudflare's service for hosting static websites directly on Cloudflare's edge nodes. Hugo is a program for generating static web pages easily and quickly.

If your static website is already in a repository on GitHub, using GitHub Actions is the best way to automate building your website, uploading to Workers Sites and so on, saving you a lot of manual work.

This post already assumes that your Hugo site is on GitHub and also that an associated Workers Site has already been set up.

Introduction to GitHub Actions
Install Hugo and build site
Publish to Cloudflare Workers Sites
Full example
Conclusion

Introduction to GitHub Actions

GitHub Actions is a service from GitHub that automates regular tasks (e.g. building the software, publishing, testing, etc) into once-defined workflows, and then automates them, for example, when a release is created, when pushed to the main branch, when an issue is created, and so on.

The workflows are stored in the .github/workflows folder and are written as .yml files.

For example, a simple workflow might look like this:

name: Workflow Example

on:
  push:
    branches: [ $default-branch ]
  pull_request:
    branches: [ $default-branch ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - run: echo Hello World!

This workflow simply checks out the latest version of the repository from the default branch and then prints Hello World! to the console. The workflow runs on the latest Ubuntu version, ubuntu-latest.

All commands to be executed are specified under steps. Actions created by other users can be specified with uses.

Install Hugo and build site

To install Hugo and build the page, we use an action developed by another user, peaceiris/actions-hugo. We configure this action to always install the latest and extended version of Hugo.

So now our steps section of the workflow configuration looks like this:

steps:
- uses: actions/checkout@v2
- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: 'latest'
    extended: true
- name: Build site
  run: hugo --minify

The first step checks out the latest version of the repository, the second step installs Hugo, and the third step builds a minified version of the site.

Publish to Cloudflare Workers Sites

As previously stated, this post assumes that a Cloudflare Workers Site has already been initialized as described here.

To upload the built site to Cloudflare Workers Sites, we use the cloudflare/wrangler-action officially provided by Cloudflare.

So now we add this step to the steps section of our workflow as well:

steps:
- uses: actions/checkout@v2
- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: 'latest'
    extended: true
- name: Build site
  run: hugo --minify
- name: Publish to Workers Sites
  uses: cloudflare/wrangler-action@1.3.0
  with:
    apiToken: ${{ secrets.CF_API_TOKEN }}

In the new step, there is now also a reference to a secret called CF_API_TOKEN. We need to set this to a Cloudflare API token with some Workers permissions in our repository settings.

This API key can be created in the Cloudflare settings under My Profile > API Tokens.

The new API token must be assigned the following permissions:

All accounts: Workers KV Storage:Edit, Workers Scripts:Edit, Account Settings:Read.
All zones (or only the "zone" through which the website will later be accessible): Workers Routes:Edit
All users: User Details:Read

This key can now be stored in the repository settings in the section Secrets under the name CF_API_TOKEN.

Full example

name: Build & Publish

on:
  push:
    branches: [ $default-branch ]
  pull_request:
    branches: [ $default-branch ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true
    - name: Build site
      run: hugo --minify
    - name: Publish to Workers Sites
      uses: cloudflare/wrangler-action@1.3.0
      with:
        apiToken: ${{ secrets.CF_API_TOKEN }}

Done! Now every time someone pushes to the main branch, the website is built using hugo and published to Cloudflare Workers Sites.

Conclusion

Hugo is one of the easiest and fastest tools to build static websites. Cloudflare Workers Sites is a relative newcomer to the static hosting market, but with Cloudflare's long established and fast network, your website is close to your users and speed is guaranteed.

Using GitHub Actions, the manual building and publishing process can then also be automated, reducing manual effort to a minimum.

How to verify school email addresses in Node.js

Marvin — Sat, 13 Feb 2021 17:50:14 +0000

In this post, we look at how school email addresses can be verified easily and quickly in Node.js.

This is especially useful when a service wants to give certain perks or benefits to students or teachers. Often this is done using paid enterprise service providers, but in the vast majority of cases, verification can also be done quickly and free of charge using the user's email address.

Unfortunately, one disadvantage of most modules for checking school emails is that they only check if the domain ends in ".edu", which eliminates all international educational institutions as they cannot use an ".edu" domain.

The module used in this article is based on the Jetbrains dataset, which contains thousands of international educational institutions and is constantly growing.

Disclaimer: I am the developer of the module mainly used in this post.

Requirements

The only requirement to verify a user's student status is a confirmed email address (or more precisely, domain of the email address, for example) of the user.

Installation

The installation of the required modules in an already initialised and set up Node.js project can easily be done with npm:

npm install swot-node

Or using yarn:

yarn add swot-node

Usage

First we import the installed library:

const swot = require("swot-node");

After that, the use is very simple. Any URL containing a domain can be entered as input. This does not necessarily have to be an email address, but it makes the most sense when verifying students, for example.

The use is asynchronous via Promises or async / await:

swot.isAcademic("example@stanford.edu").then((response) => {
    if (response) {
        // The email belongs to an educational institution!
        console.log("The email belongs to an educational institution!");
    } else {
        // The email does not belong to an educational institution!
        console.log("The email does not belong to an educational institution!");
    }
});

It is also possible to get the name(s) of the educational institution:

swot.getSchoolNames("example@stanford.edu").then((response) => {
    if (response === false) {
        // URL does not belong to an academic institution
        console.log("URL does not belong to an academic institution");
    } else if (response === true) {
        // URL ends on a TLD reserved for academic institutions, but has no entry of its own in the database
        console.log(
            "URL ends on a TLD reserved for academic institutions, but has no entry of its own in the database"
        );
    } else {
        // Domain has an entry and there are also names in the database
        console.log(response);
        // => [ 'Stanford University' ]
    }
});

The exact possible return values of the functions can be found in the documentation of the library.

Full example

const swot = require("swot-node");


// Just check if email belongs to an academic institution
swot.isAcademic("example@stanford.edu").then((response) => {
    if (response) {
        // The email belongs to an educational institution!
        console.log("The email belongs to an educational institution!");
    } else {
        // The email does not belong to an educational institution!
        console.log("The email does not belong to an educational institution!");
    }
});

// Check if email belongs to an academic institution and get name(s) of institution
swot.getSchoolNames("example@stanford.edu").then((response) => {
    if (response === false) {
        // URL does not belong to an academic institution
        console.log("URL does not belong to an academic institution");
    } else if (response === true) {
        // URL ends on a TLD reserved for academic institutions, but has no entry of its own in the database
        console.log(
            "URL ends on a TLD reserved for academic institutions, but has no entry of its own in the database"
        );
    } else {
        // Domain has an entry and there are also names in the database
        console.log(response);
        // => [ 'Stanford University' ]
    }
});

Conclusion

To check in Node.js whether an email address belongs to a student, it is not necessary to use a paid commercial service.

Instead, you can simply use free open source software, which is maintained by the community and thus also guarantees a much larger and higher quality data set.

More about the library swot-node can be found in the documentation.

DEV Community: Marvin

How to integrate Plausible into a Next.js project

Installation

Add Plausible to `_app.js`

Tracking goals

Conclusion

How to embed DTube videos on a Hugo website

Table of Contents

Introduction to Hugo shortcodes

Creating your own shortcodes

DTube shortcode

Full example

Deploy Hugo site to Workers Sites using GitHub Actions

Table of Contents

Introduction to GitHub Actions

Install Hugo and build site

Publish to Cloudflare Workers Sites

Full example

Conclusion

How to verify school email addresses in Node.js

Requirements

Installation

Usage

Full example

Conclusion

DEV Community: Marvin

How to integrate Plausible into a Next.js project

Installation

Add Plausible to _app.js

Tracking goals

Conclusion

How to embed DTube videos on a Hugo website

Table of Contents

Introduction to Hugo shortcodes

Creating your own shortcodes

DTube shortcode

Full example

Deploy Hugo site to Workers Sites using GitHub Actions

Table of Contents

Introduction to GitHub Actions

Install Hugo and build site

Publish to Cloudflare Workers Sites

Full example

Conclusion

How to verify school email addresses in Node.js

Requirements

Installation

Usage

Full example

Conclusion

Add Plausible to `_app.js`