diff --git a/frontend/index.html b/frontend/index.html
index e4b78ea..f07210e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
- Vite + React + TS
+ Lynx
diff --git a/frontend/src/components/pages/AddLink.tsx b/frontend/src/components/pages/AddLink.tsx
index 9379492..ba7643e 100644
--- a/frontend/src/components/pages/AddLink.tsx
+++ b/frontend/src/components/pages/AddLink.tsx
@@ -16,6 +16,7 @@ import Header from "@/components/Header";
import FeedLink from "@/types/FeedLink";
import { Link } from "react-router-dom";
import URLS from "@/lib/urls";
+import { usePageTitle } from "@/hooks/usePageTitle";
const URLParserForm = () => {
const [url, setUrl] = useState("");
@@ -23,6 +24,7 @@ const URLParserForm = () => {
const [error, setError] = useState(null);
const [createdLink, setCreatedLink] = useState(null);
const { pb } = usePocketBase();
+ usePageTitle("Add Link");
const handleSubmit = async (e: any) => {
e.preventDefault();
diff --git a/frontend/src/components/pages/ApiKeys.tsx b/frontend/src/components/pages/ApiKeys.tsx
index 3fcda45..3f904e8 100644
--- a/frontend/src/components/pages/ApiKeys.tsx
+++ b/frontend/src/components/pages/ApiKeys.tsx
@@ -40,6 +40,7 @@ import {
SortingState,
getSortedRowModel,
} from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
type ApiKey = {
id: string;
@@ -58,6 +59,7 @@ const ApiKeys: React.FC = () => {
const [sorting, setSorting] = useState([]);
const [newApiKey, setNewApiKey] = useState(null);
const [isNewKeyDialogOpen, setIsNewKeyDialogOpen] = useState(false);
+ usePageTitle("API Keys")
useEffect(() => {
fetchApiKeys();
diff --git a/frontend/src/components/pages/Cookies.tsx b/frontend/src/components/pages/Cookies.tsx
index f572f25..9185e3b 100644
--- a/frontend/src/components/pages/Cookies.tsx
+++ b/frontend/src/components/pages/Cookies.tsx
@@ -39,6 +39,7 @@ import {
SortingState,
getSortedRowModel,
} from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
type Cookie = {
id: string;
@@ -55,6 +56,7 @@ const Cookies: React.FC = () => {
const [deleteId, setDeleteId] = useState(null);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [sorting, setSorting] = useState([]);
+ usePageTitle("Cookies")
useEffect(() => {
fetchCookies();
diff --git a/frontend/src/components/pages/Feeds.tsx b/frontend/src/components/pages/Feeds.tsx
index 1f1c895..9209c07 100644
--- a/frontend/src/components/pages/Feeds.tsx
+++ b/frontend/src/components/pages/Feeds.tsx
@@ -38,6 +38,7 @@ import {
SortingState,
getSortedRowModel,
} from "@tanstack/react-table";
+import { usePageTitle } from "@/hooks/usePageTitle";
type Feed = {
id: string;
@@ -56,6 +57,7 @@ const Feeds: React.FC = () => {
const [error, setError] = useState(null);
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
const [sorting, setSorting] = useState([]);
+ usePageTitle("Feeds")
useEffect(() => {
fetchFeeds();
diff --git a/frontend/src/components/pages/Home.tsx b/frontend/src/components/pages/Home.tsx
index 54005c1..115adfb 100644
--- a/frontend/src/components/pages/Home.tsx
+++ b/frontend/src/components/pages/Home.tsx
@@ -5,8 +5,10 @@ import LinkCard, { LinkCardSkeleton } from "@/components/LinkCard";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import SearchBar, { SearchParams } from "@/components/SearchBar";
import Paginator from "@/components/Paginator";
+import { usePageTitle } from "@/hooks/usePageTitle";
const Home: React.FC = () => {
+ usePageTitle("My Feed")
const [page, setPage] = useState(1);
const [searchParams, setSearchParams] = useState({
searchText: "",
diff --git a/frontend/src/components/pages/LinkViewer.tsx b/frontend/src/components/pages/LinkViewer.tsx
index 5155532..0be0f5b 100644
--- a/frontend/src/components/pages/LinkViewer.tsx
+++ b/frontend/src/components/pages/LinkViewer.tsx
@@ -6,6 +6,7 @@ import { CalendarIcon, ClockIcon, LinkIcon, UserIcon } from "lucide-react";
import Tag from "@/types/Tag";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
+import { usePageTitle } from "@/hooks/usePageTitle";
const LinkViewer = () => {
const { id } = useParams();
@@ -20,6 +21,7 @@ const LinkViewer = () => {
}
const { result, loading, error } = useLinkViewerQuery(id, true);
+ usePageTitle(result?.title || "View Link")
if (result) {
return (
diff --git a/frontend/src/components/pages/Login.tsx b/frontend/src/components/pages/Login.tsx
index e23fdd9..6dfc127 100644
--- a/frontend/src/components/pages/Login.tsx
+++ b/frontend/src/components/pages/Login.tsx
@@ -16,6 +16,7 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
+import { usePageTitle } from "@/hooks/usePageTitle";
const Login = () => {
const [username, setUsername] = useState("");
@@ -24,6 +25,7 @@ const Login = () => {
const navigate = useNavigate();
const { pb } = usePocketBase();
const { theme } = useTheme();
+ usePageTitle("Login")
const handleSubmit = async (e: any) => {
e.preventDefault();
diff --git a/frontend/src/hooks/usePageTitle.ts b/frontend/src/hooks/usePageTitle.ts
new file mode 100644
index 0000000..b6d1bcb
--- /dev/null
+++ b/frontend/src/hooks/usePageTitle.ts
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export const usePageTitle = (title: string) => {
+ useEffect(() => {
+ const previousTitle = document.title;
+ document.title = `${title} | Lynx`;
+
+ return () => {
+ document.title = previousTitle;
+ };
+ }, [title]);
+};
\ No newline at end of file