Skip to content

Commit

Permalink
docs: add social links to sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@smeijer
smeijer committed Sep 14, 2021
1 parent 7339f81 commit d62fe4a
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 1 deletion.
93 changes: 93 additions & 0 deletions docs/components/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// icons from: https://vecta.io/symbols/category/brands-logo

export function GithubCircleIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 26 26">
<g fill="none" fillRule="evenodd" transform="translate(1 1)">
<path
fill="currentColor"
fillRule="nonzero"
d="M15.425 22.985V20.95c0-1.081-.371-1.876-1.112-2.385.465-.045.891-.107 1.279-.188a9.967 9.967 0 0 0 1.233-.348 6.039 6.039 0 0 0 1.166-.543c.344-.21.674-.482.991-.817.317-.335.583-.715.797-1.139.215-.424.384-.933.509-1.527a9.543 9.543 0 0 0 .188-1.963c0-1.384-.451-2.563-1.353-3.537.411-1.072.366-2.237-.134-3.497l-.335-.04c-.232-.027-.65.071-1.253.295-.603.224-1.279.589-2.03 1.098a12.317 12.317 0 0 0-3.309-.442c-1.152 0-2.251.147-3.296.442a11.41 11.41 0 0 0-1.346-.797 6.948 6.948 0 0 0-1.018-.429 3.503 3.503 0 0 0-1.132-.154.844.844 0 0 0-.134.027c-.5 1.268-.545 2.434-.134 3.497-.902.973-1.353 2.152-1.353 3.537 0 .715.063 1.369.188 1.963.125.594.295 1.103.509 1.527.214.424.48.804.797 1.139.317.335.647.607.991.817.344.21.732.391 1.166.543a9.54 9.54 0 0 0 1.233.348c.389.08.815.143 1.279.188-.732.5-1.098 1.295-1.098 2.385v2.075C10.5 24 14 24 15.425 22.985z"
/>
<circle
cx="12"
cy="12"
r="12"
stroke="currentColor"
strokeWidth="1.5"
/>
</g>
</svg>
);
}

export function GithubIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width={20}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 513 514"
fill="#fff"
fillRule="evenodd"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
>
<g stroke="none" fillRule="nonzero">
<path
d="M0 76.8C0 34.253 34.253 0 76.8 0h358.4C477.747 0 512 34.253 512 76.8v358.4c0 42.547-34.253 76.8-76.8 76.8H76.8C34.253 512 0 477.747 0 435.2z"
fill="#171515"
/>
<path d="M119 255c17 30 49 48 102 53-8 6-17 17-18 30-10 6-29 8-44 3-21-7-29-48-61-42-7 1-6 6 0 10 10 6 21 16 26 30 12 31 37 39 77 33v45c0 14-20 18-20 25 0 3 7 3 12 3 10 0 32-9 32-23 0-12 0-52 1-59 0-15 8-20 8-20s1 82-2 92c-4 13-10 11-10 17 0 9 26 2 35-17 7-15 4-95 3-94h7s0 37 1 53c0 17-1 39 9 50 7 7 29 19 29 8 0-6-12-12-12-29v-79c10 0 8 26 8 26l1 48s-2 18 19 25c8 3 24 3 25-1s-20-11-20-25v-49c0-36-5-49-22-60 53-5 86-18 102-53 10-20 12-44 12-62 0-50-24-67-29-76 7-38-1-55-5-60-14-5-48 12-66 24-30-9-94-8-118 2-44-31-67-26-67-26s-15 27-4 66c-15 18-25 31-26 65 0 27 3 44 15 67z" />
</g>
</svg>
);
}

export function TwitterIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width={20}
viewBox="0 0 513 514"
fill="#fff"
fillRule="evenodd"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
>
<g stroke="none" fillRule="nonzero">
<path
d="M0 76.8C0 34.253 34.253 0 76.8 0h358.4C477.747 0 512 34.253 512 76.8v358.4c0 42.547-34.253 76.8-76.8 76.8H76.8C34.253 512 0 477.747 0 435.2z"
fill="#1da1f2"
/>
<path d="M437 152c-12 6-26 10-40 12 15-9 26-23 32-40-14 8-29 14-45 17-22.353-22.894-57.133-28.29-85.372-13.244S255.467 174.677 262 206c-56-3-110-29-145-74a68 68 0 0 0 22 94c-11 0-22-2-32-7 1 33 24 62 56 69-10 3-21 3-32 1 10 29 37 49 67 50-29 24-68 35-105 29 63.076 42.09 144.591 44.674 210.207 6.664S407.133 264.656 402 189c14-10 26-22 35-37" />
</g>
</svg>
);
}

export function NpmIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width={20}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 513 514"
fill="#fff"
fillRule="evenodd"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
>
<g stroke="none" fillRule="nonzero">
<path
d="M0 76.8C0 34.253 34.253 0 76.8 0h358.4C477.747 0 512 34.253 512 76.8v358.4c0 42.547-34.253 76.8-76.8 76.8H76.8C34.253 512 0 477.747 0 435.2z"
fill="#cb3837"
/>
<path d="M136.343 382.394H265.9V187.952h64.895v194.44h64.894V123.058H136.343z" />
</g>
</svg>
);
}
29 changes: 28 additions & 1 deletion docs/pages/[...slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ import { renderToString } from 'react-dom/server';
import _slugify from 'slugify';

import Code from '../components/code';
import {
GithubCircleIcon,
GithubIcon,
NpmIcon,
TwitterIcon,
} from '../components/icons';
import SocialHead from '../components/social-head';
import toc, { TocLink } from '../content/toc';
import { absoluteUrl } from '../lib/absolute-url';
Expand Down Expand Up @@ -130,6 +136,25 @@ function NavCaption({ children, className = '' }) {
);
}

function SocialBar() {
return (
<div className="flex w-full px-4 space-x-4 py-2">
<a
title="GitHub"
target="_blank"
href="https://github.com/smeijer/next-runtime"
>
<GithubIcon className="" />
</a>
<a title="npm" target="_blank" href="https://npmjs.com/next-runtime">
<NpmIcon className="" />
</a>
<a title="Twitter" target="_blank" href="https://twitter.com/meijer_s">
<TwitterIcon className="" />
</a>
</div>
);
}
export default function DocsPage({ source, frontMatter, next, prev, page }) {
const [menuOpen, setMenuOpen] = useState(false);

Expand Down Expand Up @@ -169,6 +194,8 @@ export default function DocsPage({ source, frontMatter, next, prev, page }) {
<Link href="/">next-runtime</Link>
</h1>

<SocialBar />

{toc.map((entry, idx) =>
'caption' in entry ? (
<NavCaption key={`${idx}-${entry.caption}`} className="mt-8">
Expand Down Expand Up @@ -231,7 +258,7 @@ export default function DocsPage({ source, frontMatter, next, prev, page }) {
className="flex items-center px-4 py-2 rounded-lg hover:opacity-60"
href={`https://github.com/smeijer/next-runtime/edit/main/docs/content/${page.slug}.mdx`}
>
Edit this page on GitHub
<GithubCircleIcon className="w-5 h-5 mr-2" /> Edit on GitHub
</a>
</div>
</div>
Expand Down

0 comments on commit d62fe4a

Please sign in to comment.