├── README.md
├── web-component
    ├── .gitignore
    ├── tsconfig.json
    ├── package.json
    ├── demo.html
    ├── README.md
    └── src
    │   └── index.ts
├── website
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── bundle.html
    ├── tsconfig.json
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── components
    │   │   └── SelectColor.tsx
    │   ├── index.tsx
    │   └── App.tsx
    ├── package.json
    └── .kktrc.ts
├── lerna.json
├── renovate.json
├── react
    ├── tsconfig.json
    ├── .kktrc.ts
    ├── package.json
    ├── src
    │   └── index.tsx
    └── README.md
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
└── .github
    └── workflows
        └── ci.yml


/README.md:
--------------------------------------------------------------------------------
1 | react/README.md


--------------------------------------------------------------------------------
/web-component/.gitignore:
--------------------------------------------------------------------------------
1 | lib


--------------------------------------------------------------------------------
/website/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uiwjs/react-github-corners/HEAD/website/public/favicon.ico


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "react",
4 |     "web-component",
5 |     "website"
6 |   ],
7 |   "version": "1.5.16"
8 | }
9 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig",
3 |   "include": ["src", ".kktrc.ts"],
4 |   "compilerOptions": {
5 |     "jsx": "react-jsx",
6 |     "baseUrl": "./src",
7 |     "noEmit": true
8 |   }
9 | }


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "config:base"
 4 |   ],
 5 |   "packageRules": [
 6 |     {
 7 |       "matchPackagePatterns": ["*"],
 8 |       "rangeStrategy": "replace"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/react/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig",
 3 |   "include": ["./src"],
 4 |   "compilerOptions": {
 5 |     "baseUrl": ".",
 6 |     "outDir": "./cjs",
 7 |     "emitDeclarationOnly": true,
 8 |     "noEmit": false
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/website/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="react-scripts" />
 2 | 
 3 | declare var VERSION: string;
 4 | 
 5 | declare module '*.md' {
 6 |   import { CodeBlockData } from 'markdown-react-code-preview-loader';
 7 |   const src: CodeBlockData;
 8 |   export default src;
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | cjs
 2 | esm
 3 | build
 4 | dist
 5 | npm-debug.log*
 6 | package-lock.json
 7 | node_modules
 8 | dist.css
 9 | w-github-corners.css
10 | 
11 | .DS_Store
12 | .cache
13 | .rdoc-dist
14 | .vscode
15 | 
16 | *.log
17 | *.bak
18 | *.tem
19 | *.temp
20 | #.swp
21 | *.*~
22 | ~*.*
23 | 


--------------------------------------------------------------------------------
/react/.kktrc.ts:
--------------------------------------------------------------------------------
 1 | import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 2 | 
 3 | export default (conf: WebpackConfiguration, env: 'production' | 'development', options: LoaderConfOptions) => {
 4 |   if (options.bundle) {
 5 |     conf.output!.library = '@uiw/react-github-corners';
 6 |     conf.externals = {
 7 |       react: {
 8 |         root: 'React',
 9 |         commonjs2: 'react',
10 |         commonjs: 'react',
11 |         amd: 'react',
12 |       },
13 |     };
14 |   }
15 |   return conf;
16 | }
17 | 


--------------------------------------------------------------------------------
/web-component/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "es2015",
 4 |     "target": "es2017",
 5 |     "esModuleInterop": false,
 6 |     "declaration": true,
 7 |     "noImplicitAny": true,
 8 |     "resolveJsonModule": true,
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "sourceMap": true,
13 |     "strict": false,
14 |     "skipLibCheck": true,
15 |     "outDir": "lib",
16 |     "baseUrl": "."
17 |   },
18 |   "include": ["src/**/*"]
19 | }
20 | 


--------------------------------------------------------------------------------
/website/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>GitHub Corners for React.</title>
 9 |   <meta name="keywords" content="react,component,corners,github" />
10 |   <meta name="description" content="Add a Github corner to your project page, This GitHub corners for react component." />
11 | </head>
12 | 
13 | <body>
14 |   <div id="root"></div>
15 | </body>
16 | 
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react",
 4 |     "target": "esnext",
 5 |     "lib": ["dom", "dom.iterable", "esnext"],
 6 |     "allowJs": true,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "declaration": true,
17 |     "baseUrl": ".",
18 |     "noFallthroughCasesInSwitch": true,
19 |     "noEmit": true,
20 |     "types": ["jest", "node"]
21 |   }
22 | }


--------------------------------------------------------------------------------
/web-component/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@uiw/github-corners",
 3 |   "version": "1.5.16",
 4 |   "description": "Add a Github corner to your project page, This GitHub corners for web component.",
 5 |   "type": "module",
 6 |   "exports": "./lib/index.js",
 7 |   "types": "lib/index.d.ts",
 8 |   "homepage": "https://uiwjs.github.io/react-github-corners",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/uiwjs/react-github-corners.git"
12 |   },
13 |   "author": "",
14 |   "license": "MIT",
15 |   "files": [
16 |     "lib",
17 |     "src"
18 |   ],
19 |   "keywords": [
20 |     "web-component",
21 |     "web-components",
22 |     "github-corners",
23 |     "web"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/web-component/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>github-corners</title>
 8 |   <script type="module" src="./lib/index.js"></script>
 9 | </head>
10 | <body>
11 |   <github-corners style="z-index: 9999;" top="0" right="0" position="fixed" aria-label="View source on GitHub" fill="red" color="blue" target="__blank" href="https://github.com/uiwjs/react-github-corners"></github-corners>
12 |   <label>
13 |     <input type="range" value="160" min="50" max="220" onChange="handleChange(this)" />
14 |   </label>
15 |   <script>
16 |     const corner = document.querySelector('github-corners')
17 |     corner.setAttribute('width', 160);
18 |     corner.setAttribute('height', 160);
19 |     function handleChange(target) {
20 |       corner.setAttribute('width', target.value);
21 |       corner.setAttribute('height', target.value);
22 |     }
23 |   </script>
24 |   <div style="height: 1200px;"></div>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 uiw
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@website/github-corners",
 3 |   "version": "1.5.16",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "doc": "kkt build --app-src ./website",
 7 |     "start": "kkt start --app-src ./website"
 8 |   },
 9 |   "license": "MIT",
10 |   "peerDependencies": {
11 |     "react": ">=16.8.0",
12 |     "react-dom": ">=16.8.0"
13 |   },
14 |   "dependencies": {
15 |     "@uiw/react-color-sketch": "^1.1.0",
16 |     "@uiw/react-github-corners": "1.5.16",
17 |     "@uiw/react-markdown-preview-example": "^1.3.0",
18 |     "react": "^18.2.0",
19 |     "react-dom": "^18.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "@kkt/raw-modules": "^7.5.2",
23 |     "@kkt/scope-plugin-options": "^7.5.2",
24 |     "@types/react": "^18.0.33",
25 |     "@types/react-dom": "^18.0.11",
26 |     "kkt": "^7.5.2"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/website/public/bundle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <script src="https://unpkg.com/@babel/standalone@7.17.5/babel.min.js" crossorigin></script>
 6 |     <script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
 7 |     <script src="https://unpkg.com/react-dom@17.x/umd/react-dom.development.js" crossorigin></script>
 8 |     <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
 9 |     <script src="https://unpkg.com/@uiw/react-github-corners/dist/github-corners.js"></script>
10 |     <link rel="stylesheet" href="https://unpkg.com/@uiw/react-github-corners/dist/github-corners.css">
11 |   </head>
12 |   <body>
13 |     <div id="container" style="padding: 24px"></div>
14 |     <script type="text/babel">
15 |       import GitHubCorners from '@uiw/react-github-corners';
16 |       
17 |       function Demo() {
18 |         const [value, setValue] = React.useState("**Hello world!!!**");
19 |         return (
20 |           <div className="container">
21 |             <GitHubCorners
22 |               position="left"
23 |               href="https://github.com/uiwjs/react-github-corners"
24 |             />
25 |           </div>
26 |         );
27 |       }
28 |       ReactDOM.render(<Demo />, document.getElementById('container'));
29 |     </script>
30 |   </body>
31 | </html>


--------------------------------------------------------------------------------
/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@uiw/react-github-corners",
 3 |   "version": "1.5.16",
 4 |   "description": "Add a Github corner to your project page, This GitHub corners for react component.",
 5 |   "main": "cjs/index.js",
 6 |   "module": "esm/index.js",
 7 |   "homepage": "https://uiwjs.github.io/react-github-corners",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/uiwjs/react-github-corners.git"
11 |   },
12 |   "author": "",
13 |   "license": "MIT",
14 |   "files": [
15 |     "dist",
16 |     "dist.css",
17 |     "cjs",
18 |     "esm",
19 |     "src"
20 |   ],
21 |   "keywords": [
22 |     "react",
23 |     "github-corners",
24 |     "react-github-corners"
25 |   ],
26 |   "peerDependencies": {
27 |     "react": ">=16.8.0",
28 |     "react-dom": ">=16.8.0"
29 |   },
30 |   "dependencies": {
31 |     "@uiw/github-corners": "1.5.16"
32 |   },
33 |   "devDependencies": {
34 |     "@types/react": "^18.0.17",
35 |     "@types/react-dom": "^18.0.6",
36 |     "react": "^18.2.0",
37 |     "react-dom": "^18.2.0"
38 |   },
39 |   "eslintConfig": {
40 |     "extends": [
41 |       "react-app",
42 |       "react-app/jest"
43 |     ]
44 |   },
45 |   "browserslist": {
46 |     "production": [
47 |       ">0.2%",
48 |       "not dead",
49 |       "not op_mini all"
50 |     ],
51 |     "development": [
52 |       "last 1 chrome version",
53 |       "last 1 firefox version",
54 |       "last 1 safari version"
55 |     ]
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "hoist": "lerna bootstrap --hoist",
 5 |     "demo": "lerna exec --scope @uiw/github-corners -- npx sgo --fallback demo.html",
 6 |     "doc": "lerna exec --scope @website/github-corners -- kkt build",
 7 |     "start": "lerna exec --scope @website/github-corners -- kkt start",
 8 |     "build": "lerna exec --scope @uiw/react-github-corners -- tsbb build \"src/*.tsx\" --use-babel",
 9 |     "watch": "lerna exec --scope @uiw/react-github-corners -- tsbb watch \"src/*.tsx\" --use-babel",
10 |     "build:wc": "lerna exec --scope @uiw/github-corners -- tsbb build",
11 |     "watch:wc": "lerna exec --scope @uiw/github-corners -- tsbb watch",
12 |     "bundle": "lerna exec --scope @uiw/react-github-corners -- ncc build src/index.tsx --target web --filename github-corners",
13 |     "bundle:min": "lerna exec --scope @uiw/react-github-corners -- ncc build src/index.tsx --target web --filename github-corners --minify",
14 |     "all": "npm run build && npm run bundle && npm run bundle:min && npm run build:wc",
15 |     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
16 |     "clean": "lerna clean --yes"
17 |   },
18 |   "devDependencies": {
19 |     "@kkt/ncc": "^1.0.15",
20 |     "lerna": "^7.1.4",
21 |     "tsbb": "^4.1.14"
22 |   },
23 |   "engines": {
24 |     "node": ">=16.0.0"
25 |   },
26 |   "workspaces": [
27 |     "web-component",
28 |     "react",
29 |     "website"
30 |   ],
31 |   "dependencies": {
32 |     "ts-node": "^10.6.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/website/src/components/SelectColor.tsx:
--------------------------------------------------------------------------------
 1 | import { Fragment, useEffect, useRef, useState } from "react";
 2 | import Sketch from '@uiw/react-color-sketch';
 3 | import { hexToHsva, hsvaToHexa } from '@uiw/color-convert';
 4 | import { Button } from '../App';
 5 | 
 6 | export interface SelectColorProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
 7 |   onChange?(color: string): void;
 8 |   color?: string;
 9 | }
10 | 
11 | export function SelectColor(props: SelectColorProps) {
12 |   const { onChange, color: initColor, children } = props;
13 |   const [color, setColor] = useState(hexToHsva(initColor || '#fff'));
14 |   const [selectColor, setSelectColor] = useState(false);
15 |   const btnref = useRef<HTMLButtonElement>(null)
16 |   useEffect(() => {
17 |     setColor(hexToHsva(props.color || '#fff'))
18 |   }, [props.color]);
19 | 
20 |   useEffect(() => {
21 |     document.body.addEventListener('click', (evn) => {
22 |       const target = evn.target as HTMLElement;
23 |       setSelectColor(btnref.current!.contains(target));
24 |     });
25 |   }, [])
26 |   return (
27 |     <Fragment>
28 |       <Button $select ref={btnref} style={{ backgroundColor: hsvaToHexa(color) }}>
29 |         {children}
30 |         {selectColor && (
31 |           <Sketch
32 |             style={{ position: 'absolute', zIndex: 99 }}
33 |             color={color}
34 |             onChange={(color) => {
35 |               setColor(color.hsva);
36 |               onChange && onChange(color.hex);
37 |             }}
38 |           />
39 |         )}
40 |       </Button>
41 |     </Fragment>
42 |   )
43 | }


--------------------------------------------------------------------------------
/website/.kktrc.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import webpack from 'webpack';
 3 | import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 4 | import rawModules from '@kkt/raw-modules';
 5 | import scopePluginOptions from '@kkt/scope-plugin-options';
 6 | import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 7 | import pkg from './package.json';
 8 | 
 9 | export default (conf: WebpackConfiguration, env: 'production' | 'development', options: LoaderConfOptions) => {
10 |   conf = rawModules(conf, env, { ...options });
11 |   conf = mdCodeModulesLoader(conf);
12 |   conf = scopePluginOptions(conf, env, {
13 |     ...options,
14 |     allowedFiles: [
15 |       path.resolve(process.cwd(), 'README.md')
16 |     ]
17 |   });
18 |   // Get the project version.
19 |   conf.plugins!.push(new webpack.DefinePlugin({
20 |     VERSION: JSON.stringify(pkg.version),
21 |   }));
22 |   conf.module!.exprContextCritical = false;
23 |   if (env === 'production') {
24 |     conf.output = { ...conf.output, publicPath: './' };
25 |     conf.optimization = {
26 |       ...conf.optimization,
27 |       splitChunks: {
28 |         cacheGroups: {
29 |           reactvendor: {
30 |             test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
31 |             name: 'react-vendor',
32 |             chunks: 'all',
33 |           },
34 |           refractor: {
35 |             test: /[\\/]node_modules[\\/](refractor)[\\/]/,
36 |             name: 'refractor-prismjs-vendor',
37 |             chunks: 'all',
38 |           },
39 |           runtime: {
40 |             test: /[\\/]node_modules[\\/](@babel)[\\/]/,
41 |             name: 'babel-vendor',
42 |             chunks: 'all',
43 |           },
44 |           parse5: {
45 |             test: /[\\/]node_modules[\\/](parse5)[\\/]/,
46 |             name: 'parse5-vendor',
47 |             chunks: 'all',
48 |           },
49 |         }
50 |       }
51 |     }
52 |   }
53 |   return conf;
54 | }
55 | 


--------------------------------------------------------------------------------
/react/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '@uiw/github-corners';
 3 | 
 4 | export interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 5 |   /**
 6 |    * The link to your project page.
 7 |    */
 8 |   href?: string;
 9 |   /**
10 |    * The width and height of the corner. 
11 |    * Default: `80`
12 |    */
13 |   size?: number;
14 |   /**
15 |    * The background color of the corner.
16 |    * Default: `#151513`
17 |    */
18 |   bgColor?: string;
19 |   /**
20 |    * The Github logo color of the corner.
21 |    * Default: `#fff`
22 |    */
23 |   color?: string;
24 |   /**
25 |    * The position of corner. 
26 |    * Default: `right`
27 |    */
28 |   position?: 'left' | 'right';
29 |   /** Is it displayed at the bottom? */
30 |   bottom?: boolean,
31 |   /** 
32 |    * It is positioned relative to the initial containing block established.
33 |    * Default: `false`
34 |    */
35 |   fixed?: boolean;
36 |   /**
37 |    * Sets the z-order of a positioned element and its descendants or flex items.
38 |    */
39 |   zIndex?: number;
40 | }
41 | 
42 | export default function githubCorners(props: GitHubCornersProps) {
43 |   const { size = 80, fixed = false, bottom, zIndex, className, style, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;
44 |   const styl: React.CSSProperties = position === 'left' ? { left: 0, right: 'initial', transform: 'scale(-1, 1)' } : { right: 0, left: 'initial', transform: 'scale(1, 1)' };
45 |   if (bottom) {
46 |     styl.bottom = 0;
47 |     styl.top = 'initial';
48 |     styl.transform = position === 'left' ? 'scale(-1, -1)' : 'scale(1, -1)';
49 |   } else {
50 |     styl.bottom = 'initial';
51 |     styl.top = 0;
52 |   }
53 |   return (
54 |     <github-corners
55 |       target="__blank"
56 |       width={size}
57 |       height={size}
58 |       href={props.href}
59 |       position={fixed ? 'fixed' : 'absolute'}
60 |       z-index={zIndex}
61 |       style={style}
62 |       fill={bgColor}
63 |       color={color}
64 |       {...styl}
65 |       {...otherProps}
66 |     />
67 |   );
68 | }


--------------------------------------------------------------------------------
/website/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
 4 | import data from '@uiw/react-github-corners/README.md';
 5 | import styled from 'styled-components';
 6 | import App from './App';
 7 | const Footer = styled.footer`
 8 |   text-align: center;
 9 |   padding: 30px 0 50px 0;
10 |   a {
11 |     display: inline-block;
12 |     margin: 0 5px;
13 |   }
14 | `;
15 | 
16 | const Github = MarkdownPreviewExample.Github;
17 | const Example = MarkdownPreviewExample.Example;
18 | 
19 | const container = document.getElementById('root');
20 | const root = createRoot(container!);
21 | root.render(
22 |   <MarkdownPreviewExample
23 |     source={data.source}
24 |     components={data.components}
25 |     data={data.data}
26 |     title="GitHub Corners for React"
27 |     version={`v${VERSION}`}
28 |   >
29 |     <Github href="https://github.com/uiwjs/react-github-corners" />
30 |     <Example>
31 |       <App />
32 |     </Example>
33 |     <Footer>
34 |         <a href="https://github.com/uiwjs/react-github-corners/issues">
35 |           <img src="https://img.shields.io/github/issues/uiwjs/react-github-corners.svg" alt="" />
36 |         </a>
37 |         <a href="https://github.com/uiwjs/react-github-corners/network">
38 |           <img src="https://img.shields.io/github/forks/uiwjs/react-github-corners.svg" alt="" />
39 |         </a>
40 |         <a href="https://github.com/uiwjs/react-github-corners/stargazers">
41 |           <img src="https://img.shields.io/github/stars/uiwjs/react-github-corners.svg" alt="" />
42 |         </a>
43 |         <a href="https://github.com/uiwjs/react-github-corners/releases">
44 |           <img src="https://img.shields.io/github/v/release/uiwjs/react-github-corners.svg" alt="" />
45 |         </a>
46 |         <a href="https://www.npmjs.com/package/@uiw/react-github-corners">
47 |           <img src="https://img.shields.io/npm/v/@uiw/react-github-corners.svg" alt="" />
48 |         </a>
49 |       </Footer>
50 |   </MarkdownPreviewExample>,
51 | );
52 | 


--------------------------------------------------------------------------------
/web-component/README.md:
--------------------------------------------------------------------------------
 1 | @uiw/github-corners
 2 | ===
 3 | 
 4 | [![CI](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml)
 5 | [![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/github-corners/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/github-corners)
 6 | [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/github-corners.svg?style=flat)](https://www.npmjs.com/package/@uiw/github-corners)
 7 | [![npm version](https://img.shields.io/npm/v/@uiw/github-corners.svg?label=github-corners)](https://www.npmjs.com/package/@uiw/github-corners)
 8 | [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/github-corners/file/README.md)
 9 | 
10 | Add a Github corner to your project page, This [GitHub corners](https://uiwjs.github.io/react-github-corners) for [**@react**](https://github.com/facebook/react) component. Visit [https://uiwjs.github.io/react-github-corners](https://uiwjs.github.io/react-github-corners) to preview the example effects.
11 | 
12 | ## Installation
13 | 
14 | Add `@uiw/github-corners` to your project:
15 | 
16 | ```bash
17 | npm i @uiw/github-corners
18 | ```
19 | 
20 | Or load the directly through unpkg
21 | 
22 | unpkg.com CDN:
23 | 
24 | ```html
25 | <script src="https://unpkg.com/@uiw/github-corners/lib/index.js"></script>
26 | ```
27 | 
28 | Skypack CDN:
29 | 
30 | ```html
31 | <script src="https://cdn.skypack.dev/@uiw/github-corners"></script>
32 | ```
33 | 
34 | ## Usage
35 | 
36 | Import into your script:
37 | 
38 | ```jsx
39 | import "@uiw/github-corners";
40 | ```
41 | 
42 | Use it in your HTML:
43 | 
44 | ```html
45 | <github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>
46 | ```
47 | 
48 | Learn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
49 | 
50 | Using web components in React:
51 | 
52 | ```jsx
53 | import React from 'react';
54 | import '@uiw/github-corners';
55 | 
56 | function Demo() {
57 |   return (
58 |     <github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>
59 |   );
60 | }
61 | ```
62 | 
63 | ## Contributors
64 | 
65 | As always, thanks to our amazing contributors!
66 | 
67 | <a href="https://github.com/uiwjs/react-github-corners/graphs/contributors">
68 |   <img src="https://uiwjs.github.io/react-github-corners/CONTRIBUTORS.svg" />
69 | </a>
70 | 
71 | Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
72 | 
73 | ## License
74 | 
75 | Licensed under the MIT License.
76 | 


--------------------------------------------------------------------------------
/web-component/src/index.ts:
--------------------------------------------------------------------------------
 1 | // @ts-ignore
 2 | declare global {
 3 |   interface HTMLElementTagNameMap {
 4 |     'github-corners': GithubCorners;
 5 |   }
 6 |   namespace JSX {
 7 |     interface IntrinsicElements {
 8 |       'github-corners': Partial<GithubCorners> | {
 9 |         style?: Partial<CSSStyleDeclaration> | React.CSSProperties;
10 |       };
11 |     }
12 |   }
13 | }
14 | 
15 | const GITHUB_CORNERS_TEMPLATE = document.createElement("template");
16 | GITHUB_CORNERS_TEMPLATE.innerHTML = `
17 | <style>
18 | :host a:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
19 | @keyframes octocat-wave {
20 |   0%, 100% { transform: rotate(0); }
21 |   20%, 60% { transform: rotate(-25deg); }
22 |   40%, 80% { transform: rotate(10deg); }
23 | }
24 | @media (max-width:500px) {
25 |   :host a:hover .octo-arm { animation: none; }
26 |   :host .octo-arm { animation: octocat-wave 560ms ease-in-out; }
27 | }
28 | :host svg {
29 |   z-index: 99;
30 |   position: fixed;
31 |   border: 0px;
32 |   top: 0px;
33 | }
34 | </style>
35 | <svg width="54" height="54" viewBox="0 0 250 250" aria-hidden="true">
36 |   <a xlink:href="https://github.com/uiwjs/react-github-corners" target="_blank" rel="nofollow sponsored" style="fill: rgb(21, 21, 19); color: rgb(255, 255, 255);">
37 |     <g>
38 |       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
39 |       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" style="transform-origin: 130px 106px;"></path>
40 |       <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
41 |     </g>
42 |   </a>
43 | </svg>
44 | `;
45 | 
46 | export class GithubCorners extends HTMLElement {
47 |   /** Sets the z-order of a positioned element and its descendants or flex items. */
48 |   'z-index'?: string;
49 |   height?: string | number;
50 |   width?: string | number;
51 |   href?: string;
52 |   color?: string;
53 |   fill?: string;
54 |   position?: string;
55 |   target?: string;
56 |   top?: string;
57 |   left?: string;
58 |   right?: string = '0';
59 |   bottom?: string;
60 |   transform?: string;
61 |   private shadow: ShadowRoot
62 |   static get observedAttributes(): string[] {
63 |     return ['style', 'z-index', 'target', 'height', 'width', 'href', 'color', 'fill', 'position', 'top', 'left', 'right', 'bottom', 'transform'];
64 |   }
65 |   constructor() {
66 |     super();
67 |     this.shadow = this.attachShadow({ mode: 'open' });
68 |     this.shadow.appendChild(this.ownerDocument.importNode(GITHUB_CORNERS_TEMPLATE.content, true));
69 |     this.update()
70 |   }
71 |   private setAttr(name: string, value: string) {
72 |     const svg = this.shadow.querySelector('svg');
73 |     if (/(href)/.test(name.toLocaleLowerCase())) {
74 |       svg.lastElementChild.setAttribute('xlink:href', value);
75 |     } else if (/(color|fill)/.test(name.toLocaleLowerCase())) {
76 |       (svg.firstElementChild as HTMLAnchorElement).style[name as any] = value;
77 |     } else if (/(z-index|position|top|left|right|bottom|transform)/.test(name.toLocaleLowerCase())) {
78 |       svg.style[name as any] = value;
79 |     } else {
80 |       svg.setAttribute(name, value);
81 |     }
82 |   }
83 |   private update() {
84 |     ;[...this.getAttributeNames(), 'right'].forEach((name) => {
85 |       const value = this.getAttribute(name) || this[name as keyof GithubCorners] as any || '';
86 |       this.setAttr(name, value);
87 |     });
88 |   }
89 |   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
90 |     if (oldValue !== newValue) {
91 |       this.setAttr(name, newValue);
92 |     }
93 |   }
94 | }
95 | 
96 | customElements.define('github-corners', GithubCorners);


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | 
 7 | jobs:
 8 |   build-deploy:
 9 |     runs-on: ubuntu-latest
10 |     permissions:
11 |       contents: write
12 |       id-token: write
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 18
18 |           registry-url: 'https://registry.npmjs.org'
19 | 
20 |       - run: npm install
21 |       # - run: npm run hoist
22 | 
23 |       - run: npm run build:wc
24 |       - run: npm run build
25 |       - run: npm run bundle
26 |       - run: npm run bundle:min
27 |       - run: npm run doc
28 | 
29 |       - name: Generate Contributors Images
30 |         uses: jaywcjlove/github-action-contributors@main
31 |         with:
32 |           filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
33 |           output: website/build/CONTRIBUTORS.svg
34 |           avatarSize: 42
35 | 
36 |       - name: Create Tag
37 |         id: create_tag
38 |         uses: jaywcjlove/create-tag-action@main
39 |         with:
40 |           package-path: ./react/package.json
41 | 
42 |       - name: get tag version
43 |         id: tag_version
44 |         uses: jaywcjlove/changelog-generator@main
45 | 
46 |       - name: Deploy
47 |         uses: peaceiris/actions-gh-pages@v3
48 |         with:
49 |           user_name: 'github-actions[bot]'
50 |           user_email: 'github-actions[bot]@users.noreply.github.com'
51 |           commit_message: ${{steps.tag_version.outputs.tag}} ${{ github.event.head_commit.message }}
52 |           github_token: ${{ secrets.GITHUB_TOKEN }}
53 |           publish_dir: ./website/build
54 | 
55 |       - name: Generate Changelog
56 |         id: changelog
57 |         uses: jaywcjlove/changelog-generator@main
58 |         with:
59 |           token: ${{ secrets.GITHUB_TOKEN }}
60 |           head-ref: ${{steps.create_tag.outputs.version}}
61 |           filter-author: (jaywcjlove|小弟调调™|dependabot\[bot\]|Renovate Bot)
62 |           filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
63 | 
64 |       - name: Create Release
65 |         uses: ncipollo/release-action@v1
66 |         if: steps.create_tag.outputs.successful
67 |         with:
68 |           token: ${{ secrets.GITHUB_TOKEN }}
69 |           name: ${{ steps.create_tag.outputs.version }}
70 |           tag: ${{ steps.create_tag.outputs.version }}
71 |           body: |
72 |             [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-github-corners@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![](https://img.shields.io/github/issues/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/releases) [![](https://img.shields.io/github/forks/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/network) [![](https://img.shields.io/github/stars/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/stargazers) [![](https://img.shields.io/github/release/uiwjs/react-github-corners.svg)](https://github.com/uiwjs/react-github-corners/releases) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-github-corners)](https://bundlephobia.com/result?p=@uiw/react-github-corners@${{steps.create_tag.outputs.versionNumber}})
73 |             
74 |             Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-github-corners/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
75 |             Comparing Changes: ${{ steps.changelog.outputs.compareurl }} 
76 | 
77 |             ${{ steps.changelog.outputs.changelog }}
78 |             
79 |             ```bash
80 |             npm i @uiw/react-github-corners@${{steps.create_tag.outputs.versionNumber}}
81 |             ```
82 |             
83 |             ```bash
84 |             npm i @uiw/github-corners@${{steps.create_tag.outputs.versionNumber}}
85 |             ```
86 | 
87 |       - run: npm publish --access public --provenance
88 |         name: 📦  @uiw/react-github-corners publish to NPM
89 |         continue-on-error: true
90 |         working-directory: react
91 |         env:
92 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
93 | 
94 |       - run: npm publish --access public --provenance
95 |         name: 📦 @uiw/github-corners publish to NPM
96 |         continue-on-error: true
97 |         working-directory: web-component
98 |         env:
99 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}


--------------------------------------------------------------------------------
/react/README.md:
--------------------------------------------------------------------------------
  1 | react-github-corners
  2 | ===
  3 | <!--dividing-->
  4 | 
  5 | [![CI](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-github-corners/actions/workflows/ci.yml)
  6 | [![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-github-corners/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-github-corners)
  7 | [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-github-corners.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-github-corners)
  8 | [![npm version](https://img.shields.io/npm/v/@uiw/react-github-corners.svg)](https://www.npmjs.com/package/@uiw/react-github-corners)
  9 | [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-github-corners/file/README.md)
 10 | 
 11 | Add a Github corner to your project page, This [GitHub corners](https://uiwjs.github.io/react-github-corners) for [**@react**](https://github.com/facebook/react) component. Visit [https://uiwjs.github.io/react-github-corners](https://uiwjs.github.io/react-github-corners) to preview the example effects.
 12 | 
 13 | Preview Example: [Github](https://uiwjs.github.io/react-github-corners) | [Gitee](https://uiw.gitee.io/react-github-corners/)
 14 | 
 15 | ## Installation
 16 | 
 17 | ```bash
 18 | npm install --save @uiw/react-github-corners
 19 | # Via Yarn:
 20 | yarn add @uiw/react-github-corners
 21 | ```
 22 | 
 23 | Or use Web Components
 24 | 
 25 | ```bash
 26 | npm install --save @uiw/github-corners
 27 | ```
 28 | 
 29 | Or load the ES module directly through unpkg
 30 | 
 31 | unpkg.com CDN:
 32 | 
 33 | ```html
 34 | <script type="module" src="https://unpkg.com/@uiw/github-corners?module"></script>
 35 | ```
 36 | 
 37 | Skypack CDN:
 38 | 
 39 | ```html
 40 | <script type="module" src="https://cdn.skypack.dev/@uiw/github-corners"></script>
 41 | ```
 42 | 
 43 | ## Usage
 44 | 
 45 | ```jsx
 46 | import GitHubCorners from '@uiw/react-github-corners';
 47 | 
 48 | function Demo() {
 49 |   return (
 50 |     <GitHubCorners
 51 |       position="left"
 52 |       href="https://github.com/uiwjs/react-github-corners"
 53 |     />
 54 |   )
 55 | }
 56 | ```
 57 | 
 58 | Use it in your HTML:
 59 | 
 60 | ```html
 61 | <github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>
 62 | ```
 63 | 
 64 | Learn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
 65 | 
 66 | [![npm version](https://img.shields.io/npm/v/@uiw/github-corners.svg?label=github-corners)](https://www.npmjs.com/package/@uiw/github-corners)
 67 | 
 68 | Using web components in React:
 69 | 
 70 | ```jsx
 71 | import React from 'react';
 72 | import '@uiw/github-corners';
 73 | 
 74 | function Demo() {
 75 |   return (
 76 |     <github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>
 77 |   );
 78 | }
 79 | ```
 80 | 
 81 | ## React Props
 82 | 
 83 | ```typescript
 84 | interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 85 |   /**
 86 |    * The link to your project page.
 87 |    */
 88 |   href?: string;
 89 |   /**
 90 |    * The width and height of the corner. 
 91 |    * Default: `80`
 92 |    */
 93 |   size?: number;
 94 |   /**
 95 |    * The background color of the corner.
 96 |    * Default: `#151513`
 97 |    */
 98 |   bgColor?: string;
 99 |   /**
100 |    * The Github logo color of the corner.
101 |    * Default: `#fff`
102 |    */
103 |   color?: string;
104 |   /**
105 |    * The position of corner. 
106 |    * Default: `right`
107 |    */
108 |   position?: 'left' | 'right';
109 |   /**
110 |    * It is positioned relative to the initial containing block established.
111 |    * Default: `false`
112 |    */
113 |   fixed?: boolean;
114 |   /**
115 |    * Sets the z-order of a positioned element and its descendants or flex items.
116 |    */
117 |   zIndex?: number;
118 | }
119 | ```
120 | 
121 | | Property Name | Type | Default Value | Description |
122 | | ---- | ---- | ---- | ---- |
123 | | href | String | - | The link to your project page. |
124 | | size | String | `80` | The width and height of the corner. |
125 | | bgColor | String | `#151513` | The background color of the corner. |
126 | | color | String | `#fff` | The Github logo color of the corner. |
127 | | position | String | `left`/`right` | The position of corner. |
128 | | fixed | Boolean | `false` | It is positioned relative to the initial containing block established. |
129 | | zIndex | Number | - | Sets the z-order of a positioned element and its descendants or flex items. |
130 | 
131 | ## Development
132 | 
133 | Runs the project in development mode.  
134 | 
135 | ```bash
136 | # Step 1, run first, listen to the component compile and output the .js file
137 | npm run hoist
138 | # Step 2, listen for compilation output type .d.ts file
139 | npm run watch:wc
140 | npm run watch
141 | # Step 3, development mode, listen to compile preview website instance
142 | npm run start
143 | ```
144 | 
145 | Builds the app for production to the build folder.
146 | 
147 | ```bash
148 | npm run build:all
149 | npm run doc
150 | ```
151 | 
152 | The build is minified and the filenames include the hashes.
153 | Your app is ready to be deployed!
154 | 
155 | ## Contributors
156 | 
157 | As always, thanks to our amazing contributors!
158 | 
159 | <a href="https://github.com/uiwjs/react-github-corners/graphs/contributors">
160 |   <img src="https://uiwjs.github.io/react-github-corners/CONTRIBUTORS.svg" />
161 | </a>
162 | 
163 | Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
164 | 
165 | ## License
166 | 
167 | Licensed under the MIT License.
168 | 


--------------------------------------------------------------------------------
/website/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import GitHubCorners, { GitHubCornersProps } from '@uiw/react-github-corners';
  3 | import styled, { css } from 'styled-components';
  4 | import { SelectColor } from './components/SelectColor';
  5 | 
  6 | const Wrapper = styled.main`
  7 |   background-color: var(--color-theme-bg);
  8 |   .arrow {
  9 |     position: fixed;
 10 |     right: 18px;
 11 |     top: 32px;
 12 |   }
 13 | `;
 14 | 
 15 | const Header = styled.header`
 16 |   text-align: center;
 17 |   display: flex;
 18 |   flex-direction: column;
 19 |   align-items: center;
 20 |   justify-content: center;
 21 |   font-size: calc(10px + 2vmin);
 22 |   a {
 23 |     color: #09d3ac;
 24 |   }
 25 | `;
 26 | 
 27 | export const Button = styled.button<{ $select?: boolean; }>`
 28 |   position: relative;
 29 |   display: inline-block;
 30 |   border: 0 solid;
 31 |   padding: 5px 10px;
 32 |   margin: 0 2px;
 33 |   font-size: 12px;
 34 |   font-weight: 700;
 35 |   text-shadow: 0 1px hsla(0, 0%, 100%, .9);
 36 |   box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
 37 |   cursor: pointer;
 38 |   transition: all .3s;
 39 |   &:hover {
 40 |     outline: 0;
 41 |     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.38);
 42 |   }
 43 |   &:focus {
 44 |     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.38);
 45 |   }
 46 |   ${({ $select }) => $select && css`
 47 |     color: #333 !important;
 48 |     text-shadow: 0 1px hsl(0deg 0% 100% / 90%), 0 -1px hsl(0deg 0% 100% / 90%), 1px 0px hsl(0deg 0% 100% / 90%), -1px 0px hsl(0deg 0% 100% / 90%) !important;
 49 |   `}
 50 | `;
 51 | 
 52 | export const ButtonGroup = styled.div`
 53 |   padding-bottom: 12px;
 54 | `;
 55 | 
 56 | const APP = () => {
 57 |   const [size, setSize] = useState(80);
 58 |   const [bgColor, setBgColor] = useState('#151513');
 59 |   const [color, setColor] = useState('#fff');
 60 |   const [position, setPosition] = useState<GitHubCornersProps['position']>('right');
 61 |   const [bottom, setBottom] = useState<boolean>(false);
 62 |   return (
 63 |     <Wrapper>
 64 |       <GitHubCorners
 65 |         size={size}
 66 |         bgColor={bgColor}
 67 |         color={color}
 68 |         position={position}
 69 |         bottom={bottom}
 70 |         fixed
 71 |         zIndex={99}
 72 |         target="__blank"
 73 |         style={{ color: 'red' }}
 74 |         href="https://github.com/uiwjs/react-github-corners"
 75 |       />
 76 |       <svg className="arrow" viewBox="0 0 1024 1024" width="160" height="160">
 77 |         <path d="M819.103329 271.553343c-43.724084 116.925762-85.260531 200.227804-132.751217 259.863272-23.748923 29.828476-48.965818 53.774322-76.803581 73.230322-27.841343 19.45242-58.328615 34.429315-92.700643 46.183832-8.664615 2.98249-22.073287 5.066294-37.286489 5.048392-24.622545 0.025063-54.075077-5.349147-78.045986-19.137343-12.005147-6.888727-22.656895-15.818294-30.952728-27.214769-8.292252-11.407217-14.293035-25.295664-16.860195-42.485259a73.463049 73.463049 0 0 1-0.809175-10.862993c0.00358-13.412252 3.691413-26.20151 10.229258-38.006154 9.788867-17.694434 26.086937-33.075916 45.331693-43.917426 19.230434-10.859413 41.335944-17.146629 62.370909-17.135888 18.360392 0.007161 35.814937 4.715413 50.387245 15.066405 9.72442 6.881566 17.823329 18.367552 23.390881 32.785902 5.578294 14.393287 8.607329 31.607944 8.600168 49.424112 0.00358 18.00951-3.079161 36.624112-9.495273 53.634686-6.416112 17.021315-16.133371 32.402797-29.327217 44.250405-52.549818 47.200671-107.391105 89.188252-179.099748 123.277427-71.708643 34.082014-160.406378 60.297846-280.672672 75.446601l1.79021 14.210685c121.412028-15.284811 211.735273-41.880168 285.033623-76.72123 73.29835-34.830322 129.45007-77.877706 182.522629-125.558154 15.184559-13.644979 26.069035-31.049399 33.158266-49.853762 7.089231-18.815105 10.415441-39.055217 10.419021-58.686658-0.007161-19.427357-3.254601-38.263944-9.566881-54.594238-6.323021-16.305231-15.725203-30.222322-28.453595-39.291524-17.350713-12.330965-37.898741-17.723077-58.679496-17.712336-31.819189 0.039385-64.42249 12.406154-89.492588 32.581819-12.524308 10.103944-23.168895 22.202182-30.737902 35.850741-7.565427 13.637818-12.026629 28.872503-12.023049 44.948587 0 4.275021 0.315077 8.607329 0.966713 12.97186 2.867916 19.327105 9.799608 35.560727 19.44884 48.8047 14.482797 19.892811 34.855385 32.943441 56.345063 41.006545 21.518322 8.066685 44.253986 11.235357 64.229146 11.242518 16.512895-0.017902 31.081622-2.13393 41.919553-5.818182 35.442573-12.11614 67.233119-27.701706 96.273902-47.995525 43.577287-30.440727 80.856615-71.42221 115.379021-126.703888 34.533147-55.29242 66.395301-124.910098 99.388867-213.113734l-13.426573-5.019748z" fill="#8f8f8f"></path>
 78 |         <path d="M743.040895 344.686993l77.544727-57.802294 13.4767 85.400168a7.160839 7.160839 0 0 0 14.146237-2.230601l-15.324195-97.10814a7.139357 7.139357 0 0 0-4.371693-5.513846 7.142937 7.142937 0 0 0-6.981818 0.891524l-87.050741 64.884364a7.160839 7.160839 0 1 0 8.560783 11.478825z" fill="#8f8f8f"></path>
 79 |       </svg>
 80 |       <Header>
 81 |         <ButtonGroup>
 82 |           <Button onClick={() => {setSize(120)}}>Set Size 120px</Button>
 83 |           <Button onClick={() => {setSize(80)}}>Set Size 80px</Button>
 84 |           <Button onClick={() => {setPosition(position === 'left' ? 'right' : 'left')}}>{position === 'right' ? 'Right' : 'Left'}</Button>
 85 |           <Button onClick={() => setBottom(!bottom)}>{bottom ? 'Top' : 'Bottom'}</Button>
 86 |         </ButtonGroup>
 87 |         <input type="range" value={size} min="50" style={{ minWidth: 320 }} max="220" onChange={(evn) => setSize(Number(evn.target.value))}/>
 88 |         <ButtonGroup>
 89 |           <Button onClick={() => {setBgColor('#F95C2B')}} style={{ backgroundColor: '#F95C2B' }}>Orange #F95C2B</Button>
 90 |           <Button onClick={() => {setBgColor('#28a745')}} style={{ backgroundColor: '#28a745' }}>Green #28a745</Button>
 91 |           <Button onClick={() => {setBgColor('#dc3545')}} style={{ backgroundColor: '#dc3545' }}>Red #dc3545</Button>
 92 |           <Button onClick={() => {setBgColor('#008EF0')}} style={{ backgroundColor: '#008EF0' }}>Blue #008EF0</Button>
 93 |           <Button onClick={() => {setBgColor('#fff'); setColor('#151513')}} style={{ backgroundColor: '#fff', color: '#151513' }}>Light</Button>
 94 |           <Button onClick={() => {setBgColor('#151513'); setColor('#fff')}} style={{ backgroundColor: '#151513', color: '#fff' }}>Dark</Button>
 95 |         </ButtonGroup>
 96 |         <ButtonGroup>
 97 |           <SelectColor color={bgColor} onChange={setBgColor}>
 98 |             @ Background Color
 99 |           </SelectColor>
100 |           <SelectColor color={color} onChange={setColor}>
101 |             @ Logo Color
102 |           </SelectColor>
103 |         </ButtonGroup>
104 |       </Header>
105 |     </Wrapper>
106 |   );
107 | }
108 | 
109 | export default APP;


--------------------------------------------------------------------------------