Merge pull request #2 from juitnow/v2

V2 including a nice demo

.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: Publish Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        id: setup
+
+      - name: Build Pages
+        run: |
+          npm clean-install
+          npm run build
+        env:
+          VITE_BASE_URL: "${{steps.setup.outputs.base_url}}"
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist-demo
+
+      - name: Deploy Pages
+        uses: actions/deploy-pages@v4

.gitignore

@@ -3,4 +3,5 @@
 .vscode/
 coverage/
 dist/
+dist-demo/
 node_modules/

README.md

@@ -8,10 +8,12 @@ project.
 * [Code128](#code128)
 * [EAN-13, UPC/A and EAN-8](#ean-13-upca-ean-8)
 * [EAN/GS-1 Checksums](#eangs-1-checksums)
-* [Font Assets](#font-assets)
+* [Font Assets and CSS](#font-assets-and-css)
 * [License (encoders)](LICENSE-ASL.md)
 * [License (fonts)](LICENSE-OFL.md)
 
+Look here for a simple [demo](https://juitnow.github.io/juit-librebarcode/).
+
 Code128
 -------
 
@@ -108,36 +110,49 @@ A separate function `checksum()` can be used to calculate the checksum for
 an *arbitrary* sequence of digits according to the EAN/GS-1 calculation rules:
 
 ```typescript
-import { ean } from '@juit/librebarcode'
+import { checksum } from '@juit/librebarcode'
 
-const checksum = ean('541136108357')
+const check = checksum('541136108357')
 // here checksum will be the number 4
 ```
 
 
 
-Font Assets
------------
+Font Assets and CSS
+-------------------
 
 Embedded with this library, you can find three fonts for your encoding needs:
 
-* `./assets/LibreBarcode128-Regular.ttf`: the regular **Code128** font without
+* `./assets/LibreBarcode128-Regular....`: the regular **Code128** font without
   any underlying text. Use this one for GS1 barcodes, as encoding of the `FNC1`
   character messes up the text, and anyhow the text should be represented as
   `(xx)yyyyyyyyyy(zz)wwwwwwww...` (application identifiers with parentheses).
-* `./assets/LibreBarcode128Text-Regular.ttf`: the **Code128** font with
+* `./assets/LibreBarcode128Text-Regular....`: the **Code128** font with
   underlying text. Use this one for standard Code128 barcodes.
-* `./assets/LibreBarcodeEAN13Text-Regular.ttf`: the **EAN** font.
+* `./assets/LibreBarcodeEAN13Text-Regular....`: the **EAN** font.
 
-You can find their file locations in the `fonts` export:
+All fonts are available in TrueType (`.ttf`), OpenType (`.otf`), WOFF (`.woff`)
+and WOFF2 (`.woff2`) formats and are declared as exports of this package.
+
+To know the path of those assets at runtime, you can use `require.resolve(...)`
+on CommonJS or `import.meta.resolve(...)` for EcmaScript modules.
 
 ```typescript
-import { fonts } from '@juit/librebarcode'
-
-// Here fonts will look somewhat similar to
-// {
-//   'LibreBarcode128-Regular.ttf': '... path on your disk .../LibreBarcode128-Regular.ttf',
-//   'LibreBarcode128Text-Regular.ttf': '... path on your disk .../LibreBarcode128Text-Regular.ttf',
-//   'LibreBarcodeEAN13Text-Regular.ttf': '... path on your disk .../LibreBarcodeEAN13Text-Regular.ttf'
-// }
+// in CommonJS
+const path = require.resolve('@juit/librebarcode/assets/LibreBarcode128-Regular.ttf')
+
+// in EcmaScript modules
+const url = import.meta.resolve('@juit/librebarcode/assets/LibreBarcodeEAN13Text-Regular.woff2')
 ```
+
+Similarly, a number of CSS stylesheets are included in the package to easily
+embed these fonts onto web pages and similar. These stylesheets define the
+families `LibreBarcode128`, `LibreBarcode128Text`, and `LibreBarcodeEAN13Text`
+(all with _normal_ font style and _400_ as weight).
+
+* `./assets/fonts-otf.css`: Only import OpenType fonts.
+* `./assets/fonts-ttf.css`: Only import TrueType fonts.
+* `./assets/fonts-woff.css`: Only import WOFF fonts.
+* `./assets/fonts-woff2.css`: Only import WOFF2 fonts.
+* `./assets/fonts.css`: Import all font types, in the following preference
+   order: WOFF2, WOFF, OpenType, TrueType.

assets/fonts-otf.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'LibreBarcode128';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'LibreBarcode128Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128Text-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'LibreBarcodeEAN13Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcodeEAN13Text-Regular.otf') format('opentype');
+}

assets/fonts-ttf.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'LibreBarcode128';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'LibreBarcode128Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128Text-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'LibreBarcodeEAN13Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcodeEAN13Text-Regular.ttf') format('truetype');
+}

assets/fonts-woff.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'LibreBarcode128';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'LibreBarcode128Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128Text-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'LibreBarcodeEAN13Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcodeEAN13Text-Regular.woff') format('woff');
+}

assets/fonts-woff2.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'LibreBarcode128';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'LibreBarcode128Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128Text-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'LibreBarcodeEAN13Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcodeEAN13Text-Regular.woff2') format('woff2');
+}

assets/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'LibreBarcode128';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128-Regular.woff2') format('woff2'),
+       url('LibreBarcode128-Regular.woff')  format('woff'),
+       url('LibreBarcode128-Regular.otf')   format('opentype'),
+       url('LibreBarcode128-Regular.ttf')   format('truetype');
+}
+
+@font-face {
+  font-family: 'LibreBarcode128Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcode128Text-Regular.woff2') format('woff2'),
+       url('LibreBarcode128Text-Regular.woff')  format('woff'),
+       url('LibreBarcode128Text-Regular.otf')   format('opentype'),
+       url('LibreBarcode128Text-Regular.ttf')   format('truetype');
+}
+
+@font-face {
+  font-family: 'LibreBarcodeEAN13Text';
+  font-style: normal;
+  font-weight: 400;
+  src: url('LibreBarcodeEAN13Text-Regular.woff2') format('woff2'),
+       url('LibreBarcodeEAN13Text-Regular.woff')  format('woff'),
+       url('LibreBarcodeEAN13Text-Regular.otf')   format('opentype'),
+       url('LibreBarcodeEAN13Text-Regular.ttf')   format('truetype');
+}

build.ts

@@ -1,3 +1,8 @@
 import { tasks } from '@plugjs/build'
 
-export default tasks()
+export default tasks({
+  extraLint: [
+    [ '**/*.vue', { directory: 'demo' } ],
+    [ 'build.ts', { directory: '.' } ],
+  ],
+})

demo/app.vue

@@ -0,0 +1,144 @@
+<template>
+  <q-layout view="hHh LpR fff">
+    <q-header elevated>
+      <q-toolbar>
+        <q-toolbar-title>Juit Librebarcode Demo</q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <q-page class="q-pa-md text-center">
+        <!-- Code 128 -->
+        <h2>Code 128</h2>
+
+        <div>
+          <q-input
+            v-model="text128"
+            :error-message="error128"
+            :error="!! error128"
+            :hint="`encoded as: ${barcode128}`"
+            :placeholder="default128"
+            label="Code 128"
+            outlined
+          />
+          <q-btn-group>
+            <q-btn color="primary" label="FNC 1" @click="text128 += '\u0031\uFE0F\u20E3'" />
+            <q-btn color="primary" label="FNC 2" @click="text128 += '\u0032\uFE0F\u20E3'" />
+            <q-btn color="primary" label="FNC 3" @click="text128 += '\u0033\uFE0F\u20E3'" />
+            <q-btn color="primary" label="FNC 4" @click="text128 += '\u0034\uFE0F\u20E3'" />
+          </q-btn-group>
+          <q-btn-toggle
+            v-model="codeset128"
+            class="q-mx-md"
+            toggle-color="primary"
+            :options="[
+              { label: 'Codeset A', value: 'A' },
+              { label: 'Codeset B', value: 'B' },
+              { label: 'Codeset C', value: 'C' },
+              { label: 'Auto', value: undefined }
+            ]"
+          />
+          <q-toggle v-model="font128" label="Text" />
+          <q-slider
+            v-model="size128"
+            class="q-px-lg q-mt-md"
+            :min="12"
+            :max="256"
+            :marker-labels="fontSizes"
+          />
+        </div>
+        <h5 class="q-mb-none">
+          {{ fontName128 }}
+        </h5>
+        <div :style="{ fontFamily: fontName128, fontSize: `${size128}px` }">
+          {{ barcode128 || 'Code 128' }}
+        </div>
+
+        <!-- EAN 13 -->
+        <h2>EAN 13</h2>
+
+        <div>
+          <q-input
+            v-model="text13"
+            :error-message="error13"
+            :error="!! error13"
+            :hint="`encoded as: ${barcode13}`"
+            :placeholder="default13"
+            label="EAN 13"
+            outlined
+            dense
+          />
+          <q-slider
+            v-model="size13"
+            class="q-px-lg"
+            :min="12"
+            :max="256"
+            :marker-labels="fontSizes"
+          />
+        </div>
+        <h4 class="q-mb-none">
+          LibreBarcodeEAN13Text
+        </h4>
+        <div :style="{ fontFamily: 'LibreBarcodeEAN13Text', fontSize: `${size13}px` }">
+          {{ barcode13 || '5369849825693' }}
+        </div>
+      </q-page>
+    </q-page-container>
+
+    <q-footer elevated class="text-center" style="z-index: 99999999">
+      Made with love in Berlin by <a style="color: white" href="https://www.juit.com/" target="_blank">Juit GmbH</a>
+      (Source code on <a style="color: white" href="https://github.com/juitnow/juit-librebarcode" target="_blank">GitHub</a>)
+    </q-footer>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import '../assets/fonts.css'
+import { code128, ean, FNC1, FNC2, FNC3, FNC4 } from '../src'
+
+import type { CodeSet } from '@juit/librebarcode'
+
+const fontSizes = [ 12, 24, 48, 96, 128, 192, 256 ]
+
+const default128 = 'Hello, world!'
+const text128 = ref('')
+const error128 = ref('')
+const barcode128 = ref('')
+const size128 = ref(96)
+const font128 = ref(false)
+const fontName128 = computed(() => font128.value ? 'LibreBarcode128Text' : 'LibreBarcode128')
+const codeset128 = ref<CodeSet>()
+
+watch([ text128, codeset128 ], ([ text128, codeset128 ]) => {
+  try {
+    text128 = (text128 || default128)
+        .replaceAll(/\u0031\uFE0F\u20E3/g, FNC1)
+        .replaceAll(/\u0032\uFE0F\u20E3/g, FNC2)
+        .replaceAll(/\u0033\uFE0F\u20E3/g, FNC3)
+        .replaceAll(/\u0034\uFE0F\u20E3/g, FNC4)
+    barcode128.value = text128 ? code128(text128, codeset128) : ''
+    error128.value = ''
+  } catch (error: any) {
+    error128.value = error.message || 'Unknown error'
+    barcode128.value = ''
+  }
+}, { immediate: true })
+
+const default13 = '5369849825693'
+const text13 = ref('')
+const error13 = ref('')
+const barcode13 = ref('')
+const size13 = ref(96)
+
+watch(text13, (text13) => {
+  try {
+    barcode13.value = ean(text13 || default13)
+    error13.value = ''
+  } catch (error: any) {
+    error13.value = error.message || 'Unknown error'
+    barcode13.value = ''
+  }
+}, { immediate: true })
+</script>