From d72f5c2111ce2430119ce4bc7a3e0fc34bf98bc3 Mon Sep 17 00:00:00 2001 From: Lars Hampe Date: Wed, 30 Oct 2024 23:02:15 +0100 Subject: [PATCH] feat(app): implement cli page with download and example --- apps/app/public/apple.svg | 12 ++ apps/app/public/linux.svg | 6 + apps/app/public/windows.svg | 11 ++ .../components/AccessToken/Table/Columns.tsx | 3 +- .../AccessToken/Table/DataTable.tsx | 5 +- apps/app/src/components/SidebarSettings.tsx | 96 ---------------- apps/app/src/components/SidebarUser.tsx | 10 +- apps/app/src/routeTree.gen.ts | 25 ++++ apps/app/src/routes/cli.lazy.tsx | 107 ++++++++++++++++++ apps/cli/src/utils/arguments.ts | 4 +- 10 files changed, 178 insertions(+), 101 deletions(-) create mode 100644 apps/app/public/apple.svg create mode 100644 apps/app/public/linux.svg create mode 100644 apps/app/public/windows.svg delete mode 100644 apps/app/src/components/SidebarSettings.tsx create mode 100644 apps/app/src/routes/cli.lazy.tsx diff --git a/apps/app/public/apple.svg b/apps/app/public/apple.svg new file mode 100644 index 0000000..717e17d --- /dev/null +++ b/apps/app/public/apple.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/app/public/linux.svg b/apps/app/public/linux.svg new file mode 100644 index 0000000..02d7b8b --- /dev/null +++ b/apps/app/public/linux.svg @@ -0,0 +1,6 @@ + + + +linux + + \ No newline at end of file diff --git a/apps/app/public/windows.svg b/apps/app/public/windows.svg new file mode 100644 index 0000000..58ba78a --- /dev/null +++ b/apps/app/public/windows.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/apps/app/src/components/AccessToken/Table/Columns.tsx b/apps/app/src/components/AccessToken/Table/Columns.tsx index f61303c..467d02a 100644 --- a/apps/app/src/components/AccessToken/Table/Columns.tsx +++ b/apps/app/src/components/AccessToken/Table/Columns.tsx @@ -29,7 +29,8 @@ export const AccessTokenColumns: ColumnDef< { accessorKey: 'id', header: '', - size: 10, + size: 20, + maxSize: 20, cell: (props) => , }, ] diff --git a/apps/app/src/components/AccessToken/Table/DataTable.tsx b/apps/app/src/components/AccessToken/Table/DataTable.tsx index be1a44a..6d947d3 100644 --- a/apps/app/src/components/AccessToken/Table/DataTable.tsx +++ b/apps/app/src/components/AccessToken/Table/DataTable.tsx @@ -63,7 +63,10 @@ export function DataTable({ data-state={row.getIsSelected() && 'selected'} > {row.getVisibleCells().map((cell) => ( - + {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} diff --git a/apps/app/src/components/SidebarSettings.tsx b/apps/app/src/components/SidebarSettings.tsx deleted file mode 100644 index 0e781dd..0000000 --- a/apps/app/src/components/SidebarSettings.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { ChevronsUpDown } from 'lucide-react' - -import { - Avatar, - AvatarFallback, - AvatarImage, - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - useSidebar, -} from '@boring.tools/ui' -import { SignOutButton, useUser } from '@clerk/clerk-react' -import { Link } from '@tanstack/react-router' - -export function SidebarUser() { - const { isMobile } = useSidebar() - const { user } = useUser() - - return ( - - - - - - - - CN - -
- {user?.fullName} - - {user?.primaryEmailAddress?.emailAddress} - -
- - - - - -
- - - - {user?.firstName?.substring(0, 1)} - {user?.lastName?.substring(0, 1)} - - -
- - {user?.fullName} - - - {user?.primaryEmailAddress?.emailAddress} - -
-
- - - - - Profile - - - - - - - - - - - - - ) -} diff --git a/apps/app/src/components/SidebarUser.tsx b/apps/app/src/components/SidebarUser.tsx index 49086a2..2b25ebb 100644 --- a/apps/app/src/components/SidebarUser.tsx +++ b/apps/app/src/components/SidebarUser.tsx @@ -1,4 +1,4 @@ -import { ChevronsUpDown, KeyRoundIcon } from 'lucide-react' +import { ChevronsUpDown, KeyRoundIcon, TerminalIcon } from 'lucide-react' import { Avatar, @@ -37,6 +37,14 @@ export function SidebarUser() { + + + + + CLI + + + diff --git a/apps/app/src/routeTree.gen.ts b/apps/app/src/routeTree.gen.ts index f3f2237..bddaa66 100644 --- a/apps/app/src/routeTree.gen.ts +++ b/apps/app/src/routeTree.gen.ts @@ -17,6 +17,7 @@ import { Route as ChangelogIdVersionVersionIdImport } from './routes/changelog.$ // Create Virtual Routes +const CliLazyImport = createFileRoute('/cli')() const IndexLazyImport = createFileRoute('/')() const UserIndexLazyImport = createFileRoute('/user/')() const PageIndexLazyImport = createFileRoute('/page/')() @@ -37,6 +38,11 @@ const ChangelogIdEditLazyImport = createFileRoute('/changelog/$id/edit')() // Create/Update Routes +const CliLazyRoute = CliLazyImport.update({ + path: '/cli', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/cli.lazy').then((d) => d.Route)) + const IndexLazyRoute = IndexLazyImport.update({ path: '/', getParentRoute: () => rootRoute, @@ -146,6 +152,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexLazyImport parentRoute: typeof rootRoute } + '/cli': { + id: '/cli' + path: '/cli' + fullPath: '/cli' + preLoaderRoute: typeof CliLazyImport + parentRoute: typeof rootRoute + } '/access-tokens/new': { id: '/access-tokens/new' path: '/access-tokens/new' @@ -290,6 +303,7 @@ const PageIdLazyRouteWithChildren = PageIdLazyRoute._addFileChildren( export interface FileRoutesByFullPath { '/': typeof IndexLazyRoute + '/cli': typeof CliLazyRoute '/access-tokens/new': typeof AccessTokensNewLazyRoute '/changelog/$id': typeof ChangelogIdLazyRouteWithChildren '/changelog/create': typeof ChangelogCreateLazyRoute @@ -309,6 +323,7 @@ export interface FileRoutesByFullPath { export interface FileRoutesByTo { '/': typeof IndexLazyRoute + '/cli': typeof CliLazyRoute '/access-tokens/new': typeof AccessTokensNewLazyRoute '/changelog/create': typeof ChangelogCreateLazyRoute '/page/create': typeof PageCreateLazyRoute @@ -327,6 +342,7 @@ export interface FileRoutesByTo { export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexLazyRoute + '/cli': typeof CliLazyRoute '/access-tokens/new': typeof AccessTokensNewLazyRoute '/changelog/$id': typeof ChangelogIdLazyRouteWithChildren '/changelog/create': typeof ChangelogCreateLazyRoute @@ -348,6 +364,7 @@ export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath fullPaths: | '/' + | '/cli' | '/access-tokens/new' | '/changelog/$id' | '/changelog/create' @@ -366,6 +383,7 @@ export interface FileRouteTypes { fileRoutesByTo: FileRoutesByTo to: | '/' + | '/cli' | '/access-tokens/new' | '/changelog/create' | '/page/create' @@ -382,6 +400,7 @@ export interface FileRouteTypes { id: | '__root__' | '/' + | '/cli' | '/access-tokens/new' | '/changelog/$id' | '/changelog/create' @@ -402,6 +421,7 @@ export interface FileRouteTypes { export interface RootRouteChildren { IndexLazyRoute: typeof IndexLazyRoute + CliLazyRoute: typeof CliLazyRoute AccessTokensNewLazyRoute: typeof AccessTokensNewLazyRoute ChangelogIdLazyRoute: typeof ChangelogIdLazyRouteWithChildren ChangelogCreateLazyRoute: typeof ChangelogCreateLazyRoute @@ -415,6 +435,7 @@ export interface RootRouteChildren { const rootRouteChildren: RootRouteChildren = { IndexLazyRoute: IndexLazyRoute, + CliLazyRoute: CliLazyRoute, AccessTokensNewLazyRoute: AccessTokensNewLazyRoute, ChangelogIdLazyRoute: ChangelogIdLazyRouteWithChildren, ChangelogCreateLazyRoute: ChangelogCreateLazyRoute, @@ -439,6 +460,7 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", + "/cli", "/access-tokens/new", "/changelog/$id", "/changelog/create", @@ -453,6 +475,9 @@ export const routeTree = rootRoute "/": { "filePath": "index.lazy.tsx" }, + "/cli": { + "filePath": "cli.lazy.tsx" + }, "/access-tokens/new": { "filePath": "access-tokens.new.lazy.tsx" }, diff --git a/apps/app/src/routes/cli.lazy.tsx b/apps/app/src/routes/cli.lazy.tsx new file mode 100644 index 0000000..da7e330 --- /dev/null +++ b/apps/app/src/routes/cli.lazy.tsx @@ -0,0 +1,107 @@ +import { + Button, + Card, + CardContent, + CardHeader, + CardTitle, +} from '@boring.tools/ui' +import { Link, createLazyFileRoute } from '@tanstack/react-router' +import { CopyIcon } from 'lucide-react' +import { PageWrapper } from '../components/PageWrapper' + +const Platforms = [ + { + name: 'Linux', + arch: 'x86', + svg: '/linux.svg', + path: '/cli/linux/bt', + filename: 'bt', + }, + { + name: 'Apple Intel', + arch: 'Intel', + svg: '/apple.svg', + path: '/cli/mac-intel/bt', + filename: 'bt', + }, + { + name: 'Apple ARM', + arch: 'ARM', + svg: '/apple.svg', + path: '/cli/mac-arm/bt', + filename: 'bt', + }, + { + name: 'Windows', + arch: 'x86', + svg: '/windows.svg', + path: '/cli/windows/bt.exe', + filename: 'bt.exe', + }, +] + +const Component = () => { + return ( + +
+

CLI

+

+ With our CLI you can upload your commits for your changelog in just a + few seconds. +

+

Download

+
+ {Platforms.map((platform) => { + return ( + + + + {platform.name} + + + {platform.arch} + + + + ) + })} +
+ +

Usage

+ 
+          bt --changelogId=... --token=bt_...
+
+ +

+ Alternatively, you can use an .env file: +

+ + 
+          BT_CHANGELOG_ID=...
+          

+          BT_AUTH_TOKEN=bt_...
+
+ +

+ If you have not yet created an Access Token, you can do so{' '} + + here + + . +

+
+ + ) +} + +export const Route = createLazyFileRoute('/cli')({ + component: Component, +}) diff --git a/apps/cli/src/utils/arguments.ts b/apps/cli/src/utils/arguments.ts index 9eb021c..0a1b473 100644 --- a/apps/cli/src/utils/arguments.ts +++ b/apps/cli/src/utils/arguments.ts @@ -1,8 +1,8 @@ import { parseArgs } from 'node:util' import { z } from 'zod' -const ENV_ID = Bun.env.CHANGELOG_ID -const ENV_TOKEN = Bun.env.AUTH_TOKEN +const ENV_ID = Bun.env.BT_CHANGELOG_ID +const ENV_TOKEN = Bun.env.BT_AUTH_TOKEN const schema = z.object({ token: z.string(),