moved meta tags and implemented date range feature

This commit is contained in:
Kim, Jimin 2021-08-04 17:05:32 +09:00
parent 5414950e7b
commit a07cc664c9
3 changed files with 52 additions and 23 deletions

View file

@ -4,8 +4,10 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="developomp's website" />
<meta property="og:image" content="%PUBLIC_URL%/img/icon.png" />
<meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link

View file

@ -301,15 +301,12 @@ export default class App extends React.Component<AppProps, AppState> {
}}
>
<Helmet>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#000000" />
<meta
property="og:site_name"
content="developomp"
/>
<meta property="og:title" content="developomp" />
<meta property="og:title" content="Home" />
<meta
property="og:description"
@ -318,12 +315,7 @@ export default class App extends React.Component<AppProps, AppState> {
<meta
property="og:url"
content="https://developomp.com"
/>
<meta
property="og:image"
content="https://developomp.com/img/icon.png"
content={process.env.PUBLIC_URL}
/>
</Helmet>

View file

@ -44,6 +44,24 @@ const StyledSearchControlContainer = styled.div`
}
`
function isDateInRange(
dateToCompare: string,
from: string,
to: string
): boolean {
if (!dateToCompare) throw Error("No date to compare")
const isFrom = !!from
const isTo = !!to
if (!isFrom && !isTo) return true
if (!isFrom && isTo) return Date.parse(dateToCompare) < Date.parse(to)
if (!isTo && isFrom) return Date.parse(dateToCompare) > Date.parse(from)
const compareDate = Date.parse(dateToCompare)
return Date.parse(from) < compareDate && compareDate < Date.parse(to)
}
// todo: find ways to get rid of wrapper component
export default function Search() {
return <_Search />
@ -70,7 +88,7 @@ function _Search() {
const [dateRange, setDateRange] = useState([
{
startDate: new Date(),
startDate: new Date(0),
endDate: null,
key: "selection",
},
@ -84,15 +102,6 @@ function _Search() {
<>
<Helmet>
<title>pomp | Search</title>
<meta property="og:title" content="Search" />
<meta property="og:type" content="website" />
<meta property="og:url" content={process.env.PUBLIC_URL} />
<meta
property="og:image"
content={process.env.PUBLIC_URL + "/icon/icon.svg"}
/>
<meta property="og:description" content="search" />
</Helmet>
<StyledSearch className="card main-content">
@ -182,6 +191,20 @@ function _Search() {
Search test 2
</button>
<br />
<button
onClick={() => {
setDateRange([
{
startDate: new Date(0),
endDate: null,
key: "selection",
},
])
}}
>
clear date
</button>
<br />
<button
onClick={() => {
try {
@ -189,17 +212,29 @@ function _Search() {
for (const res of index.search(
searchInput
)) {
if (map.posts[res.ref]) {
const postData = map.posts[res.ref]
if (
// check if post data exists
postData &&
// check if date is within the range
isDateInRange(
postData.date,
query.from,
query.to
)
) {
_postCards.push(
<PostCard
key={res.ref}
postData={{
url: res.ref,
...map.posts[res.ref],
...postData,
}}
/>
)
}
// apply search result
setPostCards(_postCards)
}