@astronox/core 0.1.0

package/src/primitives/text/TextBlock/TextBlock.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'p'> & {
+  'data-tone'?: Tone;
+  preserveBreaks?: boolean;
+  text: string;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  preserveBreaks = false,
+  text,
+  ...attrs
+}: Props = Astro.props;
+const paragraphs = preserveBreaks
+  ? text.split(/\r?\n(?:[ \t]*\r?\n)+/)
+  : [];
+---
+
+{
+  preserveBreaks ? (
+    <div
+      {...attrs}
+      class:list={['text-block', className]}
+      data-widget="text-block"
+      data-preserve-breaks
+      data-tone={dataTone}
+    >
+      {paragraphs.map((paragraph) => (
+        <p class="text-block__paragraph">{paragraph}</p>
+      ))}
+    </div>
+  ) : (
+    <p
+      {...attrs}
+      class:list={['text-block', className]}
+      data-widget="text-block"
+      data-tone={dataTone}
+    >
+      {text}
+    </p>
+  )
+}

package/src/primitives/text/TextBlock/TextBlock.css

@@ -0,0 +1,21 @@
+.text-block {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.text-block[data-preserve-breaks] {
+  display: grid;
+  gap: var(--nox-content-padding, var(--nox-space-5));
+  line-height: 1.5;
+}
+
+.text-block__paragraph {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+@container (width < 32rem) {
+  .text-block[data-preserve-breaks] {
+    line-height: 1.4;
+  }
+}

package/src/seo/StaticRedirect.astro

@@ -0,0 +1,32 @@
+---
+import { createAbsoluteUrl, normalizePathname } from './url';
+
+type Props = {
+  destination: string;
+  lang: string;
+  siteUrl: string;
+  title: string;
+};
+
+const { destination, lang, siteUrl, title } = Astro.props;
+const normalizedDestination = normalizePathname(destination);
+const canonical = createAbsoluteUrl(siteUrl, normalizedDestination);
+const refresh = `0; url=${canonical}`;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+    <link rel="canonical" href={canonical} />
+    <script is:inline define:vars={{ destination: normalizedDestination }}>
+      window.location.replace(
+        `${destination}${window.location.search}${window.location.hash}`,
+      );
+    </script>
+    <meta http-equiv="refresh" content={refresh} />
+  </head>
+  <body></body>
+</html>

package/src/seo/index.ts

@@ -0,0 +1,6 @@
+export { default as StaticRedirect } from './StaticRedirect.astro';
+export * from './pageSeo';
+export * from './robots';
+export * from './sitemap';
+export * from './structuredData';
+export * from './url';

package/src/seo/pageSeo.ts

@@ -0,0 +1,99 @@
+import type { PageMeta } from '../config/pageMeta';
+import { formatRobotsDirective } from '../config/pageMeta';
+import type { SiteConfig, TwitterCardType } from '../config/siteConfig';
+import { createAbsoluteUrl, createCanonicalUrl } from './url';
+
+export type ResolvedPageSeo = {
+  lang: string;
+  documentTitle: string;
+  description: string | undefined;
+  canonicalUrl: string;
+  robots: string | undefined;
+  socialImageUrl: string | undefined;
+  socialImageAlt: string | undefined;
+  socialImageType: string | undefined;
+  socialImageWidth: number | undefined;
+  socialImageHeight: number | undefined;
+  openGraphType: 'article' | 'website';
+  openGraphLocale: string;
+  openGraphLocaleAlternates: readonly string[];
+  alternates: readonly {
+    lang: string;
+    href: string;
+  }[];
+  seoType: 'article' | 'collection-page' | 'web-page';
+  datePublished: string | undefined;
+  twitterCard: TwitterCardType;
+};
+
+export function resolvePageSeo({
+  meta,
+  pathname,
+  site,
+}: {
+  meta: PageMeta;
+  pathname: string;
+  site: SiteConfig;
+}): ResolvedPageSeo {
+  const lang = meta.lang ?? site.defaultMeta.lang;
+  const description = meta.description ?? site.defaultMeta.description;
+  const canonicalUrl = createCanonicalUrl(
+    site.seo.siteUrl,
+    meta.canonical ?? pathname,
+  );
+  const socialImage = meta.socialImage ?? site.seo.defaultSocialImage;
+  const localeConfig = site.locales.find(
+    (locale) =>
+      locale.languageTag === lang ||
+      locale.id === lang ||
+      locale.intlLocale === lang,
+  );
+
+  return {
+    lang,
+    documentTitle: formatDocumentTitle({
+      branding: meta.titleBranding,
+      pageTitle: meta.title,
+      separator: site.seo.titleSeparator,
+      siteName: site.identity.name,
+    }),
+    description,
+    canonicalUrl,
+    robots: formatRobotsDirective(meta.robots ?? site.defaultMeta.robots),
+    socialImageUrl: socialImage
+      ? createAbsoluteUrl(site.seo.siteUrl, socialImage)
+      : undefined,
+    socialImageAlt: meta.socialImageAlt ?? site.seo.defaultSocialImageAlt,
+    socialImageType: meta.socialImageType ?? site.seo.defaultSocialImageType,
+    socialImageWidth: meta.socialImageWidth ?? site.seo.defaultSocialImageWidth,
+    socialImageHeight:
+      meta.socialImageHeight ?? site.seo.defaultSocialImageHeight,
+    openGraphType: meta.openGraphType ?? 'website',
+    openGraphLocale:
+      meta.openGraphLocale ?? localeConfig?.openGraphLocale ?? lang,
+    openGraphLocaleAlternates: meta.openGraphLocaleAlternates ?? [],
+    alternates: (meta.alternates ?? []).map((alternate) => ({
+      lang: alternate.lang,
+      href: createCanonicalUrl(site.seo.siteUrl, alternate.href),
+    })),
+    seoType: meta.seoType ?? 'web-page',
+    datePublished: meta.datePublished,
+    twitterCard: site.seo.twitterCard,
+  };
+}
+
+function formatDocumentTitle({
+  branding = 'append',
+  pageTitle,
+  separator,
+  siteName,
+}: {
+  branding?: PageMeta['titleBranding'];
+  pageTitle: string;
+  separator: string;
+  siteName: string;
+}): string {
+  return branding === 'none' || pageTitle === siteName
+    ? pageTitle
+    : `${pageTitle} ${separator} ${siteName}`;
+}

package/src/seo/robots.ts

@@ -0,0 +1,16 @@
+import { createAbsoluteUrl } from './url';
+
+export function renderRobotsTxt({
+  sitemapPath,
+  siteUrl,
+}: {
+  sitemapPath: string;
+  siteUrl: string;
+}): string {
+  return [
+    'User-agent: *',
+    'Allow: /',
+    `Sitemap: ${createAbsoluteUrl(siteUrl, sitemapPath)}`,
+    '',
+  ].join('\n');
+}

package/src/seo/sitemap.ts

@@ -0,0 +1,38 @@
+import { createAbsoluteUrl, normalizePathname } from './url';
+
+export type SitemapEntry = {
+  path: string;
+  lastModified?: string;
+};
+
+export function renderSitemap({
+  entries,
+  siteUrl,
+}: {
+  entries: readonly SitemapEntry[];
+  siteUrl: string;
+}): string {
+  const urls = entries
+    .map((entry) => renderSitemapUrl(entry, siteUrl))
+    .join('');
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}</urlset>\n`;
+}
+
+function renderSitemapUrl(entry: SitemapEntry, siteUrl: string): string {
+  const loc = createAbsoluteUrl(siteUrl, normalizePathname(entry.path));
+  const lastModified = entry.lastModified
+    ? `<lastmod>${escapeXml(entry.lastModified)}</lastmod>`
+    : '';
+
+  return `<url><loc>${escapeXml(loc)}</loc>${lastModified}</url>`;
+}
+
+function escapeXml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+}

package/src/seo/structuredData.ts

@@ -0,0 +1,133 @@
+import type { SiteConfig } from '../config/siteConfig';
+import type { BreadcrumbItem } from '../display/contracts';
+import { createAbsoluteUrl, createCanonicalUrl } from './url';
+
+export type JsonLdPrimitive = boolean | number | string | null;
+
+export type JsonLdValue =
+  | JsonLdPrimitive
+  | JsonLdValue[]
+  | {
+      [key: string]: JsonLdValue;
+    };
+
+export type JsonLdNode = {
+  [key: string]: JsonLdValue;
+};
+
+type JsonLdNodeInput = {
+  [key: string]: JsonLdValue | undefined;
+};
+
+export type WebPageStructuredDataInput = {
+  site: SiteConfig;
+  name: string;
+  description: string | undefined;
+  url: string;
+  lang: string;
+  type?: 'CollectionPage' | 'WebPage';
+};
+
+export type ArticleStructuredDataInput = {
+  site?: SiteConfig;
+  datePublished: string;
+  description: string | undefined;
+  headline: string;
+  lang?: string;
+  url: string;
+};
+
+export function createWebSiteJsonLd(site: SiteConfig): JsonLdNode {
+  const siteUrl = createAbsoluteUrl(site.seo.siteUrl, '/');
+
+  return removeUndefinedValues({
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    '@id': `${siteUrl}#website`,
+    name: site.identity.name,
+    alternateName: site.identity.shortName,
+    description: site.defaultMeta.description,
+    url: siteUrl,
+    inLanguage: site.defaultMeta.lang,
+  });
+}
+
+export function createWebPageJsonLd({
+  description,
+  lang,
+  name,
+  site,
+  type = 'WebPage',
+  url,
+}: WebPageStructuredDataInput): JsonLdNode {
+  const siteUrl = createAbsoluteUrl(site.seo.siteUrl, '/');
+
+  return removeUndefinedValues({
+    '@context': 'https://schema.org',
+    '@type': type,
+    '@id': `${url}#webpage`,
+    url,
+    name,
+    description,
+    inLanguage: lang,
+    isPartOf: {
+      '@id': `${siteUrl}#website`,
+    },
+  });
+}
+
+export function createArticleJsonLd({
+  site,
+  datePublished,
+  description,
+  headline,
+  lang,
+  url,
+}: ArticleStructuredDataInput): JsonLdNode {
+  const siteUrl = site ? createAbsoluteUrl(site.seo.siteUrl, '/') : undefined;
+
+  return removeUndefinedValues({
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    '@id': `${url}#article`,
+    headline,
+    description,
+    datePublished,
+    mainEntityOfPage: url,
+    inLanguage: lang,
+    isPartOf: siteUrl
+      ? {
+          '@id': `${siteUrl}#website`,
+        }
+      : undefined,
+  });
+}
+
+export function createBreadcrumbListJsonLd({
+  breadcrumbs,
+  siteUrl,
+}: {
+  breadcrumbs: readonly BreadcrumbItem[];
+  siteUrl: string;
+}): JsonLdNode {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumbs.map((breadcrumb, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: breadcrumb.label,
+      item: createCanonicalUrl(siteUrl, breadcrumb.href),
+    })),
+  };
+}
+
+export function serializeJsonLd(node: JsonLdNode): string {
+  return JSON.stringify(node).replace(/</g, '\\u003c');
+}
+
+function removeUndefinedValues(node: JsonLdNodeInput): JsonLdNode {
+  return Object.fromEntries(
+    Object.entries(node).filter(([, value]) => value !== undefined),
+  ) as JsonLdNode;
+}

package/src/seo/url.ts

@@ -0,0 +1,64 @@
+const absoluteUrlPattern = /^https?:\/\//i;
+
+export function createAbsoluteUrl(siteUrl: string, pathOrUrl: string): string {
+  const cleanValue = pathOrUrl.trim();
+
+  if (absoluteUrlPattern.test(cleanValue)) {
+    return new URL(cleanValue).toString();
+  }
+
+  return new URL(
+    ensureLeadingSlash(cleanValue),
+    normalizeSiteUrl(siteUrl),
+  ).toString();
+}
+
+export function createCanonicalUrl(siteUrl: string, pathOrUrl: string): string {
+  const cleanValue = pathOrUrl.trim();
+
+  if (absoluteUrlPattern.test(cleanValue)) {
+    const url = new URL(cleanValue);
+
+    url.hash = '';
+    url.pathname = normalizePathname(url.pathname);
+    url.search = '';
+
+    return url.toString();
+  }
+
+  return createAbsoluteUrl(siteUrl, normalizePathname(cleanValue));
+}
+
+export function normalizeSiteUrl(siteUrl: string): string {
+  const url = new URL(siteUrl);
+  url.hash = '';
+  url.search = '';
+
+  return url.toString();
+}
+
+export function normalizePathname(pathOrUrl: string): string {
+  const cleanValue = removeHashAndSearch(pathOrUrl.trim());
+
+  if (absoluteUrlPattern.test(cleanValue)) {
+    return normalizePathPart(new URL(cleanValue).pathname);
+  }
+
+  return normalizePathPart(ensureLeadingSlash(cleanValue));
+}
+
+function ensureLeadingSlash(pathname: string): string {
+  if (pathname.length === 0) {
+    return '/';
+  }
+
+  return pathname.startsWith('/') ? pathname : `/${pathname}`;
+}
+
+function normalizePathPart(pathname: string): string {
+  return pathname.length > 1 ? pathname.replace(/\/+$/, '') : '/';
+}
+
+function removeHashAndSearch(value: string): string {
+  return value.split('#')[0]?.split('?')[0] ?? value;
+}

package/src/styles/base.css

@@ -0,0 +1,148 @@
+* {
+  box-sizing: border-box;
+  scrollbar-color: var(--nox-scrollbar-thumb) var(--nox-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+*::-webkit-scrollbar {
+  width: var(--nox-scrollbar-size);
+  height: var(--nox-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--nox-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  border: 0.1875rem solid transparent;
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-scrollbar-thumb);
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--nox-scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+:where([data-scrollbar='native']) {
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+}
+
+:where([data-scrollbar='hidden']) {
+  scrollbar-width: none;
+}
+
+:where([data-scrollbar='hidden'])::-webkit-scrollbar {
+  display: none;
+}
+
+html {
+  min-width: 320px;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  background: var(--nox-page-background);
+  color: var(--nox-text);
+  font-family: var(--nox-font-body);
+}
+
+body {
+  display: grid;
+  height: 100vh;
+  min-height: 100vh;
+  grid-template-rows: auto minmax(0, 1fr);
+  margin: 0;
+  overflow: hidden;
+  background: var(--nox-page-background);
+}
+
+@supports (height: 100dvh) {
+  body {
+    height: 100dvh;
+    min-height: 100dvh;
+  }
+}
+
+a {
+  color: inherit;
+}
+
+a:focus-visible,
+button:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+button {
+  font: inherit;
+}
+
+img,
+svg,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+.site-viewport {
+  min-width: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--nox-page-background);
+  overscroll-behavior-y: contain;
+  scrollbar-gutter: stable both-edges;
+}
+
+.site-main {
+  --site-main-content-gap: var(--nox-space-5);
+
+  display: grid;
+  width: var(--nox-page-width);
+  margin: 0 auto;
+  padding-block: var(--site-main-content-gap) var(--nox-space-7);
+  gap: var(--nox-layout-gap);
+}
+
+.site-main__content {
+  display: grid;
+  min-width: 0;
+  gap: var(--site-main-content-gap);
+}
+
+.site-main:has(> .site-main__content > .breadcrumbs) {
+  padding-block-start: 0;
+}
+
+.site-main__content:has(> .breadcrumbs) {
+  gap: 0;
+}
+
+@media (width < 48rem) {
+  .site-main {
+    --site-main-content-gap: var(--nox-space-4);
+
+    padding-block-end: var(--nox-space-6);
+  }
+}
+
+code {
+  padding: 0.125em 0.375em;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface-muted);
+  color: var(--nox-text);
+}