Skip to content

Commit 3afbec8

Browse files
Lord-TurmoilLord-Turmoil
committed
feat: refactored with npm
1 parent c46bfde commit 3afbec8

Some content is hidden

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

56 files changed

+21479
-0
lines changed

‎.babelrc

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"plugins": [
3+
[
4+
"prismjs",
5+
{
6+
"languages": [
7+
"c",
8+
"cpp",
9+
"csharp",
10+
"go",
11+
"java",
12+
"python",
13+
"rust",
14+
"swift",
15+
"html",
16+
"css",
17+
"javascript",
18+
"php",
19+
"xml",
20+
"json",
21+
"yaml",
22+
"markdown",
23+
"latex",
24+
"bash",
25+
"powershell",
26+
"batch",
27+
"lua",
28+
"perl",
29+
"ruby",
30+
"makefile",
31+
"cmake",
32+
"sql",
33+
"verilog"
34+
],
35+
"plugins": [
36+
"line-numbers",
37+
"show-language",
38+
"normalize-whitespace",
39+
"toolbar"
40+
]
41+
}
42+
],
43+
[
44+
"module-resolver",
45+
{
46+
"root": [
47+
"."
48+
],
49+
"alias": {
50+
"~": "./src/js"
51+
}
52+
}
53+
]
54+
]
55+
}

‎.eslintrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": "eslint:recommended",
7+
"parserOptions": {
8+
"ecmaVersion": 6,
9+
"sourceType": "module"
10+
}
11+
}

‎.github/workflows/static.yml

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
name: Deploy CodePaste
2+
3+
on:
4+
push:
5+
branches: ["main"]
6+
7+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
14+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
15+
concurrency:
16+
group: "pages"
17+
cancel-in-progress: false
18+
19+
jobs:
20+
# Build job to minify the project
21+
build:
22+
runs-on: windows-latest
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v4
26+
27+
- name: Install NodeJS
28+
uses: actions/setup-node@v1
29+
with:
30+
node-version: "20.x"
31+
32+
- name: Install dependencies
33+
run: |
34+
npm install
35+
36+
- name: Install Python
37+
uses: actions/setup-python@v2
38+
with:
39+
python-version: "3.x"
40+
41+
- name: Build Project
42+
run: |
43+
npm run build
44+
45+
- name: Upload artifact
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
path: 'dist'
49+
50+
# Deploy job to GitHub Pages
51+
deploy:
52+
environment:
53+
name: github-pages
54+
url: ${{ steps.deployment.outputs.page_url }}
55+
runs-on: windows-latest
56+
needs: build
57+
steps:
58+
- name: Deploy to GitHub Pages
59+
id: deployment
60+
uses: actions/deploy-pages@v4

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.vscode/
2+
node_modules/
3+
dist/
4+
config.json
5+
deploy.bat

‎README.md

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# Code Paste
2+
3+
Copyright © Tony's Studio 2023 - 2024
4+
5+
---
6+
7+
## Description
8+
9+
This tool provides you the ability to create highlighted code for Microsoft Office, mainly for Word and PowerPoint. You can use it to create a beautiful code block in your document or presentation.
10+
11+
### Try it now!
12+
13+
- [Code Paste on Tony's Studio](https://paste.tonys-studio.top/)
14+
- [Code Paste on GitHub Page](https://lord-turmoil.github.io/CodePaste/)
15+
16+
---
17+
18+
## Development
19+
20+
If you find Code Paste useful and want to host it on your website, this section will be useful.
21+
22+
> **NOTICE:** I'm glad some of you have already hosted Code Paste on you own server, but forgot to remove the analytics scripts and my COS links. It's partly due to my bad project structure, so I refactored it to separate these configurations. Besides, **I would appreciate it if you mention my repository in your website**.🙏
23+
24+
Feel free to contribute to this project. You can report bugs, suggest new features, or even submit a pull request. 😊
25+
26+
### Quick Start
27+
28+
Code Paste is written in native HTML, CSS and JavaScript with npm and Webpack. Also with posthtml for the `<module>` tag. To start development, clone the repo first, then install required packages.
29+
30+
```bash
31+
npm install
32+
npm run init # initialize placeholder
33+
```
34+
35+
Then, you can run the project. There are three options for this.
36+
37+
```bash
38+
npm run build # build for production
39+
npm run dev # build for development
40+
npm run watch # build for development and watch for changes
41+
```
42+
43+
> To preview the project locally, I recommend using [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) plugin for Visual Studio Code. Just open `dist/index.html` after your local server is on.
44+
45+
### Customization
46+
47+
Since I removed sensitive information from the project, you need to run `npm run init` to create placeholder files even if you don't need them. They are under `src/views/components/`, where you can find a `.gitignore` that ignores them.
48+
49+
**Analytics**
50+
51+
In file `statistics.html`, and place all your scripts into it. If you don't need them, just leave this file empty. The file should look like this.
52+
53+
```html
54+
<!-- Clarity -->
55+
<script type="text/javascript">
56+
(function (c, l, a, r, i, t, y) {
57+
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
58+
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
59+
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
60+
})(window, document, "clarity", "script", "***key***");
61+
</script>
62+
<!-- Baidu Statistics -->
63+
<script>
64+
var _hmt = _hmt || [];
65+
(function () {
66+
var hm = document.createElement("script");
67+
hm.src = "https://hm.baidu.com/hm.js?******key*******";
68+
var s = document.getElementsByTagName("script")[0];
69+
s.parentNode.insertBefore(hm, s);
70+
})();
71+
</script>
72+
```
73+
74+
**Notification**
75+
76+
For users who visit your website for the first time, you may want to prompt a notice or agreement. In `notification.html`, write your custom `<div>` for it. The default class for it is `notification`, you can change it and add your own CSS style.
77+
78+
```html
79+
<div class="notification">
80+
<p>Greetings from all members of Tony's Studio!</p>
81+
</div>
82+
```
83+
84+
**Support**
85+
86+
If you want to add a support page, write it in `support.html`. Like notification, the default class for it is `coffee` and you can customize it. If you add this, there will be an extra support button in the center of the page.
87+
88+
```html
89+
<div class="coffee">
90+
<img src="url or local path" alt="WeChat Pay" title="Scan to support me">
91+
<p>We appreciate your sponsorship!🌹</p>
92+
</div>
93+
```
94+
95+
### Self-hosting
96+
97+
There is still one step before you can host Code Paste on your website. I use [Font Awesome](https://fontawesome.com/) for lovely icons, and the linked JavaScript only works for my domain. Therefore, you have to get your kit [here](https://fontawesome.com/kits) and replace the link in `src/views/components/head.html`.
98+
99+
After all these are done, just copy `dist` folder to your server and enjoy!🎉
100+
101+
---
102+
103+
## Sponsors 💖
104+
105+
Here, I would like to express my sincere gratitude for all who sponsor Code Paste. THANK YOU! 🥰
106+
107+
> I may not be able to know your GitHub account from the payment. If you bought me a coffee but are not present in the following table, feel free to contact me via E-mail.🙏
108+
109+
<table>
110+
<tbody>
111+
<tr>
112+
<td align="center" valign="top" width="14.28%">
113+
<a href="https://github.com/AkashiSensei"><img src="https://avatars.githubusercontent.com/u/78262426?s=100" width="100px;" alt="Liu Yizhou"/></a>
114+
<br />
115+
<sub><b>Liu Yizhou</b></sub>
116+
</td>
117+
<td align="center" valign="top" width="14.28%">
118+
<a href="https://github.com/hongshuobuaa"><img src="https://avatars.githubusercontent.com/u/117986926?s=100" width="100px;" alt="hongshuobuaa"/></a>
119+
<br />
120+
<sub><b>hongshuobuaa</b></sub>
121+
</td>
122+
<td align="center" valign="top" width="14.28%">
123+
<a href="https://github.com/CR-1201"><img src="https://avatars.githubusercontent.com/u/112941971?s=100" width="100px;" alt="秋子夜"/></a>
124+
<br />
125+
<sub><b>秋子夜</b></sub>
126+
</td>
127+
<td align="center" valign="top" width="14.28%">
128+
<a href="https://github.com/GuoLan-Fruket"><img src="https://avatars.githubusercontent.com/u/109665787?s=100" width="100px;" alt="GuoLan-Fruket"/></a>
129+
<br />
130+
<sub><b>GuoLan-Fruket</b></sub>
131+
</td>
132+
</tr>
133+
</tbody>
134+

‎eslint.config.mjs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import globals from "globals";
2+
import pluginJs from "@eslint/js";
3+
4+
5+
export default [
6+
{ languageOptions: { globals: globals.browser } },
7+
pluginJs.configs.recommended,
8+
];

‎jsconfig.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"~/*": [
5+
"./src/js/*"
6+
]
7+
}
8+
}
9+
}

‎minify_json.py

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Minify JSON
2+
# Usage: python minify_json.py <input_file> <output_file>
3+
4+
import json
5+
import sys
6+
7+
8+
def minify_json(input_file, output_file):
9+
with open(input_file, "r") as f:
10+
data = json.load(f)
11+
with open(output_file, "w") as f:
12+
json.dump(data, f, separators=(",", ":"))
13+
14+
15+
if __name__ == "__main__":
16+
if len(sys.argv) != 3:
17+
print("Usage: python minify_json.py <input_file> <output_file>")
18+
sys.exit(1)
19+
minify_json(sys.argv[1], sys.argv[2])

0 commit comments

Comments
 (0)