Skip to content

Commit

Permalink
Add SEO for design | function pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@heyitsarpit
heyitsarpit committed Aug 27, 2021
1 parent 88d315d commit 1f8d79e
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 133 deletions.
17 changes: 16 additions & 1 deletion website/pages/[package]/[function].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getMDXComponent } from 'mdx-bundler/client'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { NextSeo } from 'next-seo'
import { useMemo } from 'react'
import { mdxComponents } from 'ui/docs/mdxComponents'
import { getAllFunctionsMeta, getFunction } from 'utils/loadMDX'
Expand Down Expand Up @@ -29,5 +30,19 @@ type Props = InferGetStaticPropsType<typeof getStaticProps>

export default function Functions({ meta, code }: Props) {
const Component = useMemo(() => getMDXComponent(code), [code])
return <Component components={mdxComponents as any} />
return (
<>
<NextSeo
title={`${meta.name} — React Hooks Library`}
description={meta.description}
canonical={`https://react-hooks-library.vercel.app/${meta.name}`}
openGraph={{
url: `https://react-hooks-library.vercel.app/${meta.name}`,
title: `${meta.name} — React Hooks Library`,
description: meta.description
}}
/>
<Component components={mdxComponents as any} />
</>
)
}
277 changes: 145 additions & 132 deletions website/pages/design.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getMDXComponent } from 'mdx-bundler/client'
import { InferGetStaticPropsType } from 'next'
import { NextSeo } from 'next-seo'
import React, { useMemo } from 'react'
import { Color } from 'ui/Color'
import { loadMdx } from 'utils/loadMDX'
Expand Down Expand Up @@ -57,144 +58,156 @@ export default function Design({ code }: Props) {
const CodeComponent = useMemo(() => getMDXComponent(code), [code])

return (
<div className="flex flex-col w-full h-full gap-8 mx-auto md:max-w-screen-md 2xl:max-w-screen-2xl">
<h1>Design System</h1>
<section className="flex flex-col gap-8">
<h2>Colors</h2>
<div>
<h3>Brand</h3>
<Color className="bg-brand" varName="--brand" />
</div>
<div>
<h3>Background</h3>
<div className="flex flex-col gap-4">
<Color className="bg-bg-1" varName="--bg-1" />
<Color className="bg-bg-2" varName="--bg-2" />
<>
<NextSeo
title="Design — React Hooks Library"
description="Design system for react hooks library docs website"
canonical="https://react-hooks-library.vercel.app/design"
openGraph={{
url: 'https://react-hooks-library.vercel.app/design',
title: 'Design — React Hooks Library',
description: 'Design system for react hooks library docs website'
}}
/>
<div className="flex flex-col w-full h-full gap-8 mx-auto md:max-w-screen-md 2xl:max-w-screen-2xl">
<h1>Design System</h1>
<section className="flex flex-col gap-8">
<h2>Colors</h2>
<div>
<h3>Brand</h3>
<Color className="bg-brand" varName="--brand" />
</div>
</div>

<div>
<h3>Foreground</h3>
<Color className="bg-fg-1" varName="--fg-1" />
</div>

<div>
<h3>Typography</h3>
<div className="flex flex-col gap-4">
<Color className="bg-txt-1" varName="--txt-1" />
<Color className="bg-txt-2" varName="--txt-2" />
<div>
<h3>Background</h3>
<div className="flex flex-col gap-4">
<Color className="bg-bg-1" varName="--bg-1" />
<Color className="bg-bg-2" varName="--bg-2" />
</div>
</div>

<div>
<h3>Foreground</h3>
<Color className="bg-fg-1" varName="--fg-1" />
</div>
</div>
</section>

<section>
<h2>Pill</h2>
<div className="flex gap-3">
<div className="pill active">active</div>
<div className="pill info">info</div>
<div className="pill danger">danger</div>
<div className="pill warning">warning</div>
<div className="pill success">success</div>
</div>
</section>

<section>
<h2>Typography</h2>
<p className="mt-6">h1</p>
<h1>Sphinx of black quartz, judge my vow</h1>

<p className="mt-6">h2</p>
<h2>Sphinx of black quartz, judge my vow</h2>

<p className="mt-6">h3</p>
<h2>Sphinx of black quartz, judge my vow</h2>

<p className="mt-6">h4</p>
<h4>Sphinx of black quartz, judge my vow</h4>

<p className="mt-6">p</p>
<p>Sphinx of black quartz, judge my vow</p>

<p className="mt-6">p (bold)</p>
<p className="font-bold">Sphinx of black quartz, judge my vow</p>

<p className="mt-6">strong</p>
<strong>Sphinx of black quartz, judge my vow</strong>

<p className="mt-6">p (italic)</p>
<p className="italic">Sphinx of black quartz, judge my vow</p>

<p className="mt-6">i</p>
<i>Sphinx of black quartz, judge my vow</i>
</section>

<section>
<h2>Buttons</h2>
<button className="mr-5">Submit</button>
<button disabled>Disabled</button>
</section>

<section>
<h2>Link</h2>
<a href="/">Home</a>
</section>

<section>
<h2>Lists</h2>
<ul className="mb-6">
<li>Charmander</li>
<li>Squirtle</li>
<li>Bulbasaur</li>
<li>Pikachu</li>
</ul>
<ol>
<li>Charmander</li>
<li>Squirtle</li>
<li>Bulbasaur</li>
<li>Pikachu</li>
</ol>
</section>

<section>
<h2>Forms</h2>
<div>
<h3>Input</h3>
<div className="flex flex-col gap-2">
<input type="text" placeholder="enter text" />
<div className="flex items-center gap-3">
<input id="ds-checkbox" type="checkbox" />
<label htmlFor="ds-checkbox">Checkbox</label>

<div>
<h3>Typography</h3>
<div className="flex flex-col gap-4">
<Color className="bg-txt-1" varName="--txt-1" />
<Color className="bg-txt-2" varName="--txt-2" />
</div>
<div>
<div className="flex gap-3">
<input
type="radio"
id="ds-radio-1"
name="ds-radio"
value="Radio 1"
defaultChecked
/>
<label htmlFor="ds-radio-1">Radio 1</label>
</div>
</section>

<section>
<h2>Pill</h2>
<div className="flex gap-3">
<div className="pill active">active</div>
<div className="pill info">info</div>
<div className="pill danger">danger</div>
<div className="pill warning">warning</div>
<div className="pill success">success</div>
</div>
</section>

<section>
<h2>Typography</h2>
<p className="mt-6">h1</p>
<h1>Sphinx of black quartz, judge my vow</h1>

<p className="mt-6">h2</p>
<h2>Sphinx of black quartz, judge my vow</h2>

<p className="mt-6">h3</p>
<h2>Sphinx of black quartz, judge my vow</h2>

<p className="mt-6">h4</p>
<h4>Sphinx of black quartz, judge my vow</h4>

<p className="mt-6">p</p>
<p>Sphinx of black quartz, judge my vow</p>

<p className="mt-6">p (bold)</p>
<p className="font-bold">Sphinx of black quartz, judge my vow</p>

<p className="mt-6">strong</p>
<strong>Sphinx of black quartz, judge my vow</strong>

<p className="mt-6">p (italic)</p>
<p className="italic">Sphinx of black quartz, judge my vow</p>

<p className="mt-6">i</p>
<i>Sphinx of black quartz, judge my vow</i>
</section>

<section>
<h2>Buttons</h2>
<button className="mr-5">Submit</button>
<button disabled>Disabled</button>
</section>

<section>
<h2>Link</h2>
<a href="/">Home</a>
</section>

<section>
<h2>Lists</h2>
<ul className="mb-6">
<li>Charmander</li>
<li>Squirtle</li>
<li>Bulbasaur</li>
<li>Pikachu</li>
</ul>
<ol>
<li>Charmander</li>
<li>Squirtle</li>
<li>Bulbasaur</li>
<li>Pikachu</li>
</ol>
</section>

<section>
<h2>Forms</h2>
<div>
<h3>Input</h3>
<div className="flex flex-col gap-2">
<input type="text" placeholder="enter text" />
<div className="flex items-center gap-3">
<input id="ds-checkbox" type="checkbox" />
<label htmlFor="ds-checkbox">Checkbox</label>
</div>
<div className="flex gap-3">
<input
type="radio"
id="ds-radio-2"
name="ds-radio"
value="Radio 2"
defaultChecked
/>
<label htmlFor="ds-radio-2">Radio 2</label>
<div>
<div className="flex gap-3">
<input
type="radio"
id="ds-radio-1"
name="ds-radio"
value="Radio 1"
defaultChecked
/>
<label htmlFor="ds-radio-1">Radio 1</label>
</div>
<div className="flex gap-3">
<input
type="radio"
id="ds-radio-2"
name="ds-radio"
value="Radio 2"
defaultChecked
/>
<label htmlFor="ds-radio-2">Radio 2</label>
</div>
</div>
</div>
</div>
</div>
</section>

<section>
<h2>Code Block</h2>
<CodeComponent />
</section>
</div>
</section>

<section>
<h2>Code Block</h2>
<CodeComponent />
</section>
</div>
</>
)
}

0 comments on commit 1f8d79e

Please sign in to comment.