+
Support
+
+ Frequently Asked Questions
+
+
+ Everything you need to know about installing, using and contributing to
+ Gitify.
+
- Answers are grouped by topic. Use the copy-link control on a question to
- share it.
-
-
{category}
+ {
+ grouped.map(({ category, faqs }) => (
+
+
+ {category}
+
{faqs.map((faq) => (
@@ -75,204 +83,205 @@ const grouped = CATEGORY_ORDER.map((category) => ({
))}
- ))}
+ ))
+ }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2980d7b9..b2a3f357 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,72 +1,239 @@
---
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, Vite+, TanStack Query, Zustand, 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 4cfefd2e..1c33d7b2 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,91 +1,85 @@
/** 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;
}
-.faq p {
- @apply mb-3;
+body {
+ @apply bg-gitify-ink text-gitify-text font-sans antialiased;
}
-.faq p:last-child {
- @apply mb-0;
+::selection {
+ @apply bg-gitify-accent/30 text-gitify-text;
}
-.faq a {
- @apply text-gitify-button-rest underline underline-offset-4;
- cursor: pointer;
+/** 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;
}
-.faq ul {
- @apply list-disc ml-4 mb-3;
+/** Accordion (accessible-astro-components) overrides */
+.accordion .item .wrapper {
+ border-color: rgba(148, 163, 184, 0.14);
}
-.faq ul > li {
- @apply ml-2 my-1;
- overflow-wrap: break-word;
+.accordion .item .title {
+ @apply rounded-lg px-2 transition-colors;
}
-.faq ol {
- @apply list-decimal ml-4 mb-3;
+.accordion .item .title:hover,
+.accordion .item .title:focus-visible {
+ @apply text-gitify-accent-bright;
+ text-decoration: none;
}
-.faq ol > li {
- @apply ml-2 my-1;
- overflow-wrap: break-word;
-}
-
-.faq h3 {
- @apply mt-6 mb-2 pb-1 text-sm font-semibold tracking-wide text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700;
- scroll-margin-top: 1rem;
-}
-
-.faq h4 {
- @apply mt-4 mb-1.5 text-sm font-semibold text-gray-800 dark:text-gray-200;
- scroll-margin-top: 1rem;
+.accordion .item .content {
+ @apply text-gitify-muted;
}
-.faq-meta-label {
- @apply text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mr-1;
+.accordion__title {
+ h3 {
+ @apply text-base font-medium;
+ }
}
-.faq-jump,
-.faq-related {
- @apply flex flex-wrap items-center gap-2 my-4 px-3 py-2.5 rounded-lg bg-gray-50 dark:bg-gray-800/70;
+.accordion__content {
+ @apply text-base;
}
-.faq-jump {
- @apply mb-5;
+/** FAQ markdown content */
+.faq p {
+ @apply mb-3;
}
-.faq-jump + h3 {
- @apply mt-2;
+.faq p:last-child {
+ @apply mb-0;
}
-.faq-related {
- @apply mt-6;
+.faq a {
+ @apply text-gitify-accent-bright hover:underline;
}
-.faq-jump a,
-.faq-related a {
- @apply inline-flex items-center rounded-full px-2.5 py-1 text-sm font-semibold no-underline bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-600 text-gitify-button-rest;
+.faq ul {
+ @apply list-disc ml-4 mb-3;
}
-.faq-jump a:hover,
-.faq-related a:hover {
- @apply bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800;
+.faq ul > li {
+ @apply ml-2;
}
.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 {
@@ -93,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 {
@@ -105,31 +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;
}
-.faq-item .accordion__title h3 {
- @apply text-lg font-semibold;
-}
-
-.faq-item .accordion__content {
- @apply ml-1 pl-5 border-l-2 border-gray-200 dark:border-gray-700 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,
@@ -138,9 +124,59 @@ a:not(.gitify-repo) {
}
.faq-copy-link--copied {
- @apply opacity-100 text-green-500;
+ @apply opacity-100 text-gitify-accent;
}
.faq-copy-link--failed {
@apply opacity-100 text-red-500;
}
+
+.faq ol {
+ @apply list-decimal ml-4 mb-3;
+}
+
+.faq ol > li {
+ @apply ml-2 my-1;
+ overflow-wrap: break-word;
+}
+
+.faq h3 {
+ @apply mt-6 mb-2 pb-1 text-sm font-semibold tracking-wide text-gitify-text border-b border-gitify-line;
+ scroll-margin-top: 1rem;
+}
+
+.faq h4 {
+ @apply mt-4 mb-1.5 text-sm font-semibold text-gitify-text;
+ scroll-margin-top: 1rem;
+}
+
+.faq-meta-label {
+ @apply text-xs font-semibold uppercase tracking-wide text-gitify-muted mr-1;
+}
+
+.faq-jump,
+.faq-related {
+ @apply flex flex-wrap items-center gap-2 my-4 px-3 py-2.5 rounded-lg bg-gitify-raised/60 border border-gitify-line;
+}
+
+.faq-jump {
+ @apply mb-5;
+}
+
+.faq-jump + h3 {
+ @apply mt-2;
+}
+
+.faq-related {
+ @apply mt-6;
+}
+
+.faq-jump a,
+.faq-related a {
+ @apply inline-flex items-center rounded-full px-2.5 py-1 text-sm font-semibold no-underline bg-gitify-surface border border-gitify-line text-gitify-accent-bright;
+}
+
+.faq-jump a:hover,
+.faq-related a:hover {
+ @apply border-gitify-accent/50 bg-gitify-accent-soft;
+}
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],