fix: header title (#427)

* fix: header title * ref: move head
Synthetixio · Aug 31, 2024 · df8b368 · df8b368
1 parent 2cc3306
commit df8b368
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/governance/ui/index.html b/governance/ui/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta content="initial-scale=1, width=device-width" name="viewport" />
     <meta content="ie=edge" http-equiv="X-UA-Compatible" />
-    <meta name="description" content="Synthetix V3 Oracle Manager" />
+    <meta name="description" content="Synthetix V3 Governance" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="icon" href="favicon.ico" />
     <title>Synthetix V3 Governance</title>

diff --git a/governance/ui/src/components/Layout/Layout.tsx b/governance/ui/src/components/Layout/Layout.tsx
@@ -2,27 +2,10 @@ import { Flex } from '@chakra-ui/react';
 import Footer from '../Footer/Footer';
 import { Header } from '../Header';
 import { Outlet } from 'react-router-dom';
-import Head from 'react-helmet';
 
 export function Layout() {
   return (
     <>
-      <Head>
-        {/* open graph */}
-        <meta property="og:url" content="https://governance.synthetix.io/" />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content="Synthetix | Governance" />
-        <meta property="og:description" content="Synthetix v3 Governance" />
-        <meta property="og:image" content="https://governance.synthetix.io/governance.png" />
-        <meta property="og:image:alt" content="Synthetix | Governance" />
-        <meta property="og:site_name" content="" />
-        {/* twitter */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@synthetix_io" />
-        <meta name="twitter:creator" content="@synthetix_io" />
-        <meta name="twitter:image" content="https://governance.synthetix.io/governance.png" />
-        <meta name="twitter:url" content="https://governance.synthetix.io/governance.png" />
-      </Head>
       <Flex minH="100vh" flexDir="column">
         <Header />
         <Outlet />

diff --git a/governance/ui/src/pages/App.tsx b/governance/ui/src/pages/App.tsx
@@ -1,27 +1,50 @@
 import { Container, Flex, Heading, Text } from '@chakra-ui/react';
 import councils from '../utils/councils';
 import { CouncilCard } from '../components/CouncilCard';
+import Head from 'react-helmet';
 
 function App() {
   return (
-    <Flex w="100%" justifyContent="center">
-      <Container maxW={{ base: '100%', md: '768px', lg: '1280px' }} pt={{ base: 4, md: 14 }} mb="5">
-        <Flex flexDir="column">
-          <Heading color="gray.50" fontSize={{ base: '4xl', md: '5xl' }} mb="2">
-            Governing Councils
-          </Heading>
-          <Text fontSize="14px" lineHeight="20px" color="gray.500">
-            The Synthetix Protocol is governed by three councils, each responsible for a core aspect
-            of a DAO.
-          </Text>
-        </Flex>
-        <Flex wrap={{ base: 'wrap', lg: 'nowrap' }} w="100%" gap={{ base: 4, lg: 6 }} mt="8">
-          {councils.map((council) => (
-            <CouncilCard council={council} key={council.address.concat('council-card')} />
-          ))}
-        </Flex>
-      </Container>
-    </Flex>
+    <>
+      <Head>
+        {/* open graph */}
+        <meta property="og:url" content="https://governance.synthetix.io/" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Synthetix | Governance" />
+        <meta property="og:description" content="Synthetix v3 Governance" />
+        <meta property="og:image" content="https://governance.synthetix.io/governance.png" />
+        <meta property="og:image:alt" content="Synthetix | Governance" />
+        <meta property="og:site_name" content="" />
+        {/* twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@synthetix_io" />
+        <meta name="twitter:creator" content="@synthetix_io" />
+        <meta name="twitter:image" content="https://governance.synthetix.io/governance.png" />
+        <meta name="twitter:url" content="https://governance.synthetix.io/governance.png" />
+      </Head>
+      <Flex w="100%" justifyContent="center">
+        <Container
+          maxW={{ base: '100%', md: '768px', lg: '1280px' }}
+          pt={{ base: 4, md: 14 }}
+          mb="5"
+        >
+          <Flex flexDir="column">
+            <Heading color="gray.50" fontSize={{ base: '4xl', md: '5xl' }} mb="2">
+              Governing Councils
+            </Heading>
+            <Text fontSize="14px" lineHeight="20px" color="gray.500">
+              The Synthetix Protocol is governed by three councils, each responsible for a core
+              aspect of a DAO.
+            </Text>
+          </Flex>
+          <Flex wrap={{ base: 'wrap', lg: 'nowrap' }} w="100%" gap={{ base: 4, lg: 6 }} mt="8">
+            {councils.map((council) => (
+              <CouncilCard council={council} key={council.address.concat('council-card')} />
+            ))}
+          </Flex>
+        </Container>
+      </Flex>
+    </>
   );
 }