Skip to content

Commit 5647ef8

Browse files
maxphillipsdevmaxphillipsdev
committed
Puzzles page and slug page
1 parent 35c3946 commit 5647ef8

File tree

7 files changed

+135
-105
lines changed

7 files changed

+135
-105
lines changed

‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"trailingComma": "es5",
33
"tabWidth": 2,
4-
"semi": false,
4+
"semi": true,
55
"singleQuote": true
66
}

‎data/puzzles/graph_detect_cycle.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Graph Cycle Detection
3-
description: Given an undirected, unweighted graph with at least one edge, write a function that returns true if the graph contains a cycle, and false otherwise.
3+
desc: Given an undirected, unweighted graph with at least one edge, write a function that returns true if the graph contains a cycle, and false otherwise.
44
class: COMP2521
55
---
66

‎pages/ArticleRow.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Avatar from 'boring-avatars'
2+
import { Flex } from 'components/Flex'
3+
import { Text } from 'components/Text'
4+
import { Tag } from 'components/Tag'
5+
import { Article } from 'contentlayer/generated'
6+
import { format, parseISO } from 'date-fns'
7+
import Link from 'next/link'
8+
import Image from 'next/image'
9+
10+
export function ArticleRow(article: Article) {
11+
return (
12+
<Flex direction="row" css={{ py: '$4' }}>
13+
<Flex direction="column" justify="between" css={{ flex: 3 }}>
14+
<Flex
15+
css={{
16+
flexDirection: 'row',
17+
paddingTop: '$2',
18+
gap: '$2'
19+
}}>
20+
<Text size="label-md" css={{ color: '$slate11' }}>
21+
{format(parseISO(article.date), 'LLL d, yyy')} ⸱{' '}
22+
{article.readingTime.text}
23+
</Text>
24+
{article.tags &&
25+
article.tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}
26+
</Flex>
27+
28+
<Text
29+
size="title-md"
30+
css={{ color: '$slate12', fontWeight: '600', paddingTop: '$2' }}>
31+
<Link href={`/articles/${article.slug}`}>{article.title}</Link>
32+
</Text>
33+
<Text size="label-lg" css={{ color: '$slate12', paddingTop: '$1' }}>
34+
{article.desc}
35+
</Text>
36+
<Flex
37+
css={{
38+
flexDirection: 'row',
39+
gap: '0.75rem',
40+
alignItems: 'center',
41+
paddingTop: '$5'
42+
}}>
43+
<Avatar
44+
size={28}
45+
name={article.author}
46+
variant="beam"
47+
colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
48+
/>
49+
<Text size="label-md" css={{ color: '$slate12' }}>
50+
{article.author}
51+
</Text>
52+
</Flex>
53+
</Flex>
54+
<Flex
55+
css={{
56+
flex: 1,
57+
justifyContent: 'flex-end',
58+
overflow: 'hidden'
59+
}}>
60+
<Image
61+
src={
62+
article.coverPhoto
63+
? article.coverPhoto
64+
: '/images/defaultCoverPhoto.png'
65+
}
66+
style={{ borderRadius: '20px' }}
67+
width="300px"
68+
height="150px"
69+
objectFit="cover"
70+
alt={article.title}
71+
/>
72+
</Flex>
73+
</Flex>
74+
)
75+
}

‎pages/articles.tsx

+2-72
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import Avatar from 'boring-avatars'
21
import { Box } from 'components/Box'
32
import { Flex } from 'components/Flex'
43
import { Text } from 'components/Text'
5-
import { Tag } from 'components/Tag'
64
import { Button } from 'components/Button'
75
import ArticleCard from 'components/ArticleCard'
86
import { allArticles, Article } from 'contentlayer/generated'
9-
import { compareDesc, format, parseISO } from 'date-fns'
7+
import { compareDesc } from 'date-fns'
108
import { NextPage } from 'next'
119
import Head from 'next/head'
12-
import Link from 'next/link'
13-
import Image from 'next/image'
1410
import { useState } from 'react'
1511
import { styled } from '../stitches.config'
1612
import { MagnifyingGlass } from 'phosphor-react'
13+
import { ArticleRow } from './ArticleRow'
1714

1815
export async function getStaticProps() {
1916
const articles = allArticles.sort((a, b) => {
@@ -27,73 +24,6 @@ export async function getStaticProps() {
2724
return { props: { articles, allTags } }
2825
}
2926

30-
function ArticleRow(article: Article) {
31-
return (
32-
<Flex direction="row" css={{ py: '$4' }}>
33-
<Flex direction="column" justify="between" css={{ flex: 3 }}>
34-
<Flex
35-
css={{
36-
flexDirection: 'row',
37-
paddingTop: '$2',
38-
gap: '$2'
39-
}}>
40-
<Text size="label-md" css={{ color: '$slate11' }}>
41-
{format(parseISO(article.date), 'LLL d, yyy')} ⸱{' '}
42-
{article.readingTime.text}
43-
</Text>
44-
{article.tags &&
45-
article.tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}
46-
</Flex>
47-
48-
<Text
49-
size="title-md"
50-
css={{ color: '$slate12', fontWeight: '600', paddingTop: '$2' }}>
51-
<Link href={`/articles/${article.slug}`}>{article.title}</Link>
52-
</Text>
53-
<Text size="label-lg" css={{ color: '$slate12', paddingTop: '$1' }}>
54-
{article.desc}
55-
</Text>
56-
<Flex
57-
css={{
58-
flexDirection: 'row',
59-
gap: '0.75rem',
60-
alignItems: 'center',
61-
paddingTop: '$5'
62-
}}>
63-
<Avatar
64-
size={28}
65-
name={article.author}
66-
variant="beam"
67-
colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
68-
/>
69-
<Text size="label-md" css={{ color: '$slate12' }}>
70-
{article.author}
71-
</Text>
72-
</Flex>
73-
</Flex>
74-
<Flex
75-
css={{
76-
flex: 1,
77-
justifyContent: 'flex-end',
78-
overflow: 'hidden'
79-
}}>
80-
<Image
81-
src={
82-
article.coverPhoto
83-
? article.coverPhoto
84-
: '/images/defaultCoverPhoto.png'
85-
}
86-
style={{ borderRadius: '20px' }}
87-
width="300px"
88-
height="150px"
89-
objectFit="cover"
90-
alt={article.title}
91-
/>
92-
</Flex>
93-
</Flex>
94-
)
95-
}
96-
9727
const SearchBar = styled('input', {
9828
all: 'unset',
9929
alignItems: 'center',

‎pages/puzzles/[slug].tsx

+16-28
Original file line numberDiff line numberDiff line change
@@ -46,41 +46,29 @@ export async function getStaticProps({ params }: { params: Puzzle }) {
4646
}
4747
}
4848

49-
function ArticleHeader({ puzzle }: { puzzle: Puzzle }) {
49+
const PuzzleLayout = ({ puzzle }: { puzzle: Puzzle }) => {
50+
const MDXContent = useMDXComponent(puzzle.body.code)
51+
5052
return (
5153
<Flex
5254
css={{
53-
flexDirection: 'column',
54-
padding: '0 0 1.4rem',
55-
borderBottom: 'solid 0.5px'
55+
justifyContent: 'center',
56+
padding: '$6',
57+
flexDirection: 'column'
5658
}}>
59+
<Head>
60+
<title>{puzzle.title}</title>
61+
</Head>
5762
<Text
5863
size="headline"
59-
css={{ color: '$slate12', fontWeight: '600', paddingTop: '$2' }}>
64+
css={{
65+
color: '$slate12',
66+
fontWeight: '600',
67+
paddingTop: '$2',
68+
alignSelf: 'center'
69+
}}>
6070
{puzzle.title}
6171
</Text>
62-
<Text size="title-sm" css={{ color: '$slate12', paddingTop: '$1' }}>
63-
{puzzle.desc}
64-
</Text>
65-
<Flex
66-
css={{
67-
flexDirection: 'row',
68-
gap: '0.75rem',
69-
alignItems: 'center',
70-
paddingTop: '$5'
71-
}}></Flex>
72-
</Flex>
73-
)
74-
}
75-
76-
const ArticleLayout = ({ puzzle }: { puzzle: Puzzle }) => {
77-
const MDXContent = useMDXComponent(puzzle.body.code)
78-
79-
return (
80-
<Flex css={{ justifyContent: 'center', paddingTop: '$6' }}>
81-
<Head>
82-
<title>{puzzle.title}</title>
83-
</Head>
8472
<Box css={{ paddingTop: '$2' }}>
8573
<Text>
8674
<MDXContent components={components} />
@@ -90,4 +78,4 @@ const ArticleLayout = ({ puzzle }: { puzzle: Puzzle }) => {
9078
)
9179
}
9280

93-
export default ArticleLayout
81+
export default PuzzleLayout

‎pages/puzzles/index.tsx

+33-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,40 @@
11
import { Card } from '@modulz/design-system'
2-
import { NextPage } from 'next'
2+
import { allPuzzles } from 'contentlayer/generated'
3+
import { InferGetStaticPropsType } from 'next'
4+
import Link from 'next/link'
35

4-
const PuzzlesPage: NextPage = () => {
6+
export const getStaticProps = async () => {
7+
return {
8+
props: {
9+
puzzles: allPuzzles
10+
}
11+
}
12+
}
13+
14+
const PuzzlesPage = ({
15+
puzzles
16+
}: InferGetStaticPropsType<typeof getStaticProps>) => {
517
return (
618
<main>
7-
<Card>test</Card>
19+
<div className="title-block">
20+
<h1>Puzzles</h1>
21+
<p>
22+
A collection of puzzles we have written to help you practice for you
23+
classes!
24+
</p>
25+
</div>
26+
{puzzles?.map((puzzle) => (
27+
<Link href={`puzzles/${puzzle.slug}`} passHref key={puzzle.slug}>
28+
<Card
29+
css={{
30+
margin: '1rem',
31+
padding: '1rem'
32+
}}>
33+
<h1>{puzzle.title}</h1>
34+
<p>{puzzle.desc}</p>
35+
</Card>
36+
</Link>
37+
))}
838
</main>
939
)
1040
}

‎styles/styles.css

+7
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,10 @@ a {
2626
a:hover {
2727
color: #69a2f3;
2828
}
29+
30+
.title-block {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
}

0 commit comments

Comments
 (0)