Skip to content

Commit e939aa7

Browse files
zhengkylzhengkyl
committed
remove presets build step w/ raw? + rewrite import in dev
1 parent 8a7ac66 commit e939aa7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+87
-3291
lines changed

‎README.md

+5-8
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Blatantly inspired by [QRBTF](https://qrbtf.com) and [Anthony Fu's QR Toolkit](h
1111
> [!CAUTION]
1212
> These example QR codes may not be reliably scannable! Results may vary drastically based on device and scanner!
1313
14-
THIS PROJECT IS A TOOL TO MAKE DESIGNS, THESE ARE ONLY EXAMPLES
14+
This project is a tool to create designs! These are only examples!
1515

1616
<table>
1717
<tbody>
@@ -105,6 +105,10 @@ THIS PROJECT IS A TOOL TO MAKE DESIGNS, THESE ARE ONLY EXAMPLES
105105
</tbody>
106106
</table>
107107

108+
## Create/modify designs with code
109+
110+
![code and parameter editor ui](./examples/ui2.png)
111+
108112
## Features
109113

110114
- Customize data:
@@ -121,13 +125,6 @@ THIS PROJECT IS A TOOL TO MAKE DESIGNS, THESE ARE ONLY EXAMPLES
121125
- Generated SVGs are not sanitized. This is an impossible task and attempting it breaks perfectly fine SVGs, makes debugging harder, and adds latency to previewing changes.
122126
- These should be non-issues, but even if you copy-and-paste and run malware there's no secrets to leak.
123127

124-
### Use existing presets
125-
126-
![style select ui](./examples/ui1.png)
127-
128-
### Customizable parameters defined in code
129-
130-
![code and parameter editor ui](./examples/ui2.png)
131128

132129
## Creating a preset
133130

‎app.config.ts

+41-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import UnoCSS from "unocss/vite";
44
import wasmpack from "vite-plugin-wasm-pack";
55

66
export default defineConfig({
7-
server: { preset: "vercel" },
7+
server: {
8+
preset: "vercel",
9+
},
810
ssr: true,
911
vite: {
10-
plugins: [UnoCSS(), wasmpack([], ["fuqr"])],
12+
plugins: [UnoCSS(), wasmpack([], ["fuqr"]), blobRewriter()],
1113
resolve: {
1214
alias: {
1315
// https://christopher.engineering/en/blog/lucide-icons-with-vite-dev-server/
@@ -21,3 +23,40 @@ export default defineConfig({
2123
},
2224
},
2325
});
26+
27+
// Rewrites imports inside blobs in dev mode
28+
function blobRewriter() {
29+
const virtualModuleId = "virtual:blob-rewriter";
30+
const resolvedVirtualModuleId = "\0" + virtualModuleId;
31+
"help".replace(/test/, "help");
32+
33+
return {
34+
name: "blob-rewriter",
35+
resolveId(id) {
36+
if (id === virtualModuleId) {
37+
return resolvedVirtualModuleId;
38+
}
39+
},
40+
load(id) {
41+
if (id === resolvedVirtualModuleId) {
42+
if (process.env.NODE_ENV !== 'development') {
43+
return 'export {}'
44+
}
45+
46+
return `
47+
if (!import.meta.env.SSR) {
48+
const originalBlob = window.Blob;
49+
window.Blob = function(array, options) {
50+
if (options.type === "text/javascript") {
51+
array = array.map(item => {
52+
return item.replace("https://qrframe.kylezhe.ng", "http://localhost:3000");
53+
});
54+
}
55+
return new originalBlob(array, options);
56+
}
57+
}
58+
`;
59+
}
60+
},
61+
};
62+
}

‎examples/ui1.png

-87.4 KB
Binary file not shown.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "qrframe",
33
"type": "module",
44
"scripts": {
5-
"dev": "nr presets dev && vinxi dev",
5+
"dev": "vinxi dev",
66
"build": "vinxi build",
77
"start": "vinxi start",
88
"presets": "node updatePresets"

‎presets/Alien.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Based on QRBTF's Line style
22
// https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRLine.tsx
3-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
3+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
44

55
export const paramsSchema = {
66
Margin: {

‎presets/Basic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Blocks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Based on QRBTF's DSJ style
22
// https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRDsj.tsx
3-
import { Module } from "REPLACE_URL/utils.js";
3+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
44

55
export const paramsSchema = {
66
Margin: {

‎presets/Bubbles.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Based on QRBTF's Bubble style
22
// https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRBubble.tsx
3-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
3+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
44

55
export const paramsSchema = {
66
Margin: {

‎presets/Camo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Foreground: {

‎presets/Circle.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Dots.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Drawing.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22
import rough from "https://esm.sh/roughjs";
33

44
export const paramsSchema = {

‎presets/Glass.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Halftone.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Image: {
@@ -92,10 +92,10 @@ export async function renderCanvas(qr, params, canvas) {
9292
}
9393

9494
ctx.filter = `brightness(${params["Brightness"]}) contrast(${params["Contrast"]})`;
95-
const imgScale = params["Image scale"]
95+
const imgScale = params["Image scale"];
9696
const imgSize = Math.floor(imgScale * canvasSize);
97-
const imgOffset = Math.floor((canvasSize - imgSize) / 2)
98-
ctx.drawImage(image, imgOffset, imgOffset,imgSize, imgSize);
97+
const imgOffset = Math.floor((canvasSize - imgSize) / 2);
98+
ctx.drawImage(image, imgOffset, imgOffset, imgSize, imgSize);
9999
ctx.filter = "none";
100100

101101
const imageData = ctx.getImageData(0, 0, canvasSize, canvasSize);

‎presets/Layers.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Minimal.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Mondrian.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Neon.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
1+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Foreground: {

‎presets/Quantum.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Based on QRBTF's A1P style
22
// https://github.com/CPunisher/react-qrbtf/blob/master/src/components/QRNormal.tsx
3-
import { Module, getSeededRand } from "REPLACE_URL/utils.js";
3+
import { Module, getSeededRand } from "https://qrframe.kylezhe.ng/utils.js";
44

55
export const paramsSchema = {
66
Margin: {

‎presets/Tile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
22

33
export const paramsSchema = {
44
Margin: {

‎presets/Tutorial.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Module } from "REPLACE_URL/utils.js";
1+
import { Module } from "https://qrframe.kylezhe.ng/utils.js";
2+
23
export const paramsSchema = {
34
Margin: {
45
type: "number",

‎src/components/editor/QrEditor.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import { TextInput, TextareaInput } from "../TextInput";
1717
import { CodeEditor } from "./CodeEditor";
1818
import { Settings } from "./Settings";
1919
import { ParamsEditor } from "./ParamsEditor";
20-
import { Tutorial } from "~/lib/presets/Tutorial";
20+
import Tutorial from "../../../presets/Tutorial?raw";
2121
import { ContentMenuTrigger, ContextMenuProvider } from "../ContextMenu";
22+
import "virtual:blob-rewriter"
2223

2324
type Props = {
2425
class?: string;

‎src/lib/presets.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { Alien } from "./presets/Alien";
2-
import { Basic } from "./presets/Basic";
3-
import { Blocks } from "./presets/Blocks";
4-
import { Bubbles } from "./presets/Bubbles";
5-
import { Camo } from "./presets/Camo";
6-
import { Circle } from "./presets/Circle";
7-
import { Dots } from "./presets/Dots";
8-
import { Drawing } from "./presets/Drawing";
9-
import { Glass } from "./presets/Glass";
10-
import { Halftone } from "./presets/Halftone";
11-
import { Layers } from "./presets/Layers";
12-
import { Minimal } from "./presets/Minimal";
13-
import { Mondrian } from "./presets/Mondrian";
14-
import { Neon } from "./presets/Neon";
15-
import { Quantum } from "./presets/Quantum";
16-
import { Tile } from "./presets/Tile";
1+
import Alien from "../../presets/Alien?raw";
2+
import Basic from "../../presets/Basic?raw";
3+
import Blocks from "../../presets/Blocks?raw";
4+
import Bubbles from "../../presets/Bubbles?raw";
5+
import Camo from "../../presets/Camo?raw";
6+
import Circle from "../../presets/Circle?raw";
7+
import Dots from "../../presets/Dots?raw";
8+
import Drawing from "../../presets/Drawing?raw";
9+
import Glass from "../../presets/Glass?raw";
10+
import Halftone from "../../presets/Halftone?raw";
11+
import Layers from "../../presets/Layers?raw";
12+
import Minimal from "../../presets/Minimal?raw";
13+
import Mondrian from "../../presets/Mondrian?raw";
14+
import Neon from "../../presets/Neon?raw";
15+
import Quantum from "../../presets/Quantum?raw";
16+
import Tile from "../../presets/Tile?raw";
1717

1818
export const PRESET_CODE = {
1919
Basic,

0 commit comments

Comments
 (0)