v1.1.0 Release

feat(release): v1.1.0 - Lunchtime Fun
kittabit · Oct 26, 2022 · 5da604d · 5da604d · vercel · Oct 26, 2022
2 parents 0652032 + 6a020ac
commit 5da604d
Show file tree

Hide file tree

Showing 17 changed files with 290 additions and 169 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG.md
 
+## 1.1.0 (2022-10-26) - Lunchtime Updates
+
+Features:
+
+  - Navigation Updates & Improvements (Logo, Active Class, etc) - `next/navigation`
+  - Post/Item Listing Output Cleanup (better UI/UX for listings)
+  - Post/Item Listing Pagination Support
+  - Post/Item Components / Shared Code (`SinglePost.js` and `NewsList.js`)
+
 ## 1.0.0 (2022-10-25)
 
 Features:

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Rehacker
 
-Note:  This is an early *NextJS 13* test build/learning expirement with all of the changes; feel free to fork, make changes, point out bugs/idiotic configurations, etc. :)
+Note:  This is an early *NextJS 13* test build/learning expirement with all of the recent changes/additions; feel free to fork, make changes, point out bugs/idiotic configurations, etc. :)
 
 ## Demo URL
 
@@ -20,13 +20,13 @@ Note:  This is an early *NextJS 13* test build/learning expirement with all of t
 
 `npm run build`
 
-### Todo's
+### Current Todo's
 
-* Threaded Comments & Comment Children
-* Pagination (Ask, Show, Top, Best, etc)
+* Threaded Comments (and ability to `Load More`)
+* Comments Styling & Readability
+* Comments JSON Undefined Issue
 * Better Organization of getData* Functions
 * SEO / New `HEAD` Setup (`head.js`)
-
-### Known Issues
-
-* Comments Loading (when large number of  requests, oddity with undefined JSON)
+* Single News Item Styling & Updates
+* Mobile/Responsive Fixes
+* Performance Updates & Caching
diff --git a/app/ask/page.js b/app/ask/page.js
@@ -1,6 +1,6 @@
 import { use } from 'react';
 
-import SinglePost from "../../components/posts/SinglePost"
+import NewsList from "../../components/posts/NewsList"
 
 async function getNewsItems() {
 
@@ -10,25 +10,13 @@ async function getNewsItems() {
 }
 
 export default function Page() {
+
     var newsItems = use(getNewsItems());
-    newsItems = newsItems.slice(0, 30);
 
     return (
         <>
 
-            <main className="pt-0">          
-                <div className="relative flex min-h-screen flex-col jus items-center justify-center overflow-hidden bg-gray-50 p-6 sm:py-12">
-                    {newsItems &&
-                        <>
-                            {newsItems.map(item => {
-                                return (
-                                    <SinglePost key={item} id={item} />
-                                )
-                            })}
-                        </>
-                    }
-                </div>
-            </main>
+            <NewsList data={newsItems} />
 
         </>
     )

diff --git a/app/item/[slug]/page.js b/app/item/[slug]/page.js
@@ -15,6 +15,11 @@ async function getNewsItem(id) {
 export default function SingleNewsItemPage({ params, searchParams }) {
     var newsItem = use(getNewsItem( params.slug ));
 
+    var comments = newsItem.kids;
+    if(comments && comments.length > 0) {
+        comments = comments.slice(0, 30);
+    }
+
     return (
         <>            
             <main className="pt-0">          
@@ -59,10 +64,10 @@ export default function SingleNewsItemPage({ params, searchParams }) {
                         </div>
                     </div>
 
-                    { newsItem.kids && newsItem.kids.length > 0 && 
+                    { comments && comments.length > 0 && 
                         <>
                             <div className="w-full max-w-4xl">
-                                { newsItem.kids.map((commentId, index) => (
+                                { comments.map((commentId, index) => (
                                     <>
                                         <SingleComment comment_id={ commentId } key={ index } />
                                     </>

diff --git a/app/jobs/page.js b/app/jobs/page.js
@@ -1,6 +1,6 @@
 import { use } from 'react';
 
-import SinglePost from "../../components/posts/SinglePost"
+import NewsList from "../../components/posts/NewsList"
 
 async function getNewsItems() {
 
@@ -10,25 +10,13 @@ async function getNewsItems() {
 }
 
 export default function Page() {
+
     var newsItems = use(getNewsItems());
-    newsItems = newsItems.slice(0, 30);
 
     return (
         <>
 
-            <main className="pt-0">          
-                <div className="relative flex min-h-screen flex-col jus items-center justify-center overflow-hidden bg-gray-50 p-6 sm:py-12">
-                    {newsItems &&
-                        <>
-                            {newsItems.map(item => {
-                                return (
-                                    <SinglePost key={item} id={item} />
-                                )
-                            })}
-                        </>
-                    }
-                </div>
-            </main>
+            <NewsList data={newsItems} />
 
         </>
     )

diff --git a/app/layout.js b/app/layout.js
@@ -1,8 +1,9 @@
 import '../styles/globals.css'
-import Link from 'next/link';
 
-export default function RootLayout({ children }) {
+import NavLinks from '../components/navigation/NavLinks';
+import PaginateNews from '../components/navigation/PaginateNews';
 
+export default function RootLayout({ children }) {
     return (
         <html lang="en">
             <head>
@@ -13,47 +14,22 @@ export default function RootLayout({ children }) {
             <body>
                 <header className="relative flex flex-col jus items-center justify-center overflow-hidden bg-hn-orange">
                     <nav className="container mx-auto pt-[15px] pb-[15px]">
-                        <ul className="flex justify-between items-center w-full max-w-4xl mx-auto">
-                            <li className="text-white">
-                                <Link href="/" className="hover:underline underline-offset-2">
-                                    Top
-                                </Link>
-                            </li>
-
-                            <li className="text-white">
-                                <Link href="/new" className="hover:underline underline-offset-2">
-                                    New
-                                </Link>
-                            </li>
 
-                            <li className="text-white">
-                                <Link href="/show" className="hover:underline underline-offset-2">
-                                    Show
-                                </Link>
-                            </li>
-
-                            <li className="text-white">
-                                <Link href="/ask" className="hover:underline underline-offset-2">
-                                    Ask
-                                </Link>
-                            </li>
-
-                            <li className="text-white">
-                                <Link href="/jobs" className="hover:underline underline-offset-2">
-                                    Jobs
-                                </Link>
-                            </li>
+                        <ul className="flex justify-between items-center w-full max-w-4xl mx-auto">
+                            <NavLinks />
                         </ul>
                     </nav>
                 </header>
+
+                <PaginateNews />
 
                 {children}
 
                 <footer className="text-black bg-gray-50 pt-2 pb-6">
                     <div className="max-w-4xl mx-auto w-full text-center">
-                        <span className="block text-base">Data Provided by <a href="https://github.com/HackerNews/API" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">Official HackerNews API</a>.</span>
-                        <span className="block text-base">Built w/ &#10084; by <a href="https://kittabit.com/" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">Kittabit</a>.</span>
-                        <span className="block text-base">Source Code on <a href="https://github.com/kittabit/rehacker" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">GitHub</a>.</span>
+                        <span className="block text-sm">Data Provided by <a href="https://github.com/HackerNews/API" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">Official HackerNews API</a>.</span>
+                        <span className="block text-sm">Built w/ &#10084; by <a href="https://kittabit.com/" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">Kittabit</a>.</span>
+                        <span className="block text-sm">Source Code on <a href="https://github.com/kittabit/rehacker" className="hover:underline underline-offset-2" target="_blank" rel="noreferrer">GitHub</a>.</span>
                     </div> 
                 </footer>
             </body>

diff --git a/app/new/page.js b/app/new/page.js
@@ -1,6 +1,6 @@
 import { use } from 'react';
 
-import SinglePost from "../../components/posts/SinglePost"
+import NewsList from "../../components/posts/NewsList"
 
 async function getNewsItems() {
 
@@ -10,25 +10,13 @@ async function getNewsItems() {
 }
 
 export default function Page() {
+
     var newsItems = use(getNewsItems());
-    newsItems = newsItems.slice(0, 30);
 
     return (
         <>
 
-            <main className="pt-0">          
-                <div className="relative flex min-h-screen flex-col jus items-center justify-center overflow-hidden bg-gray-50 p-6 sm:py-12">
-                    {newsItems &&
-                        <>
-                            {newsItems.map(item => {
-                                return (
-                                    <SinglePost key={item} id={item} />
-                                )
-                            })}
-                        </>
-                    }
-                </div>
-            </main>
+            <NewsList data={newsItems} />
 
         </>
     )

diff --git a/app/page.js b/app/page.js
@@ -1,6 +1,7 @@
 import { use } from 'react';
 
 import SinglePost from "../components/posts/SinglePost"
+import NewsList from "../components/posts/NewsList"
 
 async function getNewsItems() {
 
@@ -10,25 +11,13 @@ async function getNewsItems() {
 }
 
 export default function Page() {
+
     var newsItems = use(getNewsItems());
-    newsItems = newsItems.slice(0, 30);
 
     return (
         <>
 
-            <main className="pt-0">          
-                <div className="relative flex min-h-screen flex-col jus items-center justify-center overflow-hidden bg-gray-50 p-6 sm:py-12">
-                    {newsItems &&
-                        <>
-                            {newsItems.map(item => {
-                                return (
-                                    <SinglePost key={item} id={item} />
-                                )
-                            })}
-                        </>
-                    }
-                </div>
-            </main>
+            <NewsList data={newsItems} />
 
         </>
     )

diff --git a/app/show/page.js b/app/show/page.js
@@ -1,6 +1,6 @@
 import { use } from 'react';
 
-import SinglePost from "../../components/posts/SinglePost"
+import NewsList from "../../components/posts/NewsList"
 
 async function getNewsItems() {
 
@@ -10,25 +10,13 @@ async function getNewsItems() {
 }
 
 export default function Page() {
+
     var newsItems = use(getNewsItems());
-    newsItems = newsItems.slice(0, 30);
 
     return (
         <>
 
-            <main className="pt-0">          
-                <div className="relative flex min-h-screen flex-col jus items-center justify-center overflow-hidden bg-gray-50 p-6 sm:py-12">
-                    {newsItems &&
-                        <>
-                            {newsItems.map(item => {
-                                return (
-                                    <SinglePost key={item} id={item} />
-                                )
-                            })}
-                        </>
-                    }
-                </div>
-            </main>
+            <NewsList data={newsItems} />
 
         </>
     )

diff --git a/components/navigation/NavLinks.js b/components/navigation/NavLinks.js
@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { usePathname } from 'next/navigation';
+
+export default function NavLinks( props ) {
+
+    const pathname = usePathname();
+
+    return (
+        <>
+            <li className="text-white">
+                <Link href="/" className="hover:underline underline-offset-2">
+                    <Image src="/hn-logo.svg" width="25" height="25" className="logo-color" alt="Rehacker" />
+                </Link>
+            </li>
+
+            <li className="text-white">
+                <Link href="/" className={`hover:underline underline-offset-2 ${pathname == "/" ? "font-bold" : ""}`}>
+                    Top
+                </Link>
+            </li>
+
+            <li className="text-white">
+                <Link href="/new" className={`hover:underline underline-offset-2 ${pathname == "/new" ? "font-bold" : ""}`}>
+                    New
+                </Link>
+            </li>
+
+            <li className="text-white">
+                <Link href="/show" className={`hover:underline underline-offset-2 ${pathname == "/show" ? "font-bold" : ""}`}>
+                    Show
+                </Link>
+            </li>
+
+            <li className="text-white">
+                <Link href="/ask" className={`hover:underline underline-offset-2 ${pathname == "/ask" ? "font-bold" : ""}`}>
+                    Ask
+                </Link>
+            </li>
+
+            <li className="text-white">
+                <Link href="/jobs" className={`hover:underline underline-offset-2 ${pathname == "/jobs" ? "font-bold" : ""}`}>
+                    Jobs
+                </Link>
+            </li>
+        </>
+    )
+
+}