Restructured frontend, some layout plish

frontend/.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+public/data

frontend/editable-ui/package.json

@@ -5,10 +5,8 @@
   "type": "module",
   "proxy": "http://127.0.0.1:8000",
   "scripts": {
-    "dev:view": "REACT_APP_VIEW_TYPE=view vite --host 0.0.0.0 --port 3000 --mode view",
+    "dev": "vite --host 0.0.0.0 --port 3000",
-    "dev:editableview": "REACT_APP_VIEW_TYPE=editableview vite --host 0.0.0.0 --port 3000 --mode editableview",
+    "build": "vite build",
-    "build:view": "REACT_APP_VIEW_TYPE=view vite build",
-    "build:editableview": "REACT_APP_VIEW_TYPE=editableview vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

frontend/editable-ui/src/App.jsx

@@ -4,21 +4,21 @@ import {useEffect, useState} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 //Import Views
-import Home from './components/editable/home';
+import Home from './components/home';
-import CategoryList from './components/editable/category-list';
+import CategoryList from './components/category-list';
-import BlogList from './components/editable/blog-list';
+import BlogList from './components/blog-list';
-import Blog from './components/editable/blog';
+import Blog from './components/blog';
 
 
 //Import Shared Views
-import Header from './components/editable/shared/navbar';
+import Header from './components/shared/navbar';
-import Footer from './components/editable/shared/footer';
+import Footer from './components/shared/footer';
-import Notification from './components/editable/shared/notification';
+import Notification from './components/shared/notification';
 
 //Import Services
 import EditableDataService from './services/editable-data-service'
 
-function AppEditable() {
+function App() {
   const [userData, setUserData] = useState(null);
   const [themeConfig, setThemeConfig] = useState(null);
   const [globalTheme, setGlobalTheme] = useState("lightTheme");
@@ -94,4 +94,4 @@ function AppEditable() {
   );
 }
 
-export default AppEditable;
+export default App;

frontend/editable-ui/src/components/blog-list.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useEffect, useState } from 'react';
-import EditableDataService from '../../services/editable-data-service';
+import EditableDataService from '../services/editable-data-service';
 import CardListViewer from './shared/card-list-viewer';
 import CategoryBar from './shared/category-bar';
 import {
@@ -16,7 +16,6 @@ import {
 import { useNavigate, useParams } from 'react-router-dom';
 import { faLeftLong } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import EditableMediaService from "../../services/editable-media-service.jsx";
 
 function BlogList(props) {
 

frontend/editable-ui/src/components/blog.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 
-import EditableDataService from '../../services/editable-data-service';
+import EditableDataService from '../services/editable-data-service';
-import EditableMediaService from '../../services/editable-media-service'
+import EditableMediaService from '../services/editable-media-service'
 import CategoryBar from './shared/category-bar';
 import EditorComponent from './shared/tiptap';
 import ModalComponent from './shared/modal-component';

frontend/editable-ui/src/components/category-list.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 //import services
-import EditableDataService from '../../services/editable-data-service';
+import EditableDataService from '../services/editable-data-service';
 
 //import views
 import CardListViewer from './shared/card-list-viewer';

frontend/editable-ui/src/components/home.jsx

@@ -2,7 +2,7 @@ import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGr
 import {useEffect, useState, useRef} from 'react';
 import EditorComponent from './shared/tiptap';
 import MediaUpload from './shared/media-upload'
-import EditableMediaService from '../../services/editable-media-service'
+import EditableMediaService from '../services/editable-media-service'
 
 function HomePage(props) {
   const [introContent, setIntroContent] = useState("")

frontend/editable-ui/src/components/shared/card-list-viewer.jsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
-import EditableMediaService from '../../../services/editable-media-service'
+import EditableMediaService from '../../services/editable-media-service'
 import {
   Card,
   CardImg,

frontend/editable-ui/src/components/shared/category-bar.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import EditableDataService from '../../../services/editable-data-service';
+import EditableDataService from '../../services/editable-data-service';
 import { Link } from 'react-router-dom';
 import { Container, Row, Col, Button, Spinner, ListGroup, ListGroupItem, ButtonGroup } from 'reactstrap';
 

frontend/editable-ui/src/components/shared/file-component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Label, Input } from 'reactstrap';
-import EditableDataService from '../../../services/editable-data-service';
+import EditableDataService from '../../services/editable-data-service';
 
 function FileComponent(props) {
   const [file, setFile] = useState(null);

frontend/editable-ui/src/components/shared/media-lister.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from 'reactstrap';
-import EditableDataService from '../../../services/editable-data-service';
+import EditableDataService from '../../services/editable-data-service';
 
 function MediaLister(props) {
   const [media, setMedia] = useState([]);

frontend/editable-ui/src/components/shared/modal-component.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
 function ModalComponent(props) {

frontend/editable-ui/src/components/shared/navbar.jsx

@@ -9,7 +9,7 @@ import {
   Button, ButtonGroup
 } from 'reactstrap';
 import { useState, useEffect } from 'react';
-import EditableMediaService from '../../../services/editable-media-service'
+import EditableMediaService from '../../services/editable-media-service'
 import Publish from './publish'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon, faPen, faBrush } from '@fortawesome/free-solid-svg-icons';

frontend/editable-ui/src/components/shared/notification.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Collapse, Button, CardBody, Card, Alert } from 'reactstrap';
 
 function Notification(props) {

frontend/editable-ui/src/components/shared/publish.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import EditableDataService from '../../../services/editable-data-service';
+import EditableDataService from '../../services/editable-data-service';
 
 function Publish(props) {
     const [publishMethods, setPublishMethods] = useState(null)

frontend/editable-ui/src/main.jsx

@@ -1,14 +1,10 @@
 import React, { Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom/client'
 import './index.css'
-const ViewComponent = lazy(() => 
+import App from './App'
-  import.meta.env.VITE_APP_VIEW_TYPE === 'editableview' 
-    ? import('./AppEditable.jsx')
-    : import('./App.jsx')
-);
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <ViewComponent />
+    <App />
   </React.StrictMode>,
 )

frontend/public/data/category/category-metadata.json

@@ -1,93 +0,0 @@
-[
-  {
-    "id": "0cf9b099-4d95-4637-b677-461969f6f1b3",
-    "name": "Enter name",
-    "coverImage": "",
-    "tagLine": "Enter tagline",
-    "description": "Enter description",
-    "featuredBlog": "",
-    "blogMetadata": [
-      {
-        "id": "2003ad1a-21e6-4879-843c-5625cd1dd935",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "blog/2003ad1a-21e6-4879-843c-5625cd1dd935/media/4Cdd4a2003ad1a-21e6-4879-843c-5625cd1dd935image.png",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "0f9c7546-b229-49fd-9461-030f3dd7d416",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "02c76225-1670-4979-bdae-74c9cea6ca6b",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "8b6ecd17-fb79-4110-ad8b-3f7c3e33c250",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "11948b37-1b3b-481b-878b-afbb80ac7eb1",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "c7d0e0e4-c911-4a44-a8c3-9536de7f3f68",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "d6368fe4-5368-4074-9eb6-c51cd5cc7037",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "blog/d6368fe4-5368-4074-9eb6-c51cd5cc7037/media/42Bb11d6368fe4-5368-4074-9eb6-c51cd5cc7037image.png",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "bc363052-0b97-4d1d-82a0-0bb4f4e8f090",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      },
-      {
-        "id": "d6e551a1-3727-4080-b16b-f4459212298d",
-        "name": "Enter a blog name",
-        "description": "Enter a description",
-        "coverimage": "",
-        "tagLine": "Enter a tagline",
-        "parentCategory": "0cf9b099-4d95-4637-b677-461969f6f1b3"
-      }
-    ]
-  },
-  {
-    "id": "1e154085-47ef-4d32-8f89-8426e9be4d24",
-    "name": "Enter name",
-    "coverImage": "",
-    "tagLine": "Enter tagline",
-    "description": "Enter description",
-    "featuredBlog": "",
-    "blogMetadata": []
-  }
-]

frontend/public/data/shared/user-data.json

@@ -1,6 +0,0 @@
-{
-  "name": "Jhon Doe",
-  "introContent": "<p>No</p>",
-  "profilePhoto": "homepage/media/4BD5E2homepage148685909.jpeg",
-  "builtWith": true
-}

frontend/viewable-ui/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

frontend/viewable-ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/data/homepage/media/profile.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rangolio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/viewable-ui/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "proxy": "http://127.0.0.1:8000",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 3000",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tiptap/extension-blockquote": "^2.3.2",
+    "@tiptap/extension-color": "^2.3.2",
+    "@tiptap/extension-highlight": "^2.3.2",
+    "@tiptap/extension-image": "^2.4.0",
+    "@tiptap/extension-link": "^2.3.2",
+    "@tiptap/extension-list-item": "^2.3.2",
+    "@tiptap/extension-text-align": "^2.3.2",
+    "@tiptap/extension-text-style": "^2.3.2",
+    "@tiptap/extension-underline": "^2.3.2",
+    "@tiptap/react": "^2.3.2",
+    "@tiptap/starter-kit": "^2.3.2",
+    "axios": "^1.6.8",
+    "bootstrap": "^5.3.3",
+    "html-react-parser": "^5.1.10",
+    "interactjs": "^1.10.27",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.22.3",
+    "reactstrap": "^9.2.2",
+    "sass": "^1.75.0",
+    "tiptap": "^1.32.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}

frontend/viewable-ui/public/data/blog/8ebfc361-d0c3-459e-9e9f-708b4783512b/blog-data.json

@@ -0,0 +1,9 @@
+{
+  "id": "8ebfc361-d0c3-459e-9e9f-708b4783512b",
+  "name": "Blog2",
+  "description": "Enter a description",
+  "coverimage": "",
+  "tagLine": "Enter a tagline",
+  "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba",
+  "contentBody": "<p></p>"
+}

frontend/viewable-ui/public/data/blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/blog-data.json

@@ -0,0 +1,9 @@
+{
+  "id": "ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a",
+  "name": "Test Blog1",
+  "description": "Test Description",
+  "coverimage": "blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/media/5eBEABea9d56bc-ef66-48ae-a6e2-ff51b0142f8aaholmes_canada.jpg",
+  "tagLine": "Test Tagline",
+  "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba",
+  "contentBody": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ultrices velit, vitae dignissim nisi. Nullam quis risus tristique, pretium ipsum non, tristique eros. In hac habitasse platea dictumst. Ut ultricies laoreet massa, a faucibus metus sollicitudin ac. Pellentesque lacinia lorem vel lacus cursus, sed elementum massa condimentum. Donec felis lectus, molestie sit amet orci non, semper fringilla lacus. Nunc ipsum ipsum, imperdiet vel lorem eu, accumsan tincidunt lacus. Duis porta purus orci, quis fermentum quam molestie id. Nunc pellentesque nec elit eu tincidunt. Integer et condimentum enim, quis mollis enim. Integer consequat enim at interdum cursus.</p><img src=\"http://127.0.0.1:8000/media/data/blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/media/5eBEABea9d56bc-ef66-48ae-a6e2-ff51b0142f8aaholmes_canada.jpg\"><p>Aenean aliquam, erat at suscipit ornare, justo justo eleifend nisi, eu blandit lectus diam pharetra leo. Nunc pharetra tincidunt turpis, ac euismod justo imperdiet id. Nunc id nibh et mi ullamcorper vehicula vel in sapien. Mauris elit nulla, maximus sed pharetra at, convallis a tellus. Sed nisi turpis, consectetur sit amet leo at, commodo placerat sapien. Mauris risus lorem, maximus id diam porttitor, vestibulum mattis tortor. Duis leo erat, ullamcorper eget mauris sit amet, ornare tempus leo. Pellentesque sit amet elit id ligula ultricies suscipit id a sem. Fusce et euismod diam, id efficitur nulla. In sagittis est vel magna eleifend, non condimentum ex posuere.</p><p>Phasellus eleifend faucibus tempus. Duis at eros pretium, sodales enim eget, congue est. Quisque semper bibendum metus sit amet tempor. Aenean imperdiet velit eu velit dignissim porta id vel ligula. Sed sed dictum risus. Suspendisse metus erat, finibus eget augue vitae, viverra tempus arcu. Fusce ligula urna, commodo ut lorem non, egestas bibendum quam. Donec quis erat non lectus tincidunt eleifend. Integer scelerisque, tortor vitae aliquet consequat, neque diam consectetur mauris, ut eleifend tellus tortor vel odio. Vivamus bibendum elit eget blandit vehicula. Nunc elementum enim sed libero tempus gravida. Ut sit amet leo nulla. Quisque sit amet turpis pulvinar, placerat massa vitae, cursus magna. Duis volutpat finibus orci, eu viverra metus blandit sed.</p><p>Etiam in metus nec mauris imperdiet tristique. Aliquam pharetra purus fringilla urna malesuada accumsan. Quisque vitae gravida tortor. Duis at dolor lobortis, mattis tellus ut, finibus urna. Curabitur placerat, nibh fringilla tempus mollis, nisi magna rhoncus felis, eu consequat turpis massa sit amet nisi. Nullam cursus lacus dui, ut ultrices risus placerat vel. Praesent porttitor, felis id rhoncus pellentesque, odio purus fringilla nisl, non vulputate enim ipsum vitae magna. Pellentesque eu risus ac tortor auctor sodales. Cras egestas elementum diam sit amet ullamcorper. Pellentesque fermentum felis a dolor molestie mattis.</p><img src=\"http://127.0.0.1:8000/media/data/blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/media/cbdbE1ea9d56bc-ef66-48ae-a6e2-ff51b0142f8aachambon_relax.jpg\"><p>Praesent eget risus ligula. Nam sed nisl at massa accumsan pharetra in a velit. Etiam malesuada, massa id bibendum volutpat, elit tortor condimentum erat, sed interdum quam risus at lorem. Curabitur placerat consequat neque et laoreet. Phasellus vehicula mauris in maximus imperdiet. Cras ultrices sollicitudin lacus at dictum. Maecenas at consequat tellus. Vestibulum ultrices ligula ut lectus sodales, ac convallis ligula aliquet. Nullam lacinia eu orci sit amet placerat. Ut iaculis pretium tortor, consequat luctus tellus euismod vel.</p>"
+}

frontend/viewable-ui/public/data/category/15a7bf3a-9084-4117-99b1-5a89910f9fba/category-data.json

@@ -0,0 +1,26 @@
+{
+  "id": "15a7bf3a-9084-4117-99b1-5a89910f9fba",
+  "name": "Test Category",
+  "coverImage": "",
+  "tagLine": "Test Tagline",
+  "description": "Test Description",
+  "featuredBlog": null,
+  "blogMetadata": [
+    {
+      "id": "ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a",
+      "name": "Test Blog1",
+      "description": "Test Description",
+      "coverimage": "blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/media/5eBEABea9d56bc-ef66-48ae-a6e2-ff51b0142f8aaholmes_canada.jpg",
+      "tagLine": "Test Tagline",
+      "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba"
+    },
+    {
+      "id": "8ebfc361-d0c3-459e-9e9f-708b4783512b",
+      "name": "Blog2",
+      "description": "Enter a description",
+      "coverimage": "",
+      "tagLine": "Enter a tagline",
+      "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba"
+    }
+  ]
+}

frontend/viewable-ui/public/data/category/category-metadata.json

@@ -0,0 +1,28 @@
+[
+  {
+    "id": "15a7bf3a-9084-4117-99b1-5a89910f9fba",
+    "name": "Test Category",
+    "coverImage": "",
+    "tagLine": "Test Tagline",
+    "description": "Test Description",
+    "featuredBlog": null,
+    "blogMetadata": [
+      {
+        "id": "ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a",
+        "name": "Test Blog1",
+        "description": "Test Description",
+        "coverimage": "blog/ea9d56bc-ef66-48ae-a6e2-ff51b0142f8a/media/5eBEABea9d56bc-ef66-48ae-a6e2-ff51b0142f8aaholmes_canada.jpg",
+        "tagLine": "Test Tagline",
+        "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba"
+      },
+      {
+        "id": "8ebfc361-d0c3-459e-9e9f-708b4783512b",
+        "name": "Blog2",
+        "description": "Enter a description",
+        "coverimage": "",
+        "tagLine": "Enter a tagline",
+        "parentCategory": "15a7bf3a-9084-4117-99b1-5a89910f9fba"
+      }
+    ]
+  }
+]

frontend/viewable-ui/public/data/shared/theme-config.json

@@ -12,12 +12,12 @@
     "buttonColor": "light",
     "navBar": {
       "navBarTheme": "navbar-dark",
-      "background": "bg-secondary",
+      "background": "bg-dark",
       "buttonColor": "light"
     },
     "footer": {
-      "background": "bg-secondary",
+      "background": "bg-dark",
-      "text": "text-black"
+      "text": "text-white"
     }
   },
   "lightTheme": {
@@ -32,12 +32,12 @@
     "buttonColor": "dark",
     "navBar": {
       "navBarTheme": "navbar-light",
-      "background": "bg-secondary",
+      "background": "bg-light",
-      "buttonColor": "light"
+      "buttonColor": "black"
     },
     "footer": {
-      "background": "bg-secondary",
+      "background": "bg-light",
-      "text": "text-white"
+      "text": "text-black"
     }
   }
 }

frontend/viewable-ui/public/data/shared/user-data.json

@@ -0,0 +1,6 @@
+{
+  "name": "Jhon Doe",
+  "introContent": "<p style=\"text-align: justify\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ultrices velit, vitae dignissim nisi. Nullam quis risus tristique, pretium ipsum non, tristique eros. In hac habitasse platea dictumst. Ut ultricies laoreet massa, a faucibus metus sollicitudin ac. Pellentesque lacinia lorem vel lacus cursus, sed elementum massa condimentum. Donec felis lectus, molestie sit amet orci non, semper fringilla lacus. Nunc ipsum ipsum, imperdiet vel lorem eu, accumsan tincidunt lacus. Duis porta purus orci, quis fermentum quam molestie id. Nunc pellentesque nec elit eu tincidunt. Integer et condimentum enim, quis mollis enim. Integer consequat enim at interdum cursus.</p><img src=\"http://127.0.0.1:8000/media/data/homepage/media/ebaac2homepageachambon_relax.jpg\"><p>Aenean aliquam, erat at suscipit ornare, justo justo eleifend nisi, eu blandit lectus diam pharetra leo. Nunc pharetra tincidunt turpis, ac euismod justo imperdiet id. Nunc id nibh et mi ullamcorper vehicula vel in sapien. Mauris elit nulla, maximus sed pharetra at, convallis a tellus. Sed nisi turpis, consectetur sit amet leo at, commodo placerat sapien. Mauris risus lorem, maximus id diam porttitor, vestibulum mattis tortor. Duis leo erat, ullamcorper eget mauris sit amet, ornare tempus leo. Pellentesque sit amet elit id ligula ultricies suscipit id a sem. Fusce et euismod diam, id efficitur nulla. In sagittis est vel magna eleifend, non condimentum ex posuere.</p><p>Phasellus eleifend faucibus tempus. Duis at eros pretium, sodales enim eget, congue est. Quisque semper bibendum metus sit amet tempor. Aenean imperdiet velit eu velit dignissim porta id vel ligula. Sed sed dictum risus. Suspendisse metus erat, finibus eget augue vitae, viverra tempus arcu. Fusce ligula urna, commodo ut lorem non, egestas bibendum quam. Donec quis erat non lectus tincidunt eleifend. Integer scelerisque, tortor vitae aliquet consequat, neque diam consectetur mauris, ut eleifend tellus tortor vel odio. Vivamus bibendum elit eget blandit vehicula. Nunc elementum enim sed libero tempus gravida. Ut sit amet leo nulla. Quisque sit amet turpis pulvinar, placerat massa vitae, cursus magna. Duis volutpat finibus orci, eu viverra metus blandit sed.</p><p>Etiam in metus nec mauris imperdiet tristique. Aliquam pharetra purus fringilla urna malesuada accumsan. Quisque vitae gravida tortor. Duis at dolor lobortis, mattis tellus ut, finibus urna. Curabitur placerat, nibh fringilla tempus mollis, nisi magna rhoncus felis, eu consequat turpis massa sit amet nisi. Nullam cursus lacus dui, ut ultrices risus placerat vel. Praesent porttitor, felis id rhoncus pellentesque, odio purus fringilla nisl, non vulputate enim ipsum vitae magna. Pellentesque eu risus ac tortor auctor sodales. Cras egestas elementum diam sit amet ullamcorper. Pellentesque fermentum felis a dolor molestie mattis.</p><img src=\"http://127.0.0.1:8000/media/data/homepage/media/3a1d1ehomepagedkidd_light.jpg\"><p>Praesent eget risus ligula. Nam sed nisl at massa accumsan pharetra in a velit. Etiam malesuada, massa id bibendum volutpat, elit tortor condimentum erat, sed interdum quam risus at lorem. Curabitur placerat consequat neque et laoreet. Phasellus vehicula mauris in maximus imperdiet. Cras ultrices sollicitudin lacus at dictum. Maecenas at consequat tellus. Vestibulum ultrices ligula ut lectus sodales, ac convallis ligula aliquet. Nullam lacinia eu orci sit amet placerat. Ut iaculis pretium tortor, consequat luctus tellus euismod vel.</p>",
+  "profilePhoto": "homepage/media/3deCEBhomepagee08368eee3ee966703f56af4e9a06658cffa151d_full.jpg",
+  "builtWith": true
+}

frontend/viewable-ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/viewable-ui/src/App.jsx

@@ -4,16 +4,16 @@ import {useEffect, useState} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 //Import Views
-import Home from './components/viewable/home';
+import Home from './components/home';
-import CategoryList from './components/viewable/category-list';
+import CategoryList from './components/category-list';
-import BlogList from './components/viewable/blog-list';
+import BlogList from './components/blog-list';
-import Blog from './components/viewable/blog';
+import Blog from './components/blog';
 
 
 //Import Shared Views
-import Header from './components/viewable/shared/navbar';
+import Header from './components/shared/navbar';
-import Footer from './components/viewable/shared/footer';
+import Footer from './components/shared/footer';
-import Notification from './components/viewable/shared/notification';
+import Notification from './components/shared/notification';
 
 //Import Services
 import DataService from './services/data-service'

frontend/viewable-ui/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/viewable-ui/src/components/blog-list.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { useEffect, useState } from 'react';
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
-import MediaService from '../../services/media-service';
 import CardListViewer from './shared/card-list-viewer';
 import CategoryBar from './shared/category-bar';
 import {

frontend/viewable-ui/src/components/blog.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
 
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
-import MediaService from '../../services/media-service'
+import MediaService from '../services/media-service'
 import CategoryBar from './shared/category-bar';
 
 import {
@@ -34,7 +34,7 @@ function Blog(props) {
         node.attribs.target = '_blank';
       }
       if (node.name === 'img') {
-        const newClasses = `img-fluid mt-2 mb-2 rounded`;
+        const newClasses = `img-fluid mt-2 mb-2 rounded mx-auto d-block`;
         const existingClasses = node.attribs.class ? `${node.attribs.class} ` : '';
         node.attribs.class = `${existingClasses}${newClasses}`;
       }
@@ -142,7 +142,6 @@ function Blog(props) {
         </Col>
         <Col xs="3" className="d-none d-md-block"></Col>
       </Row>
-
       <Row className={`my-2 ${ThemeConfig[GlobalTheme].background}`}>
         <Col>
           <hr style={{"borderColor": `${ThemeConfig[GlobalTheme].borderColor}`}} />
@@ -150,13 +149,11 @@ function Blog(props) {
       </Row>
 
       <Row className="mr-2 ml-2 mt-1">
-      <Col xs="4" className="d-none d-md-block"></Col>
+      <Col xs="3" className="d-none d-md-block"></Col>
-
         <Col style={{marginBottom: '25px'}}>
           <div className={`blogContent ${ThemeConfig[GlobalTheme].textColor}`}>{blogContent}</div>
         </Col>
-
+      <Col xs="3" className="d-none d-md-block"></Col>
-      <Col xs="4" className="d-none d-md-block"></Col>
       </Row>
     </Container>
   );

frontend/viewable-ui/src/components/category-list.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 //import services
-import DataService from '../../services/data-service';
+import DataService from '../services/data-service';
 
 //import views
 import CardListViewer from './shared/card-list-viewer';

frontend/viewable-ui/src/components/home.jsx

@@ -1,6 +1,6 @@
 import { Container, Spinner, Row, Col } from 'reactstrap';
 import parse from 'html-react-parser';
-import MediaService from '../../services/media-service'
+import MediaService from '../services/media-service'
 
 function HomePage(props) {
   
@@ -14,7 +14,7 @@ function HomePage(props) {
         node.attribs.target = '_blank';
       }
       if (node.name === 'img') {
-        const newClasses = `img-fluid mt-2 mb-2 rounded`;
+        const newClasses = `img-fluid mt-2 mb-2 rounded mx-auto d-block`;
         const existingClasses = node.attribs.class ? `${node.attribs.class} ` : '';
         node.attribs.class = `${existingClasses}${newClasses}`;
       }

frontend/viewable-ui/src/components/shared/card-list-viewer.jsx

@@ -1,7 +1,5 @@
-import { useEffect, useState } from 'react';
+import MediaService from '../../services/media-service'
-import MediaService from '../../../services/media-service'
 import {
-  Spinner,
   Card,
   CardImg,
   CardTitle,

frontend/viewable-ui/src/components/shared/category-bar.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import DataService from '../../../services/data-service';
+import DataService from '../../services/data-service';
 import { Link } from 'react-router-dom';
 import { Container, Row, Col, Button, Spinner, ListGroup, ListGroupItem, ButtonGroup } from 'reactstrap';
 

frontend/viewable-ui/src/components/shared/footer.jsx

@@ -4,8 +4,6 @@ import {
   Container,
   Row,
   Col,
-  Nav,
-  NavLink,
   Spinner
 } from 'reactstrap';
 

frontend/viewable-ui/src/components/shared/navbar.jsx

@@ -13,7 +13,7 @@ import {
   Button, ButtonGroup, Label, Input
 } from 'reactstrap';
 import { useState, useEffect } from 'react';
-import MediaService from '../../../services/media-service'
+import MediaService from '../../services/media-service'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSun, faMoon, faPen } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';

frontend/viewable-ui/src/components/shared/notification.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Collapse, Button, CardBody, Card, Alert } from 'reactstrap';
 
 function Notification(props) {

frontend/viewable-ui/src/index.css

@@ -0,0 +1,68 @@
+a {
+  text-decoration: none !important;
+  color: inherit !important;
+  border: none !important;
+}
+
+.app-container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100vh;
+}
+
+.blogContent a{
+  border-radius: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  transition-duration: 0.1s;
+}
+
+.blogContent a:hover{
+  border-radius: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  transition-duration: 0.1s;
+}
+
+.blogContent{
+  font-size: 20px
+}
+
+.tiptap blockquote {
+  padding-left: 1rem;
+  border-left: 2px solid grey;
+}
+
+.tiptap.ProseMirror {
+  margin-top: 20px;
+  border: solid grey;
+  border-radius: 10px;
+  padding: 1em;
+}
+
+.blogContent img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+}
+
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.image-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.image-text {
+  display: block;
+  padding: 5px 0;
+}

frontend/viewable-ui/src/main.jsx

@@ -0,0 +1,10 @@
+import React, { Suspense, lazy } from 'react';
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/viewable-ui/src/services/data-service.jsx

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const getData = (endPoint) => {
+  return axios.get(`/data/${endPoint}.json`)
+}
+
+export default { getData }

frontend/viewable-ui/src/services/media-service.jsx

@@ -0,0 +1,5 @@
+const getMedia = (mediaPath) => {
+  return `/data/${mediaPath}`;
+}
+
+export default { getMedia };

frontend/viewable-ui/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {}
+})