Skip to content

Commit

Permalink
improve sharing
Browse files Browse the repository at this point in the history
  • Loading branch information
@georg-stone
georg-stone committed Oct 17, 2024
1 parent 5e8fb33 commit cb21ad3
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 75 deletions.
61 changes: 47 additions & 14 deletions apps/web/src/app/read/[articleUrl]/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import BackButton from "@/components/ui/back-button";
import { Button } from "@/components/ui/button";
import { ModeToggle } from "@/components/ui/dark-toggle";
import ReadHistory from "@/components/ui/read-history";
import { ShareOptions } from "@/components/ui/share-options";
import { extract } from "@extractus/article-extractor";
import { SettingsIcon } from "lucide-react";

const ArticlePage = async ({ params, searchParams }) => {
let decodedUrl;
Expand Down Expand Up @@ -74,7 +78,23 @@ const ArticlePage = async ({ params, searchParams }) => {
/>
</head>
<body>
<main
{src == "reader" && (
<header className="p-2 pl-4 pr-4 flex justify-between gap-4 items-center select-none fixed right-0 left-0 top-0 bg-white dark:bg-black">
<div className="flex gap-4 items-center">
<BackButton />
</div>
<div className="flex gap-2 items-center">
<ModeToggle />
<ShareOptions url={decodedUrl} title={title} />
<a href="/settings" className="text-black dark:text-white">
<Button variant="outline" size="icon">
<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
</Button>
</a>
</div>
</header>
)}
<article
className={
"max-w-4xl mx-auto p-4 rounded-lg mt-8 text-[18px] leading-relaxed " +
(src == "reader" ? "pt-16" : "")
Expand Down Expand Up @@ -137,7 +157,7 @@ const ArticlePage = async ({ params, searchParams }) => {
)}
</>
)}
</main>
</article>
<ReadHistory
data={{
title: title,
Expand All @@ -151,19 +171,32 @@ const ArticlePage = async ({ params, searchParams }) => {
);
} catch (err) {
return (
<div className="max-w-4xl mx-auto p-4 rounded-lg mt-12 text-[18px]">
<b>We're sorry, but we couldn't process this article.</b>
<br />
<br />
<div className="flex gap-2">
<a href={decodedUrl}>
<Button>Read on original site</Button>
</a>
<a href="/" className="text-black dark:text-white">
<Button variant="outline">Back to home</Button>
</a>
<>
<head>
<title>Couldn't process article</title>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Couldn't process article" />
<meta
property="og:description"
content="We're sorry, but we couldn't process this article."
/>
<meta property="og:image" content="/assets/poster.png" />
</head>
<div className="max-w-4xl mx-auto p-4 rounded-lg mt-12 text-[18px]">
<b>We're sorry, but we couldn't process this article.</b>
<br />
<br />
<div className="flex gap-2">
<a href={decodedUrl}>
<Button>Read on original site</Button>
</a>
<a href="/" className="text-black dark:text-white">
<Button variant="outline">Back to home</Button>
</a>
</div>
</div>
</div>
</>
);
}
};
Expand Down
63 changes: 5 additions & 58 deletions apps/web/src/app/read/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,21 @@
"use client";

import localFont from "next/font/local";
import "../globals.css";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { Button } from "@/components/ui/button";
import { ChevronLeft } from "lucide-react";
import { ModeToggle } from "@/components/ui/dark-toggle";
import { SettingsIcon } from "lucide-react";
import { ShareOptions } from "@/components/ui/share-options";
import { usePathname, useSearchParams } from "next/navigation";
import { usePathname } from "next/navigation";
import { CommandPalette } from "@/components/ui/cmd";

const geistSans = localFont({
src: "../fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "../fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});

export default function RootLayout({ children }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const src = searchParams.get("src") || "reader";
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="grid grid-rows-[50px_calc(100vh_-_50px)] h-full w-full">
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{src == "reader" && (
<header className="p-2 pl-4 pr-4 flex justify-between gap-4 items-center select-none fixed right-0 left-0 top-0 bg-white dark:bg-black">
<div className="flex gap-4 items-center">
<Button
variant="outline"
size="icon"
onClick={() => history.back()}
>
<ChevronLeft className="h-[1.2rem] w-[1.2rem]" />
</Button>
</div>
<div className="flex gap-2 items-center">
<CommandPalette />
<ModeToggle />
<ShareOptions
url={`${
atob(pathname.split("/")[2].replaceAll("-", "/")) ||
`https://feedbomb.app${pathname}`
}`}
/>
<a href="/settings" className="text-black dark:text-white">
<Button variant="outline" size="icon">
<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
</Button>
</a>
</div>
</header>
)}
<article>{children}</article>
<CommandPalette />
{children}
</ThemeProvider>
</body>
</html>
Expand Down
12 changes: 12 additions & 0 deletions apps/web/src/components/ui/back-button.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use client";

import { ChevronLeft } from "lucide-react";
import { Button } from "./button";

export default function BackButton() {
return (
<Button variant="outline" size="icon" onClick={() => history.back()}>
<ChevronLeft className="h-[1.2rem] w-[1.2rem]" />
</Button>
);
}
34 changes: 31 additions & 3 deletions apps/web/src/components/ui/share-options.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
Expand All @@ -22,6 +21,25 @@ export function ShareOptions(props) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => {
window.open(
`mailto:?subject=${encodeURIComponent(
props.title
)}&body=${encodeURIComponent(props.url)}`,
"_blank"
);
}}
>
Email
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
window.open(`sms:?body=${encodeURIComponent(props.url)}`, "_blank");
}}
>
Messages
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
window.open(
Expand All @@ -39,19 +57,29 @@ export function ShareOptions(props) {
window.open(
`https://news.ycombinator.com/submitlink?u=${encodeURIComponent(
props.url
)}`,
)}&t=${encodeURIComponent(props.title)}`,
"_blank"
);
}}
>
Hacker News
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
window.open(
`https://getpocket.com/edit?url=${props.url}&title=${props.title}`,
"_blank"
);
}}
>
Pocket
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
navigator.clipboard.writeText(props.url);
}}
>
Copy
Copy link
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
Expand Down

0 comments on commit cb21ad3

Please sign in to comment.