Merge pull request #9 from cereallarceny/readme

Readme

.github/workflows/benchmark.yml

@@ -0,0 +1,38 @@
+name: Benchmark
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: pnpm dev
+
+      # TODO: Wait for dev server to start
+
+      - run: pnpm benchmark
+
+      - name: Upload benchmark results
+        uses: actions/upload-artifact@v4
+        with:
+          name: benchmark-results
+          path: packages/e2e/results

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: Build, Lint, and Test
+
+on: [push]
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm run lint
+      - run: pnpm test

README.md

@@ -1,43 +1 @@
-
-<div style="display: flex; flex-direction: column; align-items: center;">
-  <img src="apps/web/public/logo.svg" alt="Flipbook Logo" width="200" />
-  <h1 style="margin-top: 10px">Flipbook</h1>
-
-  [![Build Status](https://travis-ci.org/cereallarceny/flipbook.svg?branch=main)](https://travis-ci.org/cereallrceny/flipbook)
-  [![Coverage Status](https://coveralls.io/repos/github/cereallarceny/flipbook/badge.svg?branch=main)](https://coveralls.io/github/cereallarceny/flipbook?branch=main)
-</div>
-
-## Getting Started
-
-Flipbook is a series of libraries that you can use in any web, mobile, or desktop application that enable the writing and reading of QR codes that contain larger payloads than traditional QR codes. This is done by creating a series of QR codes that are stitched together into an animated GIF, called a "Flipbook". This Flipbook can then be scanned by the reader library and subsequently reassembled into the original payload.
-
-### Are there any size limitations?
-
-In theory, no. It would simply be a matter of how long it takes for the writer to encode the payload into a Flipbook, and how long it takes for the reader to decode the Flipbook back into the original payload.
-
-### What can a Flipbook contain?
-
-Anything! Books... movies... music... software... anything that can be represented as a series of bytes can be encoded into a Flipbook.
-
-### Why?
-
-The ubiquity of QR codes in daily life has made them a popular tool for sharing information. But the medium is inherently limited to payloads of small sizes. While larger payloads can be supported (to a point), the resulting QR code becomes too difficult to scan reliably. 
-
-## Libraries
-
-- Writer (Typescript): [Documentation](./packages/writer) | [NPM Package](https://www.npmjs.com/package/@flipbook/writer)
-- Reader (Typescript): [Documentation](./packages/reader) | [NPM Package](https://www.npmjs.com/package/@flipbook/reader)
-- Writer (Rust): *Coming soon...*
-- Reader (Rust): *Coming soon...*
-
-### Want to write a Flipbook binding?
-
-If you want to write a Flipbook binding for a language that isn't listed here, feel free to open an issue or a pull request. We'd love to see Flipbook supported in as many languages as possible!
-
-## Contributing
-
-If you'd like to contribute to Flipbook, please read our [contributing guide](./CONTRIBUTING.md) to learn how to get started.
-
-## License
-
-Flipbook is licensed under the [MIT License](./LICENSE). Go nuts!
+# Benchmarks

apps/web/app/writer/page.tsx

@@ -8,7 +8,7 @@ import { Sponsor, Star } from './components/github-button';
 // TODO: Release reader and writer as separate packages to NPM: @flipbook/reader and @flipbook/writer
 
 // ----- UI/UX ----- //
-// TODO: Finish readme
+// TODO: Write the following readmes: reader, writer, and contributing
 // TODO: Add Github actions for testing and such and show badge and coverage on the README
 // TODO: Create a "install" version of the reader
 // TODO: Create homepage to advertise the reader

packages/e2e/README.md

@@ -0,0 +1,11 @@
+
+## Benchmarks
+
+### Writer
+
+#### For 100 char string
+
+| Task Name | ops/sec | Average Time (ns) | Margin | Samples |
+| --- | --- | --- | --- | --- |
+| Generate QrCode Gif from 100 char string | 6 | 143733162.69999996 | ±6.02% | 10 |
+

packages/e2e/package.json

@@ -6,13 +6,12 @@
   "scripts": {
     "benchmark:dev": "playwright test --headed --ui",
     "benchmark": "playwright test && pnpm generate:readme",
-    "generate:readme": "node ./scripts/add-benchmarks-to-markdown.js && markdown-include ./markdown.json",
+    "generate:readme": "node ./scripts/add-benchmarks-to-markdown.js",
     "postinstall": "pnpm playwright install"
   },
   "dependencies": {},
   "devDependencies": {
     "tinybench": "^2.6.0",
-    "@playwright/test": "^1.41.1",
-    "markdown-include": "^0.4.3"
+    "@playwright/test": "^1.41.1"
   }
 }

packages/e2e/results/reader-bench-hundred.json

@@ -0,0 +1,7 @@
+{
+  "Task Name": "Generate QrCode Gif from 100 char string",
+  "ops/sec": "2",
+  "Average Time (ns)": 415900570.7,
+  "Margin": "±11.49%",
+  "Samples": 10
+}

packages/e2e/results/writer-bench-hundred.json

@@ -0,0 +1,7 @@
+{
+  "Task Name": "Generate QrCode Gif from 100 char string",
+  "ops/sec": "6",
+  "Average Time (ns)": 143733162.69999996,
+  "Margin": "±6.02%",
+  "Samples": 10
+}

packages/e2e/scripts/add-benchmarks-to-markdown.js

@@ -36,10 +36,10 @@ function generateMarkdownTable(data) {
     };
 
     // output directory
-    const outDir = path.resolve(__dirname, '..', 'build');
+    const outDir = path.resolve(__dirname, '..', 'results');
 
     // docs directory
-    const docsDir = path.resolve(__dirname, '..', 'docs');
+    const docsDir = path.resolve(__dirname, '..');
 
     // read files
     const writerHundred = await fs.readFile(
@@ -103,7 +103,7 @@ function generateMarkdownTable(data) {
     const markdown = `\n## Benchmarks\n\n### Writer\n\n#### For 100 char string\n\n${writerHundredTable}\n\n#### For 1,000 char string\n\n${writerThousandTable}\n\n#### For 10,000 char string\n\n${writerTenThousandTable}\n\n#### For 100,000 char string\n\n${writerHundredThousandTable}\n\n### Reader\n\n#### For 100 char string\n\n${readerHundredTable}\n\n#### For 1,000 char string\n\n${readerThousandTable}\n\n#### For 10,000 char string\n\n${readerTenThousandTable}\n\n#### For 100,000 char string\n\n${readerHundredThousandTable}`;
 
     // save markdown
-    await fs.writeFile(`${docsDir}/benchmarks.md`, markdown, 'utf-8');
+    await fs.writeFile(`${docsDir}/README.md`, markdown, 'utf-8');
   } catch (err) {
     console.log('Error saving benchmark:', err);
   }

packages/e2e/src/helpers.ts

@@ -25,7 +25,7 @@ type TBenchOutput = ({
 
 export const saveBenchMark = async (fileName: string, value: TBenchOutput) => {
   try {
-    const outDir = path.resolve(__dirname, '..', 'build');
+    const outDir = path.resolve(__dirname, '..', 'results');
 
     const jsonData = {
       'Task Name': value[0]?.['Task Name'] || null,