diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..ffc9e87 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,3 @@ +# These are supported funding model platforms + +github: [rutikwankhade] diff --git a/.gitignore b/.gitignore index 4d29575..0cab3c2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ /build # misc +.env .DS_Store .env.local .env.development.local @@ -21,3 +22,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + + diff --git a/README.md b/README.md index 99ed474..737ac39 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -

- -

+ + +## Coverview +Creating cover images for your blogs is now super easy. +

@@ -10,20 +12,21 @@

-

🛠 Create awesome cover images for your blog posts quickly.

-

- -

-

+ + + + ## ⚡ Features -- 🛠 Create cover images for your blogs quickly and easily +- 🚀 super fast and easy to use +- 🌈 4 different themes, multiple fonts +- 🌠 100+ dev icons with option to upload custom icon - ✨ 15+ different background patterns -- 💾 Download cover images in `.png` as well as `.jpeg` format +- 💾 Cover size based on blogging platform (i.e hashnode and dev) ## 👩‍💻 Developing This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). diff --git a/package-lock.json b/package-lock.json index 66545e3..2db9c8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1946,6 +1946,14 @@ } } }, + "@headlessui/react": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz", + "integrity": "sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==", + "requires": { + "client-only": "^0.0.1" + } + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -3327,6 +3335,11 @@ "@types/node": "*" } }, + "@types/content-type": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@types/content-type/-/content-type-1.1.5.tgz", + "integrity": "sha512-dgMN+syt1xb7Hk8LU6AODOfPlvz5z1CbXpPuJE5ZrX9STfBOIXF09pEB8N7a97WT9dbngt3ksDCm6GW6yMrxfQ==" + }, "@types/eslint": { "version": "7.29.0", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz", @@ -5027,6 +5040,11 @@ } } }, + "client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -5759,6 +5777,11 @@ } } }, + "dom-to-image": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz", + "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==" + }, "domelementtype": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", @@ -5820,9 +5843,9 @@ } }, "dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz", + "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==" }, "dotenv-expand": { "version": "5.1.0", @@ -7370,6 +7393,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -12428,6 +12459,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -12483,6 +12531,11 @@ "workbox-webpack-plugin": "^6.4.1" }, "dependencies": { + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + }, "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -14069,6 +14122,15 @@ "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=" }, + "unsplash-js": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/unsplash-js/-/unsplash-js-7.0.15.tgz", + "integrity": "sha512-WGqKp9wl2m2tAUPyw2eMZs/KICR+A52tCaRapzVXWxkA4pjHqsaGwiJXTEW7hBy4Pu0QmP6KxTt2jST3tluawA==", + "requires": { + "@types/content-type": "^1.1.3", + "content-type": "^1.0.4" + } + }, "upath": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", diff --git a/package.json b/package.json index bd6479b..cd1036b 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,19 @@ "version": "0.1.0", "private": true, "dependencies": { + "@headlessui/react": "^1.7.7", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "dom-to-image": "^2.6.0", + "dotenv": "^16.0.1", "react": "^16.13.1", "react-component-export-image": "^0.1.6", "react-dom": "^16.13.1", + "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", - "react-select": "^3.1.0" + "react-select": "^3.1.0", + "unsplash-js": "^7.0.15" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index 9c2fe27..8dc21ab 100644 --- a/public/index.html +++ b/public/index.html @@ -6,30 +6,37 @@ - + - - - - - - + + + + + + - - - + + + + content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png"> - - + + + + + + + + - Coverview + + + + Coverview - Creating cover images for your blogs is now super easy diff --git a/public/logo.png b/public/logo.png index 248fa7c..04b1204 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..e8b1055 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Coverview", + "name": "Coverview", "icons": [ { "src": "favicon.ico", @@ -8,12 +8,12 @@ "type": "image/x-icon" }, { - "src": "logo192.png", + "src": "logo.png", "type": "image/png", "sizes": "192x192" }, { - "src": "logo512.png", + "src": "logo.png", "type": "image/png", "sizes": "512x512" } diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png new file mode 100644 index 0000000..04b1204 Binary files /dev/null and b/src/assets/icons/logo.png differ diff --git a/src/assets/icons/reset.svg b/src/assets/icons/reset.svg deleted file mode 100644 index 2d64903..0000000 --- a/src/assets/icons/reset.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/cover1.webp b/src/assets/images/cover1.webp new file mode 100644 index 0000000..3e22c8f Binary files /dev/null and b/src/assets/images/cover1.webp differ diff --git a/src/assets/images/cover2.webp b/src/assets/images/cover2.webp new file mode 100644 index 0000000..4614581 Binary files /dev/null and b/src/assets/images/cover2.webp differ diff --git a/src/assets/images/cover3.webp b/src/assets/images/cover3.webp new file mode 100644 index 0000000..e4ba4ba Binary files /dev/null and b/src/assets/images/cover3.webp differ diff --git a/src/assets/images/cover4.webp b/src/assets/images/cover4.webp new file mode 100644 index 0000000..4c68640 Binary files /dev/null and b/src/assets/images/cover4.webp differ diff --git a/src/assets/images/cover5.webp b/src/assets/images/cover5.webp new file mode 100644 index 0000000..54915d6 Binary files /dev/null and b/src/assets/images/cover5.webp differ diff --git a/src/assets/images/dev-logo.png b/src/assets/images/dev-logo.png new file mode 100644 index 0000000..0289905 Binary files /dev/null and b/src/assets/images/dev-logo.png differ diff --git a/src/assets/images/hashnode-logo.png b/src/assets/images/hashnode-logo.png new file mode 100644 index 0000000..f073be6 Binary files /dev/null and b/src/assets/images/hashnode-logo.png differ diff --git a/src/assets/images/step1.png b/src/assets/images/step1.png new file mode 100644 index 0000000..04f5b95 Binary files /dev/null and b/src/assets/images/step1.png differ diff --git a/src/assets/images/step2.png b/src/assets/images/step2.png new file mode 100644 index 0000000..f55b938 Binary files /dev/null and b/src/assets/images/step2.png differ diff --git a/src/assets/images/theme1.webp b/src/assets/images/theme1.webp new file mode 100644 index 0000000..c4a82a0 Binary files /dev/null and b/src/assets/images/theme1.webp differ diff --git a/src/assets/images/theme2.webp b/src/assets/images/theme2.webp new file mode 100644 index 0000000..a520e16 Binary files /dev/null and b/src/assets/images/theme2.webp differ diff --git a/src/assets/images/theme3.webp b/src/assets/images/theme3.webp new file mode 100644 index 0000000..2f924f5 Binary files /dev/null and b/src/assets/images/theme3.webp differ diff --git a/src/assets/images/theme4.webp b/src/assets/images/theme4.webp new file mode 100644 index 0000000..9cc8a44 Binary files /dev/null and b/src/assets/images/theme4.webp differ diff --git a/src/assets/images/theme5.webp b/src/assets/images/theme5.webp new file mode 100644 index 0000000..98a8616 Binary files /dev/null and b/src/assets/images/theme5.webp differ diff --git a/src/assets/images/theme6.webp b/src/assets/images/theme6.webp new file mode 100644 index 0000000..f19cc61 Binary files /dev/null and b/src/assets/images/theme6.webp differ diff --git a/src/assets/images/theme7.webp b/src/assets/images/theme7.webp new file mode 100644 index 0000000..906dfa8 Binary files /dev/null and b/src/assets/images/theme7.webp differ diff --git a/src/components/App.js b/src/components/App.js index 317afde..3bebd83 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,16 +1,22 @@ import React from 'react'; +import { BrowserRouter, Route, Routes } from "react-router-dom"; + import Editor from './Editor'; +import Home from './Home' +import Faq from './Faq'; -class App extends React.Component { +const App = () => { + + return ( + + + } /> + } /> + } /> + + + ); - render() { - return ( -
- -
- ); - } } - export default App; \ No newline at end of file diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js index faa7b9a..38f90e1 100644 --- a/src/components/ComponentToImg.js +++ b/src/components/ComponentToImg.js @@ -1,25 +1,83 @@ -import React from "react"; -import { exportComponentAsPNG } from "react-component-export-image"; +import React, { useContext, useState } from "react"; +// import { exportComponentAsPNG } from "react-component-export-image"; import "./CoverImage.css"; +import { ImgContext } from "../utils/ImgContext"; +import unsplash from "../utils/unsplashConfig"; +import domtoimage from "dom-to-image"; -class ComponentToImg extends React.Component { - constructor(props) { - super(props); - this.componentRef = React.createRef(); +const ComponentToImg = (props) => { + + const [loading, setLoading] = useState(false) + + const { unsplashImage } = useContext(ImgContext); + const componentRef = React.createRef(); + + + + + async function saveImage(data) { + var a = document.createElement("A"); + a.href = data; + a.download = `cover.png`; + document.body.appendChild(a); + setLoading(false) + + a.click(); + document.body.removeChild(a); } - render() { + const downloadImage = async () => { + // exportComponentAsPNG(componentRef, 'cover') + setLoading(true) + + const element = componentRef.current; + + // console.log(element) + // console.log(element.offsetHeight) + + let data = await domtoimage.toPng(componentRef.current, { + height: element.offsetHeight * 2, + width: element.offsetWidth * 2, + style: { + transform: "scale(" + 2 + ")", + transformOrigin: "top left", + width: element.offsetWidth + "px", + height: element.offsetHeight + "px", + } + }) + + console.log(data) + await saveImage(data); - return ( - -
{this.props.children}
- - - ); + if (unsplashImage) { + unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, }); + } } + + + return ( + +
{props.children}
+ + + ); + } export default ComponentToImg; diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css index 301f5c2..ade91dc 100644 --- a/src/components/CoverImage.css +++ b/src/components/CoverImage.css @@ -1,14 +1,10 @@ -.cover { - display: flex; - height: 420px; - width: 800px; - overflow-y: hidden; +.dev { + height: 340px; + width: 860px; } -@media screen and (max-width:600px) { - .cover { - width: 90vw; - height: 60vh; - padding: 4vh; - } +.hashnode { + height: 420px; + width: 800px; + } \ No newline at end of file diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js index f882341..5742cce 100644 --- a/src/components/CoverImage.js +++ b/src/components/CoverImage.js @@ -5,6 +5,9 @@ import ModernTheme from "./Themes/ModernTheme"; import BasicTheme from "./Themes/BasicTheme"; import OutlineTheme from "./Themes/OutlineTheme"; import PreviewTheme from "./Themes/PreviewTheme"; +import StylishTheme from "./Themes/StylishTheme"; +import MobileMockupTheme from "./Themes/MobileMockupTheme"; +import BackgroundTheme from "./Themes/BackgroundTheme"; const CoverImage = (props) => { // hexToRgbA(hex, opacity) { @@ -28,6 +31,9 @@ const CoverImage = (props) => { case 'modern': return case 'outline': return case 'preview': return + case 'stylish': return + case 'mobile': return + case 'background': return default: return } @@ -35,7 +41,7 @@ const CoverImage = (props) => { return ( -
+
{selectTheme(theme)}
); diff --git a/src/components/Editor.js b/src/components/Editor.js index 266ee71..2d3cf79 100644 --- a/src/components/Editor.js +++ b/src/components/Editor.js @@ -3,22 +3,35 @@ import CoverImage from "./CoverImage"; import ComponentToImg from "./ComponentToImg"; import Select from 'react-select'; import RandomTheme from './RandomTheme'; -// import resetIcon from '../assets/icons/reset.svg' +import { ImgProvider } from '../utils/ImgContext' +import Header from "./Header"; +import { Tab } from '@headlessui/react' + +import theme1 from '../assets/images/theme1.webp' +import theme2 from '../assets/images/theme2.webp' +import theme3 from '../assets/images/theme3.webp' +import theme4 from '../assets/images/theme4.webp' +import theme5 from '../assets/images/theme5.webp' +import theme6 from '../assets/images/theme6.webp' +import theme7 from '../assets/images/theme7.webp' + + + const defaultIcon = { 'label': 'react', 'value': 'react' } const defaultSettings = { - title: "How I built my first project with react", - bgColor: "#dcd6f7", + title: "A begineers guide to frontend development", + bgColor: "#949ee5", pattern: "", download: "PNG", author: 'Rutik Wankhade', icon: defaultIcon, devIconOptions: [defaultIcon], - font: 'font-sans', - theme: 'modern', - customIcon: '' - + font: 'font-Anek', + theme: 'background', + customIcon: '', + platform: 'hashnode' }; const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json" @@ -26,9 +39,12 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d // { value: 'None', label: 'None' }, // { value: 'javascript', label: 'Javascript' }, // { value: 'python', label: 'Python' }, +// ] + class Editor extends React.Component { + state = defaultSettings; componentDidMount() { console.log("Mount") @@ -55,178 +71,215 @@ class Editor extends React.Component { ); - // customOption = props => { - // const { data, innerRef, innerProps } = props; - - // return data.name === 'custom' ? ( - //
- // this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })} - // /> - //
- // ) : ( - // - // ); - - - // }; - render() { return ( -
-
- {/*

🛠 Creating cover images for your blogs is now super easy

*/} +
+
-
-

Coverview

- - + +
- +
-
-
- Blog Title -