diff --git a/README.md b/README.md index 7cdc365c..f62db169 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,29 @@ ## Built Using -- React 18 -- TypeScript -- Vite 5 -- ESLint -- Prettier -- Semantic-Release -- Custom Messaging & Storage Wrappers +- React 18 +- TypeScript +- Vite 5 +- ESLint +- Prettier +- Semantic-Release +- Custom Messaging & Storage Wrappers ## Getting Started 1. Clone this repo 2. Run `pnpm install` to install and patch all the required dependencies -3. Run `pnpm run dev` to start the development server -4. Run `pnpm build` to build the extension for production + +- If you want to run the development build: + + - Run `pnpm run dev` + +- If you want to build the extension for production: + + - Run `pnpm build` + +You may have to rename the `__uno.css.js` to `uno.css.js` in dist + +Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked' + +Navigate to the 'dist' folder and click 'select' to import the extension diff --git a/package.json b/package.json index 3a3cd1b5..e70a900c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "clsx": "^2.1.0", "highcharts": "^11.3.0", "highcharts-react-official": "^3.2.1", - "html2canvas": "^1.4.1", + "html-to-image": "^1.11.11", "react": "^18.2.0", "react-devtools-core": "^5.0.0", "react-dom": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 452e870f..fd49e39e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,9 +34,9 @@ dependencies: highcharts-react-official: specifier: ^3.2.1 version: 3.2.1(highcharts@11.3.0)(react@18.2.0) - html2canvas: - specifier: ^1.4.1 - version: 1.4.1 + html-to-image: + specifier: ^1.11.11 + version: 1.11.11 react: specifier: ^18.2.0 version: 18.2.0 @@ -5856,11 +5856,6 @@ packages: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true - /base64-arraybuffer@1.0.2: - resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} - engines: {node: '>= 0.6.0'} - dev: false - /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true @@ -6553,12 +6548,6 @@ packages: postcss: 8.4.35 dev: true - /css-line-break@2.1.0: - resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} - dependencies: - utrie: 1.0.2 - dev: false - /css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -8663,12 +8652,8 @@ packages: engines: {node: '>=8'} dev: true - /html2canvas@1.4.1: - resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} - engines: {node: '>=8.0.0'} - dependencies: - css-line-break: 2.1.0 - text-segmentation: 1.0.3 + /html-to-image@1.11.11: + resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} dev: false /htmlparser2@8.0.2: @@ -12430,12 +12415,6 @@ packages: minimatch: 3.1.2 dev: true - /text-segmentation@1.0.3: - resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} - dependencies: - utrie: 1.0.2 - dev: false - /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true @@ -12978,12 +12957,6 @@ packages: engines: {node: '>= 0.4.0'} dev: true - /utrie@1.0.2: - resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} - dependencies: - base64-arraybuffer: 1.0.2 - dev: false - /uuid@9.0.1: resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} hasBin: true diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 0e4062a4..7f3ad1c9 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -45,15 +45,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren index + 8); const saveAsPNG = () => { - if (calendarRef.current) { - html2canvas(calendarRef.current).then(canvas => { - // Create an a element to trigger download - const a = document.createElement('a'); - a.href = canvas.toDataURL('image/png'); - a.download = 'calendar.png'; - a.click(); + htmlToImage + .toPng(calendarRef.current, { + backgroundColor: 'white', + style: { + background: 'white', + marginTop: '20px', + marginBottom: '20px', + marginRight: '20px', + marginLeft: '20px', + }, + }) + .then(dataUrl => { + let img = new Image(); + img.src = dataUrl; + fetch(dataUrl) + .then(response => response.blob()) + .then(blob => { + const href = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = href; + link.download = 'my-schedule.png'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }) + .catch(error => console.error('Error downloading file:', error)); + }) + .catch(error => { + console.error('oops, something went wrong!', error); }); - } }; useEffect(() => { @@ -87,8 +108,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren