From f38b1599fcffcea7822579f341c0ff59a150e7b1 Mon Sep 17 00:00:00 2001
From: Gabriel Pelouze <gabriel@pelouze.net>
Date: Fri, 22 Sep 2023 16:09:54 +0200
Subject: [PATCH] add markdown support to paas description

---
 vre-panel/package.json               | 2 ++
 vre-panel/pages/index.tsx            | 7 +++++--
 vre-panel/tailwind.config.js         | 6 +++++-
 vreapis/paas_configuration/models.py | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/vre-panel/package.json b/vre-panel/package.json
index e1ccc40..25c8d4a 100644
--- a/vre-panel/package.json
+++ b/vre-panel/package.json
@@ -20,6 +20,7 @@
     "next-auth": "~4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "react-scripts": "5.0.1",
     "tailwindcss": "~3.3.3",
     "use-subscription": "~1.8.0",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "typescript": "^4.5",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "~20.4.5",
     "@types/react": "~18.2.0",
     "autoprefixer": "~10.4.15",
diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index e988621..7d08e77 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -1,6 +1,7 @@
-import {useEffect, useState, useContext} from 'react';
+import {useContext, useEffect, useState} from 'react';
 import getConfig from 'next/config';
 import Link from 'next/link';
+import ReactMarkdown from 'react-markdown'
 
 import {NewVREDialog} from '../components/NewVREDialog';
 import {PaasConfigContext} from '../context/PaasConfig';
@@ -60,7 +61,9 @@ const VLabs = ({}) => {
                     className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
                 </span>
           ) : (
-            paasConfig.description
+            <div className="prose">
+              <ReactMarkdown>{paasConfig.description}</ReactMarkdown>
+            </div>
           )}
         </p>
         {paasConfigLoading || (
diff --git a/vre-panel/tailwind.config.js b/vre-panel/tailwind.config.js
index 27f2a68..2a518a7 100644
--- a/vre-panel/tailwind.config.js
+++ b/vre-panel/tailwind.config.js
@@ -1,3 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+
 module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './templates/**/*.{js,ts,jsx,tsx}'],
   content: [],
@@ -33,5 +35,7 @@ module.exports = {
   variants: {
     textColor: ['responsive', 'hover', 'focus', 'active']
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }
diff --git a/vreapis/paas_configuration/models.py b/vreapis/paas_configuration/models.py
index 562c098..fe99c99 100644
--- a/vreapis/paas_configuration/models.py
+++ b/vreapis/paas_configuration/models.py
@@ -5,7 +5,10 @@
 
 class PaasConfiguration(models.Model):
     title = models.CharField(max_length=100, null=True)
-    description = models.TextField(null=True)
+    description = models.TextField(
+        null=True,
+        help_text="Markdown-formatted description of the platform",
+        )
     documentation_url = models.URLField(null=True, blank=True)
     site_icon = models.TextField(
         null=True,