Add Export to Visio Tutorial (#629)

* Support looping videos on blog posts * Add link to tutorial * Remove explcit link
tone-row · Dec 1, 2023 · 8d74da5 · 8d74da5
1 parent 1887ddd
commit 8d74da5
Show file tree

Hide file tree

Showing 18 changed files with 184 additions and 106 deletions.
diff --git a/api/_lib/_notion.ts b/api/_lib/_notion.ts
@@ -56,7 +56,22 @@ marked.setOptions({
 });
 
 export async function getPostHtmlFromId(id: string) {
-  const mdblocks = await n2m.pageToMarkdown(id);
+  let mdblocks = await n2m.pageToMarkdown(id);
+  // convert video blocks to HTML
+  mdblocks = mdblocks.map((block) => {
+    if (block.type === "video") {
+      const videoHtml = videoBlockToHtml(block);
+      if (videoHtml) {
+        return {
+          type: "html",
+          parent: videoHtml,
+          children: [],
+        };
+      }
+    }
+    return block;
+  });
+
   const mdString = n2m.toMarkdownString(mdblocks);
   const html = marked(mdString);
   return html;
@@ -67,3 +82,23 @@ const AREAS_OF_RESEARCH_PAGE_ID = "6797865c1d744aa0babbea7d1558e8b3";
 export async function getAreasOfResearchHtml() {
   return await getPostHtmlFromId(AREAS_OF_RESEARCH_PAGE_ID);
 }
+
+/**
+
+Takes a block in the format
+{
+    type: 'video',
+    parent: '[image](url)',
+    children: []
+  }
+
+  and returns an HTML <video /> element with audio muted and autoplay, looping enabled
+
+ */
+function videoBlockToHtml(block: any) {
+  const markdown = block.parent;
+  const url = markdown.match(/\(([^)]+)\)/)[1];
+  if (url) return `<video src="${url}" muted autoplay loop></video>`;
+
+  return null;
+}
diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
@@ -488,12 +488,23 @@ function VisioCSVDownload() {
   const filename = useDownloadFilename();
   return (
     <div className="grid gap-2">
-      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+      <p className="text-sm text-neutral-600 dark:text-neutral-400">
         <Trans>
           Import your diagram it into Microsoft Visio using one of these CSV
           files.
         </Trans>
       </p>
+      <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        <Trans>Check out the guide:</Trans>{" "}
+        <a
+          href="https://flowchart.fun/blog/post/export-to-microsoft-visio"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500 dark:text-blue-300 font-bold"
+        >
+          How to Export Your Flowchart Fun Diagrams to Visio
+        </a>
+      </p>
       <div className="grid md:grid-cols-[repeat(2,minmax(0,300px))] gap-1 md:gap-2">
         <VisioDownloadOption
           imgSrc="/images/visio-flowchart.svg"

diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js
diff --git a/app/src/locales/de/messages.po b/app/src/locales/de/messages.po
@@ -107,7 +107,7 @@ msgstr "Zurück zum Editor"
 msgid "Background Color"
 msgstr "Hintergrundfarbe"
 
-#: src/components/ShareDialog.tsx:495
+#: src/components/ShareDialog.tsx:511
 msgid "Basic Flowchart"
 msgstr "Grundlegender Flussdiagramm"
 
@@ -185,6 +185,10 @@ msgstr "Änderungsprotokoll"
 msgid "Charts"
 msgstr "Diagramme"
 
+#: src/components/ShareDialog.tsx:498
+msgid "Check out the guide:"
+msgstr "Schau dir die Anleitung an:"
+
 #: src/pages/LogIn.tsx:80
 msgid "Check your email for a link to log in.<0/>You can close this window."
 msgstr "Überprüfen Sie Ihre E-Mail auf einen Link zum Einloggen. Sie können dieses Fenster schließen."
@@ -297,7 +301,7 @@ msgstr "PNG-Bild kopieren"
 msgid "Copy SVG Code"
 msgstr "Kopieren Sie den SVG-Code"
 
-#: src/components/ShareDialog.tsx:388
+#: src/components/ShareDialog.tsx:393
 msgid "Copy your Excalidraw code and paste it into <0>excalidraw.com</0> to edit. This feature is experimental and may not work with all diagrams. If you find a bug, please <1>let us know</1>."
 msgstr "Kopiere deinen Excalidraw-Code und füge ihn in <0>excalidraw.com</0> ein, um ihn zu bearbeiten. Diese Funktion ist experimentell und funktioniert möglicherweise nicht mit allen Diagrammen. Wenn du einen Fehler findest, <1>lass es uns wissen</1>."
 
@@ -390,7 +394,7 @@ msgid "Don't lose your work!"
 msgstr "Verlieren Sie nicht Ihre Arbeit!"
 
 #: src/components/ShareDialog.tsx:63
-#: src/components/ShareDialog.tsx:570
+#: src/components/ShareDialog.tsx:586
 msgid "Download"
 msgstr "Herunterladen"
 
@@ -678,15 +682,15 @@ msgstr "Importieren Sie aus Lucidchart, Visio und anderen CSV-Dateien."
 msgid "Import from Visio, Lucidchart, and CSV"
 msgstr "Importieren Sie von Visio, Lucidchart und CSV"
 
-#: src/components/ShareDialog.tsx:487
+#: src/components/ShareDialog.tsx:492
 msgid "Import your diagram it into Microsoft Visio using one of these CSV files."
 msgstr "Importieren Sie Ihr Diagramm mithilfe einer dieser CSV-Dateien in Microsoft Visio."
 
 #: src/components/ImportDataUnauthenticatedDialog.tsx:55
 msgid "Importing data is a pro feature. You can upgrade to Flowchart Fun Pro for just $3/month or $30/year."
 msgstr "Der Datenimport ist eine Profifunktion. Sie können für nur 3 USD pro Monat oder 30 USD pro Jahr auf Flowchart Fun Pro upgraden."
 
-#: src/components/ShareDialog.tsx:522
+#: src/components/ShareDialog.tsx:538
 msgid "Include a title using a <0>title</0> attribute. To use Visio coloring, add a <1>roleType</1> attribute equal to one of the following:"
 msgstr "Fügen Sie einen Titel mit einem <0>title</0>-Attribut ein. Um die Visio-Farbgebung zu verwenden, fügen Sie ein <1>roleType</1>-Attribut gleich einem der folgenden hinzu:"
 
@@ -806,7 +810,7 @@ msgstr "Einloggen, um zu speichern"
 msgid "Make a One-Time Donation"
 msgstr "Machen Sie eine einmalige Spende"
 
-#: src/components/ShareDialog.tsx:453
+#: src/components/ShareDialog.tsx:458
 msgid "Make publicly accessible"
 msgstr "Öffentlich zugänglich machen"
 
@@ -936,7 +940,7 @@ msgstr "Öffnen Sie das Kundenportal"
 msgid "Or, you can <0>create a new subscription</0>."
 msgstr "Oder Sie können ein neues Abonnement erstellen."
 
-#: src/components/ShareDialog.tsx:508
+#: src/components/ShareDialog.tsx:524
 #: src/lib/templates/templates.ts:40
 msgid "Organization Chart"
 msgstr "Organigramm"
@@ -988,8 +992,8 @@ msgstr "Datenverarbeitung"
 msgid "Product is too expensive..."
 msgstr "Das Produkt ist zu teuer..."
 
-#: src/components/ShareDialog.tsx:449
-#: src/components/ShareDialog.tsx:472
+#: src/components/ShareDialog.tsx:454
+#: src/components/ShareDialog.tsx:477
 msgid "Public"
 msgstr "Öffentlich"
 
@@ -1345,7 +1349,7 @@ msgstr "Dies ersetzt den aktuellen Inhalt."
 msgid "This will replace your current sandbox."
 msgstr "Dies ersetzt deine aktuelle Sandbox."
 
-#: src/components/ShareDialog.tsx:579
+#: src/components/ShareDialog.tsx:595
 msgid "Tip"
 msgstr "Tipp"
 
@@ -1471,11 +1475,11 @@ msgstr "Verwenden Sie das Kundenportal, um Ihre Rechnungsinformationen zu änder
 msgid "Use these settings to adapt the look and behavior of your flowcharts"
 msgstr "Verwenden Sie diese Einstellungen, um das Aussehen und Verhalten Ihrer Flussdiagramme anzupassen"
 
-#: src/components/ShareDialog.tsx:517
+#: src/components/ShareDialog.tsx:533
 msgid "Use this file for org charts, hierarchies, and other organizational structures."
 msgstr "Verwenden Sie diese Datei für Organigramme, Hierarchien und andere Organisationsstrukturen."
 
-#: src/components/ShareDialog.tsx:504
+#: src/components/ShareDialog.tsx:520
 msgid "Use this file for sequences, processes, and workflows."
 msgstr "Verwenden Sie diese Datei für Sequenzen, Prozesse und Workflows."
 

diff --git a/app/src/locales/en/messages.js b/app/src/locales/en/messages.js
diff --git a/app/src/locales/en/messages.po b/app/src/locales/en/messages.po
@@ -107,7 +107,7 @@ msgstr "Back To Editor"
 msgid "Background Color"
 msgstr "Background Color"
 
-#: src/components/ShareDialog.tsx:495
+#: src/components/ShareDialog.tsx:511
 msgid "Basic Flowchart"
 msgstr "Basic Flowchart"
 
@@ -185,6 +185,10 @@ msgstr "Changelog"
 msgid "Charts"
 msgstr "Charts"
 
+#: src/components/ShareDialog.tsx:498
+msgid "Check out the guide:"
+msgstr "Check out the guide:"
+
 #: src/pages/LogIn.tsx:80
 msgid "Check your email for a link to log in.<0/>You can close this window."
 msgstr "Check your email for a link to log in.<0/>You can close this window."
@@ -297,7 +301,7 @@ msgstr "Copy PNG Image"
 msgid "Copy SVG Code"
 msgstr "Copy SVG Code"
 
-#: src/components/ShareDialog.tsx:388
+#: src/components/ShareDialog.tsx:393
 msgid "Copy your Excalidraw code and paste it into <0>excalidraw.com</0> to edit. This feature is experimental and may not work with all diagrams. If you find a bug, please <1>let us know</1>."
 msgstr "Copy your Excalidraw code and paste it into <0>excalidraw.com</0> to edit. This feature is experimental and may not work with all diagrams. If you find a bug, please <1>let us know</1>."
 
@@ -390,7 +394,7 @@ msgid "Don't lose your work!"
 msgstr "Don't lose your work!"
 
 #: src/components/ShareDialog.tsx:63
-#: src/components/ShareDialog.tsx:570
+#: src/components/ShareDialog.tsx:586
 msgid "Download"
 msgstr "Download"
 
@@ -678,15 +682,15 @@ msgstr "Import from Lucidchart, Visio, and other CSV files."
 msgid "Import from Visio, Lucidchart, and CSV"
 msgstr "Import from Visio, Lucidchart, and CSV"
 
-#: src/components/ShareDialog.tsx:487
+#: src/components/ShareDialog.tsx:492
 msgid "Import your diagram it into Microsoft Visio using one of these CSV files."
 msgstr "Import your diagram it into Microsoft Visio using one of these CSV files."
 
 #: src/components/ImportDataUnauthenticatedDialog.tsx:55
 msgid "Importing data is a pro feature. You can upgrade to Flowchart Fun Pro for just $3/month or $30/year."
 msgstr "Importing data is a pro feature. You can upgrade to Flowchart Fun Pro for just $3/month or $30/year."
 
-#: src/components/ShareDialog.tsx:522
+#: src/components/ShareDialog.tsx:538
 msgid "Include a title using a <0>title</0> attribute. To use Visio coloring, add a <1>roleType</1> attribute equal to one of the following:"
 msgstr "Include a title using a <0>title</0> attribute. To use Visio coloring, add a <1>roleType</1> attribute equal to one of the following:"
 
@@ -806,7 +810,7 @@ msgstr "Log in to Save"
 msgid "Make a One-Time Donation"
 msgstr "Make a One-Time Donation"
 
-#: src/components/ShareDialog.tsx:453
+#: src/components/ShareDialog.tsx:458
 msgid "Make publicly accessible"
 msgstr "Make publicly accessible"
 
@@ -936,7 +940,7 @@ msgstr "Open Customer Portal"
 msgid "Or, you can <0>create a new subscription</0>."
 msgstr "Or, you can <0>create a new subscription</0>."
 
-#: src/components/ShareDialog.tsx:508
+#: src/components/ShareDialog.tsx:524
 #: src/lib/templates/templates.ts:40
 msgid "Organization Chart"
 msgstr "Organization Chart"
@@ -988,8 +992,8 @@ msgstr "Processing Data"
 msgid "Product is too expensive..."
 msgstr "Product is too expensive..."
 
-#: src/components/ShareDialog.tsx:449
-#: src/components/ShareDialog.tsx:472
+#: src/components/ShareDialog.tsx:454
+#: src/components/ShareDialog.tsx:477
 msgid "Public"
 msgstr "Public"
 
@@ -1345,7 +1349,7 @@ msgstr "This will replace the current content."
 msgid "This will replace your current sandbox."
 msgstr "This will replace your current sandbox."
 
-#: src/components/ShareDialog.tsx:579
+#: src/components/ShareDialog.tsx:595
 msgid "Tip"
 msgstr "Tip"
 
@@ -1471,11 +1475,11 @@ msgstr "Use the customer portal to change your billing information."
 msgid "Use these settings to adapt the look and behavior of your flowcharts"
 msgstr "Use these settings to adapt the look and behavior of your flowcharts"
 
-#: src/components/ShareDialog.tsx:517
+#: src/components/ShareDialog.tsx:533
 msgid "Use this file for org charts, hierarchies, and other organizational structures."
 msgstr "Use this file for org charts, hierarchies, and other organizational structures."
 
-#: src/components/ShareDialog.tsx:504
+#: src/components/ShareDialog.tsx:520
 msgid "Use this file for sequences, processes, and workflows."
 msgstr "Use this file for sequences, processes, and workflows."
 

diff --git a/app/src/locales/es/messages.js b/app/src/locales/es/messages.js
diff --git a/app/src/locales/es/messages.po b/app/src/locales/es/messages.po
@@ -107,7 +107,7 @@ msgstr "Volver al Editor"
 msgid "Background Color"
 msgstr "Color de fondo"
 
-#: src/components/ShareDialog.tsx:495
+#: src/components/ShareDialog.tsx:511
 msgid "Basic Flowchart"
 msgstr "Diagrama de Flujo Básico"
 
@@ -185,6 +185,10 @@ msgstr "Registro de cambios"
 msgid "Charts"
 msgstr "Gráficos"
 
+#: src/components/ShareDialog.tsx:498
+msgid "Check out the guide:"
+msgstr "Echa un vistazo a la guía:"
+
 #: src/pages/LogIn.tsx:80
 msgid "Check your email for a link to log in.<0/>You can close this window."
 msgstr "Revise su correo electrónico para obtener un enlace para iniciar sesión. Puede cerrar esta ventana."
@@ -297,7 +301,7 @@ msgstr "Copiar imagen PNG"
 msgid "Copy SVG Code"
 msgstr "Copiar código SVG"
 
-#: src/components/ShareDialog.tsx:388
+#: src/components/ShareDialog.tsx:393
 msgid "Copy your Excalidraw code and paste it into <0>excalidraw.com</0> to edit. This feature is experimental and may not work with all diagrams. If you find a bug, please <1>let us know</1>."
 msgstr "Copia tu código Excalidraw y pégalo en <0>excalidraw.com</0> para editar. Esta característica es experimental y puede que no funcione con todos los diagramas. Si encuentras un error, <1>háganoslo saber</1>."
 
@@ -390,7 +394,7 @@ msgid "Don't lose your work!"
 msgstr "¡No pierdas tu trabajo!"
 
 #: src/components/ShareDialog.tsx:63
-#: src/components/ShareDialog.tsx:570
+#: src/components/ShareDialog.tsx:586
 msgid "Download"
 msgstr "Descargar"
 
@@ -678,15 +682,15 @@ msgstr "Importar desde Lucidchart, Visio y otros archivos CSV."
 msgid "Import from Visio, Lucidchart, and CSV"
 msgstr "Importar desde Visio, Lucidchart y CSV"
 
-#: src/components/ShareDialog.tsx:487
+#: src/components/ShareDialog.tsx:492
 msgid "Import your diagram it into Microsoft Visio using one of these CSV files."
 msgstr "Importa tu diagrama a Microsoft Visio usando uno de estos archivos CSV."
 
 #: src/components/ImportDataUnauthenticatedDialog.tsx:55
 msgid "Importing data is a pro feature. You can upgrade to Flowchart Fun Pro for just $3/month or $30/year."
 msgstr "La importación de datos es una característica para profesionales. Puedes actualizar a Flowchart Fun Pro por solo $3/mes o $30/año."
 
-#: src/components/ShareDialog.tsx:522
+#: src/components/ShareDialog.tsx:538
 msgid "Include a title using a <0>title</0> attribute. To use Visio coloring, add a <1>roleType</1> attribute equal to one of the following:"
 msgstr "Incluye un título usando un atributo <0>title</0>. Para usar el color de Visio, agrega un atributo <1>roleType</1> igual a uno de los siguientes:"
 
@@ -806,7 +810,7 @@ msgstr "Inicia sesión para guardar"
 msgid "Make a One-Time Donation"
 msgstr "Realizar una donación única"
 
-#: src/components/ShareDialog.tsx:453
+#: src/components/ShareDialog.tsx:458
 msgid "Make publicly accessible"
 msgstr "Hacerlo accesible al público"
 
@@ -936,7 +940,7 @@ msgstr "Abrir portal de clientes"
 msgid "Or, you can <0>create a new subscription</0>."
 msgstr "O, puedes <0>crear una nueva suscripción</0>."
 
-#: src/components/ShareDialog.tsx:508
+#: src/components/ShareDialog.tsx:524
 #: src/lib/templates/templates.ts:40
 msgid "Organization Chart"
 msgstr "Organigrama"
@@ -988,8 +992,8 @@ msgstr "Procesamiento de datos"
 msgid "Product is too expensive..."
 msgstr "El producto es demasiado caro..."
 
-#: src/components/ShareDialog.tsx:449
-#: src/components/ShareDialog.tsx:472
+#: src/components/ShareDialog.tsx:454
+#: src/components/ShareDialog.tsx:477
 msgid "Public"
 msgstr "Público"
 
@@ -1345,7 +1349,7 @@ msgstr "Esto reemplazará el contenido actual."
 msgid "This will replace your current sandbox."
 msgstr "Esto reemplazará su sandbox actual."
 
-#: src/components/ShareDialog.tsx:579
+#: src/components/ShareDialog.tsx:595
 msgid "Tip"
 msgstr "Consejo"
 
@@ -1471,11 +1475,11 @@ msgstr "Utilice el portal de clientes para cambiar su información de facturaci
 msgid "Use these settings to adapt the look and behavior of your flowcharts"
 msgstr "Utilice estos ajustes para adaptar la apariencia y el comportamiento de sus diagramas de flujo"
 
-#: src/components/ShareDialog.tsx:517
+#: src/components/ShareDialog.tsx:533
 msgid "Use this file for org charts, hierarchies, and other organizational structures."
 msgstr "Utilice este archivo para diagramas de organización, jerarquías y otras estructuras organizativas."
 
-#: src/components/ShareDialog.tsx:504
+#: src/components/ShareDialog.tsx:520
 msgid "Use this file for sequences, processes, and workflows."
 msgstr "Utilice este archivo para secuencias, procesos y flujos de trabajo."
 

diff --git a/app/src/locales/fr/messages.js b/app/src/locales/fr/messages.js