From 6b5d7d44f8c534d75793fed60671ad1a1d0d5e69 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 19 Oct 2022 11:46:37 -0300 Subject: [PATCH] Change to TypeScript --- README.md | 52 ++++++++++++------------- api/{index.js => index.ts} | 6 ++- docs/ptbr/README.md | 52 ++++++++++++------------- package.json | 7 ++-- src/{builder.d.ts => @builder/index.ts} | 17 ++++---- src/data/{data.json => index.json} | 0 src/{builder.js => index.ts} | 22 +++++------ vercel.json | 2 +- 8 files changed, 80 insertions(+), 78 deletions(-) rename api/{index.js => index.ts} (56%) rename src/{builder.d.ts => @builder/index.ts} (67%) rename src/data/{data.json => index.json} (100%) rename src/{builder.js => index.ts} (74%) diff --git a/README.md b/README.md index 8c9eb0b..9fb5e09 100644 --- a/README.md +++ b/README.md @@ -12,22 +12,22 @@ -  This project serves Devicon v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly. + This project serves Devicon v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly. > 1. *Only icons that can be converted to font, in other words, only monochromatic plain icons.* ## List of contents [**1. Overview**](#overview)\ -    [**1.1. Selecting icon**](#11-selecting-icon)\ -    [**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\ -        [**1.2.1. theme**](#121-theme)\ -        [**1.2.2. color**](#122-color)\ -    [**1.3. Selecting version**](#13-selecting-version)\ -    [**1.4. Resizing**](#14-resizing)\ + [**1.1. Selecting icon**](#11-selecting-icon)\ + [**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\ +  [**1.2.1. theme**](#121-theme)\ +  [**1.2.2. color**](#122-color)\ + [**1.3. Selecting version**](#13-selecting-version)\ + [**1.4. Resizing**](#14-resizing)\ [**2. Examples**](#2-examples)\ -    [**2.1. Markdown**](#21-markdown)\ -    [**2.2. HTML**](#22-html)\ -    [**2.3. Results**](#23-results)\ + [**2.1. Markdown**](#21-markdown)\ + [**2.2. HTML**](#22-html)\ + [**2.3. Results**](#23-results)\ [**3. Dependencies**](#3-dependencies)
@@ -36,7 +36,7 @@
## 1. Overview -  Use the base URL below to access the API. + Use the base URL below to access the API. ```https https://deviconapi.vercel.app/? ``` @@ -55,7 +55,7 @@ https://deviconapi.vercel.app/? ### 1.1. Selecting icon -  Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size. + Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size. ***Example*** ```https @@ -70,8 +70,8 @@ https://deviconapi.vercel.app/? ### 1.2. Selecting theme or color -  You can choose the color of the icon by adding the `theme` or `color` parameter, using `&` after the icon name.\ -  Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work. + You can choose the color of the icon by adding the `theme` or `color` parameter, using `&` after the icon name.\ + Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work.
@@ -79,16 +79,16 @@ https://deviconapi.vercel.app/?
### 1.2.1. theme -  This parameter receives `light` or `dark` as value. Therefore, if you are using the icon into a light scheme, selecting `light` will fill the icon with `#000000`. Otherwise, if the icon are in a dark scheme, by selecting `dark` the icon will be filled with `#ffffff`. + This parameter receives `light` or `dark` as value. Therefore, if you are using the icon into a light scheme, selecting `light` will fill the icon with `#000000`. Otherwise, if the icon are in a dark scheme, by selecting `dark` the icon will be filled with `#ffffff`. ***Example using `dark`***\ -  Next.js icon filled in `#ffffff` + Next.js icon filled in `#ffffff` ```https /?nextjs&theme=dark ``` ***Example using `light`***\ -  Next.js icon filled in `#000000` + Next.js icon filled in `#000000` ```https /?nextjs&theme=light ``` @@ -99,23 +99,23 @@ https://deviconapi.vercel.app/? ### 1.2.2. color -  This parameter receives any hexadecimal color and CSS colors as value. + This parameter receives any hexadecimal color and CSS colors as value.
**Note that hexadecimal colors can not have `#` on the request!**
-  Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`. + Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`. ***Example using hexadecimal***\ -  JavaScript icon filled in `#ff5656` + JavaScript icon filled in `#ff5656` ```https /?javascript&color=ff5656 ``` ***Example using CSS color***\ -  JavaScript icon filled in `#ff0000` + JavaScript icon filled in `#ff0000` ```https /?javascript&color=red ``` @@ -126,9 +126,9 @@ https://deviconapi.vercel.app/? ### 1.3. Selecting version -  Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter. + Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter. -  Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`. + Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`.
@@ -137,7 +137,7 @@ https://deviconapi.vercel.app/?
***Example using `line`***\ -  Apache icon in `line` version where default is `plain`. + Apache icon in `line` version where default is `plain`. ```https /?apache&version=line ``` @@ -148,10 +148,10 @@ https://deviconapi.vercel.app/? ### 1.4. Resizing -  If you are using Markdown you can resize the icon without add an `img` element with `width` attribute, for instance. Just add some value to the `size` parameter and you are ready to go. + If you are using Markdown you can resize the icon without add an `img` element with `width` attribute, for instance. Just add some value to the `size` parameter and you are ready to go. ***Example using 50px***\ -  Node.js icon in 50×50px. + Node.js icon in 50×50px. ```https /?nodejs&size=50 ``` diff --git a/api/index.js b/api/index.ts similarity index 56% rename from api/index.js rename to api/index.ts index 32944b2..0c07bb6 100644 --- a/api/index.js +++ b/api/index.ts @@ -4,9 +4,11 @@ @license MIT *//***/ -const SVGBuilder = require('../src/builder'); +import { VercelResponse } from '@vercel/node'; +import { Query } from '../src/@builder'; +import SVGBuilder from '../src'; -module.exports = async (req, res) => { +module.exports = async (req: { query: Query }, res: VercelResponse) => { SVGBuilder(req.query) .then(svg => { res.setHeader('Content-Type', 'image/svg+xml'); diff --git a/docs/ptbr/README.md b/docs/ptbr/README.md index 086f2f7..e0202c1 100644 --- a/docs/ptbr/README.md +++ b/docs/ptbr/README.md @@ -11,22 +11,22 @@ -  Este projeto serve os ícones¹ Devicon v2.15.1 via API, dessa forma você pode editar a cor do ícone e o tamanho em tempo real. + Este projeto serve os ícones¹ Devicon v2.15.1 via API, dessa forma você pode editar a cor do ícone e o tamanho em tempo real. > 1. *Apenas ícones que podem ser convertidos para fonte, em outras palavras, apenas ícones simples monocromáticos.* ## Lista de conteúdos [**1. Visão geral**](#1-visão-geral)\ -    [**1.1. Selecionando o ícone**](#11-selecionando-o-ícone)\ -    [**1.2. Selecionando o tema ou a cor**](#12-selecionando-o-tema-ou-a-cor)\ -        [**1.2.1. tema**](#121-tema)\ -        [**1.2.2. cor**](#122-cor)\ -    [**1.3. Selecionando a versão**](#13-selecionando-a-versão)\ -    [**1.4. Redimensionando**](#14-redimensionando)\ + [**1.1. Selecionando o ícone**](#11-selecionando-o-ícone)\ + [**1.2. Selecionando o tema ou a cor**](#12-selecionando-o-tema-ou-a-cor)\ +  [**1.2.1. tema**](#121-tema)\ +  [**1.2.2. cor**](#122-cor)\ + [**1.3. Selecionando a versão**](#13-selecionando-a-versão)\ + [**1.4. Redimensionando**](#14-redimensionando)\ [**2. Exemplos**](#2-exemplos)\ -    [**2.1. Markdown**](#21-markdown)\ -    [**2.2. HTML**](#22-html)\ -    [**2.3. Resultados**](#23-resultados)\ + [**2.1. Markdown**](#21-markdown)\ + [**2.2. HTML**](#22-html)\ + [**2.3. Resultados**](#23-resultados)\ [**3. Dependências**](#3-dependências)
@@ -35,7 +35,7 @@
## 1. Visão geral -  Use a URL base abaixo para acessar a API. + Use a URL base abaixo para acessar a API. ```https https://deviconapi.vercel.app/? ``` @@ -54,7 +54,7 @@ https://deviconapi.vercel.app/? ### 1.1. Selecionando o ícone -  Apenas adicione o nome do ícone após a URL base. Se nenhum outro parâmetro é adicionado será retornado o ícone padrão na sua cor padrão com 128×128px de tamanho. + Apenas adicione o nome do ícone após a URL base. Se nenhum outro parâmetro é adicionado será retornado o ícone padrão na sua cor padrão com 128×128px de tamanho. ***Exemplo*** ```https @@ -69,8 +69,8 @@ https://deviconapi.vercel.app/? ### 1.2. Selecionando o tema ou a cor -  Você pode escolher a cor do ícone adicionando o parâmetro `theme` ou `color`, usando `&` após o nome do ícone.\ -  É importante notar que o parâmetro `theme` tem prioridade sobre `color`, então se ambos estão presentes apenas `theme` irá funcionar. + Você pode escolher a cor do ícone adicionando o parâmetro `theme` ou `color`, usando `&` após o nome do ícone.\ + É importante notar que o parâmetro `theme` tem prioridade sobre `color`, então se ambos estão presentes apenas `theme` irá funcionar.
@@ -78,17 +78,17 @@ https://deviconapi.vercel.app/?
### 1.2.1. tema -  Este parâmetro recebe `light` ou `dark` como valores. Portanto, se você estiver usando o ícone dentro de um esquema claro, selecionando `light` preencherá o ícone com `#000000`. Pelo contrário, se o ícone estiver em um esquema escuro, selecionando `dark` o ícone será preenchido com `#ffffff`. + Este parâmetro recebe `light` ou `dark` como valores. Portanto, se você estiver usando o ícone dentro de um esquema claro, selecionando `light` preencherá o ícone com `#000000`. Pelo contrário, se o ícone estiver em um esquema escuro, selecionando `dark` o ícone será preenchido com `#ffffff`. ***Exemplo usando `dark`***\ -  Ícone Next.js preenchido em `#ffffff` + Ícone Next.js preenchido em `#ffffff` ```https /?nextjs&theme=dark ``` ***Exemplo usando `light`***\ -  Ícone Next.js preenchido em `#000000` + Ícone Next.js preenchido em `#000000` ```https /?nextjs&theme=light ``` @@ -99,23 +99,23 @@ https://deviconapi.vercel.app/? ### 1.2.2. cor -  Este parâmetro recebe qualquer cor hexadecimal e cores CSS como valor. + Este parâmetro recebe qualquer cor hexadecimal e cores CSS como valor.
**Note que cores hexadecimais não podem ter `#` na requisição!**
-  Cores hexadecimais podem estar em qualquer dos seguintes padrões: `2ff`, `22ffff`, `abc5`, `aabbcc55`. + Cores hexadecimais podem estar em qualquer dos seguintes padrões: `2ff`, `22ffff`, `abc5`, `aabbcc55`. ***Exemplo usando hexadecimal***\ -  Ícone JavaScript preenchido em `#ff5656` + Ícone JavaScript preenchido em `#ff5656` ```https /?javascript&color=ff5656 ``` ***Exemplo usando cor CSS***\ -  Ícone JavaScript preenchido em `#ff0000` + Ícone JavaScript preenchido em `#ff0000` ```https /?javascript&color=red ``` @@ -126,9 +126,9 @@ https://deviconapi.vercel.app/? ### 1.3. Selecionando a versão -  Às vezes, ícones estão em diferentes versões e você pode especificar qual você quiser passando um valor de versão para o parâmetro `version`. + Às vezes, ícones estão em diferentes versões e você pode especificar qual você quiser passando um valor de versão para o parâmetro `version`. -  Possíveis valores de versão são: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` e `line-wordmark`. + Possíveis valores de versão são: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` e `line-wordmark`.
@@ -137,7 +137,7 @@ https://deviconapi.vercel.app/?
***Exemplo usando `line`***\ -  Ícone Apache na versão `line` onde o padrão é `plain`. + Ícone Apache na versão `line` onde o padrão é `plain`. ```https /?apache&version=line ``` @@ -148,10 +148,10 @@ https://deviconapi.vercel.app/? ### 1.4. Redimensionando -  Se você está usando Markdown você pode redimensionar o ícone sem adicionar um elemento `img` com o atributo `width`, por exemplo. Apenas adicione algum valor para o parâmetro `size` e já pode seguir adiante. + Se você está usando Markdown você pode redimensionar o ícone sem adicionar um elemento `img` com o atributo `width`, por exemplo. Apenas adicione algum valor para o parâmetro `size` e já pode seguir adiante. ***Exemplo usando 50px***\ -  Ícone Node.js em 50×50px. + Ícone Node.js em 50×50px. ```https /?nodejs&size=50 ``` diff --git a/package.json b/package.json index 0256f92..aa03cf9 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "devicon-api", - "version": "0.0.1", + "version": "1.0.0", "description": "API to change colors and size of Devicon icons.", - "main": "index.js", + "main": "index.ts", "scripts": {}, "repository": { "type": "git", @@ -25,6 +25,7 @@ "text-to-svg": "^3.1.5" }, "devDependencies": { - "@types/text-to-svg": "^3.1.1" + "@types/text-to-svg": "^3.1.1", + "@vercel/node": "^2.5.26" } } diff --git a/src/builder.d.ts b/src/@builder/index.ts similarity index 67% rename from src/builder.d.ts rename to src/@builder/index.ts index 66014f2..d98a45c 100644 --- a/src/builder.d.ts +++ b/src/@builder/index.ts @@ -12,15 +12,14 @@ type IconVersions = | 'plain-wordmark' | 'line-wordmark'; -type SVGBuilder = (query: { - [k: string]: ''; - color: string; - theme?: 'dark' | 'light'; - version?: IconVersions; - size?: number -}) => Promise; +export type Query = { + color: string, + theme: 'dark' | 'light', + version: IconVersions, + size: number +}; -type IconsObj = { +export type IconsObj = { [k: string]: { defaults: { icon: number; @@ -28,4 +27,4 @@ type IconsObj = { }; versions: IconVersions; }; -} +}; diff --git a/src/data/data.json b/src/data/index.json similarity index 100% rename from src/data/data.json rename to src/data/index.json diff --git a/src/builder.js b/src/index.ts similarity index 74% rename from src/builder.js rename to src/index.ts index b1f1c6a..e12012b 100644 --- a/src/builder.js +++ b/src/index.ts @@ -4,13 +4,14 @@ @license MIT *//***/ -const fs = require('fs'); -const path = require('path'); -const textToSVG = require('text-to-svg') - .loadSync(path.join(__dirname, './font/devicon.ttf')); +import fs from 'fs'; +import path from 'path'; +import TextToSVG from 'text-to-svg'; +import { IconsObj, Query } from './@builder'; -/** @type {SVGBuilder} */ -const SVGBuilder = async query => { +const textToSVG = TextToSVG.loadSync(path.join(__dirname, './font/devicon.ttf')); + +const SVGBuilder = async (query: Query) => { const versionPriority = [ 'original', 'plain', @@ -19,9 +20,8 @@ const SVGBuilder = async query => { 'plain-wordmark', 'line-wordmark' ]; - - /** @type {IconsObj} */ - const iconsObj = JSON.parse(fs.readFileSync(path.join(__dirname, './data/data.json'), 'utf8')); + + const iconsObj: IconsObj = JSON.parse(fs.readFileSync(path.join(__dirname, './data/index.json'), 'utf8')); const iconName = Object.keys(query) .filter(e => ![ @@ -53,6 +53,6 @@ const SVGBuilder = async query => { }); } return ``; -}; +} -module.exports = SVGBuilder; +export default SVGBuilder; diff --git a/vercel.json b/vercel.json index dbb1c3c..321bc0a 100644 --- a/vercel.json +++ b/vercel.json @@ -3,7 +3,7 @@ { "src": "/(api)?", "methods": [ "GET" ], - "dest": "/api/index.js" + "dest": "/api/index.ts" }, { "src": "/(?!(api[?]|[?])).+?",