pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

feat: tidy up title & meta tags

Browse source
This commit is contained in:
Kim, Jimin 2023-06-29 23:26:20 +09:00
parent fafbc79e66
commit 62ddabb9ca
15 changed files with 60 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/blog/src/App.tsx
View file

@ -4,7 +4,7 @@ import lightTheme from "@developomp-site/theme/dist/light.json"
import { useContext, useEffect, useState } from "react"
import { Routes, Route } from "react-router-dom"
import styled, { ThemeProvider } from "styled-components"
import { Helmet } from "react-helmet-async"
import { useTitleTemplate, useTitle, useMeta } from "hoofd"
import { isIE } from "react-device-detect"
import Loading from "./components/Loading"
@ -36,9 +36,12 @@ const StyledContentContainer = styled.div`
export default function App() {
const { globalState } = useContext(globalContext)
const [isLoading, setIsLoading] = useState(true)
useTitleTemplate("pomp's blog | %s")
useTitle("Home")
useMeta({ property: "og:title", content: "Home" })
useEffect(() => {
// set loading to false if all fonts are loaded
// checks if document.fonts.onloadingdone is supported on the browser
@ -68,13 +71,6 @@ export default function App() {
: lightTheme,
}}
>
<Helmet>
<meta property="og:site_name" content="developomp" />
<meta property="og:title" content="Home" />
<meta property="og:description" content="developomp's blog" />
<meta name="description" content="developomp's blog" />
</Helmet>
<GlobalStyle />
<Header />

5
apps/blog/src/index.tsx
View file

@ -3,7 +3,6 @@ import "@fontsource/noto-sans-kr/700.css"
import "@fontsource/source-code-pro"
import { createRoot } from "react-dom/client"
import { HelmetProvider } from "react-helmet-async"
import { BrowserRouter } from "react-router-dom"
import { GlobalStore } from "./globalContext"
@ -14,9 +13,7 @@ const root = createRoot(container)
root.render(
<GlobalStore>
<BrowserRouter>
<HelmetProvider>
<App />
</HelmetProvider>
<App />
</BrowserRouter>
</GlobalStore>
)

12
apps/blog/src/pages/Home/Home.tsx
View file

@ -4,7 +4,7 @@
*/
import { useCallback, useEffect, useState } from "react"
import { Helmet } from "react-helmet-async"
import { useTitle, useMeta } from "hoofd"
import styled from "styled-components"
import PostCard from "../../components/PostCard"
@ -25,6 +25,9 @@ export default () => {
const [postsLength, setPostsLength] = useState(0)
const [postCards, setPostCards] = useState<JSX.Element[]>([])
useTitle("Home")
useMeta({ property: "og:title", content: "Home" })
const loadPostCards = useCallback(() => {
let postCount = 0
const postCards = [] as JSX.Element[]
@ -62,13 +65,6 @@ export default () => {
return (
<>
<Helmet>
<title>pomp | Home</title>
<meta property="og:type" content="website" />
<meta property="og:image" content="/icon/icon.svg" />
</Helmet>
<PostList>
<h1>Recent Posts</h1>

18
apps/blog/src/pages/NotFound.tsx
View file

@ -1,5 +1,5 @@
import styled from "styled-components"
import { Helmet } from "react-helmet-async"
import { useTitle, useMeta } from "hoofd"
import MainContent from "../components/MainContent"
@ -12,21 +12,11 @@ const Styled404 = styled.h1`
`
const NotFound = () => {
useTitle("404")
useMeta({ property: "og:title", content: "Page Not Found" })
return (
<>
<Helmet>
<title>pomp | 404</title>
<meta property="og:title" content="Page Not Found" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://blog.developomp.com" />
<meta
property="og:image"
content="http://blog.developomp.com/icon/icon.svg"
/>
<meta property="og:description" content="Page does not exist" />
</Helmet>
<StyledNotFound>
<Styled404>404</Styled404>
<br />

13
apps/blog/src/pages/Page/Page.tsx
View file

@ -1,5 +1,5 @@
import { useState, useEffect } from "react"
import { Helmet } from "react-helmet-async"
import { useTitle, useMeta } from "hoofd"
import { useLocation } from "react-router-dom"
import styled from "styled-components"
@ -37,6 +37,9 @@ export default function Page() {
const [pageType, setPageType] = useState<PageType>(PageType.POST)
const [isLoading, setIsLoading] = useState(true)
useTitle(pageData?.title || "Loading")
useMeta({ property: "og:title", content: pageData?.title })
// this code runs if either the url or the locale changes
useEffect(() => {
const content_id = pathname.replace(/\/$/, "") // remove trailing slash
@ -62,14 +65,6 @@ export default function Page() {
return (
<>
<Helmet>
<title>pomp | {pageData.title}</title>
<meta property="og:title" content={pageData.title} />
<meta property="og:type" content="website" />
<meta property="og:image" content="/icon/icon.svg" />
</Helmet>
<MainContent>
{/* next/previous series post buttons */}
{pageType == PageType.SERIES && (

9
apps/blog/src/pages/Search/Search.tsx
View file

@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from "react"
import styled from "styled-components"
import { useSearchParams } from "react-router-dom"
import { Helmet } from "react-helmet-async"
import { useTitle, useMeta } from "hoofd"
import { Range } from "react-date-range"
import elasticlunr from "elasticlunr" // search engine
@ -105,6 +105,9 @@ const Search = () => {
const [postCards, setPostCards] = useState<JSX.Element[]>([])
useTitle("Search")
useMeta({ property: "og:title", content: "Search" })
const doSearch = useCallback(() => {
try {
const _postCards: JSX.Element[] = []
@ -218,10 +221,6 @@ const Search = () => {
return (
<>
<Helmet>
<title>pomp | Search</title>
</Helmet>
<StyledSearch>
<h1>Search</h1>