firefly/parallel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started working on the profile pages

Browse Source
This commit is contained in:
Zyrrus
2023-06-02 23:49:18 -05:00
parent 078a127d29
commit 9d861bc1d9
6 changed files with 36 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/MDX.tsx
View File

@@ -28,7 +28,7 @@ const components = {
),
blockquote: (props: Tag<HTMLQuoteElement>) => (
<blockquote
className="rounded border-l-4 border-fg-700 pl-4 italic"
className="my-4 rounded border-l-4 border-fg-700 pl-4 italic"
{...props}
/>
),
@@ -41,17 +41,17 @@ const components = {
<hr className="my-4 rounded border-2 border-fg-700" {...props} />
),
img: (props: Tag<HTMLImageElement>) => (
<img className="max-w-full" {...props} />
<img className="my-4 max-w-full rounded" {...props} />
),
li: (props: Tag<HTMLLIElement>) => <li className="ml-4" {...props} />,
ol: (props: Tag<HTMLOListElement>) => (
<ol className="ml-4 list-decimal" {...props} />
<ol className="my-2 ml-4 list-decimal" {...props} />
),
ul: (props: Tag<HTMLUListElement>) => (
<ul className="ml-4 list-disc" {...props} />
<ul className="my-2 ml-4 list-disc" {...props} />
),
pre: (props: Tag<HTMLPreElement>) => (
<pre className="overflow-auto rounded" {...props} />
<pre className="my-4 overflow-auto rounded" {...props} />
),
strong: (props: HTMLTag) => <strong className="font-bold" {...props} />,
};

2
src/components/layouts/MainLayout.tsx
View File

@@ -5,7 +5,7 @@ export const MainLayout: React.FC<Children> = ({ children }) => {
return (
<div className="min-w-screen flex h-screen flex-row">
<SidePanel />
<main className="w-full overflow-y-scroll">{children}</main>
<main className="flex-grow overflow-y-scroll">{children}</main>
</div>
);
};

6
src/components/projects/ProjectCards.tsx
View File

@@ -89,8 +89,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
alt={title}
/>
</div>
<div className="mx-4 my-4 flex flex-grow flex-col justify-between gap-y-2 overflow-hidden overflow-ellipsis transition-all">
<label className="block overflow-x-clip overflow-ellipsis whitespace-nowrap text-left font-bold text-r-xl">
<div className="mx-4 flex flex-grow flex-col justify-between gap-y-2 overflow-hidden overflow-ellipsis transition-all">
<label className="mt-4 block overflow-x-clip overflow-ellipsis whitespace-nowrap text-left font-bold text-r-xl">
{title}
</label>
{showMore && (
@@ -100,7 +100,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
</p>
</WithScroll>
)}
<div className="flex flex-row items-center gap-x-3">
<div className="mb-4 flex flex-row items-center gap-x-3">
<ProjectLifecycleIndicator state={state} />
<p className="overflow-ellipsis">
{/* TODO: Change to time last updated */}

18
src/pages/profile/[username].tsx
View File

@@ -22,12 +22,20 @@ const Profile: NextPage<
<p>{data?.bio}</p>
</div>
<Divider className="my-11" />
<h3 className="mx-11 font-bold text-r-3xl">My Projects</h3>
<ProjectCardList projects={data?.authoredProjects} />
<h3 className="mx-11 font-bold text-r-3xl">
<h2 className="mx-11 font-bold text-r-4xl">My Projects</h2>
{data && data.authoredProjects.length > 0 ? (
<ProjectCardList projects={data?.authoredProjects} />
) : (
<p className="mx-11">There are no projects here yet.</p>
)}
<h2 className="mx-11 font-bold text-r-4xl">
Projects I{"'"}ve Worked On
</h3>
<ProjectCardList projects={data?.projects} />
</h2>
{data && data.projects.length > 0 ? (
<ProjectCardList projects={data?.projects} />
) : (
<p className="mx-11">There are no projects here yet.</p>
)}
</MainLayout>
);
};

88
src/pages/projects/[projectId].tsx
View File

@@ -57,43 +57,13 @@ const SpecificProject: NextPage<
return (
<MainLayout>
<article className="mx-11">
<article className="mx-11 max-w-4xl flex-grow">
<h1 className="mb-6 mt-8 font-bold text-primary text-r-5xl">
{data?.title}
</h1>
<MDX {...description} />
</article>
{/* {!data ? (
<p>Loading...</p>
) : (
<>
<p>{data.title}</p>
<p>{formatDate(data.createdAt)}</p>
<p>{data.description}</p>
<p>ID: {data.id}</p>
<p>State: {data.state}</p>
<div className="flex flex-row gap-x-4">
<Button
variant={{ size: "small" }}
disabled={
data.state === "PROPOSAL" || isUpdatingState || isRefetching
}
onClick={() => changeState(-1)}
>
Prev State
</Button>
<Button
variant={{ size: "small" }}
disabled={
data.state === "COMPLETE" || isUpdatingState || isRefetching
}
onClick={() => changeState(1)}
>
Next State
</Button>
</div>
</>
)} */}
{/* Right side panel */}
</MainLayout>
);
};
@@ -129,56 +99,12 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const projectId = Array.isArray(ctx.params.projectId)
? ctx.params.projectId.join("")
: ctx.params.projectId;
// const project = await ssg.projects.getProjectById.fetch({ projectId });
// const projectDescription = project?.description ?? "";
// const mdxSource = await serialize(projectDescription);
const mdxSource = await serialize(
`
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Paragraph text.
[Link](#)
> Blockquote text
Some \`inline code\` example.
---
![Image](#)
- List item 1
- List item 2
- List item 3
1. Ordered item 1
2. Ordered item 2
3. Ordered item 3
\`\`\`javascript
function greet() {
console.log("Hello, world!");
}
\`\`\`
*Emphasized* text.
**Strong** text.
`,
{ mdxOptions: { rehypePlugins: [rehypeHighlight] } }
);
const project = await ssg.projects.getProjectById.fetch({ projectId });
const projectDescription = project?.description ?? "";
const mdxSource = await serialize(projectDescription, {
mdxOptions: { rehypePlugins: [rehypeHighlight] },
});
return { props: { projectId, description: mdxSource } };
};

9
src/utils/styles/globals.css
View File

@@ -1,6 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
@@ -13,6 +11,13 @@ a {
@apply text-r-lg;
}
::selection {
@apply bg-[#504945];
}
@tailwind components;
@tailwind utilities;
/* Special */
.custom-home-bg {