Skip to content

feat(catalog): port the closed alpha landing page design #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
miaulalala wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(catalog): port the closed alpha landing page design #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,34 @@
@import "tailwindcss";

@layer base {
:root {
--nc-blue: #0082c9;
--nc-blue-dark: #006aa3;
}
/*
* Design tokens for the "Build apps for 30 million users" front-end.
*
* Declared in @theme rather than as plain custom properties so each one also
* generates the matching utilities (bg-navy, text-muted, border-rule). The
* catalog is then styled the same way as the rest of the app — utility classes
* in the components — instead of needing a parallel stylesheet.
*/
@theme {
--color-navy: #003356;
--color-navy-mid: #00477a;
--color-nc-blue: #0082c9;
--color-nc-blue-dark: #006aa3;
--color-nc-blue-light: #e8f4fd;
--color-nc-green: #46a35e;
/*
* White on --color-nc-green is only 3.15:1, which fails WCAG AA for anything
* short of large bold text. Use this for green that carries white text, and
* for green text on a light background.
*/
--color-nc-green-dark: #2d7a45;
--color-nc-green-light: #e8f5e9;
--color-ink: #1a1f2e;
--color-muted: #5a6a7e;
--color-rule: #dde3ea;
--color-off-white: #f8fafb;

/* Mono is load-bearing in this design: eyebrows, stat numbers, card meta. */
--font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
}

/* Prose styles for markdown content */
Expand Down
12 changes: 10 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { Inter, JetBrains_Mono } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

// Exposed as a variable rather than a class, because --font-mono in globals.css
// points at it and the mono utilities are used all over the catalog.
const jetBrainsMono = JetBrains_Mono({
subsets: ['latin'],
weight: ['400', '600'],
variable: '--font-jetbrains-mono',
})

export const metadata: Metadata = {
title: 'Nextcloud Developer Course (Beta)',
description: 'Learn to build Nextcloud apps — PHP and ExApp tracks. Beta: only the beginner tracks are written so far.',
Expand All @@ -12,7 +20,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={`${inter.className} bg-gray-50 text-gray-900 antialiased`}>
<body className={`${inter.className} ${jetBrainsMono.variable} bg-off-white text-ink antialiased`}>
{children}
</body>
</html>
Expand Down
5 changes: 4 additions & 1 deletion app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { getManifest } from '@/lib/manifest'
import { getWrittenModules } from '@/lib/content'
import CatalogClient from '@/components/CatalogClient'

export default function HomePage() {
const manifest = getManifest()
return <CatalogClient manifest={manifest} />
// Availability is a filesystem question, so it is answered here on the server
// and handed to the client component alongside the manifest.
return <CatalogClient manifest={manifest} writtenModules={getWrittenModules(manifest)} />
}
Loading