create-rush-cms 0.0.2 → 0.2.0

package/template/src/components/list-page.astro

@@ -0,0 +1,95 @@
+---
+import { getRush, getUrls } from '@rushcms/astro'
+import Hreflang from '@rushcms/astro/components/hreflang.astro'
+import RushImage from '@rushcms/astro/components/rush-image.astro'
+import type { Alternate, Entry, LocaleCode } from '@rushcms/client'
+import Base from '../layouts/base.astro'
+import { formatDate } from '../lib/locale'
+
+type PageUrl = (page: number) => string | undefined
+
+type Props = {
+	locale: LocaleCode
+	title: string
+	page: number
+	lastPage: number
+	entries: Entry[]
+	pageUrl: PageUrl
+	translations?: Alternate[]
+}
+
+const { locale, title, page, lastPage, entries, pageUrl, translations = [] } = Astro.props
+const urls = getUrls(Astro)
+const site = await getRush(Astro).site.get()
+const previous = page > 1 ? pageUrl(page - 1) : undefined
+const next = page < lastPage ? pageUrl(page + 1) : undefined
+const current = pageUrl(page)
+const canonical = Astro.site && current !== undefined ? new URL(current, Astro.site) : undefined
+const heading = page > 1 ? `${title} (${page}/${lastPage})` : title
+---
+
+<Base locale={locale} title={`${heading} | ${site.name}`} translations={translations}>
+	{canonical && <link slot="head" rel="canonical" href={canonical.href} />}
+	{page === 1 && <Hreflang slot="head" alternates={translations} />}
+	<div class="mx-auto max-w-6xl px-6 py-16">
+		<header class="max-w-3xl">
+			<h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
+			{
+				lastPage > 1 && (
+					<p class="mt-2 text-muted">
+						Page {page} of {lastPage}
+					</p>
+				)
+			}
+		</header>
+		{
+			entries.length > 0 ? (
+				<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+					{entries.map((entry) => (
+						<li>
+							<article class="card group relative flex h-full flex-col">
+								{entry.featured_image?.url && (
+									<RushImage
+										media={entry.featured_image}
+										class="mb-4 aspect-video w-full rounded-lg object-cover"
+									/>
+								)}
+								<h2 class="text-lg font-medium group-hover:text-accent">
+									<a href={urls.servedPath(entry, locale)} class="after:absolute after:inset-0">
+										{entry.title}
+									</a>
+								</h2>
+								{entry.excerpt && <p class="mt-2 line-clamp-3 text-muted">{entry.excerpt}</p>}
+								<p class="mt-auto pt-4 text-sm text-muted">
+									<time datetime={entry.published_at}>
+										{formatDate(entry.published_at, locale)}
+									</time>
+								</p>
+							</article>
+						</li>
+					))}
+				</ul>
+			) : (
+				<p class="mt-12 text-muted">Nothing has been published here yet.</p>
+			)
+		}
+		{
+			lastPage > 1 && (
+				<nav aria-label="Pagination" class="mt-12 flex items-center justify-between gap-4">
+					{previous ? (
+						<a href={previous} rel="prev" class="button button-secondary">
+							Previous page
+						</a>
+					) : (
+						<span />
+					)}
+					{next && (
+						<a href={next} rel="next" class="button button-secondary">
+							Next page
+						</a>
+					)}
+				</nav>
+			)
+		}
+	</div>
+</Base>

package/template/src/components/nav-links.astro

@@ -0,0 +1,33 @@
+---
+import type { NavigationLink } from '@rushcms/client'
+
+type Props = {
+	links: NavigationLink[]
+	nested?: boolean
+}
+
+const { links, nested = false } = Astro.props
+---
+
+<ul class:list={['nav-links', nested ? 'nav-links-nested' : 'nav-links-top']}>
+	{
+		links.map((link) => (
+			<li class="nav-item">
+				{link.href === undefined ? (
+					<span class="nav-label">{link.label}</span>
+				) : (
+					<a
+						{...link.attributes}
+						href={link.href}
+						target={link.target}
+						rel={link.rel}
+						class:list={['nav-link', link.className]}
+					>
+						{link.label}
+					</a>
+				)}
+				{link.children.length > 0 && <Astro.self links={link.children} nested />}
+			</li>
+		))
+	}
+</ul>

package/template/src/components/site-footer.astro

@@ -0,0 +1,29 @@
+---
+import type { NavigationLink } from '@rushcms/client'
+import NavLinks from './nav-links.astro'
+
+type Props = {
+	name: string
+	links: NavigationLink[]
+}
+
+const { name, links } = Astro.props
+---
+
+<footer class="border-t border-line">
+	<div
+		class="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 text-sm text-muted md:flex-row md:items-start md:justify-between"
+	>
+		<p>
+			&copy; {`${new Date().getFullYear()} ${name}`}. Powered by{' '}
+			<span class="font-medium text-ink">Rush CMS</span>.
+		</p>
+		{
+			links.length > 0 && (
+				<nav aria-label="Footer" class="footer-nav">
+					<NavLinks links={links} />
+				</nav>
+			)
+		}
+	</div>
+</footer>

package/template/src/components/site-header.astro

@@ -0,0 +1,36 @@
+---
+import type { Alternate, LocaleCode, NavigationLink } from '@rushcms/client'
+import LanguageSwitcher from './language-switcher.astro'
+import NavLinks from './nav-links.astro'
+
+type Props = {
+	name: string
+	home: string
+	links: NavigationLink[]
+	locale: LocaleCode
+	translations: Alternate[]
+}
+
+const { name, home, links, locale, translations } = Astro.props
+---
+
+<header class="relative z-30 border-b border-line bg-surface/80 backdrop-blur">
+	<div
+		class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-8 gap-y-3 px-6 py-4"
+	>
+		<a href={home} class="flex items-center gap-2 text-lg font-semibold tracking-tight">
+			<img src="/favicon.svg" alt="" width="28" height="28" />
+			<span>{name}</span>
+		</a>
+		<div class="flex flex-wrap items-center gap-x-6 gap-y-2">
+			{
+				links.length > 0 && (
+					<nav aria-label="Main" class="site-nav">
+						<NavLinks links={links} />
+					</nav>
+				)
+			}
+			<LanguageSwitcher locale={locale} translations={translations} />
+		</div>
+	</div>
+</header>

package/template/src/layouts/base.astro

@@ -0,0 +1,49 @@
+---
+import { getNavigation, getRush, getUrls } from '@rushcms/astro'
+import PreviewBanner from '@rushcms/astro/components/preview-banner.astro'
+import { optional, toBcp47 } from '@rushcms/client'
+import type { Alternate, LocaleCode } from '@rushcms/client'
+import SiteFooter from '../components/site-footer.astro'
+import SiteHeader from '../components/site-header.astro'
+import '../styles/global.css'
+
+type Props = {
+	locale: LocaleCode
+	title?: string | undefined
+	translations?: Alternate[]
+}
+
+const { locale, title, translations = [] } = Astro.props
+const site = await getRush(Astro).site.get()
+const home = getUrls(Astro).homepage(locale)
+// TODO: create a navigation with the key "main" in Rush CMS, or change the key here.
+const main = (await optional(getNavigation(Astro, 'main'))) ?? []
+// TODO: create a navigation with the key "footer" in Rush CMS, or change the key here.
+const footer = (await optional(getNavigation(Astro, 'footer'))) ?? []
+---
+
+<!doctype html>
+<html lang={toBcp47(locale)}>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		{title !== undefined && <title>{title}</title>}
+		<slot name="head" />
+	</head>
+	<body class="flex min-h-screen flex-col bg-canvas font-sans text-ink antialiased">
+		<a
+			href="#content"
+			class="sr-only rounded-md bg-accent px-4 py-2 font-medium text-accent-ink focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50"
+		>
+			Skip to content
+		</a>
+		<PreviewBanner />
+		<SiteHeader name={site.name} home={home} links={main} locale={locale} translations={translations} />
+		<main id="content" tabindex="-1" class="flex-1 focus:outline-none">
+			<slot />
+		</main>
+		<SiteFooter name={site.name} links={footer} />
+	</body>
+</html>

package/template/src/lib/locale.ts

@@ -0,0 +1,12 @@
+import { toBcp47 } from '@rushcms/client'
+import type { LocaleCode } from '@rushcms/client'
+
+export function languageName(locale: LocaleCode): string {
+	const tag = toBcp47(locale)
+	const name = new Intl.DisplayNames([tag], { type: 'language' }).of(tag) ?? tag
+	return name.charAt(0).toLocaleUpperCase(tag) + name.slice(1)
+}
+
+export function formatDate(value: string, locale: LocaleCode): string {
+	return new Intl.DateTimeFormat(toBcp47(locale), { dateStyle: 'long' }).format(new Date(value))
+}

package/template/src/lib/route-page.ts

@@ -0,0 +1,15 @@
+import { resolvePage } from '@rushcms/astro'
+import type { EntryMissing, SitePage, SitePageContext } from '@rushcms/astro'
+import type { APIContext } from 'astro'
+
+export type RouteContext = SitePageContext & Pick<APIContext, 'redirect'>
+
+export type RoutedPage = SitePage | EntryMissing
+
+export async function routePage(context: RouteContext): Promise<RoutedPage | Response> {
+	const page = await resolvePage(context)
+	if (page.kind === 'moved') {
+		return context.redirect(page.location, page.permanent ? 301 : 302)
+	}
+	return page
+}

package/template/src/pages/404.astro

@@ -0,0 +1,17 @@
+---
+import type { SitePageProps } from '@rushcms/astro'
+import { routePage } from '../lib/route-page'
+import NotFound from '../views/not-found.astro'
+
+export const prerender = false
+
+type Props = SitePageProps
+
+const page = await routePage(Astro)
+if (page instanceof Response) {
+	return page
+}
+Astro.response.status = 404
+---
+
+<NotFound />

package/template/src/pages/[...locale]/contact.astro

@@ -0,0 +1,59 @@
+---
+import { getRush, getUrls } from '@rushcms/astro'
+import Form from '@rushcms/astro/components/form.astro'
+import { optional } from '@rushcms/client'
+import Base from '../../layouts/base.astro'
+import NotFound from '../../views/not-found.astro'
+
+export const prerender = false
+
+const locale = getUrls(Astro).localeOf(Astro.params.locale)
+// TODO: create a form with the key "contact" in Rush CMS, or change the key here.
+const form = locale === undefined ? undefined : await optional(getRush(Astro).forms.get('contact'))
+const notice = locale !== undefined && form === undefined && import.meta.env.DEV
+if (form === undefined && !notice) {
+	Astro.response.status = 404
+}
+---
+
+{
+	locale !== undefined && (form !== undefined || notice) ? (
+		<Base locale={locale} title={form?.name ?? 'Contact'}>
+			<div class="mx-auto max-w-2xl px-6 py-16">
+				<h1 class="text-4xl font-semibold tracking-tight">{form?.name ?? 'Contact'}</h1>
+				{form ? (
+					<div class="contact-form mt-10">
+						<Form
+							form={form}
+							submitLabel="Send"
+							messages={{
+								sent: 'Thank you, your message was sent.',
+								error: 'Your message could not be sent. Please try again.',
+								required: 'This field is required.',
+								invalid_option: 'Choose one of the options.',
+								invalid_email: 'Enter a valid email address.',
+								invalid_url: 'Enter a valid URL.',
+								invalid_number: 'Enter a number.',
+								invalid_format: 'Check the format of this field.',
+								too_small: 'Enter {min} or more.',
+								too_large: 'Enter {max} or less.',
+								too_short: 'Use at least {min} characters.',
+								too_long: 'Use at most {max} characters.',
+								rate_limited: 'Too many attempts. Try again in a minute.',
+								captcha_failed: 'The captcha check failed. Please try again.'
+							}}
+						/>
+					</div>
+				) : (
+					<p lang="en" class="mt-6 rounded-lg border border-dashed border-line px-5 py-4 text-muted">
+						This page shows the Rush CMS form with the key <code class="font-mono">contact</code>.
+						Create that form in Rush CMS and reload. This notice appears only in{' '}
+						<code class="font-mono">astro dev</code>; production builds answer 404 here.
+					</p>
+				)}
+			</div>
+		</Base>
+	) : (
+		<NotFound />
+	)
+}

package/template/src/pages/[...path].astro

@@ -0,0 +1,34 @@
+---
+import { getUrls } from '@rushcms/astro'
+import type { SitePageProps } from '@rushcms/astro'
+import { routePage } from '../lib/route-page'
+import Home from '../views/home.astro'
+import { viewsFor } from '../views/index'
+import NotFound from '../views/not-found.astro'
+import Taxonomy from '../views/taxonomy.astro'
+
+export * from '@rushcms/astro/site-paths'
+
+type Props = SitePageProps
+
+const page = await routePage(Astro)
+if (page instanceof Response) {
+	return page
+}
+if (page.kind === 'missing') {
+	Astro.response.status = 404
+}
+const collection =
+	page.kind === 'collection'
+		? page.collection
+		: page.kind === 'found'
+			? page.entry.collection
+			: undefined
+const { list: List, entry: Entry } = viewsFor(collection, getUrls(Astro))
+---
+
+{page.kind === 'homepage' && <Home page={page} />}
+{page.kind === 'collection' && <List page={page} />}
+{page.kind === 'taxonomy' && <Taxonomy page={page} />}
+{page.kind === 'found' && <Entry entry={page.entry} locale={page.locale} />}
+{page.kind === 'missing' && <NotFound />}

package/template/src/pages/robots.txt.ts

@@ -0,0 +1,10 @@
+import type { APIRoute } from 'astro'
+import { RUSH_PREVIEW } from 'astro:env/server'
+
+export const GET: APIRoute = ({ site }) => {
+	const rules = RUSH_PREVIEW ? 'Disallow: /' : 'Allow: /'
+	const sitemap = site === undefined ? '' : `\nSitemap: ${new URL('/sitemap.xml', site).href}\n`
+	return new Response(`User-agent: *\n${rules}\n${sitemap}`, {
+		headers: { 'Content-Type': 'text/plain; charset=utf-8' }
+	})
+}

package/template/src/pages/sitemap.xml.ts

@@ -0,0 +1,4 @@
+import { sitemapResponse } from '@rushcms/astro'
+import type { APIRoute } from 'astro'
+
+export const GET: APIRoute = (context) => sitemapResponse({ context })

package/template/src/styles/global.css

@@ -0,0 +1,278 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+@theme {
+	--font-sans:
+		ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+		sans-serif;
+	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	--color-canvas: oklch(0.985 0.004 265);
+	--color-surface: oklch(1 0 0);
+	--color-ink: oklch(0.23 0.025 265);
+	--color-muted: oklch(0.5 0.025 265);
+	--color-line: oklch(0.91 0.012 265);
+	--color-accent: oklch(0.52 0.21 277);
+	--color-accent-ink: oklch(0.99 0.005 277);
+	--color-accent-soft: oklch(0.93 0.045 277);
+	--color-danger: oklch(0.55 0.2 25);
+	--color-success: oklch(0.55 0.14 155);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-canvas: oklch(0.17 0.018 265);
+		--color-surface: oklch(0.21 0.02 265);
+		--color-ink: oklch(0.95 0.008 265);
+		--color-muted: oklch(0.74 0.02 265);
+		--color-line: oklch(0.31 0.022 265);
+		--color-accent: oklch(0.76 0.14 277);
+		--color-accent-ink: oklch(0.18 0.03 277);
+		--color-accent-soft: oklch(0.3 0.07 277);
+		--color-danger: oklch(0.72 0.17 25);
+		--color-success: oklch(0.75 0.14 155);
+	}
+}
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 3px;
+		border-radius: 4px;
+	}
+
+	::selection {
+		background-color: var(--color-accent-soft);
+	}
+}
+
+@layer components {
+	.button,
+	.contact-form button[type='submit'] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		border-radius: 9999px;
+		padding: 0.625rem 1.25rem;
+		font-weight: 500;
+		transition:
+			background-color 150ms,
+			border-color 150ms,
+			color 150ms;
+	}
+
+	.button-primary,
+	.contact-form button[type='submit'] {
+		background-color: var(--color-accent);
+		color: var(--color-accent-ink);
+	}
+
+	.button-primary:hover,
+	.contact-form button[type='submit']:hover {
+		background-color: color-mix(in oklch, var(--color-accent) 88%, var(--color-ink));
+	}
+
+	.button-secondary {
+		border: 1px solid var(--color-line);
+		background-color: var(--color-surface);
+	}
+
+	.button-secondary:hover {
+		border-color: var(--color-accent);
+	}
+
+	.card {
+		border: 1px solid var(--color-line);
+		border-radius: 1rem;
+		background-color: var(--color-surface);
+		padding: 1.5rem;
+		transition:
+			border-color 150ms,
+			box-shadow 150ms;
+	}
+
+	.card:hover,
+	.card:focus-within {
+		border-color: var(--color-accent);
+		box-shadow: 0 8px 30px -12px color-mix(in oklch, var(--color-accent) 40%, transparent);
+	}
+
+	.nav-links-top {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem 1.25rem;
+	}
+
+	.nav-item {
+		position: relative;
+	}
+
+	.nav-link,
+	.nav-label {
+		display: inline-block;
+		padding-block: 0.25rem;
+		color: var(--color-muted);
+	}
+
+	.nav-link:hover,
+	.nav-link[aria-current] {
+		color: var(--color-ink);
+	}
+
+	.site-nav .nav-links-nested {
+		position: absolute;
+		top: 100%;
+		left: -1rem;
+		z-index: 20;
+		display: none;
+		min-width: 12rem;
+		border: 1px solid var(--color-line);
+		border-radius: 0.75rem;
+		background-color: var(--color-surface);
+		padding: 0.5rem 1rem;
+		box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.25);
+	}
+
+	.site-nav .nav-item:hover > .nav-links-nested,
+	.site-nav .nav-item:focus-within > .nav-links-nested {
+		display: block;
+	}
+
+	.footer-nav .nav-links-top {
+		align-items: flex-start;
+		gap: 1rem 2.5rem;
+	}
+
+	.footer-nav .nav-links-nested {
+		margin-top: 0.25rem;
+	}
+
+	[data-rush-preview] {
+		position: sticky;
+		top: 0;
+		z-index: 40;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem 1rem;
+		background-color: var(--color-ink);
+		padding: 0.5rem 1rem;
+		color: var(--color-canvas);
+		font-size: 0.875rem;
+	}
+
+	[data-rush-preview] a {
+		font-weight: 600;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+	}
+
+	.contact-form form {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	.contact-form label,
+	.contact-form legend {
+		display: block;
+		margin-bottom: 0.375rem;
+		font-weight: 500;
+	}
+
+	.contact-form fieldset label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 400;
+	}
+
+	.contact-form input:not([type='checkbox'], [type='radio']),
+	.contact-form textarea,
+	.contact-form select {
+		width: 100%;
+		border: 1px solid var(--color-line);
+		border-radius: 0.5rem;
+		background-color: var(--color-surface);
+		padding: 0.625rem 0.75rem;
+	}
+
+	.contact-form textarea {
+		min-height: 9rem;
+	}
+
+	.contact-form input:focus-visible,
+	.contact-form textarea:focus-visible,
+	.contact-form select:focus-visible {
+		outline-offset: 0;
+		border-color: var(--color-accent);
+	}
+
+	.contact-form input[type='checkbox'],
+	.contact-form input[type='radio'] {
+		accent-color: var(--color-accent);
+	}
+
+	.contact-form [id$='-help'] {
+		margin-top: 0.375rem;
+		color: var(--color-muted);
+		font-size: 0.875rem;
+	}
+
+	.contact-form [data-rush-error-for] {
+		margin-top: 0.375rem;
+		color: var(--color-danger);
+		font-size: 0.875rem;
+	}
+
+	.contact-form [data-rush-status] {
+		border: 1px solid var(--color-line);
+		border-radius: 0.5rem;
+		padding: 0.75rem 1rem;
+	}
+
+	.contact-form [data-rush-status][data-state='sent'] {
+		border-color: var(--color-success);
+		color: var(--color-success);
+	}
+
+	.contact-form [data-rush-status][data-state='error'] {
+		border-color: var(--color-danger);
+		color: var(--color-danger);
+	}
+
+	.contact-form button[type='submit'] {
+		justify-self: start;
+		cursor: pointer;
+	}
+
+	.contact-form button[type='submit']:disabled {
+		cursor: progress;
+		opacity: 0.7;
+	}
+}
+
+.prose {
+	--tw-prose-body: var(--color-ink);
+	--tw-prose-headings: var(--color-ink);
+	--tw-prose-lead: var(--color-muted);
+	--tw-prose-links: var(--color-accent);
+	--tw-prose-bold: var(--color-ink);
+	--tw-prose-counters: var(--color-muted);
+	--tw-prose-bullets: var(--color-line);
+	--tw-prose-hr: var(--color-line);
+	--tw-prose-quotes: var(--color-ink);
+	--tw-prose-quote-borders: var(--color-accent);
+	--tw-prose-captions: var(--color-muted);
+	--tw-prose-kbd: var(--color-ink);
+	--tw-prose-code: var(--color-ink);
+	--tw-prose-pre-code: var(--color-ink);
+	--tw-prose-pre-bg: var(--color-surface);
+	--tw-prose-th-borders: var(--color-line);
+	--tw-prose-td-borders: var(--color-line);
+}