feat: new export format for offline support (#11)

Author: peterpeterparker

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.0.0 (2021-XX-YY)
+
+### Features
+
+- new export format for offline support
+
 # 1.0.4 (2021-04-05)
 
 ### Features

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-deckdeckgo-plugin",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Export Figma frames to DeckDeckGo",
   "main": "dist/plugin.js",
   "scripts": {
@@ -14,6 +14,7 @@
   },
   "homepage": "https://deckdeckgo.com",
   "devDependencies": {
+    "@deckdeckgo/editor": "file:../deckdeckgo/utils/editor",
     "@figma/plugin-typings": "^1.34.1",
     "@types/jest": "^27.0.1",
     "esbuild": "^0.12.28",
@@ -33,6 +34,7 @@
     }
   },
   "dependencies": {
+    "date-fns": "^2.24.0",
     "jszip": "^3.7.1"
   }
 }

package.json

@@ -0,0 +1,9 @@
+interface OutputFrame {
+  element: HTMLElement;
+  filename: string;
+}
+
+interface OutputFrameGroup {
+  canvas: OutputFrame;
+  aside: OutputFrame | undefined;
+}

src/types/output.d.ts

@@ -1,14 +1,8 @@
 import JSZip from 'jszip';
 
-interface OutputFrame {
-  element: HTMLElement;
-  filename: string;
-}
+import {FileImportData, UserAsset} from '@deckdeckgo/editor';
 
-interface OutputFrameGroup {
-  canvas: OutputFrame;
-  aside: OutputFrame | undefined;
-}
+import {importData, userAssets} from './meta.utils';
 
 export const downloadFrames = async () => {
   const container: HTMLDivElement | null = document.querySelector('div.container');
@@ -29,7 +23,10 @@ export const downloadFrames = async () => {
     return;
   }
 
-  const blob: Blob = await zip(svgList);
+  const data: FileImportData = importData(svgList);
+  const assets: UserAsset[] = await Promise.all(userAssets(svgList));
+
+  const blob: Blob = await zip({assets, data});
 
   download(blob);
 };
@@ -60,76 +57,47 @@ const prepare = (frames: HTMLDivElement[]): OutputFrameGroup[] => {
   return svgList;
 };
 
-const zip = async (svgList: OutputFrameGroup[]): Promise<Blob> => {
+const zip = async ({assets, data}: {assets: UserAsset[]; data: FileImportData}): Promise<Blob> => {
   const zip = new JSZip();
 
-  const addImageZip = async ({dataUrl, filename}: {dataUrl: string; filename: string}) => {
-    const blob: Blob = await (await fetch(dataUrl)).blob();
-
-    zip.file(filename, blob, {
+  const addImageZip = async ({key, blob}: UserAsset) => {
+    zip.file(key, blob, {
       base64: true
     });
   };
 
-  const addHtmlZip = ({data, filename}: {data: string; filename: string}) => {
-    const blob: Blob = new Blob([data], {type: 'text/html'});
+  const addDeckMetaZip = (deck: FileImportData) => {
+    const blob: Blob = new Blob([JSON.stringify(deck)], {type: 'application/json'});
 
-    zip.file(filename, blob, {
+    zip.file('deck.json', blob, {
       base64: true
     });
   };
 
-  const addMetaZip = (meta: Metadata) => {
-    const blob: Blob = new Blob([JSON.stringify(meta)], {type: 'application/json'});
+  const addAssetMetaZip = (assets: UserAsset[]) => {
+    const blob: Blob = new Blob([JSON.stringify(assets.map(({key}) => ({key})))], {type: 'application/json'});
 
-    zip.file('meta.json', blob, {
+    zip.file('assets.json', blob, {
       base64: true
     });
   };
 
-  const promises: Promise<void>[] = svgList.map(async ({canvas, aside}: OutputFrameGroup) => {
-    await addImageZip({
-      dataUrl: (canvas.element as HTMLCanvasElement).toDataURL('image/webp'),
-      filename: canvas.filename
-    });
-
-    if (aside) {
-      addHtmlZip({
-        data: aside.element.innerHTML,
-        filename: aside.filename
-      });
-    }
-  });
+  const imagePromises: Promise<void>[] = assets.map((userAsset: UserAsset) => addImageZip(userAsset));
+  await Promise.all(imagePromises);
 
-  await Promise.all(promises);
+  addDeckMetaZip(data);
 
-  addMetaZip(meta(svgList));
+  addAssetMetaZip(assets);
 
   return zip.generateAsync({type: 'blob'});
 };
 
-const meta = (svgList: OutputFrameGroup[]): Metadata => {
-  const fonts: FontsComponent | null = document.querySelector('deckgo-fonts');
-
-  const slides: MetadataSlide[] = svgList.map(({canvas, aside}: OutputFrameGroup) => {
-    return {
-      background: canvas.filename,
-      ...(aside && {text: aside.filename})
-    };
-  });
-
-  return {
-    slides,
-    ...((fonts?.value && fonts?.value !== 'Default') && {fontFamily: fonts.value})
-  }
-};
-
 const download = (blob) => {
   const blobURL = window.URL.createObjectURL(blob);
 
   const link = document.createElement('a');
   link.href = blobURL;
-  link.download = `deckdeckgo.zip`;
+  link.download = `deckdeckgo.ddg`;
   link.click();
 
   window.URL.revokeObjectURL(blobURL);

src/utils/download.utils.ts

@@ -0,0 +1,76 @@
+// TODO: Extract to utilities because it is also use in studio
+
+export interface GoogleFont {
+  id: string;
+  name: string;
+  family: string;
+}
+
+// TODO fetch(`https://app.deckdeckgo.com/assests/assets.json`) at build time
+export const fonts: GoogleFont[] = [
+  {
+    id: 'google-fonts-lora',
+    name: 'Lora',
+    family: "'Lora', serif"
+  },
+  {
+    id: 'google-fonts-roboto',
+    name: 'Roboto',
+    family: "'Roboto', sans-serif"
+  },
+  {
+    id: 'google-fonts-open-sans',
+    name: 'Open Sans',
+    family: "'Open Sans', sans-serif"
+  },
+  {
+    id: 'google-fonts-montserrat',
+    name: 'Montserrat',
+    family: "'Montserrat', sans-serif"
+  },
+  {
+    id: 'google-fonts-cabin',
+    name: 'Cabin',
+    family: "'Cabin', sans-serif"
+  },
+  {
+    id: 'google-fonts-lato',
+    name: 'Lato',
+    family: "'Lato', sans-serif"
+  },
+  {
+    id: 'google-fonts-muli',
+    name: 'Muli',
+    family: "'Muli', sans-serif"
+  },
+  {
+    id: 'google-fonts-source-sans-pro',
+    name: 'Source Sans Pro',
+    family: "'Source Sans Pro', sans-serif"
+  },
+  {
+    id: 'google-fonts-libre-baskerville',
+    name: 'Libre Baskerville',
+    family: "'Libre Baskerville', serif"
+  },
+  {
+    id: 'google-fonts-oswald',
+    name: 'Oswald',
+    family: "'Oswald', sans-serif"
+  },
+  {
+    id: 'google-fonts-jura',
+    name: 'Jura',
+    family: "'Jura', sans-serif"
+  },
+  {
+    id: 'google-fonts-fjord-one',
+    name: 'Fjord One',
+    family: "'Fjord One', serif"
+  },
+  {
+    id: 'google-fonts-josefin-slab',
+    name: 'Josefin Slab',
+    family: "'Josefin Slab', serif"
+  }
+];