updated comments styles

app/components/Comment/Comment.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Link } from "remix";
+import type { LinksFunction } from "remix";
+import type { Comment as CommentType } from "~/types";
+import stylesUrl from "./comment.css";
+
+export const links: LinksFunction = () => {
+  return [{ href: stylesUrl, rel: "stylesheet" }];
+};
+
+type CommentProps = {
+  comment: CommentType;
+};
+
+export default function Comment({ comment }: CommentProps) {
+  const [hidden, hide] = useState(false);
+  return (
+    <>
+      {!comment.deleted && (
+        <article className="comment">
+          <div
+            className={`meta-bar ${hidden ? "hidden" : ""}`}
+            onClick={() => hide(!hidden)}
+          >
+            <span className="meta">
+              <Link to={`/user/${comment.user}`}>{comment.user}</Link>{" "}
+              {comment.time_ago}
+            </span>
+          </div>
+
+          <div
+            className="body"
+            dangerouslySetInnerHTML={{ __html: comment.content }}
+          ></div>
+
+          {!hidden && comment.comments.length > 0 && (
+            <ul className="children">
+              {comment.comments.map((c) => (
+                <li key={c.id}>
+                  <Comment comment={c} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </article>
+      )}
+    </>
+  );
+}

app/components/Comment/comment.css

@@ -0,0 +1,46 @@
+.comment {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+html.dark .comment {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.comment .meta-bar {
+  padding: 1em 0;
+  cursor: pointer;
+  background: 100% 50% no-repeat url(/assets/icons/fold.svg);
+  background-size: 1em 1em;
+}
+.comment .hidden.meta-bar {
+  background-image: url(/assets/icons/unfold.svg);
+}
+.comment .children {
+  padding: 0 0 0 1em;
+  margin: 0;
+}
+.comment .hidden .body,
+.comment .hidden .children {
+  display: none;
+}
+@media (min-width: 720px) {
+  .comment .children {
+    padding: 0 0 0 2em;
+  }
+}
+.comment li {
+  list-style: none;
+}
+.comment .meta {
+  display: block;
+  font-size: 14px;
+  color: var(--fg-light);
+}
+.comment a {
+  color: var(--fg-light);
+}
+/* prevent crazy overflow layout bug on mobile */
+.comment .body :global(*) {
+  overflow-wrap: break-word;
+}
+.comment :global(pre) {
+  overflow-x: auto;
+}

app/components/Item/Item.tsx

@@ -1,38 +1,42 @@
 import { Link } from "remix";
+import type { LinksFunction } from "remix";
 import type { Item } from "~/types";
-import Comments from "../Comments/Comments";
+import Comment from "../Comment/Comment";
+import stylesUrl from "./item.css";
 
 type ItemProps = {
   item: Item;
 };
 
+export const links: LinksFunction = () => {
+  return [{ href: stylesUrl, rel: "stylesheet" }];
+};
+
 export default function Item({ item }: ItemProps) {
   const comments = item.comments.map((comment) => {
-    return <Comments key={comment.id} comment={comment} />;
+    return <Comment key={comment.id} comment={comment} />;
   });
   return (
-    <div className="item">
-      <div
-        className="top-matter"
-        style={{
-          borderBottom: "1em solid rgba(0,0,0,0.1)",
-          paddingBottom: "0.5rem",
-        }}
-      >
-        <h1 className="header">{item.title}</h1>
-        <small className="subheader">
-          <a href={item.url} className="link">
-            {item.domain}
-          </a>
-        </small>
-        <p className="info">
-          {item.points} by{" "}
+    <div>
+      <article className="item">
+        <a className="main-link" href={item.url}>
+          <h1>{item.title}</h1>
+          {item.domain && <small>{item.domain}</small>}
+        </a>
+
+        <p className="meta">
+          {item.points} points by{" "}
           <Link to={`/user/${item.user}`} prefetch="intent">
             {item.user}
           </Link>{" "}
           {item.time_ago}
         </p>
-      </div>
+
+        {item.content && (
+          <div dangerouslySetInnerHTML={{ __html: item.content }}></div>
+        )}
+      </article>
+
       <div className="comments">{comments}</div>
     </div>
   );

app/components/Item/item.css

@@ -0,0 +1,27 @@
+.item h1 {
+  font-weight: 500;
+}
+.item {
+  border-bottom: 1em solid rgba(0, 0, 0, 0.1);
+  margin: 0 -2em 2em -2em;
+  padding: 0 2em 2em 2em;
+}
+html.dark .item {
+  border-bottom: 1em solid rgba(255, 255, 255, 0.1);
+}
+.item .main-link {
+  display: block;
+  text-decoration: none;
+}
+.item small {
+  display: block;
+  font-size: 14px;
+}
+.item .meta {
+  font-size: 0.8em;
+  font-weight: 300;
+  color: var(--fg-light);
+}
+.item .comments > :global(.comment):first-child {
+  border-top: none;
+}

app/components/Loader/loader.css

@@ -10,7 +10,7 @@
   align-items: center;
 }
 
-:global(html).dark .loader-container {
+html.dark .loader-container {
   background-color: rgba(255, 255, 255, 0.3);
   color: var(--fg);
 }

app/root.tsx

@@ -19,15 +19,13 @@ import stylesUrl from "~/styles/global.css";
 import { links as headerLinks } from "~/components/Header/Header";
 import { links as loaderLinks } from "~/components/Loader/Loader";
 import { links as themeTogglerLinks } from "~/components/ThemeToggler/ThemeToggler";
-import { links as articleLinks } from "~/components/Article/Article";
 
 export const links: LinksFunction = () => {
   return [
     { href: stylesUrl, rel: "stylesheet" },
     ...headerLinks(),
     ...loaderLinks(),
     ...themeTogglerLinks(),
-    ...articleLinks(),
   ];
 };
 

app/routes/$list.$page.tsx

@@ -1,9 +1,8 @@
 import { json, Link, useLoaderData } from "remix";
-import type { LoaderFunction, MetaFunction } from "remix";
-
+import type { LoaderFunction, LinksFunction, MetaFunction } from "remix";
 import type { ArticleResponseType } from "~/types";
-
 import ArticleList from "~/components/ArticleList";
+import { links as articleLinks } from "~/components/Article/Article";
 import { AppTitle } from "~/constants";
 
 type LoaderData = {
@@ -40,6 +39,10 @@ export const meta: MetaFunction = ({ data }) => {
   };
 };
 
+export const links: LinksFunction = () => {
+  return [...articleLinks()];
+};
+
 export default function ListPageRoute() {
   const data = useLoaderData<LoaderData>();
 

app/routes/item.$id.tsx

@@ -1,6 +1,7 @@
 import { redirect, useLoaderData } from "remix";
-import type { LoaderFunction, MetaFunction } from "remix";
-import Item from "~/components/Item/Item";
+import type { LinksFunction, LoaderFunction, MetaFunction } from "remix";
+import Item, { links as itemLinks } from "~/components/Item/Item";
+import { links as commentLinks } from "~/components/Comment/Comment";
 import type { Item as ItemType } from "~/types";
 import { AppTitle } from "~/constants";
 
@@ -22,6 +23,10 @@ export const meta: MetaFunction = ({ data }: { data: ItemRouteLoaderData }) => {
   };
 };
 
+export const links: LinksFunction = () => {
+  return [...itemLinks(), ...commentLinks()];
+};
+
 export default function ItemRoute() {
   const { item } = useLoaderData<ItemRouteLoaderData>();
   return <Item item={item} />;

app/types/item-comment.type.ts

@@ -15,4 +15,5 @@ export type Comment = {
   level: number;
   url: string;
   comments: Comment[];
+  deleted: boolean;
 };