add: project summary blog + misc fixes + hover animation

Author: abheektripathy

Blogs/gsoc23_project_summary.md

@@ -0,0 +1,78 @@
+---
+title: Frontend Improvements for Buffalogs, IntelOwl.
+date: 2023-08-27
+cover: /images/gsoclogo.png
+---
+
+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.
+
+### Pre-GSOC Commits/Discussions.
+
+```(js)
+#1578 (Merged) Make Observable copy-pastable.
+#1407 (Merged) Allow to retry entire job.
+#1362 (Merged) Time format to mm:ss in JobHistory Page.
+#1672 (Discussion, closed) Added LinkedIn release action.
+```
+
+Then i got introduced to [Buffalogs](https://github.com/certego/BuffaLogs), i found the idea to be very cool, and since then wanted to improve upon its frontend and its UI, which was my main goal for the summer, plus working on overall UI development for IntelOwl, with guides and a website refactor.
+
+As stated in my original proposal’s overview:
+
+> My top priority would be BuffaLogs. Implementing Auth using JWT, creating a web interface in Next.Js for BuffaLogs and Working on GUI adjustments for IntelOwl. Plus refactoring IntelOwlProject’s website.
+> 
+
+# GSoC Deliverables and Tasks
+
+I planned to work on the following tasks during the GSoC’23 period, and was able to wrap them all up, with the help of my mentors- Matteo Lodi, Daniel Rosetti, Aditya Narayan Sinha, Federico Foschini.
+
+Below, i expand upon each of the tasks plus the challenges i faced and the learning experience that came along with it.
+
+### IntelOwlProject’s website ([v2](https://github.com/intelowlproject/intelowlproject.github.io))
+
+This was my first task, I had to design a new prototype for the project’s website, it had to subtle and professional, yet eye catching enough as being the first view of the product. Unlike the previous one, this time, i took inspiration from IntelOwl’s frontend for colour, maintaining IntelOwl’s design structure similar across the product and the landing website.
+
+After a few iterations, this was the [design](https://www.figma.com/file/1WoQUNP99W1Ou3xMelv9AT/IntelOwl-website?type=design&node-id=235%3A1806&mode=dev) which we decided to go through with, i got started with the development, the challenge here was its deployment on github pages, with Next.js/ContentLayer for rendering markdown in the blogs section.
+
+With some alterations to the deployment CI, i was able to achieve that. Then i worked on feedback from Matteo and Daniel, and handling some UX pitfalls pointed out by my wonderful Mentors.
+
+here is the [website](https://intelowlproject.github.io/).
+
+
+### Authentication using JWT for Buffalogs. ([#43](https://github.com/certego/BuffaLogs/pull/43))
+
+My task here was working on an auth module for Buffalogs, using django, plus setting up auth ui/middleware in the frontend. I ran into problems here, especially while testing the backend in a docker environment, though with the help of Aditya, i was able to fix it up and move to the frontend part quickly.
+
+I choose Next.js/ts for the frontend of Buffalogs, the dev experience went almost pretty smooth here, whilst running into small challenges with middleware/protected routing.
+
+here is the [pr](https://github.com/certego/BuffaLogs/pull/43).
+
+### Maps, Graphs for BuffaLogs Dashboard([#44](https://github.com/certego/BuffaLogs/pull/44))
+
+My next task was implementing graphs to visualise the login logs, coming from their backend. After a meeting, my mentor Federico and i decided upon 3 charts for the dashboard, first which shows the login locations all over world, second which showed the number of logins, differentiated on their risk factor, and the third which showed risky logins across different time frames.
+
+Thanks to Lorena Goldoni, The DRF endpoints for the same were implemented quickly, and i started with the dashboard’s development.
+
+I faced quite a few challenges while testing out my work on the dashboard, due to some issues on my end, but with the help of new documentation, provided by Lorena, i was able to solve the issues and test it.
+
+p.s i also added up a quick landing page for Buffalogs, explaining a bit about the product there.
+
+after that, Federico suggested some issues with the frontend in general, with /auth as well as the dashboard as well, which then i later fixed we wrapped this up.
+
+here is the [pr](https://github.com/certego/BuffaLogs/pull/44) for that.
+
+### Frontend Guide/tutorial for IntelOwl using react-joyride.(#[1852](https://github.com/intelowlproject/IntelOwl/pull/1852))
+
+This was my last task, and it went pretty smooth, Matteo and I decided upon a flow for the guide and I leveraged react-joyride library to implement it, as suggested by Matteo [here](https://github.com/intelowlproject/IntelOwl/issues/1589).
+
+The only challenge i faced here was, implementing a custom joyride which was both multi-route and had custom components, but after a few hit and trials i was able to make it work.
+
+this is the [pr](https://github.com/intelowlproject/IntelOwl/pull/1852) .
+
+## Ending Note and Next Steps.
+
+GSoC has been a really amazing experience for me, I learnt a lot more than I expected, and not just technical, but better communication as well, to always keep time for unexpected issues, because they arise, and at the most unexpected of times.
+
+My mentors helped me quite a lot through my whole journey, be it technical or tackling other issues. There was never any friction communication wise between me and my mentors throughout the whole program, any issues i faced were quickly resolved so i could be on timeline to wrap up all my work.
+
+As for the future, i love to do open source, and would continue contributing to the IntelOwl organisation and more projects, especially on the project’s site with a few new feature suggestions to make it even better, It always feels awesome to give back to the community which helped me learn all this in the first place :p

components/sections/FeatureSection.tsx

@@ -9,7 +9,7 @@ export default function FeatureSection() {
               return (
                 <div
                   key={index}
-                  className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
+                  className="transform transition-transform duration-3 hover:scale-105 mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
                 >
                   <h3 className="text-xl md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90">
                     {feature.title}
@@ -23,7 +23,7 @@ export default function FeatureSection() {
               return (
                 <div
                   key={index}
-                  className="bg-[#1B1B23] mb-8 sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
+                  className="transform transition-transform duration-3 hover:scale-105 bg-[#1B1B23] mb-8 sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
                 >
                   <h3 className="text-xl md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90">
                     {feature.title}

components/sections/HeroSection.tsx

@@ -41,7 +41,7 @@ export default function HeroSection(props: HeroSectionProps) {
               href={
                 "https://intelowl.readthedocs.io/en/latest/Installation.html"
               }
-              className="btn bg-[#00ADEE] hover:bg-blue-700 text-white py-2 mb-12 px-4 text-sm rounded w-32 h-10 mt-8 font-SpaceGrotesk text-center"
+              className=" transform transition-transform duration-3 hover:scale-110 btn bg-[#00ADEE] hover:bg-blue-700 text-white py-2 mb-12 px-4 text-sm rounded w-32 h-10 mt-8 font-SpaceGrotesk text-center"
             >
               get started ➔
             </Link>
@@ -82,7 +82,7 @@ export default function HeroSection(props: HeroSectionProps) {
               href={
                 "https://intelowl.readthedocs.io/en/latest/Installation.html"
               }
-              className="btn bg-[#00ADEE] hover:bg-blue-700 text-white py-2 px-4 rounded w-36 h-10 mt-16 font-SpaceGrotesk text-center"
+              className="transform transition-transform duration-3 hover:scale-110 btn bg-[#00ADEE] hover:bg-blue-700 text-white py-2 px-4 rounded w-36 h-10 mt-16 font-SpaceGrotesk text-center"
             >
               get started ➔
             </Link>

public/images/gsoclogo.png

@@ -1,38 +1,72 @@
-import { format, parseISO } from 'date-fns'
-import { allPosts } from '../../../../.contentlayer/generated'
-import { Header } from '../../../../components/Header'
-import Footer from '../../../../components/Footer'
-import Image from "next/image"
+import { format, parseISO } from "date-fns";
+import { allPosts } from "../../../../.contentlayer/generated";
+import { Header } from "../../../../components/Header";
+import Footer from "../../../../components/Footer";
+import Image from "next/image";
 
-export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath }))
+export const generateStaticParams = async () =>
+  allPosts.map((post) => ({ slug: post._raw.flattenedPath }));
 
 export const generateMetadata = ({ params }: { params: { slug: string } }) => {
-  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
-  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
-  return { title: post.title }
-}
+  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
+  if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
+  return { title: post.title };
+};
 
 //params are written a specfic way as a workaround to make the contentlayer url routing work.
 const PostLayout = ({ params }: { params: { slug: string } }) => {
-  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
-  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
+  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
+  if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
 
   return (
     <>
-    <Header blogsection={true}></Header>
-    <main className='h-full mx-16 md:mt-52 mt-28'>
-    <div className="mb-8 md:space-y-4">
-        <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>
-        <h1 className="text-white font-SpaceGrotesk font-bold text-3xl md:text-6xl pb-12">{post.title}</h1>
-        <Image src={post.cover} width={100} height={100} alt={""} className="pb-12"></Image>
-      </div>
-      <div className="font-SpaceGrotesk text-white text-left py-5 opacity-70 text-md [&>*]:mb-3 [&>*:last-child]:mb-0" dangerouslySetInnerHTML={{ __html: post.body.html.replace(/<a/g, '<a style="color: #00ADEE;"'), }} />
-    </main>
-    <Footer></Footer>
+      <Header blogsection={true}></Header>
+      <main className="h-full mx-16 md:mt-52 mt-28">
+        <div className="mb-8 md:space-y-4">
+          <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>
+          <h1 className="text-white font-SpaceGrotesk font-bold text-3xl md:text-6xl pb-12">
+            {post.title}
+          </h1>
+          <Image
+            src={post.cover}
+            width={100}
+            height={100}
+            alt={""}
+            className="pb-12"
+          ></Image>
+        </div>
+        <div
+          className="font-SpaceGrotesk prose text-md text-white text-left py-5 opacity-70 [&>*]:mb-5 [&>*:last-child]:mb-7"
+          dangerouslySetInnerHTML={{
+            __html: post.body.html
+              .replace(/<a/g, '<a style="color: #00ADEE;"')
+              .replace(
+                /<h2/g,
+                '<h2 style="font-size: 2rem; font-weight: bold;"'
+              )
+              .replace(
+                /<h3/g,
+                '<h3 style="font-size: 1.5rem; font-weight: bold;"'
+              )
+              .replace(
+                /<h1/g,
+                '<h1 style="font-size: 2.5rem; font-weight: bold;"'
+              )
+              .replace(
+                /<code/g,
+                '<code style="font-weight: semibold; overflow: auto; white-space: pre-wrap; max-height: 300px;"'
+              ),
+          }}
+        />
+      </main>
+      <Footer></Footer>
     </>
-  )
-}
- 
-export default PostLayout
+  );
+};
+
+export default PostLayout;

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

@@ -25,18 +25,18 @@ export default function BlogsPage() {
                 return (
                   <div
                     key={idx}
-                    className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123] space-y-4"
+                    className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123] space-y-4 p-4"
                   >
                     <h3 className="mb-1 mt-3">
                       <Link
                         href={post.url}
-                        className="text-xl mt-12 md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90"
+                        className="text-xl mt-12 md:text-3xl font-SpaceGrotesk text-white  py-5 opacity-90"
                       >
                         {post.title}
                       </Link>
                     </h3>
                     <div
-                      className=" font-SpaceGrotesk text-white px-5 py-5 opacity-70 [&>*]:mb-3 [&>*:last-child]:mb-0"
+                      className=" font-SpaceGrotesk text-white py-5 opacity-70 [&>*]:mb-3 [&>*:last-child]:mb-0"
                       dangerouslySetInnerHTML={{ __html: post.body.html.substring(0, 250) + "..." }}
                     />
                   </div>

src/app/blogs/page.tsx

@@ -28,7 +28,7 @@ export default function Home() {
             {" "}
             <a
               href="https://github.com/intelowlproject/IntelOwl/star"
-              className="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="transform transition-transform duration-3 hover:scale-105 inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
               role="alert"
             >
               <span className="text-xs bg-[#00ADEF] rounded-full text-white px-4 py-1.5 mr-3 text-center justify-center">
@@ -41,7 +41,7 @@ export default function Home() {
             </a>
             <a
               href="https://hub.docker.com/repository/docker/intelowlproject/intelowl"
-              className="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="transform transition-transform duration-3 hover:scale-105 inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
               role="alert"
             >
               <span className="text-xs bg-[#00ADEF] rounded-full text-white px-4 py-1.5 mr-3">
@@ -53,7 +53,7 @@ export default function Home() {
             </a>
             <a
               href="https://github.com/intelowlproject/IntelOwl/fork"
-              className="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="transform transition-transform duration-3 hover:scale-105 inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
               role="alert"
             >
               <span className="text-xs bg-[#00ADEF] rounded-full text-white px-4 py-1.5 mr-3">
@@ -65,7 +65,7 @@ export default function Home() {
             </a>
             <a
               href="https://intelowl.readthedocs.io/en/latest/Usage.html#analyzers"
-              className="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="transform transition-transform duration-3 hover:scale-105 inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
               role="alert"
             >
               <span className="text-xs bg-[#00ADEF] rounded-full text-white px-4 py-1.5 mr-3">