-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from janhq/feat/simplify-landing-page
feat: simplify landing page
- Loading branch information
Showing
44 changed files
with
719 additions
and
1,000 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .next/ | ||
| node_modules/ | ||
| dist/ | ||
| *.mdx | ||
| *.hbs |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import Link from "next/link"; | ||
| import React from "react"; | ||
| import { IoIosArrowRoundBack } from "react-icons/io"; | ||
|
|
||
| const BlogBackButton = () => { | ||
| return ( | ||
| <div className="mt-4"> | ||
| <Link href="/"> | ||
| <IoIosArrowRoundBack className="text-4xl text-black/70 dark:text-white/70" /> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BlogBackButton; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,126 +1,45 @@ | ||
| import { useData } from 'nextra/data' | ||
| import { format } from 'date-fns' | ||
| import { useRouter, useSearchParams } from 'next/navigation' | ||
| import { useData } from "nextra/data"; | ||
| import { format } from "date-fns"; | ||
| import { useSearchParams } from "next/navigation"; | ||
|
|
||
| import Link from 'next/link' | ||
| import { Cards } from 'nextra/components' | ||
| import { twMerge } from 'tailwind-merge' | ||
| import Link from "next/link"; | ||
|
|
||
| const Blog = () => { | ||
| const blogPost = useData() | ||
| const searchParams = useSearchParams() | ||
| const search = searchParams?.get('category') | ||
| const router = useRouter() | ||
| const blogPost = useData(); | ||
| const searchParams = useSearchParams(); | ||
| const search = searchParams?.get("category"); | ||
|
|
||
| const staticCategories = [ | ||
| { | ||
| name: 'Engineering', | ||
| id: 'engineering', | ||
| }, | ||
| { | ||
| name: 'Research', | ||
| id: 'research', | ||
| }, | ||
| ] | ||
|
|
||
| return ( | ||
| <div className="nextra-wrap-container py-14"> | ||
| <div className="w-full mx-auto"> | ||
|
|
||
| <div className="mt-10"> | ||
| <ul className="flex lg:gap-4 gap-1 whitespace-nowrap overflow-auto lg:overflow-hidden lg:whitespace-normal"> | ||
| <li | ||
| onClick={() => { | ||
| router.push(`/`) | ||
| }} | ||
| className={twMerge( | ||
| 'cursor-pointer py-1 px-2 lg:px-3 rounded-full', | ||
| search === null && | ||
| 'dark:bg-blue-400 bg-blue-500 font-medium text-white' | ||
| )} | ||
| > | ||
| <p>All Categories</p> | ||
| </li> | ||
| {staticCategories.map((cat, i) => { | ||
| return ( | ||
| <li | ||
| key={i} | ||
| onClick={() => { | ||
| router.push(`/?category=${cat.id}`) | ||
| }} | ||
| className={twMerge( | ||
| 'cursor-pointer py-1 px-2 lg:px-3 rounded-full', | ||
| cat.id === search && | ||
| 'dark:bg-blue-400 bg-blue-500 font-medium text-white' | ||
| )} | ||
| > | ||
| <p>{cat.name}</p> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| return ( | ||
| <div className="py-14"> | ||
| <h2 className="nx-mt-2 nx-text-3xl nx-font-bold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100"> | ||
| Blog | ||
| </h2> | ||
| <div className="w-full mx-auto"> | ||
| {blogPost | ||
| .filter((post: BlogPostsThumbnail) => { | ||
| if (search) { | ||
| return post.categories?.includes(String(search)); | ||
| } else { | ||
| return post; | ||
| } | ||
| }) | ||
| .map((post: BlogPostsThumbnail, i: number) => { | ||
| return ( | ||
| <Link href={String(post.url)} key={i}> | ||
| <div className="py-4 border-b dark:border-gray-600 border-[#F0F0F0] flex justify-between items-center"> | ||
| <h6 className="text-base line-clamp-1 font-sans text-black/70 dark:text-white/70"> | ||
| {post.title} | ||
| </h6> | ||
| <p className="text-sm font-medium text-black/60 dark:text-white/60"> | ||
| {format(String(post.date), "MMMM do, yyyy")} | ||
| </p> | ||
| </div> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| <Cards num={4} className="mt-14 gap-8"> | ||
| {blogPost | ||
| .filter((post: BlogPostsThumbnail) => { | ||
| if (search) { | ||
| return post.categories?.includes(String(search)) | ||
| } else { | ||
| return post | ||
| } | ||
| }) | ||
| .map((post: BlogPostsThumbnail, i: number) => { | ||
| return ( | ||
| <Link | ||
| href={String(post.url)} | ||
| key={i} | ||
| className="nextra-card nx-group nx-flex nx-flex-col nx-justify-start nx-overflow-hidden nx-rounded-xl nx-border nx-border-gray-200 nx-text-current nx-no-underline dark:nx-shadow-none hover:nx-shadow-gray-100 dark:hover:nx-shadow-none nx-shadow-gray-100 active:nx-shadow-sm active:nx-shadow-gray-200 nx-transition-all nx-duration-200 hover:nx-border-gray-300 nx-bg-transparent nx-shadow-sm dark:nx-border-neutral-800 hover:nx-shadow-md dark:hover:nx-border-neutral-700" | ||
| > | ||
| <div | ||
| className={twMerge( | ||
| 'min-h-40 border-b border-gray-200 dark:border-neutral-800', | ||
| i % 2 !== 0 | ||
| ? 'bg-gradient-to-r from-cyan-500 to-blue-500' | ||
| : 'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500' | ||
| )} | ||
| > | ||
| <div className="flex w-full h-full items-center px-4 justify-center"> | ||
| <div className="text-center"> | ||
| {post.categories?.map((cat, i) => { | ||
| return ( | ||
| <p | ||
| className="inline-flex capitalize text-xl font-bold text-white" | ||
| key={i} | ||
| > | ||
| {cat?.replaceAll('-', ' ')} | ||
| </p> | ||
| ) | ||
| })} | ||
| <p className="font-medium text-white"> | ||
| {format(String(post.date), 'MMMM do, yyyy')} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="px-4 py-6"> | ||
| <h6 className="text-lg line-clamp-1 font-bold"> | ||
| {post.title} | ||
| </h6> | ||
| <p className="my-2 text-black/60 dark:text-white/60 line-clamp-2 leading-relaxed"> | ||
| {post.description} | ||
| </p> | ||
| <p className="dark:text-blue-400 text-blue-600 line-clamp-2 font-medium"> | ||
| Read more... | ||
| </p> | ||
| </div> | ||
| </Link> | ||
| ) | ||
| })} | ||
| </Cards> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Blog | ||
| export default Blog; |
Oops, something went wrong.