full metadata preview

content/pages/publish.json

@@ -11,6 +11,13 @@
         "help": "Enter a concise title.",
         "required": true
       },
+      {
+        "name": "description",
+        "label": "Description",
+        "help": "Add a thorough description with as much detail as possible. You can use [Markdown](https://daringfireball.net/projects/markdown/basics).",
+        "type": "textarea",
+        "required": true
+      },
       {
         "name": "files",
         "label": "Files",
@@ -19,13 +26,6 @@
         "type": "files",
         "required": true
       },
-      {
-        "name": "description",
-        "label": "Description",
-        "help": "Add a thorough description with as much detail as possible.",
-        "type": "textarea",
-        "required": true
-      },
       {
         "name": "access",
         "label": "Access Type",

src/components/atoms/File.module.css

@@ -1,4 +1,5 @@
 .file {
+  font-size: var(--font-size-small);
   background: var(--color-secondary);
   background-size: 100%;
   padding: var(--spacer) calc(var(--spacer) / 2);
@@ -10,7 +11,6 @@
 }
 
 .file li {
-  font-size: var(--font-size-small);
   color: var(--brand-white);
 }
 
@@ -18,3 +18,9 @@
   font-size: var(--font-size-mini);
   opacity: 0.75;
 }
+
+.file.small {
+  font-size: var(--font-size-mini);
+  height: 5.75rem;
+  width: 4.5rem;
+}

src/components/atoms/File.tsx

@@ -1,14 +1,31 @@
 import React, { ReactElement } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
 import filesize from 'filesize'
+import classNames from 'classnames/bind'
 import cleanupContentType from '../../utils/cleanupContentType'
 import styles from './File.module.css'
 
-export default function File({ file }: { file: FileMetadata }): ReactElement {
+const cx = classNames.bind(styles)
+
+export default function File({
+  file,
+  className,
+  small
+}: {
+  file: FileMetadata
+  className?: string
+  small?: boolean
+}): ReactElement {
   if (!file) return null
 
+  const styleClasses = cx({
+    file: true,
+    small: small,
+    [className]: className
+  })
+
   return (
-    <ul className={styles.file}>
+    <ul className={styleClasses}>
       {file.contentType || file.contentLength ? (
         <>
           <li>{cleanupContentType(file.contentType)}</li>

src/components/atoms/Input/Help.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Help.module.css'
+import Markdown from '../Markdown'
 
-const FormHelp = ({ children }: { children: string }) => (
-  <div className={styles.help}>{children}</div>
+const FormHelp = ({ children }: { children: string }): ReactElement => (
+  <Markdown className={styles.help} text={children} />
 )
 
 export default FormHelp

src/components/molecules/FormFields/FilesInput/Info.tsx

@@ -9,7 +9,7 @@ export default function FileInfo({
   removeItem
 }: {
   file: FileMetadata
-  removeItem(): void
+  removeItem?(): void
 }): ReactElement {
   return (
     <div className={styles.info}>
@@ -19,9 +19,11 @@ export default function FileInfo({
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
         {file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
       </ul>
-      <button className={styles.removeButton} onClick={() => removeItem()}>
-        &times;
-      </button>
+      {removeItem && (
+        <button className={styles.removeButton} onClick={() => removeItem()}>
+          &times;
+        </button>
+      )}
     </div>
   )
 }

src/components/pages/Publish/index.module.css

@@ -12,6 +12,37 @@
 
   .sticky {
     position: sticky;
-    top: var(--spacer);
+    top: calc(var(--spacer) / 2);
   }
 }
+
+.preview {
+  font-size: var(--font-size-small);
+  margin-bottom: var(--spacer);
+}
+
+.preview header {
+  margin-bottom: var(--spacer);
+}
+
+.metaFull {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: 1fr 1fr;
+}
+
+.preview h2 {
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.preview h3 {
+  margin-bottom: calc(var(--spacer) / 12);
+}
+
+.preview [class*='MetaItem-module--metaItem'] {
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.file {
+  margin-bottom: calc(var(--spacer) / 2);
+}

src/components/pages/Publish/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
 import PublishForm from './PublishForm'
+import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
 import styles from './index.module.css'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
@@ -11,6 +12,11 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { MetadataPublishForm } from '../../../@types/Metadata'
 import { transformPublishFormToMetadata } from './utils'
 import { toast } from 'react-toastify'
+import Markdown from '../../atoms/Markdown'
+import Tags from '../../atoms/Tags'
+import MetaItem from '../../organisms/AssetContent/MetaItem'
+import FileInfo from '../../molecules/FormFields/FilesInput/Info'
+import File from '../../atoms/File'
 
 export default function PublishPage({
   content
@@ -78,10 +84,40 @@ export default function PublishPage({
             <PublishForm content={content.form} />
             <aside>
               <div className={styles.sticky}>
-                <Web3Feedback />
                 <div className={styles.preview}>
-                  <h2>{values.name}</h2>
+                  <header>
+                    <h2>{values.name}</h2>
+                    {values.description && (
+                      <Markdown text={values.description} />
+                    )}
+                    {values.files && values.files.length && (
+                      <File
+                        file={values.files[0] as FileMetadata}
+                        className={styles.file}
+                        small
+                      />
+                    )}
+                    {values.tags && <Tags items={values.tags.split(',')} />}
+                  </header>
+
+                  <div className={styles.metaFull}>
+                    {Object.entries(values)
+                      .filter(
+                        ([key, value]) =>
+                          !(
+                            key.includes('name') ||
+                            key.includes('description') ||
+                            key.includes('tags') ||
+                            key.includes('files') ||
+                            key.includes('termsAndConditions')
+                          )
+                      )
+                      .map(([key, value]) => (
+                        <MetaItem key={key} title={key} content={value} />
+                      ))}
+                  </div>
                 </div>
+                <Web3Feedback />
               </div>
             </aside>
           </>