diff --git a/packages/webdocs/astro.config.mjs b/packages/webdocs/astro.config.mjs
index 40dbade..a718b76 100644
--- a/packages/webdocs/astro.config.mjs
+++ b/packages/webdocs/astro.config.mjs
@@ -4,6 +4,7 @@ import tailwindcss from '@tailwindcss/vite';
import cloudflare from '@astrojs/cloudflare';
export default defineConfig({
+ site: 'https://t-req.io',
output: 'server',
adapter: cloudflare(),
redirects: {
@@ -12,11 +13,23 @@ export default defineConfig({
integrations: [
starlight({
title: 't-req',
+ description:
+ 't-req is a utility-first HTTP client with .http files that integrate with Vitest, Jest, and Bun.',
logo: {
src: './src/assets/logo.jpg',
replacesTitle: true
},
favicon: '/favicon.png',
+ head: [
+ {
+ tag: 'meta',
+ attrs: { property: 'og:image', content: 'https://t-req.io/logo.jpg' }
+ },
+ {
+ tag: 'meta',
+ attrs: { name: 'twitter:image', content: 'https://t-req.io/logo.jpg' }
+ }
+ ],
customCss: ['./src/styles/starlight.css'],
sidebar: [
{ label: 'Getting Started', slug: 'docs/getting-started' },
diff --git a/packages/webdocs/public/robots.txt b/packages/webdocs/public/robots.txt
new file mode 100644
index 0000000..234532c
--- /dev/null
+++ b/packages/webdocs/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://t-req.io/sitemap-index.xml
diff --git a/packages/webdocs/src/layouts/Layout.astro b/packages/webdocs/src/layouts/Layout.astro
index bb63618..74f7074 100644
--- a/packages/webdocs/src/layouts/Layout.astro
+++ b/packages/webdocs/src/layouts/Layout.astro
@@ -1,12 +1,37 @@
---
-import '@t-req/ui/fonts';
-import '../styles/global.css';
+import "@t-req/ui/fonts";
+import "../styles/global.css";
interface Props {
title?: string;
+ description?: string;
+ ogDescription?: string;
+ twitterDescription?: string;
+ ogImage?: string;
+ canonicalUrl?: string;
}
-const { title = 't-req' } = Astro.props;
+const {
+ title = "t-req",
+ description = "t-req is a utility-first API client with .http files that integrate with Vitest, Jest, and Bun.",
+ ogDescription,
+ twitterDescription,
+ ogImage = "/logo.jpg",
+ canonicalUrl,
+} = Astro.props;
+
+const canonicalHref =
+ canonicalUrl ??
+ (Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined);
+const socialDescription = ogDescription ?? description;
+const twitterSocialDescription = twitterDescription ?? socialDescription;
+
+const ogImageUrl = (() => {
+ if (!ogImage) return undefined;
+ if (ogImage.startsWith("http://") || ogImage.startsWith("https://"))
+ return ogImage;
+ return Astro.site ? new URL(ogImage, Astro.site).href : ogImage;
+})();
---
@@ -14,7 +39,18 @@ const { title = 't-req' } = Astro.props;
-
+
+ {canonicalHref && }
+
+
+
+ {canonicalHref && }
+ {ogImageUrl && }
+
+
+
+
+ {ogImageUrl && }
{title}
diff --git a/packages/webdocs/src/pages/index.astro b/packages/webdocs/src/pages/index.astro
index 9406ec5..8c2e4cf 100644
--- a/packages/webdocs/src/pages/index.astro
+++ b/packages/webdocs/src/pages/index.astro
@@ -1,9 +1,22 @@
---
import Layout from "../layouts/Layout.astro";
import CodeTabs from "../components/CodeTabs.astro";
+
+export const prerender = true;
+
+const title = "t-req | Programmable API Engine -- Open Source API Client";
+const description =
+ "An open-source, local-first programmable API engine built on standard .http files. Scriptable, programmable, and runnable from the CLI, IDE, or your own code.";
+const ogDescription =
+ "Make .http files programmable. Run API requests from the terminal, your editor, or your own code. Open source, local-first.";
---
-
+
-
+
Beta
Test APIs programmatically
without ever leaving your code.
@@ -315,7 +328,13 @@ treq open
@@ -340,13 +359,18 @@ treq open
}
}
- .hero-content {
- flex: 1;
+ .landing-hero-content {
+ flex: 1 1 0;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
text-align: center;
}
@media (min-width: 768px) {
- .hero-content {
+ .landing-hero-content {
+ align-items: flex-start;
text-align: left;
order: 1;
}
@@ -376,8 +400,9 @@ treq open
letter-spacing: -0.04em;
line-height: 1.1;
color: #0f172a;
- text-wrap: balance;
+ max-width: 20ch;
margin-bottom: 1.5rem;
+ width: 100%;
}
@media (min-width: 640px) {
@@ -398,6 +423,7 @@ treq open
color: #334155;
max-width: 42rem;
margin: 0 0 2rem;
+ width: 100%;
}
@media (max-width: 767px) {