From 4941c8394e3d0fcd4b587cac90836b6ef1ea5d65 Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Thu, 25 May 2023 18:13:11 +0200
Subject: [PATCH] build improvements, first draft of improved tiles
---
.gitignore | 1 +
docker-compose.yml | 32 +++++++++++++++----
frontend/package.json | 1 +
frontend/public/markdown/hedgedoc.md | 14 ++++++++
frontend/public/markdown/nextcloud.md | 5 ++-
frontend/public/markdown/wekan.md | 7 +++-
frontend/public/markdown/wordpress.md | 5 ++-
frontend/public/markdown/zulip.md | 5 ++-
.../DashboardCard/DashboardCard.tsx | 30 ++++++++++++++---
frontend/tailwind.config.js | 2 +-
frontend/yarn.lock | 23 +++++++++++++
11 files changed, 109 insertions(+), 16 deletions(-)
create mode 100644 frontend/public/markdown/hedgedoc.md
diff --git a/.gitignore b/.gitignore
index 02eaabaf..4ffc68a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
# dependencies
/node_modules
+/frontend/node_modules
/.pnp
.pnp.js
diff --git a/docker-compose.yml b/docker-compose.yml
index 00b2d76d..de09e23f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,10 +5,10 @@ services:
context: ./frontend
env_file: ./frontend/local.env
volumes:
- - ./frontend/src:/home/node/app/src
+ - ./frontend:/home/node/app
ports:
- "3000:3000"
- command: "yarn run start"
+ command: "yarn start --watch --verbose"
stackspin_proxy:
image: nginx:1.24.0
ports:
@@ -62,7 +62,12 @@ services:
- 8000
volumes:
- "$KUBECONFIG:/.kube/config"
- entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/kratos-admin 8000:80"]
+ entrypoint:
+ [
+ "bash",
+ "-c",
+ "kubectl -n stackspin port-forward --address $$(hostname -i) service/kratos-admin 8000:80",
+ ]
kube_port_hydra_admin:
image: bitnami/kubectl:1.27.2
user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -70,7 +75,12 @@ services:
- 4445
volumes:
- "$KUBECONFIG:/.kube/config"
- entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/hydra-admin 4445:4445"]
+ entrypoint:
+ [
+ "bash",
+ "-c",
+ "kubectl -n stackspin port-forward --address $$(hostname -i) service/hydra-admin 4445:4445",
+ ]
kube_port_kratos_public:
image: bitnami/kubectl:1.27.2
user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -80,7 +90,12 @@ services:
- 8080
volumes:
- "$KUBECONFIG:/.kube/config"
- entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address 0.0.0.0 service/kratos-public 8080:80"]
+ entrypoint:
+ [
+ "bash",
+ "-c",
+ "kubectl -n stackspin port-forward --address 0.0.0.0 service/kratos-public 8080:80",
+ ]
kube_port_mysql:
image: bitnami/kubectl:1.27.2
user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -88,4 +103,9 @@ services:
- 3306
volumes:
- "$KUBECONFIG:/.kube/config"
- entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/single-sign-on-database-mariadb 3306:3306"]
+ entrypoint:
+ [
+ "bash",
+ "-c",
+ "kubectl -n stackspin port-forward --address $$(hostname -i) service/single-sign-on-database-mariadb 3306:3306",
+ ]
diff --git a/frontend/package.json b/frontend/package.json
index 356be15c..240e1c45 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
"@types/react-dom": "^17.0.2",
"axios": "^0.21.1",
"clsx": "^1.1.1",
+ "gray-matter": "^4.0.3",
"lint-staged": "^11.1.1",
"lodash": "^4.17.21",
"prismjs": "^1.24.1",
diff --git a/frontend/public/markdown/hedgedoc.md b/frontend/public/markdown/hedgedoc.md
new file mode 100644
index 00000000..aeef67f2
--- /dev/null
+++ b/frontend/public/markdown/hedgedoc.md
@@ -0,0 +1,14 @@
+---
+title: 'HedgeDoc'
+tileExcerpt: 'Quick collaborative writing pads, powered by Markdown.'
+---
+
+
+
+This is help text for HedgeDoc.
+This is more help text!!!!!!!!
+
+yo
+yo
+
+yo
diff --git a/frontend/public/markdown/nextcloud.md b/frontend/public/markdown/nextcloud.md
index 58a8e2c8..19f97540 100644
--- a/frontend/public/markdown/nextcloud.md
+++ b/frontend/public/markdown/nextcloud.md
@@ -1,4 +1,7 @@
-# Nextcloud
+---
+title: 'Nextcloud'
+tileExcerpt: 'Shared online file storage with local sync, in-browser file editing, password manager and more.'
+---
diff --git a/frontend/public/markdown/wekan.md b/frontend/public/markdown/wekan.md
index b8734302..feaa7d51 100644
--- a/frontend/public/markdown/wekan.md
+++ b/frontend/public/markdown/wekan.md
@@ -1,7 +1,12 @@
-# Wekan
+---
+title: 'Wekan'
+tileExcerpt: 'Kanban-style project and task management, from the simplest to-do board to multi-user boards with sub-tasks and swimlanes.'
+---
+CHNGE IN TEXT
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel felis rutrum, congue orci non, dictum
augue. In hac habitasse platea dictumst. Donec enim neque, vehicula vel consequat non, facilisis sed mauris.
Quisque a ligula sed velit gravida tristique. Mauris id nisi convallis, porttitor ante sed, blandit odio. In
diff --git a/frontend/public/markdown/wordpress.md b/frontend/public/markdown/wordpress.md
index bff1dc54..ddb6647f 100644
--- a/frontend/public/markdown/wordpress.md
+++ b/frontend/public/markdown/wordpress.md
@@ -1,4 +1,7 @@
-# Wordpress
+---
+title: 'Wordpress'
+tileExcerpt: 'The most used website platform in the world.'
+---
diff --git a/frontend/public/markdown/zulip.md b/frontend/public/markdown/zulip.md
index ca37acd6..ad16e753 100644
--- a/frontend/public/markdown/zulip.md
+++ b/frontend/public/markdown/zulip.md
@@ -1,4 +1,7 @@
-# Zulip
+---
+title: 'Zulip'
+tileExcerpt: 'Team chat organized in topics and streams, with mobile and desktop apps. Unlimited channels and users.'
+---
diff --git a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
index 1b9b8200..e675a1d6 100644
--- a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
+++ b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
@@ -1,12 +1,14 @@
import React, { useState, useEffect } from 'react';
import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown';
+import matter from 'gray-matter';
+import { QuestionMarkCircleIcon } from '@heroicons/react/outline';
export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
const [readMoreVisible, setReadMoreVisible] = useState(false);
- const [content, setContent] = useState('');
+ const [rawMarkdown, setContent] = useState('');
- const onReadMoreCloseClick = () => setReadMoreVisible(false);
+ const onReadMoreToggleClick = () => setReadMoreVisible((current) => !current);
useEffect(() => {
fetch(app.markdownSrc)
@@ -17,9 +19,19 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
.catch(() => {});
}, [app.markdownSrc]);
+ const appDescription = matter(rawMarkdown);
+
return (
<>
- <div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" key={app.name}>
+ <div
+ className="bg-white relative overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0"
+ key={app.name}
+ >
+ <div className="flex items-end justify-end absolute top-2 right-2">
+ <a href="#" onClick={onReadMoreToggleClick} className="flex items-center justify-center">
+ <QuestionMarkCircleIcon className="h-4 w-4 text-primary-600 hover:text-primary-800" />
+ </a>
+ </div>
<div className="px-4 py-5 sm:p-6">
<div className="mr-4 flex items-center">
<img
@@ -32,6 +44,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
<h2 className="text-xl leading-8 font-bold">{app.name}</h2>
</div>
</div>
+ <p className="text-gray-500 mt-2 text-sm leading-5 font-normal">{appDescription.data.tileExcerpt}</p>
</div>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
<a
@@ -45,8 +58,15 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
</div>
</div>
- <Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
- <ReactMarkdown className="prose">{content}</ReactMarkdown>
+ <Modal open={readMoreVisible} onClose={onReadMoreToggleClick} title={app.name}>
+ <ReactMarkdown
+ className="prose"
+ components={{
+ img: ({ node, ...props }) => <img alt="" width={250} {...props} />,
+ }}
+ >
+ {appDescription.content}
+ </ReactMarkdown>
</Modal>
</>
);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2b8dfae1..216ff4f0 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,5 @@
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
- darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
@@ -27,5 +26,6 @@ module.exports = {
tableLayout: ['hover', 'focus'],
},
},
+ // eslint-disable-next-line
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8d610539..8a4c7bc7 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5904,6 +5904,16 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+gray-matter@^4.0.3:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+ integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+ dependencies:
+ js-yaml "^3.13.1"
+ kind-of "^6.0.2"
+ section-matter "^1.0.0"
+ strip-bom-string "^1.0.0"
+
growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -10951,6 +10961,14 @@ schema-utils@^3.0.0, schema-utils@^3.1.1:
ajv "^6.12.5"
ajv-keywords "^3.5.2"
+section-matter@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+ integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+ dependencies:
+ extend-shallow "^2.0.1"
+ kind-of "^6.0.0"
+
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -11557,6 +11575,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
dependencies:
ansi-regex "^5.0.1"
+strip-bom-string@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+ integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
+
strip-bom@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
--
GitLab