gem-panel: easily create layout similar to Adobe After Effects

mantou — Tue, 11 May 2021 01:33:07 +0000

Features

Drag to adjust the grid
Drag to move the panel and window
Drag and drop to adjust the panel sorting
Add commands to the panel
Cache layout
Custom style, example
Async load panel content, example
Typescript support
Lightweight, ~20kb(br)

Example

import { Layout, Panel, Window } from 'gem-panel';
import { render, html } from '@mantou/gem';

const panel1 = new Panel('p1', { title: 'p1 title', content: html`p1 content` });
const panel2 = new Panel('p2', { title: 'p2 title' });
const panel3 = new Panel('p3', { title: 'p3 title', content: html`<p3-panel></p3-panel>` });
const panel4 = new Panel('p4', { title: 'p4 title', content: html`<p4-panel></p4-panel>` });
const panel5 = new Panel('p5', { title: 'p5 title', content: html`<p5-panel></p5-panel>` });
const panel6 = new Panel('p6', { title: 'p6 title', content: html`<p6-panel></p6-panel>` });

const panels = [panel1, panel2, panel3, panel4, panel5, panel6];
const layout = new Layout([new Window([panel1, panel4, panel5]), new Window([panel2]), new Window([panel6])]);

render(
  html`
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      gem-panel::part(fixed-window) {
        box-shadow: 0 0.3em 1em rgb(0 0 0 / 40%);
      }
    </style>
    <gem-panel
      .panels=${panels}
      .layout=${layout}
      .theme=${{ backgroundColor: 'red' }}
      cache
      cache-version="1"
    ></gem-panel>
  `,
  document.body,
);

You can use <gem-panel> in other ways.

Gem-book: Quickly build a document website

mantou — Fri, 27 Nov 2020 15:41:45 +0000

Only one command is needed to build a markdown document into a website:

npx gem-book docs

See more options.

The official website example of gem-book:

{
  "scripts": {
    "build:website": "gem-book docs --title Gem-book --icon logo.png --i18n --home-mode --plugins raw --build"
  }
}

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Netlify deploy settings:

DEV Community: mantou

gem-panel: easily create layout similar to Adobe After Effects

Features

Example

Gem-book: Quickly build a document website