├── .env.example
├── .eslintrc.json
├── .gitignore
├── README.md
├── components
├── ArticleList.tsx
├── BlogCardWithImage.tsx
├── Blogcard.tsx
├── Footer.tsx
├── Navbar.tsx
├── Pagination.tsx
└── Tabs.tsx
├── http
└── index.ts
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── _app.tsx
├── api
│ └── hello.ts
├── article
│ └── [slug].tsx
├── category
│ └── [category].tsx
└── index.tsx
├── postcss.config.js
├── public
├── favicon.ico
├── gitbook.svg
├── logo.png
├── pie.png
└── vercel.svg
├── styles
├── Home.module.css
└── globals.css
├── tailwind.config.js
├── tsconfig.json
├── types
└── index.ts
├── utils
└── index.ts
└── yarn.lock
/.env.example:
--------------------------------------------------------------------------------
1 | API_BASE_URL=
2 | BACKEND_API_KEY=
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 | .env
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/components/ArticleList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IArticle } from '../types';
3 | import Blogcard from './Blogcard';
4 | import BlogCardWithImage from './BlogCardWithImage';
5 |
6 | interface IPropType {
7 | articles: IArticle[];
8 | }
9 | const ArticleList = ({ articles }: IPropType) => {
10 | return (
11 |
12 | {articles.map((article, idx) => {
13 | return (
14 |
15 | {idx === 1 ? (
16 |
17 | ) : (
18 |
19 | )}
20 |
21 | );
22 | })}
23 |
11 |
12 |
13 | {article.attributes.Title}
14 |
15 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default BlogCardWithImage;
22 |
--------------------------------------------------------------------------------
/components/Blogcard.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import Link from 'next/link';
3 | import React from 'react';
4 | import { IArticle } from '../types';
5 | import { formatDate } from '../utils';
6 | interface IPropType {
7 | article: IArticle;
8 | }
9 |
10 | const Blogcard = ({ article }: IPropType) => {
11 | return (
12 |
13 |
14 |
15 | {article.attributes.Title}
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 | {article.attributes.author.data.attributes.firstname}{' '}
28 | {article.attributes.author.data.attributes.lastname} on
29 |
30 |
31 | {formatDate(article.attributes.createdAt)}
32 |
33 |
34 |
35 |
36 | {article.attributes.shortDescription.slice(0, 250)}{' '}
37 | {article.attributes.shortDescription.length > 250 ? '...' : ''}
38 |
39 |
39 |
46 |
53 |
54 | );
55 | };
56 |
57 | export default Pagination;
58 |
--------------------------------------------------------------------------------
/components/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import { useRouter } from 'next/router';
3 | import React from 'react';
4 | import { ICategory } from '../types';
5 |
6 | interface IPropType {
7 | categories: ICategory[];
8 | handleOnSearch: (query: string) => void;
9 | }
10 | const Tabs = ({ categories, handleOnSearch }: IPropType) => {
11 | const router = useRouter();
12 |
13 | const isActiveLink = (category: ICategory) => {
14 | return category.attributes.Slug === router.query.category;
15 | };
16 |
17 | return (
18 |
19 |
20 | -
29 | Recent
30 |
31 | {categories.map((category) => {
32 | return (
33 | -
43 |
45 | {category.attributes.Title}
46 |
47 |
48 | );
49 | })}
50 |
51 |
52 |
58 |
handleOnSearch(e.target.value)}
60 | type="text"
61 | placeholder="Search"
62 | className="outline-none px-2 py-1 ml-1"
63 | />
64 |
65 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
22 | export default MyApp;
23 |
--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 |
4 | type Data = {
5 | name: string
6 | }
7 |
8 | export default function handler(
9 | req: NextApiRequest,
10 | res: NextApiResponse
11 | ) {
12 | res.status(200).json({ name: 'John Doe' })
13 | }
14 |
--------------------------------------------------------------------------------
/pages/article/[slug].tsx:
--------------------------------------------------------------------------------
1 | import { AxiosResponse } from 'axios';
2 | import React from 'react';
3 | import qs from 'qs';
4 | import Image from 'next/image';
5 | import { formatDate, serializeMarkdown } from '../../utils';
6 | import { fetchArticleBySlug } from '../../http';
7 | import { IArticle, ICollectionResponse } from '../../types';
8 | import { GetServerSideProps } from 'next';
9 | import Head from 'next/head';
10 | import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
11 |
12 | interface IPropType {
13 | article: IArticle;
14 | notFound?: boolean;
15 | }
16 |
17 | const slug = ({ article, notFound = false }: IPropType) => {
18 | return (
19 | <>
20 |
21 | {article.attributes.Title}
22 |
26 |
27 |
28 |
29 |
30 |
31 | {article.attributes.Title}
32 |
33 |
34 |
35 |
40 |
41 |
42 | {
43 | article.attributes.author.data.attributes
44 | .firstname
45 | }{' '}
46 | {article.attributes.author.data.attributes.lastname}{' '}
47 | on
48 |
49 | {formatDate(article.attributes.createdAt)}
50 |
51 |
52 |
53 |
54 |
59 |
63 |
64 |
65 |
147 |
40 |
41 |
Coder's Blog Homepage
42 |
46 |
47 |
48 |
52 |
53 |
54 |