Skip to content

Commit 7244c46

Browse files
add: project summary blog + misc fixes + hover animation
1 parent c801a1f commit 7244c46

File tree

7 files changed

+151
-39
lines changed

7 files changed

+151
-39
lines changed

Blogs/gsoc23_project_summary.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Frontend Improvements for Buffalogs, IntelOwl.
3+
date: 2023-08-27
4+
cover: /images/gsoclogo.png
5+
---
6+
7+
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.
8+
9+
### Pre-GSOC Commits/Discussions.
10+
11+
```(js)
12+
#1578 (Merged) Make Observable copy-pastable.
13+
#1407 (Merged) Allow to retry entire job.
14+
#1362 (Merged) Time format to mm:ss in JobHistory Page.
15+
#1672 (Discussion, closed) Added LinkedIn release action.
16+
```
17+
18+
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.
19+
20+
As stated in my original proposal’s overview:
21+
22+
> 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.
23+
>
24+
25+
# GSoC Deliverables and Tasks
26+
27+
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.
28+
29+
Below, i expand upon each of the tasks plus the challenges i faced and the learning experience that came along with it.
30+
31+
### IntelOwlProject’s website ([v2](https://github.com/intelowlproject/intelowlproject.github.io))
32+
33+
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.
34+
35+
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.
36+
37+
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.
38+
39+
here is the [website](https://intelowlproject.github.io/).
40+
41+
42+
### Authentication using JWT for Buffalogs. ([#43](https://github.com/certego/BuffaLogs/pull/43))
43+
44+
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.
45+
46+
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.
47+
48+
here is the [pr](https://github.com/certego/BuffaLogs/pull/43).
49+
50+
### Maps, Graphs for BuffaLogs Dashboard([#44](https://github.com/certego/BuffaLogs/pull/44))
51+
52+
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.
53+
54+
Thanks to Lorena Goldoni, The DRF endpoints for the same were implemented quickly, and i started with the dashboard’s development.
55+
56+
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.
57+
58+
p.s i also added up a quick landing page for Buffalogs, explaining a bit about the product there.
59+
60+
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.
61+
62+
here is the [pr](https://github.com/certego/BuffaLogs/pull/44) for that.
63+
64+
### Frontend Guide/tutorial for IntelOwl using react-joyride.(#[1852](https://github.com/intelowlproject/IntelOwl/pull/1852))
65+
66+
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).
67+
68+
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.
69+
70+
this is the [pr](https://github.com/intelowlproject/IntelOwl/pull/1852) .
71+
72+
## Ending Note and Next Steps.
73+
74+
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.
75+
76+
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.
77+
78+
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function FeatureSection() {
99
return (
1010
<div
1111
key={index}
12-
className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
12+
className="transform transition-transform duration-3 hover:scale-105 mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
1313
>
1414
<h3 className="text-xl md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90">
1515
{feature.title}
@@ -23,7 +23,7 @@ export default function FeatureSection() {
2323
return (
2424
<div
2525
key={index}
26-
className="bg-[#1B1B23] mb-8 sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
26+
className="transform transition-transform duration-3 hover:scale-105 bg-[#1B1B23] mb-8 sm:break-inside-avoid rounded-2xl border-solid border border-[#212123]"
2727
>
2828
<h3 className="text-xl md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90">
2929
{feature.title}

components/sections/HeroSection.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function HeroSection(props: HeroSectionProps) {
4141
href={
4242
"https://intelowl.readthedocs.io/en/latest/Installation.html"
4343
}
44-
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"
44+
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"
4545
>
4646
get started ➔
4747
</Link>
@@ -82,7 +82,7 @@ export default function HeroSection(props: HeroSectionProps) {
8282
href={
8383
"https://intelowl.readthedocs.io/en/latest/Installation.html"
8484
}
85-
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"
85+
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"
8686
>
8787
get started ➔
8888
</Link>

public/images/gsoclogo.png

31.6 KB
Loading

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

Lines changed: 62 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,72 @@
1-
import { format, parseISO } from 'date-fns'
2-
import { allPosts } from '../../../../.contentlayer/generated'
3-
import { Header } from '../../../../components/Header'
4-
import Footer from '../../../../components/Footer'
5-
import Image from "next/image"
1+
import { format, parseISO } from "date-fns";
2+
import { allPosts } from "../../../../.contentlayer/generated";
3+
import { Header } from "../../../../components/Header";
4+
import Footer from "../../../../components/Footer";
5+
import Image from "next/image";
66

7-
export const generateStaticParams = async () => allPosts.map((post) => ({ slug: post._raw.flattenedPath }))
7+
export const generateStaticParams = async () =>
8+
allPosts.map((post) => ({ slug: post._raw.flattenedPath }));
89

910
export const generateMetadata = ({ params }: { params: { slug: string } }) => {
10-
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
11-
if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
12-
return { title: post.title }
13-
}
11+
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
12+
if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
13+
return { title: post.title };
14+
};
1415

1516
//params are written a specfic way as a workaround to make the contentlayer url routing work.
1617
const PostLayout = ({ params }: { params: { slug: string } }) => {
17-
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
18-
if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
18+
const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
19+
if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
1920

2021
return (
2122
<>
22-
<Header blogsection={true}></Header>
23-
<main className='h-full mx-16 md:mt-52 mt-28'>
24-
<div className="mb-8 md:space-y-4">
25-
<time dateTime={post.date} className="font-SpaceGrotesk text-white py-5 opacity-70 text-sm md:text-md mb-5 ">
26-
{format(parseISO(post.date), 'LLLL d, yyyy')}
27-
</time>
28-
<h1 className="text-white font-SpaceGrotesk font-bold text-3xl md:text-6xl pb-12">{post.title}</h1>
29-
<Image src={post.cover} width={100} height={100} alt={""} className="pb-12"></Image>
30-
</div>
31-
<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;"'), }} />
32-
</main>
33-
<Footer></Footer>
23+
<Header blogsection={true}></Header>
24+
<main className="h-full mx-16 md:mt-52 mt-28">
25+
<div className="mb-8 md:space-y-4">
26+
<time
27+
dateTime={post.date}
28+
className="font-SpaceGrotesk text-white py-5 opacity-70 text-sm md:text-md mb-5 "
29+
>
30+
{format(parseISO(post.date), "LLLL d, yyyy")}
31+
</time>
32+
<h1 className="text-white font-SpaceGrotesk font-bold text-3xl md:text-6xl pb-12">
33+
{post.title}
34+
</h1>
35+
<Image
36+
src={post.cover}
37+
width={100}
38+
height={100}
39+
alt={""}
40+
className="pb-12"
41+
></Image>
42+
</div>
43+
<div
44+
className="font-SpaceGrotesk prose text-md text-white text-left py-5 opacity-70 [&>*]:mb-5 [&>*:last-child]:mb-7"
45+
dangerouslySetInnerHTML={{
46+
__html: post.body.html
47+
.replace(/<a/g, '<a style="color: #00ADEE;"')
48+
.replace(
49+
/<h2/g,
50+
'<h2 style="font-size: 2rem; font-weight: bold;"'
51+
)
52+
.replace(
53+
/<h3/g,
54+
'<h3 style="font-size: 1.5rem; font-weight: bold;"'
55+
)
56+
.replace(
57+
/<h1/g,
58+
'<h1 style="font-size: 2.5rem; font-weight: bold;"'
59+
)
60+
.replace(
61+
/<code/g,
62+
'<code style="font-weight: semibold; overflow: auto; white-space: pre-wrap; max-height: 300px;"'
63+
),
64+
}}
65+
/>
66+
</main>
67+
<Footer></Footer>
3468
</>
35-
)
36-
}
37-
38-
export default PostLayout
69+
);
70+
};
71+
72+
export default PostLayout;

src/app/blogs/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,18 @@ export default function BlogsPage() {
2525
return (
2626
<div
2727
key={idx}
28-
className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123] space-y-4"
28+
className="mb-8 bg-[#17171D] sm:break-inside-avoid rounded-2xl border-solid border border-[#212123] space-y-4 p-4"
2929
>
3030
<h3 className="mb-1 mt-3">
3131
<Link
3232
href={post.url}
33-
className="text-xl mt-12 md:text-3xl font-SpaceGrotesk text-white px-5 py-5 opacity-90"
33+
className="text-xl mt-12 md:text-3xl font-SpaceGrotesk text-white py-5 opacity-90"
3434
>
3535
{post.title}
3636
</Link>
3737
</h3>
3838
<div
39-
className=" font-SpaceGrotesk text-white px-5 py-5 opacity-70 [&>*]:mb-3 [&>*:last-child]:mb-0"
39+
className=" font-SpaceGrotesk text-white py-5 opacity-70 [&>*]:mb-3 [&>*:last-child]:mb-0"
4040
dangerouslySetInnerHTML={{ __html: post.body.html.substring(0, 250) + "..." }}
4141
/>
4242
</div>

src/app/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function Home() {
2828
{" "}
2929
<a
3030
href="https://github.com/intelowlproject/IntelOwl/star"
31-
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"
31+
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"
3232
role="alert"
3333
>
3434
<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() {
4141
</a>
4242
<a
4343
href="https://hub.docker.com/repository/docker/intelowlproject/intelowl"
44-
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"
44+
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"
4545
role="alert"
4646
>
4747
<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() {
5353
</a>
5454
<a
5555
href="https://github.com/intelowlproject/IntelOwl/fork"
56-
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"
56+
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"
5757
role="alert"
5858
>
5959
<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() {
6565
</a>
6666
<a
6767
href="https://intelowl.readthedocs.io/en/latest/Usage.html#analyzers"
68-
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"
68+
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"
6969
role="alert"
7070
>
7171
<span className="text-xs bg-[#00ADEF] rounded-full text-white px-4 py-1.5 mr-3">

0 commit comments

Comments
 (0)