14 |
20 | {{ fileName }}
15 |
16 | 将文件拖拽至此，或
17 |
18 |
19 | 
10 |
11 | 2. Deploy your project.
12 |
13 | 
14 |
15 | 3. Click `Publish to GitHub`
16 |
17 | 
18 |
19 | 
20 |
21 | 3. Clone the GitHub repository code to your local machine.
22 |
23 | 4. Navigate to the local project directory.
24 |
25 | ```bash
26 | cd my-repo-dir/examples/test-project
27 | ```
28 |
29 | 5. Run `npx create-aircode-app`
30 |
31 | ```bash
32 | npx create-aircode-app@latest
33 | ```
34 |
35 | ```bash
36 | Updated aircode app in current directory.
37 | To get started, run the following commands:
38 | npm install
39 | npm start
40 | ```
41 |
42 | 6. Install dependencies
43 |
44 | ```bash
45 | npm install
46 | ```
47 |
48 | 7. Start the Hydrogen Server
49 |
50 | ```bash
51 | npm start
52 | ```
53 |
54 | ## Deploy Hydrogen Project to AirCode
55 |
56 | If your project is created by `npx create-aircode-app@latest`, you can easily deploy your project to AirCode by the following steps:
57 |
58 | 1. Create a github repo, and set it into your `package.json` file, for example:
59 |
60 | ```json
61 | "repository": {
62 | "type": "git",
63 | "url": "git+https://github.com/akira-cn/aircode-app-example.git"
64 | },
65 | ```
66 |
67 | 2. Run `npm run deploy` to prepare the deploy info for AirCode.
68 |
69 | 3. Push your code to Github.
70 |
71 | 4. Visit your `functions/README.md`, Click the `Deploy` button to deploy your project to AirCode.
72 |
73 | 
74 |
--------------------------------------------------------------------------------
/public/app.client.js:
--------------------------------------------------------------------------------
1 | const dragArea = document.querySelector('.drag-area');
2 | const fileName = document.querySelector('.file-name');
3 | const uploadResult = document.querySelector('.upload-result');
4 |
5 | let fileToUpload = null;
6 |
7 | dragArea.addEventListener('dragover', (event) => {
8 | event.preventDefault();
9 | dragArea.classList.add('active');
10 | });
11 |
12 | dragArea.addEventListener('dragleave', (event) => {
13 | event.preventDefault();
14 | dragArea.classList.remove('active');
15 | });
16 |
17 | dragArea.addEventListener('drop', (event) => {
18 | event.preventDefault();
19 | dragArea.classList.remove('active');
20 | const file = event.dataTransfer.files[0];
21 | if (!file) return;
22 | fileName.textContent = file.name;
23 | fileToUpload = file;
24 | });
25 |
26 | fileInput.addEventListener('change', (event) => {
27 | event.preventDefault();
28 | const file = event.target.files.item(0);
29 | if (!file) return;
30 | fileName.textContent = file.name;
31 | fileToUpload = file;
32 | });
33 |
34 | submitBtn.addEventListener('click', async (event) => {
35 | if(!fileToUpload) return;
36 | console.log('uploading', fileToUpload);
37 | await uploadFile(fileToUpload);
38 | });
39 |
40 | async function uploadFile(file) {
41 | const formData = new FormData();
42 | formData.append('myFile', file, file.name.replace(/[\u4e00-\u9fa5\s]/g, ''));
43 | formData.append('name', 'myFile');
44 | const result = await (await fetch('http://localhost:3000/file', {
45 | method: 'POST',
46 | body: formData,
47 | // headers: {
48 | // "Accept-Encoding": "UTF-8",
49 | // },
50 | })).json();
51 | if(!result.error) {
52 | const resultDiv = document.createElement('div');
53 | resultDiv.innerHTML = `${result.url}`;
54 | if(uploadResult.children[0]) {
55 | uploadResult.insertBefore(resultDiv, uploadResult.children[0]);
56 | } else {
57 | uploadResult.appendChild(resultDiv);
58 | }
59 | } else {
60 | const errorDiv = document.createElement('div');
61 | errorDiv.className = 'error';
62 | errorDiv.textContent = result.message;
63 | if(uploadResult.children[0]) {
64 | uploadResult.insertBefore(errorDiv, uploadResult.children[0]);
65 | } else {
66 | uploadResult.appendChild(errorDiv);
67 | }
68 | }
69 | // console.log(result);
70 | }
71 |
72 | uploadResult.addEventListener('click', async (event) => {
73 | if(event.target.className === 'copy') {
74 | const text = event.target.parentNode.children[0].textContent;
75 | await navigator.clipboard.writeText(text);
76 | console.log(text);
77 | }
78 | });
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Hydrogen
2 |
3 |