Update Homepage #55

apps/mdreader/app/routes/_index.tsx

@@ -1,7 +1,7 @@
-import { Markdown } from '@mdreader/markdown';
+import { Button } from '@mdreader/interface';
 import { LoaderArgs } from '@remix-run/node';
 import { V2_MetaFunction } from '@remix-run/react';
-import useFetch from '~/hooks/useFetch';
+import { Github } from 'lucide-react';
 
 export const meta: V2_MetaFunction = ({ data: { origin } }) => {
   return [
@@ -14,6 +14,18 @@ export const meta: V2_MetaFunction = ({ data: { origin } }) => {
       property: 'og:image',
       content: `${origin}/api/og?template=site&title=MD Reader`,
     },
+    {
+      property: 'twitter:image',
+      content: `${origin}/api/og?template=site&title=MD Reader`,
+    },
+    {
+      property: 'og:image:width',
+      content: '800px',
+    },
+    {
+      property: 'og:image:height',
+      content: '600px',
+    },
   ];
 };
 
@@ -22,15 +34,26 @@ export const loader = ({ request }: LoaderArgs) => ({
 });
 
 export default function MarkdownPreview() {
-  const { data: markdown, isLoading } = useFetch(
-    `https://raw.githubusercontent.com/kevenleone/mdreader/main/README.md`,
-    undefined,
-    { parseAs: 'text' }
-  );
+  return (
+    <div className="container flex flex-col justify-center overflow-hidden items-center min-h-[800px] gap-6 pb-8 pt-6 md:py-10">
+      <div className="max-w-3xl space-y-8">
+        <h1 className="text-9xl p-4 text-center font-bold from-purple-600 via-pink-600 to-blue-600 bg-gradient-to-r bg-clip-text text-transparent">
+          MD Reader
+        </h1>
+        <p className=" text-xl text-muted-foreground">
+          Effortlessly organize your favorite Markdown into 'Articles' that are
+          both easy to manage and share with others. Say goodbye to cluttered
+          notes and hello to a sleek, streamlined system that puts your ideas
+          front and center.
+        </p>
 
-  if (isLoading) {
-    return <h1>Loading...</h1>;
-  }
-
-  return <Markdown params={{ path: [], project: '' }}>{markdown}</Markdown>;
+        <div className="flex gap-3">
+          <Button>Start Explore</Button>
+          <Button variant="outline">
+            <Github className="mr-2" /> Github
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }

apps/mdreader/postcss.config.js

@@ -1,6 +1,3 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};