第一篇博客

目录

• 旅途开始

  • p5js

  • text

  • framer-motion useScroll

  • css-doodle

  • basic

    • noise

  • 惯性滚动

  • Remark 和 Rehype

  • 相关链接

旅途开始

# 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.

相关链接

• css-doodle
• observablehq yuanchuan