+
+
+
+ );
+}
+
+export default AppEditable;
\ No newline at end of file
diff --git a/frontend/src/components/editable/blog-list.jsx b/frontend/src/components/editable/blog-list.jsx
new file mode 100644
index 0000000..3ee680d
--- /dev/null
+++ b/frontend/src/components/editable/blog-list.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useEffect, useState } from 'react';
+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 {
+ Spinner,
+ Container,
+ Card,
+ Row,
+ Col,
+ CardImg,
+ CardTitle,
+ CardText,
+ CardBody,
+ Button,
+ ButtonGroup
+} from 'reactstrap';
+import { Link, useParams } from 'react-router-dom';
+
+function BlogList(props) {
+
+ const { categoryID } = useParams();
+
+ const GlobalTheme = props.GlobalTheme;
+ const ThemeConfig = props.ThemeConfig;
+
+ const [categoryData, setCategoryData] = useState('loading');
+ const [featuredBlogData, setFeaturedBlogData] = useState('loading');
+ const [currentPage, setCurrentPage] = useState('loading');
+
+ useEffect(() => {
+ DataService.getData(`category/${categoryID}/category-data`).then(response =>{
+ setCategoryData(response.data);
+ if (response.data.featuredBlog){
+ DataService.getData(`blogs/${response.data.featuredBlog}/blog-data`).then(response =>
+ setFeaturedBlogData(response.data)
+ );
+ }
+ else
+ setFeaturedBlogData("nodata")
+ }
+ );
+ }, [categoryID]);
+
+ if (GlobalTheme && ThemeConfig) {
+ return (
+
+
+
+
+
+
+
+
+
+ {`Blogs in ${categoryData.name}`}
+
+
+
+
+
+
+
+
+
+
+
+ + {`All blogs`} +
+ { + categoryData === 'loading' ?{blogData.name}
+{blogData.description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ {"Categories"}
+
+
+
+
+
+
+
+ {categoryMetadata.length > 0 ?
+ categoryMetadata.map((item, index) => (
+
+
+
+
+
+
+
+
+ {UserData.profilePhoto !== "" ? })
: ""}
+
+
+ <>
+
+
+ Name
+
+
+
+
+
+
+
+
+
+
+ No items found in this section
) +} + +export default CardListViewer \ No newline at end of file diff --git a/frontend/src/components/shared/category-bar.jsx b/frontend/src/components/editable/shared/category-bar.jsx similarity index 95% rename from frontend/src/components/shared/category-bar.jsx rename to frontend/src/components/editable/shared/category-bar.jsx index ba7e223..5a66fca 100644 --- a/frontend/src/components/shared/category-bar.jsx +++ b/frontend/src/components/editable/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'; diff --git a/frontend/src/components/shared/footer.jsx b/frontend/src/components/editable/shared/footer.jsx similarity index 52% rename from frontend/src/components/shared/footer.jsx rename to frontend/src/components/editable/shared/footer.jsx index c2bbe13..2ff8dea 100644 --- a/frontend/src/components/shared/footer.jsx +++ b/frontend/src/components/editable/shared/footer.jsx @@ -19,8 +19,10 @@ const Footer = (props) => {
- {new Date().getFullYear()}, { UserData ? UserData.name : Loading... }
+
diff --git a/frontend/src/components/shared/navbar.jsx b/frontend/src/components/editable/shared/navbar.jsx
similarity index 56%
rename from frontend/src/components/shared/navbar.jsx
rename to frontend/src/components/editable/shared/navbar.jsx
index 2bbc4d2..2920fc2 100644
--- a/frontend/src/components/shared/navbar.jsx
+++ b/frontend/src/components/editable/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';
@@ -51,41 +51,38 @@ function Header(props) {
src={MediaService.getMedia(UserData.profilePhoto)}
/> : ""
}
-
-
diff --git a/frontend/src/components/shared/notification.jsx b/frontend/src/components/editable/shared/notification.jsx
similarity index 80%
rename from frontend/src/components/shared/notification.jsx
rename to frontend/src/components/editable/shared/notification.jsx
index d03f9c4..ffafe5c 100644
--- a/frontend/src/components/shared/notification.jsx
+++ b/frontend/src/components/editable/shared/notification.jsx
@@ -7,7 +7,7 @@ function Notification(props) {
- {props.notificationMessage}
+ {props.message}
diff --git a/frontend/src/components/editable/shared/tiptap.jsx b/frontend/src/components/editable/shared/tiptap.jsx
new file mode 100644
index 0000000..82e9391
--- /dev/null
+++ b/frontend/src/components/editable/shared/tiptap.jsx
@@ -0,0 +1,303 @@
+import React, { useCallback } from 'react'
+import {
+ Button, ButtonGroup, Label, Input } from 'reactstrap';
+import { Color } from '@tiptap/extension-color'
+import ListItem from '@tiptap/extension-list-item'
+import TextStyle from '@tiptap/extension-text-style'
+import Highlight from '@tiptap/extension-highlight'
+import TextAlign from '@tiptap/extension-text-align'
+import Underline from '@tiptap/extension-underline'
+import Blockquote from '@tiptap/extension-blockquote'
+import Link from '@tiptap/extension-link'
+import { EditorProvider, useCurrentEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBold, faItalic,
+ faUnderline, faAlignLeft,
+ faAlignCenter, faAlignRight,
+ faAlignJustify, faHighlighter,
+ faStrikethrough, faCode,
+ faParagraph, faListUl,
+ faListOl, faQuoteLeft,
+ faQuoteRight, faRulerHorizontal,
+ faRotateLeft, faRotateRight,
+ faBars, faLink } from '@fortawesome/free-solid-svg-icons';
+
+const MenuBar = (props) => {
+ const { editor } = useCurrentEditor()
+
+ const setLink = useCallback(() => {
+ const previousUrl = editor.getAttributes('link').href
+ const url = window.prompt('URL', previousUrl)
+
+ // cancelled
+ if (url === null) {
+ return
+ }
+
+ // empty
+ if (url === '') {
+ editor.chain().focus().extendMarkRange('link').unsetLink()
+ .run()
+
+ return
+ }
+
+ // update link
+ editor.chain().focus().extendMarkRange('link').setLink({ href: url })
+ .run()
+ }, [editor])
+
+ if (!editor) {
+ return null
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const extensions = [
+ Color.configure({ types: [TextStyle.name, ListItem.name] }),
+ TextStyle.configure({ types: [ListItem.name] }),
+ StarterKit.configure({
+ bulletList: {
+ keepMarks: true,
+ keepAttributes: false,
+ },
+ orderedList: {
+ keepMarks: true,
+ keepAttributes: false,
+ },
+ }),
+ Underline,
+ Blockquote,
+ TextAlign.configure({
+ types: ['heading', 'paragraph'],
+ }),
+ Highlight,
+ Link.configure({
+ openOnClick: false,
+ autolink: true,
+ }),
+]
+
+export default (props) => {
+ if (props.content)
+ return (
+ Loading...
- const GlobalTheme = props.GlobalTheme;
- const ThemeConfig = props.ThemeConfig;
- if (GlobalTheme && ThemeConfig)
- return (
-
-
- {UserData.profilePhoto !== "" ? : ""}
-
-
-
- <>
-
-
- {`${UserData.greetingLine} ${UserData.name}`}
-
-
-
- <>
- ${UserData.tagLine}` }} />
-
-
-
-
- );
-}
-
-export default HomePage;
\ No newline at end of file
diff --git a/frontend/src/components/blog-list.jsx b/frontend/src/components/viewable/blog-list.jsx
similarity index 96%
rename from frontend/src/components/blog-list.jsx
rename to frontend/src/components/viewable/blog-list.jsx
index eea49af..83c9c05 100644
--- a/frontend/src/components/blog-list.jsx
+++ b/frontend/src/components/viewable/blog-list.jsx
@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { useEffect, useState } from 'react';
-import DataService from '../services/data-service';
-import MediaService from '../services/media-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 {
diff --git a/frontend/src/components/blog.jsx b/frontend/src/components/viewable/blog.jsx
similarity index 97%
rename from frontend/src/components/blog.jsx
rename to frontend/src/components/viewable/blog.jsx
index 62f4490..0c69cdb 100644
--- a/frontend/src/components/blog.jsx
+++ b/frontend/src/components/viewable/blog.jsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import parse from 'html-react-parser';
-import DataService from '../services/data-service';
-import MediaService from '../services/media-service'
+import DataService from '../../services/data-service';
+import MediaService from '../../services/media-service'
import CategoryBar from './shared/category-bar';
import {
diff --git a/frontend/src/components/category-list.jsx b/frontend/src/components/viewable/category-list.jsx
similarity index 94%
rename from frontend/src/components/category-list.jsx
rename to frontend/src/components/viewable/category-list.jsx
index 6d36939..e908da0 100644
--- a/frontend/src/components/category-list.jsx
+++ b/frontend/src/components/viewable/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';
diff --git a/frontend/src/components/viewable/home.jsx b/frontend/src/components/viewable/home.jsx
new file mode 100644
index 0000000..f68ac33
--- /dev/null
+++ b/frontend/src/components/viewable/home.jsx
@@ -0,0 +1,44 @@
+import { Container, Spinner } from 'reactstrap';
+import parse from 'html-react-parser';
+import MediaService from '../../services/media-service'
+
+function HomePage(props) {
+
+ const replace = (node) => {
+ if (node.type === 'tag') {
+ if (node.name === 'a') {
+ const newClasses = `${ThemeConfig[GlobalTheme].linkBackground} ${ThemeConfig[GlobalTheme].linkTextColor}`;
+ const existingClasses = node.attribs.class ? `${node.attribs.class} ` : '';
+ node.attribs.class = `${existingClasses}${newClasses}`;
+ node.attribs.rel = 'noopener noreferrer';
+ node.attribs.target = '_blank';
+ }
+ if (node.name === 'img') {
+ const newClasses = `img-fluid mt-2 mb-2 rounded`;
+ const existingClasses = node.attribs.class ? `${node.attribs.class} ` : '';
+ node.attribs.class = `${existingClasses}${newClasses}`;
+ }
+ }
+ };
+
+ const UserData = props.UserData ? props.UserData : Loading...
+ const GlobalTheme = props.GlobalTheme;
+ const ThemeConfig = props.ThemeConfig;
+ const introContent = props.UserData ? parse(props.UserData.introContent, { replace }) : ""
+
+ if (GlobalTheme && ThemeConfig)
+ return (
+
+
+ {UserData.profilePhoto !== "" ? : ""}
+
+ <>
+ {introContent}
+
+
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/frontend/src/components/shared/card-list-viewer.jsx b/frontend/src/components/viewable/shared/card-list-viewer.jsx
similarity index 93%
rename from frontend/src/components/shared/card-list-viewer.jsx
rename to frontend/src/components/viewable/shared/card-list-viewer.jsx
index e469c35..226d550 100644
--- a/frontend/src/components/shared/card-list-viewer.jsx
+++ b/frontend/src/components/viewable/shared/card-list-viewer.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import MediaService from '../../services/media-service'
+import MediaService from '../../../services/media-service'
import {
Spinner,
Card,
diff --git a/frontend/src/components/viewable/shared/category-bar.jsx b/frontend/src/components/viewable/shared/category-bar.jsx
new file mode 100644
index 0000000..5a66fca
--- /dev/null
+++ b/frontend/src/components/viewable/shared/category-bar.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import DataService from '../../../services/data-service';
+import { Link } from 'react-router-dom';
+import { Container, Row, Col, Button, Spinner, ListGroup, ListGroupItem, ButtonGroup } from 'reactstrap';
+
+function CategoryBar(props) {
+
+ const [categoryMetadata, setCategoryMetadata] = useState([]);
+
+ useEffect(() => {
+ DataService.getData('category/category-metadata').then(response =>
+ setCategoryMetadata(response.data)
+ );
+ }, []);
+
+ const rowStyle = {
+ height: 'auto',
+ width: 'auto',
+ overflowX: 'auto',
+ display: 'grid',
+ };
+
+ const GlobalTheme = props.GlobalTheme;
+ const ThemeConfig = props.ThemeConfig;
+ if (GlobalTheme && ThemeConfig)
+ return (
+
+
+
+
+ {categoryMetadata.length > 0 ?
+ categoryMetadata.map((item, index) => (
+
+ )) :
+
+
+
+
+ );
+};
+
+export default CategoryBar;
\ No newline at end of file
diff --git a/frontend/src/components/viewable/shared/footer.jsx b/frontend/src/components/viewable/shared/footer.jsx
new file mode 100644
index 0000000..95f146f
--- /dev/null
+++ b/frontend/src/components/viewable/shared/footer.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+// Import necessary components from Argon Design System
+import {
+ Container,
+ Row,
+ Col,
+ Nav,
+ NavLink,
+ Spinner
+} from 'reactstrap';
+
+const Footer = (props) => {
+ const GlobalTheme = props.GlobalTheme;
+ const ThemeConfig = props.ThemeConfig;
+ const UserData = props.UserData;
+
+ if (UserData)
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/frontend/src/components/viewable/shared/navbar.jsx b/frontend/src/components/viewable/shared/navbar.jsx
new file mode 100644
index 0000000..2920fc2
--- /dev/null
+++ b/frontend/src/components/viewable/shared/navbar.jsx
@@ -0,0 +1,92 @@
+// Update import paths based on your Argon source location
+import {
+ Navbar,
+ NavbarBrand,
+ UncontrolledCollapse,
+ Row,
+ Col,
+ Nav,
+ NavItem,
+ NavLink,
+ Container,
+ Spinner,
+ Button, ButtonGroup, Label, Input
+} from 'reactstrap';
+import { useState, useEffect } from 'react';
+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';
+
+function Header(props) {
+
+ const GlobalTheme = props.GlobalTheme;
+ const ThemeConfig = props.ThemeConfig;
+ const UserData = props.UserData;
+
+ const [collapseClasses, setCollapseClasses] = useState('');
+ const [themeSelected, setThemeSelected] = useState('lightTheme');
+
+ useEffect(() => {
+ props.ThemeSwitcher(themeSelected)
+ }, [themeSelected])
+
+ useEffect(() => {
+ setThemeSelected(props.ThemeConfig.defaultTheme)
+ }, [])
+
+ if (GlobalTheme && ThemeConfig && UserData)
+ return (
+
+
+
+
+
+ {
+ UserData.profilePhoto !== "" ?
+ : ""
+ }
+
+
+
+
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/src/components/viewable/shared/notification.jsx b/frontend/src/components/viewable/shared/notification.jsx
new file mode 100644
index 0000000..ffafe5c
--- /dev/null
+++ b/frontend/src/components/viewable/shared/notification.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card, Alert } from 'reactstrap';
+
+function Notification(props) {
+ return (
+
+
+
+
+ {props.message}
+
+
+
+
+ );
+}
+
+export default Notification;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 56d4f13..c121572 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,7 @@
a {
- text-decoration: none; /* Removes underline */
- color: inherit; /* Inherits color from parent */
- border: none; /* Removes any borders */
+ text-decoration: none !important; /* Removes underline */
+ color: inherit !important; /* Inherits color from parent */
+ border: none !important; /* Removes any borders */
}
.app-container {
@@ -11,20 +11,31 @@ a {
}
.blogContent a{
- border-radius: 5px;
- padding-left: 5px;
- padding-right: 5px;
- transition-duration: 0.1s;
-
+ 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;
+ border-radius: 5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ transition-duration: 0.1s;
}
.blogContent{
- font-size: 20px
+ 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;
}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 055327c..262bed0 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,11 +1,15 @@
-import React from 'react'
+import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
import './index.css'
-
+const ViewComponent = lazy(() =>
+ import.meta.env.VITE_APP_VIEW_TYPE === 'editableview'
+ ? import('./AppEditable.jsx')
+ : import('./App.jsx')
+);
+console.log(import.meta.env.VITE_APP_VIEW_TYPE)
ReactDOM.createRoot(document.getElementById('root')).render(
- ,
)
\ No newline at end of file
+ {UserData.profilePhoto !== "" ? : ""}
+
+
+ <>
+
+ {introContent}
+
+