From 38d9d4b612879ff1bcbb8becd4a1b4c78dde7d5c Mon Sep 17 00:00:00 2001
From: AJ <90976178+ajstrongdev@users.noreply.github.com>
Date: Thu, 15 Aug 2024 21:13:47 +0100
Subject: [PATCH] Add: news page
Finally got around to adding the news page. Still need to commit blog post porting, however will do that closer to the time of the website's release.
---
src/components/news/hero.jsx | 18 ++++++++++++++
src/components/news/posts.jsx | 44 +++++++++++++++++++++++++++++++++++
src/items/posts.js | 1 +
src/pages/news.jsx | 16 +++++++++++++
4 files changed, 79 insertions(+)
create mode 100644 src/components/news/hero.jsx
create mode 100644 src/components/news/posts.jsx
create mode 100644 src/pages/news.jsx
diff --git a/src/components/news/hero.jsx b/src/components/news/hero.jsx
new file mode 100644
index 0000000..23c6497
--- /dev/null
+++ b/src/components/news/hero.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+function Hero() {
+ return(
+ <div className="lg:w-[90%] w-full m-auto">
+ <div className="text-center">
+ <h1 className="lg:text-6xl text-4xl text-rhino-purple font-bold pt-4 p-2">
+ News Feed
+ </h1>
+ <h2 className="text-white font-lighter lg:text-3xl text-2xl p-2">
+ Find news relating to Rhino Linux & its development
+ </h2>
+ </div>
+ </div>
+ )
+}
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/news/posts.jsx b/src/components/news/posts.jsx
new file mode 100644
index 0000000..c8e81c8
--- /dev/null
+++ b/src/components/news/posts.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Hero from '../../components/news/hero';
+import posts from '../../items/posts';
+
+function Posts() {
+ return (
+ <div className="w-full p-4 m-auto">
+ <div className="p-4 md:w-[65%] m-auto bg-indigo-950 rounded-lg">
+ {posts.map((post, index) => {
+ return (
+ <div key={index} className="p-4" id={post.date}>
+ <h1 className="text-5xl my-2 text-center text-white">
+ {post.title}
+ </h1>
+ {post.banner && <img src={post.banner} alt="Post Banner" className="w-full" />}
+ <p className="text-white my-2 text-sm">
+ Posted: {post.date}
+ </p>
+ {post.content.map((paragraph, index) => {
+ return (
+ <p key={index} className="text-white my-2 text-lg">
+ {paragraph}
+ </p>
+ );
+ })}
+ <button
+ onClick={() => {
+ const postLink = window.location.href + `#${post.date}`;
+ navigator.clipboard.writeText(postLink);
+ alert('Post link copied to clipboard!');
+ }}
+ className="bg-rhino-purple hover:bg-blue-700 text-white py-2 px-4 rounded-lg"
+ >
+ Copy post link
+ </button>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+export default Posts;
\ No newline at end of file
diff --git a/src/items/posts.js b/src/items/posts.js
index 796b5ef..34339e8 100644
--- a/src/items/posts.js
+++ b/src/items/posts.js
@@ -1,3 +1,4 @@
+// OPTIONS: title, date, banner, content
const posts = [
{
title: "Rhino Linux 2024.1 + more",
diff --git a/src/pages/news.jsx b/src/pages/news.jsx
new file mode 100644
index 0000000..38eaa60
--- /dev/null
+++ b/src/pages/news.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Menu from "../components/navbar";
+import Hero from '../components/news/hero';
+import Posts from "../components/news/posts";
+import Footer from "../components/footer";
+
+export default function Home() {
+ return (
+ <main>
+ <Menu />
+ <Hero />
+ <Posts />
+ <Footer />
+ </main>
+ );
+}