-
+
+
diff --git a/src/constants.ts b/src/constants.ts
index 9c3b14d4..6072e8ac 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -33,5 +33,31 @@ export const URLs = {
GITHUB: {
REPO: `https://github.com/${siteMetadata.repo.fullName}`,
LATEST_RELEASE: `https://github.com/${siteMetadata.repo.fullName}/releases/latest`,
+ ISSUES: `https://github.com/${siteMetadata.repo.fullName}/issues`,
},
+ HOMEBREW: 'https://formulae.brew.sh/cask/gitify',
};
+
+export const gitProviders = [
+ {
+ name: 'GitHub',
+ note: 'Cloud & Enterprise',
+ icon: 'simple-icons:github',
+ },
+ {
+ name: 'Gitea',
+ icon: 'simple-icons:gitea',
+ },
+ {
+ name: 'Forgejo',
+ icon: 'simple-icons:forgejo',
+ },
+ {
+ name: 'Codeberg',
+ icon: 'simple-icons:codeberg',
+ },
+ {
+ name: 'Bitbucket',
+ icon: 'simple-icons:bitbucket',
+ },
+];
diff --git a/src/faqs/contributing/how-to-contribute.md b/src/faqs/contributing/how-to-contribute.md
index 818802e3..727d1566 100644
--- a/src/faqs/contributing/how-to-contribute.md
+++ b/src/faqs/contributing/how-to-contribute.md
@@ -1,12 +1,13 @@
---
-title: "How can I contribute to Gitify?"
-category: "Contributing"
+title: 'How can I contribute to Gitify?'
+category: 'Contributing'
order: 1
---
+
You can contribute to Gitify by opening an issue or pull request on GitHub at [gitify-app/gitify](https://github.com/gitify-app/gitify).
Before contributing, please review our [CONTRIBUTING.md](https://github.com/gitify-app/gitify/blob/main/CONTRIBUTING.md) guide for details on branch naming, the PR process, and code style.
Check out our [open issues](https://github.com/gitify-app/gitify/issues) and see if there is an existing idea you would like to work on.
-Not a developer? You can still help by reporting bugs, improving documentation, or starring and sharing the project.
\ No newline at end of file
+Not a developer? You can still help by reporting bugs, improving documentation, or starring and sharing the project.
diff --git a/src/faqs/getting-started/authentication-methods.md b/src/faqs/getting-started/authentication-methods.md
index 6aca0f6d..79cdb135 100644
--- a/src/faqs/getting-started/authentication-methods.md
+++ b/src/faqs/getting-started/authentication-methods.md
@@ -1,8 +1,9 @@
---
-title: "What authentication methods does Gitify support?"
-category: "Getting Started"
+title: 'What authentication methods does Gitify support?'
+category: 'Getting Started'
order: 1
---
+
Authentication methods vary by forge:
### GitHub Cloud & GitHub Enterprise Server
diff --git a/src/faqs/getting-started/github-enterprise-server.md b/src/faqs/getting-started/github-enterprise-server.md
index bada8551..41285df1 100644
--- a/src/faqs/getting-started/github-enterprise-server.md
+++ b/src/faqs/getting-started/github-enterprise-server.md
@@ -1,13 +1,15 @@
---
-title: "Does Gitify support GitHub Enterprise Server?"
-category: "Getting Started"
+title: 'Does Gitify support GitHub Enterprise Server?'
+category: 'Getting Started'
order: 3
---
+
Yes. Gitify supports **GitHub Enterprise Server (GHES)** and **GitHub Enterprise Cloud with Data Residency** alongside GitHub Cloud.
> **Note:** This entry covers GitHub-specific setup. If you are using Gitea, Forgejo, Codeberg, or Bitbucket Cloud, see [Which Git forges does Gitify support?](/faq/#supported-forges) and [What authentication methods does Gitify support?](/faq/#authentication-methods).
When signing in via **Personal Access Token** or **OAuth App**, you will see a _Hostname_ field that defaults to `github.com`. Replace this with your instance hostname to connect:
+
- **GitHub Enterprise Server**: your self-hosted hostname, e.g. `github.mycompany.com`
- **GitHub Enterprise Cloud (Data Residency)**: your tenant hostname, e.g. `myorg.ghe.com`
diff --git a/src/faqs/getting-started/github-scopes.md b/src/faqs/getting-started/github-scopes.md
index 386384d3..213d6a2b 100644
--- a/src/faqs/getting-started/github-scopes.md
+++ b/src/faqs/getting-started/github-scopes.md
@@ -1,6 +1,6 @@
---
-title: "What GitHub scopes does Gitify require?"
-category: "Getting Started"
+title: 'What GitHub scopes does Gitify require?'
+category: 'Getting Started'
order: 6
---
@@ -15,6 +15,7 @@ Scopes are pre-configured by Gitify and requested automatically during sign-in.
**Personal Access Token (PAT)**:
When generating a PAT, the following scopes are required:
+
- `notifications` β to read GitHub notifications
- `read:user` β to read your GitHub user details (name, profile, avatar)
- `repo` β to enrich notification details for public and private repositories
diff --git a/src/faqs/getting-started/github-sso-pat-authorization.md b/src/faqs/getting-started/github-sso-pat-authorization.md
index 804acfd8..0190fd8a 100644
--- a/src/faqs/getting-started/github-sso-pat-authorization.md
+++ b/src/faqs/getting-started/github-sso-pat-authorization.md
@@ -1,11 +1,13 @@
---
-title: "How do I authorize my PAT for a GitHub SSO organization?"
-category: "Getting Started"
+title: 'How do I authorize my PAT for a GitHub SSO organization?'
+category: 'Getting Started'
order: 7
---
+
If your GitHub organization enforces **SAML single sign-on (SSO)**, you must explicitly authorize your Personal Access Token to access that organization's data β including notifications. Without this step, Gitify will not show notifications from repositories in that organization even if your PAT has the correct scopes.
To authorize a PAT for SSO:
+
- Open [GitHub β Settings β Personal access tokens](https://github.com/settings/tokens)
- Find the token you use with Gitify
- Click **Configure SSO** next to the token
@@ -15,4 +17,3 @@ To authorize a PAT for SSO:
Once authorized, Gitify will be able to fetch notifications from repositories in those organizations. Re-authorization may be required if your SSO session expires or your organization's SSO configuration changes.
For more details, see the [GitHub documentation on authorizing a PAT for use with SSO](https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-single-sign-on/authorizing-a-personal-access-token-for-use-with-single-sign-on).
-
diff --git a/src/faqs/getting-started/launch-at-login.md b/src/faqs/getting-started/launch-at-login.md
index 51298f5c..7112c92a 100644
--- a/src/faqs/getting-started/launch-at-login.md
+++ b/src/faqs/getting-started/launch-at-login.md
@@ -1,11 +1,13 @@
---
-title: "How do I launch Gitify at login?"
-category: "Getting Started"
+title: 'How do I launch Gitify at login?'
+category: 'Getting Started'
order: 5
---
+
Gitify can be configured to start automatically when you log in to your computer.
To enable this:
+
- Open **Settings** in Gitify
- Navigate to the **System** section
- Toggle **Open at startup**
diff --git a/src/faqs/getting-started/multiple-accounts.md b/src/faqs/getting-started/multiple-accounts.md
index 77212d07..8da7d567 100644
--- a/src/faqs/getting-started/multiple-accounts.md
+++ b/src/faqs/getting-started/multiple-accounts.md
@@ -1,11 +1,13 @@
---
-title: "How do I add multiple accounts?"
-category: "Getting Started"
+title: 'How do I add multiple accounts?'
+category: 'Getting Started'
order: 4
---
+
Gitify supports signing in to multiple accounts simultaneously β for example, a personal GitHub Cloud account alongside a Gitea or Bitbucket Cloud account.
To add an account:
+
- Open the **Accounts** screen from the Gitify sidebar
- Click **Add new account** and choose your forge and preferred authentication method
- Complete the sign-in flow for the additional account
diff --git a/src/faqs/getting-started/oauth-app-setup.md b/src/faqs/getting-started/oauth-app-setup.md
index 9c36c597..749e9802 100644
--- a/src/faqs/getting-started/oauth-app-setup.md
+++ b/src/faqs/getting-started/oauth-app-setup.md
@@ -1,15 +1,17 @@
---
-title: "How do I configure OAuth App authentication?"
-category: "Getting Started"
+title: 'How do I configure OAuth App authentication?'
+category: 'Getting Started'
order: 2
---
+
> **Note:** OAuth App authentication is available for **GitHub Cloud and GitHub Enterprise Server only**. For Gitea, Forgejo, Codeberg, and Bitbucket Cloud, use a [Personal Access Token](/faq/#authentication-methods).
To authenticate via an **OAuth App** with GitHub:
+
- Open [GitHub β Settings β Developer settings β OAuth Apps](https://github.com/settings/developers)
- Click _New OAuth App_
- Set _Authorization callback URL_ to `gitify://oauth`
- Complete all remaining mandatory fields
- Click _Register application_
- Click _Generate a new client secret_
-- Use this client/secret pair within Gitify to authenticate.
\ No newline at end of file
+- Use this client/secret pair within Gitify to authenticate.
diff --git a/src/faqs/getting-started/supported-forges.md b/src/faqs/getting-started/supported-forges.md
index 32a7dae5..19c09bea 100644
--- a/src/faqs/getting-started/supported-forges.md
+++ b/src/faqs/getting-started/supported-forges.md
@@ -1,8 +1,9 @@
---
-title: "Which Git forges does Gitify support?"
-category: "Getting Started"
+title: 'Which Git forges does Gitify support?'
+category: 'Getting Started'
order: 0
---
+
Gitify supports notifications from the following Git forges:
- **GitHub Cloud** β `github.com`
diff --git a/src/faqs/troubleshooting/chrome-sandbox-linux.md b/src/faqs/troubleshooting/chrome-sandbox-linux.md
index abe63dc1..fec48aec 100644
--- a/src/faqs/troubleshooting/chrome-sandbox-linux.md
+++ b/src/faqs/troubleshooting/chrome-sandbox-linux.md
@@ -1,8 +1,9 @@
---
-title: "How do I fix Chrome Sandbox permissions on Linux?"
-category: "Troubleshooting"
+title: 'How do I fix Chrome Sandbox permissions on Linux?'
+category: 'Troubleshooting'
order: 3
---
+
If you experience issues opening Gitify on Linux due to `Chrome Sandbox` permissions, the Electron sandbox requires root ownership and the SUID bit to be set on the sandbox binary. Run the following commands to fix this:
```
@@ -13,6 +14,7 @@ sudo chmod 4755 /opt/Gitify/chrome-sandbox
> **Note:** The path `/opt/Gitify/chrome-sandbox` assumes a standard installation. If you installed Gitify via AppImage or to a custom directory, adjust the path accordingly.
To check for startup errors:
+
```
journalctl -xe | grep gitify
-```
\ No newline at end of file
+```
diff --git a/src/faqs/troubleshooting/debugging.md b/src/faqs/troubleshooting/debugging.md
index 317e5f20..32ed2b64 100644
--- a/src/faqs/troubleshooting/debugging.md
+++ b/src/faqs/troubleshooting/debugging.md
@@ -1,17 +1,20 @@
---
-title: "How do I debug Gitify?"
-category: "Troubleshooting"
+title: 'How do I debug Gitify?'
+category: 'Troubleshooting'
order: 2
---
+
Using **Chrome Developer Tools** (console logs, network requests, etc):
Right-click the tray icon and select _Developer β Toggle Developer Tools_, or use the keyboard shortcut for your platform:
+
- macOS: `command + opt + i`
- Windows / Linux: `ctrl + shift + i`
Using **Application Log Files**:
Right-click the tray icon and select _Developer β View Application Logs_, or navigate directly to the log directory for your platform:
+
- macOS: `~/Library/Logs/gitify`
- Windows: `%USERPROFILE%\AppData\Roaming\gitify\logs`
-- Linux: `~/.config/gitify/logs`
\ No newline at end of file
+- Linux: `~/.config/gitify/logs`
diff --git a/src/faqs/troubleshooting/notifications-not-showing.md b/src/faqs/troubleshooting/notifications-not-showing.md
index 75032d16..3cf4762a 100644
--- a/src/faqs/troubleshooting/notifications-not-showing.md
+++ b/src/faqs/troubleshooting/notifications-not-showing.md
@@ -1,12 +1,13 @@
---
title: "Why aren't my notifications showing?"
-category: "Troubleshooting"
+category: 'Troubleshooting'
order: 1
---
### GitHub Cloud & GitHub Enterprise Server
**Personal Access Token (PAT):**
+
- Open [GitHub β Settings β Developer settings β Personal access tokens](https://github.com/settings/tokens)
- Confirm that your PAT has the following recommended permissions: `notifications`, `read:user` and `repo`
@@ -15,16 +16,17 @@ order: 1
> **Note:** If your organization enforces SAML SSO, your PAT must also be explicitly authorized for that organization. See [How do I authorize my PAT for a GitHub SSO organization?](/faq/#github-sso-pat-authorization).
**Login with GitHub (Device Flow):**
+
- Some organizations require GitHub Apps to request access prior to allowing access to organization data (including notifications)
- To check if Gitify is approved by your organization:
- Open [GitHub β Settings β Applications β Authorized GitHub Apps](https://github.com/settings/applications)
- Click on the _Gitify_ application
- Under _Organization access_, you will see one of three states for each organization:
-| State | Meaning |
-|---|---|
-| β
Green check | Access granted β notifications from this org will appear |
-| **Request** button | Access not yet granted β click to ask your org admins to approve |
+| State | Meaning |
+| ------------------------- | -------------------------------------------------------------------------------------------- |
+| β
Green check | Access granted β notifications from this org will appear |
+| **Request** button | Access not yet granted β click to ask your org admins to approve |
| _Disallowed by org owner_ | The organization has blocked third-party GitHub App access entirely β contact your org admin |
> **Note:** If an organization shows **Request** or **Disallowed by org owner**, you will not receive notifications from that organization until access is approved.
@@ -38,4 +40,4 @@ order: 1
### Bitbucket Cloud
- Verify your app password is valid and has not been revoked β regenerate it in _Personal settings β App passwords_ if needed
-- Ensure your app password grants **Read** access to: Account, Repositories, and Pull requests
\ No newline at end of file
+- Ensure your app password grants **Read** access to: Account, Repositories, and Pull requests
diff --git a/src/faqs/using-gitify/filters.md b/src/faqs/using-gitify/filters.md
index a9f5c941..9872d3ae 100644
--- a/src/faqs/using-gitify/filters.md
+++ b/src/faqs/using-gitify/filters.md
@@ -1,6 +1,6 @@
---
-title: "How do Filters work?"
-category: "Using Gitify"
+title: 'How do Filters work?'
+category: 'Using Gitify'
order: 1
---
@@ -9,4 +9,3 @@ Filters in Gitify help you manage which notifications are shown in the app, allo
Filters can be accessed from the left-hand sidebar. By default, all notifications are shown. You can filter by properties such as notification reason (e.g. _Mentioned_, _Review Requested_, _Assigned_), repository, or account.
If you apply multiple filters, your inbox will display notifications based on a `LOGICAL AND` condition β for example, selecting _Mentioned_ and a specific repository will only show notifications where both conditions are true.
-
diff --git a/src/faqs/using-gitify/unsubscribe-from-thread.md b/src/faqs/using-gitify/unsubscribe-from-thread.md
index 42b90faf..d2a3c038 100644
--- a/src/faqs/using-gitify/unsubscribe-from-thread.md
+++ b/src/faqs/using-gitify/unsubscribe-from-thread.md
@@ -1,8 +1,9 @@
---
-title: "What does the Unsubscribe from Thread option do?"
-category: "Using Gitify"
+title: 'What does the Unsubscribe from Thread option do?'
+category: 'Using Gitify'
order: 2
---
+
When you **Unsubscribe from Thread**, you will not receive future notifications for the thread until you either comment on the thread or get a **@mention**.
-> **Note:** Depending on your notification subscription settings for the repository, you may continue to receive some notifications even after unsubscribing from a specific thread.
\ No newline at end of file
+> **Note:** Depending on your notification subscription settings for the repository, you may continue to receive some notifications even after unsubscribing from a specific thread.
diff --git a/src/faqs/using-gitify/updating.md b/src/faqs/using-gitify/updating.md
index 982313df..36b3346a 100644
--- a/src/faqs/using-gitify/updating.md
+++ b/src/faqs/using-gitify/updating.md
@@ -1,10 +1,11 @@
---
-title: "How do I update Gitify?"
-category: "Using Gitify"
+title: 'How do I update Gitify?'
+category: 'Using Gitify'
order: 3
---
+
Gitify checks for updates automatically on launch and every 24 hours.
When an update is available, it downloads in the background. Once downloaded, a dialog will prompt you to **Restart** to apply the update or choose **Later** to apply it the next time Gitify restarts.
-You can also trigger a manual check by right-clicking the tray icon and selecting **Check for Updates**.
\ No newline at end of file
+You can also trigger a manual check by right-clicking the tray icon and selecting **Check for Updates**.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index de9f0e5f..3cf7fc83 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -19,47 +19,57 @@ const ogImage = `${siteMetadata.url}/images/social.png`;
-
-
-
+
+
+
{pageTitle}
-
-
+
+
+ />
+ />
+ />
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ />
-
+
diff --git a/src/layouts/SectionRow.astro b/src/layouts/SectionRow.astro
index 50db6e69..7ed31db2 100644
--- a/src/layouts/SectionRow.astro
+++ b/src/layouts/SectionRow.astro
@@ -4,6 +4,7 @@ import { Image } from 'astro:assets';
import { marked } from 'marked';
export interface Props {
+ eyebrow?: string;
title: string;
description: string;
screenshot?: {
@@ -15,42 +16,52 @@ export interface Props {
}
const {
+ eyebrow,
title,
description,
screenshot,
- isDark = false,
isReversed = false,
} = Astro.props;
---
-
+
-
-
{title}
+
+ {
+ eyebrow && (
+
{eyebrow}
+ )
+ }
+
+ {title}
+
- {screenshot && (
-
)}
+ {
+ screenshot && (
+
+ )
+ }
-
diff --git a/src/octokit.ts b/src/octokit.ts
new file mode 100644
index 00000000..14d184ad
--- /dev/null
+++ b/src/octokit.ts
@@ -0,0 +1,51 @@
+import { Octokit } from 'octokit';
+
+const REQUEST_TIMEOUT_MS = 8000;
+
+/** Only the GitHub REST API may be contacted at build time. */
+const ALLOWED_HOSTS = new Set(['api.github.com']);
+
+const resolveUrl = (input: RequestInfo | URL): string => {
+ if (typeof input === 'string') {
+ return input;
+ }
+ return input instanceof URL ? input.href : input.url;
+};
+
+/**
+ * Fetch wrapper that allowlists outbound hosts and aborts slow requests,
+ * so build-time data fetching can never hang the dev server or a build.
+ */
+const fetchWithTimeout: typeof fetch = (input, init) => {
+ let url: URL;
+ try {
+ url = new URL(resolveUrl(input));
+ } catch {
+ throw new Error('Invalid request URL');
+ }
+ if (!ALLOWED_HOSTS.has(url.hostname)) {
+ throw new Error(
+ `Blocked outbound request to unexpected host: ${url.hostname}`,
+ );
+ }
+ return fetch(url, {
+ ...init,
+ signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+ });
+};
+
+/**
+ * Shared Octokit client for build-time GitHub API calls.
+ *
+ * Fails fast on rate limits instead of waiting out the reset window;
+ * callers are expected to catch and fall back gracefully.
+ */
+export const octokit = new Octokit({
+ request: {
+ fetch: fetchWithTimeout,
+ },
+ throttle: {
+ onRateLimit: () => false,
+ onSecondaryRateLimit: () => false,
+ },
+});
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 5b3ed40a..684b5edb 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,28 +3,29 @@ import Layout from '~/layouts/Layout.astro';
---
-
-
+
404
+
-
-
Page Not Found
-
- Sorry, the page you are looking for could not be found.
-
-
- ← Return Home
-
-
+ Page Not Found
+
+
+
+ Sorry, the page you are looking for could not be found.
+
+
+ ← Return Home
+
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index 476da68c..922eee68 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -34,18 +34,30 @@ const grouped = CATEGORY_ORDER.map((category) => ({
category,
faqs: allFaqs
.filter((f) => f.frontmatter.category === category)
- .sort((a, b) => a.frontmatter.order - b.frontmatter.order),
+ .toSorted((a, b) => a.frontmatter.order - b.frontmatter.order),
}));
---
-
-
- Frequently Asked Questions
+
+
+
Support
+
+ Frequently Asked Questions
+
+
+ Everything you need to know about installing, using and contributing to
+ Gitify.
+
- {grouped.map(({ category, faqs }) => (
-
-
{category}
+ {
+ grouped.map(({ category, faqs }) => (
+
+
+ {category}
+
{faqs.map((faq) => (
@@ -56,64 +68,65 @@ const grouped = CATEGORY_ORDER.map((category) => ({
))}
- ))}
+ ))
+ }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6a2f5a53..a8377bfb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,70 +1,238 @@
---
import { Icon } from 'astro-icon/components';
+import { gitProviders, URLs } from '~/constants';
+
import Hero from '~/components/Hero.astro';
import { openSourceLibs } from '~/icons/icons';
import Layout from '~/layouts/Layout.astro';
import SectionRow from '~/layouts/SectionRow.astro';
+
+const features = [
+ {
+ title: 'Your menu bar is the inbox',
+ description:
+ 'A unified, real-time stream of mentions, review requests, assignments and CI results, always one click away. Badge counts keep you honest, and "mark all read" is your escape hatch.',
+ },
+ {
+ title: 'Cut through the noise',
+ description:
+ 'Filter by reason, repository, organization, subject type or state, and zero in on what actually needs you.',
+ },
+ {
+ title: 'Every account, side by side',
+ description:
+ 'Personal, work and enterprise accounts in a single tray, grouped and clearly labeled.',
+ },
+ {
+ title: 'Native and unobtrusive',
+ description:
+ 'OS-native notifications with an optional sound, grouped by product or account. Unsubscribe from noisy threads right from the tray.',
+ },
+ {
+ title: 'Truly cross-platform',
+ description:
+ 'One app for macOS, Windows and Linux, with builds for every package format that matters.',
+ },
+ {
+ title: 'Make it yours',
+ description:
+ 'Light, dark or system themes, appearance tweaks and launch at login. Gitify adapts to your workflow, not the other way around.',
+ },
+];
---
+
+
+ Works where your code lives
+
+
+ {
+ gitProviders.map((provider) => (
+
+
+ {provider.name}
+ {provider.note && (
+ Β· {provider.note}
+ )}
+
+
+ ))
+ }
+
+
+ Personal, work and enterprise accounts, side by side in one tray.
+
+
+
+
+
+ Why Gitify
+
+ Built for developers who live in Git.
+
+
+ All your notifications, from every account and provider, in one place,
+ so you can stay on top of your work, effortlessly.
+
+
+
+ {
+ features.map((feature, index) => (
+
+
+
+ {String(index + 1).padStart(2, '0')}
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+ ))
+ }
+
+
-
- {openSourceLibs.map((item) => (
-
+
+
+
+
+
+ Free & open source
+
+
+ Open by default, free forever.
+
+
+ Gitify is MIT-licensed and built in the open with TypeScript,
+ Electron, React, Tailwind CSS and other open-source libraries. Read
+ the code, report a bug or ship a feature with us.
+
+
+
+
+
+ {
+ openSourceLibs.map((item) => (
-
-
- ))}
+ ))
+ }
+
+
+
+
+
+
+
+
+
+
+
+ Ready to reach{' '}
+ inbox zero ?
+
+
+ Download Gitify and put your Git notifications where they belong, on
+ your menu bar.
+
+
diff --git a/src/styles/app.css b/src/styles/app.css
index c177240c..bf79253d 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,17 +1,63 @@
/** Tailwind CSS */
-@import "tailwindcss";
+@import 'tailwindcss';
/** Tailwind CSS Configuration */
@config "../../tailwind.config.ts";
-a:not(.gitify-navbar) {
- @apply font-semibold;
+:root {
+ color-scheme: dark;
}
-a:not(.gitify-repo) {
- @apply hover:underline;
+html {
+ scroll-behavior: smooth;
}
+body {
+ @apply bg-gitify-ink text-gitify-text font-sans antialiased;
+}
+
+::selection {
+ @apply bg-gitify-accent/30 text-gitify-text;
+}
+
+/** Subtle engineering grid backdrop */
+.bg-grid {
+ background-image:
+ linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
+ background-size: 44px 44px;
+}
+
+/** Accordion (accessible-astro-components) overrides */
+.accordion .item .wrapper {
+ border-color: rgba(148, 163, 184, 0.14);
+}
+
+.accordion .item .title {
+ @apply rounded-lg px-2 transition-colors;
+}
+
+.accordion .item .title:hover,
+.accordion .item .title:focus-visible {
+ @apply text-gitify-accent-bright;
+ text-decoration: none;
+}
+
+.accordion .item .content {
+ @apply text-gitify-muted;
+}
+
+.accordion__title {
+ h3 {
+ @apply text-base font-medium;
+ }
+}
+
+.accordion__content {
+ @apply text-base;
+}
+
+/** FAQ markdown content */
.faq p {
@apply mb-3;
}
@@ -20,6 +66,10 @@ a:not(.gitify-repo) {
@apply mb-0;
}
+.faq a {
+ @apply text-gitify-accent-bright hover:underline;
+}
+
.faq ul {
@apply list-disc ml-4 mb-3;
}
@@ -29,7 +79,7 @@ a:not(.gitify-repo) {
}
.faq code {
- @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded px-1.5 py-0.5 text-sm font-mono;
+ @apply bg-gitify-raised text-gitify-text rounded px-1.5 py-0.5 text-sm font-mono;
}
.faq pre code {
@@ -37,7 +87,7 @@ a:not(.gitify-repo) {
}
.faq blockquote {
- @apply border-l-4 border-blue-400 bg-blue-50 dark:bg-blue-950 dark:border-blue-500 pl-4 pr-3 py-2 my-3 rounded-r-sm not-italic text-gray-700 dark:text-gray-300;
+ @apply border-l-2 border-gitify-accent bg-gitify-accent-soft pl-4 pr-3 py-2 my-3 rounded-r-md not-italic text-gitify-muted;
}
.faq pre {
@@ -49,33 +99,23 @@ a:not(.gitify-repo) {
}
.faq th {
- @apply text-left font-semibold border-b border-gray-200 dark:border-gray-700 pb-2;
+ @apply text-left font-semibold border-b border-gitify-line pb-2;
}
.faq td {
- @apply py-1.5 border-b border-gray-100 dark:border-gray-800 align-top;
+ @apply py-1.5 border-b border-gitify-line/50 align-top;
}
.faq tr:last-child td {
@apply border-b-0;
}
-.accordion__title {
- h3 {
- @apply text-base font-medium;
- }
-}
-
-.accordion__content {
- @apply text-base;
-}
-
.faq-item summary {
@apply relative;
}
.faq-copy-link {
- @apply absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded opacity-0 text-gray-400 hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all;
+ @apply absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded opacity-0 text-gitify-muted hover:text-gitify-accent-bright hover:bg-gitify-raised transition-all;
}
.faq-item summary:hover .faq-copy-link,
@@ -84,5 +124,5 @@ a:not(.gitify-repo) {
}
.faq-copy-link--copied {
- @apply opacity-100 text-green-500;
+ @apply opacity-100 text-gitify-accent;
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f96bbfbf..6f296e5a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,4 @@
import type { Config } from 'tailwindcss';
-import colors from 'tailwindcss/colors';
import TailwindCSSMotion from 'tailwindcss-motion';
const config: Config = {
@@ -8,28 +7,33 @@ const config: Config = {
extend: {
colors: {
gitify: {
- navbar: '#24292e',
- footer: colors.gray[800],
- section: {
- light: colors.gray[50],
- dark: colors.gray[800],
- },
- hero: colors.gray[100],
- repo: {
- hover: colors.gray[300],
- },
- link: colors.white,
- download: {
- link: colors.black,
- rest: colors.green[700],
- hover: colors.green[800],
- },
- button: {
- rest: colors.blue[600],
- hover: colors.blue[700],
- },
+ ink: '#0A0E13',
+ surface: '#10151C',
+ raised: '#171E27',
+ line: 'rgba(148, 163, 184, 0.14)',
+ accent: '#3FB950',
+ 'accent-bright': '#56D364',
+ 'accent-soft': 'rgba(63, 185, 80, 0.12)',
+ text: '#E6EDF3',
+ muted: '#8B98A9',
},
},
+ fontFamily: {
+ sans: ['"Instrument Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+ display: [
+ '"Space Grotesk"',
+ '"Instrument Sans"',
+ 'ui-sans-serif',
+ 'system-ui',
+ 'sans-serif',
+ ],
+ mono: [
+ '"JetBrains Mono"',
+ 'ui-monospace',
+ 'SFMono-Regular',
+ 'monospace',
+ ],
+ },
},
},
plugins: [TailwindCSSMotion],