@netcentric/eddys-video v1.1.1

Netcentric Block Collection

Custom and extendable block collection

Installation

In the Edge delivery project folder run

npm i @netcentric/eddys-block-collection //TODO change name to the correct package/repo

it will download it as a dependency and create a /libs folder with all th e blocks to reference.

Usage

in your /blocks folder create a new block with a css and a js file (the name can be the same or different that the block you want to use)

JS file: There Are 2 ways to use a block from the Block Collection

Option 1

Use an already existing block with no possibility to extend the js or use a custom block developed using a js class Not extending the js class

You need to import the defaultDecorate function form the libs/blocks block you want to use. And export the async function decorate to get your code executed when the block is in place.

import defaultDecorate from '/libs/blocks/<original-block-name>/<original-block-name>.js';

export default async function decorate(block) {
    // Custom decoration can be done here
  await defaultDecorate(block);
}

Option 2

Use a custom block developed using a js class extending the js class

You need to import the defaultDecorate and the OriginalBlockName (the class with the block functionality) form the libs/blocks block you want to use. And export the async function decorate to get your code executed when the block is in place. If we are extending the class we need to pass the extended class as a param in the defaultDecorate function

import { defaultDecorate, OriginalBlockName } from '/libs/blocks/<original-block-name>/<original-block-name>.js';

class BlockName extends OriginalBlockName {
  constructor(block) {
    super(block);
  }
    // Code here
}

export default async function decorate(block) {
  // Custom decoration can be done here
  await defaultDecorate(block, BlockName); // Note that you need to pass the extended class to the defaultDeaorate
}

CSS file:

You need to import the CSS file form the libs/blocks block you want to use. And then you can add as much extra CSS you want.

@import "/libs/blocks/<original-block-name>/<original-block-name>.css";

/* you can add custom css here */ 

Issue template

• .github/ISSUE_TEMPLATE.md

PR template

• .github/PULL_REQUEST_TEMPLATE.md --> automatically closes connected issue

Workflows

• CI --> npm ci, test and build
• CodeQL --> Perform CodeQL Analysis (Security, etc.)
• Release --> semantic-release:
  • Creates release notes
  • Updates CHANGELOG
  • Updates package.json version
  • Creates Git tag/release
  • Publish package to NPM
• Manual Release --> same as Release, but can be triggered manually in Actions tab

Release

• based on Angular Commit Message Conventions in commits - https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit-message-header
• Commit message format is used to build:
  • Release notes
  • Changelog updates
  • NPM package semver

Commit message Convention

<type>(<scope>): <short summary>
│       │             │
│       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
│       │
│       └─⫸ Commit Scope (optional): project|based|list
│
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test