wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update meta tags

Browse Source
This commit is contained in:
rutik wankhade 2022-07-23 20:22:58 +05:30
parent 8b6f8308b8
commit e80969f18c
3 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/index.html
View File

@ -6,25 +6,25 @@
<link rel="icon" href="./logo.png" /> <link rel="icon" href="./logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://coverview.vercel.app/"> <meta property="og:url" content="https://coverview.vercel.app/">
<meta property="og:title" content="Coverview"> <meta property="og:title" content="Coverview: Creating cover images for your blogs is now super easy">
<meta property="og:description" content="Creating cover images for your blogs is now super easy"> <meta property="og:description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more.">
<meta property="og:image" content="https://user-images.githubusercontent.com/47467468/175771056-bf7fa9a0-801b-4887-80b5-169735923d64.png"> <meta property="og:image"
content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png">
<meta name="description" content="Creating cover images for your blogs is now super easy" />
<meta name="description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more." />
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://coverview.now.sh/"> <meta property="twitter:url" content="https://coverview.vercel.app/">
<meta property="twitter:title" content="CoverView"> <meta property="twitter:title" content="CoverView: Creating cover images for your blogs is now super easy">
<meta property="twitter:description" content="Create an awesome cover image for your next blog post "> <meta property="twitter:description" content="Coverview is an open-source tool to create cover images for your blogs quickly and easily. Customize with different themes, colors, fonts and more.">
<meta property="twitter:image" <meta property="twitter:image"
content="https://user-images.githubusercontent.com/47467468/175771056-bf7fa9a0-801b-4887-80b5-169735923d64.png"> content="https://user-images.githubusercontent.com/47467468/180610249-d24b4ffa-e059-4678-8788-5795498b168c.png">
<link rel="apple-touch-icon" href="./logo.png" /> <link rel="apple-touch-icon" href="./logo.png" />
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> --> integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
<script defer data-domain="coverview.vercel.app" src="https://plausible.io/js/plausible.js"></script>
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -40,13 +40,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<!-- Place this tag in your head or just before your close body tag. --> <!-- Place this tag in your head or just before your close body tag. -->
<script defer type="text/javascript" src="https://api.pirsch.io/pirsch.js" <script defer type="text/javascript" src="https://api.pirsch.io/pirsch.js" id="pirschjs"
id="pirschjs"
data-code="y1wOy094LZLgd8a0GcLjDsPVQygfceIB"></script> data-code="y1wOy094LZLgd8a0GcLjDsPVQygfceIB"></script>
<title>Coverview</title>
<title>Coverview - Creating cover images for your blogs is now super easy</title>
</head> </head>
<script src="https://widget.senja.io/js/iframeResizer.min.js"></script>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>

20
src/components/Themes/PreviewTheme.js
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
const PreviewTheme = ({ config }) => { const PreviewTheme = ({ config }) => {
const {bgColor, platform } = config; const { bgColor, platform } = config;
const [image, setImage] = useState() const [image, setImage] = useState()
@ -13,16 +13,22 @@ const PreviewTheme = ({ config }) => {
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="w-10/12 mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white"> <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white">
<div className="bg-gray-800 w-full p-2 flex rounded-t-xl"> <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
<div className="bg-red-400 h-3 w-3 rounded-full mx-2"></div> <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
<div className="bg-yellow-400 h-3 w-3 rounded-full mx-2"></div> <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
<div className="bg-green-400 h-3 w-3 rounded-full mx-2"></div> <div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
<button
onClick={() => setImage('')}
className="ml-auto mr-4 cursor-pointer">
<svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div> </div>
{image ? {image ?
<div> <div className="">
<img src={image && image} className="object-cover " alt="preview" /> <img src={image && image} className="object-cover " alt="preview" />
</div> </div>
: :
<div className="flex flex-col p-20 py-28 bg-white items-center justify-center"> <div className="flex flex-col p-20 py-28 bg-white items-center justify-center">

2
src/components/Themes/StylishTheme.js
View File

@ -3,7 +3,7 @@ import unsplash from "../../utils/unsplashConfig";
import { ImgContext } from '../../utils/ImgContext'; import { ImgContext } from '../../utils/ImgContext';
const StylishTheme = ({ config }) => { const StylishTheme = ({ config }) => {
const { bgColor, title, author, font, icon, customIcon, platform } = config; const { title, author, font, icon, customIcon, platform } = config;
// const [image, setImage] = useState({}) // const [image, setImage] = useState({})