Skip to content

Commit 83e0bd6

Browse files
naderzarenaderzare
authored
Merge pull request #1 from CLSFramework/develop_nader
add team and release page
2 parents 5e97daa + d3e6502 commit 83e0bd6

File tree

11 files changed

+328
-2
lines changed

11 files changed

+328
-2
lines changed

‎docusaurus.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ const config: Config = {
7979
label: 'Tutorial',
8080
},
8181
{to: '/blog', label: 'Blog', position: 'left'},
82+
{to: '/release', label: 'Release', position: 'left'},
83+
{to: '/team', label: 'Team', position: 'left'},
8284
{
8385
href: 'https://github.com/clsframework/clsframework.github.io',
8486
label: 'GitHub',

‎package-lock.json‎

Lines changed: 45 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@
1818
"@docusaurus/core": "3.5.2",
1919
"@docusaurus/preset-classic": "3.5.2",
2020
"@docusaurus/theme-mermaid": "^3.5.2",
21+
"@fortawesome/fontawesome-free": "^6.6.0",
2122
"@mdx-js/react": "^3.0.0",
2223
"clsx": "^2.0.0",
2324
"prism-react-renderer": "^2.3.0",
2425
"react": "^18.0.0",
25-
"react-dom": "^18.0.0"
26+
"react-dom": "^18.0.0",
27+
"react-markdown": "^9.0.1"
2628
},
2729
"devDependencies": {
2830
"@docusaurus/module-type-aliases": "3.5.2",

‎src/pages/release/index.module.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* CSS files with the .module.css suffix will be treated as CSS modules
3+
* and scoped locally.
4+
*/
5+
6+
.heroBanner {
7+
padding: 4rem 0;
8+
text-align: center;
9+
position: relative;
10+
overflow: hidden;
11+
}
12+
13+
@media screen and (max-width: 996px) {
14+
.heroBanner {
15+
padding: 2rem;
16+
}
17+
}
18+
19+
.buttons {
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
.heroBanner {
26+
background-image: url('/img/ss2d.svg'); /* Relative to the `static` folder */
27+
background-size: cover; /* Ensures the image covers the entire area */
28+
background-position: center; /* Centers the image */
29+
color: white;
30+
}

‎src/pages/release/index.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useEffect, useState } from 'react';
2+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import ReactMarkdown from 'react-markdown';
4+
import Layout from '@theme/Layout';
5+
6+
function ReleaseFeature() {
7+
const { siteConfig } = useDocusaurusContext();
8+
const [changeLog, setChangeLog] = useState<string>('');
9+
const [titles, setTitles] = useState<string[]>([]);
10+
11+
useEffect(() => {
12+
async function fetchChangeLog() {
13+
try {
14+
const response = await fetch('https://raw.githubusercontent.com/CLSFramework/soccer-simulation-proxy/master/ChangeLog.md');
15+
const text = await response.text();
16+
setChangeLog(text);
17+
18+
// Extract titles
19+
const titleLines = text.split('\n').filter(line => line.startsWith('## ['));
20+
setTitles(titleLines);
21+
} catch (error) {
22+
console.error('Error fetching change log:', error);
23+
}
24+
}
25+
26+
fetchChangeLog();
27+
}, []);
28+
29+
return (
30+
<div style={{ display: 'flex', margin: '50px' }}>
31+
<div style={{ width: '20%', paddingRight: '20px' }}>
32+
<h3>Change Log Titles</h3>
33+
<ul>
34+
{titles.map((title, index) => {
35+
const version = title.match(/\[(.*?)\]/)?.[1];
36+
const url = `https://github.com/CLSFramework/soccer-simulation-proxy/releases/tag/${version}`;
37+
return (
38+
<li key={index}>
39+
<a href={url} target="_blank" rel="noopener noreferrer">
40+
{title.replace(/#/g, '').trim()}
41+
</a>
42+
</li>
43+
);
44+
})}
45+
</ul>
46+
</div>
47+
<div style={{ width: '80%' }}>
48+
<ReactMarkdown>{changeLog}</ReactMarkdown>
49+
</div>
50+
</div>
51+
);
52+
}
53+
54+
export default function ReleasePage(): JSX.Element {
55+
const {siteConfig} = useDocusaurusContext();
56+
return (
57+
<Layout
58+
title={`Hello from ${siteConfig.title}`}
59+
description="Develop a soccer simulation team by using any programming language">
60+
<main>
61+
<ReleaseFeature />
62+
</main>
63+
</Layout>
64+
);
65+
}

‎src/pages/team/index.module.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* CSS files with the .module.css suffix will be treated as CSS modules
3+
* and scoped locally.
4+
*/
5+
6+
.heroBanner {
7+
padding: 4rem 0;
8+
text-align: center;
9+
position: relative;
10+
overflow: hidden;
11+
}
12+
13+
@media screen and (max-width: 996px) {
14+
.heroBanner {
15+
padding: 2rem;
16+
}
17+
}
18+
19+
.buttons {
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
.heroBanner {
26+
background-image: url('/img/ss2d.svg'); /* Relative to the `static` folder */
27+
background-size: cover; /* Ensures the image covers the entire area */
28+
background-position: center; /* Centers the image */
29+
color: white;
30+
}
31+
32+
.team-container {
33+
display: flex;
34+
flex-wrap: wrap;
35+
justify-content: center;
36+
gap: 20px; /* Space between cards */
37+
padding: 20px;
38+
}
39+
40+
.team-member-card {
41+
border: 1px solid #ccc; /* Rectangle border */
42+
padding: 10px;
43+
text-align: center;
44+
width: 200px; /* Fixed width for cards */
45+
margin: 10px; /* Margin around each card */
46+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visual separation */
47+
background-color: white; /* Background color for the card */
48+
}
49+
50+
.team-member-card img {
51+
width: 100%;
52+
height: auto;
53+
border-radius: 50%; /* Optional: Make the image circular */
54+
}
55+
56+
.team-member-card .links a {
57+
display: inline-block;
58+
margin: 5px;
59+
color: #205d3b; /* Link color */
60+
text-decoration: none;
61+
font-size: 1.5em; /* Adjust icon size */
62+
}
63+
64+
.team-member-card .links a:hover {
65+
color: #3cad6e
66+
}

‎src/pages/team/index.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { useEffect, useState } from 'react';
2+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import ReactMarkdown from 'react-markdown';
4+
import Layout from '@theme/Layout';
5+
import styles from './index.module.css'; // Import the CSS module
6+
import '@fortawesome/fontawesome-free/css/all.min.css';
7+
8+
9+
interface TeamMember {
10+
name: string;
11+
email?: string;
12+
linkedin?: string;
13+
img?: string;
14+
github?: string;
15+
website?: string;
16+
}
17+
18+
19+
const TeamMemberCard: React.FC<{ member: TeamMember }> = ({ member }) => (
20+
<div className={styles['team-member-card']}>
21+
<img src={member.img || '/data/u1.png'} alt={member.name} />
22+
<h3>{member.name}</h3>
23+
<div className={styles.links}>
24+
{member.email && <a href={`mailto:${member.email}`}><i className="fas fa-envelope"></i></a>}
25+
{member.linkedin && <a href={member.linkedin}><i className="fab fa-linkedin"></i></a>}
26+
{member.github && <a href={member.github}><i className="fab fa-github"></i></a>}
27+
{member.website && <a href={member.website}><i className="fas fa-globe"></i></a>}
28+
</div>
29+
</div>
30+
);
31+
32+
function TeamFeature() {
33+
const [team, setTeam] = useState<TeamMember[]>([]);
34+
35+
useEffect(() => {
36+
fetch('/data/team.json')
37+
.then(response => {
38+
if (!response.ok) {
39+
throw new Error('Network response was not ok');
40+
}
41+
return response.json();
42+
})
43+
.then(data => {
44+
setTeam(data);
45+
})
46+
.catch(error => {
47+
console.error('There was a problem with the fetch operation:', error);
48+
});
49+
}, []);
50+
51+
return (
52+
<div className={styles['team-container']}>
53+
{team.map((member, index) => (
54+
<TeamMemberCard key={index} member={member} />
55+
))}
56+
</div>
57+
);
58+
}
59+
60+
export default function ReleasePage(): JSX.Element {
61+
const {siteConfig} = useDocusaurusContext();
62+
return (
63+
<Layout
64+
title={`Hello from ${siteConfig.title}`}
65+
description="Develop a soccer simulation team by using any programming language">
66+
<main>
67+
<TeamFeature />
68+
</main>
69+
</Layout>
70+
);
71+
}

‎static/data/team.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
[
2+
{
3+
"name": "Nader Zare",
4+
"email": "[email protected]",
5+
"linkedin": "https://www.linkedin.com/in/nader-zare/",
6+
"img": "https://avatars.githubusercontent.com/u/25696836?v=4",
7+
"github": "https://github.com/naderzare",
8+
"website": "https://nader.cyrus2d.com/"
9+
},
10+
{
11+
"name": "Aref Sayareh",
12+
"email": "",
13+
"linkedin": "",
14+
"github": ""
15+
},
16+
{
17+
"name": "Alireza Sadraii",
18+
"email": "",
19+
"linkedin": "",
20+
"github": ""
21+
},
22+
{
23+
"name": "Sadra Khanjari",
24+
"email": "",
25+
"linkedin": "",
26+
"github": ""
27+
},
28+
{
29+
"name": "Arad Firouzkouhi",
30+
"email": "",
31+
"linkedin": "",
32+
"github": ""
33+
},
34+
{
35+
"name": "Soroush Mazloum",
36+
"email": "",
37+
"linkedin": "",
38+
"github": ""
39+
},
40+
{
41+
"name": "Erfan Fathi",
42+
"email": "",
43+
"linkedin": "",
44+
"github": ""
45+
}
46+
]

‎static/data/u1.png‎

28.9 KB
Loading

‎static/data/u2.png‎

27 KB
Loading

0 commit comments

Comments
 (0)