-
Notifications
You must be signed in to change notification settings - Fork 3
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.
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
Add DocumentationPage component (for Resources / Quickstart page) and make header/sidebar fixed on scroll #662
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from "react"; | ||
import ReactMarkdown from "react-markdown"; | ||
import { Link } from "react-router-dom"; | ||
|
||
const isInternalLink = (to: string): boolean => { | ||
const url = new URL(to, window.location.origin); | ||
return url.hostname === window.location.hostname; | ||
}; | ||
|
||
interface DocumentationPageProps { | ||
text: string; | ||
} | ||
|
||
const DocumentationPage: React.FC<DocumentationPageProps> = ({ text }) => { | ||
return ( | ||
<div className="h-full w-full overflow-auto bg-white p-6"> | ||
<ReactMarkdown | ||
components={{ | ||
a: ({ href, ...props }) => { | ||
const target = href ?? ""; | ||
if (isInternalLink(target)) { | ||
return ( | ||
<Link | ||
className="text-cyan-600 hover:underline" | ||
to={target} | ||
{...props} | ||
/> | ||
); | ||
} else { | ||
return ( | ||
<a | ||
className="text-cyan-600 hover:underline" | ||
href={target} | ||
{...props} | ||
/> | ||
); | ||
} | ||
}, | ||
}} | ||
> | ||
{text} | ||
</ReactMarkdown> | ||
</div> | ||
); | ||
}; | ||
|
||
export default DocumentationPage; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
export const BC23_QUICKSTART = `# Quick Start | ||
|
||
This is the Battlecode 2023 contest website, which will be your main hub for all Battlecode-related things for the duration of the contest. For a general overview of what Battlecode is, visit [our landing page](https://battlecode.org/). | ||
|
||
## Create an account and team | ||
|
||
To participate in Battlecode, you need an account and a team. Each team can consist of 1 to 4 people. | ||
|
||
[Create an account](/register) on this website, and then go to the [team section](/bc23/team) to either create or join a team. | ||
|
||
## Installation | ||
|
||
### Step 1: Install Java | ||
|
||
You'll need a Java Development Kit (JDK) version 8. Unfortunately, higher versions will not work. [Download it here](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). You may need to create an Oracle account. | ||
|
||
- Alternatively, you can install a JDK yourself using your favorite package manager. Make sure it's an Oracle JDK — we don't support anything else — and is compatible with Java 8. | ||
|
||
If you're unsure how to install the JDK, you can find instructions for all operating systems [here](https://docs.oracle.com/javase/8/docs/technotes/guides/install/install_overview.html) (pay attention to \`PATH\` and \`CLASSPATH\`). | ||
|
||
### Step 2: Download Battlecode | ||
|
||
Next, you should download the [Battlecode 2023 scaffold](https://github.com/battlecode/battlecode23-scaffold). To get up and running quickly, you can click "Clone or download" and then "Download ZIP," and move on to the next step. | ||
|
||
TODO: the rest of the page | ||
|
||
`; | ||
|
||
export const BC23_RESOURCES = `# Markdown syntax guide | ||
|
||
# This is a Heading h1 | ||
## This is a Heading h2 | ||
###### This is a Heading h6 | ||
|
||
*This text will be italic* | ||
_This will also be italic_ | ||
|
||
**This text will be bold** | ||
__This will also be bold__ | ||
|
||
_You **can** combine them_ | ||
|
||
### Unordered List | ||
|
||
* Item 1 | ||
* Item 2 | ||
* Item 2a | ||
* Item 2b | ||
|
||
### Ordered List | ||
|
||
1. Item 1 | ||
1. Item 2 | ||
1. Item 3 | ||
1. Item 3a | ||
1. Item 3b | ||
|
||
![This is an alt text for an image.](/image/sample.png "This is a sample image.") | ||
|
||
[This links to example.com](https://example.com). | ||
|
||
\`\`\` | ||
let message = 'Hello world'; | ||
alert(message); | ||
\`\`\` | ||
|
||
this is \`an inline code block\` | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,37 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;700&display=swap'); | ||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;700&display=swap"); | ||
|
||
@layer base { | ||
h1 { | ||
@apply pb-4 text-3xl font-medium text-gray-900; | ||
} | ||
h2 { | ||
@apply pb-4 pt-6 text-2xl font-medium text-gray-900; | ||
} | ||
h3 { | ||
@apply pb-4 text-xl font-medium text-gray-900; | ||
} | ||
h4 { | ||
@apply pb-4 text-lg font-medium text-gray-700; | ||
} | ||
p { | ||
@apply pb-4 text-gray-900; | ||
} | ||
code { | ||
@apply rounded bg-gray-100 px-1 py-0.5 text-sm text-cyan-900; | ||
} | ||
pre code { | ||
@apply p-0; | ||
} | ||
pre { | ||
@apply rounded bg-gray-100 px-4 py-3; | ||
} | ||
ul { | ||
@apply ml-6 list-outside list-disc pb-4; | ||
} | ||
ol { | ||
@apply ml-6 list-outside list-decimal pb-4; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
import React from "react"; | ||
import DocumentationPage from "../components/DocumentationPage"; | ||
import { BC23_QUICKSTART } from "../content/bc23"; | ||
|
||
const QuickStart: React.FC = () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this view going to always bring up There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yup, this will be a later change where we'll get the episode id and display that episode's quickstart |
||
return <p>quickstart page</p>; | ||
return <DocumentationPage text={BC23_QUICKSTART} />; | ||
}; | ||
|
||
export default QuickStart; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -64,7 +64,7 @@ const Rankings: React.FC = () => { | |
}, [searchQuery, page]); | ||
|
||
return ( | ||
<div className="mb-20 ml-10 flex w-full flex-col"> | ||
<div className="flex h-full w-full flex-col overflow-auto p-6"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we have to use padding instead of margins here, otherwise it will overflow the page width because of the combined |
||
<h1 className="mb-5 text-3xl font-bold leading-7 text-gray-900"> | ||
Rankings | ||
</h1> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -54,9 +54,9 @@ const Register: React.FC = () => { | |
}; | ||
return ( | ||
<div className="flex h-screen flex-col items-center justify-center bg-gradient-to-tr from-cyan-200 to-cyan-700 p-2"> | ||
<h2 className="flex flex-1 items-end text-center font-display text-5xl tracking-wide text-white sm:text-6xl"> | ||
<div className="flex flex-1 items-end text-center font-display text-5xl tracking-wide text-white sm:text-6xl"> | ||
BATTLECODE | ||
</h2> | ||
</div> | ||
{/* https://github.com/orgs/react-hook-form/discussions/8622 */} | ||
<form | ||
/* eslint-disable-next-line @typescript-eslint/no-misused-promises */ | ||
|
@@ -75,7 +75,7 @@ const Register: React.FC = () => { | |
{ | ||
// TODO: replace this with our custom notification component | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this on our roadmap? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yup! |
||
formError !== undefined && ( | ||
<p className="text-center text-sm text-red-600">{formError}</p> | ||
<div className="text-center text-sm text-red-600">{formError}</div> | ||
) | ||
} | ||
<Input | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from "react"; | ||
import { BC23_RESOURCES } from "../content/bc23"; | ||
import DocumentationPage from "../components/DocumentationPage"; | ||
|
||
const Resources = (): JSX.Element => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ditto the comment above about this page eventually rendering the appropriate year's resources based on the URL's There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah, we'll render the proper year later. that change will likely come in the same pr as the change that adds the actual 2023 / 2024 episode specific text |
||
return <DocumentationPage text={BC23_RESOURCES} />; | ||
}; | ||
|
||
export default Resources; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
in the future, we may consider switching to
marked
orremarkable
, because they are about 1/3 the size of react-markdown.we'll just need to figure out how to replace
<a>
s that link to urls within play.batlecode.org with<Link>
when using those libraries