From dbfcb7e2674cc46936cdb8383c37608df71d62e5 Mon Sep 17 00:00:00 2001 From: Shotaro Nakamura Date: Sun, 15 Sep 2024 03:32:19 +0000 Subject: [PATCH 1/2] feat: support dark mode --- frontend/components/HomepageHero.tsx | 2 +- frontend/components/List.tsx | 34 +++++++---- frontend/components/ListPanel.tsx | 6 +- frontend/components/Nav.tsx | 4 +- frontend/components/PackageHit.tsx | 6 +- frontend/components/QuotaCard.tsx | 6 +- frontend/components/Table.tsx | 8 +-- frontend/islands/UserMenu.tsx | 6 +- frontend/islands/new.tsx | 10 ++-- frontend/routes/_app.tsx | 2 +- frontend/routes/_layout.tsx | 4 +- .../account/(_components)/AccountLayout.tsx | 4 +- frontend/routes/account/settings.tsx | 4 +- .../account/tokens/(_islands)/CreateToken.tsx | 56 +++++++++---------- frontend/routes/account/tokens/create.tsx | 4 +- frontend/routes/account/tokens/index.tsx | 10 ++-- frontend/routes/docs/[...id].tsx | 2 +- frontend/routes/index.tsx | 4 +- frontend/routes/new.tsx | 6 +- .../package/(_components)/PackageHeader.tsx | 8 +-- .../package/(_components)/PackageNav.tsx | 2 +- .../package/(_islands)/BreadcrumbsSticky.tsx | 2 +- frontend/routes/package/score.tsx | 8 +-- frontend/routes/package/source.tsx | 2 +- frontend/routes/package/versions.tsx | 4 +- frontend/routes/packages.tsx | 2 +- frontend/static/styles.css | 27 ++++++++- 27 files changed, 133 insertions(+), 100 deletions(-) diff --git a/frontend/components/HomepageHero.tsx b/frontend/components/HomepageHero.tsx index 0260e818..3746045d 100644 --- a/frontend/components/HomepageHero.tsx +++ b/frontend/components/HomepageHero.tsx @@ -25,7 +25,7 @@ export function HomepageHero( ) { return (
diff --git a/frontend/components/List.tsx b/frontend/components/List.tsx index f049a1f1..b8ce9b6b 100644 --- a/frontend/components/List.tsx +++ b/frontend/components/List.tsx @@ -21,7 +21,7 @@ export function ListDisplay(
{title && ( -
+
{title}
@@ -36,7 +36,7 @@ export function ListDisplay( > {item.content} - + ))} @@ -53,6 +53,20 @@ export function ListDisplay( ); } +function PaginationButton(props: { + children: string; + href: string; +}) { + return ( + + {props.children} + + ); +} + function Pagination( { currentUrl, itemsCount, pagination }: { currentUrl: URL; @@ -72,7 +86,7 @@ function Pagination( return (
-
    +
      {children.map((entry) => { return ( -
    1. 1 ? "odd:bg-jsr-cyan-50" : ""}> +
    2. 1 ? "odd:bg-jsr-cyan-50 odd:dark:bg-jsr-cyan-700" : ""}> {entry.label && ( -
      +
      {entry.label}
      )} diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx index bcffc2cc..79953098 100644 --- a/frontend/components/Nav.tsx +++ b/frontend/components/Nav.tsx @@ -49,9 +49,9 @@ export interface NavItemProps { export function NavItem(props: NavItemProps) { return (
      -
      +
      {`@${pkg.scope}/${pkg.name}`}
      -
      +
      {pkg.description}
      @@ -34,7 +34,7 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem { style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`} title="Package score" > -
      +
      {pkg.score}
      diff --git a/frontend/components/QuotaCard.tsx b/frontend/components/QuotaCard.tsx index e0264ed9..5484acd4 100644 --- a/frontend/components/QuotaCard.tsx +++ b/frontend/components/QuotaCard.tsx @@ -12,8 +12,8 @@ export function QuotaCard( return (
      -

      {props.title}

      -

      {props.description}

      +

      {props.title}

      +

      {props.description}

      @@ -40,7 +40,7 @@ function QuotaUsage(props: { limit: number; usage: number }) { >
      -
      {props.usage}/{props.limit}
      +
      {props.usage}/{props.limit}
      ); } diff --git a/frontend/components/Table.tsx b/frontend/components/Table.tsx index d0280b4c..89600ce9 100644 --- a/frontend/components/Table.tsx +++ b/frontend/components/Table.tsx @@ -32,7 +32,7 @@ export function Table( >
      - + {columns.map((column) => ( @@ -156,7 +156,7 @@ export function TableHead({ }: TableHeadProps) { return (
      @@ -182,7 +182,7 @@ export function TableData( ) { return ( Publish a package diff --git a/frontend/islands/new.tsx b/frontend/islands/new.tsx index 447b6d1d..7ecf877f 100644 --- a/frontend/islands/new.tsx +++ b/frontend/islands/new.tsx @@ -54,8 +54,8 @@ export function ScopeSelect( if (scopes.value.length === 0) { return ( -
      - +
      + You are not a member of any scopes. Create a new scope to publish your package. @@ -97,7 +97,7 @@ export function ScopeSelect(

      )} -

      +

      You can create {scopesLeft === 0 ? "no" : scopesLeft}{" "} more scope{scopesLeft !== 1 && "s"}.{" "} View quotas or{" "} @@ -353,14 +353,14 @@ export function CreatePackage({ scope, name, pkg, fromCli }: { ) return null; return ( -

      +
      {pkg.value === null ? ( <>

      The package{" "} - + @{scope}/{name} {" "} does not exist yet. Create it now to publish your package. diff --git a/frontend/routes/_app.tsx b/frontend/routes/_app.tsx index 184b8c69..4b5db874 100644 --- a/frontend/routes/_app.tsx +++ b/frontend/routes/_app.tsx @@ -30,7 +30,7 @@ export default async function App( href={asset("/logo-square.svg")} /> - + diff --git a/frontend/routes/_layout.tsx b/frontend/routes/_layout.tsx index e620a8e7..7bf29bc4 100644 --- a/frontend/routes/_layout.tsx +++ b/frontend/routes/_layout.tsx @@ -11,7 +11,7 @@ export default function Layout( <>

      JSR - It is{" "}
      diff --git a/frontend/routes/account/settings.tsx b/frontend/routes/account/settings.tsx index aad6c1c8..5cee0997 100644 --- a/frontend/routes/account/settings.tsx +++ b/frontend/routes/account/settings.tsx @@ -30,7 +30,7 @@ Reason: `;
      -

      +

      Users have certain quotas to help prevent abuse. We are happy to increase your quotas as needed — just send us an increase request. @@ -61,7 +61,7 @@ Reason: `;

      Delete account

      -

      +

      You may delete your account at any time. If you delete your account, any scopes that you are the sole owner of will be orphaned. You will not be able to recover your account after deletion. diff --git a/frontend/routes/account/tokens/(_islands)/CreateToken.tsx b/frontend/routes/account/tokens/(_islands)/CreateToken.tsx index 97878db6..a83deea8 100644 --- a/frontend/routes/account/tokens/(_islands)/CreateToken.tsx +++ b/frontend/routes/account/tokens/(_islands)/CreateToken.tsx @@ -88,12 +88,12 @@ function ChooseUsage({ usage }: { usage: Signal<"publish" | "api" | null> }) { return (

      -

      +

      What do you plan to do with your personal access token?

      -

      +

      +

      When publishing from a local machine, JSR can interactively authenticate you using the web browser. This is much more secure than using a personal access token, and is the recommended way to publish packages.

      -

      +

      Do you still want to create a personal access token?

      @@ -181,13 +181,13 @@ function LocalMachineHelp( function GitHubActionsHelp() { return ( -
      -

      +

      +

      When publishing from GitHub Actions, JSR authenticates you using OIDC, an authentication mechanism that is built into GitHub Actions. It is much more secure than using a personal access token.

      -

      +

      You do not need a personal access token for this flow. You can find instructions for publishing from GitHub Actions with OIDC in the "Publish" tab of your package page. @@ -206,15 +206,15 @@ function LocalDangerWarning( { willStoreSafely }: { willStoreSafely: Signal }, ) { return ( -

      -

      +

      +

      Personal access tokens enable a malicious user to impersonate you and perform any action you can on JSR,{" "} including publishing new versions of your packages .

      -

      +

      Do not store tokens in your code, in unencrypted local files, or in a .bashrc or a similar file. A malicious program could steal your token and use it to perform actions on your behalf. @@ -232,15 +232,15 @@ function LocalDangerWarning( function FinalDangerWarning({ willBeSafe }: { willBeSafe: Signal }) { return ( -

      -

      +

      +

      Personal access tokens are powerful and can be used to perform any action you can on JSR,{" "} including publishing new versions of your packages .

      -

      +

      The JSR team will never ask you for you to create or share a personal access token. If you are being asked to do so, email{" "} help@jsr.io{" "} @@ -347,8 +347,8 @@ function CreateTokenForm() { function DescriptionInput({ description }: { description: Signal }) { return (

      -
      +
      -
      +
      -

      +

      Your personal access token has been created. Copy it now, as you will not be able to see it again.

      diff --git a/frontend/routes/account/tokens/create.tsx b/frontend/routes/account/tokens/create.tsx index efff860d..a1adb46e 100644 --- a/frontend/routes/account/tokens/create.tsx +++ b/frontend/routes/account/tokens/create.tsx @@ -28,11 +28,11 @@ export default function AccountCreateTokenPage() {

      Create a personal access token

      -

      +

      Personal access tokens can be used to authenticate with JSR from the command line or from other applications.

      -

      +

      Actions performed by personal access tokens are attributed to your account.

      diff --git a/frontend/routes/account/tokens/index.tsx b/frontend/routes/account/tokens/index.tsx index e31cae90..7a43c897 100644 --- a/frontend/routes/account/tokens/index.tsx +++ b/frontend/routes/account/tokens/index.tsx @@ -27,7 +27,7 @@ export default function AccountTokensPage({ data }: PageProps) {

      Personal access tokens

      -

      +

      Personal access tokens can be used to authenticate with JSR from the command line or from other applications.

      @@ -49,7 +49,7 @@ export default function AccountTokensPage({ data }: PageProps) { ) : (
      -

      +

      You have no personal access tokens.

      @@ -66,7 +66,7 @@ export default function AccountTokensPage({ data }: PageProps) {

      Sessions

      -

      +

      Sessions keep you logged in to JSR on the web, and are used during interactive authentication during publishing.

      @@ -75,7 +75,7 @@ export default function AccountTokensPage({ data }: PageProps) { {sessions.map((token) => )} -

      +

      Only sessions that are active, or have expired within the last 24 hours are shown here.

      @@ -149,7 +149,7 @@ function SessionRow({ token }: { token: Token }) { return (
    3. -

      +

      {token.type === "web" ? "Web" : token.type === "device" ? "CLI" : ""} {" "} session diff --git a/frontend/routes/docs/[...id].tsx b/frontend/routes/docs/[...id].tsx index 3fdbdc07..6239edc4 100644 --- a/frontend/routes/docs/[...id].tsx +++ b/frontend/routes/docs/[...id].tsx @@ -66,7 +66,7 @@ export default function Page({ data }: PageProps) {

      View table of contents

      -

      +

      {data.title}

      diff --git a/frontend/routes/index.tsx b/frontend/routes/index.tsx index a84ef3dd..a3d6c978 100644 --- a/frontend/routes/index.tsx +++ b/frontend/routes/index.tsx @@ -43,7 +43,7 @@ export default function Home({ data }: PageProps) { /> {data.posts.length > 0 && (
      -

      +

      Latest updates