fixed errors and project title

Author: roman-bytes

.netlify/functions-internal/server.js

@@ -3,6 +3,7 @@ import type { EntryContext } from '@remix-run/node'
 import { Response } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { isbot } from 'isbot'
+/* @ts-ignore */
 import { renderToPipeableStream } from 'react-dom/server'
 import { server } from './mocks/node'
 

.netlify/functions-internal/server.js.map

@@ -41,7 +41,7 @@ function Slug() {
                 <div className="w-full lg:w-6/12">
                     <div className="text-romanPrimary font-bold pt-10">{formatTime(data.article.created_at)}</div>
                     <div className="flex items-center flex-wrap">
-                        {data.article.tags.map((tag) => <div key={tag} className="text-romanPrimary text-md mr-4">#{tag}</div>)}
+                        {data.article.tags.map((tag: string) => <div key={tag} className="text-romanPrimary text-md mr-4">#{tag}</div>)}
                     </div>
                     <div className="mt-20" dangerouslySetInnerHTML={{__html: data.article.body_html}}/>
                 </div>

app/entry.server.tsx

@@ -6,6 +6,13 @@ import {Link, useLoaderData} from "@remix-run/react";
 import {json} from "@remix-run/node";
 import { parseISO, format } from "date-fns";
 
+type Post = {
+    id: string;
+    title: string;
+    created_at: string;
+    tag_list: string[];
+}
+
 export const loader = async () => {
     const articles = await fetch(`https://dev.to/api/articles?username=romanbytes`).then((res) => res.json());
 
@@ -23,15 +30,14 @@ export default function Blog() {
     const matches = useMatches();
     const currentRoute = matches[1];
 
-    console.log('POSTS', posts);
     return (
         <main className="container relative border-2 border-romanBlack lg:rounded-3xl bg-white pt-10 lg:pt-32 px-10 lg:px-28 pb-10 lg:pb-28 lg:my-28">
             <div className="hidden lg:block absolute top-10 left-0 right-0 text-center text-romanPrimary mb-16">{`~ ${currentRoute.pathname} `}</div>
             <RomanBytesLogo/>
             <h1 className="font-newMono text-romanBlack text-2xl font-bold hidden lg:hidden">Blog</h1>
 
             <section className="mt-10 lg:mt-32">
-                {posts.map((post) => (
+                {posts.map((post: Post) => (
                     <div key={post.id} className="relative w-full lg:w-1/2 max-w-[400] max-h-[225] min-w-[400] min-h-[225] border border-dashed border-romanText hover:border-solid hover:border-romanPrimary p-8 mt-[-1px] ml-0 lg:ml-[-1px]">
                         <div className="lg:ml-16">{formatTime(post.created_at)}</div>
                         <Link to={`/blog/${post.id}`}>
@@ -41,7 +47,7 @@ export default function Blog() {
                             </h2>
                         </Link>
                         <div className="flex flex-wrap items-center lg:ml-16">
-                            {post.tag_list.map((tag) => <div key={tag} className="text-romanPrimary text-md mr-4">#{tag}</div>)}
+                            {post.tag_list.map((tag: string) => <div key={tag} className="text-romanPrimary text-md mr-4">#{tag}</div>)}
                         </div>
                         <Plus className="absolute top-[-3px] left-[-3px]" />
                         <Plus className="absolute top-[-3px] right-[-3px]" />

app/routes/blog/$slug.tsx

@@ -35,7 +35,7 @@ const getLangColors = async (langs: any): Promise<{ [key: string]: LangColorResu
     const colors: Colors = await fetch('https://raw.githubusercontent.com/ozh/github-colors/refs/heads/master/colors.json').then(res => res.json());
 
     // Grab colors and return new array
-    const langColors = langs.reduce((acc: { [key: string]: LangColorResult}, lang) => {
+    const langColors = langs.reduce((acc: { [key: string]: LangColorResult}, lang: string) => {
         if (colors[lang]) {
             acc[lang] = {
                 color: colors[lang].color,
@@ -58,7 +58,7 @@ export const loader = async () => {
         repo.topics.includes('portfolio')
     );
 
-    const setLangs = async (repo) => {
+    const setLangs = async (repo: RepoData) => {
         const githubLangs = await fetch(repo.languages_url).then((response) => response.json());
         const setLangs:{[p: string]: LangColorResult} = await getLangColors(Object.keys(githubLangs));
         return setLangs;
@@ -199,7 +199,7 @@ export default function Projects() {
             <div className="container relative border-2 border-romanBlack lg:rounded-3xl bg-white px-10 pt-10 lg:pt-32 lg:px-28 pb-28 lg:my-28">
                 <div className="hidden lg:block absolute top-10 left-0 right-0 text-center text-romanPrimary mb-16">{`~ ${currentRoute.pathname} `}</div>
                 <RomanBytesLogo/>
-                <h1 className="text-romanBlack font-newMono font-bold text-2xl hidden lg:block">Projects</h1>
+                <h1 className="text-romanBlack font-newMono font-bold text-2xl lg:hidden">Projects</h1>
                 <div className="flex flex-wrap mt-10 lg:mt-28 w-full lg:w-10/12">
                     {repoCards}
                 </div>
@@ -210,7 +210,7 @@ export default function Projects() {
 
     return (
         <div className="container flex flex-col items-center justify-center">
-            <h1 className="text-4xl text-white p-4 border-b border-white">
+            <h1 className="lg:hidden text-4xl text-white p-4 border-b border-white">
                 Projects
             </h1>
             <div className="flex flex-wrap p-4 xl:-mx-2 overflow-hidden lg:mt-4 text-white mb-20">