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/package-lock.json b/package-lock.json index 66545e3..8ca84f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3327,6 +3327,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", @@ -5820,9 +5825,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", @@ -12483,6 +12488,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 +14079,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..acf2fc6 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,13 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "dotenv": "^16.0.1", "react": "^16.13.1", "react-component-export-image": "^0.1.6", "react-dom": "^16.13.1", "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/src/components/App.js b/src/components/App.js index 2696800..2cf0bf7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,17 +1,19 @@ import React from 'react'; import Editor from './Editor'; import Info from './Info' -class App extends React.Component { +import { ImgProvider } from '../utils/ImgContext' - render() { - return ( -
+const App = () => { + + return ( + +
- +
- ); - } + + ); + } - export default App; \ No newline at end of file diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js index ca616de..264c0f2 100644 --- a/src/components/ComponentToImg.js +++ b/src/components/ComponentToImg.js @@ -1,28 +1,34 @@ -import React from "react"; +import React, { useContext } from "react"; import { exportComponentAsPNG } from "react-component-export-image"; import "./CoverImage.css"; +import { ImgContext } from "../utils/ImgContext"; +import unsplash from "../utils/unsplashConfig"; -class ComponentToImg extends React.Component { - constructor(props) { - super(props); - this.componentRef = React.createRef(); +const ComponentToImg = (props) => { + + const { unsplashImage } = useContext(ImgContext); + const componentRef = React.createRef(); + + // download image and trigger download on unsplash api + const downloadImage = () => { + exportComponentAsPNG(componentRef, 'cover') + unsplash.photos.trackDownload({ downloadLocation: unsplashImage.downloadLink, }); + console.log(unsplashImage.downloadLink) } - render() { + return ( + +
{props.children}
+ + + ); - return ( - -
{this.props.children}
- - - ); - } } export default ComponentToImg; diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js index fc01a5c..e5322bd 100644 --- a/src/components/CoverImage.js +++ b/src/components/CoverImage.js @@ -5,6 +5,8 @@ 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"; + const CoverImage = (props) => { // hexToRgbA(hex, opacity) { @@ -28,6 +30,7 @@ const CoverImage = (props) => { case 'modern': return case 'outline': return case 'preview': return + case 'stylish': return default: return } diff --git a/src/components/Editor.js b/src/components/Editor.js index 319d266..b343f54 100644 --- a/src/components/Editor.js +++ b/src/components/Editor.js @@ -7,16 +7,16 @@ import RandomTheme from './RandomTheme'; const defaultSettings = { title: "How I built my first project with react", - bgColor: "#fee856", + bgColor: "#ffe9e3", pattern: "", download: "PNG", author: 'Rutik Wankhade', icon: { 'label': 'react', 'value': 'react' }, devIconOptions: {}, font: 'font-Anek', - theme: 'modern', + theme: 'stylish', customIcon: '', - platform:'hashnode' + platform: 'hashnode' }; @@ -29,6 +29,8 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d class Editor extends React.Component { + + state = defaultSettings; componentDidMount() { console.log("Mount") @@ -56,7 +58,6 @@ class Editor extends React.Component { - render() { return (
@@ -189,10 +190,13 @@ class Editor extends React.Component { value={this.state.theme} className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> - + - + + + +
@@ -201,19 +205,19 @@ class Editor extends React.Component {
- Platform + Platform - this.setState({ platform: e.target.value })} + value={this.state.platform} - className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> - - - + className="focus:outline-none text-gray-700 text-xl p-2 rounded border"> + + - -
+ + +
Made with 💖 by { + const { bgColor, title, author, font, icon, customIcon, platform } = config; + + // const [image, setImage] = useState({}) + + const [imageList, setImageList] = useState([]); + const [searchText, setSearchText] = useState('dev'); + + const { unsplashImage, setUnsplashImage } = useContext(ImgContext); + + const searchImages = () => { + + unsplash.search + .getPhotos({ + query: searchText, + page: 1, + per_page: 25 + + + }) + .then(response => { + // console.log(response.response.results); + setImageList(response.response.results) + }); + } + + useEffect(() => { + + unsplash.search + .getPhotos({ + query: 'dev', + page: 1, + per_page: 25 + + }) + .then(response => { + // console.log(response.response.results); + setImageList(response.response.results) + }); + }, []) + + const selectImage = (image) => { + setUnsplashImage({ + url: image.urls.regular, + name: image.user.name, + avatar: image.user.profile_image.small, + profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`, + downloadLink: image.links.download_location + + }) + + // unsplash.photos.trackDownload({ downloadLocation: image.links.download_location, }); + + } + + + return ( +
+ + +
+ +
+ +
+
+

{title}

+
+ { + customIcon ? +
+ img +
+ : +
+ +
+ } +

{author}

+ + +
+
+
+
+ + + {unsplashImage ? + + : +
+ +
+ setSearchText(e.target.value)} + /> + + +
+ + +
+ { + imageList.map(image => { + return {image.alt_description} selectImage(image) + } + /> + }) + } +
+
+ + } + +
+
+ + +
+ +
+ ); +} + +export default StylishTheme; \ No newline at end of file diff --git a/src/utils/ImgContext.js b/src/utils/ImgContext.js new file mode 100644 index 0000000..0f8b865 --- /dev/null +++ b/src/utils/ImgContext.js @@ -0,0 +1,14 @@ +import React, { createContext, useState } from "react"; +const ImgContext = createContext(); + +const ImgProvider = ({ children }) => { + const [unsplashImage, setUnsplashImage] = useState(); + + return ( + + {children} + + ); +}; + +export {ImgProvider, ImgContext} \ No newline at end of file diff --git a/src/utils/unsplashConfig.js b/src/utils/unsplashConfig.js new file mode 100644 index 0000000..336e026 --- /dev/null +++ b/src/utils/unsplashConfig.js @@ -0,0 +1,8 @@ +import { createApi } from 'unsplash-js'; + +const key= process.env.REACT_APP_API_ACCESS_KEY +const unsplash = createApi({ + accessKey: key +}); + +export default unsplash; \ No newline at end of file