adding zip install

components/GettingStarted.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import Highlight from 'react-syntax-highlighter';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
 
 async function fetchData() {
   const response = await fetch('/data/getting-started-examples.json');
@@ -15,8 +17,6 @@ async function fetchData() {
     (instance: any) => instance.default === true,
   );
 
-  console.log(defaultInstanceData);
-
   const instanceResp = await fetch(defaultInstanceData.file);
   const instanceData = await instanceResp.json();
 
@@ -42,23 +42,28 @@ interface InstanceOption {
 
 const GettingStarted = () => {
   useEffect(() => {
-    fetchData().then(
-      ({ data, schemaData, instanceData, initialInstance, initialDetails }) => {
-        setOptions(data);
-        setFetchedSchema(schemaData);
-        setFetchedInstance(instanceData);
-        setInstances(initialInstance);
-        setDetails(initialDetails);
-        setSchemaPath(data[0].file);
-      },
-    );
+    fetchData()
+      .then(
+        ({
+          data,
+          schemaData,
+          instanceData,
+          initialInstance,
+          initialDetails,
+        }) => {
+          setOptions(data);
+          setFetchedSchema(schemaData);
+          setFetchedInstance(instanceData);
+          setInstances(initialInstance);
+          setDetails(initialDetails);
+        },
+      )
+      .catch((e) => console.log('Error: ', e));
   }, []);
 
   const [options, setOptions] = useState<SchemaOption[]>([]);
   const [instances, setInstances] = useState<InstanceOption[]>([]);
   const [details, setDetails] = useState<string[]>(['', '']);
-  const [schemaPath, setSchemaPath] = useState<string>('');
-
   const [fetchedSchema, setFetchedSchema] = useState();
   const [fetchedInstance, setFetchedInstance] = useState();
 
@@ -72,9 +77,10 @@ const GettingStarted = () => {
     if (selectedSchema) {
       const schemaResponse = await fetch(e.target.value);
       const schData = await schemaResponse.json();
+
       setFetchedSchema(schData);
       setInstances(selectedSchema.instances);
-      setSchemaPath(selectedSchema.file);
+
       const instResp = await fetch(selectedSchema.instances[0].file);
       const instData = await instResp.json();
       setFetchedInstance(instData);
@@ -89,15 +95,30 @@ const GettingStarted = () => {
   ) => {
     const selectedInstance = instances.find(
       (instance) => instance.file === e.target.value,
-    );
+    ) as InstanceOption;
 
     if (selectedInstance) {
       const instanceResponse = await fetch(e.target.value);
       const instanceData = await instanceResponse.json();
+
       setFetchedInstance(instanceData);
       setDetails([selectedInstance.details, selectedInstance.valid]);
     } else {
-      setFetchedInstance(null!);
+      setFetchedInstance(undefined);
+    }
+  };
+
+  const createZip = async () => {
+    try {
+      const zip = new JSZip();
+      zip.file('schema.json', JSON.stringify(fetchedSchema, null, 2));
+      zip.file('instance.json', JSON.stringify(fetchedInstance, null, 2));
+
+      zip.generateAsync({ type: 'blob' }).then((content) => {
+        saveAs(content, 'getting-started-examples.zip');
+      });
+    } catch (e) {
+      console.log('Error zipping files', e);
     }
   };
 
@@ -223,15 +244,11 @@ const GettingStarted = () => {
           </div>
         </div>
 
-        <button className='absolute right-0 my-4 text-[17px] bg-startBlue text-white px-3 py-1 rounded'>
-          <a
-            rel='noopener noreferrer'
-            target='_blank'
-            href={schemaPath}
-            download={true}
-          >
-            Download
-          </a>
+        <button
+          className='absolute right-0 my-4 text-[17px] bg-startBlue text-white px-3 py-1 rounded'
+          onClick={createZip}
+        >
+          Download
         </button>
       </div>
     </>

package.json

@@ -25,8 +25,10 @@
     "axios": "1.6.0",
     "classnames": "^2.3.1",
     "feed": "^4.2.2",
+    "file-saver": "^2.0.5",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
+    "jszip": "^3.10.1",
     "markdown-to-jsx": "^7.1.6",
     "moment": "2.29.4",
     "next": "14.1.1",
@@ -47,6 +49,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.1",
+    "@types/file-saver": "^2.0.7",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20.0.0",
     "@types/react": "18.2.37",