From f62c7e50d6d2f25845b206a339b0d5f3937c21b0 Mon Sep 17 00:00:00 2001 From: DOZIBE NWABUOKU <101020067+doziben@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:30:53 +0100 Subject: [PATCH] Blog v1 (#144) * feat: blog * feat: cleanup touches * fix: build issues relating to urlObj * fix: remove hover effect from blog cards --- site/pages/blog/index.tsx | 155 ++++++++++-------- site/pages/components/BlogCard1.tsx | 66 ++++++++ site/pages/components/BlogCard2.tsx | 49 ++++++ site/pages/components/BlogHeader.tsx | 46 ++++++ site/pages/posts/Post.module.css | 141 ++++++++-------- site/pages/posts/[id].js | 102 ++++++++++-- .../customer support for small businesses.md | 19 +-- site/pages/posts/science fiction.md | 44 +++++ site/pages/posts/test 2.md | 44 +++++ site/pages/posts/test 3.md | 44 +++++ site/public/static/header-bg.svg | 30 ++++ site/public/static/patrick.webp | Bin 0 -> 141288 bytes site/utils/types.ts | 1 + 13 files changed, 575 insertions(+), 166 deletions(-) create mode 100644 site/pages/components/BlogCard1.tsx create mode 100644 site/pages/components/BlogCard2.tsx create mode 100644 site/pages/components/BlogHeader.tsx create mode 100644 site/pages/posts/science fiction.md create mode 100644 site/pages/posts/test 2.md create mode 100644 site/pages/posts/test 3.md create mode 100644 site/public/static/header-bg.svg create mode 100644 site/public/static/patrick.webp diff --git a/site/pages/blog/index.tsx b/site/pages/blog/index.tsx index 0920e2c..4dec32b 100644 --- a/site/pages/blog/index.tsx +++ b/site/pages/blog/index.tsx @@ -1,76 +1,97 @@ -import Image from 'next/image'; -import Link from 'next/link'; -import { getSortedPostsData } from '../../utils/posts'; -import Navbar from "@/pages/components/Navbar"; +import Image from "next/image"; +import Link from "next/link"; +import { getSortedPostsData } from "../../utils/posts"; + import Footer from "@/pages/components/Footer"; -import { PostsPageProps } from '../../utils/types'; +import { PostsPageProps } from "../../utils/types"; +import CTACard from "../components/CTACard"; +import Header from "../components/BlogHeader"; +import { Fragment } from "react"; +import SEOConfig from "../components/SEOConfig"; +import Container from "../components/Container"; +import BlogCard1 from "../components/BlogCard1"; +import BlogCard2 from "../components/BlogCard2"; export async function getStaticProps() { - const allPostsData = await getSortedPostsData(); - return { - props: { - allPostsData - } - }; + const allPostsData = await getSortedPostsData(); + return { + props: { + allPostsData, + }, + }; } export default function PostsPage({ allPostsData }: PostsPageProps) { - const blogPostStyle = { - width: '100%', // On mobile, the blog post takes full width - marginBottom: '20px', - textAlign: 'center', - border: '1px solid #ddd', - boxShadow: '0px 0px 10px rgba(0,0,0,0.1)', - borderRadius: '8px', - overflow: 'hidden', - backgroundColor: '#fff', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '15px', - // Use a media query for larger screens - '@media (min-width: 768px)': { - width: 'calc(33.333% - 20px)', // Adjust width on larger screens - } - }; - return ( -
- -

aixplora.app - Blog

-
-

Generative AI and the power of embeddings are changing how we find and use information in exciting ways. Imagine having a super-smart assistant that can sift through mountains of data to find exactly what you need, or even create new, useful information on the spot. That's what we're working on! We're here to make these cutting-edge technologies understandable and accessible to everyone. Join us as we explore how these tools are opening up new possibilities and making our digital world smarter and more connected.

-
-
- {allPostsData.map(({ id, date, title, thumbnail, author, intro }) => ( -
- -
- {`Thumbnail -
-

{title}

-

{intro}

-
-

by {author}

-

{date}

- -
- ))} -
-
+ + +
+
+ + +

Blog

+ +
    + {allPostsData + .filter((_, idx) => idx === 0) + .map( + ( + { id, date, title, thumbnail, author, intro, authorImage }, + idx + ) => { + const href = `/posts/${id}`; + return ( +
  • + +
    • + ); + } + )} +
+
    + {allPostsData + .filter((_, idx) => idx > 0) + .map( + ( + { id, date, title, thumbnail, author, intro, authorImage }, + idx + ) => { + const href = `/posts/${id}`; + + return ( +
  • + +
    • + ); + } + )} +
+ + + +
+ ); } diff --git a/site/pages/components/BlogCard1.tsx b/site/pages/components/BlogCard1.tsx new file mode 100644 index 0000000..8a2320b --- /dev/null +++ b/site/pages/components/BlogCard1.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import Link from "next/link"; +import Image from "next/image"; + +export type BlogCardProps = { + id: string; + + href: string; + + title: string; + + thumbnail: string; + + authorImage: string; + + author: string; + + date: string; + + intro?: string; +}; + +export default function BlogCard1({ + author, + authorImage, + date, + href, + id, + thumbnail, + title, + intro, +}: BlogCardProps) { + return ( + +
+ + {`Thumbnail + + + +
+ + ); +} diff --git a/site/pages/components/BlogCard2.tsx b/site/pages/components/BlogCard2.tsx new file mode 100644 index 0000000..535a654 --- /dev/null +++ b/site/pages/components/BlogCard2.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { BlogCardProps } from "./BlogCard1"; + +export default function BlogCard2({ + author, + authorImage, + date, + href, + id, + thumbnail, + title, +}: BlogCardProps) { + return ( + +
+ + {`Thumbnail + + + +
+ + ); +} diff --git a/site/pages/components/BlogHeader.tsx b/site/pages/components/BlogHeader.tsx new file mode 100644 index 0000000..cba369e --- /dev/null +++ b/site/pages/components/BlogHeader.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { AiFillYoutube } from "react-icons/ai"; +import { FaDiscord } from "react-icons/fa"; +import logo from "../../public/logo.svg"; +import bg from "../../public/static/header-bg.svg"; +import Container from "./Container"; + +function BlogHeader() { + return ( + + ); +} + +export default BlogHeader; diff --git a/site/pages/posts/Post.module.css b/site/pages/posts/Post.module.css index 039adf8..b907a75 100644 --- a/site/pages/posts/Post.module.css +++ b/site/pages/posts/Post.module.css @@ -1,74 +1,71 @@ .main { - padding: 20px; - display: flex; - flex-direction: column; - align-items: center; - } - - .article { - max-width: 800px; - width: 100%; - } - - .title { - font-size: 2rem; - margin-bottom: 10px; - } - - .date { - font-size: 1rem; - color: #666; - margin-bottom: 20px; - } - - .imageContainer { - max-width: 50%; - margin-bottom: 20px; - } - - .content { - font-size: 1.1rem; - line-height: 1.6; - } - - .content h2 { - font-size: 24px; /* Larger font size for h2 headings */ - color: #fff; /* Dark grey color */ - margin-top: 20px; - margin-bottom: 10px; - } - - .content h3 { - font-size: 20px; /* Medium font size for h3 headings */ - color: #fff; /* Medium grey color */ - margin-top: 18px; - margin-bottom: 8px; - } - - .content p { - font-size: 16px; /* Standard font size for paragraph text */ - color: #fff; /* Light grey color */ - line-height: 1.6; /* Spacing between lines */ - margin-top: 10px; - margin-bottom: 10px; - } - - .content hr { - border: 0; - height: 1px; - background-color: #fff; /* Light grey horizontal line */ - margin-top: 20px; - margin-bottom: 20px; - } - - .content ul { - list-style-type: disc; /* Bullet points for list items */ - margin-left: 20px; /* Indent list items */ - } - - .content li { - font-size: 16px; /* Matching paragraph text size for list items */ - color: #fff; /* Light grey color */ - margin-bottom: 8px; /* Space between list items */ - } + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.article { + max-width: 50rem; + width: 100%; +} + +.title { + font-size: 2.5rem; + margin-bottom: 10px; +} + +.date { + font-size: 1rem; + color: #666; + margin-bottom: 20px; +} + +.imageContainer { + max-width: 50%; + margin-bottom: 20px; +} + +.content { + font-size: 1.1rem; + line-height: 1.6; +} + +.content h2 { + font-size: 24px; /* Larger font size for h2 headings */ + margin-top: 20px; + margin-bottom: 10px; +} + +.content h3 { + font-size: 20px; /* Medium font size for h3 headings */ + margin-top: 18px; + margin-bottom: 8px; +} + +.content p { + font-size: 16px; /* Standard font size for paragraph text */ + line-height: 1.6; /* Spacing between lines */ + margin-top: 10px; + margin-bottom: 10px; + color: rgba(0, 0, 0, 0.5) +} + +.content hr { + border: 0; + height: 1px; + background-color: #fff; /* Light grey horizontal line */ + margin-top: 20px; + margin-bottom: 20px; +} + +.content ul { + list-style-type: disc; /* Bullet points for list items */ + margin-left: 20px; /* Indent list items */ +} + +.content li { + font-size: 16px; /* Matching paragraph text size for list items */ + margin-bottom: 8px; /* Space between list items */ +} \ No newline at end of file diff --git a/site/pages/posts/[id].js b/site/pages/posts/[id].js index c5aa505..0b55b1b 100644 --- a/site/pages/posts/[id].js +++ b/site/pages/posts/[id].js @@ -1,17 +1,22 @@ import { useRouter } from 'next/router'; import Image from 'next/image'; import { getPostData, getAllPostIds } from '../../utils/posts'; -import Navbar from "../components/Navbar"; +import Header from '../components/BlogHeader' +import SEOConfig from '../components/SEOConfig' import Footer from "../components/Footer"; import styles from './Post.module.css'; +import Container from '../components/Container'; +import { getSortedPostsData } from '../../utils/posts'; +import { Fragment } from 'react'; +import BlogCard2 from "../components/BlogCard2" export async function getStaticProps({ params }) { + const allPostsData = await getSortedPostsData(); const postData = await getPostData(params.id); - console.log('postData.contentHtml:', postData.contentHtml); - console.log(postData) return { props: { postData, + allPostsData }, }; } @@ -24,40 +29,105 @@ export async function getStaticPaths() { }; } -export default function Post({ postData }) { +export default function Post({ postData, allPostsData }) { const router = useRouter(); if (router.isFallback) { return
Loading...
; } - // Helper function to create the markup for dangerouslySetInnerHTML + + console.log({allPostsData}) + + + + // Helper function to create the markup for dangerouslySetInnerHTML const createMarkup = (html) => ({ __html: html }); return ( - <> -
- + +
+ + +
-

{postData.title}

-

{postData.date}

-
+

{postData.title}

+ + + + {`${postData?.author} + +
{postData?.author}
+ {postData?.date} + + +
{`Thumbnail -
+ + +

+ {/* {postData.contentHtml} */} + {/* the above gives a particular error that removes the render. */}
-
- + + +
+ +

Read more

+ +
    + {allPostsData + ?.filter((_, idx) => idx < 3) + ?.map( + ( + { id, date, title, thumbnail, author, intro, authorImage }, + idx + ) => { + const href = `/posts/${id}`; + + return ( +
  • + +
    • + ); + } + )} +
+ +
+ +