docs: updates on workflows

Added information on documentation

.codecov.yml

@@ -46,6 +46,7 @@ coverage:
     - "docs"
     - "scripts"
     - "tests"
+    - "samples"
 
 flags:
   src:

.typo-ci.yml

@@ -20,6 +20,7 @@ dictionaries:
 # Any files/folders we should ignore?
 excluded_files:
   - "vendor/**/*"
+  - "samples/**/*"
   - "node_modules/**/*"
   - "*.key"
   - "*.enc"
@@ -38,4 +39,4 @@ excluded_words:
   - typoci
 
 # Would you like filenames to also be spellchecked?
-spellcheck_filenames: true
+spellcheck_filenames: true

README.md

@@ -43,7 +43,6 @@
 [![codecov](https://codecov.io/gh/AlexRogalskiy/code-formats/branch/master/graph/badge.svg?token=F69zGy8tiW)](https://codecov.io/gh/AlexRogalskiy/code-formats)
 [![CI](https://github.com/AlexRogalskiy/code-formats/workflows/CI/badge.svg)](https://github.com/AlexRogalskiy/code-formats/actions/workflows/build.yml)
 [![GitHub Super-Linter](https://github.com/AlexRogalskiy/code-formats/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)
-[![GitHub JSON-Validator](https://github.com/AlexRogalskiy/code-formats/workflows/Validate%20JSONs/badge.svg)](https://github.com/OrRosenblatt/validate-json-action)
 [![BCH compliance](https://bettercodehub.com/edge/badge/AlexRogalskiy/code-formats?branch=master)](https://bettercodehub.com/)
 
 [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/AlexRogalskiy/code-formats)
@@ -90,20 +89,27 @@ For the tech stack, ***Styled Code Formats*** using Typescript and serverless fu
 It's simple, you can copy paste this markdown content, like this one:
 
 ```
-![Styled Code Formats](https://styled-code-formats.vercel.app/api?type=[value]&encoding=[value]&fullPage=[value]&width=[value]&height=[pattern]&selector=[value])
+![Styled Code Formats](https://styled-code-formats.vercel.app/api?theme=[value]&type=[value]&encoding=[value]&fullPage=[value]&width=[value]&height=[pattern]&selector=[value])
 ```
 
 There are several options you can use from the list:
 
 |  Options                | Description                            |   Type                     | Example       | Query Params            |
 | ----------------------- | -------------------------------------- | -------------------------- | ------------- | ----------------------- |
-| **\[Type]**             | Image type                             | <code>String</code>        | png/jpeg      | `?type=[value]`         |
+| **\[Theme]**            | Screenshot theme                       | <code>String</code>        | default       | `?theme=[value]`        |
+| **\[Type]**             | Image type                             | <code>String</code>        | png/jpeg      | `&type=[value]`         |
 | **\[Encoding]**         | Image encoding                         | <code>String</code>        | base64/binary | `&encoding=[value]`     |
 | **\[FullPage]**         | Enable/disable full page view          | <code>Boolean</code>       | true          | `&fullPage=[value]`     |
 | **\[Width]**            | Screenshot image width                 | <code>String</code>        | 800px         | `&width=[value]`        |
 | **\[Height]**           | Screenshot image height                | <code>String</code>        | 800px         | `&height=[value]`       |
 | **\[Selector]**         | Html element selector                  | <code>String</code>        | #element      | `&selector=[value]`     |
 
+Here is a list of supported screenshot themes:
+
+| **Name**                          | **Value**                     |
+| --------------------------------- | ----------------------------- |
+| **Default**                       | default                       |
+
 ## *Example*
 
 This is example of using ***Styled Code Formats***:
@@ -116,51 +122,63 @@ curl -d "data=Y29uc29sZS5sb2coImhlbGxvIHdvcmxkIik=" -X POST https://styled-code-
 
 - NodeJS script:
 
-```javascript
-import fs from "fs";
-import qs from "qs";
-import { post } from "request";
-import { promisify } from "util";
-
-const postAsync = promisify(post);
-const readFileAsync = promisify(fs.readFile);
-
-const getScreenshot = async () => {
-  const code = await readFileAsync("./sample.tsx");
-  const language = "tsx";
-
-  const params = {
-    backgroundColor: "#E6EDF8",
-    dropShadow: true,
-    dropShadowBlurRadius: "68px",
-    dropShadowOffsetY: "20px",
-    fontFamily: "Fira Code",
-    fontSize: "14px",
-    lineHeight: "133%",
-    lineNumbers: false,
-    paddingHorizontal: "35px",
-    paddingVertical: "49px",
-    squaredImage: false,
-    theme: "nord",
-    widthAdjustment: true,
-    language,
-  };
-
-  try {
-    const { body } = await postAsync({
-      url: `https://styled-code-formats.vercel.app/api?${qs.stringify(params)}`,
-      formData: {
-        data: code.toString("base64"),
-      },
-    });
-
-    console.log(body);
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-getScreenshot();
+```typescript
+import { readFile } from 'fs'
+import { stringify } from 'querystring'
+
+import * as fetchImport from 'isomorphic-unfetch'
+
+import { promisify } from 'util'
+
+const fetch = fetchImport.default || fetchImport
+const readFileAsync = promisify(readFile)
+
+const getScreenshot = async (): Promise<void> => {
+    const code = await readFileAsync('./examples/screenshot.ts')
+
+    const language = 'ts'
+
+    const params = {
+        backgroundColor: '#E6EDF8',
+        dropShadow: true,
+        dropShadowBlurRadius: '68px',
+        dropShadowOffsetY: '20px',
+        fontFamily: 'Fira Code',
+        fontSize: '14px',
+        lineHeight: '133%',
+        lineNumbers: false,
+        paddingHorizontal: '35px',
+        paddingVertical: '49px',
+        squaredImage: false,
+        theme: 'nord',
+        widthAdjustment: true,
+        language,
+    }
+
+    try {
+        const option = {
+            method: 'POST',
+            body: code.toString('base64'),
+        }
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const response = await fetch(
+            `https://styled-code-formats.vercel.app/api?${stringify(params)}`,
+            option
+        )
+
+        if (response.status === 200) {
+            console.log(response)
+        } else {
+            console.error(response)
+        }
+    } catch (error) {
+        console.error(error)
+    }
+}
+
+void getScreenshot()
 ```
 
 ## *Visitor stats*

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     roots: ['<rootDir>/tests/'],
     verbose: true,
     clearMocks: true,

package.json

@@ -2,6 +2,7 @@
     "name": "styled-code-formats",
     "version": "0.0.0-dev",
     "description": "Automatically generate styled formatted code (png, jpeg) upon request",
+    "type": "module",
     "main": "api/index.ts",
     "license": "GPL-3.0",
     "scripts": {
@@ -13,6 +14,7 @@
         "lint": "eslint --cache --fix --quiet --cache-location ./node_modules/.cache/ --format codeframe --ext js,ts .",
         "lint:clean": "del-cli .eslintcache",
         "lint:json": "node_modules/.bin/jsonlint ./package.json --quiet",
+        "sample": "cd samples && tsc && node ./dist/screenshot.js",
         "pretty": "pretty-quick --staged --pattern '!test/tests/lint/**'",
         "license": "license-checker --json > licenses.json",
         "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",

samples/src/screenshot.ts

@@ -0,0 +1,56 @@
+import { readFile } from 'fs'
+import { stringify } from 'querystring'
+
+import * as fetchImport from 'isomorphic-unfetch'
+
+import { promisify } from 'util'
+
+const fetch = fetchImport.default || fetchImport
+const readFileAsync = promisify(readFile)
+
+const getScreenshot = async (): Promise<void> => {
+    const code = await readFileAsync('./src/screenshot.ts')
+
+    const language = 'ts'
+
+    const params = {
+        backgroundColor: '#E6EDF8',
+        dropShadow: true,
+        dropShadowBlurRadius: '68px',
+        dropShadowOffsetY: '20px',
+        fontFamily: 'Fira Code',
+        fontSize: '14px',
+        lineHeight: '133%',
+        lineNumbers: false,
+        paddingHorizontal: '35px',
+        paddingVertical: '49px',
+        squaredImage: false,
+        theme: 'nord',
+        widthAdjustment: true,
+        language,
+    }
+
+    try {
+        const option = {
+            method: 'POST',
+            body: code.toString('base64'),
+        }
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const response = await fetch(
+            `https://styled-code-formats.vercel.app/api?${stringify(params)}`,
+            option
+        )
+
+        if (response.status === 200) {
+            console.log(response)
+        } else {
+            console.error(response)
+        }
+    } catch (error) {
+        console.error(error)
+    }
+}
+
+void getScreenshot()

samples/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "module": "ESNext",
+        "noImplicitAny": true,
+        "removeComments": true,
+        "preserveConstEnums": true,
+        "sourceMap": true,
+        "noEmit": false,
+        "moduleResolution": "Node",
+        "outDir": "./dist"
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts"
+    ]
+}

src/clients/screenshot.client.ts

@@ -14,14 +14,14 @@ const createScreenshot = async (parsedRequest: Required<ParsedRequest>): Promise
 const getSessionScreenshot = async (
     parsedRequest: Required<ParsedRequest>
 ): Promise<Buffer | string | void> => {
-    const { url, imageOptions, resourceOptions, pageOptions } = parsedRequest
+    const { routeOptions, imageOptions, resourceOptions, pageOptions } = parsedRequest
 
     const session = await getSession()
 
     try {
         await session.setup()
 
-        return await session.createScreenshot(url, imageOptions, resourceOptions, pageOptions)
+        return await session.createScreenshot(routeOptions.url, imageOptions, resourceOptions, pageOptions)
     } finally {
         await session.teardown()
     }
@@ -31,7 +31,7 @@ export async function screenshotRenderer(parsedRequest: ParsedRequest): Promise<
     const { imageOptions, resourceOptions, pageOptions } = profile.screenshotOptions
 
     const request: Required<ParsedRequest> = {
-        url: parsedRequest.url,
+        routeOptions: parsedRequest.routeOptions,
         imageOptions: mergeProps<ImageOptions>(imageOptions, parsedRequest.imageOptions),
         resourceOptions: mergeProps<ResourceOptions>(resourceOptions, parsedRequest.resourceOptions),
         pageOptions: mergeProps<PageOptions>(pageOptions, parsedRequest.pageOptions),

src/configs/config.ts

@@ -7,7 +7,6 @@ import {
     LOCATION_OPTIONS,
     OUTPUT_OPTIONS,
     PAGE_OPTIONS,
-    QUERY_OPTIONS,
     RESOURCE_OPTIONS,
     ROUTE_OPTIONS,
 } from '../constants/constants'
@@ -31,7 +30,6 @@ export const CONFIG: Readonly<ConfigRecord> = {
             imageOptions: IMAGE_OPTIONS,
             pageOptions: PAGE_OPTIONS,
         },
-        queryOptions: QUERY_OPTIONS,
         outputOptions: OUTPUT_OPTIONS,
     },
     prod: {
@@ -43,7 +41,6 @@ export const CONFIG: Readonly<ConfigRecord> = {
             imageOptions: IMAGE_OPTIONS,
             pageOptions: PAGE_OPTIONS,
         },
-        queryOptions: QUERY_OPTIONS,
         outputOptions: OUTPUT_OPTIONS,
     },
     test: {
@@ -55,7 +52,6 @@ export const CONFIG: Readonly<ConfigRecord> = {
             imageOptions: IMAGE_OPTIONS,
             pageOptions: PAGE_OPTIONS,
         },
-        queryOptions: QUERY_OPTIONS,
         outputOptions: OUTPUT_OPTIONS,
     },
 }

src/constants/constants.ts

@@ -2,7 +2,7 @@ import boxen from 'boxen'
 
 import { ChromeArgOptions, LaunchOptions } from 'puppeteer-core'
 
-import { Headers, CarbonFormatOptions, QueryFormatOptions, RouteOptions } from '../../typings/domain-types'
+import { Headers, RouteOptions, ThemeFormatOptions } from '../../typings/domain-types'
 import { ImageOptions, LocationOptions, PageOptions, ResourceOptions } from '../../typings/browser-types'
 
 import { strToEnum } from '../utils/commons'
@@ -94,34 +94,10 @@ export const BROWSER_OPTIONS: Readonly<LaunchOptions & ChromeArgOptions> = {
     ignoreDefaultArgs: ['--disable-extensions'],
 }
 
-/**
- * Carbon format configuration options
- */
-export const QUERY_OPTIONS: Readonly<CarbonFormatOptions> = {
-    bg: '#FFFFFF',
-    ds: false,
-    dsblur: '50px',
-    dsyoff: '20px',
-    es: '2x',
-    fm: 'Fira Code',
-    fs: '18px',
-    l: 'auto',
-    lh: '110%',
-    ln: false,
-    pv: '0',
-    ph: '0',
-    t: 'material',
-    si: false,
-    wa: true,
-    wc: true,
-    wt: 'none',
-    wm: false,
-}
-
 /**
  * Query format configuration mappings
  */
-export const QUERY_FORMAT_MAPPINGS: Readonly<QueryFormatOptions> = {
+export const QUERY_FORMAT_MAPPINGS: Readonly<ThemeFormatOptions> = {
     backgroundColor: 'bg',
     dropShadow: 'ds',
     dropShadowBlur: 'dsblur',