Skip to content

Commit 2c0836d

Browse files
author
maxpleaner
committed
restyle
1 parent 5012356 commit 2c0836d

File tree

11 files changed

+2206
-102
lines changed

11 files changed

+2206
-102
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
permissions:
9+
contents: write
10+
11+
jobs:
12+
build-and-deploy:
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- name: Checkout
17+
uses: actions/checkout@v4
18+
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: '23'
23+
24+
- name: Install dependencies
25+
run: npm ci
26+
27+
- name: Build
28+
run: npm run build
29+
30+
- name: Deploy to GitHub Pages
31+
uses: peaceiris/actions-gh-pages@v3
32+
with:
33+
github_token: ${{ secrets.GITHUB_TOKEN }}
34+
publish_dir: ./dist

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Dependencies
2+
node_modules
3+
4+
# Build output
5+
dist
6+
dist-ssr
7+
*.local
8+
9+
# Editor directories and files
10+
.vscode/*
11+
!.vscode/extensions.json
12+
.idea
13+
.DS_Store
14+
*.suo
15+
*.ntvs*
16+
*.njsproj
17+
*.sln
18+
*.sw?
19+
20+
# Logs
21+
logs
22+
*.log
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
pnpm-debug.log*
27+
lerna-debug.log*

‎index.html‎

Lines changed: 6 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,12 @@
11
<!doctype html>
2-
<html lang='en'>
2+
<html lang="en">
33
<head>
4-
<script
5-
src="https://code.jquery.com/jquery-3.6.3.min.js"
6-
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
7-
crossorigin="anonymous"></script>
8-
9-
<style>
10-
#instructions {
11-
width: 100vh;
12-
height: 400px;
13-
}
14-
</style>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Icon Layout</title>
157
</head>
168
<body>
17-
<div id="editor"
18-
<h1>Icon Layout</h1>
19-
<label for="#page-width">page width (inch)</label>
20-
<input type='number' id="page-width" value="8.5" step="0.1">
21-
<br>
22-
<label for="#page-height">page height (inch)</label>
23-
<input type='number' id="page-height" value="11" step="0.1">
24-
<br>
25-
<label for="#icon-size">icon size (centimeter)</label>
26-
<input type='number' id="icon-size" value="0.6" step="0.01">
27-
<br>
28-
<label for="#icon-padding-horizontal">icon horizontal padding (centimeter)</label>
29-
<input type='number' id="icon-padding-horizontal" value="0.05" step="0.01">
30-
<br>
31-
<label for="#icon-padding-vertical">icon vertical padding (centimeter)</label>
32-
<input type='number' id="icon-padding-vertical" value="0.05" step="0.01">
33-
34-
<br>
35-
<p><b>Instructions</b></p>
36-
<p><i>Each line should contain comma separated values name/count/number, for example:</i></p>
37-
<p><pre>
38-
5, dog, http://pictures.com/dog.jpg
39-
10, cat, http://pictures.com/cat.png
40-
</pre></p>
41-
<textarea id="instructions">
42-
100, cat1, https://e7.pngegg.com/pngimages/238/156/png-clipart-meng-pet-cat-meng-chong-kitty.png
43-
100, cat2, https://png.pngtree.com/png-vector/20201226/ourmid/pngtree-sitting-british-shorthair-cat-png-image_2642250.jpg
44-
</textarea>
45-
<button id="submit">submit</button>
46-
</div>
47-
<div id="results">
48-
</div>
49-
50-
<script>
51-
$(function() {
52-
hasConfigObj = location.search.split("?data=")[1]
53-
if (hasConfigObj) {
54-
queryParams = new URLSearchParams(new URL(location.href).search);
55-
data = JSON.parse(queryParams.get("data").slice(0, -1))
56-
$("#editor").hide()
57-
$results = $("#results")
58-
$results
59-
.css("outline", "1px solid black")
60-
.css("width", `${data.config.pageWidth}in`)
61-
.css("height", `${data.config.pageHeight}in`)
62-
63-
data.instructions.forEach(([count, name, url]) => {
64-
for (let i = 0; i < count; i++) {
65-
$img = $("<img>").attr("src", url)
66-
$img.css("width", `${data.config.iconSize}cm`)
67-
$img.css("height", `${data.config.iconSize}cm`)
68-
$img.css("margin-right", `${data.config.iconPaddingHorizontal / 2}cm`)
69-
$img.css("margin-left", `${data.config.iconPaddingHorizontal / 2}cm`)
70-
$img.css("margin-top", `${data.config.iconPaddingVertical / 2}cm`)
71-
$img.css("margin-bottom", `${data.config.iconPaddingVertical / 2}cm`)
72-
$results.append($img)
73-
}
74-
})
75-
76-
$("html,body").css("margin", "0px")
77-
78-
}
79-
80-
$("#submit").on("click", () => {
81-
82-
data = {}
83-
data["config"] = {
84-
"pageWidth": parseFloat($("#page-width").val()),
85-
"pageHeight": parseFloat($("#page-height").val()),
86-
"iconSize": parseFloat($("#icon-size").val()),
87-
"iconPaddingHorizontal": parseFloat($("#icon-padding-horizontal").val()),
88-
"iconPaddingVertical": parseFloat($("#icon-padding-vertical").val())
89-
}
90-
91-
instructionsRaw = $("#instructions").val()
92-
data["instructions"] = instructionsRaw.split("\n").map((line) => {
93-
return line.split(",").map((part) => part.trim())
94-
}).filter((x) => x.length == 3).map(([count, name, url]) => {
95-
return [parseInt(count), name, url]
96-
})
97-
debugger
98-
99-
paramsStr = new URLSearchParams(JSON.stringify(data)).toString();
100-
search = `data=${paramsStr}`
101-
newPath = location.href + `?${search}`
102-
window.open(newPath, "_blank")
103-
104-
})
105-
})
106-
</script>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.jsx"></script>
10711
</body>
10812
</html>

0 commit comments

Comments
 (0)