Skip to content

Commit 70b0675

Browse files
dgrammatikodgrammatiko
committed
init
1 parent 6f50382 commit 70b0675

File tree

7 files changed

+194
-34
lines changed

7 files changed

+194
-34
lines changed

‎.github/workflows/npm-publish-github-packages.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2+
# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
3+
4+
name: Node.js Package
5+
6+
on:
7+
release:
8+
types: [created]
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v4
15+
- uses: actions/setup-node@v4
16+
with:
17+
node-version: 20
18+
- run: npm ci
19+
20+
publish-gpr:
21+
needs: build
22+
runs-on: ubuntu-latest
23+
permissions:
24+
contents: read
25+
packages: write
26+
steps:
27+
- uses: actions/checkout@v4
28+
- uses: actions/setup-node@v4
29+
with:
30+
node-version: 20
31+
registry-url: https://npm.pkg.github.com/
32+
- run: npm ci
33+
- run: npm publish
34+
env:
35+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

‎.github/workflows/static.yml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Simple workflow for deploying static content to GitHub Pages
2+
name: Deploy static content to Pages
3+
4+
on:
5+
# Runs on pushes targeting the default branch
6+
push:
7+
branches: ["main"]
8+
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20+
concurrency:
21+
group: "pages"
22+
cancel-in-progress: false
23+
24+
jobs:
25+
# Single deploy job since we're just deploying
26+
deploy:
27+
environment:
28+
name: github-pages
29+
url: ${{ steps.deployment.outputs.page_url }}
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
- name: fix
35+
run: npm ci && npx vite build && cd ${PWD}/dist && sed -i -e "s%/assets/%/qr-element/assets/%g" "index.html"
36+
- name: Setup Pages
37+
uses: actions/configure-pages@v5
38+
- name: Upload artifact
39+
uses: actions/upload-pages-artifact@v3
40+
with:
41+
# Upload entire repository
42+
path: 'dist'
43+
- name: Deploy to GitHub Pages
44+
id: deployment
45+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ Using https://github.com/Rich-Harris/headless-qr
44

55

66
## Attributes/properties
7-
- input<string>: the string that the QR Code will be created for
8-
- width<string>: the width (also height, qr codes are square) in px, ie `150px`
7+
- `input<string>`: the string that the QR Code will be created for
8+
- `width<string>`: the width (also height, qr codes are square) in px, ie `150px`
99

1010
## Styling
1111

‎dist/assets/index-CLtdk9yj.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>QR Element</title>
7+
<meta name="description" content="A simple QR Code Web Component">
8+
<style>
9+
:root {
10+
color-scheme: dark light;
11+
}
12+
13+
/** Prevent CLS */
14+
qr-element {
15+
display: block;
16+
aspect-ratio: 1;
17+
width: 300px;
18+
height: 300px;
19+
20+
/** Custom colours */
21+
&.blue {
22+
background-color: gold;
23+
24+
&::part(canvas) {
25+
--canvas-fill: blue;
26+
}
27+
}
28+
}
29+
</style>
30+
<script type="module" crossorigin src="/assets/index-CLtdk9yj.js"></script>
31+
</head>
32+
<body>
33+
<h1>Rendering a QR code</h1>
34+
35+
<h2>just pass the string to the input attribute</h2>
36+
<qr-element input="https://dgrammatiko.dev"></qr-element>
37+
38+
<hr>
39+
40+
<h2>change the size passing the px to the width attribute</h2>
41+
<qr-element input="https://dgrammatiko.dev" width="444px"></qr-element>
42+
43+
<hr>
44+
45+
<h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
46+
<qr-element class="blue" input="https://dgrammatiko.dev"></qr-element>
47+
</body>
48+
</html>

‎index.html‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,48 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>QR Element</title>
7-
<script type=module src="./src/index.mjs"></script>
7+
<meta name="description" content="A simple QR Code Web Component">
8+
<script type="module" src="./src/index.mjs" blocking="rendering"></script>
89
<style>
10+
/** Prevent CLS */
11+
qr-element {
12+
display: block;
13+
aspect-ratio: 1;
14+
width: 300px;
15+
height: 300px;
16+
17+
/** Custom colours */
18+
&.blue {
19+
background-color: gold;
20+
21+
&::part(canvas) {
22+
--canvas-fill: blue;
23+
}
24+
}
25+
}
26+
27+
/** basic page styling */
928
:root {
1029
color-scheme: dark light;
1130
}
31+
32+
a {
33+
color: lightblue;
34+
}
35+
36+
body {
37+
margin-inline-start: auto;
38+
margin-inline-end: auto;
39+
max-width: 30rem;
40+
}
41+
42+
ul {
43+
padding: 1rem;
44+
background-color: #333;
45+
list-style-type: none;
46+
display: flex;
47+
gap: 2rem;
48+
}
1249
</style>
1350
</head>
1451
<body>
@@ -20,19 +57,20 @@ <h2>just pass the string to the input attribute</h2>
2057
<hr>
2158

2259
<h2>change the size passing the px to the width attribute</h2>
23-
<qr-element input="https://dgrammatiko.dev" width=444px></qr-element>
60+
<qr-element input="https://dgrammatiko.dev" width="444px"></qr-element>
2461

2562
<hr>
2663

2764
<h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
28-
<style>
29-
qr-element.blue {
30-
background-color: gold;
31-
}
32-
qr-element.blue::part(canvas) {
33-
--canvas-fill: blue;
34-
}
35-
</style>
36-
<qr-element class=blue input="https://dgrammatiko.dev"></qr-element>
65+
<qr-element class="blue" input="https://dgrammatiko.dev"></qr-element>
66+
67+
<hr>
68+
69+
<ul>
70+
<li><a href="https://github.com/dgrammatiko/qr-element">Github repo</a></li>
71+
<li><a href="https://github.com/dgrammatiko/qr-element">NPM package</a></li>
72+
<li><a href="https://dgrammatiko.dev">by dGrammatiko</a></li>
73+
</ul>
74+
3775
</body>
3876
</html>

0 commit comments

Comments
 (0)