feat(ui): add getting started page (#69)

Design-System-Pro · Nov 5, 2024 · 616d8db · 616d8db
1 parent bb6ab9a
commit 616d8db
Show file tree

Hide file tree

Showing 18 changed files with 1,217 additions and 64 deletions.
diff --git a/apps/engine/next.config.mjs b/apps/engine/next.config.mjs
@@ -1,4 +1,5 @@
 import { withSentryConfig } from '@sentry/nextjs';
+import createMDX from '@next/mdx';
 import { fileURLToPath } from 'node:url';
 import createJiti from 'jiti';
 const jiti = createJiti(fileURLToPath(import.meta.url));
@@ -9,7 +10,8 @@ jiti('./src/env/client-env');
 const { serverEnv } = jiti('./src/env/server-env');
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const baseNextConfig = {
+  pageExtensions: ['md', 'mdx', 'ts', 'tsx'],
   images: {
     remotePatterns: [
       {
@@ -24,6 +26,21 @@ const nextConfig = {
 
   rewrites,
 
+  async redirects() {
+    return [
+      {
+        source: '/community',
+        destination: 'https://discord.gg/FQSYMapc76',
+        permanent: false,
+      },
+      {
+        source: '/feedback',
+        destination: 'https://ds-project.supahub.com',
+        permanent: false,
+      },
+    ];
+  },
+
   skipTrailingSlashRedirect: true,
 
   reactStrictMode: true,
@@ -36,7 +53,13 @@ const nextConfig = {
   typescript: { ignoreBuildErrors: true },
 };
 
-export default withSentryConfig(nextConfig, {
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+});
+
+const combinedNextConfig = withMDX(baseNextConfig);
+
+export default withSentryConfig(combinedNextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 

diff --git a/apps/engine/package.json b/apps/engine/package.json
@@ -24,6 +24,9 @@
     "@ds-project/database": "workspace:*",
     "@ds-project/email": "workspace:*",
     "@hookform/resolvers": "^3.9.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.0.2",
     "@octokit/app": "^15.1.0",
     "@octokit/auth-oauth-app": "^8.1.1",
     "@octokit/core": "^6.1.2",
@@ -72,7 +75,9 @@
     "@ds-project/typescript": "workspace:*",
     "@next/env": "^14.2.13",
     "@octokit/types": "^13.5.0",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
+    "@types/mdx": "^2.0.13",
     "@types/node": "catalog:",
     "@types/object-hash": "^3.0.6",
     "@types/react": "catalog:",

diff --git a/apps/engine/src/app/app/@connections/default.tsx b/apps/engine/src/app/app/@connections/default.tsx
@@ -1,3 +1,3 @@
-import DefaultPage from './destinations/page';
+import DefaultPage from './getting-started/default';
 
 export default DefaultPage;
diff --git a/apps/engine/src/app/app/@connections/getting-started/default.tsx b/apps/engine/src/app/app/@connections/getting-started/default.tsx
@@ -0,0 +1,12 @@
+import DefaultPage from './page';
+import DefaultLayout from './layout';
+
+const Page = () => {
+  return (
+    <DefaultLayout>
+      <DefaultPage />
+    </DefaultLayout>
+  );
+};
+
+export default Page;
diff --git a/apps/engine/src/app/app/@connections/getting-started/layout.tsx b/apps/engine/src/app/app/@connections/getting-started/layout.tsx
@@ -0,0 +1,7 @@
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg">
+      {children}
+    </div>
+  );
+}
diff --git a/apps/engine/src/app/app/@connections/getting-started/page.tsx b/apps/engine/src/app/app/@connections/getting-started/page.tsx
@@ -0,0 +1,8 @@
+import Quickstart from './quickstart/page.mdx';
+import { getMetadata } from '@/lib/metadata';
+
+export const metadata = getMetadata({ title: 'Outputs' });
+
+export default function Page() {
+  return <Quickstart />;
+}
diff --git a/apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx b/apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx
@@ -0,0 +1,18 @@
+# Quickstart
+
+Start connecting your tools
+
+## Getting Started
+
+Welcome! Follow the instructions below to learn how to connect, transform and push your Figma Variables to GitHub.
+
+### Step 1: Connect your Source
+
+1. Install the Figma Widget and connect your DS Pro account.
+2. Select the project - `Default Project` is the only option available.
+
+### Step 2: Connect your Destination
+
+1. Connect GitHub to your account or organization.
+2. Select the repositories that DS Pro should have access to.
+3. Configure the GitHub repository under Settings after the connection has been established.
diff --git a/apps/engine/src/components/app-navigation/app-navigation.tsx b/apps/engine/src/components/app-navigation/app-navigation.tsx
@@ -93,7 +93,7 @@ export function AppNavigation({
           </Link>
         </Button>
         <Button variant="ghost" size="icon" title="Discord" asChild>
-          <Link href={config.discordInviteUrl} target="_blank">
+          <Link href={config.communityInviteUrl} target="_blank">
             <Icons.DiscordLogoIcon />
           </Link>
         </Button>

diff --git a/apps/engine/src/components/banners/community-banner/community-banner.tsx b/apps/engine/src/components/banners/community-banner/community-banner.tsx
@@ -8,7 +8,7 @@ export function CommunityBanner() {
   return (
     <article
       id="community"
-      className="w-full relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
+      className="relative flex w-full flex-col gap-4 overflow-hidden rounded-md border border-zinc-600 bg-zinc-900 p-10 text-zinc-50"
     >
       <header>
         <Text size="lg">
@@ -17,7 +17,7 @@ export function CommunityBanner() {
       </header>
       <div className="flex gap-2">
         <Button asChild>
-          <Link href={config.discordInviteUrl}>
+          <Link href={config.communityInviteUrl}>
             <Icons.DiscordLogoIcon className="mr-2" /> Join our Discord
           </Link>
         </Button>
@@ -32,7 +32,7 @@ export function CommunityBanner() {
         alt=""
         width={128}
         height={97}
-        className="absolute -right-14 -bottom-12 size-80 opacity-35"
+        className="absolute -bottom-12 -right-14 size-80 opacity-35"
       />
     </article>
   );

diff --git a/apps/engine/src/components/banners/faq-banner/faq-banner.tsx b/apps/engine/src/components/banners/faq-banner/faq-banner.tsx
@@ -19,7 +19,7 @@ const items = [
         <Link href={`mailto:${config.supportEmail}`}>
           {config.supportEmail}
         </Link>{' '}
-        or join our <Link href={config.discordInviteUrl}>Discord</Link>.
+        or join our <Link href={config.communityInviteUrl}>Discord</Link>.
       </p>
     ),
   },
@@ -57,12 +57,12 @@ const items = [
           Variables into Design Tokens from Figma and commit them to GitHub for
           you.
         </p>
-        <div className="relative pb-[62.391681109185434%] h-0">
+        <div className="relative h-0 pb-[62.391681109185434%]">
           <iframe
             title="DS Pro - Synchronize Figma Variables with GitHub"
             src="https://www.loom.com/embed/3b7d0f6092874932a606b2b9e163b3cf?sid=c6b978f0-a1f5-4d5d-899d-90089726304d"
             allowFullScreen
-            className="absolute top-0 left-0 w-full h-full border-0 rounded-md"
+            className="absolute left-0 top-0 size-full rounded-md border-0"
           />
         </div>
       </div>
@@ -85,7 +85,7 @@ const items = [
 
 export function FaqBanner() {
   return (
-    <div id="faq" className="flex flex-col gap-4 items-center w-full">
+    <div id="faq" className="flex w-full flex-col items-center gap-4">
       <Text size="2xl" weight={'medium'} align={'center'}>
         <h2>Frequently asked questions</h2>
       </Text>

diff --git a/apps/engine/src/components/footer/footer.tsx b/apps/engine/src/components/footer/footer.tsx
@@ -24,7 +24,7 @@ export function Footer() {
                   </Link>
                 </Button>
                 <Button asChild mode="dark" size="icon" title="Discord">
-                  <Link href={config.discordInviteUrl}>
+                  <Link href={config.communityInviteUrl}>
                     <Icons.DiscordLogoIcon />
                   </Link>
                 </Button>

diff --git a/apps/engine/src/config.ts b/apps/engine/src/config.ts
@@ -27,9 +27,9 @@ export const config = {
   defaultGitTokensPath: '',
   defaultTargetGitBranch: 'ds-pro/sync-tokens',
   defaultCommitMessage: 'feat(tokens): [ds-pro] 💅 Sync Tokens',
-  discordInviteUrl: 'https://discord.gg/FQSYMapc76',
+  communityInviteUrl: '/community',
   figmaWidgetUrl: 'https://www.figma.com/community/widget/1415369860836124974',
-  feedbackUrl: 'https://ds-project.supahub.com',
+  feedbackUrl: '/feedback',
   githubUrl: 'https://github.com/Design-System-Pro',
   linkedinUrl: 'https://www.linkedin.com/company/design-system-pro',
   redditUrl: 'https://www.reddit.com/r/dspro',

diff --git a/apps/engine/src/mdx-components.tsx b/apps/engine/src/mdx-components.tsx
@@ -0,0 +1,8 @@
+import { Text } from '@ds-project/components';
+import type { MDXComponents } from 'mdx/types';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  };
+}
diff --git a/apps/engine/src/modules/app-layout/app-sidebar.tsx b/apps/engine/src/modules/app-layout/app-sidebar.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import {
-  cn,
+  Badge,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -13,6 +13,10 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
 } from '@ds-project/components';
 
 import {
@@ -32,19 +36,6 @@ import Link from 'next/link';
 import { AccountMenu } from './acocunt-menu';
 import { config } from '@/config';
 
-const navigationItems = [
-  {
-    title: 'GitHub',
-    url: '/app/destinations',
-    icon: LucideIcons.Github,
-  },
-  {
-    title: 'Figma',
-    url: '/app/sources',
-    icon: LucideIcons.Figma,
-  },
-];
-
 const groupItems = [
   {
     title: 'Sources',
@@ -58,7 +49,8 @@ const groupItems = [
       {
         title: 'Penpot',
         icon: PenpotLogo,
-        disabled: true,
+        notImplemented: true,
+        roadmapLink: 'https://ds-project.supahub.com/p/integration-with-penpot',
       },
     ],
   },
@@ -74,7 +66,8 @@ const groupItems = [
       {
         title: 'GitLab',
         icon: LucideIcons.Gitlab,
-        disabled: true,
+        notImplemented: true,
+        roadmapLink: 'https://ds-project.supahub.com/p/integration-with-gitlab',
       },
     ],
   },
@@ -94,6 +87,18 @@ export function AppSidebar({ email }: { email: string }) {
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Getting Started</SidebarGroupLabel>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <Link href="/app/getting-started/quickstart">
+                  <LucideIcons.Rocket /> Quickstart
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
         <SidebarGroup>
           <SidebarGroupLabel>Connections</SidebarGroupLabel>
           <SidebarMenu>
@@ -116,15 +121,27 @@ export function AppSidebar({ email }: { email: string }) {
                     <SidebarMenuSub>
                       {groupItem.items.map((subItem) => (
                         <SidebarMenuSubItem key={subItem.title}>
-                          {subItem.disabled ? (
-                            <SidebarMenuSubButton
-                              className={cn({
-                                ['opacity-55']: subItem.disabled,
-                              })}
-                            >
-                              <subItem.icon />
-                              <span>{subItem.title}</span>
-                            </SidebarMenuSubButton>
+                          {subItem.notImplemented ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <SidebarMenuSubButton
+                                  className="opacity-55"
+                                  asChild
+                                >
+                                  <Link href={subItem.roadmapLink}>
+                                    <subItem.icon />
+                                    <span>{subItem.title}</span>
+                                    <Badge variant="outline">Roadmap</Badge>
+                                  </Link>
+                                </SidebarMenuSubButton>
+                              </TooltipTrigger>
+                              <TooltipPortal>
+                                <TooltipContent>
+                                  Click on this feature to up vote on our
+                                  roadmap
+                                </TooltipContent>
+                              </TooltipPortal>
+                            </Tooltip>
                           ) : (
                             <SidebarMenuSubButton asChild>
                               <a href={subItem.url}>
@@ -157,9 +174,9 @@ export function AppSidebar({ email }: { email: string }) {
             </SidebarMenuItem>
             <SidebarMenuItem>
               <SidebarMenuButton asChild>
-                <Link href={config.discordInviteUrl} target="_blank">
+                <Link href={config.communityInviteUrl} target="_blank">
                   <Icons.DiscordLogoIcon />
-                  <span>Discord</span>
+                  <span>Community</span>
                 </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>

diff --git a/apps/engine/src/modules/app-layout/breadcrumb-nav.tsx b/apps/engine/src/modules/app-layout/breadcrumb-nav.tsx
@@ -10,26 +10,31 @@ import {
 import { useSelectedLayoutSegment } from 'next/navigation';
 
 export function BreadcrumbNav() {
-  const connectionGroup = useSelectedLayoutSegment('connections');
+  const groupKey = useSelectedLayoutSegment('connections');
 
-  if (!connectionGroup) {
-    return null;
-  }
+  const groupName = {
+    null: 'Getting Started',
+    quickstart: 'Getting Started',
+    sources: 'Sources',
+    destinations: 'Destinations',
+  }[String(groupKey)];
 
-  const connectionPage = {
+  const pageName = {
+    null: 'Quickstart',
     sources: 'Figma',
     destinations: 'GitHub',
-  }[connectionGroup];
+    quickstart: 'Quickstart',
+  }[String(groupKey)];
 
   return (
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem className="hidden capitalize md:block">
-          {connectionGroup}
+          {groupName}
         </BreadcrumbItem>
         <BreadcrumbSeparator className="hidden md:block" />
         <BreadcrumbItem>
-          <BreadcrumbPage>{connectionPage}</BreadcrumbPage>
+          <BreadcrumbPage>{pageName}</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>