updated newsfeed note ui

2024-09-18 03:03:31 +00:00 · 2023-04-17 14:01:09 +07:00 · 2023-04-17 14:01:09 +07:00 · dfe5e4533e
commit dfe5e4533e
parent 8b67253c0a
14 changed files with 75 additions and 92 deletions
--- a/package.json
+++ b/package.json
@ -62,7 +62,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.22",
    "prettier": "^2.8.7",
    "prettier-plugin-tailwindcss": "^0.2.7",
    "prop-types": "^15.8.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -40,7 +40,7 @@ specifiers:
  next: ^13.3.0
  nostr-relaypool: ^0.5.18
  nostr-tools: ^1.9.0
-  postcss: ^8.4.21
+  postcss: ^8.4.22
  prettier: ^2.8.7
  prettier-plugin-tailwindcss: ^0.2.7
  prop-types: ^15.8.1
@ -95,7 +95,7 @@ devDependencies:
  '@types/react-dom': 18.0.11
  '@typescript-eslint/eslint-plugin': 5.58.0_hzv37tkb63et4viajosjuuyxgi
  '@typescript-eslint/parser': 5.58.0_ze6bmax3gcsfve3yrzu6npguhe
-  autoprefixer: 10.4.14_postcss@8.4.21
+  autoprefixer: 10.4.14_postcss@8.4.22
  csstype: 3.1.2
  encoding: 0.1.13
  eslint: 8.38.0
@ -105,11 +105,11 @@ devDependencies:
  eslint-plugin-react-hooks: 4.6.0_eslint@8.38.0
  husky: 8.0.3
  lint-staged: 13.2.1
-  postcss: 8.4.21
+  postcss: 8.4.22
  prettier: 2.8.7
  prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
  prop-types: 15.8.1
-  tailwindcss: 3.3.1_postcss@8.4.21
+  tailwindcss: 3.3.1_postcss@8.4.22
  typescript: 4.9.5

 packages:
@ -1178,7 +1178,7 @@ packages:
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.3.1_postcss@8.4.21
+      tailwindcss: 3.3.1_postcss@8.4.22
    dev: true

  /@tauri-apps/api/1.2.0:
@ -1693,7 +1693,7 @@ packages:
    engines: { node: '>=8' }
    dev: true

-  /autoprefixer/10.4.14_postcss@8.4.21:
+  /autoprefixer/10.4.14_postcss@8.4.22:
    resolution:
      { integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ== }
    engines: { node: ^10 || ^12 || >=14 }
@ -1702,11 +1702,11 @@ packages:
      postcss: ^8.1.0
    dependencies:
      browserslist: 4.21.5
-      caniuse-lite: 1.0.30001478
+      caniuse-lite: 1.0.30001479
      fraction.js: 4.2.0
      normalize-range: 0.1.2
      picocolors: 1.0.0
-      postcss: 8.4.21
+      postcss: 8.4.22
      postcss-value-parser: 4.2.0
    dev: true

@ -1762,10 +1762,10 @@ packages:
    engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
    hasBin: true
    dependencies:
-      caniuse-lite: 1.0.30001478
+      caniuse-lite: 1.0.30001479
      electron-to-chromium: 1.4.365
      node-releases: 2.0.10
-      update-browserslist-db: 1.0.10_browserslist@4.21.5
+      update-browserslist-db: 1.0.11_browserslist@4.21.5
    dev: true

  /bufferutil/4.0.7:
@ -1804,9 +1804,9 @@ packages:
    engines: { node: '>= 6' }
    dev: true

-  /caniuse-lite/1.0.30001478:
+  /caniuse-lite/1.0.30001479:
    resolution:
-      { integrity: sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw== }
+      { integrity: sha512-6nuRFim5dx8Eu2tO+KJ9PiBdPHs7WB5Hdf+klDcyefyEuOAcfhihIv7pS+JFknJLUiNQbm1AJYKm0c9QOlQS/Q== }

  /chalk/2.4.2:
    resolution:
@ -1911,14 +1911,14 @@ packages:
      { integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== }
    dev: true

-  /colorette/2.0.19:
+  /colorette/2.0.20:
    resolution:
-      { integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== }
+      { integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== }
    dev: true

-  /commander/10.0.0:
+  /commander/10.0.1:
    resolution:
-      { integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA== }
+      { integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug== }
    engines: { node: '>=14' }
    dev: true

@ -3400,7 +3400,7 @@ packages:
    dependencies:
      chalk: 5.2.0
      cli-truncate: 3.1.0
-      commander: 10.0.0
+      commander: 10.0.1
      debug: 4.3.4
      execa: 7.1.1
      lilconfig: 2.1.0
@ -3427,7 +3427,7 @@ packages:
        optional: true
    dependencies:
      cli-truncate: 2.1.0
-      colorette: 2.0.19
+      colorette: 2.0.20
      log-update: 4.0.0
      p-map: 4.0.0
      rfdc: 1.3.0
@ -3614,7 +3614,7 @@ packages:
      '@next/env': 13.3.0
      '@swc/helpers': 0.4.14
      busboy: 1.6.0
-      caniuse-lite: 1.0.30001478
+      caniuse-lite: 1.0.30001479
      postcss: 8.4.14
      react: 18.2.0
      react-dom: 18.2.0_react@18.2.0
@ -3924,20 +3924,20 @@ packages:
    engines: { node: '>= 6' }
    dev: true

-  /postcss-import/14.1.0_postcss@8.4.21:
+  /postcss-import/14.1.0_postcss@8.4.22:
    resolution:
      { integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== }
    engines: { node: '>=10.0.0' }
    peerDependencies:
      postcss: ^8.0.0
    dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.22
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.3
    dev: true

-  /postcss-js/4.0.1_postcss@8.4.21:
+  /postcss-js/4.0.1_postcss@8.4.22:
    resolution:
      { integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== }
    engines: { node: ^12 || ^14 || >= 16 }
@ -3945,10 +3945,10 @@ packages:
      postcss: ^8.4.21
    dependencies:
      camelcase-css: 2.0.1
-      postcss: 8.4.21
+      postcss: 8.4.22
    dev: true

-  /postcss-load-config/3.1.4_postcss@8.4.21:
+  /postcss-load-config/3.1.4_postcss@8.4.22:
    resolution:
      { integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== }
    engines: { node: '>= 10' }
@ -3962,18 +3962,18 @@ packages:
        optional: true
    dependencies:
      lilconfig: 2.1.0
-      postcss: 8.4.21
+      postcss: 8.4.22
      yaml: 1.10.2
    dev: true

-  /postcss-nested/6.0.0_postcss@8.4.21:
+  /postcss-nested/6.0.0_postcss@8.4.22:
    resolution:
      { integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== }
    engines: { node: '>=12.0' }
    peerDependencies:
      postcss: ^8.2.14
    dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.22
      postcss-selector-parser: 6.0.11
    dev: true

@ -4010,9 +4010,9 @@ packages:
      source-map-js: 1.0.2
    dev: false

-  /postcss/8.4.21:
+  /postcss/8.4.22:
    resolution:
-      { integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== }
+      { integrity: sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA== }
    engines: { node: ^10 || ^12 || >=14 }
    dependencies:
      nanoid: 3.3.6
@ -4638,7 +4638,7 @@ packages:
      tslib: 2.5.0
    dev: true

-  /tailwindcss/3.3.1_postcss@8.4.21:
+  /tailwindcss/3.3.1_postcss@8.4.22:
    resolution:
      { integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
    engines: { node: '>=12.13.0' }
@ -4660,11 +4660,11 @@ packages:
      normalize-path: 3.0.0
      object-hash: 3.0.0
      picocolors: 1.0.0
-      postcss: 8.4.21
-      postcss-import: 14.1.0_postcss@8.4.21
-      postcss-js: 4.0.1_postcss@8.4.21
-      postcss-load-config: 3.1.4_postcss@8.4.21
-      postcss-nested: 6.0.0_postcss@8.4.21
+      postcss: 8.4.22
+      postcss-import: 14.1.0_postcss@8.4.22
+      postcss-js: 4.0.1_postcss@8.4.22
+      postcss-load-config: 3.1.4_postcss@8.4.22
+      postcss-nested: 6.0.0_postcss@8.4.22
      postcss-selector-parser: 6.0.11
      postcss-value-parser: 4.2.0
      quick-lru: 5.1.1
@ -4836,9 +4836,9 @@ packages:
    engines: { node: '>=8' }
    dev: false

-  /update-browserslist-db/1.0.10_browserslist@4.21.5:
+  /update-browserslist-db/1.0.11_browserslist@4.21.5:
    resolution:
-      { integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ== }
+      { integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== }
    hasBin: true
    peerDependencies:
      browserslist: '>= 4.21.0'
--- a/src/app/newsfeed/following/page.tsx
+++ b/src/app/newsfeed/following/page.tsx
@ -73,9 +73,9 @@ export default function Page() {
    const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
    // update data
    if (Array.isArray(result)) {
-      setData((data) => [...data, ...result]);
+      setData((data) => [...result, ...data]);
    } else {
-      setData((data) => [...data, result]);
+      setData((data) => [result, ...data]);
    }
    // hide newer trigger
    setHasNewerNote(false);
--- a/src/assets/global.css
+++ b/src/assets/global.css
@ -20,11 +20,6 @@
  scrollbar-width: none; /* Firefox */
 }

-.bg-gradient-radial-page {
-  background: radial-gradient(52.56% 52.56% at 50% 117.61%, #1c1c21 0, rgba(28, 28, 33, 0) 100%),
-    radial-gradient(63.94% 63.94% at 50% 0, #1c1c21 0, rgba(28, 28, 33, 0) 78.13%), #07070d;
-}
-
 .border {
  background-clip: padding-box;
 }
--- a/src/components/note/base.tsx
+++ b/src/components/note/base.tsx
@ -44,12 +44,8 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
        <div onClick={(e) => openUserPage(e)}>
          <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
        </div>
-        <div className="-mt-5 pl-[52px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose	prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
-            </div>
-          </div>
+        <div className="mt-1 pl-[52px]">
+          <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
        </div>
        <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
          <NoteMetadata
--- a/src/components/note/meta/comment.tsx
+++ b/src/components/note/meta/comment.tsx
@ -6,7 +6,7 @@ import { dateToUnix } from '@utils/getDate';

 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
-import { MultiBubble, OpenNewWindow } from 'iconoir-react';
+import { ChatLines, OpenNewWindow } from 'iconoir-react';
 import { useRouter } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
@ -57,7 +57,7 @@ export const NoteComment = ({
      <Dialog.Trigger asChild>
        <button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
          <div className="rounded-md p-1 group-hover:bg-zinc-800">
-            <MultiBubble width={20} height={20} className="text-zinc-500" />
+            <ChatLines width={20} height={20} className="text-zinc-500" />
          </div>
          <span>{count}</span>
        </button>
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@ -82,12 +82,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
        <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
        <div className="relative z-10 flex flex-col">
          <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-                {content}
-              </div>
-            </div>
+          <div className="mt-1 pl-[52px]">
+            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
          </div>
          <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
            <NoteMetadata
--- a/src/components/note/preview/image.tsx
+++ b/src/components/note/preview/image.tsx
@ -4,7 +4,9 @@ import { memo } from 'react';
 export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
  return (
    <div
-      className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
+      className={`relative h-full ${
+        size === 'large' ? 'w-full' : 'w-2/3'
+      } mt-2 rounded-lg border border-zinc-800 xl:w-2/3`}
    >
      <Image
        src={url}
--- a/src/components/note/preview/video.tsx
+++ b/src/components/note/preview/video.tsx
@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';

 export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
  return (
-    <div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
      <ReactPlayer
        url={url}
        controls={true}
--- a/src/components/note/quote.tsx
+++ b/src/components/note/quote.tsx
@ -81,12 +81,8 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
      <div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
        <div className="relative z-10 flex flex-col">
          <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-                {content}
-              </div>
-            </div>
+          <div className="mt-1 pl-[52px]">
+            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
          </div>
        </div>
      </div>
--- a/src/components/note/rootNote.tsx
+++ b/src/components/note/rootNote.tsx
@ -69,12 +69,8 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
        <div onClick={(e) => openUserPage(e)}>
          <UserExtend pubkey={data.pubkey} time={data.created_at} />
        </div>
-        <div className="-mt-5 pl-[52px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
-            </div>
-          </div>
+        <div className="mt-1 pl-[52px]">
+          <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
        </div>
        <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
          <NoteMetadata
--- a/src/components/user/extend.tsx
+++ b/src/components/user/extend.tsx
@ -3,11 +3,10 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { DEFAULT_AVATAR } from '@stores/constants';

 import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
-import { truncate } from '@utils/truncate';
+import { shortenKey } from '@utils/shortenKey';

 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { MoreHoriz } from 'iconoir-react';

 dayjs.extend(relativeTime);

@ -15,7 +14,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
  const profile = useProfileMetadata(pubkey);

  return (
-    <div className="group flex items-start gap-2">
+    <div className="group flex h-11 items-center gap-2">
      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
        <ImageWithFallback
          src={profile?.picture || DEFAULT_AVATAR}
@ -25,19 +24,16 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
        />
      </div>
      <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex w-full justify-between">
-          <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight group-hover:underline">
-              {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-            </span>
-            <span className="leading-tight text-zinc-500">·</span>
-            <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
-          </div>
-          <div>
-            <button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
-              <MoreHoriz width={12} height={12} className="text-zinc-500" />
-            </button>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-baseline gap-2">
+            <h5 className="text-sm font-semibold leading-none group-hover:underline">
+              {profile?.display_name || profile?.name || shortenKey(pubkey)}
+            </h5>
+            <span className="text-sm leading-none text-zinc-700"></span>
          </div>
+          <span className="text-sm leading-none text-zinc-500">
+            {profile?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))}
+          </span>
        </div>
      </div>
    </div>
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@ -7,7 +7,7 @@ import destr from 'destr';
 import reactStringReplace from 'react-string-replace';

 export const contentParser = (noteContent, noteTags) => {
-  let parsedContent = noteContent;
+  let parsedContent = noteContent.trim();

  // get data tags
  const tags = destr(noteTags);
@ -24,7 +24,7 @@ export const contentParser = (noteContent, noteTags) => {
      return <VideoPreview key={match + i} url={match} />;
    } else {
      return (
-        <a key={match + i} href={match} target="_blank" rel="noreferrer">
+        <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
          {match}
        </a>
      );
@ -55,7 +55,7 @@ export const contentParser = (noteContent, noteTags) => {
 };

 export const messageParser = (noteContent) => {
-  let parsedContent = noteContent;
+  let parsedContent = noteContent.trim();

  // handle urls
  parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
@ -70,7 +70,7 @@ export const messageParser = (noteContent) => {
      return <VideoPreview key={match + i} url={match} />;
    } else {
      return (
-        <a key={match + i} href={match} target="_blank" rel="noreferrer">
+        <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
          {match}
        </a>
      );
--- a/src/utils/shortenKey.tsx
+++ b/src/utils/shortenKey.tsx
@ -0,0 +1,6 @@
+import { nip19 } from 'nostr-tools';
+
+export const shortenKey = (pubkey: string) => {
+  const npub = nip19.npubEncode(pubkey);
+  return npub.substring(0, 16).concat('...');
+};