Feature/contest rules content

react-ui/src/App.jsx

@@ -24,6 +24,9 @@ import {
   Settings,
   Submission,
 } from './pages';
+// TODO: Remove when removing pages index file
+// eslint-disable-next-line no-restricted-imports
+import ContestRules from './pages/submission/ContestRules';
 
 function App() {
   return (
@@ -69,7 +72,9 @@ function ModalSwitch() {
         <Route path="/mod/review" element={<ReviewSubmissions />} />
         <Route path="/mod/analyze" element={<AnalyzeVotes />} />
         <Route path="/mod/analyze/:contestId" element={<AnalyzeVotes />} />
-        <Route path="/submission" element={<Submission />} />
+        <Route path="/submission" element={<Submission />}>
+          <Route path="/submission/rules" element={<ContestRules />} />
+        </Route>
         <Route
           path="/submit"
           element={

react-ui/src/components/MenuItemLink.jsx

@@ -12,8 +12,8 @@ import { Link } from 'react-router-dom';
 import types from '../common/types';
 
 function menuItemComponent({ state, to }) {
-  // eslint-disable-next-line react/jsx-props-no-spreading
   return forwardRef((itemProps, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <Link state={state} to={to} ref={ref} {...itemProps} />
   ));
 }

react-ui/src/pages/hallOfFame/HallOfFameCard.jsx

@@ -20,7 +20,6 @@ import {
   ExternalLink,
   FormattedContent,
   LazyLoadCardImage,
-  RedditMarkdown,
   RedditUserAttribution,
 } from '../../components';
 import flair from '../../images/flair.png';

react-ui/src/pages/submission/ContestRules.jsx

@@ -0,0 +1,30 @@
+// TODO: Remove when deleting index files
+/* eslint-disable no-restricted-imports */
+import Dialog from '@material-ui/core/Dialog';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Header from '../../components/Header';
+import PageContainer from '../../components/PageContainer';
+import StaticContent from '../../components/StaticContent';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    marginTop: theme.spacing(3),
+  },
+}));
+
+function ContestRules() {
+  const classes = useStyles();
+  return (
+    <Dialog fullScreen open>
+      <Header position="static" to="/submission">
+        Contest Rules
+      </Header>
+      <PageContainer className={classes.container}>
+        <StaticContent id="contest_rules" />
+      </PageContainer>
+    </Dialog>
+  );
+}
+
+export default ContestRules;

react-ui/src/pages/submission/SubmissionPrompt.jsx

@@ -1,20 +1,33 @@
 /**
  * Prompt for contest submission
  */
+import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
+import { Outlet } from 'react-router-dom';
 
-import { FormattedContent } from '../../components';
+import { FormattedContent, InternalLink } from '../../components';
 
 import May23 from './content/May23';
 
 function SubmissionPrompt({ contestId, prompt }) {
-  if (contestId === 'may23') {
-    return <May23 />;
-  }
   if (!prompt) {
     return null;
   }
-  return <FormattedContent content={prompt} markdown />;
+  let content = <FormattedContent content={prompt} markdown />;
+  if (contestId === 'may23') {
+    content = <May23 />;
+  }
+  return (
+    <>
+      {content}
+      <InternalLink to="rules">
+        <Typography component="span" variant="h6">
+          Please read the contest rules in full before submitting.
+        </Typography>
+      </InternalLink>
+      <Outlet />
+    </>
+  );
 }
 
 export default SubmissionPrompt;

static_content/README.md

@@ -1,3 +1,3 @@
 The files in this directory are copies of the files that are stored in the static_content table in
 the database, placed here for reference. Best effort should be made to keep them in sync, but the
-database is the source of truth.
+database is the source of truth.

static_content/contest_rules.html

@@ -0,0 +1,69 @@
+<div>
+  You will be asked to confirm you followed each rule upon submission. Repeated rule violators will
+  be banned from the contest for the rest of the year.
+  <ul>
+    <li>
+      <b>
+        <i>Rule 1: Submission limit</i>
+      </b>
+      - You may submit up to
+      <b>TWO</b>
+      entries to each contest.
+      <i>In the event</i>
+      you submit more than two designs, moderators will reach out via Reddit Direct Messages for
+      clarification.
+      <i>In the event</i>
+      clarification is not received, the two most recent entries will be accepted, while all others
+      will be rejected.
+      </li>
+      <li>
+        <b>
+          <i>Rule 2: Technical limit</i>
+        </b>
+        - Flags should be at most
+        <b>3000 pixels wide</b>
+        . They should also be flat and not textured.
+      </li>
+      <li>
+        <b>
+          <i>Rule 3: Sharing prohibition</i>
+        </b>
+        -
+        <b>DO NOT</b>
+      post your flag designs elsewhere on the r/vexillology subreddit before the winners are
+      announced. Don't post it as another thread. Don't post it as a response to the contest
+      announcement thread. The contest aims to keep the submissions anonymous until results are
+      announced, so as to avoid a popularity contest.
+      </li>
+      <li>
+        <b>
+          <i>Rule 4: Attribution requirement</i>
+        </b>
+      - If you take components from public domain, or other sources that are not your own work,
+      please attribute them in the description portion of your submission.
+      </li>
+      <li>
+        <b>
+          <i>Rule 5: Sincerity requirement</i>
+        </b>
+      - Your flag should be a sincere attempt to respond to the prompt. It should not be designed to
+      troll.
+      </li>
+      <li>
+        <b>
+          <i>Rule 6: Deadline</i>
+        </b>
+        - Entries are generally due by the
+        <b>18th</b>
+        of the month, unless otherwise specified in the contest prompt.
+      </li>
+      <li>
+        <b>
+          <i>Rule 7: Contest specific rules</i>
+        </b>
+      - Each contest will have specific rules outlined in the announcement thread. Please read them
+      and follow them accordingly.
+      </li>
+  </ul>
+  Best of luck!
+</div>