Prettying stuff

2025-04-01 20:23:44 +02:00 · 2021-03-06 14:59:09 +01:00 · 2021-03-06 14:59:09 +01:00 · 34cc962ab4
commit 34cc962ab4
parent 843f0a7dad
16 changed files with 247 additions and 218 deletions
--- a/src/components/Button.js
+++ b/src/components/Button.js
@ -1,13 +1,11 @@
 import styles from './button.module.css'

-export default function Button (props) {
+export default function Button(props) {
  return (
    <div>
      <center>
        <a href={props.href}>
-          <div className={styles.ircLink}>
-            {props.text}
-          </div>
+          <div className={styles.ircLink}>{props.text}</div>
        </a>
      </center>
    </div>
--- a/src/components/Question.js
+++ b/src/components/Question.js
@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'

 class Question extends PureComponent {
-  render () {
+  render() {
    const { question } = this.props

    let qdata = question.data
@ -15,16 +15,10 @@ class Question extends PureComponent {
    }

    return (
-      <div className='questionContainer'>
-        <div className='question'>
-          {question.Q}
-        </div>
-        <div className='answer'>
-          {question.A}
-        </div>
-        <div className='data'>
-          {qdata || null}
-        </div>
+      <div className="questionContainer">
+        <div className="question">{question.Q}</div>
+        <div className="answer">{question.A}</div>
+        <div className="data">{qdata || null}</div>
      </div>
    )
  }
--- a/src/components/Questions.js
+++ b/src/components/Questions.js
@ -5,7 +5,7 @@ import Question from './Question.js'
 import styles from './Questions.module.css'

 class Questions extends PureComponent {
-  render () {
+  render() {
    const { subjs } = this.props

    return (
@ -13,16 +13,9 @@ class Questions extends PureComponent {
        {subjs.map((subj, i) => {
          return (
            <div key={i}>
-              <div className={styles.subjName}>
-                {subj.Name}
-              </div>
-              { subj.Questions.map((question, i) => {
-                return (
-                  <Question
-                    key={i}
-                    question={question}
-                  />
-                )
+              <div className={styles.subjName}>{subj.Name}</div>
+              {subj.Questions.map((question, i) => {
+                return <Question key={i} question={question} />
              })}
            </div>
          )
--- a/src/components/Subject.js
+++ b/src/components/Subject.js
@ -3,26 +3,19 @@ import React, { PureComponent } from 'react'
 import Question from './Question.js'

 class Subject extends PureComponent {
-  render () {
+  render() {
    const { subj } = this.props

    if (subj) {
      return (
-        <div >
+        <div>
          {subj.Questions.map((question, i) => {
-            return (
-              <Question
-                key={i}
-                question={question}
-              />
-            )
+            return <Question key={i} question={question} />
          })}
        </div>
      )
    } else {
-      return (
-        <div />
-      )
+      return <div />
    }
  }
 }
--- a/src/components/SubjectSelector.js
+++ b/src/components/SubjectSelector.js
@ -1,10 +1,10 @@
 import styles from './SubjectSelector.module.css'

-export default function SubjectSelector (props) {
+export default function SubjectSelector(props) {
  const { activeSubjName, searchTerm, data, onSubjSelect } = props

  return (
-    <div className='subjectSelector'>
+    <div className="subjectSelector">
      {data.map((subj, i) => {
        if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
          return null
@ -12,16 +12,15 @@ export default function SubjectSelector (props) {

        return (
          <div
-            className={activeSubjName === subj.Name
-              ? 'subjItem activeSubjItem'
-              : 'subjItem'
+            className={
+              activeSubjName === subj.Name
+                ? 'subjItem activeSubjItem'
+                : 'subjItem'
            }
            key={i}
            onClick={() => onSubjSelect(subj.Name)}
          >
-            <span className={styles.subjName}>
-              {subj.Name}
-            </span>
+            <span className={styles.subjName}>{subj.Name}</span>
            <span className={styles.questionCount}>
              [ {subj.Questions.length} ]
            </span>
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -80,11 +80,15 @@ export default function Layout({
            <div />
          </span>
          <div className="sidebarheader">
-            <Link href="/"><a><img
-              style={{ maxWidth: '100%' }}
-              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
-              alt="Frylabs"
-            /></a></Link>
+            <Link href="/">
+              <a>
+                <img
+                  style={{ maxWidth: '100%' }}
+                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+                  alt="Frylabs"
+                />
+              </a>
+            </Link>
          </div>
        </div>
        {sidebarOpen ? (
@ -123,9 +127,9 @@ export default function Layout({
                rel="noreferrer"
              >
                Donate
-              </a>  
+              </a>
            </div>
-            <div className="userStatus">   
+            <div className="userStatus">
              <div className="msgs">
                <div
                  onClick={() => {
--- a/src/components/sleep.js
+++ b/src/components/sleep.js
@ -1,18 +1,19 @@
 import constants from '../constants.json'

-export default function Sleep (props) {
+export default function Sleep(props) {
  const hours = new Date().getHours()
  if (hours < 4 || hours > 23) {
    return (
-        <div>
+      <div>
        <center>
          <img
            style={{
              margin: '10px',
              width: '300px',
-              border: '2px solid white'
+              border: '2px solid white',
            }}
-            src={constants.siteUrl + 'img/aludni.jpeg'} title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
+            src={constants.siteUrl + 'img/aludni.jpeg'}
+            title="Ezt a kepet azert latod, mert ilyenkor mar igazan nem ezen az oldalon kellene jarnod"
          />
        </center>
      </div>
--- a/src/data/helps.json
+++ b/src/data/helps.json
@ -1,8 +1,5 @@
 {
-  "header": [
-    "Miben",
-    "Hogy"
-  ],
+  "header": ["Miben", "Hogy"],
  "rows": {
    "feedbacker": {
      "name": "Visszajelzésben",
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@ -15,7 +15,7 @@ body {
 }

 li {
-    padding: 2px 0px;
+  padding: 2px 0px;
 }

 a {
@ -195,7 +195,7 @@ input {
 }

 .endofpage {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
 }

 .questionContainer {
@ -267,40 +267,40 @@ input {
 }

 .warning {
-    color: red;
-    font-weight: 100;
-    font-size: 17.5px;
+  color: red;
+  font-weight: 100;
+  font-size: 17.5px;
 }

 #manualWarn {
-    font-size: 14px;
+  font-size: 14px;
 }

 .manual_img {
-    padding: 20px 2px;
+  padding: 20px 2px;
 }

 .subtitle {
-    color: var(--text-color);
-    font-size: 23px;
-    text-align: center;
-    font-weight: 100;
-    margin: 0px;
-    padding-top: 8px;
+  color: var(--text-color);
+  font-size: 23px;
+  text-align: center;
+  font-weight: 100;
+  margin: 0px;
+  padding-top: 8px;
 }

 .pageHeader {
-    background-color: var(--text-color);
-    height: 45px;
-    max-width: 100%;
-    color: black;
-    margin: 5px 0px 0px 0px;
+  background-color: var(--text-color);
+  height: 45px;
+  max-width: 100%;
+  color: black;
+  margin: 5px 0px 0px 0px;
 }

 .pageHeader h1 {
-    padding-top: 6px;
-    letter-spacing: 7px;
-    margin: 0px;
+  padding-top: 6px;
+  letter-spacing: 7px;
+  margin: 0px;
 }

 .manualUsage {
@ -309,7 +309,7 @@ input {
 }

 .manualBody {
-    text-align: justify;
+  text-align: justify;
 }

 select {
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -1,8 +1,15 @@
-export default function Custom404 () {
+export default function Custom404() {
  return (
    <center>
      <h1>404</h1>
-      <iframe width='660' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen />
+      <iframe
+        width="660"
+        height="465"
+        src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
    </center>
  )
 }
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@ -1,16 +1,16 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'

 class MyDocument extends Document {
-  static async getInitialProps (ctx) {
+  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

-  render () {
+  render() {
    return (
      <Html>
        <Head />
-        <body bgcolor='#222426'>
+        <body bgcolor="#222426">
          <Main />
          <NextScript />
        </body>
--- a/src/pages/_error.js
+++ b/src/pages/_error.js
@ -1,9 +1,16 @@
-function Error ({ statusCode }) {
+function Error({ statusCode }) {
  const render404 = () => {
    return (
      <center>
        <h1>404</h1>
-        <iframe width='100%' height='465' src='https://www.youtube-nocookie.com/embed/GOzwOeONBhQ' frameBorder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowFullScreen />
+        <iframe
+          width="100%"
+          height="465"
+          src="https://www.youtube-nocookie.com/embed/GOzwOeONBhQ"
+          frameBorder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
      </center>
    )
  }
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@ -3,22 +3,22 @@
 }

 .button {
-    color: white;
-    background-color: #313131;
-    margin: 0px 4px;
-    padding: 15px 4px;
-    max-width: 100%;
-    text-align: center;
-    font-size: 16px;
-    cursor: pointer;
-    word-wrap: break-word;
-    text-decoration: none;
-    transition: width 0.5s, height 0.5s, ease-in 0.5s;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    user-select: none;
+  color: white;
+  background-color: #313131;
+  margin: 0px 4px;
+  padding: 15px 4px;
+  max-width: 100%;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  word-wrap: break-word;
+  text-decoration: none;
+  transition: width 0.5s, height 0.5s, ease-in 0.5s;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  user-select: none;
 }

 .button:hover {
--- a/src/pages/manual.js
+++ b/src/pages/manual.js
@ -15,44 +15,49 @@ function renderMaual() {
      </Head>
      <center>
        <div className={'pageHeader'}>
-            <h1>Manual</h1>
-        </div>     
+          <h1>Manual</h1>
+        </div>
        <h3 className={'warning'}>
          Ha az oldalt vagy a scriptet használod: akármikor észrevehetik,
          leállhat a szerver, és rossz lehet az összes válasz!
        </h3>
-        <p id="manualWarn">Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
-        olvasd el a <a href="#risk">kockázatok részt</a>.</p>
+        <p id="manualWarn">
+          Valószínűleg semmi baj nem lesz, de én szóltam. Ha emiatt aggódsz,
+          olvasd el a <a href="#risk">kockázatok részt</a>.
+        </p>
      </center>
      <Sleep />
-      <center>
-      </center>
+      <center></center>
      <hr />
      <center>
        <h2 className={'subtitle'}>A userscript használata</h2>
      </center>
      <div className={'manualUsage manualBody'}>
        <div>
-          <p>Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget
-          jelenít meg.</p>
+          <p>
+            Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
+            segítséget jelenít meg.
+          </p>
          <ul>
            <li>
-              Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a {' '}
+              Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
              <a
                href="https://www.tampermonkey.net/"
                target="_blank"
                rel="noreferrer"
              >
                Tampermonkey
-              </a>-t.
+              </a>
+              -t.
            </li>
            <li>
-              A <a
+              A{' '}
+              <a
                href="http://qmining.frylabs.net/install?man"
                target="_blank"
                rel="noreferrer"
              >
-               weboldalról
+                weboldalról
              </a>{' '}
              rakd fel a scriptet.
            </li>
@ -64,8 +69,8 @@ function renderMaual() {
              Ezután:
              <ul>
                <li>
-                  A kitöltendő teszt oldalán a kérdésre a választ kell látnod felül egy
-                  lebegő ablakban.
+                  A kitöltendő teszt oldalán a kérdésre a választ kell látnod
+                  felül egy lebegő ablakban.
                </li>
                <li>
                  Teszt ellenőrzés oldalon a script beküldi a szervernek a
@ -90,12 +95,12 @@ function renderMaual() {
              (ha elszállna a szerver)
            </li>
            <li>
-              Az <a
-                href="/allQuestions"
-                rel="noreferrer"
-              >
+              Az{' '}
+              <a href="/allQuestions" rel="noreferrer">
                összes kérdés oldal
-              </a> az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a scripttel.
+              </a>{' '}
+              az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a
+              scripttel.
            </li>
          </ul>
        </div>
@ -112,85 +117,103 @@ function renderMaual() {
        <h2 className={'subtitle'}>Jelszavak</h2>
      </center>
      <div className={'manualBody'}>
-      <p>Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
-      nagyjából zárt legyen a felhasználók köre.</p>
-      <ul>
-        <li>Minden felhasználónak más jelszava van.</li>
-        <li>
-          Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
-          <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>! Ha
-          többször kell megadnod, akkor az bug lesz. Ilyenkor ezt {' '}
-          <a
-            href="http://qmining.frylabs.net/feedback?man"
-            target="_blank"
-            rel="noreferrer"
-          >
-            jelentsd
-          </a>.
-        </li>
-        <li>
-          <i>
-            Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
-            örökre eltűnik!
-          </i>
-        </li>
-        <li>
-          Ha van jelszavad akkor {' '}
-          <b>bizonyos határok között</b>{' '}
-           te is <a
-            href="https://qmining.frylabs.net/pwRequest?man"
-            target="_blank"
-            rel="noreferrer"
-          >
-            tudsz generálni
-          </a> másoknak (ncore style).
-        </li>
-        <li>
-          Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek, ha tudsz adni másoknak az előző pont alapján) 
-        </li>
-        <li>
-          Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul találsz), 
-          így az egész teljesen anonim. Emiatt a jelszavakat nem lehet megváltoztatni, 
-          hogy a szükséges komplexitás megmaradjon.
-        </li>
-      </ul>
+        <p>
+          Ha ezt olvasod valszeg már neked is van. Azért lett bevezetve, hogy
+          nagyjából zárt legyen a felhasználók köre.
+        </p>
+        <ul>
+          <li>Minden felhasználónak más jelszava van.</li>
+          <li>
+            Elvileg elég csak 1 szer beírnod, és többet nem kell, de{' '}
+            <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen</b>!
+            Ha többször kell megadnod, akkor az bug lesz. Ilyenkor ezt{' '}
+            <a
+              href="http://qmining.frylabs.net/feedback?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              jelentsd
+            </a>
+            .
+          </li>
+          <li>
+            <i>
+              Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted, akkor az
+              örökre eltűnik!
+            </i>
+          </li>
+          <li>
+            Ha van jelszavad akkor <b>bizonyos határok között</b> te is{' '}
+            <a
+              href="https://qmining.frylabs.net/pwRequest?man"
+              target="_blank"
+              rel="noreferrer"
+            >
+              tudsz generálni
+            </a>{' '}
+            másoknak (ncore style).
+          </li>
+          <li>
+            Saját jelszavadat ne oszd meg, mivel egyszerre egy helyen lehetsz
+            belépve, máshol automatikusan ki leszel jelentkeztetve. (meg minek,
+            ha tudsz adni másoknak az előző pont alapján)
+          </li>
+          <li>
+            Mivel senkinek sincs felhasználóneve, csak egy UserID (amit bal alul
+            találsz), így az egész teljesen anonim. Emiatt a jelszavakat nem
+            lehet megváltoztatni, hogy a szükséges komplexitás megmaradjon.
+          </li>
+        </ul>
      </div>
      <hr />
      <center>
        <h2 className={'subtitle'}>Gyakran Ismételt Kérdések</h2>
      </center>
      <div className={'manualBody'}>
-      <ul>
-        <li>
-          <b>
-            Olyan helyeken fut le a script, ahol nem kellene, vagy ideiglenesen
-            ki akarod kapcsolni;
-          </b>
-          <br /><i>Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
-          kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)</i>
-        </li>
-        <br />
-        <li>
-          <b>
-            Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
-            válaszra kattintani;
-          </b>
-          <br /><i>Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet, 
-          vagy zárd be a script ablakát. Illetve a középső egérgombbal kattintva a 
-          script abalkon el bírod tüntetni, amíg újra nem töltöd az oldalt, vagy görgetéssel 
-          állíthatsz az átlátszóságán.</i>
-        </li>
-        <br />
-        <li>
-        <b>Gombok, %-ok, számok;</b>
-        <br />
-        <img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" className={'manual_img'} />
-        </li>
-      </ul>
+        <ul>
+          <li>
+            <b>
+              Olyan helyeken fut le a script, ahol nem kellene, vagy
+              ideiglenesen ki akarod kapcsolni;
+            </b>
+            <br />
+            <i>
+              Tampermonkey bővitmény ikon -{'>'} click -{'>'} a scriptet
+              kapcsold ki. Csak ne felejtsd el visszakapcsolni ;)
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>
+              Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a
+              válaszra kattintani;
+            </b>
+            <br />
+            <i>
+              Zoomolj ki egy kicsit az oldalon, kapcsold ki addig a scriptet,
+              vagy zárd be a script ablakát. Illetve a középső egérgombbal
+              kattintva a script abalkon el bírod tüntetni, amíg újra nem töltöd
+              az oldalt, vagy görgetéssel állíthatsz az átlátszóságán.
+            </i>
+          </li>
+          <br />
+          <li>
+            <b>Gombok, %-ok, számok;</b>
+            <br />
+            <img
+              style={{ maxWidth: '100%' }}
+              src="img/6.png"
+              alt="img"
+              className={'manual_img'}
+            />
+          </li>
+        </ul>
      </div>
      <hr />
      <center>
-        <h2 id="risk" className={'subtitle'}>Kockázatok</h2>
+        <h2 id="risk" className={'subtitle'}>
+          Kockázatok
+        </h2>
      </center>
      <ul>
        <li>
@ -240,30 +263,42 @@ function renderMaual() {
        </li>
      </ul>
      <hr />
-      <h2 id="sitesave" className={'subtitle'}>Weboldal lementése</h2>
-      <p>Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
-          javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így lehet
-      menteni egy oldalt:</p>
+      <h2 id="sitesave" className={'subtitle'}>
+        Weboldal lementése
+      </h2>
+      <p>
+        Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
+        javítani, sokszor jól jön, ha egy lementett weboldalt megkapok. Így
+        lehet menteni egy oldalt:
+      </p>
      <center>
-      <img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" className={'manual_img'} />
-      <br />
-      <a
-        href="/feedback"
-        rel="noreferrer"
-      >
-        Ide tudod feltölteni
-      </a>
+        <img
+          style={{ maxWidth: '100%' }}
+          src="img/websitesave.png"
+          alt="img"
+          className={'manual_img'}
+        />
+        <br />
+        <a href="/feedback" rel="noreferrer">
+          Ide tudod feltölteni
+        </a>
      </center>
-      <p>Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
-      hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd azt
-      az oldalt amin hibával találkozol.</p>
+      <p>
+        Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
+        hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
+        azt az oldalt amin hibával találkozol.
+      </p>
      <hr />
-      <h2 id="scriptreinstall" className={'subtitle'}>Script újratelepítése</h2>
-      <p>Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
-      weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
-      onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
-      fontosak (de tényleg)). Ezért a következő rövid manővert kellene
-      végrehajtani, hogy minden zökkenőmentesen menjen:</p>
+      <h2 id="scriptreinstall" className={'subtitle'}>
+        Script újratelepítése
+      </h2>
+      <p>
+        Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
+        weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
+        onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
+        fontosak (de tényleg)). Ezért a következő rövid manővert kellene
+        végrehajtani, hogy minden zökkenőmentesen menjen:
+      </p>
      <ul>
        <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
        <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
@ -281,7 +316,8 @@ function renderMaual() {
            rel="noreferrer"
          >
            ide
-          </a> a script újratelepítéséhez a weboldalról.
+          </a>{' '}
+          a script újratelepítéséhez a weboldalról.
        </li>
        <li>
          Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak
--- a/src/pages/pwRequest.module.css
+++ b/src/pages/pwRequest.module.css
@ -27,7 +27,7 @@
 }

 .pwContainer {
-  font-family: "Courier New", Courier, monospace;
+  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  font-size: 24px;
  color: white;
--- a/src/pages/thanks.js
+++ b/src/pages/thanks.js
@ -2,7 +2,7 @@ import styles from './thanks.module.css'
 import constants from '../constants.json'
 import Head from 'next/head'

-export default function Thanks () {
+export default function Thanks() {
  return (
    <div>
      <Head>