Add title, description, favicon, keywords, author tags

2023-10-02 21:29:20 +04:00
parent b1e8c2a058
commit 2d867fab2a
15 changed files with 82 additions and 9 deletions
--- a/src/pages/[group].tsx
+++ b/src/pages/[group].tsx
@@ -5,6 +5,9 @@ import { getSchedule } from '@/app/agregator/schedule'
 import { NextSerialized, nextDeserializer, nextSerialized } from '@/app/utils/date-serializer'
 import { NavBar } from '@/widgets/navbar'
 import { LastUpdateAt } from '@/entities/last-update-at'
+import { groups } from '@/shared/data/groups'
+import { useRouter } from 'next/router'
+import Head from 'next/head'

 type PageProps = NextSerialized<{
  schedule: Day[]
@@ -13,9 +16,17 @@ type PageProps = NextSerialized<{

 export default function HomePage(props: PageProps) {
  const { schedule, parsedAt } = nextDeserializer(props)
+  const router = useRouter()
+  const groupName = groups[router.query.group as string][1]

  return (
    <>
+      <Head>
+        <title>Расписание {groupName} в Колледже Связи</title>
+        <meta name="description" content={`Расписание группы ${groupName} на неделю. Самый удобный и лучший сайт для просмотра расписания КС ПГУТИ.`} />
+        <meta name="keywords" content="ПГУТИ, КС ПГУТИ" />
+        <meta name="author" content="Viktor Shchelochkov" />
+      </Head>
      <NavBar />
      <LastUpdateAt date={parsedAt} />
      <Schedule days={schedule} />
@@ -26,10 +37,6 @@ export default function HomePage(props: PageProps) {
 const cachedSchedules = new Map<string, { lastFetched: Date, results: Day[] }>()
 const maxCacheDurationInMS = 1000 * 60 * 60
 export async function getServerSideProps(context: GetServerSidePropsContext<{ group: string }>): Promise<GetServerSidePropsResult<PageProps>> {
-  const groups: { [group: string]: [number, string] } = {
-    ps7: [146, 'ПС-7'],
-    pks35k: [78, 'ПКС-35к']
-  }
  const group = context.params?.group
  if (group && Object.hasOwn(groups, group) && group in groups) {
    let schedule
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -3,7 +3,14 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
  return (
    <Html lang="ru">
-      <Head />
+      <Head>
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="msapplication-TileColor" content="#da532c" />
+        <meta name="theme-color" content="#ffffff" />
+      </Head>
      <body>
        <Main />
        <NextScript />
--- a/src/shared/data/groups.ts
+++ b/src/shared/data/groups.ts
@@ -0,0 +1,4 @@
+export const groups: { [group: string]: [number, string] } = {
+  ps7: [146, 'ПС-7'],
+  pks35k: [78, 'ПКС-35к']
+}
--- a/src/widgets/navbar/index.tsx
+++ b/src/widgets/navbar/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { AddGroupButton } from '@/features/add-group'
 import { ThemeSwitcher } from '@/features/theme-switch'
 import { Button } from '@/shadcn/ui/button'
@@ -5,13 +6,41 @@ import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FaGithub } from 'react-icons/fa'
+import cx from 'classnames'

 export function NavBar() {
-  const { resolvedTheme, theme } = useTheme()
+  const { resolvedTheme } = useTheme()
+  const [schemeTheme, setSchemeTheme] = React.useState<string>()
+  const navRef = React.useRef<HTMLDivElement>(null)
+
+  const getSchemeTheme = () => {
+    if (typeof window !== 'undefined') {
+      return window.localStorage.getItem('theme') || document.querySelector('html')!.style.colorScheme
+    } else 
+      return 'light'
+  }
+
+  React.useEffect(() => {
+    console.log(resolvedTheme, getSchemeTheme())
+    setSchemeTheme(getSchemeTheme())
+  }, [])
+
+  const theme = resolvedTheme || schemeTheme
+  console.log('theme', theme, cx('rounded-lg p-2 w-full flex justify-between', { 'bg-slate-200': theme === 'light', 'bg-slate-900': theme === 'dark' }))
+
+  React.useEffect(() => {
+    if(theme === 'light') {
+      navRef.current?.classList.add('bg-slate-200')
+      navRef.current?.classList.remove('bg-slate-900')
+    } else {
+      navRef.current?.classList.add('bg-slate-900')
+      navRef.current?.classList.remove('bg-slate-200')
+    }
+  }, [theme])

  return (
    <header className="w-full p-2">
-      <nav className={`rounded-lg p-2 w-full flex justify-between ${(resolvedTheme || theme) === 'light' ? 'bg-slate-200' : ''} ${(resolvedTheme || theme) === 'dark' ? 'bg-slate-900' : ''}`}>
+      <nav className={cx('rounded-lg p-2 w-full flex justify-between', { 'bg-slate-200': theme === 'light', 'bg-slate-900': theme === 'dark' })} ref={navRef}>
        <ul className="flex gap-2">
          <NavBarItem url="/ps7">ПС-7</NavBarItem>
          <NavBarItem url="/pks35k">ПКС-35к</NavBarItem>