Skip to content

Commit c28e5eb

Browse files
author
James
committed
add blog components
1 parent 1c7169d commit c28e5eb

File tree

12 files changed

+361
-124
lines changed

12 files changed

+361
-124
lines changed

‎backend/package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎next/package-lock.json

Lines changed: 66 additions & 50 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎next/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@
1313
"@emotion/react": "11.10.4",
1414
"@emotion/styled": "11.10.4",
1515
"@mui/material": "5.10.6",
16+
"@ramielcreations/rgbaster": "^2.1.1",
1617
"@types/styled-components": "5.1.25",
1718
"framer-motion": "7.3.6",
1819
"next": "12.3.1",
1920
"react": "18.2.0",
2021
"react-dom": "18.2.0",
2122
"react-is": "18.2.0",
23+
"rgba-to-rgb": "^1.0.2",
2224
"sharp": "0.31.0",
2325
"styled-components": "5.3.5"
2426
},

‎next/src/components/blog/Post.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import Image, { StaticImageData } from 'next/image'
2+
import styled from 'styled-components'
3+
import {useState, useEffect} from 'react';
4+
import analyze from "@ramielcreations/rgbaster"
5+
import rgbaToRgb from 'rgba-to-rgb'
6+
7+
interface PostProps {
8+
size: "full" | "l" | "m" | "s",
9+
img: StaticImageData,
10+
topic: string,
11+
title: string,
12+
paragraph: string,
13+
}
14+
15+
const PostWrapper = styled.div<{postSize : string, colour: string}>`
16+
display: flex;
17+
flex-direction: ${props => props.postSize === "full" ? "row" : "column"};
18+
width: ${({postSize}) => handleSize(postSize)};
19+
background-color: ${props => props.colour};
20+
padding: 2em;
21+
border-radius: 0.5em;
22+
margin: 0 3em;
23+
`
24+
25+
const handleSize = (size : string) => {
26+
switch (size) {
27+
case "full":
28+
return "100%";
29+
case "l":
30+
return "75%";
31+
case "m":
32+
return "50%";
33+
case "s":
34+
return "33%";
35+
}
36+
}
37+
38+
const ImageWrapper = styled.div`
39+
overflow: hidden;
40+
border-radius: 0.5em;
41+
`
42+
43+
const TextWrapper = styled.div<{size : string}>`
44+
margin-left: ${props => props.size === "full" ? "3rem" : ""};
45+
`
46+
47+
const Topic = styled.p`
48+
color: #5C8698;
49+
text-transform: uppercase;
50+
margin-bottom: 0;
51+
font-size: 1em;
52+
`
53+
54+
const Title = styled.h1`
55+
margin-top: 0;
56+
font-size: 1.8em;
57+
`
58+
59+
const Paragraph = styled.p`
60+
font-size: 1em;
61+
`
62+
63+
const imageProcess = async (pic : StaticImageData) => {
64+
const result = await analyze(pic.src, { scale: 0.5}) // also supports base64 encoded image strings
65+
let new_col = result[0].color.toString().replace(/rgb/i, "rgba");
66+
new_col = new_col.replace(/\)/i,',0.3)');
67+
return rgbaToRgb('rgb(255, 255, 255)', new_col);
68+
}
69+
70+
const Post = ({size, img, topic, title, paragraph}: PostProps) => {
71+
const [useColour, setColour] = useState("rgb(255,255,255)");
72+
useEffect(() => {
73+
const fetchData = async () => {
74+
const data = await imageProcess(img);
75+
setColour(data.toString());
76+
}
77+
fetchData();
78+
}, []);
79+
80+
return (
81+
<PostWrapper postSize={size} colour={useColour}>
82+
<ImageWrapper><Image src={img} draggable="false"/></ImageWrapper>
83+
<TextWrapper size={size}>
84+
<Topic>{topic}</Topic>
85+
<Title>{title}</Title>
86+
<Paragraph>{paragraph}</Paragraph>
87+
</TextWrapper>
88+
</PostWrapper>
89+
)
90+
}
91+
92+
export default Post;

‎next/src/components/navbar/Navbar-styled.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,34 @@ const MiniPageContainer = styled.div`
2727
}
2828
`
2929

30+
const BlogPageContainer = styled.div`
31+
position: sticky;
32+
top: 0;
33+
width: 100%;
34+
padding: 3rem 7rem;
35+
background-color: #E8DBFF;
36+
`
37+
38+
const LogoWrapper = styled.div`
39+
display: flex;
40+
justify-content: flex-start;
41+
cursor: pointer;
42+
`
43+
44+
const BlogLinkWrapper = styled.ul`
45+
width: 100%;
46+
display: inline-flex;
47+
align-items: center;
48+
justify-content: flex-end;
49+
gap: 5vw;
50+
list-style: none;
51+
padding: 0 20px;
52+
@media (max-width: 768px) {
53+
padding: 0;
54+
gap: 0;
55+
}
56+
`
57+
3058
const ItemWrapper = styled.ul`
3159
display: inline-flex;
3260
align-items: center;
@@ -95,4 +123,4 @@ const ImageWrapper = styled.div`
95123
`
96124

97125

98-
export { Container, ItemWrapper, NavItem, HamburgerButton, ImageWrapper, MiniPageContainer, HomepageButton };
126+
export { Container, ItemWrapper, NavItem, HamburgerButton, ImageWrapper, MiniPageContainer, LogoWrapper, BlogPageContainer, BlogLinkWrapper, HomepageButton };

‎next/src/components/navbar/Navbar.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import {
1212
HamburgerButton,
1313
ImageWrapper,
1414
MiniPageContainer,
15-
HomepageButton
15+
HomepageButton,
16+
BlogPageContainer,
17+
LogoWrapper,
18+
BlogLinkWrapper
1619
} from "./Navbar-styled";
1720

1821
const Navbar = (props: NavbarOpenProps) => {
@@ -60,6 +63,36 @@ const Navbar = (props: NavbarOpenProps) => {
6063

6164
</MiniPageContainer >
6265
);
66+
case NavbarType.BLOG:
67+
return (
68+
<BlogPageContainer>
69+
<LogoWrapper>
70+
<Link href="/">
71+
<Image src="/assets/logo.svg" width={500} height={90}/>
72+
</Link>
73+
</LogoWrapper>
74+
<BlogLinkWrapper>
75+
<HamburgerButton onClick={props.setNavbarOpen}>
76+
<Image src={HamburgerIcon} />
77+
</HamburgerButton>
78+
<Link href="/AboutUs">
79+
<NavItem>About Us</NavItem>
80+
</Link>
81+
<Link href="/ExecDescription">
82+
<NavItem>History</NavItem>
83+
</Link>
84+
<Link href="#events">
85+
<NavItem>Events</NavItem>
86+
</Link>
87+
<Link href="#resources">
88+
<NavItem>Resources</NavItem>
89+
</Link>
90+
<Link href="/Sponsors">
91+
<NavItem>Sponsors</NavItem>
92+
</Link>
93+
</BlogLinkWrapper>
94+
</BlogPageContainer>
95+
)
6396
}
6497
};
6598

‎next/src/components/navbar/types.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
export type NavbarOpenHandler = () => void;
22
export enum NavbarType {
33
HOMEPAGE,
4-
MINIPAGE
4+
MINIPAGE,
5+
BLOG
56
}
67

78
export type NavbarOpenProps = {
89
open: boolean,
910
setNavbarOpen: NavbarOpenHandler,
10-
variant: NavbarType
11+
variant: NavbarType
1112
};
1213

1314
export type HamburgerMenuProps = {

‎next/src/pages/blog/d.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// import React, { useState, useEffect } from "react";
2+
// import type { NextPage } from "next";
3+
// import Link from 'next/link'
4+
// import Otter from '../../svgs/otter.png'
5+
// import Image from 'next/image';
6+
// import Footer from "../../components/footer/Footer";
7+
// import Navbar from "../../components/navbar/Navbar";
8+
// import { NavbarOpenHandler, NavbarType } from "../../components/navbar/types";
9+
10+
// import styled from "styled-components";
11+
12+
// export const StyledSphere = styled.div`
13+
// width: 15vw;
14+
// height: 15vw;
15+
// background: #E8DBFF;
16+
// mix-blend-mode: normal;
17+
// display: flex;
18+
// justify-content: center;
19+
// align-items: center;
20+
// border-radius: 50%;
21+
// `;
22+
23+
// export const Content = styled.div`
24+
// display: flex;
25+
// justify-content: space-evenly;
26+
// align-items: center;
27+
// height: 90vh;
28+
// `
29+
// export const StyledBlogLinks = styled.div`
30+
// padding-right: 10vw;
31+
// display: flex;
32+
// flex-direction: column;
33+
// justify-content: center;
34+
// align-items: center;
35+
// height: 90vh;
36+
// font-family: 'Raleway';
37+
// font-weight: 400;
38+
// font-size: 17px;
39+
// line-height: 27pt;
40+
// word-wrap: break-word;
41+
// color: #000000;
42+
// `
43+
44+
// export const StyledBlogTitle = styled.div`
45+
// font-weight: 800;
46+
// font-size: 40px;
47+
// line-height: 30pt;
48+
// padding-bottom: 1vw;
49+
50+
// `
51+
52+
// export const LinkTextStyle = styled.a`
53+
// &:hover {
54+
// color: #44a6c6;
55+
// }
56+
// &:active {
57+
// color: #31738a;
58+
// }
59+
// cursor: pointer;
60+
// `
61+
62+
// const Index: NextPage = () => {
63+
// const [navbarOpen, setNavbarOpen] = useState(false);
64+
// const handleToggle: NavbarOpenHandler = () => {
65+
// setNavbarOpen(!navbarOpen);
66+
// };
67+
// return (
68+
// <div>
69+
// <Navbar open={navbarOpen} setNavbarOpen={handleToggle} variant={NavbarType.BLOG} />
70+
// <Content>
71+
// <StyledSphere>
72+
// <Image src={Otter} />
73+
// </StyledSphere>
74+
// <StyledBlogLinks>
75+
// <StyledBlogTitle>
76+
// Blogs
77+
// </StyledBlogTitle>
78+
// <Link href="/blog">
79+
// <LinkTextStyle>Blog 1</LinkTextStyle>
80+
// </Link>
81+
// <Link href="/blog">
82+
// <LinkTextStyle>Blog 2</LinkTextStyle>
83+
// </Link>
84+
// <Link href="/blog">
85+
// <LinkTextStyle>Blog 3</LinkTextStyle>
86+
// </Link>
87+
// <Link href="/blog">
88+
// <LinkTextStyle>Blog 4</LinkTextStyle>
89+
// </Link>
90+
// </StyledBlogLinks>
91+
// </Content>
92+
// <Footer />
93+
// </div>
94+
95+
// );
96+
// };
97+
// export default Index;

0 commit comments

Comments
 (0)