Social-graphcis-library
Tags: javascript, webdev, typescript, opensource
Published: 2022-09-02 07:34:38

Unbelievable how fast time flies. It's been 2 years now since I started the project Social-graphics-library project. But what is SGL actually? The Social-graphics-library is a NPM project, which is designed to dynamically generate social media graphics,
based on templates.

The project is aimed at gaming communities, companies, and social
and social media platforms to automatically and quickly generate graphics consistently, adapted to the user.

The project is currently available in the Version:

[![npm version](https://badge.fury.io/js/social-graphics-library.svg)](https://badge.fury.io/js/social-graphics-library)

Downloads:

![npm](https://img.shields.io/npm/dt/social-graphics-library)

[https://github.com/Social-graphics-library/Social-graphics-library](https://github.com/Social-graphics-library/Social-graphics-library)

[https://www.npmjs.com/package/social-graphics-library](https://www.npmjs.com/package/social-graphics-library
)
## Installation

> For the latest stable version:

```bash
npm i social-graphics-library
```

## Introduction

The **Social Graphics Library** uses `<canvas>`
to generate SVG, PNG, JPEG, and WebP graphics for community team members and players.

<img src="https://raw.githubusercontent.com/JosunLP/Social-graphics-library/master/assets/sgl.png" alt="Logo" width="200px" height="auto" align="right" position="absolute">

## Support

There is also support via the [Software Support Discord Server](https://discord.gg/fraspbc)

## Structure

The static function `generator` is used to generate a graphic
called on the class `SGL`:

```typescript
new SGL.generator(
    teamName,
    playerName,
    mode,
    containerId,
    imgMode
  );
```

Alternatively, if several graphics are to be generated, the `multiGenerator` method can be called:

```typescript
new SGL.multiGenerator(tName, pName, [{
          mode: 'twitch-title',
          containerId: 'img-container-1',
          imgMode: 'jpeg'
      }, {
          mode: 'elavate-title',
          containerId: 'img-container-2',
          imgMode: 'jpeg',
          generateLink: true
      }]
```

## Modifiers

- Team name:
  - The team name
- Player name:
  - The name of the player
- Mode:
  - The mode of the image to be generated
    - youtube-title
      - Generates a Youtube cover picture
    - twitch-title
      - Generates a Twitch cover photo
    - twitter-title
      - Generates a Twitter cover photo
    - elavate-title
      - Generates a Youtube cover picture
    - gaming
      - Generates a gaming logo
- Container ID:
  - Indicates the ID of the container which is the target for
       the generated image is used
- Image mode:
  - The mode of the image to be generated
    - png
    - svg
    - jpeg
    - webp
- Generate Link
  - This alternative mode ensures the automatic rendering of a download link
    - true
    - false

---

## DataURL only

It is possible to generate only the dataURL of the desired image and to return it.
For this, the method `getImageDataUrl` is called on the class`SGL`. This returns the corresponding DataURL as a promise.
An exemplary call:

```typescript
await new SGL.getImageDataUrl (
  document.getElementById ('M. Mustermann'). value,
  document.getElementById ('Mustercorp'). value,
  'logo',
  'webp'
));
```

---

## Inject Template (Experimental Feature)

It is possible to inject your own templates locally as an alternative to forking the project. To do this, simply install the NPM package with `npm i social-graphics-library`, then a template can be injected after initialization with the following method:

```typescript
new SGL.inject([
  {
    "callName": "template_name",
    "template": new Template()
  }
])
```

---

## Check template

To prevent possible errors, a template that has already been injected and one that has not yet been injected can be checked.
The `checkTemplate` method is available for this purpose. This returns a bool or a response object.

An exemplary call:

```typescript
SGL.checkTemplate("basic", "example_template")
// Returns true or false
SGL.checkTemplate("advanced", "example_template", new Example_Template())
// Returns true or false
SGL.checkTemplate("all")
// Returns either true or a response object
```

> There are 3 usage modes available for this endpoint:
>
> - basic
> - Checks if an already injected template exists and is valid.
> - Returns a bool.
> - advanced
> - Checks if a template passed at this point is present and valid.
> - Returns a bool.
> - all
> - Checks all already injected templates.
> - Returns either true or a response object.
>
> The default behavior for missing parameters is to return false.
---

## Query all injected templates

It is possible to query all injected templates. The 'getInjectedTemplates' method is available for this purpose. The return object contains an array of objects that contain the names and classes of the injected templates.

```typescript
SGL.getInjectedTemplates()
// Returns an array of objects
// Example:
// [
// {
// "callName": "example_template",
// "template":{}
// },
// {
// "callName": "example_template2",
// "template":{}
// }
//]
```

---

## Templates

In order to be able to generate a graphic, so-called template files must be prepared. These are typescript classes in which the basic data are stored.

A simple template is structured as follows:

```typescript
export class Example_Template {
  static readonly width: number = 1000;
  static readonly height: number = 1000;
  static template(teamName: string, playerName: string): string {
    teamName;
    playerName;
    return 'svg string';
  }
}
```

> The class always(!) has a field for the width, one for the height and a method which returns the SVG string.
For creating and customizing, various templates for the major social media platforms are available in the `assetes` folder in .afpub format. These can be opened and edited with programs from the [Affinity family from Serif](http://affinity.serif.com/). Alternatively, the files generated from them are located in the `svg` directory.

## Attention

> When creating an SVG file, make sure that the dynamic parts are stored as TEXT and not as a vector.
After the SVG is ready, it can be saved in the `svg` directory and the source code of the SVG is fed as a string into the `template()` method. Thereby, the corresponding test places are replaced by the variables that are passed to the method.

As long as the name of the file (and the class) is one of the existing ones, except for the example, the example template can now simply be replaced, and it will work with the new one. Should the name be different
you have to add the class in the SGL file in the `generator` methods.

After that, just compile, include, and it is ready.

---

## Template generator

The [SGL Template Generator](https://github.com/Social-graphics-library/Template-Generator) is an Electron-based tool for generating JavaScript/TypeScript template classes for the Social Graphics Library from SVG files. Documentation for the tool can be found in the corresponding repository, as well as download links for the current version.

---

## Preview

![Example Gif](https://raw.githubusercontent.com/JosunLP/Social-graphics-library/master/assets/Demo.gif)