feat：page loading animation && page change animation

AbsoluteZero-CHN · Jul 18, 2022 · 5a87f79 · 5a87f79
1 parent 9a4b8b6
commit 5a87f79
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 84 deletions.
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -35,7 +35,15 @@ module.exports = {
         path: path.resolve(__dirname, "src/images"),
       },
     },
-
+    {
+      resolve: `gatsby-plugin-nprogress`,
+      options: {
+        // Setting a color is optional.
+        color: `tomato`,
+        // Disable the loading spinner.
+        showSpinner: false,
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `json-content`,

diff --git a/website/package.json b/website/package.json
@@ -17,6 +17,7 @@
     "gatsby-plugin-image": "^2.17.0",
     "gatsby-plugin-manifest": "^4.17.0",
     "gatsby-plugin-mantine": "^4.0.0",
+    "gatsby-plugin-nprogress": "^4.17.0",
     "gatsby-plugin-offline": "^5.17.0",
     "gatsby-plugin-postcss": "^5.16.0",
     "gatsby-plugin-react-helmet": "^5.17.0",
@@ -42,6 +43,7 @@
     "react-highlight": "^0.14.0",
     "react-json-tree": "^0.17.0",
     "react-json-view": "^1.21.3",
+    "react-spring": "^9.4.5",
     "tailwindcss": "^3.1.0"
   },
   "devDependencies": {

diff --git a/website/src/components/AppContainer/index.jsx b/website/src/components/AppContainer/index.jsx
@@ -59,12 +59,19 @@ const AppContainer = ({ children, data, category }) => {
       if (c.type === "dir") {
         return (
           <Accordion key={c.name} iconPosition="right">
-            <Accordion.Item label={c.name}>{buildChildren(c.children)}</Accordion.Item>
+            <Accordion.Item label={c.name}>
+              {buildChildren(c.children)}
+            </Accordion.Item>
           </Accordion>
         )
       } else {
         return (
-          <Link activeClassName="active" key={c.data.id} to={`${category}/${c.data.id}`} className={`w-full pl-[20px] text-sm rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center`}>
+          <Link
+            activeClassName="active"
+            key={c.data.id}
+            to={`${category}/${c.data.id}`}
+            className={`w-full pl-[20px] text-sm rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center`}
+          >
             {c.name}
           </Link>
         )
@@ -75,10 +82,21 @@ const AppContainer = ({ children, data, category }) => {
   const asideMenu = menu => {
     const { children } = menu
     return (
-      <Navbar className="hidden md:inline-block px-0 no-scrollbar" hiddenBreakpoint="sm" width={{ sm: 200, lg: 256 }} p="xs" style={{ zIndex: "1", height: "calc(100vh - 90px)", overflowY: "auto" }}>
+      <Navbar
+        className="md:inline-block sticky top-[90px]    hidden  px-0 no-scrollbar"
+        hiddenBreakpoint="sm"
+        width={{ sm: 200, lg: 256 }}
+        p="xs"
+        style={{ zIndex: "1", overflowY: "auto", height: "calc(100vh - 90px)" }}
+      >
         {children.map(item => {
           return item.type === "file" ? (
-            <Link activeClassName="active" to={`${category}/${item.data.id}`} key={item.data.id} className={`w-full text-base pl-[20px] rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center`}>
+            <Link
+              activeClassName="active"
+              to={`${category}/${item.data.id}`}
+              key={item.data.id}
+              className={`w-full text-base pl-[20px] rounded-sm cursor-pointer hover:bg-gray-100 h-[48px] flex items-center`}
+            >
               {item.name}
             </Link>
           ) : (
@@ -96,27 +114,14 @@ const AppContainer = ({ children, data, category }) => {
   return (
     <>
       <Seo title="纯钧" />
-      <AppShell
-        styles={{
-          main: {
-            height: "calc(100vh - 90px)",
-            overflowY: "auto",
-            overflowX: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          },
-        }}
-        classNames={{
-          main: "no-scrollbar main",
-        }}
-        footer={<AppFooter />}
-        header={<AppHeader />}
-        padding={"sm"}
-        navbar={menuData.children.length > 0 && asideMenu(menuData)}
-      >
+
+      <AppHeader />
+      <div className="container-content relative border justify-between bg-white flex z-20 shadow-lg">
+        {menuData.children.length > 0 && asideMenu(menuData)}
         {children}
-      </AppShell>
+      </div>
+
+      <AppFooter />
     </>
   )
 }

diff --git a/website/src/components/AppHeader/index.jsx b/website/src/components/AppHeader/index.jsx
@@ -11,7 +11,7 @@ const AppHeader = () => {
   const links = headerList
 
   return (
-    <header className={`w-full h-[90px] bg-white sticky top-0 z-20 flex px-4 justify-between shadow-md items-center}`}>
+    <header className={`w-full h-[90px] bg-white sticky top-0 z-50 flex px-4 justify-between shadow-md items-center}`}>
       <Link to="/" className="h-full hover:text-indigo-600 font-bold flex-1 md:grow-0 md:mr-[80px] mr-0 m-0 flex items-center text-xl leading-7 capitalize">
         <img src={require("../../assets/img/logo-light.svg").default} alt="" className="m-0 h-[60px]" />
         ChunJun

diff --git a/website/src/pages/documents/index.scss b/website/src/pages/documents/index.scss
@@ -1,4 +1,4 @@
-.container {
+.container-content {
   & span.gatsby-resp-image-background-image {
     .gatsby-resp-image-image {
       max-width: 90%;

diff --git a/website/src/pages/documents/{MarkdownRemark.parent__(File)__id}.jsx b/website/src/pages/documents/{MarkdownRemark.parent__(File)__id}.jsx
@@ -3,13 +3,19 @@ import { graphql, navigate } from "gatsby"
 import { buildMenu, getFileArr } from "../../util"
 import { Left, Right } from "@icon-park/react"
 import "./index.scss"
-import { useLocation } from '@reach/router';
+import { useLocation } from "@reach/router"
+import AppFooter from "../../components/AppFooter"
+import { useSpring, animated } from "react-spring"
+
 const BlogPost = props => {
   const menuData = buildMenu(props.data.allFile.edges.map(item => item.node))
   const fileList = getFileArr(menuData.children)
   const html = props.data.markdownRemark.html
-  const tableOfContents = props.data.markdownRemark.tableOfContents
-
+  const tableOfContents = props.data.markdownRemark.tableOfContents.replace(
+    new RegExp("<a", "g"),
+    "<a permalink"
+  )
+  console.log(tableOfContents)
   const location = useLocation().pathname.split("/").pop()
   const fileIndex = fileList.map(item => item.data.id).indexOf(location)
 
@@ -24,6 +30,9 @@ const BlogPost = props => {
       setNext(fileList[fileIndex + 1].name)
     }
   }, [])
+  React.useLayoutEffect(() => {
+    if (window) window.scrollTo(0, 0)
+  }, [])
 
   function goPre() {
     if (fileIndex === 0) return
@@ -46,32 +55,53 @@ const BlogPost = props => {
       },
     })
   }
+  const aprops = useSpring({
+    to: { opacity: 1, left: 0 },
+    from: { opacity: 0, left: 100 },
+  })
 
   return (
-    <section className="container px-4 w-full">
-      <div className="flex">
-        <div className="container-wrapper md:w-2/3 2xl:w-4/5" dangerouslySetInnerHTML={{ __html: html }} />
-        <aside className="text-sm list-none relative">
-          <div className="sticky top-0 right-0" dangerouslySetInnerHTML={{ __html: tableOfContents }} />
-        </aside>
-      </div>
-      <div className="w-2/3 flex items-center justify-between">
-        <button className="ring-1 ring-gray-50 shadow-md text-sm flex items-center rounded-sm text-gray-600 w-[200px] py-4" onClick={goPre}>
-          <Left theme="outline" size="24" fill="#333" />
-          <span className="text-left px-[5px]">
-            <div className="m-0 text-gray-600">上一篇:</div>
-            <div className="text-black">{preName}</div>
-          </span>
-        </button>
-        <button className="ring-1 ring-gray-50 shadow-md text-sm flex items-center justify-end rounded-sm text-gray-600 w-[200px] py-4" onClick={goNext}>
-          <span className="text-right px-[5px]">
-            <div className="m-0 text-gray-600">下一篇:</div>
-            <div className="text-black">{nextName}</div>
-          </span>
-          <Right theme="outline" size="24" fill="#333" />
-        </button>
-      </div>
-    </section>
+    <>
+      <animated.div
+        style={{ "max-width": "800px", ...aprops }}
+        className="relative md:w-[calc(100%-600px)] px-4 pb-3 w-full"
+      >
+        <div className="w-full" dangerouslySetInnerHTML={{ __html: html }} />
+
+        <div className="w-full flex items-center justify-between">
+          <button
+            className="ring-1 ring-gray-50 hover:shadow-none hover:border border  shadow-md text-sm flex items-center rounded-sm text-gray-600 w-[200px] py-4"
+            onClick={goPre}
+          >
+            <Left theme="outline" size="24" fill="#333" />
+            <span className="text-left px-[5px]">
+              <div className="m-0 text-gray-600">上一篇:</div>
+              <div className="text-black">{preName}</div>
+            </span>
+          </button>
+          <button
+            className="ring-1 ring-gray-50 hover:shadow-none hover:border border shadow-md text-sm flex items-center justify-end rounded-sm text-gray-600 w-[200px] py-4"
+            onClick={goNext}
+          >
+            <span className="text-right px-[5px]">
+              <div className="m-0 text-gray-600">下一篇:</div>
+              <div className="text-black">{nextName}</div>
+            </span>
+            <Right theme="outline" size="24" fill="#333" />
+          </button>
+        </div>
+      </animated.div>
+
+      <aside
+        style={{ height: "calc(100vh - 90px)" }}
+        className="hidden md:inline-block  w-[300px]  flex-shrink-0 text-sm sticky top-[90px] list-none"
+      >
+        <div
+          className=" right-0"
+          dangerouslySetInnerHTML={{ __html: tableOfContents }}
+        />
+      </aside>
+    </>
   )
 }
 
@@ -90,7 +120,13 @@ export const query = graphql`
         }
       }
     }
-    allFile(filter: { sourceInstanceName: { eq: "docs" }, extension: { eq: "md" }, ctime: {} }) {
+    allFile(
+      filter: {
+        sourceInstanceName: { eq: "docs" }
+        extension: { eq: "md" }
+        ctime: {}
+      }
+    ) {
       edges {
         node {
           id

diff --git a/website/src/pages/examples/json/{jsonContent.parent__(File)__id}.jsx b/website/src/pages/examples/json/{jsonContent.parent__(File)__id}.jsx
@@ -1,37 +1,51 @@
 import React from "react"
 import { graphql } from "gatsby"
-import { JSONTree } from 'react-json-tree';
-
+import { JSONTree } from "react-json-tree"
+import { useSpring, animated } from "react-spring"
 const BlogPost = props => {
   let json = {}
   try {
     json = JSON.parse(props.data.jsonContent.content)
   } catch {}
   const theme = {
-    scheme: 'monokai',
-    author: 'wimer hazenberg (http://www.monokai.nl)',
-    base00: '#272822',
-    base01: '#383830',
-    base02: '#49483e',
-    base03: '#75715e',
-    base04: '#a59f85',
-    base05: '#f8f8f2',
-    base06: '#f5f4f1',
-    base07: '#f9f8f5',
-    base08: '#f92672',
-    base09: '#fd971f',
-    base0A: '#f4bf75',
-    base0B: '#a6e22e',
-    base0C: '#a1efe4',
-    base0D: '#66d9ef',
-    base0E: '#ae81ff',
-    base0F: '#cc6633',
-  };
-
+    scheme: "monokai",
+    author: "wimer hazenberg (http://www.monokai.nl)",
+    base00: "#272822",
+    base01: "#383830",
+    base02: "#49483e",
+    base03: "#75715e",
+    base04: "#a59f85",
+    base05: "#f8f8f2",
+    base06: "#f5f4f1",
+    base07: "#f9f8f5",
+    base08: "#f92672",
+    base09: "#fd971f",
+    base0A: "#f4bf75",
+    base0B: "#a6e22e",
+    base0C: "#a1efe4",
+    base0D: "#66d9ef",
+    base0E: "#ae81ff",
+    base0F: "#cc6633",
+  }
+  const aprops = useSpring({
+    to: { opacity: 1, left: 0 },
+    from: { opacity: 0, left: 100 },
+  })
   return (
-    <section className="w-full 2xl:flex 2xl:justify-center 2xl:items-center 2xl:text-2xl text-base">
-    <JSONTree  valueRenderer={(raw) => <em>{raw}</em>}   labelRenderer={([key]) => <strong>{key}</strong>} shouldExpandNode={()=>true} hideRoot={()=>true} theme={theme} data={json} invertTheme={true} />
-    </section>
+    <animated.section
+      style={aprops}
+      className="w-full 2xl:flex relative 2xl:justify-center 2xl:items-center 2xl:text-2xl text-base"
+    >
+      <JSONTree
+        valueRenderer={raw => <em>{raw}</em>}
+        labelRenderer={([key]) => <strong>{key}</strong>}
+        shouldExpandNode={() => true}
+        hideRoot={() => true}
+        theme={theme}
+        data={json}
+        invertTheme={true}
+      />
+    </animated.section>
   )
 }
 

diff --git a/website/src/pages/examples/sql/{jsonContent.parent__(File)__id}.jsx b/website/src/pages/examples/sql/{jsonContent.parent__(File)__id}.jsx
@@ -2,19 +2,25 @@ import React from "react"
 import { graphql } from "gatsby"
 import Highlight from "react-highlight"
 import "./index.scss"
-
+import { useSpring, animated } from "react-spring"
 const BlogPost = props => {
   let sql = ""
   try {
     sql = props.data.jsonContent.content
   } catch {}
-
+  const aprops = useSpring({
+    to: { opacity: 1, left: 0 },
+    from: { opacity: 0, left: 100 },
+  })
   return (
-    <section className="w-full 2xl:flex 2xl:justify-center 2xl:items-center 2xl:text-2xl text-base">
+    <animated.section
+      style={aprops}
+      className="w-full 2xl:flex 2xl:justify-center 2xl:items-center 2xl:text-2xl text-base"
+    >
       <Highlight className="sql w-full overflow-x-hidden" language="sql">
         {sql}
       </Highlight>
-    </section>
+    </animated.section>
   )
 }