Skip to content

Commit

Permalink
feat(app): rename main class to KbHologram
Browse files Browse the repository at this point in the history 
now that everything works and this generates both svgs and html templates, the name SvgMaker doesn't make sense :-)

BREAKING CHANGE: main class name has been changed
  • Loading branch information
@thatkookooguy
thatkookooguy committed Oct 21, 2023
1 parent 4be015b commit 8a8f2b3
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 67 deletions.
72 changes: 36 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,42 +36,41 @@ $ npm install --save @kibibit/kb-hologram
### Usage

```javascript
import { SvgMaker, SvgMakerResultType } from '@kibibit/kb-hologram';

const svgMaker = new SvgMaker({
fontName: '../Comfortaa-Regular.ttf',
templateName: 'changelog-template',
height: 534 * 2,
width: 1069 * 2,
data: {
columnOne: [
'Compact folders in Explorer',
'Edit both files in diff view',
'Search results update while typing',
'Problems panel filtering by type',
'Minimap highlights errors, changes',
'Terminal minimum contrast ratio'
],
columnTwo: [
'Mirror cursor in HTML tags',
'Optional chaining support in JS\\TS',
'Extract to interface TS refactoring',
'Sass module support for @use',
'Remote - Containers improvements',
'Visual Studio Online preview'
],
title: 'achievibit',
subtitle: 'v2.1.4 - CHANGELOG',
logo: {
url: 'data:image/png;base64,<icon-data>',
alt: 'kibibit'
}
},
type: 'html'
});

const pngBuffer = await svgMaker
.render(SvgMakerResultType.PngBuffer);
import { KbHologram, KbHologramResultType } from "@kibibit/kb-hologram";

const kbHologram = new KbHologram({
fontName: "../Comfortaa-Regular.ttf",
templateName: "changelog-template",
height: 534 * 2,
width: 1069 * 2,
data: {
columnOne: [
"Compact folders in Explorer",
"Edit both files in diff view",
"Search results update while typing",
"Problems panel filtering by type",
"Minimap highlights errors, changes",
"Terminal minimum contrast ratio",
],
columnTwo: [
"Mirror cursor in HTML tags",
"Optional chaining support in JS\\TS",
"Extract to interface TS refactoring",
"Sass module support for @use",
"Remote - Containers improvements",
"Visual Studio Online preview",
],
title: "achievibit",
subtitle: "v2.1.4 - CHANGELOG",
logo: {
url: "data:image/png;base64,<icon-data>",
alt: "kibibit",
},
},
type: "html",
});

const pngBuffer = await kbHologram.render(KbHologramResultType.PngBuffer);
```

Which will return a **png buffer** for the following image:
Expand Down Expand Up @@ -101,6 +100,7 @@ Want to file a bug, contribute some code, or improve documentation? Excellent! R
You can check out some easy to start with issues in the [Easy Pick](https://github.com/Kibibit/kb-hologram/labels/Easy%20Pick).

## Contributor Code of Conduct

Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md).

By participating in this project you agree to abide by its terms.
Expand Down
28 changes: 15 additions & 13 deletions src/image-maker.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { toMatchImageSnapshot } from "jest-image-snapshot";

import { SvgMaker, SvgMakerResultType } from "./image-maker";
import { KbHologram, KbHologramResultType } from "./image-maker";
import { join } from "path";

// const toMatchImageSnapshot = configureToMatchImageSnapshot();
Expand All @@ -19,7 +19,7 @@ const customConfig = {

describe("image maker", () => {
it("should generate svg string with params", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: FONT_PATH,
templateName: "template-test-reporter",
height: HEIGHT,
Expand All @@ -30,15 +30,15 @@ describe("image maker", () => {
},
});

const svgString = await svgMaker.render(SvgMakerResultType.SvgString);
const svgString = await kbHologram.render(KbHologramResultType.SvgString);

expect(svgString).toContain("666");
expect(svgString).toContain("333");
expect(svgString).toMatchSnapshot();
});

it("should generate svg buffer", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: FONT_PATH,
templateName: "template-test-reporter",
height: HEIGHT,
Expand All @@ -49,14 +49,14 @@ describe("image maker", () => {
},
});

const svgBuffer = await svgMaker.render(SvgMakerResultType.SvgBuffer);
const svgBuffer = await kbHologram.render(KbHologramResultType.SvgBuffer);

expect(svgBuffer).toBeInstanceOf(Buffer);
expect(svgBuffer.toString("base64")).toMatchSnapshot();
});

it("should generate svg Base64 string", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: FONT_PATH,
templateName: "template-test-reporter",
height: HEIGHT,
Expand All @@ -67,13 +67,15 @@ describe("image maker", () => {
},
});

const svgB64String = await svgMaker.render(SvgMakerResultType.Base64Svg);
const svgB64String = await kbHologram.render(
KbHologramResultType.Base64Svg
);

expect(svgB64String).toMatchSnapshot();
});

it("should generate a coverage image from template", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: FONT_PATH,
templateName: "template-test-reporter",
height: HEIGHT,
Expand All @@ -84,15 +86,15 @@ describe("image maker", () => {
},
});

const pngBuffer = await svgMaker.render(SvgMakerResultType.PngBuffer);
const pngBuffer = await kbHologram.render(KbHologramResultType.PngBuffer);

// writeFile('na.png', pngBuffer);

(expect(pngBuffer) as any).toMatchImageSnapshot(customConfig);
}, 10000);

it("should generate changelog from html template", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: "../Comfortaa-Regular.ttf",
templateName: "changelog-template",
height: 534 * 2,
Expand Down Expand Up @@ -124,15 +126,15 @@ describe("image maker", () => {
type: "html",
});

const pngBuffer = await svgMaker.render(SvgMakerResultType.PngBuffer);
const pngBuffer = await kbHologram.render(KbHologramResultType.PngBuffer);

// await writeFile('nice.svg', pngBuffer);

(expect(pngBuffer) as any).toMatchImageSnapshot(customConfig);
}, 10000);

it("should generate image from html template with external template", async () => {
const svgMaker = new SvgMaker({
const kbHologram = new KbHologram({
fontName: "../Comfortaa-Regular.ttf",
templateFile: join(
__dirname,
Expand All @@ -154,7 +156,7 @@ describe("image maker", () => {
type: "html",
});

const pngBuffer = await svgMaker.render(SvgMakerResultType.PngBuffer);
const pngBuffer = await kbHologram.render(KbHologramResultType.PngBuffer);

// await writeFile('nice.svg', pngBuffer);

Expand Down
33 changes: 15 additions & 18 deletions src/image-maker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { join } from "path";
import puppeteer from "puppeteer";
import svg2png from "svg2png";

export enum SvgMakerResultType {
export enum KbHologramResultType {
Base64Png = "Base64Png",
Base64Svg = "Base64Svg",
SvgString = "SvgString",
Expand All @@ -15,15 +15,15 @@ export enum SvgMakerResultType {
}

export type StringReturnInputs =
| SvgMakerResultType.Base64Png
| SvgMakerResultType.Base64Svg
| SvgMakerResultType.SvgString;
| KbHologramResultType.Base64Png
| KbHologramResultType.Base64Svg
| KbHologramResultType.SvgString;

export type BufferReturnInputs =
| SvgMakerResultType.SvgBuffer
| SvgMakerResultType.PngBuffer;
| KbHologramResultType.SvgBuffer
| KbHologramResultType.PngBuffer;

export interface ISvgMakerBaseOptions {
export interface IKbHologramBaseOptions {
templateName?: string;
templateFile?: string | Buffer;
templateString?: string;
Expand All @@ -36,17 +36,14 @@ export interface ISvgMakerBaseOptions {
type?: "svg" | "html";
}

export class SvgMaker {
export class KbHologram {
private templateFilePath = "";
// constructor(options: ISvgMakerNameOptions)
// constructor(options: ISvgMakerFileOptions)
// constructor(options: ISvgMakerStringOptions)
constructor(public options: ISvgMakerBaseOptions) {}
constructor(public options: IKbHologramBaseOptions) {}

async render(resultType: StringReturnInputs): Promise<string>;
async render(resultType: BufferReturnInputs): Promise<Buffer>;
async render(
resultType: SvgMakerResultType = SvgMakerResultType.SvgString
resultType: KbHologramResultType = KbHologramResultType.SvgString
): Promise<string | Buffer> {
try {
const template = await this.getTemplateAsString();
Expand Down Expand Up @@ -94,24 +91,24 @@ export class SvgMaker {

await browser.close();

if (resultType === SvgMakerResultType.Base64Png) {
if (resultType === KbHologramResultType.Base64Png) {
return this.bufferToBase64String(imageBuffer);
}

return imageBuffer;
}

if (resultType === SvgMakerResultType.SvgString) {
if (resultType === KbHologramResultType.SvgString) {
return svgString;
}

const svgFile = Buffer.from(svgString, "utf8");

if (resultType === SvgMakerResultType.SvgBuffer) {
if (resultType === KbHologramResultType.SvgBuffer) {
return svgFile;
}

if (resultType === SvgMakerResultType.Base64Svg) {
if (resultType === KbHologramResultType.Base64Svg) {
return this.bufferToBase64String(svgFile, {
mime: "image/svg+xml",
ext: "svg",
Expand All @@ -123,7 +120,7 @@ export class SvgMaker {
width: this.options.width,
});

if (resultType === SvgMakerResultType.PngBuffer) {
if (resultType === KbHologramResultType.PngBuffer) {
return pngFile;
}

Expand Down

0 comments on commit 8a8f2b3

Please sign in to comment.