DEV Community: カワリミ人形

Made a service for Deno Deploy to create a self-introduction page

カワリミ人形 — Wed, 01 Sep 2021 06:06:11 +0000

As the number of pages you have accounts for increases, such as DEV, Twitter, GitHub, etc., it becomes difficult to display links to other services on each service.
In such a case, it is easier to manage if you create a "link list" profile page somewhere and post links to it.

There is an existing service, Linktree.

https://linktr.ee/

However, I personally don't want to manage only links.
I thought it would be nice to be able to display profile items as bullet points as well.

This is why I made it myself, while also learning Deno Deploy.
I've made it available as a service for others to use, so I'll introduce it here.

Denote

The name is Denote.

This is demo: https://denote.deno.dev/denote

The page is like this.

The overall balance of the page (the list of items below the icons) is based on Linktree, but the separation of items within the page and the rain are original.
After all, Deno is all about rain at night!

The profile page of kawarimidoll is here: https://denote.deno.dev/kawarimidoll

API

Registration & Update

POST https://denote.deno.dev/

Instead of separating POST and PUT for registration and update, I decided to use the same one.
This is because I thought it would be more convenient to automate the process with GitHub Actions, etc. (as described later).

Parameters

name Page name
token Token (to be referenced when updating or deleting the page, cannot be changed)
config JSON of settings for list items, main image, etc.

Any token can be used when registering a new page, but when updating, an error will occur if the name and token do not match.

Delete

DELETE https://denote.deno.dev/

Parameters

name Page name
token Token (set when registering)

Display

GET https://denote.deno.dev/[name]

CLI

You can register, update and delete by throwing a request to the above API using curl, etc. However, as the number of configuration items increases, a long JSON file will be placed in the config, making it difficult to operate.

curl -X POST -d '{"name":"my-name","token":"my-token","config":{"list":{"id-1":{"icon":"fontawesome/font-awesome","items":[{"icon":"jam/info","text":"this is a text with an icon"},{"text":"this is a just text"},{"icon":"octicons/octoface","text":"this is a link to GitHub","link":"https://github.com"},{"text":"this is a link to Twitter","link":"https://twitter.com"},{"link":"https://gitlab.com"}]},"id-2":{"icon":"feather/anchor","items":[{"icon":"clarity/block","text":"this is the second block"},{"icon":"simple/deno"}]}}}}' https://denote.deno.dev

So I created a script that parses a local JSON/YAML file and makes a request to the endpoint.
It can be installed as a CLI tool by deno install.

Usage

https://deno.land/x/denote

Install

❯ deno install --allow-read --allow-write --allow-net --no-check --force https://deno.land/x/denote/cli/denote.ts

Registration and update

Use denote register to reflect the configuration file to Denote.
The name and token options are required.
It is possible to specify a file not only your local, but also published on the web due to Deno specifications.
In other words, you can put the configuration in Gist and run denote register locally to publish it.

❯ denote register ./config.yml --name my-name --token my-token

Delete

Deletes the page published by denote unregister.
The name and token options are required.

❯ denote unregister --name my-name --token my-token

Checking on a local server

You can set up a local server with denote serve, in case you want to check the display before publishing.

❯ denote serve ./config.yml

Auto run

We can run it without installation by hitting the public URL directly with deno run.
So if you run denote register in GitHub Actions, you can update Denote automatically.

# .github/workflows/denote_profile.yml
name: Denote profile
on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v2
      - uses: denoland/setup-deno@v1
      - run: >
          deno run --allow-read --allow-net --no-check
          https://deno.land/x/denote/cli/denote.ts register ./denote.yml
          --name kawarimidoll --token '${{ secrets.DENOTE_TOKEN }}'

When doing this, it was difficult to split between new registration and renewal, so I combined Denote's registration and renewal APIs together.

It's running in the kawarimidoll profile repository.

https://github.com/kawarimidoll/kawarimidoll/blob/master/.github/workflows/denote_profile.yml

Configuration file

The configuration file can be written in JSON or YAML.

There is example.yml in the repository (actually, denote init just downloads this).

https://github.com/kawarimidoll/denote/blob/main/example.yml

Required keys

The key "list" is required at the top level.
It is a bit complicated under that, so I will explain it in example.yml.

# example.yml
list:
  id-1:
    icon: fontawesome/font-awesome
    items:
      - icon: jam/info
        text: this is a text with an icon
      - text: this is a just text
      - icon: octicons/octoface
        text: this is a link to GitHub
        link: https://github.com
      - text: this is a link to Twitter
        link: https://twitter.com
      - link: https://gitlab.com
  id-2:
    icon: feather/anchor
    items:
      - icon: clarity/block
        text: this is the second block
      - icon: simple/deno

A list has a key of any name under it.
- The children of this list (id-1 and id-2 above) are treated as a group.
- This key will be treated as the ID of the link in the page.
The group has keys named icon and items.
- The icon is a string with the name [iconset-name]/[icon-name].
- Only icons listed in the icongram can be used.
- items is an array of list items.
A list item can have the keys icon, text, and link.
- All three of these are optional.
- icon is an icon that can be displayed in icongram as well as in the group.
- text is the text to be displayed in the list.
- link is the URL of the link destination. If text is present, it will be displayed, otherwise the link string will be displayed.

Optional keys

The following keys are optional.

name

The name to be displayed at the top of the page.
If omitted, the name option set at the time of registration (i.e., the one that goes into https://denote.deno.dev[name] when displayed) will be used.
It will also be used as the page name in the HTML file in the form name | Denote.

image

The URL of the main image.
If omitted, no image is used.
This is also reflected in the OGP setting og:image, so it will be displayed in an embedded link.

favicon

The URL of the favicon image.
If omitted, the Denote logo will be used.

description

The description or comment to be displayed below the name above.
If omitted, no comment will be used.
This is also reflected in the OGP setting og:description, so it will be displayed in an embedded link.

twitter

This is the twitter user name used in the OGP setting twitter:site.
If omitted, it will simply be skipped.

Closure

At first it was just a simple white background.
I wanted to make it rain at night since it was a deno, so I did some research and made some adjustments.
I'm happy with the result, because I think I was able to give it a nice look.

https://twitter.com/KawarimiDoll/status/1422858096234274816

This is a translation of the following article.
Please leave comments if there are any mistakes in the translation.

https://zenn.dev/kawarimidoll/articles/e00d79b97042ee

Made an API to get GitHub contributions in Deno (for Terminal/JSON/SVG)

カワリミ人形 — Tue, 31 Aug 2021 05:33:33 +0000

I created this project.

https://github.com/kawarimidoll/deno-github-contributions-api

Here is demo:
https://twitter.com/KawarimiDoll/status/1411657903614742532

Please access the following URL from your browser or request it using curl, and follow the instructions displayed.

https://github-contributions-api.deno.dev/

Since I wanted the engineers to have fun, didn't dare to create a rich UI, but rather provide explanations through text responses.
In this article, each API is explained briefly. Please try to access and play with them by yourself.

API

When you access https://github-contributions-api.deno.dev/[username], you will see the number of annual contributions for that user and some descriptions of the API.
Each API can be accessed by adding an extension to the end of the URL, such as /[username].text.

.text

This is the simplest and most uninteresting type. It outputs a comma-separated list of contribution graphs.

❯ curl https://github-contributions-api.deno.dev/kawarimidoll.text
2387 contributions in the last year
13, 5, 2, 4, 5, 9, 1, 2, 3, 3, 3, 8, 3,10, 1, 4, 1, 1, 6, 2, 4, 2,10,10,10, 9, 8, 6,13, 4, 7, 7, 6, 6, 3, 1,11, 1, 5, 2, 6, 6, 6,21,11,17,13,16, 2, 7, 6,10,12
 4, 0, 1, 5, 7, 1, 1, 3, 9, 1, 5, 8, 3, 1, 4, 5, 3, 1, 1, 1, 1, 6, 7,12, 5, 7, 5, 5,19, 2,20,11, 8,10,32, 4, 6, 2, 5, 4, 3, 3, 7,20, 5,17, 6, 5,13,14,22, 6,12
 0, 5, 0, 7, 8, 3, 3, 3, 2, 2, 5, 1, 1, 4, 1, 3, 1, 1, 2, 1, 1, 7, 5, 9, 4,10, 2,14,12,18,11,22, 6, 7, 7,14, 1, 3, 2, 5, 1,18, 5,20, 7, 4, 6, 5,16,14, 4,17, 2
 8, 5, 1, 4, 2, 5, 2, 4, 1, 5, 2, 3, 1, 4, 1, 1, 1, 1, 1, 2, 2, 4, 7, 5, 6, 4, 2, 6,18,16, 6, 6, 2, 2, 7, 9, 1, 4, 1, 4, 4, 9, 4,11, 5,20, 6,14, 7,16,15, 9,
 6, 1, 0, 0, 5, 1, 4, 3, 1, 6, 3, 2, 1, 1, 2,10, 1, 1, 1, 2, 2,11, 3,18, 4,15, 4,12,24, 4,23,15, 4,17, 8, 5, 4, 2, 2,14, 2,12, 6, 9, 1, 9, 4, 2,11,17,14, 7,
 2, 3, 3, 2, 3, 1, 3, 1, 9, 5, 6, 1, 1, 1, 3, 1, 1, 1, 1, 2, 1, 9, 7,23, 6,13, 6, 1,14, 6, 3,12, 3, 4, 6, 2, 1, 2, 6,14, 6,12, 6,15, 2,10, 4,18, 7,20, 5,11,
 7, 3, 3,10, 4, 5, 4, 3, 2, 4, 1, 6, 4, 1, 4, 2, 2, 3, 1, 2, 1,10, 7,28, 6,12, 8,17, 7, 6, 4,14,13, 3, 5,15, 2, 5, 4,11, 6,15,24,20, 8,19, 9, 9,23, 4,12,18,

The display of the total number of contributions can be removed with the no-total parameter.
Since it is comma-separated, saving it to a CSV file may be an interesting use.

.term

This is the most characteristic type. This is the one that is shown in the demo at the beginning of this article, and is the one that I'm promoting.
It is intended to be used with curl, etc in the terminal.

The display of the total number of contributions can be removed with the no-total parameter and the legend (Less...More) can be removed with the no-legend parameter.
In addition, there is a scheme parameter to set the color scheme, a pixel parameter to change the text used for the pixels, and an invert parameter to change the background color instead of the text.

The pixel parameter allows non-ascii characters if encoded properly.

Make sure that your device supports True Color to this works well.

.json

This is the most "API-like" type. It returns a JSON containing a string with the total number of contributions and an array of contribution data for each week.
I can say it's a wrapper for GraphQL API of GitHub.

The contribution data is a two-dimensional array of 7 days x 53 weeks, but it can be received as a one-dimensional array using the flat option.

I think this type can be utilized as a source when you want to use the contributions for some purpose.

.svg

This is the most intuitive type. It returns the contribution graph as an SVG image.
It's almost the same as the one on the GitHub user page, but the official one has some quirks in specifying coordinates, so I refactored it a bit.

Since it is an image, it can be pasted on DEV. Now you can show off your development activities on your articles!

![svg](https://github-contributions-api.deno.dev/kawarimidoll.svg)

There are some options, no-total, no-legend, scheme, font-color, frame and bg.

I think it can be used anywhere you can attach an image with a URL.
Please use it conveniently.

Closure

I'm satisfied with the result, because it's fun to make, and the finished product is visually interesting, and I can see my achievements.

If you like it, please have a look at the repository page.

https://github.com/kawarimidoll/deno-github-contributions-api

Deno has a really good development experience.
I'd like to continue playing with Deno and Deno Deploy.

This is a translation of the following article.
Please leave comments if there are any mistakes in the translation.

https://zenn.dev/kawarimidoll/articles/b573f617a51c0b

Extra

The tiger🐯 has given it a Star🌟! Overwhelming thanks...!

https://twitter.com/KawarimiDoll/status/1411871548449853443

This have also been picked up by Deno official Twitter! Overwhelmingly impressed...!

https://twitter.com/deno_land/status/1420387162206478340

Introduction to the use and configuration of deno-udd, a module version control tool for Deno

カワリミ人形 — Sun, 29 Aug 2021 01:37:56 +0000

Deno does away with the package.json of the Node.js era, and introduces version control by putting the version number directly into the URL.
According to the style guide, it is recommended to load modules into a file called deps.ts and import them indirectly from there in the project.

Here is a tool, UDD, to help you manage the module version.

https://github.com/hayd/deno-udd

It seems that UDD stands for Update Deno Dependencies.

By the way, why does the Sauropod of the main image (↓) have a cow-like atmosphere?

Raising and lowering its long neck to eat grass that grows directly on the ground is obviously useless, so I think the survival of the species is in jeopardy...

Installation

It is available at deno.land/x. Let's install it with deno install.

❯ deno install -A -f -n udd https://deno.land/x/udd@0.5.0/main.ts
(logs...)
✅ Successfully installed udd
/Users/kawarimidoll/.deno/bin/udd

The default installation directory is ~/.deno/bin. Make sure that your PATH includes this directory.

If you run it with no arguments, you can see help.

❯ udd
usage: udd [-h] [--dry-run] [--test TEST] file [file ...]

udd: Update Deno Dependencies

Positional arguments:
  file          files to update dependencies

Optional arguments:
 -h, --help     show this help text
 --dry-run      test what dependencies can be updated
 --test TEST    command to run after each dependency update e.g. "deno test"

Usage

udd checks the version of the modules in the file, and updates them all at once.

❯ # basic
❯ udd deps.ts
❯ # just check
❯ udd deps.ts --dry-run
❯ # multiple files
❯ udd main.ts util.ts
❯ # bulk
❯ udd *.ts

Modules that do not contain a version number in the import URL will be skipped.

If you add the --test option, it will update the file after making sure that the test passes.

❯ udd deps.ts --test="deno test"

Basically, you can run it without any configuration, so you can try it right away.
Another advantage is that if you no longer use this tool, there is no debt associated with it.

Where to get support

At the time of writing, the following registries have been updated.
Most of the commonly used ones in Deno are supported.

Configuration

As mentioned above, no configuration is required for the basic operation, but there are a few useful settings that can be found here.

Respecting Semver

Just like package.json in Node.js, you can fix the major version by adding a token.
This is specified in the hash of the module URL. This is a very interesting idea.

^ Fix the major version
- If the major version is 0, fix the minor version.
~ Fix major and minor versions
- If the major version is 0, the minor version will be updated.
<[version] Fix to a lower version (in semver) than the specified version.
= Do not update.

< requires you to specify the upper version limit, others refer to the version specification contained in the URL.

Use it with Velociraptor

This is a personal preference, but I like to use Velociraptor for all the commands used in the Deno project.

https://velociraptor.run

Add a configuration like this to velociraptor.yml.

scripts:
  deps:
    desc: Update dependencies with ensuring pass tests
    cmd: udd deps.ts --test="deno test -Ar"

Now you can use vr deps to update the module while checking that the test passes.

This configuration is included in my template.

https://github.com/kawarimidoll/deno-dev-template

Closure

This will allow us to "test and update" and reduce the psychological and work load of updating modules.
As a result, the life of the project will be extended.

This is a translation of the following article.
Please leave comments if there are any mistakes in the translation.

https://zenn.dev/kawarimidoll/articles/d4e5ac8770e024

How to fix [deno-ts 2339] in the code for Deno Deploy

カワリミ人形 — Sat, 28 Aug 2021 00:38:56 +0000

I am studying Deno Deploy.

This article summarizes how to deal with the [deno-ts 2339] error I encountered while writing code for Deno Deploy.

Errors that occur

The error is the one displayed in the editor, [deno-ts 2339] [E] Property 'respondWith' does not exist on type 'Event'.

As an example, we will use the code from the Hello World page of the official documentation:

// server.ts
addEventListener("fetch", (event) => {
  const response = new Response("Hello World!", {
    headers: { "content-type": "text/plain" },
  });
  event.respondWith(response);
});

Even with all this code, the error occurs.

There is a warning that "respondWith is not defined in Event".

It can be ignored by the Deno Deploy environment and deployctl, and deno lint does not get particularly angry.
In other words, LSP is just giving you a warning, and you don't need to worry about it.
However, it is not very pleasant to keep getting errors during development. To be honest, it bothers me.

How to deal with it

An issue about it was raised in the deploy_feedback repository.

https://github.com/denoland/deploy_feedback/issues/13

And this issue was mentioned. We can use this method.

https://github.com/denoland/deployctl/issues/24#issuecomment-819272065

First, generate a type definition file.

❯ deployctl types > deploy.d.ts

Next, add Triple-Slash Directives on the first part in server.ts.

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

/// <reference path="./deploy.d.ts" />

addEventListener("fetch", (event) => {
  const response = new Response("Hello Deno Deploy!", {
    headers: { "content-type": "text/plain" },
  });
  event.respondWith(response);
});

This will remove the error.

But now deployctl run . /server.ts fails.

To make it work correctly, you need to add the libs option at runtime.

❯ deployctl run --libs="" ./server.ts

This completes the error handling and adjusting the command for execution.

Use task runner

It is tedious to type the options every time.
You can use Velociraptor, a task runner for Deno, to register the commands to be entered each time.

https://velociraptor.run/

Add the following description to velociraptor.yml.

scripts:
  dev:
    desc: Starts local server
    cmd: deployctl run --libs="" --watch ./server.ts

You can now start a local server with vr dev.

❯ vr dev

Closure

Personally, I think that more and more Deno development will be written with the assumption that it will run on Deno Deploy.
That's why I included it in my template repository.

https://github.com/kawarimidoll/deno-dev-template

This is a translation of the following article.
Please leave comments if there are any mistakes in the translation.

https://zenn.dev/kawarimidoll/articles/efed8ada433f24