web3.news/app/routes/_index.tsx

96 lines
3.3 KiB
TypeScript
Raw Normal View History

2023-12-17 23:57:24 +00:00
import Feed from "@/components/Feed";
import SearchBar from "@/components/SearchBar";
2023-12-18 03:18:17 +00:00
import { ApiResponse, fetchFeedData } from "@/lib/feed";
2023-12-17 23:57:24 +00:00
import * as GraphicSection from "@/components/GraphicSection";
import { ArrowIcon } from "@/components/ArrowIcon";
2023-12-18 03:18:17 +00:00
import { Article } from "@/lib/prisma";
2023-11-10 13:34:04 +00:00
2023-12-18 03:18:17 +00:00
import Logo from "@/images/lume-logo-bg.png";
import { json, LoaderFunction, redirect } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
2023-12-22 09:11:03 +00:00
import type { SiteList } from "@/types.js";
import { getAvailableSites } from "@/utils";
2023-12-27 12:19:03 +00:00
import { generateMetaTags } from "@/lib/meta.js";
import type { ServerRuntimeMetaArgs } from "@remix-run/server-runtime";
2023-12-18 03:18:17 +00:00
type LoaderData = {
2023-12-17 23:57:24 +00:00
data: ApiResponse<Article>;
2023-12-22 09:11:03 +00:00
sites: SiteList;
2023-12-17 23:57:24 +00:00
};
2023-11-22 11:59:45 +00:00
export function meta(meta: ServerRuntimeMetaArgs) {
2023-12-27 12:19:03 +00:00
const title = "web3.news - Your Community Hub for Web3 & Blockchain News";
const description =
"Explore the pulse of the Web3 and blockchain world on web3.news, a community-driven platform championing privacy, free speech, and informed collaboration. Dive into the latest in Crypto and DeFi with us.";
return [
...generateMetaTags({
title: title,
description: description,
parentMeta: meta,
}),
];
2023-12-27 12:19:03 +00:00
}
2023-12-18 03:18:17 +00:00
export let loader: LoaderFunction = async ({ request }) => {
const url = new URL(request.url);
const referer = request.headers.get("referer");
const queryParam = url.searchParams.get("q");
// Handle redirection based on referer and query parameters
if (!referer && queryParam) {
return redirect(`/search?q=${queryParam}`);
2023-11-22 11:59:45 +00:00
}
2023-12-18 03:18:17 +00:00
// Fetch your data here
2023-12-17 23:57:24 +00:00
const data = await fetchFeedData({});
2023-12-22 09:11:03 +00:00
const sites = getAvailableSites();
2023-12-18 03:18:17 +00:00
// Return the fetched data as JSON
2023-12-22 09:11:03 +00:00
return json({ data, sites });
2023-12-17 23:57:24 +00:00
};
2023-12-18 03:18:17 +00:00
export default function Index() {
2023-12-22 09:11:03 +00:00
let { data, sites } = useLoaderData<LoaderData>();
2023-11-10 13:34:04 +00:00
return (
2023-11-14 15:52:42 +00:00
<>
2023-12-22 09:11:03 +00:00
<SearchBar sites={sites} />
2023-11-15 09:35:32 +00:00
<div className="space-y-8 w-full my-10">
<div className="flex flex-row flex-wrap justify-between w-full">
<Feed
title="Latest from the community"
icon={"paper-icon"}
2023-11-22 11:59:45 +00:00
className="w-[calc(33%-20px)] max-w-md"
initialData={data.data}
/>
2023-11-15 09:35:32 +00:00
</div>
2023-12-17 23:57:24 +00:00
<GraphicSection.Root
href="https://lumeweb.com"
className="h-[100px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110"
>
2023-12-05 16:06:54 +00:00
<GraphicSection.Background>
<img
2023-12-18 03:18:17 +00:00
src={Logo}
2023-12-05 16:06:54 +00:00
className="background transition-transform duration-500 transform-gpu absolute -top-[320px] -right-10"
alt=""
aria-hidden
/>
</GraphicSection.Background>
<GraphicSection.Foreground>
<div className="mt-5 flex flex-col items-center justify-center">
<p className="text-white text-lg">
WEB3.NEWS is a project by Lume. Lets build an open, user-owned
web together.
</p>
<div className="link flex text-gray-400">
2023-12-17 23:57:24 +00:00
<span>Learn more about Lume and join our community</span>
<ArrowIcon className=" ml-2 mt-2" />
2023-12-05 16:06:54 +00:00
</div>
</div>
</GraphicSection.Foreground>
</GraphicSection.Root>
2023-11-10 13:34:04 +00:00
</div>
2023-11-14 15:52:42 +00:00
</>
2023-12-17 23:57:24 +00:00
);
}