Skip to content

Chore: improved metadata across docs #389

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

Merged
scottrippey merged 2 commits into from
May 30, 2025
Merged

Chore: improved metadata across docs #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ee6b83
chore: improved metadata across docs
scottrippey May 22, 2025
e873232
chore: improved document header hierarchy
scottrippey May 30, 2025
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
26 changes: 12 additions & 14 deletions website/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { themes as prismThemes } from "prism-react-renderer";
import type { Config } from "@docusaurus/types";
import type * as Preset from "@docusaurus/preset-classic";
import type { Config } from "@docusaurus/types";
import MonacoEditorWebpackPlugin from "monaco-editor-webpack-plugin";

const title = "GROQD";
const tagline = "Typesafe GROQ Query Builder";
import { themes as prismThemes } from "prism-react-renderer";
import { metadata } from "./src/metadata";

const config: Config = {
title,
tagline,
url: "https://commerce.nearform.com/",
title: metadata.longTitle,
tagline: metadata.description,
url: "https://nearform.com/",
favicon: "img/nearform-icon.svg",
baseUrl: process.env.VERCEL_ENV === "preview" ? "/" : "/open-source/groqd",
onBrokenLinks: "throw",
Expand Down Expand Up @@ -83,11 +81,11 @@ const config: Config = {
metadata: [
{
name: "title",
content: title,
content: metadata.longTitle,
},
{
name: "description",
content: tagline,
content: metadata.description,
},
{
name: "viewport",
Expand All @@ -103,11 +101,11 @@ const config: Config = {
},
{
property: "og:title",
content: title,
content: metadata.longTitle,
},
{
property: "og:description",
content: tagline,
content: metadata.description,
},
{
property: "og:image",
Expand All @@ -120,11 +118,11 @@ const config: Config = {
},
{
property: "twitter:title",
content: title,
content: metadata.longTitle,
},
{
property: "twitter:description",
content: tagline,
content: metadata.description,
},
{
property: "twitter:image",
Expand Down
6 changes: 3 additions & 3 deletions website/src/components/landing/landing-features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ export const LandingFeatures = ({
className="col-span-3 md:col-span-1 flex flex-col items-center text-center"
>
<img src={imgSrc} alt={alt} className="max-h-72" />
<span className="mt-8 text-2xl font-semibold">{title}</span>
<span
<div className="mt-8 text-2xl font-semibold">{title}</div>
<div
dangerouslySetInnerHTML={html}
className="mt-2 text-lg leading-8 mx-3"
>
{body}
</span>
</div>
</li>
))}
</ul>
Expand Down
5 changes: 5 additions & 0 deletions website/src/components/landing/landing-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ export const LandingHero = ({
body,
copyText,
heading,
subheading,
navItems,
}: {
body: string;
copyText: string;
heading: string;
subheading: string;
navItems: { link: string; title: string }[];
}) => {
const [buttonText, setButtonText] = useState("Copy");
Expand All @@ -29,6 +31,9 @@ export const LandingHero = ({
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
{heading}
</h1>
<p className="text-2xl font-bold tracking-tight sm:text-3xl">
{subheading}
</p>
<p className="mt-6 text-lg leading-8">{body}</p>
<div className="mt-10 flex flex-wrap flex-col xl:flex-row xl:items-center justify-start gap-6">
<button
Expand Down
11 changes: 11 additions & 0 deletions website/src/metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const metadata = {
title: "GROQD",
tagline: "A type-safe query builder for GROQ",
longTitle: "GROQD: a type-safe query builder for GROQ",
description:
"Designed to give the best GROQ developer experience possible, " +
"with the flexibility of GROQ, " +
"schema-aware auto-completion, " +
"strong type-checking, " +
"and the runtime safety of Zod.",
};
110 changes: 56 additions & 54 deletions website/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";

import { LandingHero } from "../components/landing/landing-hero";
Expand All @@ -12,67 +11,70 @@ import {
feature3,
} from "../components/landing/landing-images";
import { Divider } from "../components/landing/divider";
import { metadata } from "../metadata";

export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
return (
<Layout title={siteConfig.title} description={siteConfig.tagline}>
<div className="dark:bg-gray-500 bg-gray-200 dark:text-white text-theme-2">
<LandingHero
heading={siteConfig.title}
body={siteConfig.tagline}
copyText="npm install groqd"
navItems={[
{ link: "/open-source/groqd/docs", title: "Documentation" },
{ link: "/open-source/groqd/arcade", title: "Demo" },
<Layout>
Copy link
Copy Markdown
Contributor Author

@scottrippey scottrippey May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main change in this file is just wrapping things in <main> so that Nuka Carousel doesn't show up in Google. Hope that works 😄

<main>
<div className="dark:bg-gray-500 bg-gray-200 dark:text-white text-theme-2">
<LandingHero
heading={metadata.title}
subheading={metadata.tagline}
body={metadata.description}
copyText="npm install groqd"
navItems={[
{ link: "/open-source/groqd/docs", title: "Documentation" },
{ link: "/open-source/groqd/arcade", title: "Demo" },
{
link: "https://github.com/FormidableLabs/groqd",
title: "Github",
},
]}
></LandingHero>
</div>
<LandingFeatures
heading="Features"
list={[
{
link: "https://github.com/FormidableLabs/groqd",
title: "Github",
imgSrc: feature1,
alt: "Flexible",
title: "Flexible",
html: {
__html: "GROQD maintains the flexibility of GROQ.",
},
},
]}
></LandingHero>
</div>
<LandingFeatures
heading="Features"
list={[
{
imgSrc: feature1,
alt: "Flexible",
title: "Flexible",
html: {
__html: "GROQD maintains the flexibility of GROQ.",
{
imgSrc: feature3,
alt: "Type Safe",
title: "Type Safe",
body: "Leverages the type safety of TypeScript.",
},
},
{
imgSrc: feature2,
alt: "Runtime Safe",
title: "Runtime Safe",
html: {
__html:
"Automatically layers in the runtime safety of <a href='https://github.com/colinhacks/zod' target='_blank'>Zod</a>.",
{
imgSrc: feature2,
alt: "Runtime Safe",
title: "Runtime Safe",
html: {
__html:
"Automatically layers in the runtime safety of <a href='https://github.com/colinhacks/zod' target='_blank'>Zod</a>.",
},
},
},
{
imgSrc: feature3,
alt: "Type Safe",
title: "Type Safe",
body: "Leverages the type safety of TypeScript.",
},
]}
/>
<Divider />
<div className="flex gap-20 flex-col md:flex-row mx-16 lg:mx-32 xl:mx-64">
<LandingBanner
heading="Get Started"
body="Get the flexibility of GROQ with the runtime/type safety of Zod and TypeScript today!"
cta={{ link: "/open-source/groqd/docs", text: "Documentation" }}
/>
<LandingBanner
heading="GROQD Arcade"
body="View sample queries, and play with live examples in the GROQD Arcade."
cta={{ link: "/open-source/groqd/arcade", text: "Arcade" }}
]}
/>
</div>
<Divider />
<div className="flex gap-20 flex-col md:flex-row mx-16 lg:mx-32 xl:mx-64">
<LandingBanner
heading="Get Started"
body="Get the flexibility of GROQ with the runtime/type safety of Zod and TypeScript today!"
cta={{ link: "/open-source/groqd/docs", text: "Documentation" }}
/>
<LandingBanner
heading="GROQD Arcade"
body="View sample queries, and play with live examples in the GROQD Arcade."
cta={{ link: "/open-source/groqd/arcade", text: "Arcade" }}
/>
</div>
</main>
<Divider />
<LandingFeaturedProjects
heading="Other Open Source"
Expand Down