Skip to content

Commit

Permalink
chore(docs): improvements (vercel#1540)
Browse files Browse the repository at this point in the history
## Docs Improvements

This PR includes **No Functional Changes** - only the following improvements:

* Remove dead code
* Consolidates duplicated code / copy
* Convert all of `docs/` to TS
* Cleanup components
* Cleanup dependencies
  • Loading branch information
tknickman authored Jul 18, 2022
1 parent 339dafd commit 6331685
Show file tree
Hide file tree
Showing 42 changed files with 1,135 additions and 2,277 deletions.
25 changes: 25 additions & 0 deletions docs/components/Authors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Avatar } from "./Avatar";
import cn from "classnames";
import TURBO_TEAM from "../content/team";
import type { Author } from "../content/team";

export function Authors({ authors }: { authors: Array<Author> }) {
return (
<div className="w-full border-b border-gray-400 authors border-opacity-20">
<div
className={cn(
"flex flex-wrap justify-center py-8 mx-auto gap-7",
authors.length > 4 && "max-w-3xl"
)}
>
{authors.map((username) =>
!!TURBO_TEAM[username] ? (
<Avatar key={username} {...TURBO_TEAM[username]} />
) : (
console.warn("no author found for: ", username)
)
)}
</div>
</div>
);
}
8 changes: 3 additions & 5 deletions docs/components/Avatar.js → docs/components/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Image from "next/image";
import type { AuthorDetails } from "../content/team";

export const Avatar = ({ name, picture, twitterUsername }) => {
export const Avatar = ({ name, picture, twitterUsername }: AuthorDetails) => {
return (
<div className="flex items-center flex-shrink-0 md:justify-start">
<div className="w-[32px] h-[32px]">
Expand All @@ -9,9 +10,7 @@ export const Avatar = ({ name, picture, twitterUsername }) => {
height={32}
width={32}
layout="fixed"
async
loading="lazy"
importance="low"
title={name}
className="w-full rounded-full"
alt={name}
Expand All @@ -28,8 +27,7 @@ export const Avatar = ({ name, picture, twitterUsername }) => {
target="_blank"
rel="noopener noreferrer"
>
@{/* */}
{twitterUsername}
{`@${twitterUsername}`}
</a>
</dd>
</dl>
Expand Down
37 changes: 21 additions & 16 deletions docs/components/callout.js → docs/components/Callout.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import React from "react";
import LightBulbIcon from "@heroicons/react/solid/LightBulbIcon";
import WarningIcon from "@heroicons/react/solid/ExclamationIcon";
import ErrorIcon from "@heroicons/react/solid/ExclamationCircleIcon";
import InformationCircleIcon from "@heroicons/react/solid/InformationCircleIcon";
import React, { ReactElement, ReactNode } from "react";
import {
LightBulbIcon,
ExclamationIcon,
ExclamationCircleIcon,
InformationCircleIcon,
} from "@heroicons/react/solid";

const themes = {
default: {
classes:
"bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10",
icon: <WarningIcon className="w-5 h-5 mt-1" />,
},
const THEMES = {
info: {
classes:
"bg-blue-100 text-blue-800 dark:text-blue-300 dark:bg-blue-200 dark:bg-opacity-10",
Expand All @@ -23,26 +20,34 @@ const themes = {
error: {
classes:
"bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30",
icon: <ErrorIcon className="w-5 h-5 mt-1" />,
icon: <ExclamationCircleIcon className="w-5 h-5 mt-1" />,
},
default: {
classes:
"bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10",
icon: <WarningIcon className="w-5 h-5 mt-1" />,
icon: <ExclamationIcon className="w-5 h-5 mt-1" />,
},
};

export default function Callout({ children, type = "default", icon }) {
export default function Callout({
children,
type = "default",
icon,
}: {
children: ReactNode;
type: keyof typeof THEMES;
icon: ReactElement;
}) {
return (
<div className={`${themes[type].classes} flex rounded-lg callout mt-6`}>
<div className={`${THEMES[type].classes} flex rounded-lg callout mt-6`}>
<div
className="py-2 pl-3 pr-2 text-xl select-none"
style={{
fontFamily:
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
}}
>
{icon || themes[type].icon}
{icon || THEMES[type].icon}
</div>
<div className="py-2 pr-4">{children}</div>
</div>
Expand Down
26 changes: 0 additions & 26 deletions docs/components/Caret.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion docs/components/Container.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from "react";
import type { ReactNode } from "react";

type Props = {
children?: ReactNode;
Expand Down
46 changes: 46 additions & 0 deletions docs/components/Feature.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import type { Feature } from "../content/features";

type FeatureProps = {
feature: Feature;
// include feature description
detailed?: boolean;
};

export default function Feature(props: FeatureProps) {
const { feature, detailed = false } = props;
const { Icon, name, description } = feature;

if (detailed) {
return (
<div className="p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5 ">
<div>
<Icon
className="h-8 w-8 dark:text-white rounded-full p-1.5 dark:bg-white dark:bg-opacity-10 bg-black bg-opacity-5 text-black"
aria-hidden="true"
/>
</div>
<div className="mt-4">
<h3 className="text-lg font-medium dark:text-white">{name}</h3>
<p className="mt-2 text-base font-medium text-gray-500 dark:text-gray-400">
{description}
</p>
</div>
</div>
);
}

return (
<div className="flex items-center space-x-4">
<div>
<Icon
className="block w-8 h-8"
style={{ height: 24, width: 24 }}
aria-hidden="true"
/>
</div>
<div>
<div className="my-0 font-medium dark:text-white">{name}</div>
</div>
</div>
);
}
37 changes: 37 additions & 0 deletions docs/components/Features.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Feature from "./Feature";
import { DOCS_FEATURES, HOME_FEATURES } from "../content/features";
import type { Feature as FeatureType } from "../content/features";

export default function Features({
page = "home",
detailed = true,
}: {
page?: FeatureType["page"];
detailed?: boolean;
}) {
if (page === "docs") {
return (
<div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3 ">
{DOCS_FEATURES.map((feature) => (
<Feature
key={feature.name.split(" ").join("-")}
feature={feature}
detailed={detailed}
/>
))}
</div>
);
} else {
return (
<div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
{HOME_FEATURES.map((feature) => (
<Feature
key={feature.name.split(" ").join("-")}
feature={feature}
detailed
/>
))}
</div>
);
}
}
18 changes: 5 additions & 13 deletions docs/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { useState } from "react";
import Cookies from "js-cookie";
const Vercel = ({ height = 20 }) => (
<svg height={height} viewBox="0 0 283 64" fill="none">
<path
fill="currentColor"
d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
/>
</svg>
);
import { useState, ReactNode } from "react";
import VercelLogo from "./logos/Vercel";

function FooterLink({ href, children }) {
function FooterLink({ href, children }: { href: string; children: ReactNode }) {
const classes =
"text-sm text-gray-500 no-underline betterhover:hover:text-gray-700 betterhover:hover:dark:text-white transition";
if (href.startsWith("http")) {
Expand All @@ -28,7 +20,7 @@ function FooterLink({ href, children }) {
);
}

function FooterHeader({ children }) {
function FooterHeader({ children }: { children: ReactNode }) {
return <h3 className="text-sm text-gray-900 dark:text-white">{children}</h3>;
}

Expand Down Expand Up @@ -140,7 +132,7 @@ export function Footer() {
rel="noopener noreferrer"
href="https://vercel.com?utm_source=turborepo.org&utm_medium=referral&utm_campaign=footer-logoLink"
>
<Vercel />
<VercelLogo />
</a>
<p className="mt-4 text-xs text-gray-500 ">
&copy; {new Date().getFullYear()} Vercel, Inc. All rights
Expand Down
75 changes: 0 additions & 75 deletions docs/components/RadioGroup.tsx

This file was deleted.

36 changes: 0 additions & 36 deletions docs/components/Sticky.tsx

This file was deleted.

File renamed without changes.
Loading

0 comments on commit 6331685

Please sign in to comment.