mirror of
https://github.com/hexahigh/portfolio.git
synced 2025-12-12 03:25:06 +01:00
almost finished with the comment section
This commit is contained in:
hexahigh
parent
371e921620
commit
f86f9ecb48
29
package-lock.json
generated
29
package-lock.json
generated
@ -13,7 +13,8 @@
|
||||
"@sveltejs/adapter-cloudflare": "^2.3.2",
|
||||
"@sveltejs/adapter-vercel": "^3.0.3",
|
||||
"axios": "^1.5.0",
|
||||
"pocketbase": "^0.17.3"
|
||||
"pocketbase": "^0.17.3",
|
||||
"svelte-time": "^0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10",
|
||||
@ -1205,6 +1206,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@ -2221,6 +2227,14 @@
|
||||
"node": ">= 14.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-time": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.0.tgz",
|
||||
"integrity": "sha512-V0LBpJhYV2Q+jqiJ94ITAo51P6RIhrHQpDt3LCSk8PXfL2UMvSMlDzkqHq8mdKqmBCRZURnXhpynN03GQa/G/A==",
|
||||
"dependencies": {
|
||||
"dayjs": "^1.11.9"
|
||||
}
|
||||
},
|
||||
"node_modules/tar": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
|
||||
@ -3146,6 +3160,11 @@
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
||||
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
@ -3832,6 +3851,14 @@
|
||||
"xmlbuilder2": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"svelte-time": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.0.tgz",
|
||||
"integrity": "sha512-V0LBpJhYV2Q+jqiJ94ITAo51P6RIhrHQpDt3LCSk8PXfL2UMvSMlDzkqHq8mdKqmBCRZURnXhpynN03GQa/G/A==",
|
||||
"requires": {
|
||||
"dayjs": "^1.11.9"
|
||||
}
|
||||
},
|
||||
"tar": {
|
||||
"version": "6.1.15",
|
||||
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
"@sveltejs/adapter-cloudflare": "^2.3.2",
|
||||
"@sveltejs/adapter-vercel": "^3.0.3",
|
||||
"axios": "^1.5.0",
|
||||
"pocketbase": "^0.17.3"
|
||||
"pocketbase": "^0.17.3",
|
||||
"svelte-time": "^0.8.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import axios from "axios";
|
||||
import Time from "svelte-time";
|
||||
import { createAvatar } from "@dicebear/core";
|
||||
import { identicon } from "@dicebear/collection";
|
||||
import PocketBase from "pocketbase";
|
||||
@ -8,9 +8,10 @@
|
||||
const pb = new PocketBase("https://db.080609.xyz");
|
||||
pbStore.set("https://db.080609.xyz");
|
||||
|
||||
async function addComment(PID, user, comment ) {
|
||||
try {
|
||||
let databaseError = false;
|
||||
|
||||
async function addComment(PID, user, comment) {
|
||||
try {
|
||||
let avatar = createAvatar(identicon, {
|
||||
seed: user,
|
||||
size: 128,
|
||||
@ -22,7 +23,7 @@
|
||||
user,
|
||||
comment,
|
||||
timestamp: new Date().toISOString(), // store the current date and time as the timestamp
|
||||
avatar: avatar
|
||||
avatar: avatar,
|
||||
});
|
||||
console.log("Comment added:", newComment);
|
||||
} catch (error) {
|
||||
@ -42,43 +43,67 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 style="color: #f5f5f5;">Comments:</h2>
|
||||
|
||||
<form id="comment-form">
|
||||
<input type="text" id="user" placeholder="Your name" required/>
|
||||
<textarea id="comment" placeholder="Your comment" required/>
|
||||
<input type="text" id="user" placeholder="Your name" required />
|
||||
<textarea id="comment" placeholder="Your comment" required />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<div id="comments-display" />
|
||||
|
||||
<div class="comments-display-wrapper">
|
||||
<FullList collection="comments" batch={50} let:records>
|
||||
<FullList
|
||||
collection="comments"
|
||||
batch={50}
|
||||
let:records
|
||||
on:error={() => (databaseError = true)}
|
||||
>
|
||||
{#each records.filter((record) => record.PID === window.location.pathname) as record}
|
||||
<div class="comments-display">
|
||||
<div class="avatar">
|
||||
<img
|
||||
src={record.avatar}
|
||||
alt="User Avatar"
|
||||
width="50"
|
||||
height="50"
|
||||
/>
|
||||
{#if databaseError}
|
||||
<div class="error-notice">
|
||||
<img alt="Alert icon" src="/data/images/alert.svg" width="50" height="50"><br>
|
||||
Unable to retrieve comments. The database may be down or you might need to refresh.
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="commentHeader">
|
||||
Written by <p style="color: #56922c; display: inline;">
|
||||
{record.user}
|
||||
</p>
|
||||
at {record.timestamp}
|
||||
{:else}
|
||||
<div class="comments-display">
|
||||
<div class="avatar">
|
||||
<img
|
||||
src={record.avatar}
|
||||
alt="User Avatar"
|
||||
width="50"
|
||||
height="50"
|
||||
/>
|
||||
</div>
|
||||
<div class="commentText">
|
||||
<p>{record.comment}</p>
|
||||
<div class="right-side">
|
||||
<div class="commentHeader">
|
||||
Written by <p
|
||||
style="color: #56922c; display: inline;"
|
||||
>
|
||||
{record.user}
|
||||
</p>
|
||||
at <Time
|
||||
timestamp={record.timestamp}
|
||||
format="DD/MM/YYYY, hh:mm"
|
||||
/>
|
||||
</div>
|
||||
<div class="commentText">
|
||||
<p>{record.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<span slot="error" let:error>{error}</span>
|
||||
</FullList>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-notice {
|
||||
text-align: center;
|
||||
color: #f5a803;
|
||||
}
|
||||
|
||||
.comments-display {
|
||||
background-color: #1b1b1b;
|
||||
min-width: 250px;
|
||||
|
||||
17
static/data/images/alert.svg
Normal file
17
static/data/images/alert.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>alert_fill</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="System" transform="translate(-48.000000, -48.000000)" fill-rule="nonzero">
|
||||
<g id="alert_fill" transform="translate(48.000000, 48.000000)">
|
||||
<path d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z" id="MingCute" fill-rule="nonzero">
|
||||
|
||||
</path>
|
||||
<path d="M13.299,3.1477 L21.933,18.1022 C22.5103,19.1022 21.7887,20.3522 20.634,20.3522 L3.36601,20.3522 C2.21131,20.3522 1.48962,19.1022 2.06697,18.1022 L10.7009,3.14771 C11.2783,2.14771 12.7217,2.1477 13.299,3.1477 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 C12.5523,17 13,16.5523 13,16 C13,15.4477 12.5523,15 12,15 Z M12,8 C11.48715,8 11.0644908,8.38604429 11.0067275,8.88337975 L11,9 L11,13 C11,13.5523 11.4477,14 12,14 C12.51285,14 12.9355092,13.613973 12.9932725,13.1166239 L13,13 L13,9 C13,8.44772 12.5523,8 12,8 Z" id="形状" fill="#f5a803">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
x
Reference in New Issue
Block a user