第一篇博客

旅途开始

新建仓库

使用astro-paper主题


        
    
# npm 6.x
npm create astro@latest --template satnaing/astro-paper
# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper

p5js

text

文字渐变色背景使用

framer-motion useScroll


        
    
import "./styles.css";
import { motion, useScroll } from "framer-motion";

export default function App() {
  const { scrollYProgress } = useScroll();
  return (
    <>
      <motion.div
        className="progress-bar"
        style={{ scaleX: scrollYProgress }}
      />
    </>
  );
}

css-doodle

basic

noise

todo:这个组件会使滑动卡卡的,分析原因


        
    
import Noise from "@components/react/doodle/noise.tsx";
<Noise client:load />;


        
    
import "css-doodle";
import {
  useEffect,
  useState,
  type ReactNode,
  type ReactElement,
  useRef,
} from "react";

interface Props {
  children: ReactNode;
  download?: Boolean;
}

const Doodle: React.FunctionComponent<Props> = ({ children, download }) => {
  let value = (children as ReactElement).props.value;
  let doodle = useRef<any>(null);
  let [show, setShow] = useState(false);
  const click = () => {
    setShow(show => !show);
  };
  useEffect(() => {
    setShow(true);
  });
  const downloadClick = () => {
    doodle.current &&
      doodle.current.export({
        scale: 8,
        download: true,
      });
  };
  return (
    <div>
      {show && (
        <css-doodle ref={doodle} onClick={click}>
          {value}
        </css-doodle>
      )}
      {download && <button onClick={downloadClick}>下载</button>}
    </div>
  );
};

export default Doodle;

在 mdx 中使用 dooble 组件,inner children 中的’{‘需要替换成’{‘


        
    
import Common from "@components/react/doodle/common.tsx";

<Common  client:load>
@grid: 14 / 50vmin;
@random \{
border-left: 1px solid #5d81bc
}
@random \{
  border-top: 1px solid #5d81bc;
}
@random(.25) \{
  background: linear-gradient(
    @p(#fff, tan, #5d81bc), @lp
  )
  50% / @r(60%) @lr
  no-repeat;
}
@random \{
  filter: drop-shadow(0 0 10px #fff);
}
</Common>

惯性滚动


        
    
pnpm i @studio-freight/lenis


        
    
const lenis = new Lenis();
lenis.on("scroll", e => {
  console.log(e);
});
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

Remark 和 Rehype

Remark 和 Rehype 都是用于将 Markdown 转换为 HTML 的工具.

Remark 是一个基于 Node.js 的 Markdown 解析器,它将 Markdown 文本解析为 HTML.它支持插件系统,允许用户自定义解析过程.Remark 通常用于生成静态站点,例如博客或文档.

Rehype 是一个基于 Remark 的工具,它提供了额外的功能,例如代码高亮、表格和引用.Rehype 支持多种语言,包括 JavaScript、Python、CSS 和 HTML.Rehype 通常与 Remark 一起使用,以便在解析 Markdown 时应用额外的功能.

例如rehype-autolink-headings is a rehype plugin to add links from headings back to themselves.

下学

人可用功的功夫称之为下学,此功夫在可见,可闻,可言,可思处

update astro to 4.12

new features

允许你结合高性能静态HTML和动态服务器生成组件,可以为不同类型的内容选择不同的缓存策略,并提高页面加载速度