frontend
This commit is contained in:
parent
2d198c838f
commit
4a4f7ef508
2
frontend/.gitignore
vendored
Normal file
2
frontend/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
24
frontend/README.md
Normal file
24
frontend/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Universal Comments System
|
||||
|
||||
## Build
|
||||
|
||||
Build and run on port 3002.
|
||||
|
||||
```sh
|
||||
(npm run build; cd dist/assets; mv *.js index.js; mv *.css index.css; warp --port 3002)
|
||||
```
|
||||
|
||||
## Use
|
||||
|
||||
In your HTML, add the following:
|
||||
|
||||
```html
|
||||
<div id="ucs-comments"
|
||||
data-element="ucs-comments"
|
||||
data-ucs_url="[BACKEND_URL]"
|
||||
data-site="[WEBSITE]"
|
||||
data-path="[PAGE_PATH]"
|
||||
></div>
|
||||
<script type="module" src="[FRONTEND_URL]/index.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="[FRONTEND_URL]/index.css">
|
||||
```
|
||||
19
frontend/dist/index.html
vendored
Normal file
19
frontend/dist/index.html
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ucs</title>
|
||||
<script type="module" crossorigin src="/assets/index-DxfpMQtn.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-TEs_pY0h.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="ucs-comments"
|
||||
data-element="ucs-comments"
|
||||
data-ucs_url="http://localhost:8080"
|
||||
data-site="alloca.space"
|
||||
data-path="blog.html"
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
33
frontend/eslint.config.js
Normal file
33
frontend/eslint.config.js
Normal file
@ -0,0 +1,33 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
|
||||
export default [
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...js.configs.recommended.rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
18
frontend/index.html
Normal file
18
frontend/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ucs</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="ucs-comments"
|
||||
data-element="ucs-comments"
|
||||
data-ucs_url="http://localhost:8080"
|
||||
data-site="alloca.space"
|
||||
data-path="blog.html"
|
||||
></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2719
frontend/package-lock.json
generated
Normal file
2719
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
frontend/package.json
Normal file
34
frontend/package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "ucs-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"description": "Frontend for the Universal Comment System",
|
||||
"author": "alloca",
|
||||
"license": "MPL-2.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.alloca.space/me/ucs.git"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.21.0",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.21.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^15.15.0",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
84
frontend/src/CommentForm.jsx
Normal file
84
frontend/src/CommentForm.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { useState } from "react";
|
||||
import './style.css'
|
||||
|
||||
function isValidHttpUrl(string) {
|
||||
let url;
|
||||
|
||||
try {
|
||||
url = new URL(string);
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return url.protocol === "http:" || url.protocol === "https:";
|
||||
}
|
||||
|
||||
export default function CommentForm({ url, site, path }) {
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleSubmit = e => {
|
||||
console.log(e);
|
||||
e.preventDefault();
|
||||
|
||||
let form = {
|
||||
name: e.target.elements.name.value,
|
||||
website: e.target.elements.user_website.value,
|
||||
message: e.target.elements.message.value,
|
||||
token: e.target.elements.token.value
|
||||
};
|
||||
|
||||
if (form.name.length === 0) {
|
||||
setError("הזינו שם.");
|
||||
return;
|
||||
}
|
||||
if (form.message.length === 0) {
|
||||
setError("תגובה ריקה.");
|
||||
return;
|
||||
}
|
||||
if (form.token.length === 0) {
|
||||
setError("תשובה לשאלת סינון חסרה.");
|
||||
return;
|
||||
}
|
||||
if (form.website.length > 0 && !isValidHttpUrl(form.website)) {
|
||||
setError("אתר לא תקין. אולי שכחתם לציין את הפרוטוקול?");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(url + '/url/' + site + '/' + path, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(form)
|
||||
})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
response.json().then((err) => { console.log(err); setError(err); });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="new-comment">
|
||||
<h4>כתיבת תגובה</h4>
|
||||
<div>
|
||||
<textarea className="new-comment-message" name="message" minLength="1" maxLength="1000" required="" placeholder="התגובה שלך" />
|
||||
</div>
|
||||
<div className="new-comment-user">
|
||||
<input className="new-comment-username" type="text" name="name" placeholder="שם" minLength="1" required="" />
|
||||
<input className="new-comment-user-website" type="url" name="user_website" placeholder="אתר" />
|
||||
</div>
|
||||
<div className="new-comment-div">
|
||||
<input className="new-comment-token" type="text" name="token" required="" minLength="1" placeholder="שאלת סינון" />
|
||||
<button className="new-comment-submit" type="submit" title="Add a new submission">הוספה</button>
|
||||
</div>
|
||||
<div className="error"><p>{error}</p></div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
41
frontend/src/CommentList.jsx
Normal file
41
frontend/src/CommentList.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import './style.css'
|
||||
|
||||
const reply = details => {
|
||||
return (
|
||||
<li className="comment-li" key={details.id}>
|
||||
<details className="comment-details" open>
|
||||
<summary className="comment-user">
|
||||
{ details.user_website ? <a href={details.user_website}>{details.user}</a> : details.user }
|
||||
</summary>
|
||||
<p dangerouslySetInnerHTML={{ __html: details.message }} />
|
||||
</details>
|
||||
</li>
|
||||
)
|
||||
};
|
||||
// <p>{details.message}</p>
|
||||
|
||||
export default function CommentList({ url, site, path }) {
|
||||
const [comments, setComments] = useState([]);
|
||||
useEffect(() => {
|
||||
fetch(url + '/url/' + site + '/' + path)
|
||||
.then(response => { console.log(response); return response.json() })
|
||||
.then(data => setComments(data))
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="comments-list">
|
||||
<h3>
|
||||
{ comments.length == 1 ? "תגובה אחת" : comments.length + " תגובות" }
|
||||
</h3>
|
||||
<div>
|
||||
<ul className="comments">
|
||||
{comments.map(comment => reply(comment))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
24
frontend/src/main.jsx
Normal file
24
frontend/src/main.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import CommentList from './CommentList.jsx'
|
||||
import CommentForm from './CommentForm.jsx'
|
||||
|
||||
function UcsComments(settings) {
|
||||
return (
|
||||
createRoot(document.getElementById(settings.element)).render(
|
||||
<StrictMode>
|
||||
<div className="ucs-comments">
|
||||
<CommentList url={settings.ucs_url} site={settings.site} path={settings.path} />
|
||||
<CommentForm url={settings.ucs_url} site={settings.site} path={settings.path} />
|
||||
</div>
|
||||
</StrictMode>,
|
||||
)
|
||||
)
|
||||
};
|
||||
|
||||
const settings = () => {
|
||||
let element = document.getElementById('ucs-comments');
|
||||
return element.dataset;
|
||||
};
|
||||
|
||||
UcsComments(settings());
|
||||
71
frontend/src/style.css
Normal file
71
frontend/src/style.css
Normal file
@ -0,0 +1,71 @@
|
||||
.ucs-comments {
|
||||
border-top: 1px solid;
|
||||
margin-top: 50px;
|
||||
padding-top: 40px;
|
||||
direction: rtl;
|
||||
}
|
||||
.comments-list {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.comments {
|
||||
padding: 0px;
|
||||
}
|
||||
.comment-li {
|
||||
list-style: none;
|
||||
}
|
||||
.comment-details {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.comment-details summary {
|
||||
padding: 5px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comment-details summary::marker {
|
||||
padding: 5px;
|
||||
}
|
||||
.comment-details p {
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.new-comment {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
}
|
||||
.new-comment input, textarea {
|
||||
padding: 5px;
|
||||
}
|
||||
.new-comment input::placeholder, textarea::placeholder {
|
||||
}
|
||||
.new-comment-user { width: 100%; display: flex; align-items: stretch; gap: 5px; }
|
||||
.new-comment-username, .new-comment-user-website {
|
||||
flex-basis: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.new-comment-user-website {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
.new-comment-user-website::placeholder {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.new-comment div { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
|
||||
.new-comment-message {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.new-comment-div { width: 100%; display: flex; align-items: stretch; gap: 5px; }
|
||||
.new-comment-token, .new-comment-user-submit {
|
||||
flex-basis: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.error { color: #ff7777; }
|
||||
7
frontend/vite.config.js
Normal file
7
frontend/vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user