add helmet

[alttp.git] / resources / js / components / pages / AosFront.js

diff --git a/resources/js/components/pages/AosFront.js b/resources/js/components/pages/AosFront.js
index 8ae6d8b912737b0cb3993fae563b081d1dad1ab2..9651110d3c80e134e88cb73e4de8472ea09c0019 100644 (file)
--- a/resources/js/components/pages/AosFront.js
+++ b/resources/js/components/pages/AosFront.js
@@ -1,74 +1,87 @@
 import React from 'react';
 import { Button, Col, Container, Row } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
-import i18n from '../../i18n';
 
-const AosFront = () => <Container>
-       <div className="my-5 text-center">
-               <h1>Castlevania: Aria of Sorrow</h1>
-       </div>
-       <Row>
-               <Col className="text-center mb-3" sm={6} md={4}>
-                       <Button
-                               href="https://discord.gg/VEtVYNr"
-                               size="lg"
-                               target="_blank"
-                               variant="discord"
-                       >
-                               <Icon.DISCORD />
-                               {' '}
-                               {i18n.t('aos.randoDiscord')}
-                       </Button>
-               </Col>
-               <Col className="text-center mb-3" sm={6} md={4}>
-                       <Button
-                               href="https://aosrando.surge.sh/"
-                               size="lg"
-                               target="_blank"
-                               variant="primary"
-                       >
-                               {i18n.t('aos.randoWeb')}
-                       </Button>
-               </Col>
-               <Col className="text-center mb-3" sm={6} md={4}>
-                       <Button
-                               href="https://discord.gg/ApVyJnd"
-                               size="lg"
-                               target="_blank"
-                               variant="discord"
-                       >
-                               <Icon.DISCORD />
-                               {' '}
-                               {i18n.t('aos.tourneyDiscord')}
-                       </Button>
-               </Col>
-               <Col className="text-center mb-3" sm={6} md={4}>
-                       <Button
-                               href="https://discord.com/oauth2/authorize?client_id=951113702839549982&scope=bot%20applications.commands"
-                               size="lg"
-                               target="_blank"
-                               variant="discord"
-                       >
-                               <Icon.DISCORD />
-                               {' '}
-                               {i18n.t('aos.inviteBot')}
-                       </Button>
-               </Col>
-               <Col className="text-center mb-3" sm={6} md={4}>
-                       <Button
-                               href="https://discord.com/oauth2/authorize?client_id=951113702839549982&scope=applications.commands"
-                               size="lg"
-                               target="_blank"
-                               variant="discord"
-                       >
-                               <Icon.DISCORD />
-                               {' '}
-                               {i18n.t('aos.inviteCommand')}
-                       </Button>
-               </Col>
-       </Row>
-</Container>;
+const authEndpoint = 'https://discord.com/oauth2/authorize';
+const clientId = '951113702839549982';
+const botUrl = `${authEndpoint}?client_id=${clientId}&scope=bot%20applications.commands`;
+const commandUrl = `${authEndpoint}?client_id=${clientId}&scope=applications.commands`;
 
-export default withTranslation()(AosFront);
+const AosFront = () => {
+       const { t } = useTranslation();
+
+       return <Container>
+               <Helmet>
+                       <title>AoS</title>
+                       <meta name="description" content="Castlevania: Aria of Sorrow" />
+               </Helmet>
+               <div className="my-5 text-center">
+                       <h1>Castlevania: Aria of Sorrow</h1>
+               </div>
+               <Row>
+                       <Col className="text-center mb-3" sm={6} md={4}>
+                               <Button
+                                       href="https://discord.gg/VEtVYNr"
+                                       size="lg"
+                                       target="_blank"
+                                       variant="discord"
+                               >
+                                       <Icon.DISCORD />
+                                       {' '}
+                                       {t('aos.randoDiscord')}
+                               </Button>
+                       </Col>
+                       <Col className="text-center mb-3" sm={6} md={4}>
+                               <Button
+                                       href="https://aosrando.surge.sh/"
+                                       size="lg"
+                                       target="_blank"
+                                       variant="primary"
+                               >
+                                       {t('aos.randoWeb')}
+                               </Button>
+                       </Col>
+                       <Col className="text-center mb-3" sm={6} md={4}>
+                               <Button
+                                       href="https://discord.gg/ApVyJnd"
+                                       size="lg"
+                                       target="_blank"
+                                       variant="discord"
+                               >
+                                       <Icon.DISCORD />
+                                       {' '}
+                                       {t('aos.tourneyDiscord')}
+                               </Button>
+                       </Col>
+                       <Col className="text-center mb-3" sm={6} md={4}>
+                               <Button
+                                       href={botUrl}
+                                       size="lg"
+                                       target="_blank"
+                                       variant="discord"
+                               >
+                                       <Icon.DISCORD />
+                                       {' '}
+                                       {t('aos.inviteBot')}
+                               </Button>
+                       </Col>
+                       <Col className="text-center mb-3" sm={6} md={4}>
+                               <Button
+                                       href={commandUrl}
+                                       size="lg"
+                                       target="_blank"
+                                       variant="discord"
+                               >
+                                       <Icon.DISCORD />
+                                       {' '}
+                                       {t('aos.inviteCommand')}
+                               </Button>
+                       </Col>
+               </Row>
+       </Container>;
+};
+
+export default AosFront;