refactor(docs): card component, API

krystxf · Oct 6, 2024 · 26b491c · 26b491c
1 parent 7b4cc1a
commit 26b491c
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,11 @@
 
 ![Apple watch screenshots](https://github.com/krystxf/metro-now/assets/48121710/3ce8f583-c260-4588-b63d-63ecadd22333)
 
+## API
+
+-   [Swagger](https://api.metronow.dev/)
+-   [GraphQL](https://api.metronow.dev/graphql)
+
 # Setup
 
 ## Backend
@@ -10,7 +15,7 @@
 cd backend-nest
 
 cp .env.example .env
-vim .env # update you .envs
+vim .env # update your .envs
 
 pnpm i
 pnpm dev

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -1,3 +1,5 @@
+import { Card } from "@/components/Card";
+import { GITHUB, GRAPHQL, SWAGGER } from "@/const";
 import Image from "next/image";
 
 const LandingPage = () => {
@@ -11,14 +13,6 @@ const LandingPage = () => {
                     Get a real-time overview of metro departures from the
                     nearest stop in Prague
                 </p>
-                <h2>Coming to App Store soon</h2>
-                <Image
-                    src="/download-on-appstore.svg"
-                    alt="Download on App Store badge"
-                    width={150}
-                    height={50}
-                    priority
-                />
             </div>
             <Image
                 src="/metro-now-watch.png"
@@ -28,66 +22,61 @@ const LandingPage = () => {
                 priority
             />
 
-            <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-7xl lg:grid-cols-3 lg:text-left">
-                <a
-                    href="https://github.com/krystxf/metro-now"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50"
-                    target="_blank"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Source code
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-sm opacity-50">
-                        Every line of code for this project is available on
-                        GitHub.
-                    </p>
-                </a>
+            <div className="mb-32 gap-4 grid text-center lg:mb-0 lg:w-full lg:max-w-7xl lg:grid-cols-3 lg:text-left">
+                <Card className="group">
+                    <a href={GITHUB} className="h-full" target="_blank">
+                        <Card.Title>
+                            Source code
+                            <Card.Arrow />
+                        </Card.Title>
 
-                <a
-                    href="/docs"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Documentation
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-sm opacity-50">
-                        Learn how to use the API and what is under the hood.
-                    </p>
-                </a>
+                        <Card.Content className="opacity-50">
+                            Every line of code for this project is available on
+                            GitHub.
+                        </Card.Content>
+                    </a>
+                </Card>
 
-                <div className="rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50">
-                    <h2 className="mb-3 text-2xl font-semibold">Legal</h2>
-                    <a
-                        href="/docs/privacy-policy"
-                        className="px-5"
-                        target="_blank"
-                    >
-                        <h3 className="group text-sm font-semibold">
-                            Privacy policy
-                            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                                -&gt;
-                            </span>
-                        </h3>
+                <Card>
+                    <a href="/docs" className="group">
+                        <Card.Title>
+                            Documentation <Card.Arrow />
+                        </Card.Title>
                     </a>
-                    <a
-                        href="/docs/terms-and-conditions"
-                        className="px-5"
-                        target="_blank"
-                    >
-                        <h3 className="group text-sm font-semibold">
+                    <Card.Content>
+                        <Card.Content.Link href={SWAGGER} target="_blank">
+                            REST API
+                            <Card.Arrow />
+                        </Card.Content.Link>
+
+                        <Card.Content.Link href={GRAPHQL} target="_blank">
+                            GrapQL
+                            <Card.Arrow />
+                        </Card.Content.Link>
+                    </Card.Content>
+                </Card>
+
+                <Card>
+                    <Card.Title>Legal</Card.Title>
+
+                    <Card.Content>
+                        <Card.Content.Link
+                            href="/docs/privacy-policy"
+                            target="_blank"
+                        >
+                            Privacy policy
+                            <Card.Arrow />
+                        </Card.Content.Link>
+
+                        <Card.Content.Link
+                            href="/docs/terms-and-conditions"
+                            target="_blank"
+                        >
                             Terms & conditions
-                            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                                -&gt;
-                            </span>
-                        </h3>
-                    </a>
-                </div>
+                            <Card.Arrow />
+                        </Card.Content.Link>
+                    </Card.Content>
+                </Card>
             </div>
         </main>
     );

diff --git a/docs/src/app/robots.ts b/docs/src/app/robots.ts
@@ -1,4 +1,4 @@
-import { HOMEPAGE } from "@/utils/const";
+import { HOMEPAGE } from "@/const";
 import type { MetadataRoute } from "next";
 
 const robots = (): MetadataRoute.Robots => {

diff --git a/docs/src/app/sitemap.ts b/docs/src/app/sitemap.ts
@@ -1,4 +1,4 @@
-import { HOMEPAGE } from "@/utils/const";
+import { HOMEPAGE } from "@/const";
 import type { MetadataRoute } from "next";
 
 const pages = [

diff --git a/docs/src/components/Card/Card.tsx b/docs/src/components/Card/Card.tsx
@@ -0,0 +1,16 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const Card = (props: Props) => {
+    const { children, className, ...rest } = props;
+
+    return (
+        <div
+            className={`rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50 ${className}`}
+            {...rest}
+        >
+            {children}
+        </div>
+    );
+};
diff --git a/docs/src/components/Card/CardArrow.tsx b/docs/src/components/Card/CardArrow.tsx
@@ -0,0 +1,9 @@
+export const CardArrow = () => {
+    return (
+        <span className="mb-3 font-semibold">
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+                -&gt;
+            </span>
+        </span>
+    );
+};
diff --git a/docs/src/components/Card/CardContent.tsx b/docs/src/components/Card/CardContent.tsx
@@ -0,0 +1,16 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLParagraphElement>,
+    HTMLParagraphElement
+>;
+
+export const CardContent = (props: Props) => {
+    const { children, className, ...rest } = props;
+
+    return (
+        <div className={`m-0 max-w-[30ch] text-sm ${className}`} {...rest}>
+            {children}
+        </div>
+    );
+};
diff --git a/docs/src/components/Card/CardContentLink.tsx b/docs/src/components/Card/CardContentLink.tsx
@@ -0,0 +1,16 @@
+import type { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+
+type Props = DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+>;
+
+export const CardContentLink = (props: Props) => {
+    const { children, className, ...rest } = props;
+
+    return (
+        <a className={`px-5 ${className}`} {...rest}>
+            <div className="group text-sm font-semibold">{children}</div>
+        </a>
+    );
+};
diff --git a/docs/src/components/Card/CardTitle.tsx b/docs/src/components/Card/CardTitle.tsx
@@ -0,0 +1,16 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+>;
+
+export const CardTitle = (props: Props) => {
+    const { children, className, ...rest } = props;
+
+    return (
+        <span className={`mb-3 text-2xl font-semibold ${className}`} {...rest}>
+            {children}
+        </span>
+    );
+};
diff --git a/docs/src/components/Card/index.ts b/docs/src/components/Card/index.ts
@@ -0,0 +1,13 @@
+import { Card as _Card } from "@/components/Card/Card";
+import { CardTitle } from "@/components/Card/CardTitle";
+import { CardArrow } from "@/components/Card/CardArrow";
+import { CardContent } from "@/components/Card/CardContent";
+import { CardContentLink } from "@/components/Card/CardContentLink";
+
+export const Card = Object.assign(_Card, {
+    Title: CardTitle,
+    Arrow: CardArrow,
+    Content: Object.assign(CardContent, {
+        Link: CardContentLink,
+    }),
+});
diff --git a/docs/src/const.ts b/docs/src/const.ts
@@ -0,0 +1,6 @@
+export const HOMEPAGE = "https://metro-now.vercel.app";
+
+export const GITHUB = "https://github.com/krystxf/metro-now";
+
+export const SWAGGER = "https://api.metronow.dev/";
+export const GRAPHQL = "https://api.metronow.dev/graphql";
diff --git a/docs/src/pages/_meta.json b/docs/src/pages/_meta.json
@@ -7,7 +7,7 @@
     "api": {
         "title": "API",
         "type": "page",
-        "href": "/docs/rest-api"
+        "href": "/docs/api"
     },
     "legal": {
         "title": "Legal",

diff --git a/docs/src/pages/docs/_meta.json b/docs/src/pages/docs/_meta.json
@@ -3,7 +3,7 @@
     "---": {
         "type": "separator"
     },
-    "rest-api": "REST API",
+    "api": "API",
     "backend": "Backend",
     "-- Legal": {
         "type": "separator",

diff --git a/docs/src/pages/docs/api.mdx b/docs/src/pages/docs/api.mdx
@@ -0,0 +1,4 @@
+# API
+
+-   [Swagger (REST API)](https://api.metronow.dev/)
+-   [GraphQL](https://api.metronow.dev/graphql)
diff --git a/docs/src/pages/docs/rest-api.mdx b/docs/src/pages/docs/rest-api.mdx
diff --git a/docs/src/utils/const.ts b/docs/src/utils/const.ts
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -1,10 +1,11 @@
+import { GITHUB } from "@/const";
 import React from "react";
 
 const themeConfig = {
     logo: <strong>🚇 metro-now</strong>,
-    docsRepositoryBase: "https://github.com/krystxf/metro-now/tree/main/docs",
+    docsRepositoryBase: `${GITHUB}/tree/main/docs`,
     project: {
-        link: "https://github.com/krystxf/metro-now",
+        link: GITHUB,
     },
     editLink: {
         text: "Edit this page on GitHub →",