CORE-4981: add datasets (#1247) (#1248)

oacore · Nov 12, 2024 · d8affb5 · d8affb5
1 parent bfb3e28
commit d8affb5
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 50 deletions.
diff --git a/netlify-cms.config.yml b/netlify-cms.config.yml
@@ -1105,6 +1105,43 @@ collections:
           widget: markdown,
           label: Reminder description
          }
+   - name: latest
+     label: latest Download instruction
+     file: dataset/latestInstruction.yml
+     fields:
+       - name: title
+         widget: string
+         label: Title
+       - name: id
+         widget: string
+         label: id
+         hint: id of the block. Must match anchor link url
+       - name: recommended
+         widget: markdown
+         label: Our recommendation
+       - name: reminder
+         widget: object
+         fields:
+           - {
+             name: title,
+             widget: markdown,
+             label: Reminder title
+           }
+           - {
+             name: description,
+             widget: object,
+             fields:
+               - {
+                 name: option,
+                 widget: markdown,
+                 label: option
+               }
+               - {
+                 name: option2,
+                 widget: markdown,
+                 label: option2
+               }
+           }
    - name: datasetLatest
      label: Latest dataset
      file: dataset/datasetLatest.yml

diff --git a/templates/documentation/dataset/index.jsx b/templates/documentation/dataset/index.jsx
@@ -46,12 +46,13 @@ const DatasetPageTemplate = ({
   meta,
   header,
   instruction,
+  latestInstruction,
   datasetLatest,
   additionalDatasets,
   structures,
 }) => (
   <Page title={meta.title} description={meta.tagline}>
-    <Layout>
+    <Layout className={styles.datasetWrapper}>
       <Section id="header">
         <h2>{header.title}</h2>
         <div className={styles.headerContent}>
@@ -60,24 +61,6 @@ const DatasetPageTemplate = ({
         </div>
         <Markdown className={styles.headerCaption}>{header.caption}</Markdown>
       </Section>
-      <Section
-        id={instruction.id}
-        useFullPageWidth
-        className={styles.instruction}
-      >
-        <h4>{instruction.title}</h4>
-        <div className={styles.instructionContent}>
-          <div>
-            <Markdown>{instruction.recommended}</Markdown>
-          </div>
-          <div className={styles.instructionReminder}>
-            <h5>{instruction.reminder.title}</h5>
-            <Markdown className={styles.instructionReminderText}>
-              {instruction.reminder.description}
-            </Markdown>
-          </div>
-        </div>
-      </Section>
       <DatasetSection
         title={datasetLatest.title}
         id={datasetLatest.id}
@@ -109,6 +92,23 @@ const DatasetPageTemplate = ({
           <Markdown>{datasetLatest.box.text}</Markdown>
         </div>
       </DatasetSection>
+      <Section id={latestInstruction.id} className={styles.instruction}>
+        <h4>{latestInstruction.title}</h4>
+        <div className={styles.instructionContent}>
+          <div>
+            <Markdown>{latestInstruction.recommended}</Markdown>
+          </div>
+          <div className={styles.instructionReminder}>
+            <Markdown>{latestInstruction.reminder.title}</Markdown>
+            <Markdown className={styles.instructionReminderText}>
+              {latestInstruction.reminder.descriptions.option}
+            </Markdown>
+            <Markdown className={styles.instructionReminderText}>
+              {latestInstruction.reminder.descriptions.option2}
+            </Markdown>
+          </div>
+        </div>
+      </Section>
       <DatasetSection
         key={additionalDatasets.items[1].id}
         title={additionalDatasets.items[1].title}
@@ -123,6 +123,20 @@ const DatasetPageTemplate = ({
           />
         ))}
       </DatasetSection>
+      <Section id={instruction.id} className={styles.instruction}>
+        <h4>{instruction.title}</h4>
+        <div className={styles.instructionContent}>
+          <div>
+            <Markdown>{instruction.recommended}</Markdown>
+          </div>
+          <div className={styles.instructionReminder}>
+            <h5>{instruction.reminder.title}</h5>
+            <Markdown className={styles.instructionReminderText}>
+              {instruction.reminder.description}
+            </Markdown>
+          </div>
+        </div>
+      </Section>
       <Section id="structures">
         <h4>{structures.title}</h4>
         {structures.items.map((structure) => (

diff --git a/templates/documentation/dataset/styles.module.scss b/templates/documentation/dataset/styles.module.scss
@@ -4,6 +4,42 @@ $left-border: 4px solid var(--primary);
 $box-bg-color: #fef5ef;
 $primary-color: #b75400;
 
+.dataset-wrapper {
+  .instruction {
+    background-color: var(--gray-200);
+    padding: 24px 48px;
+    &-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+    &-reminder {
+      max-width: 50ch;
+      margin-left: auto;
+      &-text {
+        border-left: $left-border;
+        padding-left: 2rem;
+        line-height: 1.8;
+        &:last-child {
+          margin-top: 20px;
+        }
+      }
+    }
+
+    strong {
+      color: $primary-color;
+    }
+    em {
+      color: var(--gray-600);
+    }
+    ul {
+      list-style: disc;
+      margin-left: 1.5rem;
+      li {
+        color: var(--gray-700);
+      }
+    }
+  }
+}
 .header {
   &-content {
     display: flex;
@@ -25,37 +61,6 @@ $primary-color: #b75400;
   }
 }
 
-.instruction {
-  background-color: var(--gray-200);
-  &-content {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  }
-  &-reminder {
-    max-width: 50ch;
-    margin-left: auto;
-    &-text {
-      border-left: $left-border;
-      padding-left: 2rem;
-      line-height: 1.8;
-    }
-  }
-
-  strong {
-    color: $primary-color;
-  }
-  em {
-    color: var(--gray-600);
-  }
-  ul {
-    list-style: disc;
-    margin-left: 1.5rem;
-    li {
-      color: var(--gray-700);
-    }
-  }
-}
-
 .dataset {
   .box-wide {
     grid-column: 1/5;