diff --git a/next.config.mjs b/next.config.mjs index 69fe6c7d..3f686dde 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,5 @@ import remarkCustomContainer from "@echoja/remark-custom-container"; +import rehypeSectionize from "@hbsnow/rehype-sectionize"; import bundleAnalyzer from "@next/bundle-analyzer"; import mdx from "@next/mdx"; import { remarkCodeHike } from "codehike/mdx"; @@ -160,6 +161,7 @@ const withMDX = mdx({ }, }, ], + rehypeSectionize, ], }, }); diff --git a/package.json b/package.json index 55879b18..f4663bbb 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "vite": "^6.3.5" }, "devDependencies": { + "@hbsnow/rehype-sectionize": "^1.0.7", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "^9.30.0", "@next/eslint-plugin-next": "^15.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 707a850b..9313c6e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,9 @@ importers: '@eslint/js': specifier: ^9.30.0 version: 9.30.0 + '@hbsnow/rehype-sectionize': + specifier: ^1.0.7 + version: 1.0.7 '@next/eslint-plugin-next': specifier: ^15.5.2 version: 15.5.2 @@ -485,6 +488,10 @@ packages: '@formatjs/intl-localematcher@0.6.1': resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==} + '@hbsnow/rehype-sectionize@1.0.7': + resolution: {integrity: sha512-twbVxCFf4YwgTm6FIdGtHfJ14vvIHedk2fqZTpE3X6+vszEeZlMTy7tOyI9KaP/6S2DN2Jnk7zZGtZANTD+vEg==} + engines: {node: '>=16.0.0'} + '@heroui/accordion@2.2.19': resolution: {integrity: sha512-WeQEdaxIUpWOTZC3aZJtScuLkcNUXOQneWGVAhBRHhkjEKtWlxxFf0AR5fTWeDkPNxI7rMrulA/d9vgKatHRvQ==} peerDependencies: @@ -2125,6 +2132,9 @@ packages: '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/hast@2.3.10': + resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==} + '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} @@ -2152,6 +2162,9 @@ packages: '@types/node@22.18.0': resolution: {integrity: sha512-m5ObIqwsUp6BZzyiy4RdZpzWGub9bqLJMvZDD0QMXhxjqMHMENlj+SqF5QxoUwaQNFe+8kz8XM8ZQhqkQPTgMQ==} + '@types/parse5@6.0.3': + resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} + '@types/react@19.1.12': resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==} @@ -3288,24 +3301,54 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hast-util-from-parse5@7.1.2: + resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==} + + hast-util-heading-rank@2.1.1: + resolution: {integrity: sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==} + hast-util-heading-rank@3.0.0: resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + hast-util-heading@2.0.1: + resolution: {integrity: sha512-nwRggTanShzHRYMUX46lm6pbJ2c1+TUQCETahENb6yR6c8ro8MkE0hRJm8G0IqAZl35ONgJiW8RC8+D3484vYg==} + + hast-util-is-element@2.1.3: + resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==} + hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + hast-util-parse-selector@3.1.1: + resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==} + + hast-util-raw@7.2.3: + resolution: {integrity: sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==} + hast-util-to-estree@3.1.0: resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==} + hast-util-to-html@8.0.4: + resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==} + hast-util-to-jsx-runtime@2.3.2: resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==} + hast-util-to-parse5@7.1.0: + resolution: {integrity: sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==} + hast-util-to-string@3.0.1: resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + hast-util-whitespace@2.0.1: + resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} + hast-util-whitespace@3.0.0: resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + hastscript@7.2.0: + resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==} + hosted-git-info@7.0.2: resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==} engines: {node: ^16.14.0 || >=18.0.0} @@ -3313,6 +3356,9 @@ packages: html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + html-void-elements@2.0.1: + resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==} + ignore@5.3.2: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} @@ -3390,6 +3436,10 @@ packages: resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==} engines: {node: '>= 0.4'} + is-buffer@2.0.5: + resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==} + engines: {node: '>=4'} + is-bun-module@2.0.0: resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==} @@ -4098,6 +4148,9 @@ packages: resolution: {integrity: sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==} engines: {node: '>=16'} + parse5@6.0.1: + resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} + path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -4250,12 +4303,21 @@ packages: rehype-autolink-headings@7.1.0: resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} + rehype-parse@8.0.5: + resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==} + rehype-recma@1.0.0: resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} rehype-slug@6.0.0: resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} + rehype-stringify@9.0.4: + resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==} + + rehype@12.0.1: + resolution: {integrity: sha512-ey6kAqwLM3X6QnMDILJthGvG1m1ULROS9NT4uG9IDCuv08SFyLlreSuvOa//DgEvbXx62DS6elGVqusWhRUbgw==} + remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} @@ -4697,27 +4759,45 @@ packages: unified-engine@11.2.2: resolution: {integrity: sha512-15g/gWE7qQl9tQ3nAEbMd5h9HV1EACtFs6N9xaRBZICoCwnNGbal1kOs++ICf4aiTdItZxU2s/kYWhW7htlqJg==} + unified@10.1.2: + resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==} + unified@11.0.5: resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} unist-util-inspect@8.1.0: resolution: {integrity: sha512-mOlg8Mp33pR0eeFpo5d2902ojqFFOKMMG2hF8bmH7ZlhnmjFgh0NI3/ZDwdaBJNbvrS7LZFVrBVtIE9KZ9s7vQ==} + unist-util-is@5.2.1: + resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==} + unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} unist-util-position-from-estree@2.0.0: resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + unist-util-position@4.0.4: + resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==} + unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + unist-util-stringify-position@3.0.3: + resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} + unist-util-stringify-position@4.0.0: resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + unist-util-visit-parents@5.1.3: + resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} + unist-util-visit-parents@6.0.1: resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + unist-util-visit@4.1.2: + resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} + unist-util-visit@5.0.0: resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} @@ -4780,6 +4860,12 @@ packages: resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + vfile-location@4.1.0: + resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==} + + vfile-message@3.1.4: + resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==} + vfile-message@4.0.2: resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} @@ -4792,6 +4878,9 @@ packages: vfile-statistics@3.0.0: resolution: {integrity: sha512-/qlwqwWBWFOmpXujL/20P+Iuydil0rZZNglR+VNm6J0gpLHwuVM5s7g2TfVoswbXjZ4HuIhLMySEyIw5i7/D8w==} + vfile@5.3.7: + resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} + vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} @@ -4879,6 +4968,9 @@ packages: resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==} engines: {node: '>=10.13.0'} + web-namespaces@2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + webpack-bundle-analyzer@4.10.1: resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==} engines: {node: '>= 10.13.0'} @@ -5287,6 +5379,12 @@ snapshots: dependencies: tslib: 2.8.1 + '@hbsnow/rehype-sectionize@1.0.7': + dependencies: + hast-util-heading: 2.0.1 + hast-util-heading-rank: 2.1.1 + rehype: 12.0.1 + '@heroui/accordion@2.2.19(@heroui/system@2.4.18(@heroui/theme@2.4.17(tailwindcss@4.1.11))(framer-motion@12.20.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(@heroui/theme@2.4.17(tailwindcss@4.1.11))(framer-motion@12.20.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)': dependencies: '@heroui/aria-utils': 2.2.19(@heroui/theme@2.4.17(tailwindcss@4.1.11))(framer-motion@12.20.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1) @@ -7694,6 +7792,10 @@ snapshots: '@types/estree@1.0.8': {} + '@types/hast@2.3.10': + dependencies: + '@types/unist': 2.0.11 + '@types/hast@3.0.4': dependencies: '@types/unist': 3.0.3 @@ -7720,6 +7822,8 @@ snapshots: dependencies: undici-types: 6.21.0 + '@types/parse5@6.0.3': {} + '@types/react@19.1.12': dependencies: csstype: 3.1.3 @@ -9105,14 +9209,56 @@ snapshots: dependencies: function-bind: 1.1.2 + hast-util-from-parse5@7.1.2: + dependencies: + '@types/hast': 2.3.10 + '@types/unist': 2.0.11 + hastscript: 7.2.0 + property-information: 6.5.0 + vfile: 5.3.7 + vfile-location: 4.1.0 + web-namespaces: 2.0.1 + + hast-util-heading-rank@2.1.1: + dependencies: + '@types/hast': 2.3.10 + hast-util-heading-rank@3.0.0: dependencies: '@types/hast': 3.0.4 + hast-util-heading@2.0.1: + dependencies: + '@types/hast': 2.3.10 + hast-util-is-element: 2.1.3 + + hast-util-is-element@2.1.3: + dependencies: + '@types/hast': 2.3.10 + '@types/unist': 2.0.11 + hast-util-is-element@3.0.0: dependencies: '@types/hast': 3.0.4 + hast-util-parse-selector@3.1.1: + dependencies: + '@types/hast': 2.3.10 + + hast-util-raw@7.2.3: + dependencies: + '@types/hast': 2.3.10 + '@types/parse5': 6.0.3 + hast-util-from-parse5: 7.1.2 + hast-util-to-parse5: 7.1.0 + html-void-elements: 2.0.1 + parse5: 6.0.1 + unist-util-position: 4.0.4 + unist-util-visit: 4.1.2 + vfile: 5.3.7 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + hast-util-to-estree@3.1.0: dependencies: '@types/estree': 1.0.6 @@ -9134,6 +9280,20 @@ snapshots: transitivePeerDependencies: - supports-color + hast-util-to-html@8.0.4: + dependencies: + '@types/hast': 2.3.10 + '@types/unist': 2.0.11 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-raw: 7.2.3 + hast-util-whitespace: 2.0.1 + html-void-elements: 2.0.1 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + hast-util-to-jsx-runtime@2.3.2: dependencies: '@types/estree': 1.0.6 @@ -9154,20 +9314,41 @@ snapshots: transitivePeerDependencies: - supports-color + hast-util-to-parse5@7.1.0: + dependencies: + '@types/hast': 2.3.10 + comma-separated-tokens: 2.0.3 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + hast-util-to-string@3.0.1: dependencies: '@types/hast': 3.0.4 + hast-util-whitespace@2.0.1: {} + hast-util-whitespace@3.0.0: dependencies: '@types/hast': 3.0.4 + hastscript@7.2.0: + dependencies: + '@types/hast': 2.3.10 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 3.1.1 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + hosted-git-info@7.0.2: dependencies: lru-cache: 10.4.3 html-escaper@2.0.2: {} + html-void-elements@2.0.1: {} + ignore@5.3.2: {} ignore@6.0.2: {} @@ -9243,6 +9424,8 @@ snapshots: call-bound: 1.0.4 has-tostringtag: 1.0.2 + is-buffer@2.0.5: {} + is-bun-module@2.0.0: dependencies: semver: 7.7.2 @@ -10228,6 +10411,8 @@ snapshots: lines-and-columns: 2.0.4 type-fest: 3.13.1 + parse5@6.0.1: {} + path-exists@4.0.0: {} path-key@3.1.1: {} @@ -10393,6 +10578,13 @@ snapshots: unified: 11.0.5 unist-util-visit: 5.0.0 + rehype-parse@8.0.5: + dependencies: + '@types/hast': 2.3.10 + hast-util-from-parse5: 7.1.2 + parse5: 6.0.1 + unified: 10.1.2 + rehype-recma@1.0.0: dependencies: '@types/estree': 1.0.6 @@ -10409,6 +10601,19 @@ snapshots: hast-util-to-string: 3.0.1 unist-util-visit: 5.0.0 + rehype-stringify@9.0.4: + dependencies: + '@types/hast': 2.3.10 + hast-util-to-html: 8.0.4 + unified: 10.1.2 + + rehype@12.0.1: + dependencies: + '@types/hast': 2.3.10 + rehype-parse: 8.0.5 + rehype-stringify: 9.0.4 + unified: 10.1.2 + remark-gfm@4.0.1: dependencies: '@types/mdast': 4.0.4 @@ -10992,6 +11197,16 @@ snapshots: - bluebird - supports-color + unified@10.1.2: + dependencies: + '@types/unist': 2.0.11 + bail: 2.0.2 + extend: 3.0.2 + is-buffer: 2.0.5 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 5.3.7 + unified@11.0.5: dependencies: '@types/unist': 3.0.3 @@ -11006,6 +11221,10 @@ snapshots: dependencies: '@types/unist': 3.0.3 + unist-util-is@5.2.1: + dependencies: + '@types/unist': 2.0.11 + unist-util-is@6.0.0: dependencies: '@types/unist': 3.0.3 @@ -11014,19 +11233,38 @@ snapshots: dependencies: '@types/unist': 3.0.3 + unist-util-position@4.0.4: + dependencies: + '@types/unist': 2.0.11 + unist-util-position@5.0.0: dependencies: '@types/unist': 3.0.3 + unist-util-stringify-position@3.0.3: + dependencies: + '@types/unist': 2.0.11 + unist-util-stringify-position@4.0.0: dependencies: '@types/unist': 3.0.3 + unist-util-visit-parents@5.1.3: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents@6.0.1: dependencies: '@types/unist': 3.0.3 unist-util-is: 6.0.0 + unist-util-visit@4.1.2: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents: 5.1.3 + unist-util-visit@5.0.0: dependencies: '@types/unist': 3.0.3 @@ -11113,6 +11351,16 @@ snapshots: validate-npm-package-name@5.0.1: {} + vfile-location@4.1.0: + dependencies: + '@types/unist': 2.0.11 + vfile: 5.3.7 + + vfile-message@3.1.4: + dependencies: + '@types/unist': 2.0.11 + unist-util-stringify-position: 3.0.3 + vfile-message@4.0.2: dependencies: '@types/unist': 3.0.3 @@ -11139,6 +11387,13 @@ snapshots: vfile: 6.0.3 vfile-message: 4.0.2 + vfile@5.3.7: + dependencies: + '@types/unist': 2.0.11 + is-buffer: 2.0.5 + unist-util-stringify-position: 3.0.3 + vfile-message: 3.1.4 + vfile@6.0.3: dependencies: '@types/unist': 3.0.3 @@ -11234,6 +11489,8 @@ snapshots: graceful-fs: 4.2.11 optional: true + web-namespaces@2.0.1: {} + webpack-bundle-analyzer@4.10.1: dependencies: '@discoveryjs/json-ext': 0.5.7 diff --git a/src/app/article/layout.tsx b/src/app/article/layout.tsx index 6cd05dd8..dd9e2888 100644 --- a/src/app/article/layout.tsx +++ b/src/app/article/layout.tsx @@ -1,3 +1,4 @@ +import FloatingToc from "@components/FloatingToc"; import ArticlePageHeader from "@modules/layout/ArticlePageHeader"; import Utterances from "@modules/utterances"; import ArticleFadeIn from "@modules/article/ArticleFadeIn"; @@ -14,6 +15,7 @@ export default function Layout({ children }: { children: React.ReactNode }) { <> {children} + ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 2b98d158..658bca51 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,8 +1,8 @@ import items from "@modules/article/items"; -import Header from "@modules/layout/Header"; import type { Metadata } from "next"; import { List, ListItem } from "./ListItem"; import { metadataBase } from "@modules/metadata/constants"; +import Header from "@modules/layout/Header"; export const metadata: Metadata = { title: "홈 | 봄가을", diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 119563e4..e90dcd63 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -4,9 +4,13 @@ import { HeroUIProvider } from "@heroui/react"; import { store } from "@modules/color-mode/color-mode"; import { Provider as JotaiProvider } from "jotai"; import { useRouter } from "next/navigation"; +import type { ComponentProps } from "react"; import { useCallback } from "react"; -export function Providers({ children }: { children: React.ReactNode }) { +export function Providers({ + children, + ...props +}: { children: React.ReactNode } & ComponentProps<"div">) { const router = useRouter(); const navigate = useCallback( @@ -17,7 +21,7 @@ export function Providers({ children }: { children: React.ReactNode }) { ); return ( - + {children} ); diff --git a/src/components/FloatingToc.module.css b/src/components/FloatingToc.module.css new file mode 100644 index 00000000..d536b0e1 --- /dev/null +++ b/src/components/FloatingToc.module.css @@ -0,0 +1,3 @@ +.link code { + @apply text-xs; +} diff --git a/src/components/FloatingToc.tsx b/src/components/FloatingToc.tsx new file mode 100644 index 00000000..7ae166c7 --- /dev/null +++ b/src/components/FloatingToc.tsx @@ -0,0 +1,160 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { twMerge } from "tailwind-merge"; +import style from "./FloatingToc.module.css"; + +type Item = { + section: HTMLElement; + id: string; + html: string; + level: number; + children?: Item[]; +}; + +const TocLi: React.FC<{ item: Item }> = ({ item }) => { + const [active, setActive] = useState(false); + // const [ratio, setRatio] = useState(0); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActive(true); + } else { + setActive(false); + } + // if (entry.intersectionRatio > 0) { + // setActive(true); + // } else { + // setActive(false); + // } + // setRatio(entry.intersectionRatio); + }); + }, + { + rootMargin: "-50% 0px -50% 0px", + }, + // { + // threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], + // }, + ); + + observer.observe(item.section); + return () => observer.disconnect(); + }, [item.section]); + + return ( +
  • + { + e.preventDefault(); + + const offset = 100; + const elementPosition = item.section.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.scrollY - offset; + + window.scrollTo({ + top: offsetPosition, + }); + }} + className={twMerge( + "leading-3 transition", + style.link, + active ? "text-gray-900" : "text-gray-300", + )} + dangerouslySetInnerHTML={{ __html: item.html }} + /> + {item.children && ( +
      + {item.children.map((child) => ( + + ))} +
    + )} +
    • + ); +}; + +function createItemsFromSections(sections: NodeListOf) { + const items: Item[] = []; + let stack: Item[] = []; + + sections.forEach((section) => { + const heading = section.querySelector("h2, h3, h4, h5"); + + if (!heading) { + return; + } + const id = heading.getAttribute("id") ?? ""; + if (id == "목차") { + return; + } + const cloned = heading.cloneNode(true) as HTMLHeadingElement; + + const anchor = cloned.querySelector("a"); + if (anchor) { + cloned.removeChild(anchor); + } + + cloned.childNodes.forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + (node as Element).className = ""; + } + }); + + const html = cloned.innerHTML ?? ""; + if (!id || !html) { + console.warn("No id or text found for heading", heading); + return; + } + + const level = parseInt(heading.tagName[1]!, 10); + + const item: Item = { id, html, level, section }; + if (level === 2) { + items.push(item); + stack = [item]; + } else { + const parent = stack[level - 3]; + if (!parent) { + throw new Error("Parent not found"); + } + if (!parent.children) { + parent.children = []; + } + parent.children.push(item); + stack[level - 2] = item; + } + }); + + return items; +} + +export default function FloatingToc(props: React.ComponentProps<"nav">) { + const [items, setItems] = useState([]); + + useEffect(() => { + const sections = document.querySelectorAll("article section"); + setItems(createItemsFromSections(sections)); + }, []); + + return ( + + ); +} diff --git a/src/modules/layout/ArticlePageHeader.tsx b/src/modules/layout/ArticlePageHeader.tsx index aeef97da..d23f0390 100644 --- a/src/modules/layout/ArticlePageHeader.tsx +++ b/src/modules/layout/ArticlePageHeader.tsx @@ -2,11 +2,18 @@ import Image from "next/image"; import Link from "next/link"; +import { twMerge } from "tailwind-merge"; import { ArrowLeft } from "lucide-react"; -const ArticlePageHeader = () => { +const ArticlePageHeader = (props: React.ComponentProps<"header">) => { return ( -
    +
    { +const Footer = (props: React.ComponentProps<"footer">) => { return ( -