barunespadhy/rangolio
barunespadhy/rangolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sanitized layout

Browse Source
This commit is contained in:
Barunes Padhy 2024-06-08 14:25:39 +03:00
parent 7e1d49936d
commit fe52a360eb
15 changed files with 147 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
backend/apimanager/views.py
View File

@ -1,5 +1,6 @@
#######################Django related imports#################### #######################Django related imports####################
import os import os
import shutil
import random import random
from rest_framework import generics, status from rest_framework import generics, status
from rest_framework.views import APIView from rest_framework.views import APIView
@ -104,6 +105,22 @@ class BlogDeleteAPIView(generics.DestroyAPIView):
queryset = Blog.objects.all() queryset = Blog.objects.all()
serializer_class = BlogSerializer serializer_class = BlogSerializer
lookup_field = 'blog_id' lookup_field = 'blog_id'
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
self.remove_directory(instance)
self.perform_destroy(instance)
return Response(status=status.HTTP_204_NO_CONTENT)
def remove_directory(self, instance):
print(f"Deleting media files for {instance}")
media_folder = os.path.join(settings.MEDIA_ROOT, 'rangolio_data', 'blog', str(instance.blog_id))
try:
shutil.rmtree(media_folder)
print(f"Directory '{media_folder}' and all its contents have been removed")
except Exception as e:
print(f"Failed to remove {media_folder}. Reason: {e}")
#################################################################### ####################################################################
@ -162,4 +179,14 @@ class ListMedia(APIView):
os.remove(file_path) os.remove(file_path)
return Response({'message': 'File deleted successfully'}, status=status.HTTP_204_NO_CONTENT) return Response({'message': 'File deleted successfully'}, status=status.HTTP_204_NO_CONTENT)
else: else:
return Response({'error': 'File not found'}, status=status.HTTP_404_NOT_FOUND) return Response({'error': 'File not found'}, status=status.HTTP_404_NOT_FOUND)
class Publish(APIView):
def get(self, request, deploy_type, format=None):
self.create_json()
return Response({"deploy_type": deploy_type}, status=status.HTTP_200_OK)
def create_json(self):
print(UserData.objects.all())
print(Category.objects.all())
print(Blog.objects.all())

4
backend/backend/urls.py
View File

@ -33,7 +33,8 @@ from apimanager.views import (
BlogDeleteAPIView, BlogDeleteAPIView,
BlogsByCategoryAPIView, BlogsByCategoryAPIView,
MediaUpload, MediaUpload,
ListMedia ListMedia,
Publish
) )
urlpatterns = [ urlpatterns = [
@ -53,5 +54,6 @@ urlpatterns = [
path('data/blog/delete/<slug:blog_id>/', BlogDeleteAPIView.as_view(), name='blog-delete-view'), path('data/blog/delete/<slug:blog_id>/', BlogDeleteAPIView.as_view(), name='blog-delete-view'),
path('data/upload/', MediaUpload.as_view(), name='media-upload'), path('data/upload/', MediaUpload.as_view(), name='media-upload'),
path('data/media/<str:resource_type>/<str:resource_id>/', ListMedia.as_view(), name='list-media'), path('data/media/<str:resource_type>/<str:resource_id>/', ListMedia.as_view(), name='list-media'),
path('data/publish/<str:deploy_type>/', Publish.as_view(), name='publish'),
] ]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

13
frontend/package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@tiptap/extension-blockquote": "^2.3.2", "@tiptap/extension-blockquote": "^2.3.2",
@ -865,6 +866,18 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
"integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": { "node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",

1
frontend/package.json
View File

@ -14,6 +14,7 @@
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@tiptap/extension-blockquote": "^2.3.2", "@tiptap/extension-blockquote": "^2.3.2",

17
frontend/src/components/editable/blog-list.jsx
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import { useEffect, useState } 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 CardListViewer from './shared/card-list-viewer';
@ -11,10 +10,8 @@ import {
Row, Row,
Col, Col,
Button, Button,
CardImg,
CardTitle, CardTitle,
CardText, CardBody,
CardBody
} from 'reactstrap'; } from 'reactstrap';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { faLeftLong } from '@fortawesome/free-solid-svg-icons'; import { faLeftLong } from '@fortawesome/free-solid-svg-icons';
@ -94,7 +91,7 @@ function BlogList(props) {
if (GlobalTheme && ThemeConfig) { if (GlobalTheme && ThemeConfig) {
return ( return (
<Container fluid className={`mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}>
<Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col> <Col className="d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
<CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} /> <CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} />
<Row className="justify-content-center align-items-center"> <Row className="justify-content-center align-items-center">
<Col className="d-flex flex-column align-items-center"> <Col className="d-flex flex-column align-items-center">
@ -122,11 +119,11 @@ return (
itemObject={featuredBlogData} itemObject={featuredBlogData}
/> : '' /> : ''
} }
<div className="row"> <Row>
{categoryData === 'loading' ? <Spinner /> : {categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => ( categoryData.blogMetadata.map((item, index) => (
<div className="col-3" key={item.blog_id}> <Col key={item.blog_id}>
<div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}> <div className={`p-2 ml-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<CardListViewer <CardListViewer
totalItems={categoryData.blogMetadata.length} totalItems={categoryData.blogMetadata.length}
featuredBlog={categoryData.featuredBlog} featuredBlog={categoryData.featuredBlog}
@ -139,10 +136,10 @@ return (
itemObject={item} itemObject={item}
/> />
</div> </div>
</div> </Col>
)) ))
} }
</div> </Row>
</div> </div>
</Col> </Col>
</Row> </Row>

6
frontend/src/components/editable/blog.jsx
View File

@ -102,7 +102,7 @@ function Blog(props) {
<Container fluid className={`${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`${ThemeConfig[GlobalTheme].background}`}>
<ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/> <ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/>
<MediaUpload setMedia={setCoverImage} notificationToggler={props.notificationToggler} modal={fileModal} toggle={toggleFileModal} resourceType='blog' resourceId={blogData.id}></MediaUpload> <MediaUpload setMedia={setCoverImage} notificationToggler={props.notificationToggler} modal={fileModal} toggle={toggleFileModal} resourceType='blog' resourceId={blogData.id}></MediaUpload>
<Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/${blogData.parentCategory}`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col> <Col xs="3" className="d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/${blogData.parentCategory}`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
<CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/> <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
<Row className="mb-4"> <Row className="mb-4">
<Col className="p-0"> <Col className="p-0">
@ -118,7 +118,6 @@ function Blog(props) {
</Row> </Row>
<Row className="mr-2 ml-2 mb-2 mt-1 blogContent"> <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
<Col xs="3" className="d-none d-md-block"></Col> <Col xs="3" className="d-none d-md-block"></Col>
<Col xs={`${window.screen.width >= 765 ? '6':''}`}> <Col xs={`${window.screen.width >= 765 ? '6':''}`}>
<Button color='danger' onClick={() => showModal()} className="mb-5">Delete Blog</Button> <Button color='danger' onClick={() => showModal()} className="mb-5">Delete Blog</Button>
<ButtonGroup className="mb-5 ms-5"> <ButtonGroup className="mb-5 ms-5">
@ -158,7 +157,6 @@ function Blog(props) {
</Col> </Col>
<Col xs="3" className="d-none d-md-block"></Col> <Col xs="3" className="d-none d-md-block"></Col>
</Row> </Row>
<Row className={`my-2 ${ThemeConfig[GlobalTheme].background}`}> <Row className={`my-2 ${ThemeConfig[GlobalTheme].background}`}>
<Col> <Col>
<hr style={{"borderColor": `${ThemeConfig[GlobalTheme].borderColor}`}} /> <hr style={{"borderColor": `${ThemeConfig[GlobalTheme].borderColor}`}} />
@ -166,7 +164,6 @@ function Blog(props) {
</Row> </Row>
<Row className="mr-2 ml-2 mt-1"> <Row className="mr-2 ml-2 mt-1">
<Col xs="3" className="d-none d-md-block"></Col> <Col xs="3" className="d-none d-md-block"></Col>
<Col className={`blogContent ${ThemeConfig[GlobalTheme].textColor}`} style={{marginBottom: '25px'}}> <Col className={`blogContent ${ThemeConfig[GlobalTheme].textColor}`} style={{marginBottom: '25px'}}>
<EditorComponent notificationToggler={props.notificationToggler} setContent={setBlogContent} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={blogContent} resourceType='blog' resourceId={blogData.id}/> <EditorComponent notificationToggler={props.notificationToggler} setContent={setBlogContent} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={blogContent} resourceType='blog' resourceId={blogData.id}/>
<ButtonGroup className='mt-4'> <ButtonGroup className='mt-4'>
@ -174,7 +171,6 @@ function Blog(props) {
<Button color={ThemeConfig[GlobalTheme].buttonColor} outline>Publish Data</Button> <Button color={ThemeConfig[GlobalTheme].buttonColor} outline>Publish Data</Button>
</ButtonGroup> </ButtonGroup>
</Col> </Col>
<Col xs="3" className="d-none d-md-block"></Col> <Col xs="3" className="d-none d-md-block"></Col>
</Row> </Row>
</Container> </Container>

2
frontend/src/components/editable/category-list.jsx
View File

@ -106,7 +106,7 @@ function Blogs(props) {
if (GlobalTheme && ThemeConfig) { if (GlobalTheme && ThemeConfig) {
return ( return (
<Container fluid className={`p-0 mb-2 ${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`p-0 mb-2 ${ThemeConfig[GlobalTheme].background}`}>
<Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col> <Col xs="3" className="d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/`)} className="ms-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
<Row className="justify-content-center align-items-center"> <Row className="justify-content-center align-items-center">
<Col className="d-flex flex-column align-items-center"> <Col className="d-flex flex-column align-items-center">
<div className="w-100"> <div className="w-100">

92
frontend/src/components/editable/home.jsx
View File

@ -1,4 +1,4 @@
import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup, FormFeedback } from 'reactstrap'; import { Container, Spinner, Input, InputGroup, InputGroupText, Button, ButtonGroup, FormFeedback, Row, Col } from 'reactstrap';
import {useEffect, useState, useRef} from 'react'; import {useEffect, useState, useRef} from 'react';
import EditorComponent from './shared/tiptap'; import EditorComponent from './shared/tiptap';
import MediaUpload from './shared/media-upload' import MediaUpload from './shared/media-upload'
@ -52,48 +52,62 @@ function HomePage(props) {
}, [profilePhoto]) }, [profilePhoto])
if (GlobalTheme && ThemeConfig) if (GlobalTheme && ThemeConfig)
return ( return (
<Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`${ThemeConfig[GlobalTheme].textColor} ${ThemeConfig[GlobalTheme].background}`}>
<MediaUpload setMedia={setProfilePhoto} notificationToggler={props.notificationToggler} modal={modal} toggle={toggle} resourceType='homepage' resourceId='homepage'></MediaUpload> <MediaUpload setMedia={setProfilePhoto} notificationToggler={props.notificationToggler} modal={modal} toggle={toggle} resourceType='homepage' resourceId='homepage' />
<div className="d-flex flex-column justify-content-center align-items-center min-vh-82"> <Row className="mb-4">
{UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={EditableMediaService.getMedia(UserData.profilePhoto)} /> : ""} <Col xs="3" className="d-none d-md-block"></Col>
<ButtonGroup className='mt-4'> <Col className="p-0">
<Button <Row className='d-md-block'>
outline <Col xs="4" className="d-none d-md-block"></Col>
color={ThemeConfig[GlobalTheme].buttonColor} {UserData.profilePhoto !== "" && (
onClick={() => toggle()} <center><img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={EditableMediaService.getMedia(UserData.profilePhoto)} alt="Profile Photo" /></center>
> )}
Set Profile Photo <Col xs="4" className="d-none d-md-block"></Col>
</Button> </Row>
<Button <Row>
outline <ButtonGroup className='mt-4'>
color={ThemeConfig[GlobalTheme].buttonColor} <Button
onClick={() => setProfilePhoto('-')} outline
> color={ThemeConfig[GlobalTheme].buttonColor}
Remove Profile Photo onClick={() => toggle()}
</Button> >
</ButtonGroup> Set Profile Photo
<div className={`mt-5 ${ThemeConfig[GlobalTheme].textColor}`}> </Button>
<> <Button
outline
color={ThemeConfig[GlobalTheme].buttonColor}
onClick={() => setProfilePhoto('-')}
>
Remove Profile Photo
</Button>
</ButtonGroup>
</Row>
</Col>
<Col xs="3" className="d-none d-md-block"></Col>
</Row>
<Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
<Col xs="3" className="d-none d-md-block"></Col>
<Col md="6" xs="12">
<InputGroup className='mb-5'> <InputGroup className='mb-5'>
<InputGroupText> <InputGroupText>Name</InputGroupText>
Name
</InputGroupText>
<Input invalid={nameFieldInvalid} innerRef={nameField} defaultValue={UserData.name} onChange={() => showError(nameField.current.value, 'nameField')}/> <Input invalid={nameFieldInvalid} innerRef={nameField} defaultValue={UserData.name} onChange={() => showError(nameField.current.value, 'nameField')}/>
{nameFieldInvalid ? <FormFeedback tooltip className="mt-1"> {nameFieldInvalid && <FormFeedback tooltip className="mt-1">
This field cannot be empty This field cannot be empty
</FormFeedback>:''} </FormFeedback>}
</InputGroup> </InputGroup>
<EditorComponent notificationToggler={props.notificationToggler} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={UserData.introContent} setContent={setIntroContent} resourceType='homepage' resourceId='homepage'/> <EditorComponent notificationToggler={props.notificationToggler} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} content={UserData.introContent} setContent={setIntroContent} resourceType='homepage' resourceId='homepage' />
</> <ButtonGroup className={`mt-4`}>
<ButtonGroup className={`mt-4`}> <Button onClick={() => setInfo()} color={ThemeConfig[GlobalTheme].buttonColor} outline>Save Data</Button>
<Button onClick={() => setInfo()} color={ThemeConfig[GlobalTheme].buttonColor} outline>Save Data</Button> <Button color={ThemeConfig[GlobalTheme].buttonColor} outline>Publish Data</Button>
<Button color={ThemeConfig[GlobalTheme].buttonColor} outline>Publish Data</Button> </ButtonGroup>
</ButtonGroup> </Col>
</div> <Col xs="3" className="d-none d-md-block"></Col>
</div>
</Container> </Row>
);
</Container>
);
} }
export default HomePage; export default HomePage;

3
frontend/src/components/editable/shared/card-list-viewer.jsx
View File

@ -114,7 +114,7 @@ function CardListViewer(props) {
<Link className={`${props.textColor}`} to={`/${props.resourceType}/${itemObject.id}`}> <Link className={`${props.textColor}`} to={`/${props.resourceType}/${itemObject.id}`}>
Open this resource Open this resource
</Link> </Link>
<Button color='danger' onClick={() => showModal()} className="m-2">Delete Blog</Button> <Button color='danger' onClick={() => showModal()} className="m-2">Delete Category</Button>
</CardText> </CardText>
</CardBody> </CardBody>
</Card> </Card>
@ -154,7 +154,6 @@ function CardListViewer(props) {
Unset featured blog Unset featured blog
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</Card> </Card>
) )
} }

6
frontend/src/components/editable/shared/navbar.jsx
View File

@ -2,15 +2,11 @@
import { import {
Navbar, Navbar,
NavbarBrand, NavbarBrand,
UncontrolledCollapse,
Row,
Col,
Nav, Nav,
NavItem, NavItem,
NavLink,
Container, Container,
Spinner, Spinner,
Button, ButtonGroup, Label, Input Button, ButtonGroup
} from 'reactstrap'; } from 'reactstrap';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import EditableMediaService from '../../../services/editable-media-service' import EditableMediaService from '../../../services/editable-media-service'

2
frontend/src/components/editable/shared/tiptap-custom-extensions/custom-image-extension.jsx
View File

@ -23,7 +23,7 @@ function ImageNode(props) {
return ( return (
<NodeViewWrapper className={className} data-drag-handle> <NodeViewWrapper className={className} data-drag-handle>
<div className="image-container"> <div className="image-container d-md-block">
<img className='mx-auto d-block' src={src} alt={alt} /> <img className='mx-auto d-block' src={src} alt={alt} />
<div className="image-overlay"> <div className="image-overlay">
<span className="image-text mx-auto d-block"> <span className="image-text mx-auto d-block">

31
frontend/src/components/viewable/blog-list.jsx
View File

@ -42,19 +42,19 @@ function BlogList(props) {
if (GlobalTheme && ThemeConfig) { if (GlobalTheme && ThemeConfig) {
return ( return (
<Container fluid className={` mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}>
<Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories`)} className="ms-5 mt-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col> <Col className="d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/categories/`)} className="ms-5 mt-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
<CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/> <CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig} />
<Row className="justify-content-center align-items-center"> <Row className="justify-content-center align-items-center">
<Col className="d-flex flex-column align-items-center"> <Col className="d-flex flex-column align-items-center">
<div className="w-100"> <div className="w-100">
<Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{width: "100%", border: "none"}}> <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{ width: "100%", border: "none" }}>
<CardBody> <CardBody>
<CardTitle style={{ display: "grid" }} className={`${ThemeConfig[GlobalTheme].textColor} justify-content-center`} tag="h1"> <CardTitle style={{ display: "grid" }} className={`${ThemeConfig[GlobalTheme].textColor} justify-content-center`} tag="h1">
{`Blogs in ${categoryData.name}`} {`Blogs in ${categoryData.name}`}
</CardTitle> </CardTitle>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div className="container"> <div className="container">
{ {
@ -70,13 +70,14 @@ function BlogList(props) {
itemObject={featuredBlogData} itemObject={featuredBlogData}
/> : '' /> : ''
} }
<div className="row"> <Row>
{categoryData === 'loading' ? <Spinner /> : {categoryData === 'loading' ? <Spinner /> :
categoryData.blogMetadata.map((item, index) => ( categoryData.blogMetadata.map((item, index) => (
<div className="col-3" key={item.id}> <Col key={item.blog_id}>
<div className={`p-2 ${ThemeConfig[GlobalTheme].textColor}`}> <div className={`p-2 ml-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<CardListViewer <CardListViewer
totalItems={categoryData.blogMetadata.length} totalItems={categoryData.blogMetadata.length}
featuredBlog={categoryData.featuredBlog}
cardType={"smallCard"} cardType={"smallCard"}
resourceType={"blog"} resourceType={"blog"}
textColor={ThemeConfig[GlobalTheme].textColor} textColor={ThemeConfig[GlobalTheme].textColor}
@ -85,10 +86,10 @@ function BlogList(props) {
itemObject={item} itemObject={item}
/> />
</div> </div>
</div> </Col>
)) ))
} }
</div> </Row>
</div> </div>
</Col> </Col>
</Row> </Row>

11
frontend/src/components/viewable/blog.jsx
View File

@ -9,8 +9,9 @@ import {
Container,Row, Col,Spinner, UncontrolledCollapse, Button, ButtonGroup, Card, CardBody Container,Row, Col,Spinner, UncontrolledCollapse, Button, ButtonGroup, Card, CardBody
} from 'reactstrap'; } from 'reactstrap';
import { Link, useParams, useNavigate } from 'react-router-dom'; import { Link, useParams, useNavigate } from 'react-router-dom';
import { faLeftLong } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLeftLong, faCopy } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faReddit, faXTwitter } from '@fortawesome/free-brands-svg-icons';
function Blog(props) { function Blog(props) {
@ -103,7 +104,7 @@ function Blog(props) {
}) })
return false; return false;
}}> }}>
Copy Link <FontAwesomeIcon icon={faCopy}/> Copy Link
</Link> </Link>
</Button> </Button>
<Button outline> <Button outline>
@ -112,7 +113,7 @@ function Blog(props) {
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`, 'facebook-share-dialog', 'width=800,height=600'); window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`, 'facebook-share-dialog', 'width=800,height=600');
return false; return false;
}}> }}>
Facebook <FontAwesomeIcon icon={faFacebook}/> Facebook
</Link> </Link>
</Button> </Button>
<Button outline> <Button outline>
@ -121,7 +122,7 @@ function Blog(props) {
window.open(`https://www.reddit.com/submit?url=${window.location.href}&title=${blogData.name}`, 'facebook-share-dialog', 'width=800,height=600'); window.open(`https://www.reddit.com/submit?url=${window.location.href}&title=${blogData.name}`, 'facebook-share-dialog', 'width=800,height=600');
return false; return false;
}}> }}>
Reddit <FontAwesomeIcon icon={faReddit}/> Reddit
</Link> </Link>
</Button> </Button>
<Button outline> <Button outline>
@ -130,7 +131,7 @@ function Blog(props) {
window.open(`https://twitter.com/intent/tweet?text=Check%20out%20this%20article!&url=${window.location.href}`, 'facebook-share-dialog', 'width=800,height=600'); window.open(`https://twitter.com/intent/tweet?text=Check%20out%20this%20article!&url=${window.location.href}`, 'facebook-share-dialog', 'width=800,height=600');
return false; return false;
}}> }}>
X <FontAwesomeIcon icon={faXTwitter}/>
</Link> </Link>
</Button> </Button>
</ButtonGroup> </ButtonGroup>

2
frontend/src/components/viewable/category-list.jsx
View File

@ -43,7 +43,7 @@ function Blogs(props) {
<Col className="d-flex flex-column align-items-center"> <Col className="d-flex flex-column align-items-center">
{/* Top Section - Categories */} {/* Top Section - Categories */}
<div className="w-100"> <div className="w-100">
<Col xs="3" className="d-none d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/`)} className="ms-5 mt-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col> <Col xs="3" className="d-md-block"><Button color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => navigate(`/`)} className="ms-5 mt-5" outline><FontAwesomeIcon icon={faLeftLong}/></Button></Col>
<Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{width: "100%", border: "none"}}> <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{width: "100%", border: "none"}}>
<CardBody> <CardBody>
<CardTitle style={{ display: "grid" }} className={`${ThemeConfig[GlobalTheme].textColor} justify-content-center`} tag="h1"> <CardTitle style={{ display: "grid" }} className={`${ThemeConfig[GlobalTheme].textColor} justify-content-center`} tag="h1">

20
frontend/src/components/viewable/home.jsx
View File

@ -1,4 +1,4 @@
import { Container, Spinner } from 'reactstrap'; import { Container, Spinner, Row, Col } from 'reactstrap';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import MediaService from '../../services/media-service' import MediaService from '../../services/media-service'
@ -30,12 +30,20 @@ function HomePage(props) {
return ( return (
<Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}> <Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}>
<div className="d-flex flex-column justify-content-center align-items-center min-vh-82"> <div className="d-flex flex-column justify-content-center align-items-center min-vh-82">
{UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""} <Row className="mb-4">
<div className={`mt-5 ${ThemeConfig[GlobalTheme].textColor}`}> <Col xs="3" className="d-none d-md-block"></Col>
<> <Col className="p-0">
{UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""}
</Col>
<Col xs="3" className="d-none d-md-block"></Col>
</Row>
<Row className={`mb-5 mt-2 ${ThemeConfig[GlobalTheme].textColor}`}>
<Col xs="3" className="d-none d-md-block"></Col>
<Col className="p-4 blogContent">
<div className={`blogContent ${ThemeConfig[GlobalTheme].textColor}`}>{introContent}</div> <div className={`blogContent ${ThemeConfig[GlobalTheme].textColor}`}>{introContent}</div>
</> </Col>
</div> <Col xs="3" className="d-none d-md-block"></Col>
</Row>
</div> </div>
</Container> </Container>
); );