diff --git a/.eslintrc.js b/.eslintrc.js index 448e589e..b0727747 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -50,16 +50,8 @@ module.exports = { }, globals: {}, rules: { - // FIXME - 'unicorn/prefer-dom-node-append': 'off', - - // TEMP - // FIXME - 'solid/reactivity': 'off', - - // Should be enabled - // 'promise/catch-or-return': 'off', - + // Solid + 'solid/reactivity': 'off', // FIXME 'solid/no-innerhtml': 'off', /** Unicorn **/ @@ -73,8 +65,13 @@ module.exports = { 'unicorn/import-style': 'off', 'unicorn/numeric-separators-style': 'off', 'unicorn/prefer-node-protocol': 'off', + 'unicorn/prefer-dom-node-append': 'off', // FIXME + 'unicorn/prefer-top-level-await': 'warn', 'unicorn/consistent-function-scoping': 'warn', + 'sonarjs/no-duplicate-string': 'warn', + // Promise + // 'promise/catch-or-return': 'off', // Should be enabled 'promise/always-return': 'off', eqeqeq: 'error', diff --git a/CHANGELOG.txt b/CHANGELOG.txt index e1fb8c6d..58ca2ebc 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1,3 +1,9 @@ +[0.7.0] +[+] inbox: context provider, chats +[+] comments: show +[+] session: context provider +[+] views tracker: counting for shouts + [0.6.1] [+] auth ver. 0.9 [+] load-by interfaces for shouts, authors and messages diff --git a/README.md b/README.md index e7ebf05d..5e3e66a1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ +# How to start + +If you use yarn + ``` -yarn install -npm start +yarn +PUBLIC_API_URL=https://v2.discours.io yarn dev ``` diff --git a/package.json b/package.json index e24f4129..fc781a91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "discoursio-webapp", - "version": "0.6.1", + "version": "0.7.0", "private": true, "license": "MIT", "scripts": { @@ -26,6 +26,7 @@ "server": "node server/server.mjs", "start": "astro dev", "start:local": "cross-env PUBLIC_API_URL=http://127.0.0.1:8080 astro dev", + "start:production": "cross-env PUBLIC_API_URL=https://v2.discours.io astro dev", "start:staging": "cross-env PUBLIC_API_URL=https://testapi.discours.io astro dev", "typecheck": "astro check && tsc --noEmit", "typecheck:watch": "tsc --noEmit --watch", @@ -34,6 +35,8 @@ "dependencies": { "@aws-sdk/client-s3": "^3.216.0", "@aws-sdk/s3-presigned-post": "^3.216.0", + "@aws-sdk/signature-v4-multi-region": "^3.215.0", + "@aws-sdk/util-user-agent-node": "^3.215.0", "mailgun.js": "^8.0.2" }, "devDependencies": { @@ -54,6 +57,7 @@ "@solid-devtools/logger": "^0.5.0", "@solid-primitives/memo": "^1.1.2", "@solid-primitives/storage": "^1.3.3", + "@solid-primitives/upload": "^0.0.105", "@types/express": "^4.17.14", "@types/node": "^18.11.9", "@types/uuid": "^8.3.4", diff --git a/public/icons/apple.svg b/public/icons/apple.svg new file mode 100644 index 00000000..5d9607c8 --- /dev/null +++ b/public/icons/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/arrow-circle-left.svg b/public/icons/arrow-circle-left.svg new file mode 100644 index 00000000..d5454bb1 --- /dev/null +++ b/public/icons/arrow-circle-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/arrow-circle-right.svg b/public/icons/arrow-circle-right.svg new file mode 100644 index 00000000..6d6cc2b3 --- /dev/null +++ b/public/icons/arrow-circle-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/circle-plus.svg b/public/icons/circle-plus.svg new file mode 100644 index 00000000..10485e2a --- /dev/null +++ b/public/icons/circle-plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/delete.svg b/public/icons/delete.svg index 931cbe95..362d8665 100644 --- a/public/icons/delete.svg +++ b/public/icons/delete.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/dislike.svg b/public/icons/dislike.svg index ca18143f..ff8a48d9 100644 --- a/public/icons/dislike.svg +++ b/public/icons/dislike.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/public/icons/edit-2.svg b/public/icons/edit-2.svg new file mode 100644 index 00000000..f1a2cd61 --- /dev/null +++ b/public/icons/edit-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/eye.svg b/public/icons/eye.svg index 54e28bdc..b13c2ac6 100644 --- a/public/icons/eye.svg +++ b/public/icons/eye.svg @@ -1,4 +1,6 @@ - - - + + + diff --git a/public/icons/favorite.svg b/public/icons/favorite.svg new file mode 100644 index 00000000..3a22c296 --- /dev/null +++ b/public/icons/favorite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/feather.svg b/public/icons/feather.svg new file mode 100644 index 00000000..94301c31 --- /dev/null +++ b/public/icons/feather.svg @@ -0,0 +1 @@ + diff --git a/public/icons/filters.svg b/public/icons/filters.svg new file mode 100644 index 00000000..f7f8681c --- /dev/null +++ b/public/icons/filters.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/internet.svg b/public/icons/internet.svg new file mode 100644 index 00000000..714fd374 --- /dev/null +++ b/public/icons/internet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/like.svg b/public/icons/like.svg index 3d8deeb8..acd0bf3d 100644 --- a/public/icons/like.svg +++ b/public/icons/like.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/public/icons/link.svg b/public/icons/link.svg new file mode 100644 index 00000000..bef7f5b0 --- /dev/null +++ b/public/icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/password-hide.svg b/public/icons/password-hide.svg new file mode 100644 index 00000000..d21dec32 --- /dev/null +++ b/public/icons/password-hide.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/password-open.svg b/public/icons/password-open.svg new file mode 100644 index 00000000..cf5339bc --- /dev/null +++ b/public/icons/password-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/remove.svg b/public/icons/remove.svg new file mode 100644 index 00000000..a0723869 --- /dev/null +++ b/public/icons/remove.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/reply.svg b/public/icons/reply.svg index 8dc91097..2349addc 100644 --- a/public/icons/reply.svg +++ b/public/icons/reply.svg @@ -1,3 +1,4 @@ - + diff --git a/public/icons/share-new.svg b/public/icons/share-new.svg new file mode 100644 index 00000000..d153312f --- /dev/null +++ b/public/icons/share-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/user-default.svg b/public/icons/user-default.svg new file mode 100644 index 00000000..b51449e1 --- /dev/null +++ b/public/icons/user-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logo.png b/public/logo.png index c1056245..7d12bd1e 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss new file mode 100644 index 00000000..50064a39 --- /dev/null +++ b/src/components/Article/Comment.module.scss @@ -0,0 +1,201 @@ +.comment { + background-color: #fff; + margin: 0 -2.4rem 1.5em; + padding: 0.8rem 2.4rem; + transition: background-color 0.3s; + + &:hover { + background-color: #f6f6f6; + + .commentControlReply, + .commentControlShare, + .commentControlDelete, + .commentControlEdit, + .commentControlComplain { + opacity: 1; + } + } + + .shout-body { + @include font-size(1.5rem); + + margin-bottom: 1em; + + *:last-child { + margin-bottom: 0; + } + } + + .author { + align-items: center; + margin-bottom: 1.4rem; + } +} + +.commentLevel1 { + margin-left: 3.2rem; +} + +.commentLevel2 { + margin-left: 6.4rem; +} + +.commentLevel3 { + margin-left: 9.6rem; +} + +.commentLevel4 { + margin-left: 12.8rem; +} + +.commentLevel5 { + margin-left: 16rem; +} + +.commentControls { + @include font-size(1.2rem); + margin-bottom: 0.5em; +} + +.commentControlReply, +.commentControlShare, +.commentControlDelete, +.commentControlEdit, +.commentControlComplain { + @include media-breakpoint-up(md) { + opacity: 0; + transition: opacity 0.3s; + } +} + +.commentControlReply, +.commentControlShare, +.commentControlDelete, +.commentControlEdit { + .icon { + line-height: 1.2; + width: 1.2rem; + } +} + +.commentControl { + border: none; + color: #696969; + cursor: pointer; + display: inline-flex; + line-height: 1.2; + margin-right: 0.8rem; + padding: 0.2em 0.3em; + transition: opacity 0.2s, color 0.3s, background-color 0.3s; + vertical-align: top; + + &:hover { + background: #000; + color: #fff; + + .icon { + filter: invert(1); + opacity: 1; + } + } + + .icon { + filter: invert(0); + margin-right: 0.3em; + opacity: 0.6; + transition: filter 0.3s, opacity 0.2s; + + img { + margin-bottom: -0.1em; + } + } +} + +.commentControlReply { + .icon { + height: 1.2em; + width: 1.2em; + } +} + +.commentBody { + @include font-size(1.5rem); + line-height: 1.47; +} + +.commentAuthor, +.commentDate, +.commentRating { + @include font-size(1.2rem); +} + +.commentDate { + color: rgb(0 0 0 / 30%); + flex: 1; + + @include media-breakpoint-down(md) { + margin-left: 1rem; + } +} + +.commentDetails { + display: flex; + margin-bottom: 1.2rem; +} + +.commentRating { + align-items: center; + display: flex; + font-weight: bold; +} + +.commentRatingValue { + padding: 0 0.3em; +} + +.commentRatingPositive { + color: #2bb452; +} + +.commentRatingNegative { + color: #d00820; +} + +.commentRatingControl { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + height: 0; + width: 0; +} + +.commentRatingControlUp { + border-bottom: 8px solid rgb(0 0 0 / 40%); +} + +.commentRatingControlDown { + border-top: 8px solid rgb(0 0 0 / 40%); +} + +.replyForm { + background: #fff; + border: 2px solid rgb(38 56 217 / 50%); + border-radius: 0.8rem; + margin-left: 2.4rem; + position: relative; + + textarea { + border: none; + border-radius: 0.8rem; + padding-top: 1.2rem; + } +} + +.replyFormControls { + padding: 0.5rem 1.6rem 1.6rem; + text-align: right; + + button { + @include font-size(1.6rem); + margin-left: 1.2rem; + } +} diff --git a/src/components/Article/Comment.scss b/src/components/Article/Comment.scss deleted file mode 100644 index b9bda801..00000000 --- a/src/components/Article/Comment.scss +++ /dev/null @@ -1,119 +0,0 @@ -.comment { - background-color: #fff; - margin: 0 -2.4rem 1.5em; - padding: 0.8rem 2.4rem; - transition: background-color 0.3s; - - &:hover { - background-color: #f6f6f6; - - .comment-control--share, - .comment-control--delete, - .comment-control--edit, - .comment-control--complain { - opacity: 1; - } - } - - .shout-body { - @include font-size(1.5rem); - - margin-bottom: 1em; - - *:last-child { - margin-bottom: 0; - } - } - - .circlewrap { - position: absolute; - } - - .author { - align-items: center; - margin-bottom: 1.4rem; - } - - .author__name { - font-weight: bold; - @include font-size(1.2rem); - - margin-bottom: 0; - } - - .author__details { - margin-left: 4rem; - } - - .shout-date { - @include font-size(1.2rem); - - flex: 1; - color: rgb(0 0 0 / 30%); - } -} - -.comment--level-1 { - margin-left: 2.4rem; -} - -.comment--level-2 { - margin-left: 4.8rem; -} - -.comment--level-3 { - margin-left: 7.2rem; -} - -.comment--level-4 { - margin-left: 9.6rem; -} - -.comment--level-5 { - margin-left: 12rem; -} - -.shout-controls { - align-items: baseline; - display: flex; - justify-content: space-between; - padding-top: 0.8rem; -} - -.comment-controls { - margin-bottom: 0.5em; -} - -.comment-control--share, -.comment-control--delete, -.comment-control--edit, -.comment-control--complain { - opacity: 0; - transition: opacity 0.3s; -} - -.comment-control { - background: rgb(0 0 0 / 5%); - border: none; - cursor: pointer; - display: inline-flex; - line-height: 1.2; - margin-right: 0.8rem; - padding: 0.2em 0.3em; - vertical-align: top; - - .icon { - margin-right: 0.3em; - - img { - margin-bottom: -0.1em; - } - } -} - -.comment-control--reply { - .icon { - height: 1.2em; - width: 1.2em; - } -} diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index 4bee6c47..0b3e5ee9 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -1,13 +1,17 @@ -import './Comment.scss' +import styles from './Comment.module.scss' import { Icon } from '../_shared/Icon' import { AuthorCard } from '../Author/Card' -import { Show, createMemo } from 'solid-js' +import { Show, createMemo, createSignal } from 'solid-js' import { clsx } from 'clsx' import type { Author, Reaction as Point } from '../../graphql/types.gen' import { t } from '../../utils/intl' // import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions' import MD from './MD' import { deleteReaction } from '../../stores/zine/reactions' +import { formatDate } from '../../utils' +import { SharePopup } from './SharePopup' +import stylesHeader from '../Nav/Header.module.scss' +import Userpic from '../Author/Userpic' export default (props: { level?: number @@ -15,6 +19,8 @@ export default (props: { canEdit?: boolean compact?: boolean }) => { + const [isReplyVisible, setIsReplyVisible] = createSignal(false) + const comment = createMemo(() => props.comment) const body = createMemo(() => (comment().body || '').trim()) const remove = () => { @@ -23,81 +29,116 @@ export default (props: { deleteReaction(comment().id) } } + const formattedDate = createMemo(() => + formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' }) + ) return ( -
+
-
+
- - @{(comment()?.createdBy || { name: 'anonymous' }).name} - -
- - - #{(comment()?.shout || { title: 'Lorem ipsum titled' }).title} - -
+ } > -
-
+
+
-
{comment()?.createdAt}
-
{comment().stat.rating}
+
{formattedDate()}
+
0, + [styles.commentRatingNegative]: comment().stat?.rating < 0 + }} + > +
-
+
-
- {/*FIXME implement edit comment modal*/} {/* showModal('editComment')}*/} {/*>*/} - {/* */} + {/* */} {/* {t('Edit')}*/} {/**/} - - {/*FIXME implement modals */} + + + {t('Share')} + + } + /> + {/*
+ + +
+ + +
+ +

{t('About myself')}

+
+