34 | = async (
60 | context
61 | ) => {
62 | const { params } = context;
63 |
64 | // If the article ID is not provided, return a 404 page
65 | if (!params || !params.id) {
66 | return { notFound: true };
67 | }
68 |
69 | // Extract the article ID from the context params
70 | const { id } = params;
71 |
72 | try {
73 | // Fetch all Medium posts
74 | const articles = await getAllMediumPosts();
75 | // Find the article with the matching title
76 | const article = articles.find((a: SingleArticleData) => a.title === id);
77 |
78 | // If the article is not found, return a 404 page
79 | if (!article) {
80 | return { notFound: true };
81 | }
82 | // Return the article as a prop
83 | return { props: { article } };
84 | } catch (error) {
85 | // If an error occurs during the fetching process, log the error and return a 404 page
86 | console.error(error);
87 | return { notFound: true };
88 | }
89 | };
90 |
91 | export default ArticlePage;
92 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import "@/styles/globals.css";
2 | import type { AppProps } from "next/app";
3 | import {
4 | QueryClient,
5 | QueryClientConfig,
6 | QueryClientProvider,
7 | } from "@tanstack/react-query";
8 |
9 | const config: QueryClientConfig = {
10 | defaultOptions: {
11 | queries: {
12 | staleTime: 1000 * 60 * 5,
13 | },
14 | mutations: {
15 | retry: 5,
16 | retryDelay: 500,
17 | },
18 | },
19 | };
20 |
21 | const queryClient = new QueryClient(config);
22 |
23 | export default function App({ Component, pageProps }: AppProps) {
24 | return (
25 |
26 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from 'next/document'
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
8 |
9 |
37 |
88 | );
89 | }
90 |
91 | // Server-side rendering
92 | export const getServerSideProps: GetServerSideProps = async () => {
93 | try {
94 | const data = await getAllMediumPosts();
95 | return { props: { data } };
96 | } catch (error) {
97 | console.log(error);
98 | return { props: { data: [] } };
99 | }
100 | };
101 |
--------------------------------------------------------------------------------
/src/services/medium.ts:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | export const getAllMediumPosts = async () => {
4 | const href = `https://v1.nocodeapi.com/${process.env.MEDIUM_USERNAME}/medium/${process.env.MEDIUM_API_KEY}`;
5 | const { data } = await axios.get(href);
6 | return data;
7 | };
8 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/src/types/articles.ts:
--------------------------------------------------------------------------------
1 | export interface SingleArticleData {
2 | title: string;
3 | link: string;
4 | author: string;
5 | published: number;
6 | created: number;
7 | category: string[];
8 | content: string;
9 | enclosures: any[];
10 | content_encoded: string;
11 | media: Media;
12 | }
13 |
14 | export interface Media {}
15 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | },
17 | plugins: [],
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "paths": {
18 | "@/*": ["./src/*"]
19 | }
20 | },
21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
22 | "exclude": ["node_modules"]
23 | }
24 |
--------------------------------------------------------------------------------
35 |
42 |
54 |
55 | );
56 | };
57 |
58 | // Define a function to fetch the article from the server-side
59 | export const getServerSideProps: GetServerSideProps36 | {article.title || "--"} 37 |
38 |39 | {moment(article.published).format("MMM Do, YYYY")} 40 |
41 |42 |
43 | {parser(
44 | emoji.emojify(
45 | article.content.replace(
46 | /
52 |
53 | Request Failed
;
31 |
32 | // Rendering component
33 | return (
34 |
38 | {isLoading || isFetching ? (
39 |
87 | Loading...
40 | ) : ( 41 |
42 | {/* Rendering header */}
43 |
85 | )}
86 | 44 | All Medium Posts 45 |
46 | 47 | {/* Rendering articles */} 48 | {data && data.length > 0 ? ( 49 |
50 | {data.map((article: SingleArticleData, index: number) => {
51 | return (
52 |
76 | ) : (
77 | // Rendering no articles message
78 |
53 |
73 | );
74 | })}
75 |
54 | {/* Rendering article title */}
55 |
72 | 56 | {article.title} 57 |
58 | 59 | {/* Rendering article metadata */} 60 |61 | {moment(article.published).format("MMM Do YY")} 62 | 64 | router.push(`/${article.title}`) 65 | } 66 | className="custom-red-text ml-4 cursor-pointer" 67 | > 68 | Read more 69 | 70 |
71 |
79 |
83 | )}
84 | 80 | No articles yet, please check back 81 |
82 |