Skip to content

Commit d2b601a

Browse files
NiallJoeMaherNiallJoeMaher
authored
Remove white border from nav (#255)
1 parent d586caa commit d2b601a

File tree

6 files changed

+536
-556
lines changed

6 files changed

+536
-556
lines changed

‎pages/[username].tsx‎

Lines changed: 55 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -43,65 +43,63 @@ const Profile: NextPage = ({
4343
<meta property="og:type" content="website" />
4444
</Head>
4545
<Layout>
46-
<div className="border-t-2">
47-
<div className="max-w-2xl px-4 mx-auto text-white">
48-
<main className="flex pt-6">
49-
<div className="mr-4 flex-shrink-0 self-center">
50-
{image && (
51-
<img
52-
className="rounded-full object-cover h-32 w-32"
53-
alt={`Avatar for ${name}`}
54-
src={image}
55-
/>
56-
)}
57-
</div>
58-
<div className="flex flex-col justify-center">
59-
<h1 className="text-lg md:text-xl font-bold mb-0">{name}</h1>
60-
<h2 className="text-neutral-400 font-bold text-sm">
61-
@{username}
62-
</h2>
63-
<p className="mt-1">{bio}</p>
64-
</div>
65-
</main>
46+
<div className="max-w-2xl px-4 mx-auto text-white">
47+
<main className="flex pt-6">
48+
<div className="mr-4 flex-shrink-0 self-center">
49+
{image && (
50+
<img
51+
className="rounded-full object-cover h-32 w-32"
52+
alt={`Avatar for ${name}`}
53+
src={image}
54+
/>
55+
)}
56+
</div>
57+
<div className="flex flex-col justify-center">
58+
<h1 className="text-lg md:text-xl font-bold mb-0">{name}</h1>
59+
<h2 className="text-neutral-400 font-bold text-sm">
60+
@{username}
61+
</h2>
62+
<p className="mt-1">{bio}</p>
63+
</div>
64+
</main>
6665

67-
<PageHeading>Published articles</PageHeading>
66+
<PageHeading>Published articles</PageHeading>
6867

69-
{posts.length ? (
70-
posts.map(
71-
({ slug, title, excerpt, readTimeMins, published, id }) => {
72-
if (!published) return;
73-
return (
74-
<ArticlePreview
75-
key={slug}
76-
slug={slug}
77-
title={title}
78-
excerpt={excerpt}
79-
name={name}
80-
username={username || ""}
81-
image={image}
82-
date={published}
83-
readTime={readTimeMins}
84-
menuOptions={
85-
isOwner
86-
? [
87-
{
88-
label: "Edit",
89-
href: `/create/${id}`,
90-
postId: id,
91-
},
92-
]
93-
: undefined
94-
}
95-
showBookmark={!isOwner}
96-
id={id}
97-
/>
98-
);
99-
}
100-
)
101-
) : (
102-
<p className="font-medium py-4">Nothing published yet... 🥲</p>
103-
)}
104-
</div>
68+
{posts.length ? (
69+
posts.map(
70+
({ slug, title, excerpt, readTimeMins, published, id }) => {
71+
if (!published) return;
72+
return (
73+
<ArticlePreview
74+
key={slug}
75+
slug={slug}
76+
title={title}
77+
excerpt={excerpt}
78+
name={name}
79+
username={username || ""}
80+
image={image}
81+
date={published}
82+
readTime={readTimeMins}
83+
menuOptions={
84+
isOwner
85+
? [
86+
{
87+
label: "Edit",
88+
href: `/create/${id}`,
89+
postId: id,
90+
},
91+
]
92+
: undefined
93+
}
94+
showBookmark={!isOwner}
95+
id={id}
96+
/>
97+
);
98+
}
99+
)
100+
) : (
101+
<p className="font-medium py-4">Nothing published yet... 🥲</p>
102+
)}
105103
</div>
106104
</Layout>
107105
</>

‎pages/articles/[slug].tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -199,32 +199,30 @@ const ArticlePage: NextPage = ({
199199
</Transition>
200200

201201
<Layout>
202-
<div className="border-t-2">
203-
<div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4 break-words">
204-
<article className="prose prose-invert lg:prose-lg">
205-
<h1>{post.title}</h1>
206-
{Markdoc.renderers.react(content, React, {
207-
components: markdocComponents,
208-
})}
209-
</article>
210-
{post.tags.length > 0 && (
211-
<section className="flex flex-wrap gap-3">
212-
{post.tags.map(({ tag }) => (
213-
<Link
214-
href={`/articles?tag=${tag.title.toLowerCase()}`}
215-
key={tag.title}
216-
className="bg-gradient-to-r from-orange-400 to-pink-600 hover:bg-pink-700 text-white py-1 px-3 rounded-full text-xs font-bold"
217-
>
218-
{tag.title}
219-
</Link>
220-
))}
221-
</section>
222-
)}
223-
</div>
224-
<div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4">
225-
<BioBar author={post.user} />
226-
<CommentsArea postId={post.id} postOwnerId={post.userId} />
227-
</div>
202+
<div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4 break-words">
203+
<article className="prose prose-invert lg:prose-lg">
204+
<h1>{post.title}</h1>
205+
{Markdoc.renderers.react(content, React, {
206+
components: markdocComponents,
207+
})}
208+
</article>
209+
{post.tags.length > 0 && (
210+
<section className="flex flex-wrap gap-3">
211+
{post.tags.map(({ tag }) => (
212+
<Link
213+
href={`/articles?tag=${tag.title.toLowerCase()}`}
214+
key={tag.title}
215+
className="bg-gradient-to-r from-orange-400 to-pink-600 hover:bg-pink-700 text-white py-1 px-3 rounded-full text-xs font-bold"
216+
>
217+
{tag.title}
218+
</Link>
219+
))}
220+
</section>
221+
)}
222+
</div>
223+
<div className="mx-auto pb-4 max-w-3xl px-2 sm:px-4">
224+
<BioBar author={post.user} />
225+
<CommentsArea postId={post.id} postOwnerId={post.userId} />
228226
</div>
229227
</Layout>
230228
</>

‎pages/articles/index.tsx‎

Lines changed: 83 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -69,94 +69,92 @@ const ArticlesPage = () => {
6969
<meta property="og:url" content="https://codu.co/articles" />
7070
</Head>
7171
<Layout>
72-
<div className="border-t border-white">
73-
<div className="relative sm:mx-auto max-w-2xl mx-2">
74-
<div className="my-8 border-b-2 pb-4 flex justify-between items-center">
75-
<h1 className="text-3xl tracking-tight font-extrabold text-neutral-50 sm:text-4xl ">
76-
{typeof tag === "string" ? (
77-
<div className="flex justify-center items-center">
78-
<TagIcon className="text-neutral-200 h-6 w-6 mr-3" />
79-
{capitalize(tag)}
80-
</div>
81-
) : (
82-
"Articles"
83-
)}
84-
</h1>
85-
<div>
86-
<label htmlFor="filter" className="sr-only">
87-
Location
88-
</label>
89-
<select
90-
id="filter"
91-
name="filter"
92-
className="capitalize mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-pink-600 sm:text-sm sm:leading-6 "
93-
onChange={(e) => {
94-
router.push(
95-
`/articles?filter=${e.target.value}${
96-
tag ? `&tag=${tag}` : ""
97-
}`
98-
);
99-
}}
100-
value={selectedSortFilter}
101-
>
102-
<option>newest</option>
103-
<option>oldest</option>
104-
<option>top</option>
105-
</select>
106-
</div>
107-
</div>
108-
<section>
109-
{status === "error" && (
110-
<div>Something went wrong... Please refresh your page.</div>
72+
<div className="relative sm:mx-auto max-w-2xl mx-2">
73+
<div className="my-8 border-b-2 pb-4 flex justify-between items-center">
74+
<h1 className="text-3xl tracking-tight font-extrabold text-neutral-50 sm:text-4xl ">
75+
{typeof tag === "string" ? (
76+
<div className="flex justify-center items-center">
77+
<TagIcon className="text-neutral-200 h-6 w-6 mr-3" />
78+
{capitalize(tag)}
79+
</div>
80+
) : (
81+
"Articles"
11182
)}
112-
{status === "loading" &&
113-
Children.toArray(
114-
Array.from({ length: 7 }, () => {
115-
return <ArticleLoading />;
116-
})
117-
)}
118-
{status === "success" &&
119-
data.pages.map((page) => {
120-
return (
121-
<Fragment key={page.nextCursor ?? "lastPage"}>
122-
{page.posts.map(
123-
({
124-
slug,
125-
title,
126-
excerpt,
127-
user: { name, image, username },
128-
updatedAt,
129-
readTimeMins,
130-
id,
131-
currentUserLikesPost,
132-
}) => (
133-
<ArticlePreview
134-
key={title}
135-
id={id}
136-
slug={slug}
137-
title={title}
138-
excerpt={excerpt}
139-
name={name}
140-
username={username || ""}
141-
image={image}
142-
date={updatedAt.toISOString()}
143-
readTime={readTimeMins}
144-
bookmarkedInitialState={currentUserLikesPost}
145-
/>
146-
)
147-
)}
148-
</Fragment>
83+
</h1>
84+
<div>
85+
<label htmlFor="filter" className="sr-only">
86+
Location
87+
</label>
88+
<select
89+
id="filter"
90+
name="filter"
91+
className="capitalize mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-pink-600 sm:text-sm sm:leading-6 "
92+
onChange={(e) => {
93+
router.push(
94+
`/articles?filter=${e.target.value}${
95+
tag ? `&tag=${tag}` : ""
96+
}`
14997
);
150-
})}
151-
{status === "success" && !data.pages[0].posts.length && (
152-
<h2 className="text-lg">No results founds</h2>
153-
)}
154-
{isFetchingNextPage ? <ArticleLoading /> : null}
155-
<span className="invisible" ref={ref}>
156-
intersection observer marker
157-
</span>
158-
</section>
98+
}}
99+
value={selectedSortFilter}
100+
>
101+
<option>newest</option>
102+
<option>oldest</option>
103+
<option>top</option>
104+
</select>
105+
</div>
159106
</div>
107+
<section>
108+
{status === "error" && (
109+
<div>Something went wrong... Please refresh your page.</div>
110+
)}
111+
{status === "loading" &&
112+
Children.toArray(
113+
Array.from({ length: 7 }, () => {
114+
return <ArticleLoading />;
115+
})
116+
)}
117+
{status === "success" &&
118+
data.pages.map((page) => {
119+
return (
120+
<Fragment key={page.nextCursor ?? "lastPage"}>
121+
{page.posts.map(
122+
({
123+
slug,
124+
title,
125+
excerpt,
126+
user: { name, image, username },
127+
updatedAt,
128+
readTimeMins,
129+
id,
130+
currentUserLikesPost,
131+
}) => (
132+
<ArticlePreview
133+
key={title}
134+
id={id}
135+
slug={slug}
136+
title={title}
137+
excerpt={excerpt}
138+
name={name}
139+
username={username || ""}
140+
image={image}
141+
date={updatedAt.toISOString()}
142+
readTime={readTimeMins}
143+
bookmarkedInitialState={currentUserLikesPost}
144+
/>
145+
)
146+
)}
147+
</Fragment>
148+
);
149+
})}
150+
{status === "success" && !data.pages[0].posts.length && (
151+
<h2 className="text-lg">No results founds</h2>
152+
)}
153+
{isFetchingNextPage ? <ArticleLoading /> : null}
154+
<span className="invisible" ref={ref}>
155+
intersection observer marker
156+
</span>
157+
</section>
160158
</div>
161159
</Layout>
162160
</>

0 commit comments

Comments
 (0)