fix: header for mobile + feat: add author to blogs

Author: abheektripathy

Blogs/gsoc23_project_summary.md

@@ -2,6 +2,7 @@
 title: Frontend Improvements for Buffalogs, IntelOwl.
 date: 2023-08-27
 cover: /images/gsoclogo.png
+author: Abheek Tripathy
 ---
 
 Being a designer/frontend dev who knows a thing or two about security, IntelOwl seemed to be pretty intriguing to me with a very real use-case since the first time I was introduced to the project. I started contributing to it from December of 2022, mostly working on frontend issues opened up by Matteo.

components/Header.tsx

@@ -22,36 +22,36 @@ export function Header(props: Headerprops) {
     <>
       {blogsection ? (
         <div className="fixed z-50 w-full h-16 max-w-xs md:max-w-3xl -translate-x-1/2 rounded-full top-10 left-1/2 bg-[#1C1C1F] border-solid border border-[#29292d]">
-          <div className="grid h-full grid-cols-6 mx-auto items-center ml-6  ">
-            <Link href="https://intelowlproject.github.io/">
+          <div className=" md:grid h-full md:grid-cols-6 flex flex-row justify-between mx-auto items-center ml-6 ">
+            <Link href="/">
               <img
-                className=""
+                className="max-w-[100px] md:max-w-[110px]"
                 src="/images/intelowlwhite.png"
                 alt="intelowl logo"
               ></img>
             </Link>
 
             <Link
-              href="https://intelowlproject.github.io/"
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              href="/#feature-section"
+              className="text-white font-SpaceGrotesk font-light hidden md:flex md:justify-center md:flex-row"
             >
               Features
             </Link>
             <Link
-              href="https://intelowlproject.github.io/"
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              href="/#testimonial-section"
+              className="text-white font-SpaceGrotesk font-light hidden md:flex md:justify-center md:flex-row"
             >
               Testimonials
             </Link>
             <Link
               href={"/blogs"}
-              className="text-white font-SpaceGrotesk font-light text-center collapse md:visible"
+              className="text-white font-SpaceGrotesk font-light hidden md:flex md:justify-center md:flex-row"
             >
               Blogs
             </Link>
             <Link
               href="https://opencollective.com/intelowl-project/donate"
-              className="text-white font-SpaceGrotesk font-light text-center collapse md:visible"
+              className="text-white font-SpaceGrotesk font-light hidden md:flex md:justify-center md:flex-row"
             >
               Donate
             </Link>
@@ -88,36 +88,36 @@ export function Header(props: Headerprops) {
         </div>
       ) : (
         <div className="fixed z-50 w-full h-16 max-w-xs md:max-w-3xl -translate-x-1/2 rounded-full top-10 left-1/2 bg-[#1C1C1F] border-solid border border-[#29292d]">
-          <div className="grid h-full grid-cols-6 mx-auto items-center ml-6  ">
+          <div className=" md:grid h-full md:grid-cols-6 flex flex-row justify-between mx-auto items-center ml-6  ">
             <Link href="#hero-section" onClick={handleScroll}>
               <img
-                className=""
+                className="max-w-[100px] md:max-w-[110px]"
                 src="/images/intelowlwhite.png"
                 alt="intelowl logo"
               ></img>
             </Link>
             <Link
               href="#feature-section"
               onClick={handleScroll}
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              className="text-white font-SpaceGrotesk font-light hidden md:flex md:justify-center md:flex-row"
             >
               Features
             </Link>
             <Link
               href="https://intelowl.readthedocs.io/en/latest"
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              className="text-white font-SpaceGrotesk font-light text-center hidden md:flex md:justify-center md:flex-row"
             >
               Docs
             </Link>
             <Link
               href="/blogs"
-              className="text-white font-SpaceGrotesk font-light text-center collapse md:visible"
+              className="text-white font-SpaceGrotesk font-light text-center hidden md:flex md:justify-center md:flex-row"
             >
               Blogs
             </Link>
             <Link
               href="https://opencollective.com/intelowl-project/donate"
-              className="text-white font-SpaceGrotesk font-light text-center collapse md:visible"
+              className="text-white font-SpaceGrotesk font-light text-center hidden md:flex md:justify-center md:flex-row"
             >
               Donate
             </Link>

components/Slider.tsx

@@ -19,7 +19,7 @@ export default function Slider(props: sliderProps) {
     <>
       {isTestimonial ? (
         <div id="testimonials-element" className="w-[90%]">
-          <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
             <Swiper
               spaceBetween={25}
               breakpoints={{

contentlayer.config.ts

@@ -7,6 +7,7 @@ export const Post = defineDocumentType(() => ({
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
     cover: { type: 'string', required: true },
+    author: { type: 'string', required: false }
   },
   computedFields: {
     url: { type: 'string', resolve: (post) => `/blogs/${post._raw.flattenedPath}` },

src/app/blogs/[slug]/page.tsx

@@ -21,14 +21,17 @@ const PostLayout = ({ params }: { params: { slug: string } }) => {
   return (
     <>
       <Header blogsection={true}></Header>
-      <main className="h-full mx-16 md:mt-52 mt-28">
+      <main className="h-full md:mx-16 mx-5 md:mt-52 mt-28">
         <div className="mb-8 md:space-y-4">
+          <div className="flex flex-row justify-between items-center">
           <time
             dateTime={post.date}
             className="font-SpaceGrotesk text-white py-5 opacity-70 text-sm md:text-md mb-5 "
           >
             {format(parseISO(post.date), "LLLL d, yyyy")}
           </time>
+          <h3 className="font-SpaceGrotesk text-white py-5 opacity-90 text-sm md:text-md mb-5 ">By {post.author}</h3>
+          </div>
           <h1 className="text-white font-SpaceGrotesk font-bold text-3xl md:text-6xl pb-12">
             {post.title}
           </h1>