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

2
apps/blog/package.json
View file

@ -21,6 +21,7 @@
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"elasticlunr": "^0.9.5", "elasticlunr": "^0.9.5",
"highlight.js": "^11.7.0", "highlight.js": "^11.7.0",
"hoofd": "^1.7.0",
"katex": "^0.16.4", "katex": "^0.16.4",
"local-storage-fallback": "^4.1.2", "local-storage-fallback": "^4.1.2",
"react": "^18.2.0", "react": "^18.2.0",
@ -30,7 +31,6 @@
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-router-dom": "^6.4.5", "react-router-dom": "^6.4.5",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-select": "^5.7.0", "react-select": "^5.7.0",

13
apps/blog/public/index.html
View file

@ -4,12 +4,17 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" /> <link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta property="og:image" content="%PUBLIC_URL%/img/icon.png" /> <meta name="description" content="developomp's Blog" />
<meta property="og:type" content="website" />
<title>pomp</title> <title>pomp</title>
<!-- OpenGraph -->
<meta property="og:title" content="pomp" />
<meta property="og:site_name" content="developomp's Blog" />
<meta property="og:description" content="developomp's Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blog.developomp.com" />
<meta property="og:image" content="%PUBLIC_URL%/icon/icon_circle.svg" />
</head> </head>
<body> <body>
<noscript> <noscript>

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 { useContext, useEffect, useState } from "react"
import { Routes, Route } from "react-router-dom" import { Routes, Route } from "react-router-dom"
import styled, { ThemeProvider } from "styled-components" 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 { isIE } from "react-device-detect"
import Loading from "./components/Loading" import Loading from "./components/Loading"
@ -36,9 +36,12 @@ const StyledContentContainer = styled.div`
export default function App() { export default function App() {
const { globalState } = useContext(globalContext) const { globalState } = useContext(globalContext)
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
useTitleTemplate("pomp's blog | %s")
useTitle("Home")
useMeta({ property: "og:title", content: "Home" })
useEffect(() => { useEffect(() => {
// set loading to false if all fonts are loaded // set loading to false if all fonts are loaded
// checks if document.fonts.onloadingdone is supported on the browser // checks if document.fonts.onloadingdone is supported on the browser
@ -68,13 +71,6 @@ export default function App() {
: lightTheme, : 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 /> <GlobalStyle />
<Header /> <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 "@fontsource/source-code-pro"
import { createRoot } from "react-dom/client" import { createRoot } from "react-dom/client"
import { HelmetProvider } from "react-helmet-async"
import { BrowserRouter } from "react-router-dom" import { BrowserRouter } from "react-router-dom"
import { GlobalStore } from "./globalContext" import { GlobalStore } from "./globalContext"
@ -14,9 +13,7 @@ const root = createRoot(container)
root.render( root.render(
<GlobalStore> <GlobalStore>
<BrowserRouter> <BrowserRouter>
<HelmetProvider> <App />
<App />
</HelmetProvider>
</BrowserRouter> </BrowserRouter>
</GlobalStore> </GlobalStore>
) )

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

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

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

@ -1,5 +1,5 @@
import styled from "styled-components" import styled from "styled-components"
import { Helmet } from "react-helmet-async" import { useTitle, useMeta } from "hoofd"
import MainContent from "../components/MainContent" import MainContent from "../components/MainContent"
@ -12,21 +12,11 @@ const Styled404 = styled.h1`
` `
const NotFound = () => { const NotFound = () => {
useTitle("404")
useMeta({ property: "og:title", content: "Page Not Found" })
return ( 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> <StyledNotFound>
<Styled404>404</Styled404> <Styled404>404</Styled404>
<br /> <br />

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

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

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

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

13
apps/main/src/app.html
View file

@ -4,11 +4,18 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" /> <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="developomp's website" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta property="og:image" content="/icon.png" /> <meta name="description" content="developomp's website" />
<meta property="og:type" content="website" />
<title>developomp</title> <title>developomp</title>
<!-- OpenGraph -->
<meta property="og:title" content="developomp" />
<meta property="og:site_name" content="developomp's website" />
<meta property="og:description" content="developomp's website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://developomp.com" />
<meta property="og:image" content="/favicon.svg" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

9
apps/portfolio/index.html
View file

@ -10,11 +10,14 @@
<!-- OpenGraph --> <!-- OpenGraph -->
<meta property="og:title" content="Portfolio" /> <meta property="og:title" content="Portfolio" />
<meta property="og:site_name" content="pomp's portfolio" /> <meta property="og:site_name" content="developomp's portfolio" />
<meta property="og:description" content="developomp's Portfolio" /> <meta property="og:description" content="developomp's Portfolio" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="http://portfolio.developomp.com" /> <meta property="og:url" content="https://portfolio.developomp.com" />
<meta property="og:image" content="/favicon.svg" /> <meta
property="og:image"
content="https://portfolio.developomp.com/favicon.svg"
/>
</head> </head>
<body class="dark"> <body class="dark">
<div id="root"></div> <div id="root"></div>

1
apps/portfolio/src/App.tsx
View file

@ -10,6 +10,7 @@ import Project from "@/routes/Project"
const App: FC = () => { const App: FC = () => {
useTitleTemplate("Portfolio | %s") useTitleTemplate("Portfolio | %s")
// no need to set title and meta tags here
return ( return (
<> <>

3
apps/portfolio/src/routes/Home/Home.tsx
View file

@ -2,7 +2,7 @@ import "./style.scss"
import portfolio from "@developomp-site/blog-content/dist/portfolio.json" import portfolio from "@developomp-site/blog-content/dist/portfolio.json"
import type { PortfolioProject } from "@developomp-site/blog-content/src/types/types" import type { PortfolioProject } from "@developomp-site/blog-content/src/types/types"
import { useTitle } from "hoofd" import { useMeta, useTitle } from "hoofd"
import { type FC } from "react" import { type FC } from "react"
import Badge from "@/components/Badge" import Badge from "@/components/Badge"
@ -29,6 +29,7 @@ for (const projectID in portfolio.projects) {
const Home: FC = () => { const Home: FC = () => {
useTitle("Home") useTitle("Home")
useMeta({ property: "og:title", content: "Home" })
return ( return (
<> <>

3
apps/portfolio/src/routes/Loading.tsx
View file

@ -1,10 +1,11 @@
import { useTitle } from "hoofd" import { useMeta, useTitle } from "hoofd"
import { type FC } from "react" import { type FC } from "react"
import Loading from "@/components/Loading" import Loading from "@/components/Loading"
const LoadingPage: FC = () => { const LoadingPage: FC = () => {
useTitle("Loading") useTitle("Loading")
useMeta({ property: "og:title", content: "Loading" })
return <Loading /> return <Loading />
} }

4
apps/portfolio/src/routes/NotFound/NotFound.tsx
View file

@ -1,8 +1,12 @@
import "./style.css" import "./style.css"
import { useMeta, useTitle } from "hoofd"
import { type FC } from "react" import { type FC } from "react"
const NotFound: FC = () => { const NotFound: FC = () => {
useTitle("404")
useMeta({ property: "og:title", content: "Page Not Found" })
return ( return (
<> <>
<h1 className="w-fit px-4 py-2 text-7xl dark:bg-dark-text-default dark:text-dark-ui-bg"> <h1 className="w-fit px-4 py-2 text-7xl dark:bg-dark-text-default dark:text-dark-ui-bg">

31
pnpm-lock.yaml generated
View file

@ -59,6 +59,9 @@ importers:
highlight.js: highlight.js:
specifier: ^11.7.0 specifier: ^11.7.0
version: 11.7.0 version: 11.7.0
hoofd:
specifier: ^1.7.0
version: 1.7.0(react@18.2.0)
katex: katex:
specifier: ^0.16.4 specifier: ^0.16.4
version: 0.16.4 version: 0.16.4
@ -86,9 +89,6 @@ importers:
react-dom: react-dom:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
react-helmet-async:
specifier: ^1.3.0
version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
react-router-dom: react-router-dom:
specifier: ^6.4.5 specifier: ^6.4.5
version: 6.4.5(react-dom@18.2.0)(react@18.2.0) version: 6.4.5(react-dom@18.2.0)(react@18.2.0)
@ -9883,12 +9883,6 @@ packages:
side-channel: 1.0.4 side-channel: 1.0.4
dev: false dev: false
/invariant@2.2.4:
resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
dependencies:
loose-envify: 1.4.0
dev: false
/ipaddr.js@1.9.1: /ipaddr.js@1.9.1:
resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==} resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
engines: {node: '>= 0.10'} engines: {node: '>= 0.10'}
@ -13130,25 +13124,6 @@ packages:
resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==} resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
dev: false dev: false
/react-fast-compare@3.2.0:
resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
dev: false
/react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
peerDependencies:
react: ^16.6.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
dependencies:
'@babel/runtime': 7.20.6
invariant: 2.2.4
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-fast-compare: 3.2.0
shallowequal: 1.1.0
dev: false
/react-html-attributes@1.4.6: /react-html-attributes@1.4.6:
resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==} resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==}
dependencies: dependencies: