jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-01 11:06:37 -04:00
Code Issues Activity

Migrate to app router (#2254)

Browse Source
This commit is contained in:
Jake Jarvis
2025-02-07 11:33:38 -05:00
committed by GitHub
parent e97613dda5
commit 8aabb4a66f
179 changed files with 4095 additions and 4951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Comments/Comments.module.css Normal file
View File

@ -0,0 +1,6 @@
.comments {
margin-top: 2em;
padding-top: 2em;
border-top: 2px solid var(--colors-light);
min-height: 360px;
}

21
components/Comments/Comments.tsx
View File

@ -1,22 +1,19 @@
"use client";
import Giscus from "@giscus/react";
import clsx from "clsx";
import useTheme from "../../hooks/useTheme";
import { styled, theme } from "../../lib/styles/stitches.config";
import config from "../../lib/config";
import type { ComponentPropsWithoutRef } from "react";
import type { GiscusProps } from "@giscus/react";
const Wrapper = styled("div", {
marginTop: "2em",
paddingTop: "2em",
borderTop: `2px solid ${theme.colors.light}`,
minHeight: "360px",
});
import styles from "./Comments.module.css";
export type CommentsProps = ComponentPropsWithoutRef<typeof Wrapper> & {
export type CommentsProps = ComponentPropsWithoutRef<"div"> & {
title: string;
};
const Comments = ({ title, ...rest }: CommentsProps) => {
const Comments = ({ title, className, ...rest }: CommentsProps) => {
const { activeTheme } = useTheme();
// fail silently if giscus isn't configured
@ -27,7 +24,7 @@ const Comments = ({ title, ...rest }: CommentsProps) => {
// TODO: use custom `<Loading />` spinner component during suspense
return (
<Wrapper {...rest}>
<div className={clsx(styles.comments, className)} {...rest}>
<Giscus
repo={config.githubRepo as GiscusProps["repo"]}
repoId={config.giscusConfig.repoId}
@ -38,10 +35,10 @@ const Comments = ({ title, ...rest }: CommentsProps) => {
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
loading="eager" // still lazily loaded with react-intersection-observer
loading="lazy"
theme={activeTheme === "dark" ? activeTheme : "light"}
/>
</Wrapper>
</div>
);
};