@bookbox/view-html

v0.2.0

Published

2 years ago

Bookbox view for html

Downloads

0High
0Medium
0Low

nikalex

bookbox html

@bookbox/view-html

npm i @bookbox/view-html

Usage

Browser

Styles and initial script for the browser must be connected separately.

The connection method is different for bundlers and native technologies.

With webpack/vite/...

// index.ts
import { css, browserInit } from '@bookbox/view-html';

// init command
browserInit();

// only if you use code blocks
css.code();

// only if you use mathematical formulas
css.math();

Without bundlers in index.html

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- '@bookbox/view-html/dist/styles/htmlBook.css -->
    <link rel="stylesheet" href="/path/to/htmlBook.css" />

    <!-- '@bookbox/view-html/dist/styles/code.css -->
    <link rel="stylesheet" href="/path/to/code.css" />

    <!-- 'katex/dist/katex.css -->
    <link rel="stylesheet" href="/path/to/katex.css" />

    <!-- browserInit(); -->
    <script src="/path/to/index_with_browserInit.js" type="module"/>
  </head>
  ...

Create book:

import { FBook, getBookSchema } from "@bookbox/generator-js";
import { createHtmlBook, getBookBoxHtmlDocument, render } from "@bookbox/view-html";

export const exampleBook: FBook = ({book, title, math}) => book.root`
${title`exampleBook`}

${math`E = mc^2`}
`;

const { schema } = getBookSchema({ book: exampleBook });

render({ element: document.body, bookData: createHtmlBook({ schema }) });

NodeJS

Styles and initial scripts for NodeJS are already contained in the html document template. Styles for code and math will be included in the document automatically, depending on the use of code or math elements.

In NodeJS with typescript and modules

import { writeFileSync } from "fs";
import { FBook, getBookSchema } from "@bookbox/generator-js";
import { createHtmlBook, getBookBoxHtmlDocument } from "@bookbox/view-html";

export const exampleBook: FBook = ({book, title, math}) => book.root`
${title`exampleBook`}

${math`E = mc^2`}
`;

const { schema } = getBookSchema({ book: exampleBook });
const bookData = createHtmlBook({ schema });

writeFileSync("output.html", getBookBoxHtmlDocument({ bookData }));

In NodeJS without modules

const { writeFileSync } = require("fs");
const { getBookSchema } = require("@bookbox/generator-js");
const { createHtmlBook, getBookBoxHtmlDocument } = require("@bookbox/view-html");

export const exampleBook = ({book, title, math}) => book.root`
${title`exampleBook`}

${math`E = mc^2`}
`;

const { schema } = getBookSchema({ book: exampleBook });
const bookData = createHtmlBook({ schema });

writeFileSync("output.html", getBookBoxHtmlDocument({ bookData }));

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@bookbox/view-html

Usage

Browser

NodeJS