add authors section
This commit is contained in:
Nathan Wang
parent
c0cc5c8552
commit
b5a4a099e1
8 changed files with 203 additions and 8 deletions
|
|
@ -3,8 +3,6 @@ id: using-this-guide
|
|||
title: Using This Guide
|
||||
author: Nathan Wang, Benjamin Qi
|
||||
description: How to effectively use this guide to maximize your time.
|
||||
prerequisites:
|
||||
- None!
|
||||
---
|
||||
|
||||
## Skipping Around
|
||||
|
|
|
|||
|
|
@ -111,8 +111,6 @@ The idea is that we can arbitrarily label a node and then run DFS. Every time we
|
|||
|
||||
<CPPSection>
|
||||
|
||||
<br />
|
||||
|
||||
```cpp
|
||||
//UNTESTED
|
||||
|
||||
|
|
|
|||
34
content/authors/authors.ts
Normal file
34
content/authors/authors.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
export type Author = {
|
||||
photo: string; // url of photo relative to content/authors/images/, EXCLUDING EXTENSION
|
||||
name: string;
|
||||
title: string;
|
||||
blurb: string;
|
||||
email?: string;
|
||||
facebook?: string;
|
||||
linkedin?: string;
|
||||
github?: string;
|
||||
website?: string;
|
||||
codeforces?: string;
|
||||
};
|
||||
|
||||
export const Authors: Author[] = [
|
||||
{
|
||||
photo: 'benq',
|
||||
name: 'Benjamin Qi',
|
||||
title: 'Content Director',
|
||||
blurb: 'Benjamin Qi is a two-time IOI winner, USACO Problemsetter, and part of the MIT Class of 2023.',
|
||||
facebook: "bqi343",
|
||||
codeforces: "Benq",
|
||||
email: "bqi343@gmail.com",
|
||||
github: "bqi343"
|
||||
},
|
||||
{
|
||||
photo: 'nathanw',
|
||||
name: 'Nathan Wang',
|
||||
title: 'Coordinator / Webmaster',
|
||||
blurb: 'Nathan Wang is a zero-time IOI qualifier, USACO n00b, and part of the Community College Class of 2026.',
|
||||
website: "https://thecodingwizard.me/",
|
||||
email: "nathan.r.wang@gmail.com",
|
||||
github: "thecodingwizard",
|
||||
},
|
||||
];
|
||||
BIN
content/authors/images/benq.png
Normal file
BIN
content/authors/images/benq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
content/authors/images/nathanw.jpg
Normal file
BIN
content/authors/images/nathanw.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
|
|
@ -8,7 +8,7 @@ export default ({ children, className }) => {
|
|||
if (className === undefined) {
|
||||
// no styling, just a regular pre tag
|
||||
return (
|
||||
<pre className="-mx-4 sm:-mx-6 lg:mx-0 lg:rounded bg-gray-100 p-4 mb-4 whitespace-pre-wrap">
|
||||
<pre className="-mx-4 sm:-mx-6 lg:mx-0 lg:rounded bg-gray-100 p-4 mb-4 whitespace-pre-wrap break-all">
|
||||
{children}
|
||||
</pre>
|
||||
);
|
||||
|
|
@ -25,7 +25,7 @@ export default ({ children, className }) => {
|
|||
<div className="gatsby-highlight" data-language={language}>
|
||||
<pre
|
||||
className={
|
||||
'-mx-4 sm:-mx-6 lg:mx-0 lg:rounded whitespace-pre-wrap p-4 mb-4 ' +
|
||||
'-mx-4 sm:-mx-6 lg:mx-0 lg:rounded whitespace-pre-wrap break-all p-4 mb-4 ' +
|
||||
className
|
||||
}
|
||||
style={{ ...style }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,129 @@
|
|||
import * as React from 'react';
|
||||
import { Link, PageProps } from 'gatsby';
|
||||
import { graphql, Link, PageProps } from 'gatsby';
|
||||
import Img from 'gatsby-image';
|
||||
import Layout from '../components/layout';
|
||||
import SEO from '../components/seo';
|
||||
import { Author, Authors } from '../../content/authors/authors';
|
||||
|
||||
const AuthorCard = ({
|
||||
author,
|
||||
gatsbyImage,
|
||||
}: {
|
||||
author: Author;
|
||||
gatsbyImage: any;
|
||||
}) => {
|
||||
const socialMedia = {
|
||||
email: {
|
||||
icon: (
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
),
|
||||
link: x => `mailto:${x}`,
|
||||
},
|
||||
facebook: {
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
link: x => `https://www.facebook.com/${x}`,
|
||||
},
|
||||
linkedin: {
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M365 1414h231v-694h-231v694zm246-908q-1-52-36-86t-93-34-94.5 34-36.5 86q0 51 35.5 85.5t92.5 34.5h1q59 0 95-34.5t36-85.5zm585 908h231v-398q0-154-73-233t-193-79q-136 0-209 117h2v-101h-231q3 66 0 694h231v-388q0-38 7-56 15-35 45-59.5t74-24.5q116 0 116 157v371zm468-998v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z" />
|
||||
</svg>
|
||||
),
|
||||
link: x => `https://www.linkedin.com/in/${x}`,
|
||||
},
|
||||
github: {
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
link: x => `https://github.com/${x}`,
|
||||
},
|
||||
codeforces: {
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="h-6 w-6" fill="currentColor">
|
||||
<path d="M4.5 7.5C5.328 7.5 6 8.172 6 9v10.5c0 .828-.672 1.5-1.5 1.5h-3C.673 21 0 20.328 0 19.5V9c0-.828.673-1.5 1.5-1.5h3zm9-4.5c.828 0 1.5.672 1.5 1.5v15c0 .828-.672 1.5-1.5 1.5h-3c-.827 0-1.5-.672-1.5-1.5v-15c0-.828.673-1.5 1.5-1.5h3zm9 7.5c.828 0 1.5.672 1.5 1.5v7.5c0 .828-.672 1.5-1.5 1.5h-3c-.828 0-1.5-.672-1.5-1.5V12c0-.828.672-1.5 1.5-1.5h3z" />
|
||||
</svg>
|
||||
),
|
||||
link: x => `https://codeforces.com/profile/${x}`,
|
||||
},
|
||||
website: {
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
|
||||
</svg>
|
||||
),
|
||||
link: x => x,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`py-8 sm:py-12 lg:py-8 px-4 sm:flex sm:flex-col xl:py-16 sm:px-8 border border-blue-900`}
|
||||
>
|
||||
<blockquote className="sm:flex-grow sm:flex sm:items-center text-center sm:text-left max-w-sm sm:max-w-3xl mx-auto w-full">
|
||||
<div className="flex-shrink-0">
|
||||
<div className={`inline-flex rounded-full border-2 border-white`}>
|
||||
<div className="w-36 h-36 md:h-48 md:w-48 lg:h-36 lg:w-36 xl:h-48 xl:w-48">
|
||||
<Img
|
||||
className="rounded-full"
|
||||
fixed={gatsbyImage.fixed}
|
||||
alt={author.name}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 sm:mt-0 sm:ml-8 lg:ml-6 xl:ml-8">
|
||||
<div className="space-x-2">
|
||||
<span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-blue-700 text-blue-100">
|
||||
{author.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-white">{author.name}</div>
|
||||
<div className="mt-4 text-base text-blue-200">
|
||||
<p className="relative">{author.blurb}</p>
|
||||
</div>
|
||||
<div className="mt-2 flex space-x-2 justify-center sm:justify-start">
|
||||
{Object.keys(socialMedia)
|
||||
.filter(sm => author.hasOwnProperty(sm))
|
||||
.map(sm => (
|
||||
<a
|
||||
key={author.name + sm}
|
||||
href={socialMedia[sm].link(author[sm])}
|
||||
className="text-blue-300 hover:text-blue-200 transition duration-100"
|
||||
>
|
||||
<span className="sr-only">{sm}</span>
|
||||
{socialMedia[sm].icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function IndexPage(props: PageProps) {
|
||||
return (
|
||||
|
|
@ -466,8 +588,29 @@ export default function IndexPage(props: PageProps) {
|
|||
</div>
|
||||
{/*End FAQ*/}
|
||||
|
||||
<section className="bg-blue-800 overflow-hidden">
|
||||
<div className="py-6 sm:py-12 text-center border-b-2 border-blue-900">
|
||||
<h2 className="text-3xl sm:text-5xl font-extrabold text-white px-4">
|
||||
Authors you can trust.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="lg:grid lg:grid-cols-2 -m-px">
|
||||
{Authors.map(author => (
|
||||
<AuthorCard
|
||||
author={author}
|
||||
key={author.name}
|
||||
gatsbyImage={
|
||||
(props.data as any).allFile.edges.find(
|
||||
x => x.node.name === author.photo
|
||||
).node.childImageSharp
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="bg-white">
|
||||
<div className="max-w-screen-xl mx-auto pb-12 px-4">
|
||||
<div className="max-w-screen-xl mx-auto py-12 px-4">
|
||||
<p className="text-center text-base leading-6 text-gray-400">
|
||||
No part of this website may be reproduced or commercialized in any
|
||||
manner without prior written permission.{' '}
|
||||
|
|
@ -480,3 +623,20 @@ export default function IndexPage(props: PageProps) {
|
|||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export const query = graphql`
|
||||
query {
|
||||
allFile(filter: { relativePath: { regex: "/^authors/images/.*/" } }) {
|
||||
edges {
|
||||
node {
|
||||
childImageSharp {
|
||||
fixed(width: 192, height: 192, cropFocus: CENTER, quality: 100) {
|
||||
...GatsbyImageSharpFixed
|
||||
}
|
||||
}
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -197,6 +197,11 @@
|
|||
background: #ff9800;
|
||||
color: black;
|
||||
}
|
||||
.gatsby-highlight pre[class*='language-py']::before {
|
||||
content: 'python';
|
||||
background: #ff002b;
|
||||
color: black;
|
||||
}
|
||||
/*! purgecss end ignore */
|
||||
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
Reference in a new issue