├── .env.example
├── app
    ├── globals.css
    ├── favicon.ico
    ├── actions.ts
    ├── layout.tsx
    ├── page.tsx
    └── api
    │   └── podcast
    │       └── route.js
├── public
    └── images
    │   └── podcast.jpeg
├── next.config.mjs
├── postcss.config.mjs
├── tailwind.config.ts
├── utils
    └── types.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── components
    ├── footer.tsx
    └── story.tsx
└── README.md


/.env.example:
--------------------------------------------------------------------------------
1 |  UPSTASH_REDIS_REST_URL=
2 |  UPSTASH_REDIS_REST_TOKEN=


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/upstash/radio-hackernews-web/master/app/favicon.ico


--------------------------------------------------------------------------------
/public/images/podcast.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/upstash/radio-hackernews-web/master/public/images/podcast.jpeg


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       fontFamily: {
11 |         sans: ["var(--font-inter)"],
12 |       },
13 |     },
14 |   },
15 |   plugins: [],
16 | };
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/utils/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Story {
 2 |   id: string;
 3 |   title: string;
 4 |   url: string;
 5 |   score: number;
 6 |   summaryAudioDuration: number;
 7 |   summaryAudio: string;
 8 |   readableTime: string; // Added this field
 9 | }
10 | 
11 | export enum ResultCode {
12 |   Success = "SUCCESS",
13 |   UnknownError = "UNKNOWN_ERROR",
14 | }
15 | 
16 | export interface Result {
17 |   code: ResultCode;
18 |   data: Story[];
19 | }
20 | 


--------------------------------------------------------------------------------
/app/actions.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { Redis } from "@upstash/redis";
 4 | import { Result, ResultCode } from "@/utils/types";
 5 | 
 6 | const redis = Redis.fromEnv();
 7 | 
 8 | export async function getTopStories(): Promise<Result> {
 9 |   try {
10 |     const data: [] = await redis.zrange("stories", 0, 50, { rev: true });
11 | 
12 |     return {
13 |       code: ResultCode.Success,
14 |       data,
15 |     };
16 |   } catch (error) {
17 |     return { code: ResultCode.UnknownError, data: [] };
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.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 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | .idea
23 | 
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | 
29 | # local env files
30 | .env*.local
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | import Footer from "@/components/footer";
 5 | 
 6 | const defaultFont = Inter({
 7 |   variable: "--font-inter",
 8 |   subsets: ["latin"],
 9 | });
10 | 
11 | export const metadata: Metadata = {
12 |   title: "Radio Hackernews",
13 |   description:
14 |     "Audio Recap of Top Hackernews Stories - Open Source Project by Upstash",
15 | };
16 | 
17 | export default function RootLayout({
18 |   children,
19 | }: Readonly<{
20 |   children: React.ReactNode;
21 | }>) {
22 |   return (
23 |     <html lang="en" className={`${defaultFont.variable}`}>
24 |       <body className="antialiased text-sm md:text-base">
25 |         {children}
26 |         <Footer />
27 |       </body>
28 |     </html>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "bundler",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "incremental": true,
19 |     "baseUrl": ".",
20 |     "plugins": [
21 |       {
22 |         "name": "next"
23 |       }
24 |     ],
25 |     "paths": {
26 |       "@/*": [
27 |         "./*"
28 |       ]
29 |     }
30 |   },
31 |   "include": [
32 |     "next-env.d.ts",
33 |     "**/*.ts",
34 |     "**/*.tsx",
35 |     ".next/types/**/*.ts"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "radio-hackernews-web",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@tabler/icons-react": "^3.19.0",
13 |     "@types/node": "^20",
14 |     "@types/react": "^18",
15 |     "@types/react-dom": "^18",
16 |     "@upstash/redis": "^1.34.2",
17 |     "@wavesurfer/react": "^1.0.7",
18 |     "clsx": "^2.1.1",
19 |     "next": "14.2.35",
20 |     "postcss": "^8",
21 |     "prettier": "^3.3.3",
22 |     "react": "^18",
23 |     "react-copy-to-clipboard": "^5.1.0",
24 |     "react-dom": "^18",
25 |     "tailwind-merge": "^2.5.3",
26 |     "tailwindcss": "^3.4.1",
27 |     "typescript": "^5",
28 |     "wavesurfer.js": "^7.8.6"
29 |   },
30 |   "devDependencies": {
31 |     "@types/react-copy-to-clipboard": "^5.0.7"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | export default function Footer() {
 2 |   return (
 3 |     <footer className="fixed flex items-center justify-center z-10 inset-x-0 p-6 bottom-0">
 4 |       <span className="absolute pointer-events-none inset-x-0 bottom-0 h-[230px] from-40% -z-10 bg-gradient-to-t from-white to-transparent" />
 5 | 
 6 |       <div className="max-w-screen-sm w-full rounded-lg font-mono bg-zinc-800 p-4 text-center text-white">
 7 |         <p>
 8 |           Open source project on{" "}
 9 |           <a
10 |             href="https://github.com/upstash/radio-hackernews"
11 |             target="_blank"
12 |             className="underline"
13 |           >
14 |             GitHub
15 |           </a>
16 |         </p>
17 |         <p>
18 |           Powered by{" "}
19 |           <a
20 |             href="https://upstash.com/docs/workflow/getstarted"
21 |             target="_blank"
22 |             className="underline"
23 |           >
24 |             Upstash Workflow
25 |           </a>
26 |           ,{" "}
27 |           <a
28 |             href="https://elevenlabs.io/"
29 |             target="_blank"
30 |             className="underline"
31 |           >
32 |             ElevenLabs
33 |           </a>
34 |           ,{" "}
35 |           <a
36 |             href="https://www.tigrisdata.com/"
37 |             target="_blank"
38 |             className="underline"
39 |           >
40 |             Tigris Data
41 |           </a>
42 |         </p>
43 |       </div>
44 |     </footer>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/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 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | 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.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect, useState } from "react";
 4 | import StoryComp from "@/components/story";
 5 | import { getTopStories } from "@/app/actions";
 6 | import { Story } from "@/utils/types";
 7 | import { IconCheck, IconClipboard } from "@tabler/icons-react";
 8 | import { CopyToClipboard } from "react-copy-to-clipboard";
 9 | import clsx from "clsx";
10 | 
11 | export default function Home() {
12 |   const [copy, isCopy] = useState<boolean>(false);
13 |   const [activeId, setActiveId] = useState<string | undefined>(undefined);
14 |   const [stories, setStories] = useState<Story[]>([]);
15 |   const [isLoading, setIsLoading] = useState(true);
16 |   const [error, setError] = useState<string | null>(null);
17 | 
18 |   async function fetchTopStories() {
19 |     try {
20 |       const { data } = await getTopStories();
21 |       setStories(data);
22 |     } catch (error) {
23 |       setError("Failed to load stories. Please try again later.");
24 |     } finally {
25 |       setIsLoading(false);
26 |     }
27 |   }
28 | 
29 |   useEffect(() => {
30 |     fetchTopStories();
31 |   }, []);
32 | 
33 |   useEffect(() => {
34 |     if (copy) {
35 |       const id = setTimeout(() => {
36 |         isCopy(false);
37 |       }, 2000);
38 | 
39 |       return () => clearTimeout(id);
40 |     }
41 |   }, [copy]);
42 | 
43 |   return (
44 |     <main className="max-w-screen-sm mx-auto px-8 py-16">
45 |       <h1 className="text-3xl font-bold">Radio Hackernews</h1>
46 |       <h2 className="text-xl opacity-60">
47 |         Audio Recap of Top Hackernews Stories
48 |       </h2>
49 | 
50 |       <CopyToClipboard
51 |         text="https://radio-hackernews-web.vercel.app/api/podcast"
52 |         onCopy={() => isCopy(true)}
53 |       >
54 |         <button
55 |           className={clsx(
56 |             "inline-flex gap-2 font-medium items-center mt-4 border",
57 |             "hover:bg-emerald-50 text-sm px-3 py-2 rounded-lg",
58 |           )}
59 |         >
60 |           Copy Podcast Feed URL{" "}
61 |           {copy ? (
62 |             <IconCheck size={16} className="text-emerald-600" />
63 |           ) : (
64 |             <IconClipboard size={16} />
65 |           )}
66 |         </button>
67 |       </CopyToClipboard>
68 | 
69 |       <div className="mt-8 grid gap-6">
70 |         {stories.map((story) =>
71 |           story.summaryAudio ? (
72 |             <StoryComp
73 |               key={story.id}
74 |               {...story}
75 |               activeId={activeId}
76 |               onChangeActiveId={setActiveId}
77 |             />
78 |           ) : null,
79 |         )}
80 |       </div>
81 |     </main>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/app/api/podcast/route.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import { Redis } from "@upstash/redis";
 3 | import {getTopStories} from "../../actions";
 4 | 
 5 | const redis = Redis.fromEnv();
 6 | 
 7 | export async function GET() {
 8 |     try {
 9 |         // Fetch stories from Redis
10 |         let { data } = await getTopStories();
11 |         data = data.filter(
12 |             (story) => story.summaryAudio && story.summaryAudio.length > 0
13 |         );
14 |         // Build the RSS feed
15 |         const feed = `<?xml version="1.0" encoding="UTF-8"?>
16 | <rss version="2.0" 
17 |     xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
18 |     xmlns:content="http://purl.org/rss/1.0/modules/content/"
19 |     xmlns:atom="http://www.w3.org/2005/Atom">
20 |   <channel>
21 |     <title>Radio Hackernews</title>
22 |     <description>Recap of the top hackernews stories of the day</description>
23 |     <link>https://radio-hackernews-web.vercel.app/</link>
24 |     <language>en-us</language>
25 |     <copyright>Copyright ${new Date().getFullYear()}</copyright>
26 |     
27 |     <atom:link href="https://radio-hackernews-web.vercel.app/api/podcast" rel="self" type="application/rss+xml"/>
28 |     
29 |     <itunes:author>Enes Akar</itunes:author>
30 |     <itunes:summary>Recap of the top hackernews stories of the day</itunes:summary>
31 |     <itunes:owner>
32 |       <itunes:name>Enes Akar</itunes:name>
33 |       <itunes:email>your.email@example.com</itunes:email>
34 |     </itunes:owner>
35 |     <itunes:explicit>false</itunes:explicit>
36 |     <itunes:category text="Technology"/>
37 |     <itunes:image href="https://radio-hackernews-web.vercel.app/images/podcast.jpeg"/>
38 |     
39 |     ${data
40 |             .map(
41 |                 (story) => `
42 |     <item>
43 |       <title>${escapeXml(story.title)}</title>
44 |       <description>${escapeXml(story.title)}</description>
45 |       <itunes:summary>${escapeXml(story.title)}</itunes:summary>
46 |       <enclosure 
47 |         url="${escapeXml(story.summaryAudio)}"
48 |         length="0"
49 |         type="audio/mpeg"
50 |       />
51 |       <guid isPermaLink="false">${story.id}</guid>
52 |       <pubDate>${new Date(story.readableTime).toUTCString()}</pubDate>
53 |       <link>${escapeXml(story.url)}</link>
54 |       <itunes:duration>${Math.round(story.summaryAudioDuration)}</itunes:duration>
55 |     </item>`
56 |             )
57 |             .join("\n")}
58 |   </channel>
59 | </rss>`;
60 | 
61 |         // Return the feed with proper content type
62 |         return new NextResponse(feed, {
63 |             headers: {
64 |                 "Content-Type": "application/xml",
65 |                 "Cache-Control": "s-maxage=3600, stale-while-revalidate",
66 |             },
67 |         });
68 |     } catch (error) {
69 |         console.error("Error generating podcast feed:", error);
70 |         return NextResponse.json(
71 |             { error: "Failed to generate podcast feed" },
72 |             { status: 500 }
73 |         );
74 |     }
75 | }
76 | 
77 | // Helper function to escape XML special characters
78 | function escapeXml(unsafe) {
79 |     return unsafe
80 |         .replace(/&/g, "&amp;")
81 |         .replace(/</g, "&lt;")
82 |         .replace(/>/g, "&gt;")
83 |         .replace(/"/g, "&quot;")
84 |         .replace(/'/g, "&apos;");
85 | }
86 | 


--------------------------------------------------------------------------------
/components/story.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef } from "react";
  2 | import { useWavesurfer } from "@wavesurfer/react";
  3 | import colors from "tailwindcss/colors";
  4 | import { Story } from "@/utils/types";
  5 | import {
  6 |   IconPlayerPauseFilled,
  7 |   IconPlayerPlayFilled,
  8 | } from "@tabler/icons-react";
  9 | import clsx from "clsx";
 10 | 
 11 | const StoryComp = ({
 12 |   id,
 13 |   title,
 14 |   url,
 15 |   score,
 16 |   summaryAudio,
 17 |   summaryAudioDuration,
 18 |   readableTime,
 19 |   onChangeActiveId = () => {},
 20 |   activeId,
 21 | }: Story & {
 22 |   onChangeActiveId: (id: string) => void;
 23 |   activeId: string | undefined;
 24 | }) => {
 25 |   console.log(url);
 26 |   const containerRef = useRef(null);
 27 | 
 28 |   const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
 29 |     container: containerRef,
 30 |     duration: summaryAudioDuration,
 31 |     url: summaryAudio,
 32 |     waveColor: colors.zinc["300"],
 33 |     progressColor: colors.emerald["500"],
 34 |     cursorColor: colors.emerald["500"],
 35 |     cursorWidth: 2,
 36 |     height: 32,
 37 |     barWidth: 2,
 38 |     barGap: 3,
 39 |     barRadius: 4,
 40 |     normalize: true,
 41 |   });
 42 | 
 43 |   useEffect(() => {
 44 |     if (activeId !== id) {
 45 |       onPause();
 46 |     }
 47 |   }, [activeId]);
 48 | 
 49 |   const onPause = () => {
 50 |     if (!wavesurfer) return;
 51 |     wavesurfer.pause();
 52 |   };
 53 | 
 54 |   const onPlayPause = () => {
 55 |     if (!wavesurfer) return;
 56 |     onChangeActiveId(id);
 57 |     wavesurfer.playPause();
 58 |   };
 59 | 
 60 |   const shortDate = new Date(readableTime).toLocaleDateString("en-US", {
 61 |     month: "short",
 62 |     day: "2-digit",
 63 |     year: "2-digit",
 64 |   });
 65 | 
 66 |   return (
 67 |     <article
 68 |       className={clsx(
 69 |         "w-full border rounded-xl p-4 sm:p-6 grid gap-2 shadow-sm",
 70 |         isPlaying && "bg-emerald-50 text-emerald-900",
 71 |       )}
 72 |     >
 73 |       <h4 className={"font-bold text-balance"}>
 74 |         <a
 75 |             className="ml-auto"
 76 |             href={url}
 77 |             target="_blank"
 78 |             rel="noopener noreferrer"
 79 |         >{title}
 80 |         </a>
 81 |         </h4>
 82 | 
 83 |       <div ref={containerRef}/>
 84 | 
 85 |       <div className="flex items-center gap-2 text-sm font-mono">
 86 |         <button
 87 |             className={clsx(
 88 |                 "-ml-1 border flex items-center justify-center rounded-full size-7",
 89 |                 isPlaying ? "bg-emerald-500 text-white border-current" : "",
 90 |             )}
 91 |             onClick={onPlayPause}
 92 |         >
 93 |           {isPlaying ? (
 94 |               <IconPlayerPauseFilled size={16}/>
 95 |           ) : (
 96 |               <IconPlayerPlayFilled size={16}/>
 97 |           )}
 98 |         </button>
 99 | 
100 |         <span className="opacity-60">Date: {shortDate}</span>
101 |         {/*<span className="opacity-60">Duration: {summaryAudioDuration} seconds</span>*/}
102 |         <a
103 |             className="ml-auto opacity-60"
104 |             href={url}
105 |             target="_blank"
106 |             rel="noopener noreferrer"
107 |         >
108 |           Points: {score}
109 |         </a>
110 |       </div>
111 |     </article>
112 |   );
113 | };
114 | 
115 | export default StoryComp;
116 | 


--------------------------------------------------------------------------------