@coffeekraken/s-frontspec

@coffeekraken/s-frontspec

MIT 2.0.0-alpha.20 - Git repository

A simple class to handle (read) frontspec.json files. A frontspec.json file is a list of things (css, js, styles, etc...) that your frontend project expose and can be used by a backend like wordpress for example...

Install

npm i @coffeekraken/s-frontspec

SFrontspec

This package expose a simple SFrontspec class that allows you to represent the frontspec.json file at the root of your project.

Features

• Read the frontspec.json file
• Apply en env to get the adapted frontspec result
• Add a default frontspec.json file to your project
• And more...

What is a frontspec?

A frontspec is a simple file that describe what your frontend has to offer like the assets (js, css, etc...), the typography styles available (h1, h2, h3, etc...), and more.

Note that for now this is a work un progress specification. More information will be available later...

Anatomy of a frontspec.json

Here's an example of frontspec.json:

export default {
  metas: {
    lang: 'en',
    title: 'Coffeekraken',
    description: 'Hello world',
    themeColor: '#FFBB00',
    author: {
      name: 'Olivier Bossel',
      email: '[e-mail]',
      url: 'https://olivierbossel.com',
    },
    og: {
      title: 'Coffeekraken',
      description: 'wiufhweiufh wiuehfiuwehf',
      type: 'website',
      url: 'https://olivierbossel.com',
      image: '/cool-image.jpg',
    },
  },
  assets: {
    js: {
      dev: {
        id: 'dev',
        type: 'module',
        defer: true,
        src: '/src/js/index.ts',
        env: 'development',
      },
      module: {
        id: 'module',
        type: 'module',
        defer: true,
        src: '/dist/js/module.es.js',
        env: 'production',
      },
      main: {
        id: 'main',
        nomodule: true,
        defer: true,
        src: '/dist/js/index.iife.js',
        env: 'production',
      },
    },
    css: {
      main: {
        id: 'main',
        defer: true,
        src: '/dist/css/index.css',
      },
    },
    html: {
      manifest: {
        id: 'manifest',
        src: './dist/favicon/favicon.html',
      },
    },
  },
  head: {},
};

Usage

Here's a simple example how to use the SFrontspec class:

import __SFrontspec from '@coffeekraken/s-frontspec';
const frontspec = new __SFrontspec();
const result = await frontspec.read();

Or Using the sugar CLI:

# read the frontspec
sugar frontspec.read
# add default frontspec to your project
sugar frontspec.add

Read parameters

SFrontspecReadParamsInterface

env

Specify the environment for which to read the frontspec for

API

For more information about the API, please check out the API documentation

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Here's all the ways you can contact us listed: