Skip to content

Commit 7dc29f2

Browse files
ZibanPirateZibanPirate
authored
Merge pull request #51 from dzcode-io/33-develop-articles-scene
📚 Implimented Articles scene
2 parents 7ddacd1 + 6fe9921 commit 7dc29f2

File tree

7 files changed

+167
-10
lines changed

7 files changed

+167
-10
lines changed

‎frontend/src/apps/main/scenes/articles/content/index.tsx‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,72 @@
11
import React, { useEffect } from "react";
2-
import "./style";
32
import { Article } from "t9/types/fullstack";
3+
import Markdown from "react-markdown";
4+
import "./style";
5+
6+
import programer from "../../landing/header/icons/programmer.png";
7+
import contact from "../../landing/header/icons/contact.png";
8+
import support from "../../landing/header/icons/support.png";
9+
import github from "../../landing/header/icons/github.png";
10+
11+
const socialMedia = [
12+
{
13+
id: 1,
14+
name: "dzcode",
15+
href: "https://github.com/dzcode-io/dzcode.io",
16+
icon: github,
17+
},
18+
{ id: 2, name: "Learn", href: "/learn", icon: programer },
19+
{ id: 3, name: "Contact", href: "/contact", icon: contact },
20+
{ id: 4, name: "Support", href: "/support", icon: support },
21+
];
422

523
export const Content = (props: ContentInterface) => {
624
useEffect(() => {
725
props.fetchCurrentArticle();
26+
setTimeout(() => {
27+
window.FB && window.FB.XFBML.parse();
28+
}, 3000);
829
}, []);
9-
30+
const { currentArticle } = props;
1031
return (
1132
<div className="content">
12-
{props.currentArticle ? (
13-
<div>{props.currentArticle.title}</div>
33+
{currentArticle ? (
34+
<div>
35+
{/* Image */}
36+
{currentArticle.image && (
37+
<img
38+
className="hero-image"
39+
src={currentArticle.image}
40+
alt={currentArticle.title}
41+
/>
42+
)}
43+
{/* Title */}
44+
<h2 className="title">{currentArticle.title}</h2>
45+
{/* Description */}
46+
<small className="description">{currentArticle.description}</small>
47+
<hr className="break" />
48+
{/* Content */}
49+
<Markdown className="content" source={currentArticle.content} />
50+
<hr className="break" />
51+
{/* Contact + Edit*/}
52+
<div className="actions">
53+
{socialMedia.map((item) => {
54+
return (
55+
<div key={item.id} className="item">
56+
<img src={item.icon} alt={item.name} className="icon" />
57+
<a href={item.href}>{item.name}</a>
58+
</div>
59+
);
60+
})}
61+
</div>
62+
{/* Comments */}
63+
<div
64+
className="fb-comments"
65+
data-href={location.origin + location.pathname}
66+
data-width="100%"
67+
data-numposts="5"
68+
/>
69+
</div>
1470
) : (
1571
"Loading Article..."
1672
)}

‎frontend/src/apps/main/scenes/articles/content/style.scss‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,76 @@
1+
@import "../../../../../common/style/variables";
2+
13
.articles {
24
.content {
3-
height: 200px;
4-
background-color: darken($color: #fff, $amount: 45);
5+
display: inline-block;
6+
vertical-align: top;
7+
width: 100%;
8+
align-self: center;
9+
10+
@media screen and (min-width: $regular) {
11+
width: 80%;
12+
}
13+
14+
.hero-image {
15+
width: 100%;
16+
max-height: 400px;
17+
object-fit: cover;
18+
}
19+
20+
.title {
21+
font-size: 3rem;
22+
margin: 1rem;
23+
}
24+
25+
.description {
26+
margin: 1rem;
27+
}
28+
29+
.break {
30+
margin: 1rem 1rem 0;
31+
}
32+
33+
.content {
34+
margin: 0 1rem;
35+
width: 100%;
36+
}
37+
38+
.actions {
39+
width: 100%;
40+
height: 100px;
41+
display: flex;
42+
width: 60vw;
43+
flex-direction: row;
44+
align-items: center;
45+
justify-content: space-evenly;
46+
.item {
47+
font-size: 1.1rem;
48+
font-weight: 600;
49+
display: flex;
50+
align-items: center;
51+
padding: 1rem;
52+
width: 120px;
53+
z-index: 5;
54+
cursor: pointer;
55+
56+
&:hover {
57+
transform: scale(1.1);
58+
}
59+
60+
a {
61+
text-decoration: none;
62+
color: $text-primary;
63+
}
64+
}
65+
66+
.icon {
67+
width: calc(30px + 1vw);
68+
height: calc(30px + 1vw);
69+
margin-right: 20px;
70+
}
71+
}
72+
73+
.fb-comments {
74+
}
575
}
676
}

‎frontend/src/apps/main/scenes/articles/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useEffect } from "react";
77
import { fetchArticlesList } from "t9/apps/main/redux/actions/articles-scene";
88
import { fetchCurrentArticle } from "t9/apps/main/redux/actions/articles-scene";
99
import { Route, useRouteMatch } from "react-router-dom";
10+
import "./style";
1011

1112
export const ArticlesScene = (props: ArticlesScenePropsReduxed) => {
1213
useEffect(() => {

‎frontend/src/apps/main/scenes/articles/sidebar/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import React from "react";
22
import "./style";
33
import { Article } from "t9/types/fullstack";
4+
import { Link } from "react-router-dom";
45

56
export const Sidebar = (props: { articlesList: Article[] | null }) => (
67
<div className="sidebar">
78
{props.articlesList
89
? props.articlesList.map((article, index) => (
9-
<div key={`article-${index}`}>{article.title}</div>
10+
<Link
11+
key={`article-${index}`}
12+
style={{
13+
paddingLeft: `${(article.slug.match(/\//g) || []).length + 1}rem`,
14+
}}
15+
className="item"
16+
to={"/Articles/" + article.slug}
17+
>
18+
{article.title}
19+
</Link>
1020
))
1121
: "Loading Articles List..."}
1222
</div>

‎frontend/src/apps/main/scenes/articles/sidebar/style.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1+
@import "../../../../../common/style/variables";
2+
13
.articles {
24
.sidebar {
3-
height: 200px;
4-
background-color: darken($color: #fff, $amount: 45);
5+
padding: 1rem;
6+
width: 100%;
7+
display: inline-block;
8+
.item {
9+
display: block;
10+
padding: 1rem;
11+
cursor: pointer;
12+
}
13+
.item:hover {
14+
background-color: wheat;
15+
}
16+
@media screen and (min-width: $regular) {
17+
width: 20%;
18+
}
519
}
620
}

‎frontend/src/apps/main/scenes/articles/style.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "../../../../common/style/variables";
2+
3+
.articles {
4+
padding-top: $navbar-height;
5+
max-width: $large;
6+
margin: 0 auto;
7+
}

‎frontend/src/apps/main/scenes/learn/sidebar/style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
.learn {
44
.sidebar {
55
padding: 1rem;
6-
height: 600px;
76
width: 100%;
87
display: inline-block;
98
.item {

0 commit comments

Comments
 (0)