├── .eslintrc.json ├── public ├── images │ ├── star.jpg │ ├── gallery.jpg │ ├── hextris.jpg │ ├── torch.jpg │ ├── 3d-tetris.jpg │ ├── pixelImage.jpg │ ├── react-paint.jpg │ ├── rubiks-cube.jpg │ └── solar-system.jpg ├── avatar.svg └── sitemap.xml ├── README.md ├── src ├── typing.ts ├── glsl │ ├── function │ │ └── plot.glsl │ ├── vertLines.fs │ ├── wave.fs │ └── defaultBackground.fs ├── typings │ └── decs.d.ts ├── components │ ├── types.ts │ ├── glslBackgrounds │ │ ├── glsl.ts │ │ ├── index.tsx │ │ └── glslCanvas.js │ ├── svg.tsx │ ├── colorModeSwitch.tsx │ ├── githubLink.tsx │ ├── backgroundPicker.tsx │ ├── backtop.tsx │ ├── link.tsx │ ├── footer │ │ └── index.tsx │ ├── header │ │ ├── avatar.tsx │ │ ├── index.tsx │ │ └── subHeader.tsx │ ├── primitives │ │ └── typography.tsx │ └── accent.tsx ├── server │ ├── codes.ts │ └── codes.json ├── ui │ ├── theme │ │ ├── foundations │ │ │ ├── textStyles.ts │ │ │ └── colors.ts │ │ ├── index.ts │ │ └── styles.tsx │ └── prism.tsx ├── next-seo.json ├── pages │ ├── _document.tsx │ ├── _app.tsx │ ├── [code] │ │ └── index.tsx │ └── index.tsx └── hooks │ └── useLocalSetting.ts ├── next-env.d.ts ├── .vscode └── launch.json ├── .gitignore ├── webpack.config.js ├── next.config.js ├── tsconfig.json ├── .github └── workflows │ └── gh-pages.deploy.yml ├── sitemap.js ├── LICENSE └── package.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/images/star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/star.jpg -------------------------------------------------------------------------------- /public/images/gallery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/gallery.jpg -------------------------------------------------------------------------------- /public/images/hextris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/hextris.jpg -------------------------------------------------------------------------------- /public/images/torch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/torch.jpg -------------------------------------------------------------------------------- /public/images/3d-tetris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/3d-tetris.jpg -------------------------------------------------------------------------------- /public/images/pixelImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/pixelImage.jpg -------------------------------------------------------------------------------- /public/images/react-paint.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/react-paint.jpg -------------------------------------------------------------------------------- /public/images/rubiks-cube.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/rubiks-cube.jpg -------------------------------------------------------------------------------- /public/images/solar-system.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengfeiw/minicode/HEAD/public/images/solar-system.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MINICODE 2 | 3 | 一个小程序平台，[https://pengfeiw.github.io/minicode/](https://pengfeiw.github.io/minicode/)。 4 | -------------------------------------------------------------------------------- /src/typing.ts: -------------------------------------------------------------------------------- 1 | export interface LayoutPage extends React.FC { 2 | getLayout?: (page: JSX.Element) => JSX.Element; 3 | } 4 | -------------------------------------------------------------------------------- /src/glsl/function/plot.glsl: -------------------------------------------------------------------------------- 1 | float plot(vec2 st) { 2 | return smoothstep(0.02, 0.0, abs(st.y - st.x)); 3 | } 4 | 5 | #pragma glslify: export(plot) 6 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /src/typings/decs.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.fs" { 2 | const value: string; 3 | export default value; 4 | } 5 | 6 | declare module "*.vs" { 7 | const value: string; 8 | export default value; 9 | } 10 | 11 | declare module "*.glsl" { 12 | const value: string; 13 | export default value; 14 | } 15 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "attach", 7 | "name": "connect", 8 | "restart": true, 9 | "protocol": "inspector", 10 | "port": 9300 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/components/types.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | path: string; 3 | title: string; 4 | hide: boolean; 5 | } 6 | export interface Frontmatter { 7 | layout?: string; 8 | path: string; 9 | title: string; 10 | description: string; 11 | publishTime: string; 12 | keywords: string[]; 13 | allPosts: Post[]; 14 | } 15 | -------------------------------------------------------------------------------- /src/server/codes.ts: -------------------------------------------------------------------------------- 1 | import codes from "./codes.json"; 2 | 3 | export interface Code { 4 | name: string; 5 | blog: string; 6 | path: string; 7 | url: string; 8 | image: string; 9 | description: string; 10 | keywords: string[]; 11 | repository: string; 12 | } 13 | 14 | const getCodes = (): Code[] => (codes as any).reverse(); 15 | 16 | export default getCodes(); 17 | -------------------------------------------------------------------------------- /src/components/glslBackgrounds/glsl.ts: -------------------------------------------------------------------------------- 1 | import defaultBackground from "src/glsl/defaultBackground.fs"; 2 | import waveBackground from "src/glsl/wave.fs"; 3 | import vertLinesBackground from "src/glsl/vertLines.fs"; 4 | 5 | const glslBackgrounds = { 6 | defaultBackground, 7 | waveBackground, 8 | vertLinesBackground 9 | }; 10 | 11 | export type GlslBackgroundKeys = keyof typeof glslBackgrounds; 12 | 13 | export default glslBackgrounds; 14 | -------------------------------------------------------------------------------- /src/components/svg.tsx: -------------------------------------------------------------------------------- 1 | import React, {SVGAttributes} from "react"; 2 | import {chakra, ChakraProps} from "@chakra-ui/react"; 3 | 4 | export type SvgProps = ChakraProps & Pick, "xmlns" | "viewBox" | "preserveAspectRatio">; 5 | 6 | export const Svg: React.FC = ({children, ...props}) => ( 7 | 8 | {children} 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/glsl/vertLines.fs: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | void main() { 10 | vec2 st = gl_FragCoord.xy/u_resolution; 11 | 12 | vec3 bgColor = vec3(0.2, 0.41, 0.73); 13 | 14 | vec3 pixelColor = bgColor; 15 | if (st.y < sin(gl_FragCoord.x)) { 16 | pixelColor = vec3(0.0); 17 | } 18 | gl_FragColor = vec4(pixelColor, 1.0); 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /src/ui/theme/foundations/textStyles.ts: -------------------------------------------------------------------------------- 1 | export const textStyles = { 2 | h1: { 3 | fontSize: ["4xl", null, "5xl"], 4 | lineHeight: "shorter" 5 | }, 6 | h2: { 7 | fontSize: ["3xl", null, "4xl"], 8 | lineHeight: "shorter" 9 | }, 10 | h3: { 11 | fontSize: ["xl", null, "2xl"], 12 | lineHeight: "shorter" 13 | }, 14 | h4: { 15 | lineHeight: "shorter" 16 | }, 17 | h5: { 18 | lineHeight: "shorter" 19 | }, 20 | h6: { 21 | lineHeight: "shorter" 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.(glsl|fs|vs)$/, 6 | exclude: /node_modules/, 7 | use: "glslify-import-loader", 8 | }, 9 | { 10 | test: /\.(glsl|fs|vs)$/, 11 | exclude: /node_modules/, 12 | use: "raw-loader" 13 | }, 14 | { 15 | test: /\.(glsl|fs|vs)$/, 16 | exclude: /node_modules/, 17 | use: "glslify-loader", 18 | } 19 | ] 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withPlugins = require("next-compose-plugins") 2 | const {createSitemap} = require("./sitemap"); 3 | const {merge} = require("webpack-merge"); 4 | const webpackconfig = require("./webpack.config"); 5 | 6 | createSitemap(); 7 | 8 | const IsDevelopment = process.env.NODE_ENV === "development"; 9 | const nextConfig = { 10 | webpack5: !IsDevelopment, 11 | pageExtensions: ["js", "jsx", "ts", "tsx"], 12 | assetPrefix: IsDevelopment ? "" : "/minicode", 13 | }; 14 | 15 | module.exports = withPlugins([], { 16 | ...nextConfig, 17 | webpack: (config, options) => merge(config, webpackconfig) 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/colorModeSwitch.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import {IconButton, IconButtonProps, useColorMode} from "@chakra-ui/react" 3 | import {FiSun, FiMoon} from "react-icons/fi" 4 | 5 | export interface ColorModeSwitchProps 6 | extends Omit { } 7 | 8 | export const ColorModeSwitch: React.FC = ({ 9 | ...props 10 | }) => { 11 | const {colorMode, toggleColorMode} = useColorMode() 12 | return ( 13 | : } 16 | isRound 17 | onMouseDown={toggleColorMode} 18 | {...props} 19 | /> 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /src/glsl/wave.fs: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | float wave(vec2 st, float y) { 10 | return 1.0 - smoothstep(y, y + 0.002, st.y); 11 | } 12 | 13 | void main() { 14 | vec2 st = gl_FragCoord.xy/u_resolution; 15 | 16 | vec3 bgColor = vec3(0.59, 0.75, 0.71); 17 | 18 | vec4 pixelColor = vec4(bgColor, 0.3); 19 | pixelColor = mix(pixelColor, vec4(vec3(1.0), 0.5) * wave(st, sin(st.x * 10. + u_time) * 0.06 + 0.2), 0.5); 20 | pixelColor = mix(pixelColor, vec4(1.0), wave(st, sin(st.x * 17. + u_time) * 0.07 * st.x + 0.2)); 21 | pixelColor = mix(pixelColor, vec4(0.14, 0.35, 0.49, 1.0), wave(st, sin(st.x * 20. + u_time) * 0.05 * st.x + 0.2)); 22 | gl_FragColor = pixelColor; 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "strict": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "noEmit": true, 15 | "esModuleInterop": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "jsx": "preserve" 21 | }, 22 | "include": [ 23 | "next-env.d.ts", 24 | "**/*.ts", 25 | "**/*.tsx" 26 | , "src/pages/_document.js" ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/components/githubLink.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import {IconButton, useColorMode} from "@chakra-ui/react" 3 | import {GoMarkGithub} from "react-icons/go"; 4 | import {OutgoingLink} from "./link"; 5 | 6 | interface Props { 7 | src?: string; 8 | } 9 | 10 | export const GithubLink: React.FC = (props) => { 11 | const {src} = props; 12 | 13 | const href = src ?? "https://github.com/pengfeiw/minicode"; 14 | 15 | const {colorMode} = useColorMode(); 16 | return ( 17 | 18 | } 21 | isRound 22 | {...props} 23 | /> 24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/ui/theme/index.ts: -------------------------------------------------------------------------------- 1 | import {extendTheme, ThemeOverride} from '@chakra-ui/react' 2 | import {styles} from './styles' 3 | import {colors} from './foundations/colors' 4 | import {textStyles} from './foundations/textStyles' 5 | import {mergeWith} from '@chakra-ui/utils' 6 | 7 | // Re-exports 8 | export {useLinkColor, accentKeys} from './foundations/colors' 9 | export type {ColorKeys} from './foundations/colors' 10 | 11 | export function makeTheme(overrides: ThemeOverride = {}) { 12 | const theme = extendTheme({ 13 | initialColorMode: 'dark', 14 | useSystemColorMode: false, 15 | colors, 16 | styles, 17 | textStyles, 18 | // fonts: defaultTheme.fonts, 19 | // shadows: defaultTheme.shadows 20 | }) 21 | return mergeWith(overrides, theme) 22 | } 23 | 24 | export const theme = makeTheme() 25 | -------------------------------------------------------------------------------- /src/next-seo.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Minicode", 3 | "description": "Minicode 是一个小程序发布平台，平台所有内容均开源，在这里你可以找到很多有趣的东西。", 4 | "additionalMetaTags": [ 5 | { 6 | "property": "author", 7 | "content": "王鹏飞" 8 | }, 9 | { 10 | "property": "keywords", 11 | "content": "minicode,mini code,web development,javascript,typescript,graphics,CG,computer graphics,前端项目,迷你小程序" 12 | } 13 | ], 14 | "twitter": { 15 | "cardType": "summary_large_image", 16 | "site": "http://pengfeixc.com", 17 | "title": "王鹏飞的个人网站", 18 | "description": "程序员，前端开发，计算机图形学爱好者。" 19 | }, 20 | "openGraph": { 21 | "type": "website", 22 | "locale": "zh-CN", 23 | "site_name": "王鹏飞", 24 | "profile": { 25 | "firstName": "Pengfei", 26 | "lastName": "Wang" 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: [14.x] 14 | 15 | steps: 16 | - name: Get files 17 | uses: actions/checkout@v2 18 | - name: Use Node.js ${{ matrix.node-version }} 19 | uses: actions/setup-node@v2 20 | with: 21 | node-version: ${{ matrix.node-version }} 22 | - name: Install packages 23 | run: npm ci 24 | - name: Build project 25 | run: npm run build 26 | - name: Export static files 27 | run: npm run export 28 | - name: Add .nojekyll file 29 | run: touch ./out/.nojekyll 30 | - name: Deploy 31 | uses: JamesIves/github-pages-deploy-action@4.1.1 32 | with: 33 | branch: gh-pages 34 | folder: out 35 | -------------------------------------------------------------------------------- /sitemap.js: -------------------------------------------------------------------------------- 1 | const {SitemapStream, XMLToSitemapItemStream} = require("sitemap"); 2 | const nodeFs = require("fs"); 3 | const path = require("path"); 4 | const codes = require("./src/server/codes.json"); 5 | 6 | /** 7 | * generate sitemap.xml 8 | */ 9 | const createSitemap = () => { 10 | const sitemap = new SitemapStream({hostname: "https://pengfeiw.github.io"}); 11 | const writeStream = nodeFs.createWriteStream(path.join(__dirname, "./public/sitemap.xml")); 12 | sitemap.pipe(writeStream); 13 | 14 | // home 15 | sitemap.write({url: "/", changefreq: "monthly", priority: 1}); 16 | // hellolinearalgebra home 17 | sitemap.write({url: "/minicode", changefreq: "monthly", priority: 0.9}); 18 | 19 | for (let i = 0; i < codes.length; i++) { 20 | // codes 21 | sitemap.write({url: `/minicode/${codes[i].path}`, changefreq: "weekly", priority: 0.8}); 22 | } 23 | 24 | sitemap.end(); 25 | }; 26 | 27 | module.exports = {createSitemap}; 28 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-sync-scripts */ 2 | // eslint-disable-next-line @next/next/no-document-import-in-page 3 | import Document, {Html, Head, Main, NextScript} from 'next/document' 4 | import { ColorModeScript } from '@chakra-ui/react'; 5 | import {theme} from "src/ui/theme"; 6 | 7 | class MyDocument extends Document { 8 | static async getInitialProps(ctx: any) { 9 | const initialProps = await Document.getInitialProps(ctx) 10 | return {...initialProps} 11 | } 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | ) 26 | } 27 | } 28 | 29 | export default MyDocument 30 | -------------------------------------------------------------------------------- /src/components/backgroundPicker.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {IconButton, IconButtonProps} from '@chakra-ui/react' 3 | import {useLocalSetting} from 'src/hooks/useLocalSetting' 4 | import glslBackgrounds, {GlslBackgroundKeys} from "src/components/glslBackgrounds/glsl"; 5 | import {BsLifePreserver} from "react-icons/bs" 6 | 7 | export const BackgroundPicker: React.FC = ({...props}) => { 8 | const [key, setBackgroundKey] = useLocalSetting("glslBackgroundKey", "defaultBackground"); 9 | 10 | const update = React.useCallback(() => { 11 | const backgroundKeys = Object.keys(glslBackgrounds) as GlslBackgroundKeys[]; 12 | let index = backgroundKeys.indexOf(key) 13 | index = (index + 1) % backgroundKeys.length; 14 | setBackgroundKey(backgroundKeys[index]) 15 | }, [key]) 16 | 17 | return ( 18 | } 20 | isRound 21 | onMouseDown={update} 22 | {...props} 23 | /> 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type {AppProps} from "next/app" 3 | import {ChakraProvider, DarkMode} from "@chakra-ui/react"; 4 | import {theme as defaultTheme} from "src/ui/theme"; 5 | import "polyfill-object.fromentries"; 6 | import {AccentGlobal} from "src/components/accent"; 7 | import {PrismGlobal} from "src/ui/prism"; 8 | import {DefaultSeo} from "next-seo"; 9 | import defaultSeoConfig from "../next-seo.json"; 10 | 11 | function MyApp({Component, pageProps}: AppProps) { 12 | 13 | const getLayout = (Component as any).getLayout || ((page: any) => page); 14 | return ( 15 | <> 16 | 17 | 18 | 19 | 20 | {/* force to drak mode */} 21 | 22 | {getLayout()} 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | export default MyApp 30 | -------------------------------------------------------------------------------- /src/components/backtop.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from "react"; 2 | import {Button} from "@chakra-ui/react"; 3 | import {ChevronUpIcon} from "@chakra-ui/icons"; 4 | import {useLinkColor} from "src/ui/theme"; 5 | 6 | const BackTop = () => { 7 | const [visible, setVisible] = useState(false); 8 | 9 | useEffect(() => { 10 | window.addEventListener("scroll", toggleVisible); 11 | }, []); 12 | 13 | const toggleVisible = () => { 14 | const scrolled = document.documentElement.scrollTop; 15 | 16 | if (scrolled > 300) { 17 | setVisible(true); 18 | } else { 19 | setVisible(false); 20 | } 21 | }; 22 | 23 | const scrollToTop = () => { 24 | window.scrollTo({ 25 | top: 0, 26 | behavior: "smooth" 27 | }); 28 | }; 29 | 30 | return ( 31 | 34 | ); 35 | }; 36 | 37 | export default BackTop; 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021-present, Pengfei Wang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/link.tsx: -------------------------------------------------------------------------------- 1 | import NextLink from 'next/link'; 2 | import {UrlObject} from "url"; 3 | import {Icon, Link as ChakraLink, LinkProps as ChakraLinkProps} from "@chakra-ui/react"; 4 | 5 | type Url = string | UrlObject; 6 | 7 | interface RouteLinkProps extends Omit { 8 | as?: Url; 9 | to: string; 10 | } 11 | 12 | interface OutgoingLinkProps extends ChakraLinkProps{ 13 | isExternal?: boolean; 14 | showExternalIcon?: boolean 15 | } 16 | 17 | export const RouteLink: React.FC = ({to, as = to, children, ...props}) => { 18 | return ( 19 | 20 | {children} 21 | 22 | ); 23 | }; 24 | 25 | export const OutgoingLink: React.FC = ({children, isExternal = true, showExternalIcon = false, ...props}) => { 26 | return ( 27 | 28 | {children} 29 | {showExternalIcon && ()} 30 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {Box, Text} from "@chakra-ui/react"; 3 | import {OutgoingLink} from "src/components/link"; 4 | import {H1} from "../primitives/typography"; 5 | 6 | const Footer = () => ( 7 | 8 | 9 |

window.open("./")} 14 | _hover={{ 15 | textDecoration: "underline", 16 | cursor: "pointer" 17 | }}> 🛕minicode

18 | | 19 | 📖sitemap 20 | | 21 | 🏔WangPF 22 | 23 | 24 | 本站采用 25 | NextJS 26 | 和 27 | ChakraUI 28 | 搭建， 29 | 感谢 30 | Github 31 | 提供的免费服务。 32 | 33 | 34 | ); 35 | 36 | export default Footer; 37 | -------------------------------------------------------------------------------- /src/components/glslBackgrounds/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import {Box} from "@chakra-ui/react"; 3 | import {useEffect, useRef, useState} from "react"; 4 | import {useLocalSetting} from "src/hooks/useLocalSetting"; 5 | import glslBackgrounds, {GlslBackgroundKeys} from "./glsl"; 6 | 7 | const GlslBackground = () => { 8 | const [key] = useLocalSetting("glslBackgroundKey", "defaultBackground"); 9 | const canvasRef = useRef(null); 10 | const [sandbox, setSandbox] = useState(); 11 | 12 | useEffect(() => { 13 | const GlslCanvas = require("./glslCanvas"); 14 | const canvas = canvasRef.current; 15 | if (canvas) { 16 | canvas.style.width = "100%"; 17 | canvas.style.height = "100%"; 18 | canvas.width = canvas.clientWidth; 19 | canvas.height = canvas.clientHeight; 20 | setSandbox(new GlslCanvas(canvas)); 21 | } 22 | }, [canvasRef]); 23 | 24 | useEffect(() => { 25 | if (sandbox) { 26 | const fs = glslBackgrounds[key]; 27 | sandbox.load(fs); 28 | } 29 | }, [sandbox, key]); 30 | 31 | return ( 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default GlslBackground; 39 | -------------------------------------------------------------------------------- /src/components/header/avatar.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from "react"; 2 | import {Svg} from "src/components/svg"; 3 | import {useLinkColor} from "src/ui/theme"; 4 | 5 | 6 | const AvatarSvg: FC = (props) => { 7 | const color = useLinkColor(); 8 | 9 | return ( 10 | 11 | MiniCode | Wang Pengfei 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default AvatarSvg; 25 | -------------------------------------------------------------------------------- /public/avatar.svg: -------------------------------------------------------------------------------- 1 | 头像 副本 -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | https://pengfeiw.github.io/monthly1.0https://pengfeiw.github.io/minicodemonthly0.9https://pengfeiw.github.io/minicode/3d-tetrisweekly0.8https://pengfeiw.github.io/minicode/react-paintweekly0.8https://pengfeiw.github.io/minicode/solar-systemweekly0.8https://pengfeiw.github.io/minicode/threejs-rubikweekly0.8https://pengfeiw.github.io/minicode/threejs-galleryweekly0.8https://pengfeiw.github.io/minicode/threejs-starweekly0.8https://pengfeiw.github.io/minicode/threejs-torchweekly0.8https://pengfeiw.github.io/minicode/pixel-imageweekly0.8https://pengfeiw.github.io/minicode/hextrisweekly0.8 -------------------------------------------------------------------------------- /src/glsl/defaultBackground.fs: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform vec2 u_mouse; 7 | uniform float u_time; 8 | 9 | void main() { 10 | vec3 gridColor = vec3(0.17); 11 | vec3 backgroundColor = vec3(0.1); 12 | vec2 st = gl_FragCoord.xy/u_resolution; 13 | 14 | vec3 pixel = backgroundColor; 15 | const float tickWidth = 0.1; 16 | float gridLineWidthX = 0.008; 17 | float gridLineWidthY = gridLineWidthX * u_resolution.x / u_resolution.y; 18 | int lineXCount = int(st.x / tickWidth); 19 | float lineXPre = float(lineXCount) * 0.1; 20 | float lineXBack = float(lineXCount + 1) * 0.1; 21 | 22 | float lineX = abs(lineXPre - st.x) < abs(lineXBack - st.x) ? lineXPre : lineXBack; 23 | if( mod(st.x + 0.05, tickWidth) < 0.008 ) { 24 | if (mod(u_time * 0.1 + lineX + st.y, 1.) < 0.01) { 25 | int colorIndex = int(mod(float(lineXCount), 7.)); 26 | if (colorIndex == 0) { 27 | pixel = vec3(1., 0.67, 0.65); 28 | } else if (colorIndex == 1) { 29 | pixel = vec3(1., 0.83, 0.71); 30 | } else if (colorIndex == 2) { 31 | pixel = vec3(0.84, 0.93, 0.76); 32 | } else if (colorIndex == 3) { 33 | pixel = vec3(0.6, 0.87, 0.79); 34 | } else if (colorIndex == 4) { 35 | pixel = vec3(0.24, 0.86, 0.94); 36 | } else if (colorIndex == 5) { 37 | pixel = vec3(0.47, 0.67, 0.95); 38 | } else { 39 | pixel = vec3(0.49, 0.51, 0.99); 40 | } 41 | } else { 42 | pixel = gridColor; 43 | } 44 | } 45 | 46 | gl_FragColor = vec4(pixel, 1.0); 47 | } 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pengfeixc.com", 3 | "version": "0.1.0", 4 | "private": true, 5 | "author": "Wang Pengfei (http://pengfeixc.com/)", 6 | "homepage": "https://pengfeiw.github.io/minicode", 7 | "bugs": "https://github.com/pengfeiw/minicode/issues", 8 | "description": "A minicode platform", 9 | "keywords": ["3d", "web", "minicode", "grahpics"], 10 | "scripts": { 11 | "dev": "next dev", 12 | "dev:debug": "node --inspect-brk=9300 ./node_modules/next/dist/bin/next -p 3100", 13 | "build": "next build", 14 | "export": "next export", 15 | "start": "next start", 16 | "lint": "next lint" 17 | }, 18 | "dependencies": { 19 | "@chakra-ui/core": "^0.8.0", 20 | "@chakra-ui/icons": "^1.0.16", 21 | "@chakra-ui/react": "^1.6.9", 22 | "@emotion/react": "^11.5.0", 23 | "@emotion/styled": "^11.3.0", 24 | "framer-motion": "^4.1.17", 25 | "mitt": "^3.0.0", 26 | "moment": "^2.29.1", 27 | "next": "11.1.2", 28 | "next-compose-plugins": "^2.2.1", 29 | "next-seo": "^4.28.1", 30 | "next-transpile-modules": "^8.0.0", 31 | "polyfill-object.fromentries": "^1.0.1", 32 | "rc-pagination": "^3.1.15", 33 | "react": "17.0.2", 34 | "react-dom": "17.0.2", 35 | "react-icons": "^4.3.1", 36 | "sitemap": "^7.0.0" 37 | }, 38 | "devDependencies": { 39 | "@types/react": "17.0.27", 40 | "eslint": "8.0.0", 41 | "eslint-config-next": "11.1.2", 42 | "glslify-import-loader": "^0.1.2", 43 | "glslify-loader": "^2.0.0", 44 | "raw-loader": "^4.0.2", 45 | "typescript": "4.4.4", 46 | "webpack-merge": "^5.8.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/header/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {Flex, Box, HStack, VStack, IconButton, Text} from "@chakra-ui/react"; 3 | import AvatarSvg from "./avatar"; 4 | import {ColorModeSwitch} from "src/components/colorModeSwitch"; 5 | import {GithubLink} from "src/components/githubLink"; 6 | import {AccentPicker} from "src/components/accent"; 7 | import {BackgroundPicker} from "src/components/backgroundPicker"; 8 | import {OutgoingLink, RouteLink} from "src/components/link"; 9 | import {Paragraph} from "../primitives/typography"; 10 | 11 | interface Props { 12 | githubSrc?: string; 13 | } 14 | 15 | const Header: React.FC = (props) => { 16 | const {githubSrc} = props; 17 | 18 | return ( 19 | <> 20 | 21 | 22 | 23 | 24 | 25 | 26 | created by 27 | @Wang Pengfei, 28 | with ❤ 29 | 30 | 31 | 32 | 38 | 39 | 43 | 47 | {/* */} 48 | 49 | 50 | ); 51 | }; 52 | 53 | export default Header; 54 | -------------------------------------------------------------------------------- /src/pages/[code]/index.tsx: -------------------------------------------------------------------------------- 1 | import {GetStaticProps} from "next"; 2 | import React from "react"; 3 | import codes, {Code as ICode} from "src/server/codes"; 4 | import {Text, Flex} from "@chakra-ui/react"; 5 | import SubHeader from "src/components/header/subHeader"; 6 | import {LayoutPage} from "../../typing"; 7 | import {NextSeo} from "next-seo"; 8 | import {H1} from "src/components/primitives/typography"; 9 | 10 | interface CodeProps { 11 | code: ICode; 12 | } 13 | 14 | const Code: LayoutPage = (props: CodeProps) => { 15 | const {code} = props; 16 | 17 | if (!code) { 18 | return <>; 19 | } 20 | 21 | return ( 22 | <> 23 | 36 | 37 |