Merge pull request #5 from Cattttttttt/dev

FIrst production version

.lintstagedrc.js

@@ -6,9 +6,5 @@ const buildEslintCommand = (filenames) =>
     .join(' --file ')}`;
 
 module.exports = {
-  '!(.*).{js,jsx,ts,tsx}': [
-    'tsc-files --noEmit',
-    buildEslintCommand,
-    'prettier --write',
-  ],
+  '!(.*).{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
 };

README.md

@@ -1,3 +1,27 @@
 # Blog
 
-TODO
+### TODOS
+- [x] fix display bugs when down md and open menu
+- [x] add header picture text
+- [x] add fab
+- [x] add layout for main page
+- [x] impl scroll to load more
+- [x] impl article page using remark & rehype, using ketax
+- [x] impl archives page
+- [x] impl tags page
+- [ ] impl about page (using mdx?)
+- [x] impl friend link page
+- [ ] add dark mode
+- [x] change header picture, bing api?
+- [ ] add search
+- [ ] add comment system, maybe gittalk?
+- [ ] impl pwa for mobile
+- [ ] maybe add more animations to main page load more?
+- [ ] impl sidebar TOC for article page
+- [x] error page
+- [ ] add i18n
+- [ ] add semantic html
+- [ ] add accessibility
+- [ ] refactor code, using mui typography for different font style
+- [ ] seperate category from tag
+- [ ] add rss

components/index.tsx

@@ -0,0 +1,2 @@
+export * from './tagContainer';
+export * from './linkContainer';

components/layout/appLayout.tsx

@@ -0,0 +1,71 @@
+import {
+  type FC,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { Box, Theme, Slide, Fab } from '@mui/material';
+import { ExpandLess } from '@mui/icons-material';
+import { throttle } from 'throttle-debounce';
+
+import { AppHeader } from './header';
+
+export interface AppLayoutProps {
+  fabActiveHeight?: number;
+  children: ReactNode;
+}
+
+export const AppLayout: FC<AppLayoutProps> = (props) => {
+  const [fabShow, setFabShow] = useState(false);
+
+  useEffect(() => {
+    const onScroll = throttle(50, () => {
+      setFabShow(
+        () =>
+          !!props.fabActiveHeight &&
+          document.documentElement.scrollTop >
+            (props.fabActiveHeight / 100) * window.innerHeight
+      );
+    });
+    onScroll();
+    document.addEventListener('scroll', onScroll);
+    return () => document.removeEventListener('scroll', onScroll);
+  }, [props.fabActiveHeight]);
+
+  const handleFabClick = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  return (
+    <>
+      <AppHeader />
+      <Box
+        sx={{
+          backgroundColor: (theme: Theme) => theme.palette.grey[200],
+          minHeight: '100vh',
+        }}
+      >
+        {props.children}
+      </Box>
+      <Slide direction="up" in={fabShow}>
+        <Fab
+          size="medium"
+          onClick={handleFabClick}
+          sx={{
+            position: 'fixed',
+            bottom: 24,
+            right: 24,
+            borderRadius: '4px',
+            backgroundColor: 'common.white',
+          }}
+        >
+          <ExpandLess fontSize="large" />
+        </Fab>
+      </Slide>
+    </>
+  );
+};

components/layout/bodyContainer.tsx

@@ -0,0 +1,71 @@
+import { Container, Theme, Paper } from '@mui/material';
+import { type FC, useState, useEffect } from 'react';
+import { throttle } from 'throttle-debounce';
+
+import type { DefaultLayoutProps } from './defaultLayout';
+
+export const BodyContainer: FC<DefaultLayoutProps> = ({
+  headerHeight,
+  children,
+}) => {
+  const [paperMarginTop, setPaperMarginTop] = useState(2);
+
+  useEffect(() => {
+    const calculateMarginTop = () =>
+      Math.min(
+        6,
+        ((document.documentElement.clientHeight -
+          (headerHeight / 100) * window.innerHeight +
+          document.documentElement.scrollTop) /
+          (0.8 * window.innerHeight)) *
+          6
+      );
+    const onScroll = throttle(10, (ev?: Event) => {
+      if (!ev) setPaperMarginTop(calculateMarginTop());
+      else
+        setPaperMarginTop((cur) => {
+          return document.documentElement.scrollTop +
+            document.documentElement.clientHeight +
+            0.1 * window.innerHeight >
+            document.documentElement.scrollHeight
+            ? cur
+            : calculateMarginTop();
+        });
+    });
+    onScroll();
+    document.addEventListener('scroll', onScroll);
+    return () => document.removeEventListener('scroll', onScroll);
+  }, [headerHeight]);
+
+  return (
+    <Container
+      sx={{
+        maxWidth: (theme: Theme) => ({
+          sm: theme.contentWidthScale * theme.breakpoints.values.sm,
+          md: theme.contentWidthScale * theme.breakpoints.values.md,
+          lg: theme.contentWidthScale * theme.breakpoints.values.lg,
+        }),
+        padding: {
+          xs: '0 0 2rem 0',
+          sm: 'initial initial 2rem initial',
+        },
+      }}
+    >
+      <Paper
+        elevation={18}
+        sx={{
+          padding: '2rem',
+          marginTop: {
+            xs: '0',
+            sm: `-${paperMarginTop}rem`,
+          },
+          minHeight: `${100 - headerHeight}vh`,
+          borderRadius: '0.5rem',
+          display: 'flex',
+        }}
+      >
+        {children}
+      </Paper>
+    </Container>
+  );
+};

components/layout/bodyHeader.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@mui/material';
+import type { FC } from 'react';
+
+import type { DefaultLayoutProps } from './defaultLayout';
+import { HeaderTitle } from './headerTitle';
+
+export const BodyHeader: FC<Omit<DefaultLayoutProps, 'children'>> = (props) => (
+  <Box
+    sx={{
+      height: `${props.headerHeight}vh`,
+      background: `rgba(0, 0, 0, 0) url("${
+        props.headerBanner ||
+        process.env.NEXT_PUBLIC_HEADER_PICTURE_FALLBACK ||
+        'http://api.dujin.org/bing/1920.php'
+      }") no-repeat scroll center center / cover`,
+    }}
+  >
+    <Box
+      sx={{
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        px: '10%',
+      }}
+    >
+      {props.headerTitle &&
+        (typeof props.headerTitle === 'string' ? (
+          <HeaderTitle>{props.headerTitle}</HeaderTitle>
+        ) : (
+          props.headerTitle
+        ))}
+    </Box>
+  </Box>
+);

components/layout/defaultLayout.tsx

@@ -0,0 +1,19 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+import { BodyContainer } from './bodyContainer';
+import { BodyHeader } from './bodyHeader';
+
+export interface DefaultLayoutProps {
+  headerTitle?: string | ReactElement;
+  headerHeight: number;
+  headerBanner?: string;
+  children: ReactNode;
+}
+
+export const DefaultLayout: FC<DefaultLayoutProps> = (props) => {
+  return (
+    <>
+      <BodyHeader {...props} />
+      <BodyContainer {...props} />
+    </>
+  );
+};