mirror of
https://github.com/towfiqi/serpbear
synced 2025-06-26 18:15:54 +00:00
Compare commits
41 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e61dfb5b90 | ||
|
|
b9d58a721d | ||
|
|
b83df5f3db | ||
|
|
3b6d034d6f | ||
|
|
5dd366b91e | ||
|
|
5fc1779783 | ||
|
|
c5af94a146 | ||
|
|
c406588953 | ||
|
|
3c48d130b6 | ||
|
|
99dbbd1dd9 | ||
|
|
acc0b39d80 | ||
|
|
a1108d240e | ||
|
|
d9e0d0107a | ||
|
|
9e9dad7631 | ||
|
|
8139e399c1 | ||
|
|
cb24696a1f | ||
|
|
b50733defc | ||
|
|
0c8b457eee | ||
|
|
123ad81dae | ||
|
|
6c48b87e5e | ||
|
|
cf8b2c6913 | ||
|
|
6d6e2f63d0 | ||
|
|
74c9603293 | ||
|
|
be5ec96699 | ||
|
|
0fdb43c0a5 | ||
|
|
e904afdd33 | ||
|
|
ee32435d05 | ||
|
|
6a1f1d4adf | ||
|
|
671f89e492 | ||
|
|
9b71f8400b | ||
|
|
ca0dcfc492 | ||
|
|
b0bfba4404 | ||
|
|
b740ef337b | ||
|
|
e3bd5b9c07 | ||
|
|
89824ece23 | ||
|
|
c2b63280cb | ||
|
|
1ebf7aef4b | ||
|
|
457f55353f | ||
|
|
49b4769528 | ||
|
|
35aae7b7e2 | ||
|
|
ad6a354cb9 |
74
CHANGELOG.md
74
CHANGELOG.md
@@ -2,6 +2,80 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [0.2.5](https://github.com/towfiqi/serpbear/compare/v0.2.4...v0.2.5) (2023-03-07)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Adds current App version Number in Footer. ([b83df5f](https://github.com/towfiqi/serpbear/commit/b83df5f3dbd64db657d31f0526438e7165e1b475))
|
||||
* Adds Keyword Scraping Interval Settings. ([3b6d034](https://github.com/towfiqi/serpbear/commit/3b6d034d6f7da0b4259070220fffff44184dd680)), closes [#81](https://github.com/towfiqi/serpbear/issues/81) [#76](https://github.com/towfiqi/serpbear/issues/76)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fixes Broken Image thumbnail loading issue. ([5dd366b](https://github.com/towfiqi/serpbear/commit/5dd366b91e2a94e658bf5250a8a0fa64c09e1c11))
|
||||
* Settings Update Toast was not showing up. ([b9d58a7](https://github.com/towfiqi/serpbear/commit/b9d58a721df12f3f34220a3ae5da6897e23c83ec))
|
||||
|
||||
### [0.2.4](https://github.com/towfiqi/serpbear/compare/v0.2.3...v0.2.4) (2023-02-15)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Keyword ranking pages can now be clicked. ([c5af94a](https://github.com/towfiqi/serpbear/commit/c5af94a1469713ed4092253d26953ee0ed28c25d))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fixes broken Login on windows ([c406588](https://github.com/towfiqi/serpbear/commit/c406588953035e4177a64011c13eb0e3aedffe89))
|
||||
* Fixes Node Cron memory leak issue. ([3c48d13](https://github.com/towfiqi/serpbear/commit/3c48d130b6f229a4ac27ec43ef1ea3a6640cecf6))
|
||||
|
||||
### [0.2.3](https://github.com/towfiqi/serpbear/compare/v0.2.2...v0.2.3) (2023-01-12)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Ability to tag multiple keywords at once ([9e9dad7](https://github.com/towfiqi/serpbear/commit/9e9dad7631691b2a836fdd4c522b1f933b17e285)), closes [#54](https://github.com/towfiqi/serpbear/issues/54)
|
||||
* Set USERNAME as well as USER variable ([b50733d](https://github.com/towfiqi/serpbear/commit/b50733defc2c06e0f92ca3e88fd1f74684eee9c0))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fixes Position and View Sort. ([8139e39](https://github.com/towfiqi/serpbear/commit/8139e399c13ab8be767facef9a19c67dec06ed64)), closes [#46](https://github.com/towfiqi/serpbear/issues/46)
|
||||
* Fixes wrong CTR value for Search Console Data ([cb24696](https://github.com/towfiqi/serpbear/commit/cb24696a1f47b02a11c68cd1c673ea8b1bacd144)), closes [#48](https://github.com/towfiqi/serpbear/issues/48)
|
||||
* Mobile Keyword Scraping not working. ([a1108d2](https://github.com/towfiqi/serpbear/commit/a1108d240ea38ab0886ef3722b0c937ec5a45591)), closes [#58](https://github.com/towfiqi/serpbear/issues/58)
|
||||
* ScrapingAnt Mobile Keyword Scrape not working ([acc0b39](https://github.com/towfiqi/serpbear/commit/acc0b39d80d4f9371967a0d425ed205c5d866eea))
|
||||
|
||||
### [0.2.2](https://github.com/towfiqi/serpbear/compare/v0.2.1...v0.2.2) (2022-12-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fixes bug that prevents Saving API settings ([123ad81](https://github.com/towfiqi/serpbear/commit/123ad81dae10aa28848148d0f3da5cf1f7de7c57)), closes [#45](https://github.com/towfiqi/serpbear/issues/45)
|
||||
|
||||
### [0.2.1](https://github.com/towfiqi/serpbear/compare/v0.2.0...v0.2.1) (2022-12-24)
|
||||
|
||||
## [0.2.0](https://github.com/towfiqi/serpbear/compare/v0.1.7...v0.2.0) (2022-12-21)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Adds better error logging for debugging issues ([9b71f84](https://github.com/towfiqi/serpbear/commit/9b71f8400bc17b75722b93cbe745543f6b30814a))
|
||||
* Highlights tracked keywords in Discovery tab ([ee32435](https://github.com/towfiqi/serpbear/commit/ee32435d05c2a2ec6d446cd00e28058f07eb1ad4))
|
||||
* Integrate SerpApi ([ad6a354](https://github.com/towfiqi/serpbear/commit/ad6a354cb93bc6584d71dd1216a8a03d8dba505b))
|
||||
* integrates Google Search Console. ([49b4769](https://github.com/towfiqi/serpbear/commit/49b4769528d18e34c16386b73dfb662e7a9f45a0))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Ability to add SMTP without user/pass. ([671f89e](https://github.com/towfiqi/serpbear/commit/671f89e492b0f45d63ae7575c7d4970252c11296)), closes [#30](https://github.com/towfiqi/serpbear/issues/30)
|
||||
* backend error on addind new domain ([c2b6328](https://github.com/towfiqi/serpbear/commit/c2b63280cb9d66b565dc51eb69ee960710ace895))
|
||||
* Backend error on loading the domains page. ([e3bd5b9](https://github.com/towfiqi/serpbear/commit/e3bd5b9c0735939c6b06e9762a3ad041b8b05d6e))
|
||||
* Email Notification was not being sent. ([0fdb43c](https://github.com/towfiqi/serpbear/commit/0fdb43c0a53460cd35daabc4703d26cb11db9601))
|
||||
* Fixes Docker Deployment failure after the SC integration. ([b0bfba4](https://github.com/towfiqi/serpbear/commit/b0bfba440464f8fc7c31609c202e01416a41702d))
|
||||
* hides Search Console Stats if its not connected ([b740ef3](https://github.com/towfiqi/serpbear/commit/b740ef337bbfb43f63528cac891d4cb254318dc7))
|
||||
* Keyword Detail View's broken Search Result ([6a1f1d4](https://github.com/towfiqi/serpbear/commit/6a1f1d4adff89fc718c0f2ffe52a59ab15ad6c80))
|
||||
* Minor UI Issues. ([89824ec](https://github.com/towfiqi/serpbear/commit/89824ece2349b510fa0b7d87b33cacd2c88efc95))
|
||||
|
||||
### [0.1.7](https://github.com/towfiqi/serpbear/compare/v0.1.6...v0.1.7) (2022-12-08)
|
||||
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ COPY --from=builder --chown=nextjs:nodejs /app/cron.js ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/email ./email
|
||||
RUN rm package.json
|
||||
RUN npm init -y
|
||||
RUN npm i cryptr dotenv node-cron
|
||||
RUN npm i cryptr dotenv croner @googleapis/searchconsole
|
||||
RUN npm i -g concurrently
|
||||
|
||||
USER nextjs
|
||||
|
||||
@@ -7,17 +7,18 @@
|
||||
|
||||
SerpBear is an Open Source Search Engine Position Tracking App. It allows you to track your website's keyword positions in Google and get notified of their positions.
|
||||
|
||||

|
||||

|
||||
|
||||
#### Features
|
||||
- **Unlimited Keywords:** Add unlimited domains and unlimited keywords to track their SERP.
|
||||
- **Email Notification:** Get notified of your keyword position changes daily/weekly/monthly through email.
|
||||
- **SERP API:** SerpBear comes with built-in API that you can use for your marketing & data reporting tools.
|
||||
- **Google Search Console Integration:** Get the actual visit count, impressions & more for Each keyword.
|
||||
- **Mobile App:** Add the PWA app to your mobile for a better mobile experience.
|
||||
- **Zero Cost to RUN:** Run the App on mogenius.com or Fly.io for free.
|
||||
|
||||
#### How it Works
|
||||
The App uses third party website scrapers like ScrapingAnt, ScrapingRobot or Your given Proxy ips to scrape google search results to see if your domain appears in the search result for the given keyword.
|
||||
The App uses third party website scrapers like ScrapingAnt, ScrapingRobot, SerpApi or Your given Proxy ips to scrape google search results to see if your domain appears in the search result for the given keyword. Also, When you connect your Googel Search Console account, the app shows actual search visits for each tracked keywords. You can also discover new keywords, and find the most performing keywords, countries, pages.
|
||||
|
||||
#### Getting Started
|
||||
- **Step 1:** Deploy & Run the App.
|
||||
@@ -38,8 +39,10 @@ The App uses third party website scrapers like ScrapingAnt, ScrapingRobot or You
|
||||
| Serpwatcher.com | $49/mo| 3000/mo | No |
|
||||
| whatsmyserp.com | $49/mo| 30,000/mo| No |
|
||||
| serply.io | $49/mo | 5000/mo | Yes |
|
||||
| serpapi.com | From $50/mo** | From 5,000/mo** | Yes |
|
||||
|
||||
(*) Free upto a limit. If you are using ScrapingAnt you can lookup 10,000 times per month for free.
|
||||
(**) Free up to 100 per month. Paid from 5,000 to 10,000,000+ per month.
|
||||
|
||||
**Stack**
|
||||
- Next.js for Frontend & Backend.
|
||||
|
||||
@@ -6,19 +6,20 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
|
||||
|
||||
type ChartProps ={
|
||||
labels: string[],
|
||||
sreies: number[]
|
||||
sreies: number[],
|
||||
reverse? : boolean,
|
||||
}
|
||||
|
||||
const Chart = ({ labels, sreies }:ChartProps) => {
|
||||
const Chart = ({ labels, sreies, reverse = true }:ChartProps) => {
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false as const,
|
||||
scales: {
|
||||
y: {
|
||||
reverse: true,
|
||||
reverse,
|
||||
min: 1,
|
||||
max: 100,
|
||||
max: reverse ? 100 : undefined,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
|
||||
@@ -186,6 +186,65 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
|
||||
<path d="M5.5 5h13a1 1 0 0 1 .5 1.5L14 12v7l-4-3v-4L5 6.5A1 1 0 0 1 5.5 5" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
}
|
||||
{type === 'idea'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<g fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7"/>
|
||||
<path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3"/>
|
||||
<path d="M9.7 17h4.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
{type === 'tracking'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<path fill={color} d="M21 7a.78.78 0 0 0 0-.21a.64.64 0 0 0-.05-.17a1.1 1.1 0 0 0-.09-.14a.75.75 0 0 0-.14-.17l-.12-.07a.69.69 0 0 0-.19-.1h-.2A.7.7 0 0 0 20 6h-5a1 1 0 0 0 0 2h2.83l-4 4.71l-4.32-2.57a1 1 0 0 0-1.28.22l-5 6a1 1 0 0 0 .13 1.41A1 1 0 0 0 4 18a1 1 0 0 0 .77-.36l4.45-5.34l4.27 2.56a1 1 0 0 0 1.27-.21L19 9.7V12a1 1 0 0 0 2 0V7z"/>
|
||||
</svg>
|
||||
}
|
||||
{type === 'google'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 256 262">
|
||||
<path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/>
|
||||
<path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/>
|
||||
<path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/>
|
||||
<path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335" />
|
||||
</svg>
|
||||
}
|
||||
{type === 'cursor'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<path fill="none" stroke={color} strokeWidth="2" d="M6 3l12 11l-5 1l3 5.5l-3 1.5l-3-6l-4 3z"/>
|
||||
</svg>
|
||||
}
|
||||
{type === 'eye'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<g fill="none">
|
||||
<path d="M21.257 10.962c.474.62.474 1.457 0 2.076C19.764 14.987 16.182 19 12 19c-4.182 0-7.764-4.013-9.257-5.962a1.692 1.692 0 0 1 0-2.076C4.236 9.013 7.818 5 12 5c4.182 0 7.764 4.013 9.257 5.962z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
{type === 'target'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<path d="M19.938 13A8.004 8.004 0 0 1 13 19.938V22h-2v-2.062A8.004 8.004 0 0 1 4.062 13H2v-2h2.062A8.004 8.004 0 0 1 11 4.062V2h2v2.062A8.004 8.004 0 0 1 19.938 11H22v2h-2.062zM12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12zm0-3a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" fill={color} fillRule="nonzero"/>
|
||||
</svg>
|
||||
}
|
||||
{type === 'help'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<path d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8s-8-3.589-8-8s3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 0 0-8 0h2c0-1.103.897-2 2-2s2 .897 2 2s-.897 2-2 2a1 1 0 0 0-1 1v2h2v-1.141A3.991 3.991 0 0 0 16 10zm-3 6h-2v2h2v-2z" fill={color} />
|
||||
</svg>
|
||||
}
|
||||
{type === 'date'
|
||||
&& <svg {...xmlnsProps} width={size} viewBox="0 0 24 24">
|
||||
<path d="M22 2.25h-3.25V.75a.75.75 0 0 0-1.5-.001V2.25h-4.5V.75a.75.75 0 0 0-1.5-.001V2.25h-4.5V.75a.75.75 0 0 0-1.5-.001V2.25H2a2 2 0 0 0-2 1.999v17.75a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V4.249a2 2 0 0 0-2-1.999zM22.5 22a.5.5 0 0 1-.499.5H2a.5.5 0 0 1-.5-.5V4.25a.5.5 0 0 1 .5-.499h3.25v1.5a.75.75 0 0 0 1.5.001V3.751h4.5v1.5a.75.75 0 0 0 1.5.001V3.751h4.5v1.5a.75.75 0 0 0 1.5.001V3.751H22a.5.5 0 0 1 .499.499z" fill={color} />
|
||||
<path d="M5.25 9h3v2.25h-3z" fill={color} />
|
||||
<path d="M5.25 12.75h3V15h-3z" fill={color} />
|
||||
<path d="M5.25 16.5h3v2.25h-3z" fill={color} />
|
||||
<path d="M10.5 16.5h3v2.25h-3z" fill={color} />
|
||||
<path d="M10.5 12.75h3V15h-3z" fill={color} />
|
||||
<path d="M10.5 9h3v2.25h-3z" fill={color} />
|
||||
<path d="M15.75 16.5h3v2.25h-3z" fill={color} />
|
||||
<path d="M15.75 12.75h3V15h-3z" fill={color} />
|
||||
<path d="M15.75 9h3v2.25h-3z" fill={color} />
|
||||
</svg>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -71,7 +71,7 @@ const SelectField = (props: SelectFieldProps) => {
|
||||
className={`selected flex border ${rounded} p-1.5 px-4 cursor-pointer select-none w-[180px] min-w-[${minWidth}px]
|
||||
${showOptions ? 'border-indigo-200' : ''}`}
|
||||
onClick={() => setShowOptions(!showOptions)}>
|
||||
<span className={`w-[${minWidth - 30}px] inline-block truncate mr-2`}>
|
||||
<span className={`w-[${minWidth - 30}px] inline-block truncate mr-2 capitalize`}>
|
||||
{selected.length > 0 ? (selectedLabels.slice(0, 2).join(', ')) : defaultLabel}
|
||||
</span>
|
||||
{multiple && selected.length > 2
|
||||
@@ -99,7 +99,7 @@ const SelectField = (props: SelectFieldProps) => {
|
||||
return (
|
||||
<li
|
||||
key={opt.value}
|
||||
className={`select-none cursor-pointer px-3 py-2 hover:bg-[#FCFCFF]
|
||||
className={`select-none cursor-pointer px-3 py-2 hover:bg-[#FCFCFF] capitalize
|
||||
${itemActive ? ' bg-indigo-50 text-indigo-600 hover:bg-indigo-50' : ''} `}
|
||||
onClick={() => selectItem(opt)}
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
|
||||
import Icon from './Icon';
|
||||
|
||||
type SidebarProps = {
|
||||
domains: Domain[],
|
||||
domains: DomainType[],
|
||||
showAddModal: Function
|
||||
}
|
||||
|
||||
@@ -23,8 +23,9 @@ const Sidebar = ({ domains, showAddModal } : SidebarProps) => {
|
||||
className={'my-2.5 leading-10'}>
|
||||
<Link href={`/domain/${d.slug}`} passHref={true}>
|
||||
<a className={`block cursor-pointer px-4 text-ellipsis max-w-[215px] overflow-hidden whitespace-nowrap rounded
|
||||
rounded-r-none
|
||||
${(`/domain/${d.slug}` === router.asPath ? 'bg-white text-zinc-800 border border-r-0' : 'text-zinc-500')}`}>
|
||||
rounded-r-none ${((`/domain/${d.slug}` === router.asPath || `/domain/console/${d.slug}` === router.asPath
|
||||
|| `/domain/insight/${d.slug}` === router.asPath)
|
||||
? 'bg-white text-zinc-800 border border-r-0' : 'text-zinc-500')}`}>
|
||||
<i className={'text-center leading-4 mr-2 inline-block rounded-full w-5 h-5 bg-orange-200 not-italic'}>
|
||||
{d.domain.charAt(0)}
|
||||
</i>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
@@ -11,6 +12,7 @@ type TopbarProps = {
|
||||
const TopBar = ({ showSettings, showAddModal }:TopbarProps) => {
|
||||
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
const isDomainsPage = router.pathname === '/domains';
|
||||
|
||||
const logoutUser = async () => {
|
||||
try {
|
||||
@@ -28,12 +30,21 @@ const TopBar = ({ showSettings, showAddModal }:TopbarProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="topbar flex w-full max-w-7xl mx-auto justify-between lg:justify-end bg-white lg:bg-transparent">
|
||||
<div className={`topbar flex w-full mx-auto justify-between
|
||||
${isDomainsPage ? 'max-w-5xl lg:justify-between' : 'max-w-7xl lg:justify-end'} bg-white lg:bg-transparent`}>
|
||||
|
||||
<h3 className="p-4 text-base font-bold text-blue-700 lg:hidden">
|
||||
<h3 className={`p-4 text-base font-bold text-blue-700 ${isDomainsPage ? 'lg:pl-0' : 'lg:hidden'}`}>
|
||||
<span className=' relative top-[3px] mr-1'><Icon type="logo" size={24} color="#364AFF" /></span> SerpBear
|
||||
<button className='px-3 py-1 font-bold text-blue-700 lg:hidden ml-3 text-lg' onClick={() => showAddModal()}>+</button>
|
||||
</h3>
|
||||
{!isDomainsPage && (
|
||||
<Link href={'/domains'} passHref={true}>
|
||||
<a className=' right-14 top-2 px-2 py-1 cursor-pointer bg-[#ecf2ff] hover:bg-indigo-100 transition-all
|
||||
absolute lg:top-3 lg:right-auto lg:left-8 lg:px-3 lg:py-2 rounded-full'>
|
||||
<Icon type="caret-left" size={16} title="Go Back" />
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
<div className="topbar__right">
|
||||
<button className={' lg:hidden p-3'} onClick={() => setShowMobileMenu(!showMobileMenu)}>
|
||||
<Icon type="hamburger" size={24} />
|
||||
|
||||
@@ -1,32 +1,40 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRefreshKeywords } from '../../services/keywords';
|
||||
import Icon from '../common/Icon';
|
||||
import SelectField from '../common/SelectField';
|
||||
|
||||
type DomainHeaderProps = {
|
||||
domain: Domain,
|
||||
domains: Domain[],
|
||||
domain: DomainType,
|
||||
domains: DomainType[],
|
||||
showAddModal: Function,
|
||||
showSettingsModal: Function,
|
||||
exportCsv:Function
|
||||
exportCsv:Function,
|
||||
scFilter?: string
|
||||
setScFilter?: Function
|
||||
}
|
||||
|
||||
const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, domains }: DomainHeaderProps) => {
|
||||
const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, domains, scFilter = 'thirtyDays', setScFilter }: DomainHeaderProps) => {
|
||||
const router = useRouter();
|
||||
const [showOptions, setShowOptions] = useState<boolean>(false);
|
||||
|
||||
const [ShowSCDates, setShowSCDates] = useState<boolean>(false);
|
||||
const { mutate: refreshMutate } = useRefreshKeywords(() => {});
|
||||
const isConsole = router.pathname === '/domain/console/[slug]';
|
||||
const isInsight = router.pathname === '/domain/insight/[slug]';
|
||||
|
||||
const daysName = (dayKey:string) => dayKey.replace('three', '3').replace('seven', '7').replace('thirty', '30').replace('Days', ' Days');
|
||||
const buttonStyle = 'leading-6 inline-block px-2 py-2 text-gray-500 hover:text-gray-700';
|
||||
const buttonLabelStyle = 'ml-2 text-sm not-italic lg:invisible lg:opacity-0';
|
||||
const tabStyle = 'rounded rounded-b-none cursor-pointer border-[#e9ebff] border-b-0';
|
||||
const scDataFilterStlye = 'px-3 py-2 block w-full';
|
||||
return (
|
||||
<div className='domain_kewywords_head flex w-full justify-between'>
|
||||
<div className='domain_kewywords_head w-full '>
|
||||
<div>
|
||||
<h1 className="hidden lg:block text-xl font-bold my-3" data-testid="domain-header">
|
||||
{domain && domain.domain && <><i className=' capitalize font-bold not-italic'>{domain.domain.charAt(0)}</i>{domain.domain.slice(1)}</>}
|
||||
</h1>
|
||||
<div className='bg-white mt-2 lg:hidden'>
|
||||
<div className='domain_selector bg-white mt-2 lg:hidden'>
|
||||
<SelectField
|
||||
options={domains && domains.length > 0 ? domains.map((d) => { return { label: d.domain, value: d.slug }; }) : []}
|
||||
selected={[domain.slug]}
|
||||
@@ -37,43 +45,99 @@ const DomainHeader = ({ domain, showAddModal, showSettingsModal, exportCsv, doma
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex my-3'>
|
||||
<button className={`${buttonStyle} lg:hidden`} onClick={() => setShowOptions(!showOptions)}>
|
||||
<div className='flex w-full justify-between'>
|
||||
<ul className=' flex items-end text-sm relative top-[2px]'>
|
||||
<li className={`${tabStyle} ${router.pathname === '/domain/[slug]' ? 'bg-white border border-b-0 font-semibold' : ''}`}>
|
||||
<Link href={`/domain/${domain.slug}`} passHref={true}>
|
||||
<a className='px-4 py-2 inline-block'><Icon type="tracking" color='#999' classes='hidden lg:inline-block' />
|
||||
<span className='text-xs lg:text-sm lg:ml-2'>Tracking</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`${tabStyle} ${router.pathname === '/domain/console/[slug]' ? 'bg-white border border-b-0 font-semibold' : ''}`}>
|
||||
<Link href={`/domain/console/${domain.slug}`} passHref={true}>
|
||||
<a className='px-4 py-2 inline-block'><Icon type="google" size={13} classes='hidden lg:inline-block' />
|
||||
<span className='text-xs lg:text-sm lg:ml-2'>Discover</span>
|
||||
<Icon type='help' size={14} color="#aaa" classes="ml-2 hidden lg:inline-block" title='Discover Keywords you already Rank For' />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`${tabStyle} ${router.pathname === '/domain/insight/[slug]' ? 'bg-white border border-b-0 font-semibold' : ''}`}>
|
||||
<Link href={`/domain/insight/${domain.slug}`} passHref={true}>
|
||||
<a className='px-4 py-2 inline-block'><Icon type="google" size={13} classes='hidden lg:inline-block' />
|
||||
<span className='text-xs lg:text-sm lg:ml-2'>Insight</span>
|
||||
<Icon type='help' size={14} color="#aaa" classes="ml-2 hidden lg:inline-block" title='Insight for Google Search Console Data' />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className={'flex mt-3 mb-0 lg:mb-3'}>
|
||||
{!isInsight && <button className={`${buttonStyle} lg:hidden`} onClick={() => setShowOptions(!showOptions)}>
|
||||
<Icon type='dots' size={20} />
|
||||
</button>
|
||||
}
|
||||
{isInsight && <button className={`${buttonStyle} lg:hidden invisible`}>x</button>}
|
||||
<div
|
||||
className={`hidden w-40 ml-[-70px] lg:block absolute mt-10 bg-white border border-gray-100 z-40 rounded
|
||||
lg:z-auto lg:relative lg:mt-0 lg:border-0 lg:w-auto lg:bg-transparent`}
|
||||
style={{ display: showOptions ? 'block' : undefined }}>
|
||||
<button
|
||||
className={`domheader_action_button relative ${buttonStyle}`}
|
||||
aria-pressed="false"
|
||||
onClick={() => exportCsv()}>
|
||||
<Icon type='download' size={20} /><i className={`${buttonLabelStyle}`}>Export as csv</i>
|
||||
</button>
|
||||
<button
|
||||
className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
|
||||
aria-pressed="false"
|
||||
onClick={() => refreshMutate({ ids: [], domain: domain.domain })}>
|
||||
<Icon type='reload' size={14} /><i className={`${buttonLabelStyle}`}>Reload All Serps</i>
|
||||
</button>
|
||||
{!isInsight && (
|
||||
<button
|
||||
className={`domheader_action_button relative ${buttonStyle}`}
|
||||
aria-pressed="false"
|
||||
onClick={() => exportCsv()}>
|
||||
<Icon type='download' size={20} /><i className={`${buttonLabelStyle}`}>Export as csv</i>
|
||||
</button>
|
||||
)}
|
||||
{!isConsole && !isInsight && (
|
||||
<button
|
||||
className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
|
||||
aria-pressed="false"
|
||||
onClick={() => refreshMutate({ ids: [], domain: domain.domain })}>
|
||||
<Icon type='reload' size={14} /><i className={`${buttonLabelStyle}`}>Reload All Serps</i>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
data-testid="show_domain_settings"
|
||||
className={`domheader_action_button relative ${buttonStyle} lg:ml-3`}
|
||||
aria-pressed="false"
|
||||
onClick={() => showSettingsModal(true)}><Icon type='settings' size={20} />
|
||||
<i className={`${buttonLabelStyle}`}>Domain Settings</i></button>
|
||||
<i className={`${buttonLabelStyle}`}>Domain Settings</i>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
data-testid="add_keyword"
|
||||
className={'ml-2 inline-block px-4 py-2 text-blue-700 font-bold text-sm'}
|
||||
onClick={() => showAddModal(true)}>
|
||||
<span
|
||||
className='text-center leading-4 mr-2 inline-block rounded-full w-7 h-7 pt-1 bg-blue-700 text-white font-bold text-lg'>+</span>
|
||||
<i className=' not-italic hidden lg:inline-block'>Add Keyword</i>
|
||||
</button>
|
||||
{!isConsole && !isInsight && (
|
||||
<button
|
||||
data-testid="add_keyword"
|
||||
className={'ml-2 inline-block px-4 py-2 text-blue-700 font-bold text-sm'}
|
||||
onClick={() => showAddModal(true)}>
|
||||
<span
|
||||
className='text-center leading-4 mr-2 inline-block rounded-full w-7 h-7 pt-1 bg-blue-700 text-white font-bold text-lg'>+</span>
|
||||
<i className=' not-italic hidden lg:inline-block'>Add Keyword</i>
|
||||
</button>
|
||||
)}
|
||||
{isConsole && (
|
||||
<div className='text-xs pl-4 ml-2 border-l border-gray-200 relative'>
|
||||
{/* <span className='hidden lg:inline-block'>Data From Last: </span> */}
|
||||
<span className='block cursor-pointer py-3' onClick={() => setShowSCDates(!ShowSCDates)}>
|
||||
<Icon type='date' size={13} classes="mr-1" /> {daysName(scFilter)}
|
||||
</span>
|
||||
{ShowSCDates && (
|
||||
<div className='absolute w-24 z-50 mt-0 right-0 bg-white border border-gray-200 rounded text-center'>
|
||||
{['threeDays', 'sevenDays', 'thirtyDays'].map((itemKey) => {
|
||||
return <button
|
||||
key={itemKey}
|
||||
className={`${scDataFilterStlye} ${scFilter === itemKey ? ' bg-indigo-100 text-indigo-600' : ''}`}
|
||||
onClick={() => { setShowSCDates(false); if (setScFilter) setScFilter(itemKey); }}
|
||||
>Last {daysName(itemKey)}
|
||||
</button>;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
76
components/domains/DomainItem.tsx
Normal file
76
components/domains/DomainItem.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
// import { useRouter } from 'next/router';
|
||||
// import { useState } from 'react';
|
||||
import TimeAgo from 'react-timeago';
|
||||
import dayjs from 'dayjs';
|
||||
import Link from 'next/link';
|
||||
import Icon from '../common/Icon';
|
||||
|
||||
type DomainItemProps = {
|
||||
domain: DomainType,
|
||||
selected: boolean,
|
||||
isConsoleIntegrated: boolean,
|
||||
thumb: string,
|
||||
}
|
||||
|
||||
const DomainItem = ({ domain, selected, isConsoleIntegrated = false, thumb }: DomainItemProps) => {
|
||||
const { keywordsUpdated, slug, keywordCount = 0, avgPosition = 0, scVisits = 0, scImpressions = 0, scPosition = 0 } = domain;
|
||||
// const router = useRouter();
|
||||
return (
|
||||
<div className={`domItem bg-white border rounded w-full text-sm mb-10 hover:border-indigo-200 ${selected ? '' : ''}`}>
|
||||
<Link href={`/domain/${slug}`} passHref={true}>
|
||||
<a className='flex flex-col lg:flex-row'>
|
||||
<div className={`flex-1 p-6 flex ${!isConsoleIntegrated ? 'basis-1/3' : ''}`}>
|
||||
<div className="domain_thumb w-20 h-20 mr-6 bg-slate-100 rounded border border-gray-200 overflow-hidden">
|
||||
{thumb && <img src={thumb} alt={domain.domain} />}
|
||||
</div>
|
||||
<div className="domain_details flex-1">
|
||||
<h3 className='font-semibold text-base mb-2'>{domain.domain}</h3>
|
||||
{keywordsUpdated && (
|
||||
<span className=' text-gray-600 text-xs'>
|
||||
Updated <TimeAgo title={dayjs(keywordsUpdated).format('DD-MMM-YYYY, hh:mm:ss A')} date={keywordsUpdated} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 flex flex-col p-4'>
|
||||
<div className=' bg-indigo-50 p-1 px-2 text-xs rounded-full absolute ml-3 mt-[-8px]'>
|
||||
<Icon type="tracking" size={13} color="#364aff" /> Tracker
|
||||
</div>
|
||||
<div className='dom_stats flex flex-1 font-semibold text-2xl p-4 pt-5 rounded border border-[#E9EBFF] text-center'>
|
||||
<div className="flex-1 relative">
|
||||
<span className='block text-xs lg:text-sm text-gray-500 mb-1'>Keywords</span>{keywordCount}
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<span className='block text-xs lg:text-sm text-gray-500 mb-1'>Avg position</span>{avgPosition}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isConsoleIntegrated && (
|
||||
<div className='flex-1 flex-col p-4 lg:basis-56'>
|
||||
<div className=' bg-indigo-50 p-1 px-2 text-xs rounded-full absolute ml-3 mt-[-8px]'>
|
||||
<Icon type="google" size={13} /> Search Console (7d)
|
||||
</div>
|
||||
<div className='dom_sc_stats flex flex-1 h-full font-semibold text-2xl p-4 pt-5 rounded border border-[#E9EBFF] text-center'>
|
||||
<div className="flex-1 relative">
|
||||
<span className='block text-xs lg:text-sm text-gray-500 mb-1'>Visits</span>
|
||||
{new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(scVisits).replace('T', 'K')}
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<span className='block text-xs lg:text-sm text-gray-500 mb-1'>Impressions</span>
|
||||
{new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(scImpressions).replace('T', 'K')}
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<span className='block text-xs lg:text-sm text-gray-500 mb-1'>Avg position</span>
|
||||
{scPosition}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DomainItem;
|
||||
@@ -5,8 +5,7 @@ import Modal from '../common/Modal';
|
||||
import { useDeleteDomain, useUpdateDomain } from '../../services/domains';
|
||||
|
||||
type DomainSettingsProps = {
|
||||
domain:Domain|false,
|
||||
domains: Domain[],
|
||||
domain:DomainType|false,
|
||||
closeModal: Function
|
||||
}
|
||||
|
||||
@@ -15,7 +14,7 @@ type DomainSettingsError = {
|
||||
msg: string,
|
||||
}
|
||||
|
||||
const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) => {
|
||||
const DomainSettings = ({ domain, closeModal }: DomainSettingsProps) => {
|
||||
const router = useRouter();
|
||||
const [showRemoveDomain, setShowRemoveDomain] = useState<boolean>(false);
|
||||
const [settingsError, setSettingsError] = useState<DomainSettingsError>({ type: '', msg: '' });
|
||||
@@ -24,10 +23,7 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
|
||||
const { mutate: updateMutate } = useUpdateDomain(() => closeModal(false));
|
||||
const { mutate: deleteMutate } = useDeleteDomain(() => {
|
||||
closeModal(false);
|
||||
const fitleredDomains = domain && domains.filter((d:Domain) => d.domain !== domain.domain);
|
||||
if (fitleredDomains && fitleredDomains[0] && fitleredDomains[0].slug) {
|
||||
router.push(`/domain/${fitleredDomains[0].slug}`);
|
||||
}
|
||||
router.push('/domains');
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
132
components/insight/Insight.tsx
Normal file
132
components/insight/Insight.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { sortInsightItems } from '../../utils/insight';
|
||||
import SelectField from '../common/SelectField';
|
||||
import InsightItem from './InsightItem';
|
||||
import InsightStats from './InsightStats';
|
||||
|
||||
type SCInsightProps = {
|
||||
domain: DomainType | null,
|
||||
insight: InsightDataType,
|
||||
isLoading: boolean,
|
||||
isConsoleIntegrated: boolean,
|
||||
}
|
||||
|
||||
const SCInsight = ({ insight, isLoading = true, isConsoleIntegrated = true }: SCInsightProps) => {
|
||||
const [activeTab, setActiveTab] = useState<string>('stats');
|
||||
|
||||
const insightItems = insight[activeTab as keyof InsightDataType];
|
||||
const startDate = insight && insight.stats && insight.stats.length > 0 ? new Date(insight.stats[0].date) : null;
|
||||
const endDate = insight && insight.stats && insight.stats.length > 0 ? new Date(insight.stats[insight.stats.length - 1].date) : null;
|
||||
|
||||
const switchTab = (tab: string) => {
|
||||
// window.insightTab = tab;
|
||||
setActiveTab(tab);
|
||||
};
|
||||
|
||||
const renderTableHeader = () => {
|
||||
const headerNames: {[key:string]: string[]} = {
|
||||
stats: ['Date', 'Avg Position', 'Visits', 'Impressions', 'CTR'],
|
||||
keywords: ['Keyword', 'Avg Position', 'Visits ↑', 'Impressions', 'CTR', 'Countries'],
|
||||
countries: ['Country', 'Avg Position', 'Visits ↑', 'Impressions', 'CTR', 'Keywords'],
|
||||
pages: ['Page', 'Avg Position', 'Visits ↑', 'Impressions', 'CTR', 'Countries', 'Keywords'],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`domKeywords_head hidden lg:flex p-3 px-6 bg-[#FCFCFF]
|
||||
text-gray-600 justify-between items-center font-semibold border-y`}>
|
||||
<span className='domKeywords_head_keyword flex-1 basis-20 w-auto '>{headerNames[activeTab][0]}</span>
|
||||
<span className='domKeywords_head_position flex-1 basis-40 grow-0 text-center'>{headerNames[activeTab][1]}</span>
|
||||
<span className='domKeywords_head_imp flex-1 text-center'>{headerNames[activeTab][2]}</span>
|
||||
<span className='domKeywords_head_visits flex-1 text-center'>{headerNames[activeTab][3]}</span>
|
||||
<span className='domKeywords_head_ctr flex-1 text-center'>{headerNames[activeTab][4]}</span>
|
||||
{headerNames[activeTab][5] && <span className='domKeywords_head_ctr flex-1 text-center'>{headerNames[activeTab][5]}</span>}
|
||||
{headerNames[activeTab][6] && <span className='domKeywords_head_ctr flex-1 text-center'>{headerNames[activeTab][6]}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const deviceTabStyle = 'select-none cursor-pointer px-3 py-2 rounded-3xl mr-2';
|
||||
const deviceTabCountStyle = 'px-2 py-0 rounded-3xl bg-[#DEE1FC] text-[0.7rem] font-bold ml-1';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='domKeywords flex flex-col bg-[white] rounded-md text-sm border mb-8'>
|
||||
<div className='domKeywords_filters py-4 px-6 flex flex-col justify-between
|
||||
text-sm text-gray-500 font-semibold border-b-[1px] lg:border-0 lg:flex-row'>
|
||||
<div>
|
||||
<ul className='text-xs hidden lg:flex'>
|
||||
{['stats', 'keywords', 'countries', 'pages'].map((tabItem) => {
|
||||
const tabInsightItem = insight[tabItem as keyof InsightDataType];
|
||||
return <li
|
||||
key={`tab-${tabItem}`}
|
||||
className={`${deviceTabStyle} ${activeTab === tabItem ? ' bg-[#F8F9FF] text-gray-700' : ''}`}
|
||||
onClick={() => switchTab(tabItem)}>
|
||||
<i className='hidden not-italic lg:inline-block ml-1 capitalize'>{tabItem}</i>
|
||||
{tabItem !== 'stats' && (
|
||||
<span className={`${deviceTabCountStyle}`}>
|
||||
{tabInsightItem && tabInsightItem.length ? tabInsightItem.length : 0}
|
||||
</span>
|
||||
)}
|
||||
</li>;
|
||||
})}
|
||||
</ul>
|
||||
<div className='insight_selector lg:hidden'>
|
||||
<SelectField
|
||||
options={['stats', 'keywords', 'countries', 'pages'].map((d) => { return { label: d, value: d }; })}
|
||||
selected={[activeTab]}
|
||||
defaultLabel="Select Tab"
|
||||
updateField={(updatedTab:[string]) => switchTab(updatedTab[0])}
|
||||
multiple={false}
|
||||
rounded={'rounded'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isConsoleIntegrated && (<div className='py-2 text-xs text-center mt-2 lg:text-sm lg:mt-0'>
|
||||
{startDate && new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(startDate))}
|
||||
<span className='px-2 inline-block'>-</span>
|
||||
{endDate && new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(endDate))}
|
||||
<span className='ml-2'>(Last 30 Days)</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isConsoleIntegrated && activeTab === 'stats' && (
|
||||
<InsightStats
|
||||
stats={insight?.stats ? insight.stats : []}
|
||||
totalKeywords={insight?.keywords?.length || 0}
|
||||
totalCountries={insight?.countries?.length || 0}
|
||||
totalPages={insight?.pages?.length || 0}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='domkeywordsTable domkeywordsTable--sckeywords styled-scrollbar w-full overflow-auto min-h-[60vh]'>
|
||||
<div className=' lg:min-w-[800px]'>
|
||||
{renderTableHeader()}
|
||||
<div className='domKeywords_keywords border-gray-200 min-h-[55vh] relative'>
|
||||
{['keywords', 'pages', 'countries', 'stats'].includes(activeTab) && insight && insightItems
|
||||
&& (activeTab === 'stats' ? [...insightItems].reverse() : sortInsightItems(insightItems)).map(
|
||||
(item:SCInsightItem, index: number) => {
|
||||
const insightItemCount = insight ? insightItems : [];
|
||||
const lastItem = !!(insightItemCount && (index === insightItemCount.length));
|
||||
return <InsightItem key={index} item={item} type={activeTab} lastItem={lastItem} />;
|
||||
},
|
||||
)
|
||||
}
|
||||
{isConsoleIntegrated && isLoading && (
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>Loading Insight...</p>
|
||||
)}
|
||||
{!isConsoleIntegrated && (
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>
|
||||
Goolge Search has not been Integrated yet. Please follow <a className='text-indigo-600 underline' href='https://docs.serpbear.com/miscellaneous/integrate-google-search-console' target="_blank" rel='noreferrer'>These Steps</a> to integrate Google Search Data for this Domain.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Toaster position='bottom-center' containerClassName="react_toaster" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SCInsight;
|
||||
69
components/insight/InsightItem.tsx
Normal file
69
components/insight/InsightItem.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import countries from '../../utils/countries';
|
||||
import Icon from '../common/Icon';
|
||||
|
||||
type InsightItemProps = {
|
||||
item: SCInsightItem,
|
||||
lastItem: boolean,
|
||||
type: string
|
||||
}
|
||||
|
||||
const InsightItem = ({ item, lastItem, type }:InsightItemProps) => {
|
||||
const { clicks, impressions, ctr, position, country = 'zzz', keyword, page, keywords = 0, countries: cntrs = 0, date } = item;
|
||||
let firstItem = keyword;
|
||||
if (type === 'pages') { firstItem = page; } if (type === 'stats') {
|
||||
firstItem = date && new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(date));
|
||||
}
|
||||
if (type === 'countries') { firstItem = countries[country] && countries[country][0]; }
|
||||
const formattedNum = (num:number) => new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(num);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`keyword relative py-5 px-4 text-gray-600 border-b-[1px] border-gray-200 lg:py-4 lg:px-6 lg:border-0
|
||||
lg:flex lg:justify-between lg:items-center ${lastItem ? 'border-b-0' : ''}`}>
|
||||
|
||||
<div className=' w-3/4 lg:flex-1 lg:basis-20 lg:w-auto font-semibold'>
|
||||
{type === 'countries' && <span className={`fflag fflag-${country} w-[18px] h-[12px] mr-2`} />}
|
||||
{firstItem}
|
||||
</div>
|
||||
|
||||
<div className='keyword_pos text-center inline-block mr-3 lg:mr-0 lg:flex-1'>
|
||||
<span className='mr-1 lg:hidden'>
|
||||
<Icon type="tracking" size={14} color="#999" />
|
||||
</span>
|
||||
{Math.round(position)}
|
||||
</div>
|
||||
|
||||
{/* <div className='keyword_imp text-center inline-block lg:flex-1'>{formattedNum(clicks)}</div> */}
|
||||
<div className={`keyword_position absolute bg-[#f8f9ff] w-fit min-w-[50px] h-14 p-2 text-base mt-[-55px] rounded right-5 lg:relative
|
||||
lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-40 lg:grow-0 lg:right-0 text-center font-semibold`}>
|
||||
{formattedNum(clicks)}
|
||||
<span className='block text-xs text-gray-500 lg:hidden'>Visits</span>
|
||||
</div>
|
||||
|
||||
<div className='keyword_imp text-center inline-block mr-3 lg:mr-0 lg:flex-1'>
|
||||
<span className='mr-1 lg:hidden'>
|
||||
<Icon type="eye" size={14} color="#999" />
|
||||
</span>
|
||||
{formattedNum(impressions)}
|
||||
</div>
|
||||
|
||||
<div className='keyword_ctr text-center inline-block mt-4 relative mr-3 lg:mr-0 lg:flex-1 lg:m-0 '>
|
||||
<span className='mr-1 lg:hidden'>
|
||||
<Icon type="target" size={14} color="#999" />
|
||||
</span>
|
||||
{new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(ctr)}%
|
||||
</div>
|
||||
|
||||
{(type === 'pages' || type === 'keywords') && (
|
||||
<div className='keyword_imp text-center hidden lg:inline-block lg:flex-1'>{formattedNum(cntrs)}</div>
|
||||
)}
|
||||
|
||||
{(type === 'countries' || type === 'pages') && (
|
||||
<div className='keyword_imp text-center hidden lg:inline-block lg:flex-1'>{formattedNum(keywords)}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InsightItem;
|
||||
123
components/insight/InsightStats.tsx
Normal file
123
components/insight/InsightStats.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
|
||||
import { Line } from 'react-chartjs-2';
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
|
||||
|
||||
type InsightStatsProps = {
|
||||
stats: SearchAnalyticsStat[],
|
||||
totalKeywords: number,
|
||||
totalCountries: number,
|
||||
totalPages: number,
|
||||
}
|
||||
|
||||
const InsightStats = ({ stats = [], totalKeywords = 0, totalPages = 0 }:InsightStatsProps) => {
|
||||
const formattedNum = (num:number) => new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(num);
|
||||
const [totalStat, setTotalStat] = useState({ impressions: 0, clicks: 0, ctr: 0, position: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
if (stats.length > 0) {
|
||||
const totalStats = stats.reduce((acc, item) => {
|
||||
return {
|
||||
impressions: item.impressions + acc.impressions,
|
||||
clicks: item.clicks + acc.clicks,
|
||||
ctr: item.ctr + acc.ctr,
|
||||
position: item.position + acc.position,
|
||||
};
|
||||
}, { impressions: 0, clicks: 0, ctr: 0, position: 0 });
|
||||
setTotalStat(totalStats);
|
||||
}
|
||||
}, [stats]);
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const chartSeries: {[key:string]: number[]} = { clicks: [], impressions: [], position: [], ctr: [] };
|
||||
stats.forEach((item) => {
|
||||
chartSeries.clicks.push(item.clicks);
|
||||
chartSeries.impressions.push(item.impressions);
|
||||
chartSeries.position.push(item.position);
|
||||
chartSeries.ctr.push(item.ctr);
|
||||
});
|
||||
return {
|
||||
labels: stats && stats.length > 0 ? stats.map((item) => `${new Date(item.date).getDate()}-${months[new Date(item.date).getMonth()]}`) : [],
|
||||
series: chartSeries };
|
||||
}, [stats]);
|
||||
|
||||
const renderChart = () => {
|
||||
// Doc: https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false as const,
|
||||
interaction: {
|
||||
mode: 'index' as const,
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y1: {
|
||||
display: true,
|
||||
position: 'right' as const,
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
const { clicks, impressions } = chartData.series || {};
|
||||
const dataSet = [
|
||||
{ label: 'Visits', data: clicks, borderColor: 'rgb(117, 50, 205)', backgroundColor: 'rgba(117, 50, 205, 0.5)', yAxisID: 'y' },
|
||||
{ label: 'Impressions', data: impressions, borderColor: 'rgb(31, 205, 176)', backgroundColor: 'rgba(31, 205, 176, 0.5)', yAxisID: 'y1' },
|
||||
];
|
||||
return <Line datasetIdKey={'xxx'} options={chartOptions} data={{ labels: chartData.labels, datasets: dataSet }} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='p-6 lg:border-t lg:border-gray-200'>
|
||||
<div className=' flex font-bold flex-wrap lg:flex-nowrap'>
|
||||
<div
|
||||
className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-violet-700 mr-5'
|
||||
title={`${formattedNum(totalStat.clicks || 0)} Visits`}>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Visits</span>
|
||||
{new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(totalStat.clicks || 0).replace('T', 'K')}
|
||||
</div>
|
||||
<div
|
||||
className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-[#1fcdb0] lg:mr-5'
|
||||
title={`${formattedNum(totalStat.impressions || 0)} Impressions`}>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Impressions</span>
|
||||
{new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(totalStat.impressions || 0).replace('T', 'K')}
|
||||
</div>
|
||||
<div className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-gray-500 font-semibold mr-5'>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Avg Position</span>
|
||||
{(totalStat.position ? Math.round(totalStat.position / stats.length) : 0)}
|
||||
</div>
|
||||
<div className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-gray-500 font-semibold lg:mr-5'>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Avg CTR</span>
|
||||
{new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(totalStat.ctr || 0)}%
|
||||
</div>
|
||||
<div className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-gray-500 font-semibold mr-5'>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Keywords</span>
|
||||
{formattedNum(totalKeywords)}
|
||||
</div>
|
||||
<div className='flex-1 border border-gray-200 px-6 py-5 rounded mb-4 text-2xl text-gray-500 font-semibold'>
|
||||
<span className=' block text-sm font-normal text-gray-500'>Pages</span>
|
||||
{formattedNum(totalPages)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-80'>
|
||||
{renderChart()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InsightStats;
|
||||
@@ -34,7 +34,9 @@ const AddKeywords = ({ closeModal, domain, keywords }: AddKeywordsProps) => {
|
||||
setError(`Keywords ${keywordExist.join(',')} already Exist`);
|
||||
setTimeout(() => { setError(''); }, 3000);
|
||||
} else {
|
||||
addMutate({ ...newKeywordsData, keywords: keywordsArray.join('\n') });
|
||||
const { device, country, domain: kDomain, tags } = newKeywordsData;
|
||||
const newKeywordsArray = keywordsArray.map((nItem) => ({ keyword: nItem, device, country, domain: kDomain, tags }));
|
||||
addMutate(newKeywordsArray);
|
||||
}
|
||||
} else {
|
||||
setError('Please Insert a Keyword');
|
||||
|
||||
60
components/keywords/AddTags.tsx
Normal file
60
components/keywords/AddTags.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useState } from 'react';
|
||||
import { useUpdateKeywordTags } from '../../services/keywords';
|
||||
import Icon from '../common/Icon';
|
||||
import Modal from '../common/Modal';
|
||||
|
||||
type AddTagsProps = {
|
||||
keywords: KeywordType[],
|
||||
closeModal: Function
|
||||
}
|
||||
|
||||
const AddTags = ({ keywords = [], closeModal }: AddTagsProps) => {
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [inputError, setInputError] = useState('');
|
||||
const { mutate: updateMutate } = useUpdateKeywordTags(() => { setTagInput(''); });
|
||||
|
||||
const addTag = () => {
|
||||
if (keywords.length === 0) { return; }
|
||||
if (!tagInput) {
|
||||
setInputError('Please Insert a Tag!');
|
||||
setTimeout(() => { setInputError(''); }, 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
const tagsArray = tagInput.split(',').map((t) => t.trim());
|
||||
const tagsPayload:any = {};
|
||||
keywords.forEach((keyword:KeywordType) => {
|
||||
tagsPayload[keyword.ID] = [...keyword.tags, ...tagsArray];
|
||||
});
|
||||
updateMutate({ tags: tagsPayload });
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal closeModal={() => { closeModal(false); }} title={`Add New Tags to ${keywords.length} Selected Keyword`}>
|
||||
<div className="relative">
|
||||
{inputError && <span className="absolute top-[-24px] text-red-400 text-sm font-semibold">{inputError}</span>}
|
||||
<span className='absolute text-gray-400 top-3 left-2'><Icon type="tags" size={16} /></span>
|
||||
<input
|
||||
className='w-full border rounded border-gray-200 py-3 px-4 pl-8 outline-none focus:border-indigo-300'
|
||||
placeholder='Insert Tags. eg: tag1, tag2'
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.code === 'Enter') {
|
||||
e.preventDefault();
|
||||
addTag();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className=" absolute right-2 top-2 cursor-pointer rounded p-2 px-4 bg-indigo-600 text-white font-semibold text-sm"
|
||||
onClick={addTag}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default AddTags;
|
||||
@@ -15,11 +15,25 @@ type KeywordProps = {
|
||||
selectKeyword: Function,
|
||||
manageTags: Function,
|
||||
showKeywordDetails: Function,
|
||||
lastItem?:boolean
|
||||
lastItem?:boolean,
|
||||
showSCData: boolean,
|
||||
scDataType: string,
|
||||
}
|
||||
|
||||
const Keyword = (props: KeywordProps) => {
|
||||
const { keywordData, refreshkeyword, favoriteKeyword, removeKeyword, selectKeyword, selected, showKeywordDetails, manageTags, lastItem } = props;
|
||||
const {
|
||||
keywordData,
|
||||
refreshkeyword,
|
||||
favoriteKeyword,
|
||||
removeKeyword,
|
||||
selectKeyword,
|
||||
selected,
|
||||
showKeywordDetails,
|
||||
manageTags,
|
||||
lastItem,
|
||||
showSCData = true,
|
||||
scDataType = 'threeDays',
|
||||
} = props;
|
||||
const {
|
||||
keyword, domain, ID, position, url = '', lastUpdated, country, sticky, history = {}, updating = false, lastUpdateError = false,
|
||||
} = keywordData;
|
||||
@@ -42,20 +56,23 @@ const Keyword = (props: KeywordProps) => {
|
||||
const historySorted = historyArray.sort((a, b) => a.date - b.date);
|
||||
const previousPos = historySorted[historySorted.length - 2].position;
|
||||
status = previousPos === 0 ? position : previousPos - position;
|
||||
if (position === 0 && previousPos > 0) {
|
||||
status = previousPos - 100;
|
||||
}
|
||||
}
|
||||
return status;
|
||||
}, [history, position]);
|
||||
|
||||
const optionsButtonStyle = 'block px-2 py-2 cursor-pointer hover:bg-indigo-50 hover:text-blue-700';
|
||||
|
||||
const renderPosition = () => {
|
||||
if (position === 0) {
|
||||
const renderPosition = (pos:number, type?:string) => {
|
||||
if (pos === 0) {
|
||||
return <span className='text-gray-400' title='Not in Top 100'>{'>100'}</span>;
|
||||
}
|
||||
if (updating) {
|
||||
if (updating && type !== 'sc') {
|
||||
return <span title='Updating Keyword Position'><Icon type="loading" /></span>;
|
||||
}
|
||||
return position;
|
||||
return pos;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -86,7 +103,7 @@ const Keyword = (props: KeywordProps) => {
|
||||
<div
|
||||
className={`keyword_position absolute bg-[#f8f9ff] w-fit min-w-[50px] h-12 p-2 text-base mt-[-20px] rounded right-5 lg:relative
|
||||
lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-40 lg:grow-0 lg:right-0 text-center font-semibold`}>
|
||||
{renderPosition()}
|
||||
{renderPosition(position)}
|
||||
{!updating && positionChange > 0 && <i className=' not-italic ml-1 text-xs text-[#5ed7c3]'>▲ {positionChange}</i>}
|
||||
{!updating && positionChange < 0 && <i className=' not-italic ml-1 text-xs text-red-300'>▼ {positionChange}</i>}
|
||||
</div>
|
||||
@@ -98,13 +115,34 @@ const Keyword = (props: KeywordProps) => {
|
||||
<div
|
||||
className={`keyword_url inline-block mt-4 mr-5 ml-5 lg:flex-1 text-gray-400 lg:m-0 max-w-[70px]
|
||||
overflow-hidden text-ellipsis whitespace-nowrap lg:max-w-none lg:pr-5`}>
|
||||
<span className='mr-3 lg:hidden'><Icon type="link-alt" size={14} color="#999" /></span>{turncatedURL || '-'}</div>
|
||||
<a href={url} target="_blank" rel="noreferrer"><span className='mr-3 lg:hidden'>
|
||||
<Icon type="link-alt" size={14} color="#999" /></span>{turncatedURL || '-'}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className='inline-block mt-[4] top-[-5px] relative lg:flex-1 lg:m-0'>
|
||||
<span className='mr-2 lg:hidden'><Icon type="clock" size={14} color="#999" /></span>
|
||||
<TimeAgo title={dayjs(lastUpdated).format('DD-MMM-YYYY, hh:mm:ss A')} date={lastUpdated} />
|
||||
</div>
|
||||
<div className='absolute right-7 mt-[-10px] lg:flex-1 lg:basis-5 lg:grow-0 lg:shrink-0 lg:relative lg:mt-0 lg:right-auto'>
|
||||
|
||||
{showSCData && (
|
||||
<div className='keyword_sc_data min-w-[170px] text-xs mt-4 pt-2 border-t border-gray-100 top-[6px]
|
||||
relative flex justify-between text-center lg:flex-1 lg:text-sm lg:m-0 lg:mt-0 lg:border-t-0 lg:pt-0 lg:top-0'>
|
||||
<span className='min-w-[40px]'>
|
||||
<span className='lg:hidden'>SC Position: </span>
|
||||
{renderPosition(keywordData?.scData?.position[scDataType as keyof KeywordSCDataChild] || 0, 'sc')}
|
||||
</span>
|
||||
<span className='min-w-[40px]'>
|
||||
<span className='lg:hidden'>Impressions: </span>{keywordData?.scData?.impressions[scDataType as keyof KeywordSCDataChild] || 0}
|
||||
</span>
|
||||
<span className='min-w-[40px]'>
|
||||
<span className='lg:hidden'>Visits: </span>{keywordData?.scData?.visits[scDataType as keyof KeywordSCDataChild] || 0}
|
||||
</span>
|
||||
{/* <span>{keywordData?.scData?.ctr[scDataType] || '0.00%'}</span> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='absolute right-4 mt-[-10px] top-2 lg:flex-1 lg:basis-5 lg:grow-0 lg:shrink-0 lg:relative lg:right-[-10px]'>
|
||||
<button
|
||||
className={`keyword_dots rounded px-1 text-indigo-300 hover:bg-indigo-50 ${showOptions ? 'bg-indigo-50 text-indigo-600 ' : ''}`}
|
||||
onClick={() => setShowOptions(!showOptions)}>
|
||||
|
||||
@@ -79,13 +79,13 @@ const KeywordDetails = ({ keyword, closeDetails }:KeywordDetailsProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="keywordDetails fixed w-full h-screen top-0 left-0 z-30" onClick={closeOnBGClick} data-testid="keywordDetails">
|
||||
<div className="keywordDetails fixed w-full h-screen top-0 left-0 z-[99999]" onClick={closeOnBGClick} data-testid="keywordDetails">
|
||||
<div className="keywordDetails absolute w-full lg:w-5/12 bg-white customShadow top-0 right-0 h-screen" >
|
||||
<div className='keywordDetails__header p-6 border-b border-b-slate-200 text-slate-500'>
|
||||
<h3 className=' text-lg font-bold'>
|
||||
<span title={countries[keyword.country][0]}
|
||||
className={`fflag fflag-${keyword.country} w-[18px] h-[12px] mr-2`} /> {keyword.keyword}
|
||||
<span className='py-1 px-2 rounded bg-blue-50 text-blue-700 text-xs font-bold'>{keyword.position}</span>
|
||||
<span className='py-1 px-2 ml-2 rounded bg-blue-50 text-blue-700 text-xs font-bold'>{keyword.position}</span>
|
||||
</h3>
|
||||
<button
|
||||
className='absolute top-2 right-2 p-2 px-3 text-gray-400 hover:text-gray-700 transition-all hover:rotate-90'
|
||||
|
||||
@@ -9,9 +9,12 @@ type KeywordFilterProps = {
|
||||
setDevice: Function,
|
||||
filterParams: KeywordFilters,
|
||||
filterKeywords: Function,
|
||||
keywords: KeywordType[],
|
||||
keywords: KeywordType[] | SearchAnalyticsItem[],
|
||||
updateSort: Function,
|
||||
sortBy: string
|
||||
sortBy: string,
|
||||
integratedConsole?: boolean,
|
||||
isConsole?: boolean,
|
||||
SCcountries?: string[];
|
||||
}
|
||||
|
||||
type KeywordCountState = {
|
||||
@@ -28,7 +31,11 @@ const KeywordFilters = (props: KeywordFilterProps) => {
|
||||
keywords,
|
||||
updateSort,
|
||||
sortBy,
|
||||
filterParams } = props;
|
||||
filterParams,
|
||||
isConsole = false,
|
||||
integratedConsole = false,
|
||||
SCcountries = [],
|
||||
} = props;
|
||||
const [keywordCounts, setKeywordCounts] = useState<KeywordCountState>({ desktop: 0, mobile: 0 });
|
||||
const [sortOptions, showSortOptions] = useState(false);
|
||||
const [filterOptions, showFilterOptions] = useState(false);
|
||||
@@ -55,12 +62,16 @@ const KeywordFilters = (props: KeywordFilterProps) => {
|
||||
};
|
||||
|
||||
const countryOptions = useMemo(() => {
|
||||
const optionObject = Object.keys(countries).map((countryISO:string) => ({
|
||||
label: countries[countryISO][0],
|
||||
value: countryISO,
|
||||
}));
|
||||
const optionObject:{label:string, value:string}[] = [];
|
||||
|
||||
Object.keys(countries).forEach((countryISO:string) => {
|
||||
if (!isConsole || (isConsole && SCcountries.includes(countryISO))) {
|
||||
optionObject.push({ label: countries[countryISO][0], value: countryISO });
|
||||
}
|
||||
});
|
||||
|
||||
return optionObject;
|
||||
}, []);
|
||||
}, [SCcountries, isConsole]);
|
||||
|
||||
const sortOptionChoices: SelectionOption[] = [
|
||||
{ value: 'pos_asc', label: 'Top Position' },
|
||||
@@ -70,6 +81,17 @@ const KeywordFilters = (props: KeywordFilterProps) => {
|
||||
{ value: 'alpha_asc', label: 'Alphabetically(A-Z)' },
|
||||
{ value: 'alpha_desc', label: 'Alphabetically(Z-A)' },
|
||||
];
|
||||
if (integratedConsole) {
|
||||
sortOptionChoices.push({ value: 'imp_desc', label: `Most Viewed${isConsole ? ' (Default)' : ''}` });
|
||||
sortOptionChoices.push({ value: 'imp_asc', label: 'Least Viewed' });
|
||||
sortOptionChoices.push({ value: 'visits_desc', label: 'Most Visited' });
|
||||
sortOptionChoices.push({ value: 'visits_asc', label: 'Least Visited' });
|
||||
}
|
||||
if (isConsole) {
|
||||
sortOptionChoices.splice(2, 2);
|
||||
sortOptionChoices.push({ value: 'ctr_asc', label: 'Highest CTR' });
|
||||
sortOptionChoices.push({ value: 'ctr_desc', label: 'Lowest CTR' });
|
||||
}
|
||||
const sortItemStyle = (sortType:string) => {
|
||||
return `cursor-pointer py-2 px-3 hover:bg-[#FCFCFF] ${sortBy === sortType ? 'bg-indigo-50 text-indigo-600 hover:bg-indigo-50' : ''}`;
|
||||
};
|
||||
@@ -119,15 +141,17 @@ const KeywordFilters = (props: KeywordFilterProps) => {
|
||||
flags={true}
|
||||
/>
|
||||
</div>
|
||||
<div className={'tags_filter mb-2 lg:mb-0'}>
|
||||
<SelectField
|
||||
selected={filterParams.tags}
|
||||
options={allTags.map((tag:string) => ({ label: tag, value: tag }))}
|
||||
defaultLabel='All Tags'
|
||||
updateField={(updated:string[]) => filterTags(updated)}
|
||||
emptyMsg="No Tags Found for this Domain"
|
||||
/>
|
||||
</div>
|
||||
{!isConsole && (
|
||||
<div className={'tags_filter mb-2 lg:mb-0'}>
|
||||
<SelectField
|
||||
selected={filterParams.tags}
|
||||
options={allTags.map((tag:string) => ({ label: tag, value: tag }))}
|
||||
defaultLabel='All Tags'
|
||||
updateField={(updated:string[]) => filterTags(updated)}
|
||||
emptyMsg="No Tags Found for this Domain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={'mb-2 lg:mb-0'}>
|
||||
<input
|
||||
data-testid="filter_input"
|
||||
@@ -150,7 +174,8 @@ const KeywordFilters = (props: KeywordFilterProps) => {
|
||||
{sortOptions && (
|
||||
<ul
|
||||
data-testid="sort_options"
|
||||
className='sort_options mt-2 border absolute min-w-[0] right-0 rounded-lg max-h-96 bg-white z-50 w-44'>
|
||||
className='sort_options mt-2 border absolute min-w-[0] right-0 rounded-lg
|
||||
max-h-96 bg-white z-[9999] w-44 overflow-y-auto styled-scrollbar'>
|
||||
{sortOptionChoices.map((sortOption) => {
|
||||
return <li
|
||||
key={sortOption.value}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
import { useUpdateKeywordTags } from '../../services/keywords';
|
||||
import Icon from '../common/Icon';
|
||||
import Modal from '../common/Modal';
|
||||
import AddTags from './AddTags';
|
||||
|
||||
type keywordTagManagerProps = {
|
||||
keyword: KeywordType|undefined,
|
||||
@@ -10,9 +11,8 @@ type keywordTagManagerProps = {
|
||||
}
|
||||
|
||||
const KeywordTagManager = ({ keyword, closeModal }: keywordTagManagerProps) => {
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [inputError, setInputError] = useState('');
|
||||
const { mutate: updateMutate } = useUpdateKeywordTags(() => { setTagInput(''); });
|
||||
const [showAddTag, setShowAddTag] = useState<boolean>(false);
|
||||
const { mutate: updateMutate } = useUpdateKeywordTags(() => { });
|
||||
|
||||
const removeTag = (tag:String) => {
|
||||
if (!keyword) { return; }
|
||||
@@ -20,24 +20,6 @@ const KeywordTagManager = ({ keyword, closeModal }: keywordTagManagerProps) => {
|
||||
updateMutate({ tags: { [keyword.ID]: newTags } });
|
||||
};
|
||||
|
||||
const addTag = () => {
|
||||
if (!keyword) { return; }
|
||||
if (!tagInput) {
|
||||
setInputError('Please Insert a Tag!');
|
||||
setTimeout(() => { setInputError(''); }, 3000);
|
||||
return;
|
||||
}
|
||||
if (keyword.tags.includes(tagInput)) {
|
||||
setInputError('Tag Exist!');
|
||||
setTimeout(() => { setInputError(''); }, 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('New Tag: ', tagInput);
|
||||
const newTags = [...keyword.tags, tagInput.trim()];
|
||||
updateMutate({ tags: { [keyword.ID]: newTags } });
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal closeModal={() => { closeModal(false); }} title={`Tags for Keyword "${keyword && keyword.keyword}"`}>
|
||||
<div className="text-sm my-8 ">
|
||||
@@ -53,31 +35,27 @@ const KeywordTagManager = ({ keyword, closeModal }: keywordTagManagerProps) => {
|
||||
</button>
|
||||
</li>;
|
||||
})}
|
||||
<li className='inline-block py-1 px-1'>
|
||||
<button
|
||||
title='Add New Tag'
|
||||
className="cursor-pointer rounded p-1 px-3 bg-indigo-600 text-white font-semibold text-sm"
|
||||
onClick={() => setShowAddTag(true)}>+</button>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{keyword && keyword.tags.length === 0 && (
|
||||
<div className="text-center w-full text-gray-500">No Tags Added to this Keyword.</div>
|
||||
<div className="text-center w-full text-gray-500">
|
||||
No Tags Added to this Keyword. <button className=' text-indigo-600' onClick={() => setShowAddTag(true)}>+ Add Tag</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative">
|
||||
{inputError && <span className="absolute top-[-24px] text-red-400 text-sm font-semibold">{inputError}</span>}
|
||||
<span className='absolute text-gray-400 top-3 left-2'><Icon type="tags" size={16} /></span>
|
||||
<input
|
||||
className='w-full border rounded border-gray-200 py-3 px-4 pl-8 outline-none focus:border-indigo-300'
|
||||
placeholder='Insert Tags'
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.code === 'Enter') {
|
||||
e.preventDefault();
|
||||
addTag();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button className=" absolute right-2 top-2 cursor-pointer rounded p-1 px-4 bg-blue-600 text-white font-bold" onClick={addTag}>+</button>
|
||||
</div>
|
||||
{showAddTag && keyword && (
|
||||
<AddTags
|
||||
keywords={[keyword]}
|
||||
closeModal={() => setShowAddTag(false)}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -10,33 +10,49 @@ import KeywordFilters from './KeywordFilter';
|
||||
import Modal from '../common/Modal';
|
||||
import { useDeleteKeywords, useFavKeywords, useRefreshKeywords } from '../../services/keywords';
|
||||
import KeywordTagManager from './KeywordTagManager';
|
||||
import AddTags from './AddTags';
|
||||
|
||||
type KeywordsTableProps = {
|
||||
domain: Domain | null,
|
||||
domain: DomainType | null,
|
||||
keywords: KeywordType[],
|
||||
isLoading: boolean,
|
||||
showAddModal: boolean,
|
||||
setShowAddModal: Function
|
||||
setShowAddModal: Function,
|
||||
isConsoleIntegrated: boolean,
|
||||
}
|
||||
|
||||
const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal = false, setShowAddModal }: KeywordsTableProps) => {
|
||||
const KeywordsTable = (props: KeywordsTableProps) => {
|
||||
const { domain, keywords = [], isLoading = true, showAddModal = false, setShowAddModal, isConsoleIntegrated = false } = props;
|
||||
const showSCData = isConsoleIntegrated;
|
||||
const [device, setDevice] = useState<string>('desktop');
|
||||
const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
|
||||
const [showKeyDetails, setShowKeyDetails] = useState<KeywordType|null>(null);
|
||||
const [showRemoveModal, setShowRemoveModal] = useState<boolean>(false);
|
||||
const [showTagManager, setShowTagManager] = useState<null|number>(null);
|
||||
const [showAddTags, setShowAddTags] = useState<boolean>(false);
|
||||
const [filterParams, setFilterParams] = useState<KeywordFilters>({ countries: [], tags: [], search: '' });
|
||||
const [sortBy, setSortBy] = useState<string>('date_asc');
|
||||
const [scDataType, setScDataType] = useState<string>('threeDays');
|
||||
const [showScDataTypes, setShowScDataTypes] = useState<boolean>(false);
|
||||
const { mutate: deleteMutate } = useDeleteKeywords(() => {});
|
||||
const { mutate: favoriteMutate } = useFavKeywords(() => {});
|
||||
const { mutate: refreshMutate } = useRefreshKeywords(() => {});
|
||||
|
||||
const scDataObject:{ [k:string] : string} = {
|
||||
threeDays: 'Last Three Days',
|
||||
sevenDays: 'Last Seven Days',
|
||||
thirtyDays: 'Last Thirty Days',
|
||||
avgSevenDays: 'Last Three Days Avg',
|
||||
avgThreeDays: 'Last Seven Days Avg',
|
||||
avgThirtyDays: 'Last Thirty Days Avg',
|
||||
};
|
||||
|
||||
const processedKeywords: {[key:string] : KeywordType[]} = useMemo(() => {
|
||||
const procKeywords = keywords.filter((x) => x.device === device);
|
||||
const filteredKeywords = filterKeywords(procKeywords, filterParams);
|
||||
const sortedKeywords = sortKeywords(filteredKeywords, sortBy);
|
||||
const sortedKeywords = sortKeywords(filteredKeywords, sortBy, scDataType);
|
||||
return keywordsByDevice(sortedKeywords, device);
|
||||
}, [keywords, device, sortBy, filterParams]);
|
||||
}, [keywords, device, sortBy, filterParams, scDataType]);
|
||||
|
||||
const allDomainTags: string[] = useMemo(() => {
|
||||
const allTags = keywords.reduce((acc: string[], keyword) => [...acc, ...keyword.tags], []);
|
||||
@@ -56,7 +72,7 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='domKeywords flex flex-col bg-[white] rounded-md text-sm border'>
|
||||
<div className='domKeywords flex flex-col bg-[white] rounded-md text-sm border mb-8'>
|
||||
{selectedKeywords.length > 0 && (
|
||||
<div className='font-semibold text-sm py-4 px-8 text-gray-500 '>
|
||||
<ul className=''>
|
||||
@@ -65,7 +81,7 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
className='block px-2 py-2 cursor-pointer hover:text-indigo-600'
|
||||
onClick={() => { refreshMutate({ ids: selectedKeywords }); setSelectedKeywords([]); }}
|
||||
>
|
||||
<span className=' bg-indigo-100 text-blue-700 px-1 rounded'><Icon type="reload" size={11} /></span> Refresh Keyword
|
||||
<span className=' bg-indigo-100 text-blue-700 px-1 rounded'><Icon type="reload" size={11} /></span> Refresh Keywords
|
||||
</a>
|
||||
</li>
|
||||
<li className='inline-block mr-4'>
|
||||
@@ -73,7 +89,14 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
className='block px-2 py-2 cursor-pointer hover:text-indigo-600'
|
||||
onClick={() => setShowRemoveModal(true)}
|
||||
>
|
||||
<span className=' bg-red-100 text-red-600 px-1 rounded'><Icon type="trash" size={14} /></span> Remove Keyword</a>
|
||||
<span className=' bg-red-100 text-red-600 px-1 rounded'><Icon type="trash" size={14} /></span> Remove Keywords</a>
|
||||
</li>
|
||||
<li className='inline-block mr-4'>
|
||||
<a
|
||||
className='block px-2 py-2 cursor-pointer hover:text-indigo-600'
|
||||
onClick={() => setShowAddTags(true)}
|
||||
>
|
||||
<span className=' bg-green-100 text-green-500 px-1 rounded'><Icon type="tags" size={14} /></span> Tag Keywords</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -88,9 +111,11 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
keywords={keywords}
|
||||
device={device}
|
||||
setDevice={setDevice}
|
||||
integratedConsole={isConsoleIntegrated}
|
||||
/>
|
||||
)}
|
||||
<div className='styled-scrollbar w-full overflow-auto min-h-[60vh] '>
|
||||
<div className={`domkeywordsTable domkeywordsTable--keywords ${showSCData ? 'domkeywordsTable--hasSC' : ''}
|
||||
styled-scrollbar w-full overflow-auto min-h-[60vh]`}>
|
||||
<div className=' lg:min-w-[800px]'>
|
||||
<div className={`domKeywords_head domKeywords_head--${sortBy} hidden lg:flex p-3 px-6 bg-[#FCFCFF]
|
||||
text-gray-600 justify-between items-center font-semibold border-y`}>
|
||||
@@ -110,8 +135,41 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
<span className='domKeywords_head_history flex-1'>History (7d)</span>
|
||||
<span className='domKeywords_head_url flex-1'>URL</span>
|
||||
<span className='domKeywords_head_updated flex-1'>Updated</span>
|
||||
{showSCData && (
|
||||
<div className='domKeywords_head_sc flex-1 min-w-[170px] mr-7 text-center'>
|
||||
{/* Search Console */}
|
||||
<div>
|
||||
<div
|
||||
className=' w-48 select-none cursor-pointer absolute bg-white rounded-full
|
||||
px-2 py-[2px] mt-[-22px] ml-3 border border-gray-200 z-50'
|
||||
onClick={() => setShowScDataTypes(!showScDataTypes)}>
|
||||
<Icon type="google" size={13} /> {scDataObject[scDataType]}
|
||||
<Icon classes="ml-2" type={showScDataTypes ? 'caret-up' : 'caret-down'} size={10} />
|
||||
</div>
|
||||
{showScDataTypes && (
|
||||
<div className='absolute bg-white border border-gray-200 z-50 w-44 rounded mt-2 ml-5 text-gray-500'>
|
||||
{Object.keys(scDataObject).map((itemKey) => {
|
||||
return <span
|
||||
className={`block p-2 cursor-pointer hover:bg-indigo-50 hover:text-indigo-600
|
||||
${scDataType === itemKey ? 'bg-indigo-100 text-indigo-600' : ''}`}
|
||||
key={itemKey}
|
||||
onClick={() => { setScDataType(itemKey); setShowScDataTypes(false); }}>
|
||||
{scDataObject[itemKey]}
|
||||
</span>;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='relative top-2 flex justify-between'>
|
||||
<span className='min-w-[40px]'>Pos</span>
|
||||
<span className='min-w-[40px]'>Imp</span>
|
||||
<span className='min-w-[40px]'>Visits</span>
|
||||
{/* <span>CTR</span> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='domKeywords_keywords border-gray-200'>
|
||||
<div className='domKeywords_keywords border-gray-200 min-h-[55vh] relative'>
|
||||
{processedKeywords[device] && processedKeywords[device].length > 0
|
||||
&& processedKeywords[device].map((keyword, index) => <Keyword
|
||||
key={keyword.ID}
|
||||
@@ -124,12 +182,14 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
removeKeyword={() => { setSelectedKeywords([keyword.ID]); setShowRemoveModal(true); }}
|
||||
showKeywordDetails={() => setShowKeyDetails(keyword)}
|
||||
lastItem={index === (processedKeywords[device].length - 1)}
|
||||
showSCData={showSCData}
|
||||
scDataType={scDataType}
|
||||
/>)}
|
||||
{!isLoading && processedKeywords[device].length === 0 && (
|
||||
<p className=' p-9 mt-[10%] text-center text-gray-500'>No Keywords Added for this Device Type.</p>
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>No Keywords Added for this Device Type.</p>
|
||||
)}
|
||||
{isLoading && (
|
||||
<p className=' p-9 mt-[10%] text-center text-gray-500'>Loading Keywords...</p>
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>Loading Keywords...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,6 +231,12 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
|
||||
closeModal={() => setShowTagManager(null)}
|
||||
/>
|
||||
)}
|
||||
{showAddTags && (
|
||||
<AddTags
|
||||
keywords={keywords.filter((k) => selectedKeywords.includes(k.ID))}
|
||||
closeModal={() => setShowAddTags(false)}
|
||||
/>
|
||||
)}
|
||||
<Toaster position='bottom-center' containerClassName="react_toaster" />
|
||||
</div>
|
||||
);
|
||||
|
||||
77
components/keywords/SCKeyword.tsx
Normal file
77
components/keywords/SCKeyword.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import Icon from '../common/Icon';
|
||||
import countries from '../../utils/countries';
|
||||
|
||||
type SCKeywordProps = {
|
||||
keywordData: SearchAnalyticsItem,
|
||||
selected: boolean,
|
||||
selectKeyword: Function,
|
||||
lastItem?:boolean,
|
||||
isTracked: boolean,
|
||||
style: Object
|
||||
}
|
||||
|
||||
const SCKeyword = (props: SCKeywordProps) => {
|
||||
const { keywordData, selected, lastItem, selectKeyword, style, isTracked = false } = props;
|
||||
const { keyword, uid, position, country, impressions, ctr, clicks } = keywordData;
|
||||
|
||||
const renderPosition = () => {
|
||||
if (position === 0) {
|
||||
return <span className='text-gray-400' title='Not in Top 100'>{'>100'}</span>;
|
||||
}
|
||||
return Math.round(position);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={keyword}
|
||||
style={style}
|
||||
className={`keyword relative py-5 px-4 text-gray-600 border-b-[1px] border-gray-200 lg:py-4 lg:px-6 lg:border-0
|
||||
lg:flex lg:justify-between lg:items-center ${selected ? ' bg-indigo-50 keyword--selected' : ''} ${lastItem ? 'border-b-0' : ''}`}>
|
||||
|
||||
<div className=' w-3/4 lg:flex-1 lg:basis-20 lg:w-auto font-semibold cursor-pointer'>
|
||||
<button
|
||||
className={`p-0 mr-2 leading-[0px] inline-block rounded-sm pt-0 px-[1px] pb-[3px] border
|
||||
${isTracked || selected ? ' bg-blue-700 border-blue-700 text-white' : 'text-transparent'}
|
||||
${isTracked ? 'bg-gray-400 border-gray-400 cursor-default' : ''}`}
|
||||
onClick={() => !isTracked && selectKeyword(uid)}
|
||||
>
|
||||
<Icon type="check" size={10} title={isTracked ? 'Already in Tracker' : ''} />
|
||||
</button>
|
||||
<a className='py-2 hover:text-blue-600'>
|
||||
<span className={`fflag fflag-${country} w-[18px] h-[12px] mr-2`} title={countries[country] && countries[country][0]} />{keyword}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={`keyword_position absolute bg-[#f8f9ff] w-fit min-w-[50px] h-15 p-2 text-base mt-[-20px] rounded right-5 lg:relative
|
||||
lg:bg-transparent lg:w-auto lg:h-auto lg:mt-0 lg:p-0 lg:text-sm lg:flex-1 lg:basis-40 lg:grow-0 lg:right-0 text-center font-semibold`}>
|
||||
{renderPosition()}
|
||||
<span className='block text-xs text-gray-500 lg:hidden'>Position</span>
|
||||
</div>
|
||||
|
||||
<div className='keyword_imp text-center inline-block lg:flex-1 '>
|
||||
<span className='mr-3 lg:hidden'>
|
||||
<Icon type="eye" size={14} color="#999" />
|
||||
</span>
|
||||
{new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(impressions)}
|
||||
</div>
|
||||
|
||||
<div className={'keyword_visits text-center inline-block mt-4 mr-5 ml-5 lg:flex-1 lg:m-0 max-w-[70px] lg:max-w-none lg:pr-5'}>
|
||||
<span className='mr-3 lg:hidden'>
|
||||
<Icon type="cursor" size={14} color="#999" />
|
||||
</span>
|
||||
{new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(clicks)}
|
||||
</div>
|
||||
|
||||
<div className='keyword_ctr text-center inline-block mt-4 relative lg:flex-1 lg:m-0 '>
|
||||
<span className='mr-3 lg:hidden'>
|
||||
<Icon type="target" size={14} color="#999" />
|
||||
</span>
|
||||
{new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(ctr)}%
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SCKeyword;
|
||||
229
components/keywords/SCKeywordsTable.tsx
Normal file
229
components/keywords/SCKeywordsTable.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
|
||||
import { useAddKeywords, useFetchKeywords } from '../../services/keywords';
|
||||
import { SCfilterKeywords, SCkeywordsByDevice, SCsortKeywords } from '../../utils/SCsortFilter';
|
||||
import Icon from '../common/Icon';
|
||||
import KeywordFilters from './KeywordFilter';
|
||||
import SCKeyword from './SCKeyword';
|
||||
|
||||
type SCKeywordsTableProps = {
|
||||
domain: DomainType | null,
|
||||
keywords: SearchAnalyticsItem[],
|
||||
isLoading: boolean,
|
||||
isConsoleIntegrated: boolean,
|
||||
}
|
||||
|
||||
type SCCountryDataType = {
|
||||
keywords: number,
|
||||
impressions: number,
|
||||
visits: number
|
||||
}
|
||||
|
||||
const SCKeywordsTable = ({ domain, keywords = [], isLoading = true, isConsoleIntegrated = true }: SCKeywordsTableProps) => {
|
||||
const router = useRouter();
|
||||
const [device, setDevice] = useState<string>('desktop');
|
||||
const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
|
||||
const [filterParams, setFilterParams] = useState<KeywordFilters>({ countries: [], tags: [], search: '' });
|
||||
const [sortBy, setSortBy] = useState<string>('imp_desc');
|
||||
const [isMobile, setIsMobile] = useState<boolean>(false);
|
||||
const [SCListHeight, setSCListHeight] = useState(500);
|
||||
const { keywordsData } = useFetchKeywords(router);
|
||||
const addedkeywords: string[] = keywordsData?.keywords?.map((key: KeywordType) => `${key.keyword}:${key.country}:${key.device}`) || [];
|
||||
const { mutate: addKeywords } = useAddKeywords(() => { if (domain && domain.slug) router.push(`/domain/${domain.slug}`); });
|
||||
const finalKeywords: {[key:string] : SCKeywordType[] } = useMemo(() => {
|
||||
const procKeywords = keywords.filter((x) => x.device === device);
|
||||
const filteredKeywords = SCfilterKeywords(procKeywords, filterParams);
|
||||
const sortedKeywords = SCsortKeywords(filteredKeywords, sortBy);
|
||||
return SCkeywordsByDevice(sortedKeywords, device);
|
||||
}, [keywords, device, filterParams, sortBy]);
|
||||
|
||||
const SCCountryData: {[key:string] : SCCountryDataType } = useMemo(() => {
|
||||
const countryData:{[key:string] : SCCountryDataType } = {};
|
||||
|
||||
Object.keys(finalKeywords).forEach((dateKey) => {
|
||||
finalKeywords[dateKey].forEach((keyword) => {
|
||||
const kCountry = keyword.country;
|
||||
if (!countryData[kCountry]) { countryData[kCountry] = { keywords: 0, impressions: 0, visits: 0 }; }
|
||||
countryData[kCountry].keywords += 1;
|
||||
countryData[kCountry].visits += (keyword.clicks || 0);
|
||||
countryData[kCountry].impressions += (keyword.impressions || 0);
|
||||
});
|
||||
});
|
||||
|
||||
return countryData;
|
||||
}, [finalKeywords]);
|
||||
|
||||
const viewSummary: {[key:string] : number } = useMemo(() => {
|
||||
const keyCount = finalKeywords[device].length;
|
||||
const kwSummary = { position: 0, impressions: 0, visits: 0, ctr: 0 };
|
||||
finalKeywords[device].forEach((k) => {
|
||||
kwSummary.position += k.position;
|
||||
kwSummary.impressions += k.impressions;
|
||||
kwSummary.visits += k.clicks;
|
||||
kwSummary.ctr += k.ctr;
|
||||
});
|
||||
return {
|
||||
...kwSummary,
|
||||
position: Math.round(kwSummary.position / keyCount),
|
||||
ctr: kwSummary.ctr / keyCount,
|
||||
};
|
||||
}, [finalKeywords, device]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMobile(!!(window.matchMedia('only screen and (max-width: 760px)').matches));
|
||||
const resizeList = () => setSCListHeight(window.innerHeight - (isMobile ? 200 : 400));
|
||||
resizeList();
|
||||
window.addEventListener('resize', resizeList);
|
||||
return () => {
|
||||
window.removeEventListener('resize', resizeList);
|
||||
};
|
||||
}, [isMobile]);
|
||||
|
||||
const selectKeyword = (keywordID: string) => {
|
||||
console.log('Select Keyword: ', keywordID);
|
||||
let updatedSelectd = [...selectedKeywords, keywordID];
|
||||
if (selectedKeywords.includes(keywordID)) {
|
||||
updatedSelectd = selectedKeywords.filter((keyID) => keyID !== keywordID);
|
||||
}
|
||||
setSelectedKeywords(updatedSelectd);
|
||||
};
|
||||
|
||||
const addSCKeywordsToTracker = () => {
|
||||
const selectedkeywords:KeywordAddPayload[] = [];
|
||||
keywords.forEach((kitem:SCKeywordType) => {
|
||||
if (selectedKeywords.includes(kitem.uid)) {
|
||||
const { keyword, country } = kitem;
|
||||
selectedkeywords.push({ keyword, device, country, domain: domain?.domain || '', tags: '' });
|
||||
}
|
||||
});
|
||||
addKeywords(selectedkeywords);
|
||||
setSelectedKeywords([]);
|
||||
};
|
||||
|
||||
const selectedAllItems = selectedKeywords.length === finalKeywords[device].length;
|
||||
|
||||
const Row = ({ data, index, style }:ListChildComponentProps) => {
|
||||
const keyword = data[index];
|
||||
return (
|
||||
<SCKeyword
|
||||
key={keyword.uid}
|
||||
style={style}
|
||||
selected={selectedKeywords.includes(keyword.uid)}
|
||||
selectKeyword={selectKeyword}
|
||||
keywordData={keyword}
|
||||
isTracked={addedkeywords.includes(`${keyword.keyword}:${keyword.country}:${keyword.device}`)}
|
||||
lastItem={index === (finalKeywords[device].length - 1)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='domKeywords flex flex-col bg-[white] rounded-md text-sm border mb-8'>
|
||||
{selectedKeywords.length > 0 && (
|
||||
<div className='font-semibold text-sm py-4 px-8 text-gray-500 '>
|
||||
<ul className=''>
|
||||
<li className='inline-block mr-4'>
|
||||
<a
|
||||
className='block px-2 py-2 cursor-pointer hover:text-indigo-600'
|
||||
onClick={() => addSCKeywordsToTracker()}
|
||||
>
|
||||
<span className=' bg-indigo-100 text-blue-700 px-1 rounded font-black'>+</span> Add Keywords to Tracker
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{selectedKeywords.length === 0 && (
|
||||
<KeywordFilters
|
||||
allTags={[]}
|
||||
filterParams={filterParams}
|
||||
filterKeywords={(params:KeywordFilters) => setFilterParams(params)}
|
||||
updateSort={(sorted:string) => setSortBy(sorted)}
|
||||
sortBy={sortBy}
|
||||
keywords={keywords}
|
||||
device={device}
|
||||
setDevice={setDevice}
|
||||
isConsole={true}
|
||||
integratedConsole={isConsoleIntegrated}
|
||||
SCcountries={Object.keys(SCCountryData)}
|
||||
/>
|
||||
)}
|
||||
<div className='domkeywordsTable domkeywordsTable--sckeywords styled-scrollbar w-full overflow-auto min-h-[60vh]'>
|
||||
<div className=' lg:min-w-[800px]'>
|
||||
<div className={`domKeywords_head domKeywords_head--${sortBy} hidden lg:flex p-3 px-6 bg-[#FCFCFF]
|
||||
text-gray-600 justify-between items-center font-semibold border-y`}>
|
||||
<span className='domKeywords_head_keyword flex-1 basis-20 w-auto '>
|
||||
{finalKeywords[device].length > 0 && (
|
||||
<button
|
||||
className={`p-0 mr-2 leading-[0px] inline-block rounded-sm pt-0 px-[1px] pb-[3px] border border-slate-300
|
||||
${selectedAllItems ? ' bg-blue-700 border-blue-700 text-white' : 'text-transparent'}`}
|
||||
onClick={() => setSelectedKeywords(selectedAllItems ? [] : finalKeywords[device].map((k: SearchAnalyticsItem) => k.uid))}
|
||||
>
|
||||
<Icon type="check" size={10} />
|
||||
</button>
|
||||
)}
|
||||
Keyword
|
||||
</span>
|
||||
<span className='domKeywords_head_position flex-1 basis-40 grow-0 text-center'>Position</span>
|
||||
<span className='domKeywords_head_imp flex-1 text-center'>Impressions</span>
|
||||
<span className='domKeywords_head_visits flex-1 text-center'>Visits</span>
|
||||
<span className='domKeywords_head_ctr flex-1 text-center'>CTR</span>
|
||||
</div>
|
||||
<div className='domKeywords_keywords border-gray-200 min-h-[55vh] relative' data-domain={domain?.domain}>
|
||||
{!isLoading && finalKeywords[device] && finalKeywords[device].length > 0 && (
|
||||
<List
|
||||
innerElementType="div"
|
||||
itemData={finalKeywords[device]}
|
||||
itemCount={finalKeywords[device].length}
|
||||
itemSize={isMobile ? 100 : 57}
|
||||
height={SCListHeight}
|
||||
width={'100%'}
|
||||
className={'styled-scrollbar'}
|
||||
>
|
||||
{Row}
|
||||
</List>
|
||||
)}
|
||||
{!isLoading && finalKeywords[device] && finalKeywords[device].length > 0 && (
|
||||
<div className={`domKeywords_head hidden lg:flex p-3 px-6 bg-[#FCFCFF]
|
||||
text-gray-600 justify-between items-center font-semibold border-y`}>
|
||||
<span className='domKeywords_head_keyword flex-1 basis-20 w-auto font-semibold'>
|
||||
{finalKeywords[device].length} {device} Keywords
|
||||
</span>
|
||||
<span className='domKeywords_head_position flex-1 basis-40 grow-0 text-center'>{viewSummary.position}</span>
|
||||
<span className='domKeywords_head_imp flex-1 text-center'>
|
||||
{new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(viewSummary.impressions)}
|
||||
</span>
|
||||
<span className='domKeywords_head_visits flex-1 text-center'>
|
||||
{new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(viewSummary.visits)}
|
||||
</span>
|
||||
<span className='domKeywords_head_ctr flex-1 text-center'>
|
||||
{new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(viewSummary.ctr)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isConsoleIntegrated && !isLoading && finalKeywords[device].length === 0 && (
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>
|
||||
Could Not fetch Keyword Data for this Domain from Google Search Console.
|
||||
</p>
|
||||
)}
|
||||
{isConsoleIntegrated && isLoading && (
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>Loading Keywords...</p>
|
||||
)}
|
||||
{!isConsoleIntegrated && (
|
||||
<p className=' p-9 pt-[10%] text-center text-gray-500'>
|
||||
Goolge Search has not been Integrated yet. Please follow <a className='text-indigo-600 underline' href='https://docs.serpbear.com/miscellaneous/integrate-google-search-console' target="_blank" rel='noreferrer'>These Steps</a> to integrate Google Search Data for this Domain.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Toaster position='bottom-center' containerClassName="react_toaster" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SCKeywordsTable;
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
// import { useQuery } from 'react-query';
|
||||
import useUpdateSettings, { useFetchSettings } from '../../services/settings';
|
||||
import Icon from '../common/Icon';
|
||||
@@ -63,23 +64,20 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
|
||||
const performUpdate = () => {
|
||||
let error: null|SettingsError = null;
|
||||
if (settings.notification_interval !== 'never') {
|
||||
const { notification_interval, notification_email, notification_email_from, scraper_type, smtp_port, smtp_server, scaping_api } = settings;
|
||||
if (notification_interval !== 'never') {
|
||||
if (!settings.notification_email) {
|
||||
error = { type: 'no_email', msg: 'Insert a Valid Email address' };
|
||||
}
|
||||
if (settings.notification_email
|
||||
&& (!settings.smtp_username || !settings.smtp_password || !settings.smtp_port || !settings.smtp_server
|
||||
|| !settings.notification_email_from)) {
|
||||
if (notification_email && (!smtp_port || !smtp_server || !notification_email_from)) {
|
||||
let type = 'no_smtp_from';
|
||||
if (!settings.smtp_password) { type = 'no_smtp_pass'; }
|
||||
if (!settings.smtp_username) { type = 'no_smtp_user'; }
|
||||
if (!settings.smtp_port) { type = 'no_smtp_port'; }
|
||||
if (!settings.smtp_server) { type = 'no_smtp_server'; }
|
||||
if (!smtp_port) { type = 'no_smtp_port'; }
|
||||
if (!smtp_server) { type = 'no_smtp_server'; }
|
||||
error = { type, msg: 'Insert SMTP Server details that will be used to send the emails.' };
|
||||
}
|
||||
}
|
||||
|
||||
if (['scrapingant', 'scrapingrobot'].includes(settings.scraper_type) && !settings.scaping_api) {
|
||||
if (scraper_type !== 'proxy' && scraper_type !== 'none' && !scaping_api) {
|
||||
error = { type: 'no_api_key', msg: 'Insert a Valid API Key or Token for the Scraper Service.' };
|
||||
}
|
||||
|
||||
@@ -100,13 +98,15 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
{ label: 'Monthly', value: 'monthly' },
|
||||
{ label: 'Never', value: 'never' },
|
||||
];
|
||||
const scraperOptions: SelectionOption[] = [
|
||||
{ label: 'None', value: 'none' },
|
||||
{ label: 'Proxy', value: 'proxy' },
|
||||
{ label: 'ScrapingAnt.com', value: 'scrapingant' },
|
||||
{ label: 'ScrapingRobot.com', value: 'scrapingrobot' },
|
||||
{ label: 'serply.io', value: 'serply' },
|
||||
const scrapingOptions: SelectionOption[] = [
|
||||
{ label: 'Daily', value: 'daily' },
|
||||
{ label: 'Every Other Day', value: 'other_day' },
|
||||
{ label: 'Weekly', value: 'weekly' },
|
||||
{ label: 'Monthly', value: 'monthly' },
|
||||
{ label: 'Never', value: 'never' },
|
||||
];
|
||||
const allScrapers: SelectionOption[] = settings.available_scapers ? settings.available_scapers : [];
|
||||
const scraperOptions: SelectionOption[] = [{ label: 'None', value: 'none' }, ...allScrapers];
|
||||
|
||||
const tabStyle = 'inline-block px-4 py-1 rounded-full mr-3 cursor-pointer text-sm';
|
||||
return (
|
||||
@@ -151,7 +151,7 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
minWidth={270}
|
||||
/>
|
||||
</div>
|
||||
{['scrapingant', 'scrapingrobot', 'serply'].includes(settings.scraper_type) && (
|
||||
{['scrapingant', 'scrapingrobot', 'serply', 'serpapi'].includes(settings.scraper_type) && (
|
||||
<div className="settings__section__input mr-3">
|
||||
<label className={labelStyle}>Scraper API Key or Token</label>
|
||||
<input
|
||||
@@ -177,6 +177,22 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{settings.scraper_type !== 'none' && (
|
||||
<div className="settings__section__input mb-5">
|
||||
<label className={labelStyle}>Scraping Frequency</label>
|
||||
<SelectField
|
||||
multiple={false}
|
||||
selected={[settings?.scrape_interval || 'daily']}
|
||||
options={scrapingOptions}
|
||||
defaultLabel={'Notification Settings'}
|
||||
updateField={(updated:string[]) => updated[0] && updateSettings('scrape_interval', updated[0])}
|
||||
rounded='rounded'
|
||||
maxHeight={48}
|
||||
minWidth={270}
|
||||
/>
|
||||
<small className=' text-gray-500 pt-2 block'>This option requires Server/Docker Instance Restart to take Effect.</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -233,8 +249,7 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
<div className="settings__section__input mb-5">
|
||||
<label className={labelStyle}>SMTP Username</label>
|
||||
<input
|
||||
className={`w-full p-2 border border-gray-200 rounded mb-3 focus:outline-none focus:border-blue-200
|
||||
${settingsError && settingsError.type === 'no_smtp_user' ? ' border-red-400 focus:border-red-400' : ''} `}
|
||||
className={'w-full p-2 border border-gray-200 rounded mb-3 focus:outline-none focus:border-blue-200'}
|
||||
type="text"
|
||||
value={settings?.smtp_username || ''}
|
||||
onChange={(event) => updateSettings('smtp_username', event.target.value)}
|
||||
@@ -243,8 +258,7 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
<div className="settings__section__input mb-5">
|
||||
<label className={labelStyle}>SMTP Password</label>
|
||||
<input
|
||||
className={`w-full p-2 border border-gray-200 rounded mb-3 focus:outline-none focus:border-blue-200
|
||||
${settingsError && settingsError.type === 'no_smtp_pass' ? ' border-red-400 focus:border-red-400' : ''} `}
|
||||
className={'w-full p-2 border border-gray-200 rounded mb-3 focus:outline-none focus:border-blue-200'}
|
||||
type="text"
|
||||
value={settings?.smtp_password || ''}
|
||||
onChange={(event) => updateSettings('smtp_password', event.target.value)}
|
||||
@@ -280,6 +294,7 @@ const Settings = ({ closeSettings }:SettingsProps) => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Toaster position='bottom-center' containerClassName="react_toaster" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
93
cron.js
93
cron.js
@@ -1,7 +1,7 @@
|
||||
const Cryptr = require('cryptr');
|
||||
const { promises } = require('fs');
|
||||
const { readFile } = require('fs');
|
||||
const cron = require('node-cron');
|
||||
const Cron = require('croner');
|
||||
require('dotenv').config({ path: './.env.local' });
|
||||
|
||||
const getAppSettings = async () => {
|
||||
@@ -49,8 +49,11 @@ const generateCronTime = (interval) => {
|
||||
if (interval === 'daily') {
|
||||
cronTime = '0 0 0 * * *';
|
||||
}
|
||||
if (interval === 'other_day') {
|
||||
cronTime = '0 0 2-30/2 * *';
|
||||
}
|
||||
if (interval === 'daily_morning') {
|
||||
cronTime = '0 0 0 3 * *';
|
||||
cronTime = '0 0 3 * * *';
|
||||
}
|
||||
if (interval === 'weekly') {
|
||||
cronTime = '0 0 0 */7 * *';
|
||||
@@ -63,23 +66,47 @@ const generateCronTime = (interval) => {
|
||||
};
|
||||
|
||||
const runAppCronJobs = () => {
|
||||
// RUN SERP Scraping CRON (EveryDay at Midnight) 0 0 0 * *
|
||||
const scrapeCronTime = generateCronTime('daily');
|
||||
cron.schedule(scrapeCronTime, () => {
|
||||
// console.log('### Running Keyword Position Cron Job!');
|
||||
const fetchOpts = { method: 'POST', headers: { Authorization: `Bearer ${process.env.APIKEY}` } };
|
||||
fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/cron`, fetchOpts)
|
||||
.then((res) => res.json())
|
||||
.then((data) => console.log(data))
|
||||
.catch((err) => {
|
||||
console.log('ERROR Making Daily Scraper Cron Request..');
|
||||
console.log(err);
|
||||
});
|
||||
}, { scheduled: true });
|
||||
getAppSettings().then((settings) => {
|
||||
// RUN SERP Scraping CRON (EveryDay at Midnight) 0 0 0 * *
|
||||
const scrape_interval = settings.scrape_interval || 'daily';
|
||||
if (scrape_interval !== 'never') {
|
||||
const scrapeCronTime = generateCronTime(scrape_interval);
|
||||
Cron(scrapeCronTime, () => {
|
||||
// console.log('### Running Keyword Position Cron Job!');
|
||||
const fetchOpts = { method: 'POST', headers: { Authorization: `Bearer ${process.env.APIKEY}` } };
|
||||
fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/cron`, fetchOpts)
|
||||
.then((res) => res.json())
|
||||
// .then((data) =>{ console.log(data)})
|
||||
.catch((err) => {
|
||||
console.log('ERROR Making SERP Scraper Cron Request..');
|
||||
console.log(err);
|
||||
});
|
||||
}, { scheduled: true });
|
||||
}
|
||||
|
||||
// RUN Email Notification CRON
|
||||
const notif_interval = (!settings.notification_interval || settings.notification_interval === 'never') ? false : settings.notification_interval;
|
||||
if (notif_interval) {
|
||||
const cronTime = generateCronTime(notif_interval === 'daily' ? 'daily_morning' : notif_interval);
|
||||
if (cronTime) {
|
||||
Cron(cronTime, () => {
|
||||
// console.log('### Sending Notification Email...');
|
||||
const fetchOpts = { method: 'POST', headers: { Authorization: `Bearer ${process.env.APIKEY}` } };
|
||||
fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/notify`, fetchOpts)
|
||||
.then((res) => res.json())
|
||||
.then((data) => console.log(data))
|
||||
.catch((err) => {
|
||||
console.log('ERROR Making Cron Email Notification Request..');
|
||||
console.log(err);
|
||||
});
|
||||
}, { scheduled: true });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Run Failed scraping CRON (Every Hour)
|
||||
const failedCronTime = generateCronTime('hourly');
|
||||
cron.schedule(failedCronTime, () => {
|
||||
Cron(failedCronTime, () => {
|
||||
// console.log('### Retrying Failed Scrapes...');
|
||||
|
||||
readFile(`${process.cwd()}/data/failed_queue.json`, { encoding: 'utf-8' }, (err, data) => {
|
||||
@@ -101,26 +128,20 @@ const runAppCronJobs = () => {
|
||||
});
|
||||
}, { scheduled: true });
|
||||
|
||||
// RUN Email Notification CRON
|
||||
getAppSettings().then((settings) => {
|
||||
const notif_interval = (!settings.notification_interval || settings.notification_interval === 'never') ? false : settings.notification_interval;
|
||||
if (notif_interval) {
|
||||
const cronTime = generateCronTime(notif_interval === 'daily' ? 'daily_morning' : notif_interval);
|
||||
if (cronTime) {
|
||||
cron.schedule(cronTime, () => {
|
||||
// console.log('### Sending Notification Email...');
|
||||
const fetchOpts = { method: 'POST', headers: { Authorization: `Bearer ${process.env.APIKEY}` } };
|
||||
fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/notify`, fetchOpts)
|
||||
.then((res) => res.json())
|
||||
.then((data) => console.log(data))
|
||||
.catch((err) => {
|
||||
console.log('ERROR Making Cron Email Notification Request..');
|
||||
console.log(err);
|
||||
});
|
||||
}, { scheduled: true });
|
||||
}
|
||||
}
|
||||
});
|
||||
// Run Google Search Console Scraper Daily
|
||||
if (process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL) {
|
||||
const searchConsoleCRONTime = generateCronTime('daily');
|
||||
Cron(searchConsoleCRONTime, () => {
|
||||
const fetchOpts = { method: 'POST', headers: { Authorization: `Bearer ${process.env.APIKEY}` } };
|
||||
fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/searchconsole`, fetchOpts)
|
||||
.then((res) => res.json())
|
||||
.then((data) => console.log(data))
|
||||
.catch((err) => {
|
||||
console.log('ERROR Making Google Search Console Scraper Cron Request..');
|
||||
console.log(err);
|
||||
});
|
||||
}, { scheduled: true });
|
||||
}
|
||||
};
|
||||
|
||||
runAppCronJobs();
|
||||
|
||||
@@ -6,7 +6,7 @@ import Keyword from './models/keyword';
|
||||
const connection = new Sequelize({
|
||||
dialect: 'sqlite',
|
||||
host: '0.0.0.0',
|
||||
username: process.env.USER,
|
||||
username: process.env.USER_NAME ? process.env.USER_NAME : process.env.USER,
|
||||
password: process.env.PASSWORD,
|
||||
database: 'sequelize',
|
||||
dialectModule: sqlite3,
|
||||
|
||||
@@ -259,13 +259,26 @@
|
||||
color: #fff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.mainhead td {
|
||||
.mainhead td, .subhead td {
|
||||
padding: 15px;
|
||||
}
|
||||
.mainhead a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.subhead {
|
||||
background: #dee3ff;
|
||||
color: #344dd7;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.subhead a {
|
||||
color: #344dd7;
|
||||
text-decoration: none;
|
||||
}
|
||||
.console_table{
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.keyword_table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
@@ -277,13 +290,16 @@
|
||||
.keyword td:nth-child(1){
|
||||
font-weight: bold;
|
||||
}
|
||||
.keyword_table th:nth-child(2), .keyword_table th:nth-child(3), .keyword td:nth-child(2), .keyword td:nth-child(3){
|
||||
.keyword_table th:nth-child(2), .keyword_table th:nth-child(3), .keyword td:nth-child(2), .keyword td:nth-child(3), .keyword_table--sc th:nth-child(4), .keyword_table--sc td:nth-child(4){
|
||||
text-align: center;
|
||||
}
|
||||
.keyword td:nth-child(3){
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.keyword_table--sc td:nth-child(3){
|
||||
color:inherit;
|
||||
}
|
||||
.keyword svg {
|
||||
width: 15px;
|
||||
}
|
||||
@@ -304,6 +320,9 @@
|
||||
vertical-align: middle;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.google_icon{
|
||||
max-width: 13px;
|
||||
}
|
||||
/* -------------------------------------
|
||||
RESPONSIVE AND MOBILE FRIENDLY STYLES
|
||||
------------------------------------- */
|
||||
@@ -437,6 +456,9 @@
|
||||
|
||||
<!-- END MAIN CONTENT AREA -->
|
||||
</table>
|
||||
|
||||
{{SCStatsTable}}
|
||||
|
||||
<!-- END CENTERED WHITE CONTAINER -->
|
||||
|
||||
<!-- START FOOTER -->
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const { version } = require('./package.json');
|
||||
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: false,
|
||||
output: 'standalone',
|
||||
publicRuntimeConfig: {
|
||||
version,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
|
||||
454
package-lock.json
generated
454
package-lock.json
generated
@@ -1,13 +1,14 @@
|
||||
{
|
||||
"name": "serpbear",
|
||||
"version": "0.1.7",
|
||||
"version": "0.2.5",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "serpbear",
|
||||
"version": "0.1.7",
|
||||
"version": "0.2.5",
|
||||
"dependencies": {
|
||||
"@googleapis/searchconsole": "^1.0.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/react-transition-group": "^4.4.5",
|
||||
"axios": "^1.1.3",
|
||||
@@ -16,6 +17,7 @@
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"concurrently": "^7.6.0",
|
||||
"cookies": "^0.8.0",
|
||||
"croner": "^5.3.5",
|
||||
"cryptr": "^6.0.3",
|
||||
"dayjs": "^1.11.5",
|
||||
"dotenv": "^16.0.3",
|
||||
@@ -33,6 +35,7 @@
|
||||
"react-query": "^3.39.2",
|
||||
"react-timeago": "^7.1.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-window": "^1.8.8",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"sequelize": "^6.25.2",
|
||||
"sequelize-typescript": "^2.1.5",
|
||||
@@ -49,6 +52,7 @@
|
||||
"@types/react": "18.0.21",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"@types/react-timeago": "^4.1.3",
|
||||
"@types/react-window": "^1.8.5",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "8.25.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
@@ -755,6 +759,17 @@
|
||||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@googleapis/searchconsole": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@googleapis/searchconsole/-/searchconsole-1.0.0.tgz",
|
||||
"integrity": "sha512-ssdO6oQyS+AuZHJZY50aCso7orPPRR9Y9lgdAtzRh9VJdk8L/3nHz8ySwb/6AaF+FPK3PfkvGFPRsenvLe3S+A==",
|
||||
"dependencies": {
|
||||
"googleapis-common": "^6.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.10.7",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
|
||||
@@ -2056,6 +2071,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-window": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz",
|
||||
"integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
@@ -2780,6 +2804,14 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/bignumber.js": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
|
||||
"integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
@@ -3676,6 +3708,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/croner": {
|
||||
"version": "5.3.5",
|
||||
"resolved": "https://registry.npmjs.org/croner/-/croner-5.3.5.tgz",
|
||||
"integrity": "sha512-VqaplJOVtaGuAxhsw2HM9GG0DLpVi3W9IsV7bKMAC12O7wMIOcZpCYHBw+xkFABzT3xp5MvUqTfbTewCgxgN+A==",
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
@@ -5094,6 +5134,11 @@
|
||||
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"node_modules/external-editor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
|
||||
@@ -5164,6 +5209,11 @@
|
||||
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fast-text-encoding": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.6.tgz",
|
||||
"integrity": "sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w=="
|
||||
},
|
||||
"node_modules/fastest-levenshtein": {
|
||||
"version": "1.0.16",
|
||||
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
|
||||
@@ -5404,6 +5454,32 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/gaxios": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.0.2.tgz",
|
||||
"integrity": "sha512-TjtV2AJOZoMQqRYoy5eM8cCQogYwazWNYLQ72QB0kwa6vHHruYkGmhhyrlzbmgNHK1dNnuP2WSH81urfzyN2Og==",
|
||||
"dependencies": {
|
||||
"extend": "^3.0.2",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"is-stream": "^2.0.0",
|
||||
"node-fetch": "^2.6.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/gcp-metadata": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.1.0.tgz",
|
||||
"integrity": "sha512-QVjouEXvNVG/nde6VZDXXFTB02xQdztaumkWCHUff58qsdCS05/8OPh68fQ2QnArfAzZTwfEc979FHSHsU8EWg==",
|
||||
"dependencies": {
|
||||
"gaxios": "^5.0.0",
|
||||
"json-bigint": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
@@ -5761,6 +5837,90 @@
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/google-auth-library": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-8.7.0.tgz",
|
||||
"integrity": "sha512-1M0NG5VDIvJZEnstHbRdckLZESoJwguinwN8Dhae0j2ZKIQFIV63zxm6Fo6nM4xkgqUr2bbMtV5Dgo+Hy6oo0Q==",
|
||||
"dependencies": {
|
||||
"arrify": "^2.0.0",
|
||||
"base64-js": "^1.3.0",
|
||||
"ecdsa-sig-formatter": "^1.0.11",
|
||||
"fast-text-encoding": "^1.0.0",
|
||||
"gaxios": "^5.0.0",
|
||||
"gcp-metadata": "^5.0.0",
|
||||
"gtoken": "^6.1.0",
|
||||
"jws": "^4.0.0",
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/google-auth-library/node_modules/arrify": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
|
||||
"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/google-auth-library/node_modules/jwa": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
|
||||
"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
|
||||
"dependencies": {
|
||||
"buffer-equal-constant-time": "1.0.1",
|
||||
"ecdsa-sig-formatter": "1.0.11",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/google-auth-library/node_modules/jws": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
|
||||
"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
|
||||
"dependencies": {
|
||||
"jwa": "^2.0.0",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/google-p12-pem": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-4.0.1.tgz",
|
||||
"integrity": "sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==",
|
||||
"dependencies": {
|
||||
"node-forge": "^1.3.1"
|
||||
},
|
||||
"bin": {
|
||||
"gp12-pem": "build/src/bin/gp12-pem.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/googleapis-common": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/googleapis-common/-/googleapis-common-6.0.4.tgz",
|
||||
"integrity": "sha512-m4ErxGE8unR1z0VajT6AYk3s6a9gIMM6EkDZfkPnES8joeOlEtFEJeF8IyZkb0tjPXkktUfYrE4b3Li1DNyOwA==",
|
||||
"dependencies": {
|
||||
"extend": "^3.0.2",
|
||||
"gaxios": "^5.0.1",
|
||||
"google-auth-library": "^8.0.2",
|
||||
"qs": "^6.7.0",
|
||||
"url-template": "^2.0.8",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/googleapis-common/node_modules/uuid": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
|
||||
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
|
||||
@@ -5792,6 +5952,38 @@
|
||||
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gtoken": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-6.1.2.tgz",
|
||||
"integrity": "sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==",
|
||||
"dependencies": {
|
||||
"gaxios": "^5.0.1",
|
||||
"google-p12-pem": "^4.0.0",
|
||||
"jws": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gtoken/node_modules/jwa": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
|
||||
"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
|
||||
"dependencies": {
|
||||
"buffer-equal-constant-time": "1.0.1",
|
||||
"ecdsa-sig-formatter": "1.0.11",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/gtoken/node_modules/jws": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
|
||||
"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
|
||||
"dependencies": {
|
||||
"jwa": "^2.0.0",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/handlebars": {
|
||||
"version": "4.7.7",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
|
||||
@@ -6484,7 +6676,6 @@
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
|
||||
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
@@ -7697,6 +7888,14 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/json-bigint": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
|
||||
"integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
|
||||
"dependencies": {
|
||||
"bignumber.js": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/json-parse-better-errors": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
|
||||
@@ -8182,6 +8381,11 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/meow": {
|
||||
"version": "8.1.2",
|
||||
"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
|
||||
@@ -8818,6 +9022,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/node-forge": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
|
||||
"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
|
||||
"engines": {
|
||||
"node": ">= 6.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/node-gyp": {
|
||||
"version": "8.4.1",
|
||||
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
|
||||
@@ -9745,6 +9957,20 @@
|
||||
"teleport": ">=0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.11.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
|
||||
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/querystringify": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||
@@ -9883,6 +10109,22 @@
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-window": {
|
||||
"version": "1.8.8",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
|
||||
"integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"memoize-one": ">=3.1.1 <6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">8.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
@@ -11835,6 +12077,11 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url-template": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
|
||||
"integrity": "sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw=="
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
@@ -12742,6 +12989,14 @@
|
||||
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
|
||||
"optional": true
|
||||
},
|
||||
"@googleapis/searchconsole": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@googleapis/searchconsole/-/searchconsole-1.0.0.tgz",
|
||||
"integrity": "sha512-ssdO6oQyS+AuZHJZY50aCso7orPPRR9Y9lgdAtzRh9VJdk8L/3nHz8ySwb/6AaF+FPK3PfkvGFPRsenvLe3S+A==",
|
||||
"requires": {
|
||||
"googleapis-common": "^6.0.3"
|
||||
}
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.10.7",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
|
||||
@@ -13769,6 +14024,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-window": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz",
|
||||
"integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
@@ -14292,6 +14556,11 @@
|
||||
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
|
||||
"integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
|
||||
},
|
||||
"bignumber.js": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
|
||||
"integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig=="
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
@@ -14960,6 +15229,11 @@
|
||||
"yaml": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"croner": {
|
||||
"version": "5.3.5",
|
||||
"resolved": "https://registry.npmjs.org/croner/-/croner-5.3.5.tgz",
|
||||
"integrity": "sha512-VqaplJOVtaGuAxhsw2HM9GG0DLpVi3W9IsV7bKMAC12O7wMIOcZpCYHBw+xkFABzT3xp5MvUqTfbTewCgxgN+A=="
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
@@ -16030,6 +16304,11 @@
|
||||
"jest-util": "^29.3.1"
|
||||
}
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"external-editor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
|
||||
@@ -16092,6 +16371,11 @@
|
||||
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-text-encoding": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.6.tgz",
|
||||
"integrity": "sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w=="
|
||||
},
|
||||
"fastest-levenshtein": {
|
||||
"version": "1.0.16",
|
||||
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
|
||||
@@ -16261,6 +16545,26 @@
|
||||
"wide-align": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"gaxios": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.0.2.tgz",
|
||||
"integrity": "sha512-TjtV2AJOZoMQqRYoy5eM8cCQogYwazWNYLQ72QB0kwa6vHHruYkGmhhyrlzbmgNHK1dNnuP2WSH81urfzyN2Og==",
|
||||
"requires": {
|
||||
"extend": "^3.0.2",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"is-stream": "^2.0.0",
|
||||
"node-fetch": "^2.6.7"
|
||||
}
|
||||
},
|
||||
"gcp-metadata": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.1.0.tgz",
|
||||
"integrity": "sha512-QVjouEXvNVG/nde6VZDXXFTB02xQdztaumkWCHUff58qsdCS05/8OPh68fQ2QnArfAzZTwfEc979FHSHsU8EWg==",
|
||||
"requires": {
|
||||
"gaxios": "^5.0.0",
|
||||
"json-bigint": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
@@ -16538,6 +16842,76 @@
|
||||
"integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
|
||||
"requires": {}
|
||||
},
|
||||
"google-auth-library": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-8.7.0.tgz",
|
||||
"integrity": "sha512-1M0NG5VDIvJZEnstHbRdckLZESoJwguinwN8Dhae0j2ZKIQFIV63zxm6Fo6nM4xkgqUr2bbMtV5Dgo+Hy6oo0Q==",
|
||||
"requires": {
|
||||
"arrify": "^2.0.0",
|
||||
"base64-js": "^1.3.0",
|
||||
"ecdsa-sig-formatter": "^1.0.11",
|
||||
"fast-text-encoding": "^1.0.0",
|
||||
"gaxios": "^5.0.0",
|
||||
"gcp-metadata": "^5.0.0",
|
||||
"gtoken": "^6.1.0",
|
||||
"jws": "^4.0.0",
|
||||
"lru-cache": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"arrify": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
|
||||
"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug=="
|
||||
},
|
||||
"jwa": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
|
||||
"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
|
||||
"requires": {
|
||||
"buffer-equal-constant-time": "1.0.1",
|
||||
"ecdsa-sig-formatter": "1.0.11",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"jws": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
|
||||
"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
|
||||
"requires": {
|
||||
"jwa": "^2.0.0",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"google-p12-pem": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-4.0.1.tgz",
|
||||
"integrity": "sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==",
|
||||
"requires": {
|
||||
"node-forge": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"googleapis-common": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/googleapis-common/-/googleapis-common-6.0.4.tgz",
|
||||
"integrity": "sha512-m4ErxGE8unR1z0VajT6AYk3s6a9gIMM6EkDZfkPnES8joeOlEtFEJeF8IyZkb0tjPXkktUfYrE4b3Li1DNyOwA==",
|
||||
"requires": {
|
||||
"extend": "^3.0.2",
|
||||
"gaxios": "^5.0.1",
|
||||
"google-auth-library": "^8.0.2",
|
||||
"qs": "^6.7.0",
|
||||
"url-template": "^2.0.8",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
|
||||
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"gopd": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
|
||||
@@ -16563,6 +16937,37 @@
|
||||
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.6.0.tgz",
|
||||
"integrity": "sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw=="
|
||||
},
|
||||
"gtoken": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-6.1.2.tgz",
|
||||
"integrity": "sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==",
|
||||
"requires": {
|
||||
"gaxios": "^5.0.1",
|
||||
"google-p12-pem": "^4.0.0",
|
||||
"jws": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"jwa": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
|
||||
"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
|
||||
"requires": {
|
||||
"buffer-equal-constant-time": "1.0.1",
|
||||
"ecdsa-sig-formatter": "1.0.11",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"jws": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
|
||||
"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
|
||||
"requires": {
|
||||
"jwa": "^2.0.0",
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"handlebars": {
|
||||
"version": "4.7.7",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
|
||||
@@ -17039,8 +17444,7 @@
|
||||
"is-stream": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
|
||||
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
|
||||
},
|
||||
"is-string": {
|
||||
"version": "1.0.7",
|
||||
@@ -17959,6 +18363,14 @@
|
||||
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
|
||||
"dev": true
|
||||
},
|
||||
"json-bigint": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
|
||||
"integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
|
||||
"requires": {
|
||||
"bignumber.js": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"json-parse-better-errors": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
|
||||
@@ -18354,6 +18766,11 @@
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"meow": {
|
||||
"version": "8.1.2",
|
||||
"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
|
||||
@@ -18794,6 +19211,11 @@
|
||||
"whatwg-url": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
|
||||
"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
|
||||
},
|
||||
"node-gyp": {
|
||||
"version": "8.4.1",
|
||||
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
|
||||
@@ -19446,6 +19868,14 @@
|
||||
"integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.11.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
|
||||
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
|
||||
"requires": {
|
||||
"side-channel": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"querystringify": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||
@@ -19527,6 +19957,15 @@
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"react-window": {
|
||||
"version": "1.8.8",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
|
||||
"integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"memoize-one": ">=3.1.1 <6"
|
||||
}
|
||||
},
|
||||
"read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
@@ -20991,6 +21430,11 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"url-template": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
|
||||
"integrity": "sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw=="
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "serpbear",
|
||||
"version": "0.1.7",
|
||||
"version": "0.2.5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -9,12 +9,14 @@
|
||||
"cron": "node cron.js",
|
||||
"start:all": "concurrently npm:start npm:cron",
|
||||
"lint": "next lint",
|
||||
"lint:css": "stylelint styles/*.css",
|
||||
"test": "jest --watch --verbose",
|
||||
"test:ci": "jest --ci",
|
||||
"test:cv": "jest --coverage --coverageDirectory='coverage'",
|
||||
"release": "standard-version"
|
||||
},
|
||||
"dependencies": {
|
||||
"@googleapis/searchconsole": "^1.0.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/react-transition-group": "^4.4.5",
|
||||
"axios": "^1.1.3",
|
||||
@@ -23,6 +25,7 @@
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"concurrently": "^7.6.0",
|
||||
"cookies": "^0.8.0",
|
||||
"croner": "^5.3.5",
|
||||
"cryptr": "^6.0.3",
|
||||
"dayjs": "^1.11.5",
|
||||
"dotenv": "^16.0.3",
|
||||
@@ -40,6 +43,7 @@
|
||||
"react-query": "^3.39.2",
|
||||
"react-timeago": "^7.1.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-window": "^1.8.8",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"sequelize": "^6.25.2",
|
||||
"sequelize-typescript": "^2.1.5",
|
||||
@@ -56,6 +60,7 @@
|
||||
"@types/react": "18.0.21",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"@types/react-timeago": "^4.1.3",
|
||||
"@types/react-window": "^1.8.5",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "8.25.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
|
||||
@@ -5,7 +5,13 @@ import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
import { ReactQueryDevtools } from 'react-query/devtools';
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
const [queryClient] = React.useState(() => new QueryClient());
|
||||
const [queryClient] = React.useState(() => new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
}));
|
||||
return <QueryClientProvider client={queryClient}>
|
||||
<Component {...pageProps} />
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
|
||||
@@ -35,7 +35,7 @@ const cronRefreshkeywords = async (req: NextApiRequest, res: NextApiResponse<CRO
|
||||
|
||||
return res.status(200).json({ started: true });
|
||||
} catch (error) {
|
||||
console.log('ERROR cronRefreshkeywords: ', error);
|
||||
console.log('[ERROR] CRON Refreshing Keywords: ', error);
|
||||
return res.status(400).json({ started: false, error: 'CRON Error refreshing keywords!' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2,10 +2,11 @@ import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import db from '../../database/database';
|
||||
import Domain from '../../database/models/domain';
|
||||
import Keyword from '../../database/models/keyword';
|
||||
import getdomainStats from '../../utils/domains';
|
||||
import verifyUser from '../../utils/verifyUser';
|
||||
|
||||
type DomainsGetRes = {
|
||||
domains: Domain[]
|
||||
domains: DomainType[]
|
||||
error?: string|null,
|
||||
}
|
||||
|
||||
@@ -47,9 +48,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||
}
|
||||
|
||||
export const getDomains = async (req: NextApiRequest, res: NextApiResponse<DomainsGetRes>) => {
|
||||
const withStats = !!req?.query?.withstats;
|
||||
try {
|
||||
const allDomains: Domain[] = await Domain.findAll();
|
||||
return res.status(200).json({ domains: allDomains });
|
||||
const formattedDomains: DomainType[] = allDomains.map((el) => el.get({ plain: true }));
|
||||
const theDomains: DomainType[] = withStats ? await getdomainStats(formattedDomains) : allDomains;
|
||||
return res.status(200).json({ domains: theDomains });
|
||||
} catch (error) {
|
||||
return res.status(400).json({ domains: [], error: 'Error Getting Domains.' });
|
||||
}
|
||||
@@ -88,7 +92,7 @@ export const deleteDomain = async (req: NextApiRequest, res: NextApiResponse<Dom
|
||||
keywordsRemoved: removedKeywordCount,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('##### Delete Domain Error: ', error);
|
||||
console.log('[ERROR] Deleting Domain: ', req.query.domain, error);
|
||||
return res.status(400).json({ domainRemoved: 0, keywordsRemoved: 0, error: 'Error Deleting Domain' });
|
||||
}
|
||||
};
|
||||
@@ -100,11 +104,15 @@ export const updateDomain = async (req: NextApiRequest, res: NextApiResponse<Dom
|
||||
const { domain } = req.query || {};
|
||||
const { notification_interval, notification_emails } = req.body;
|
||||
|
||||
const domainToUpdate: Domain|null = await Domain.findOne({ where: { domain } });
|
||||
if (domainToUpdate) {
|
||||
domainToUpdate.set({ notification_interval, notification_emails });
|
||||
await domainToUpdate.save();
|
||||
try {
|
||||
const domainToUpdate: Domain|null = await Domain.findOne({ where: { domain } });
|
||||
if (domainToUpdate) {
|
||||
domainToUpdate.set({ notification_interval, notification_emails });
|
||||
await domainToUpdate.save();
|
||||
}
|
||||
return res.status(200).json({ domain: domainToUpdate });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] Updating Domain: ', req.query.domain, error);
|
||||
return res.status(400).json({ domain: null, error: 'Error Updating Domain' });
|
||||
}
|
||||
|
||||
return res.status(200).json({ domain: domainToUpdate });
|
||||
};
|
||||
|
||||
54
pages/api/insight.ts
Normal file
54
pages/api/insight.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import db from '../../database/database';
|
||||
import { getCountryInsight, getKeywordsInsight, getPagesInsight } from '../../utils/insight';
|
||||
import { fetchDomainSCData, readLocalSCData } from '../../utils/searchConsole';
|
||||
import verifyUser from '../../utils/verifyUser';
|
||||
|
||||
type SCInsightRes = {
|
||||
data: InsightDataType | null,
|
||||
error?: string|null,
|
||||
}
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
await db.sync();
|
||||
const authorized = verifyUser(req, res);
|
||||
if (authorized !== 'authorized') {
|
||||
return res.status(401).json({ error: authorized });
|
||||
}
|
||||
if (req.method === 'GET') {
|
||||
return getDomainSearchConsoleInsight(req, res);
|
||||
}
|
||||
return res.status(502).json({ error: 'Unrecognized Route.' });
|
||||
}
|
||||
|
||||
const getDomainSearchConsoleInsight = async (req: NextApiRequest, res: NextApiResponse<SCInsightRes>) => {
|
||||
if (!req.query.domain && typeof req.query.domain !== 'string') return res.status(400).json({ data: null, error: 'Domain is Missing.' });
|
||||
if (!!(process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL) === false) {
|
||||
return res.status(200).json({ data: null, error: 'Google Search Console Not Integrated' });
|
||||
}
|
||||
const domainname = (req.query.domain as string).replaceAll('-', '.').replaceAll('_', '-');
|
||||
const getInsightFromSCData = (localSCData: SCDomainDataType): InsightDataType => {
|
||||
const { stats = [] } = localSCData;
|
||||
const countries = getCountryInsight(localSCData);
|
||||
const keywords = getKeywordsInsight(localSCData);
|
||||
const pages = getPagesInsight(localSCData);
|
||||
return { pages, keywords, countries, stats };
|
||||
};
|
||||
|
||||
// First try and read the Local SC Domain Data file.
|
||||
const localSCData = await readLocalSCData(domainname);
|
||||
if (localSCData && localSCData.stats && localSCData.stats.length) {
|
||||
const response = getInsightFromSCData(localSCData);
|
||||
return res.status(200).json({ data: response });
|
||||
}
|
||||
|
||||
// If the Local SC Domain Data file does not exist, fetch from Googel Search Console.
|
||||
try {
|
||||
const scData = await fetchDomainSCData(domainname);
|
||||
const response = getInsightFromSCData(scData);
|
||||
return res.status(200).json({ data: response });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] Getting Domain Insight: ', domainname, error);
|
||||
return res.status(400).json({ data: null, error: 'Error Fetching Stats from Google Search Console.' });
|
||||
}
|
||||
};
|
||||
@@ -22,7 +22,6 @@ const getKeyword = async (req: NextApiRequest, res: NextApiResponse<KeywordGetRe
|
||||
if (!req.query.id && typeof req.query.id !== 'string') {
|
||||
return res.status(400).json({ error: 'Keyword ID is Required!' });
|
||||
}
|
||||
console.log('KEYWORD: ', req.query.id);
|
||||
|
||||
try {
|
||||
const query = { ID: parseInt((req.query.id as string), 10) };
|
||||
@@ -31,7 +30,7 @@ const getKeyword = async (req: NextApiRequest, res: NextApiResponse<KeywordGetRe
|
||||
const keywords = pareseKeyword && pareseKeyword[0] ? pareseKeyword[0] : null;
|
||||
return res.status(200).json({ keyword: keywords });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log('[ERROR] Getting Keyword: ', error);
|
||||
return res.status(400).json({ error: 'Error Loading Keyword' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -6,6 +6,7 @@ import { refreshAndUpdateKeywords } from './refresh';
|
||||
import { getAppSettings } from './settings';
|
||||
import verifyUser from '../../utils/verifyUser';
|
||||
import parseKeywords from '../../utils/parseKeywords';
|
||||
import { integrateKeywordSCData, readLocalSCData } from '../../utils/searchConsole';
|
||||
|
||||
type KeywordsGetResponse = {
|
||||
keywords?: KeywordType[],
|
||||
@@ -45,11 +46,13 @@ const getKeywords = async (req: NextApiRequest, res: NextApiResponse<KeywordsGet
|
||||
return res.status(400).json({ error: 'Domain is Required!' });
|
||||
}
|
||||
const domain = (req.query.domain as string).replaceAll('-', '.').replaceAll('_', '-');
|
||||
const integratedSC = process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL;
|
||||
const domainSCData = integratedSC ? await readLocalSCData(domain) : false;
|
||||
|
||||
try {
|
||||
const allKeywords:Keyword[] = await Keyword.findAll({ where: { domain } });
|
||||
const keywords: KeywordType[] = parseKeywords(allKeywords.map((e) => e.get({ plain: true })));
|
||||
const slimKeywords = keywords.map((keyword) => {
|
||||
const processedKeywords = keywords.map((keyword) => {
|
||||
const historyArray = Object.keys(keyword.history).map((dateKey:string) => ({
|
||||
date: new Date(dateKey).getTime(),
|
||||
dateRaw: dateKey,
|
||||
@@ -58,24 +61,26 @@ const getKeywords = async (req: NextApiRequest, res: NextApiResponse<KeywordsGet
|
||||
const historySorted = historyArray.sort((a, b) => a.date - b.date);
|
||||
const lastWeekHistory :KeywordHistory = {};
|
||||
historySorted.slice(-7).forEach((x:any) => { lastWeekHistory[x.dateRaw] = x.position; });
|
||||
return { ...keyword, lastResult: [], history: lastWeekHistory };
|
||||
const keywordWithSlimHistory = { ...keyword, lastResult: [], history: lastWeekHistory };
|
||||
const finalKeyword = domainSCData ? integrateKeywordSCData(keywordWithSlimHistory, domainSCData) : keywordWithSlimHistory;
|
||||
return finalKeyword;
|
||||
});
|
||||
console.log('getKeywords: ', keywords.length);
|
||||
return res.status(200).json({ keywords: slimKeywords });
|
||||
return res.status(200).json({ keywords: processedKeywords });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log('[ERROR] Getting Domain Keywords for ', domain, error);
|
||||
return res.status(400).json({ error: 'Error Loading Keywords for this Domain.' });
|
||||
}
|
||||
};
|
||||
|
||||
const addKeywords = async (req: NextApiRequest, res: NextApiResponse<KeywordsGetResponse>) => {
|
||||
const { keywords, device, country, domain, tags } = req.body;
|
||||
if (keywords && device && country) {
|
||||
const keywordsArray = keywords.replaceAll('\n', ',').split(',').map((item:string) => item.trim());
|
||||
const tagsArray = tags ? tags.split(',').map((item:string) => item.trim()) : [];
|
||||
const { keywords } = req.body;
|
||||
if (keywords && Array.isArray(keywords) && keywords.length > 0) {
|
||||
// const keywordsArray = keywords.replaceAll('\n', ',').split(',').map((item:string) => item.trim());
|
||||
const keywordsToAdd: any = []; // QuickFIX for bug: https://github.com/sequelize/sequelize-typescript/issues/936
|
||||
|
||||
keywordsArray.forEach((keyword: string) => {
|
||||
keywords.forEach((kwrd: KeywordAddPayload) => {
|
||||
const { keyword, device, country, domain, tags } = kwrd;
|
||||
const tagsArray = tags ? tags.split(',').map((item:string) => item.trim()) : [];
|
||||
const newKeyword = {
|
||||
keyword,
|
||||
device,
|
||||
@@ -101,6 +106,7 @@ const addKeywords = async (req: NextApiRequest, res: NextApiResponse<KeywordsGet
|
||||
refreshAndUpdateKeywords(newKeywords, settings); // Queue the SERP Scraping Process
|
||||
return res.status(201).json({ keywords: keywordsParsed });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] Adding New Keywords ', error);
|
||||
return res.status(400).json({ error: 'Could Not Add New Keyword!' });
|
||||
}
|
||||
} else {
|
||||
@@ -120,6 +126,7 @@ const deleteKeywords = async (req: NextApiRequest, res: NextApiResponse<Keywords
|
||||
const removedKeywordCount: number = await Keyword.destroy(removeQuery);
|
||||
return res.status(200).json({ keywordsRemoved: removedKeywordCount });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] Removing Keyword. ', error);
|
||||
return res.status(400).json({ error: 'Could Not Remove Keyword!' });
|
||||
}
|
||||
};
|
||||
@@ -146,17 +153,20 @@ const updateKeywords = async (req: NextApiRequest, res: NextApiResponse<Keywords
|
||||
}
|
||||
if (tags) {
|
||||
const tagsKeywordIDs = Object.keys(tags);
|
||||
const multipleKeywords = tagsKeywordIDs.length > 1;
|
||||
for (const keywordID of tagsKeywordIDs) {
|
||||
const response = await Keyword.findOne({ where: { ID: keywordID } });
|
||||
if (response) {
|
||||
await response.update({ tags: JSON.stringify(tags[keywordID]) });
|
||||
const selectedKeyword = await Keyword.findOne({ where: { ID: keywordID } });
|
||||
const currentTags = selectedKeyword && selectedKeyword.tags ? JSON.parse(selectedKeyword.tags) : [];
|
||||
const mergedTags = Array.from(new Set([...currentTags, ...tags[keywordID]]));
|
||||
if (selectedKeyword) {
|
||||
await selectedKeyword.update({ tags: JSON.stringify(multipleKeywords ? mergedTags : tags[keywordID]) });
|
||||
}
|
||||
}
|
||||
return res.status(200).json({ keywords });
|
||||
}
|
||||
return res.status(400).json({ error: 'Invalid Payload!' });
|
||||
} catch (error) {
|
||||
console.log('ERROR updateKeywords: ', error);
|
||||
console.log('[ERROR] Updating Keyword. ', error);
|
||||
return res.status(200).json({ error: 'Error Updating keywords!' });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -18,10 +18,11 @@ const loginUser = async (req: NextApiRequest, res: NextApiResponse<loginResponse
|
||||
if (!req.body.username || !req.body.password) {
|
||||
return res.status(401).json({ error: 'Username Password Missing' });
|
||||
}
|
||||
const userName = process.env.USER_NAME ? process.env.USER_NAME : process.env.USER;
|
||||
|
||||
if (req.body.username === process.env.USER
|
||||
if (req.body.username === userName
|
||||
&& req.body.password === process.env.PASSWORD && process.env.SECRET) {
|
||||
const token = jwt.sign({ user: process.env.USER }, process.env.SECRET);
|
||||
const token = jwt.sign({ user: userName }, process.env.SECRET);
|
||||
const cookies = new Cookies(req, res);
|
||||
const expireDate = new Date();
|
||||
const sessDuration = process.env.SESSION_DURATION;
|
||||
@@ -30,7 +31,7 @@ const loginUser = async (req: NextApiRequest, res: NextApiResponse<loginResponse
|
||||
return res.status(200).json({ success: true, error: null });
|
||||
}
|
||||
|
||||
const error = req.body.username !== process.env.USER ? 'Incorrect Username' : 'Incorrect Password';
|
||||
const error = req.body.username !== userName ? 'Incorrect Username' : 'Incorrect Password';
|
||||
|
||||
return res.status(401).json({ success: false, error });
|
||||
};
|
||||
|
||||
@@ -21,44 +21,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||
}
|
||||
|
||||
const notify = async (req: NextApiRequest, res: NextApiResponse<NotifyResponse>) => {
|
||||
const reqDomain = req?.query?.domain as string || '';
|
||||
try {
|
||||
const settings = await getAppSettings();
|
||||
const {
|
||||
smtp_server = '',
|
||||
smtp_port = '',
|
||||
smtp_username = '',
|
||||
smtp_password = '',
|
||||
notification_email = '',
|
||||
notification_email_from = '',
|
||||
} = settings;
|
||||
const { smtp_server = '', smtp_port = '', notification_email = '' } = settings;
|
||||
|
||||
if (!smtp_server || !smtp_port || !smtp_username || !smtp_password || !notification_email) {
|
||||
if (!smtp_server || !smtp_port || !notification_email) {
|
||||
return res.status(401).json({ success: false, error: 'SMTP has not been setup properly!' });
|
||||
}
|
||||
const fromEmail = `SerpBear <${notification_email_from || 'no-reply@serpbear.com'}>`;
|
||||
const transporter = nodeMailer.createTransport({
|
||||
host: smtp_server,
|
||||
port: parseInt(smtp_port, 10),
|
||||
auth: { user: smtp_username, pass: smtp_password },
|
||||
});
|
||||
|
||||
const allDomains: Domain[] = await Domain.findAll();
|
||||
|
||||
if (allDomains && allDomains.length > 0) {
|
||||
const domains = allDomains.map((el) => el.get({ plain: true }));
|
||||
for (const domain of domains) {
|
||||
if (domain.notification !== false) {
|
||||
const query = { where: { domain: domain.domain } };
|
||||
const domainKeywords:Keyword[] = await Keyword.findAll(query);
|
||||
const keywordsArray = domainKeywords.map((el) => el.get({ plain: true }));
|
||||
const keywords: KeywordType[] = parseKeywords(keywordsArray);
|
||||
await transporter.sendMail({
|
||||
from: fromEmail,
|
||||
to: domain.notification_emails || notification_email,
|
||||
subject: `[${domain.domain}] Keyword Positions Update`,
|
||||
html: await generateEmail(domain.domain, keywords),
|
||||
});
|
||||
// console.log(JSON.stringify(result, null, 4));
|
||||
if (reqDomain) {
|
||||
const theDomain = await Domain.findOne({ where: { domain: reqDomain } });
|
||||
if (theDomain) {
|
||||
await sendNotificationEmail(theDomain, settings);
|
||||
}
|
||||
} else {
|
||||
const allDomains: Domain[] = await Domain.findAll();
|
||||
if (allDomains && allDomains.length > 0) {
|
||||
const domains = allDomains.map((el) => el.get({ plain: true }));
|
||||
for (const domain of domains) {
|
||||
if (domain.notification !== false) {
|
||||
await sendNotificationEmail(domain, settings);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,3 +53,35 @@ const notify = async (req: NextApiRequest, res: NextApiResponse<NotifyResponse>)
|
||||
return res.status(401).json({ success: false, error: 'Error Sending Notification Email.' });
|
||||
}
|
||||
};
|
||||
|
||||
const sendNotificationEmail = async (domain: Domain, settings: SettingsType) => {
|
||||
const {
|
||||
smtp_server = '',
|
||||
smtp_port = '',
|
||||
smtp_username = '',
|
||||
smtp_password = '',
|
||||
notification_email = '',
|
||||
notification_email_from = '',
|
||||
} = settings;
|
||||
|
||||
const fromEmail = `SerpBear <${notification_email_from || 'no-reply@serpbear.com'}>`;
|
||||
const mailerSettings:any = { host: smtp_server, port: parseInt(smtp_port, 10) };
|
||||
if (smtp_username || smtp_password) {
|
||||
mailerSettings.auth = {};
|
||||
if (smtp_username) mailerSettings.auth.user = smtp_username;
|
||||
if (smtp_password) mailerSettings.auth.pass = smtp_password;
|
||||
}
|
||||
const transporter = nodeMailer.createTransport(mailerSettings);
|
||||
const domainName = domain.domain;
|
||||
const query = { where: { domain: domainName } };
|
||||
const domainKeywords:Keyword[] = await Keyword.findAll(query);
|
||||
const keywordsArray = domainKeywords.map((el) => el.get({ plain: true }));
|
||||
const keywords: KeywordType[] = parseKeywords(keywordsArray);
|
||||
const emailHTML = await generateEmail(domainName, keywords);
|
||||
await transporter.sendMail({
|
||||
from: fromEmail,
|
||||
to: domain.notification_emails || notification_email,
|
||||
subject: `[${domainName}] Keyword Positions Update`,
|
||||
html: emailHTML,
|
||||
}).catch((err:any) => console.log('[ERROR] Sending Notification Email for', domainName, err?.response || err));
|
||||
};
|
||||
|
||||
65
pages/api/searchconsole.ts
Normal file
65
pages/api/searchconsole.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import db from '../../database/database';
|
||||
import Domain from '../../database/models/domain';
|
||||
import { fetchDomainSCData, readLocalSCData } from '../../utils/searchConsole';
|
||||
import verifyUser from '../../utils/verifyUser';
|
||||
|
||||
type searchConsoleRes = {
|
||||
data: SCDomainDataType|null
|
||||
error?: string|null,
|
||||
}
|
||||
|
||||
type searchConsoleCRONRes = {
|
||||
status: string,
|
||||
error?: string|null,
|
||||
}
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
await db.sync();
|
||||
const authorized = verifyUser(req, res);
|
||||
if (authorized !== 'authorized') {
|
||||
return res.status(401).json({ error: authorized });
|
||||
}
|
||||
if (req.method === 'GET') {
|
||||
return getDomainSearchConsoleData(req, res);
|
||||
}
|
||||
if (req.method === 'POST') {
|
||||
return cronRefreshSearchConsoleData(req, res);
|
||||
}
|
||||
return res.status(502).json({ error: 'Unrecognized Route.' });
|
||||
}
|
||||
|
||||
const getDomainSearchConsoleData = async (req: NextApiRequest, res: NextApiResponse<searchConsoleRes>) => {
|
||||
if (!req.query.domain && typeof req.query.domain !== 'string') return res.status(400).json({ data: null, error: 'Domain is Missing.' });
|
||||
if (!!(process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL) === false) {
|
||||
return res.status(200).json({ data: null, error: 'Google Search Console Not Integrated' });
|
||||
}
|
||||
const domainname = (req.query.domain as string).replaceAll('-', '.').replaceAll('_', '-');
|
||||
const localSCData = await readLocalSCData(domainname);
|
||||
console.log(localSCData && localSCData.thirtyDays && localSCData.thirtyDays.length);
|
||||
|
||||
if (localSCData && localSCData.thirtyDays && localSCData.thirtyDays.length) {
|
||||
return res.status(200).json({ data: localSCData });
|
||||
}
|
||||
try {
|
||||
const scData = await fetchDomainSCData(domainname);
|
||||
return res.status(200).json({ data: scData });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] Getting Search Console Data for: ', domainname, error);
|
||||
return res.status(400).json({ data: null, error: 'Error Fetching Data from Google Search Console.' });
|
||||
}
|
||||
};
|
||||
|
||||
const cronRefreshSearchConsoleData = async (req: NextApiRequest, res: NextApiResponse<searchConsoleCRONRes>) => {
|
||||
try {
|
||||
const allDomainsRaw = await Domain.findAll();
|
||||
const Domains: Domain[] = allDomainsRaw.map((el) => el.get({ plain: true }));
|
||||
for (const domain of Domains) {
|
||||
await fetchDomainSCData(domain.domain);
|
||||
}
|
||||
return res.status(200).json({ status: 'completed' });
|
||||
} catch (error) {
|
||||
console.log('[ERROR] CRON Updating Search Console Data. ', error);
|
||||
return res.status(400).json({ status: 'failed', error: 'Error Fetching Data from Google Search Console.' });
|
||||
}
|
||||
};
|
||||
@@ -1,7 +1,9 @@
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import Cryptr from 'cryptr';
|
||||
import getConfig from 'next/config';
|
||||
import { writeFile, readFile } from 'fs/promises';
|
||||
import verifyUser from '../../utils/verifyUser';
|
||||
import allScrapers from '../../scrapers/index';
|
||||
|
||||
type SettingsGetResponse = {
|
||||
settings?: object | null,
|
||||
@@ -25,7 +27,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||
const getSettings = async (req: NextApiRequest, res: NextApiResponse<SettingsGetResponse>) => {
|
||||
const settings = await getAppSettings();
|
||||
if (settings) {
|
||||
return res.status(200).json({ settings });
|
||||
const { publicRuntimeConfig } = getConfig();
|
||||
const version = publicRuntimeConfig?.version;
|
||||
return res.status(200).json({ settings: { ...settings, version } });
|
||||
}
|
||||
return res.status(400).json({ error: 'Error Loading Settings!' });
|
||||
};
|
||||
@@ -45,7 +49,7 @@ const updateSettings = async (req: NextApiRequest, res: NextApiResponse<Settings
|
||||
await writeFile(`${process.cwd()}/data/settings.json`, JSON.stringify(securedSettings), { encoding: 'utf-8' });
|
||||
return res.status(200).json({ settings });
|
||||
} catch (error) {
|
||||
console.log('ERROR updateSettings: ', error);
|
||||
console.log('[ERROR] Updating App Settings. ', error);
|
||||
return res.status(200).json({ error: 'Error Updating Settings!' });
|
||||
}
|
||||
};
|
||||
@@ -60,14 +64,20 @@ export const getAppSettings = async () : Promise<SettingsType> => {
|
||||
const cryptr = new Cryptr(process.env.SECRET as string);
|
||||
const scaping_api = settings.scaping_api ? cryptr.decrypt(settings.scaping_api) : '';
|
||||
const smtp_password = settings.smtp_password ? cryptr.decrypt(settings.smtp_password) : '';
|
||||
decryptedSettings = { ...settings, scaping_api, smtp_password };
|
||||
decryptedSettings = {
|
||||
...settings,
|
||||
scaping_api,
|
||||
smtp_password,
|
||||
search_console_integrated: !!(process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL),
|
||||
available_scapers: allScrapers.map((scraper) => ({ label: scraper.name, value: scraper.id })),
|
||||
};
|
||||
} catch (error) {
|
||||
console.log('Error Decrypting Settings API Keys!');
|
||||
}
|
||||
|
||||
return decryptedSettings;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log('[ERROR] Getting App Settings. ', error);
|
||||
const settings = {
|
||||
scraper_type: 'none',
|
||||
notification_interval: 'never',
|
||||
|
||||
@@ -29,19 +29,19 @@ const SingleDomain: NextPage = () => {
|
||||
const { data: domainsData } = useFetchDomains(router);
|
||||
const { keywordsData, keywordsLoading } = useFetchKeywords(router, setKeywordSPollInterval, keywordSPollInterval);
|
||||
|
||||
const theDomains: Domain[] = (domainsData && domainsData.domains) || [];
|
||||
const theDomains: DomainType[] = (domainsData && domainsData.domains) || [];
|
||||
const theKeywords: KeywordType[] = keywordsData && keywordsData.keywords;
|
||||
|
||||
const activDomain: Domain|null = useMemo(() => {
|
||||
let active:Domain|null = null;
|
||||
const activDomain: DomainType|null = useMemo(() => {
|
||||
let active:DomainType|null = null;
|
||||
if (domainsData?.domains && router.query?.slug) {
|
||||
active = domainsData.domains.find((x:Domain) => x.slug === router.query.slug);
|
||||
active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug);
|
||||
}
|
||||
return active;
|
||||
}, [router.query.slug, domainsData]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('appSettings.settings: ', appSettings && appSettings.settings);
|
||||
// console.log('appSettings.settings: ', appSettings && appSettings.settings);
|
||||
if (appSettings && appSettings.settings && (!appSettings.settings.scraper_type || (appSettings.settings.scraper_type === 'none'))) {
|
||||
setNoScrapprtError(true);
|
||||
}
|
||||
@@ -64,7 +64,7 @@ const SingleDomain: NextPage = () => {
|
||||
<TopBar showSettings={() => setShowSettings(true)} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="flex w-full max-w-7xl mx-auto">
|
||||
<Sidebar domains={theDomains} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="domain_kewywords px-5 pt-10 lg:px-0 lg:pt-20 w-full">
|
||||
<div className="domain_kewywords px-5 pt-10 lg:px-0 lg:pt-8 w-full">
|
||||
{activDomain && activDomain.domain
|
||||
&& <DomainHeader
|
||||
domain={activDomain}
|
||||
@@ -72,13 +72,15 @@ const SingleDomain: NextPage = () => {
|
||||
showAddModal={setShowAddKeywords}
|
||||
showSettingsModal={setShowDomainSettings}
|
||||
exportCsv={() => exportCSV(theKeywords, activDomain.domain)}
|
||||
/>}
|
||||
/>
|
||||
}
|
||||
<KeywordsTable
|
||||
isLoading={keywordsLoading}
|
||||
domain={activDomain}
|
||||
keywords={theKeywords}
|
||||
showAddModal={showAddKeywords}
|
||||
setShowAddModal={setShowAddKeywords}
|
||||
isConsoleIntegrated={!!(appSettings && appSettings?.settings?.search_console_integrated) }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +92,6 @@ const SingleDomain: NextPage = () => {
|
||||
<CSSTransition in={showDomainSettings} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<DomainSettings
|
||||
domain={showDomainSettings && theDomains && activDomain && activDomain.domain ? activDomain : false}
|
||||
domains={theDomains}
|
||||
closeModal={setShowDomainSettings}
|
||||
/>
|
||||
</CSSTransition>
|
||||
|
||||
90
pages/domain/console/[slug]/index.tsx
Normal file
90
pages/domain/console/[slug]/index.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import type { NextPage } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
// import { useQuery } from 'react-query';
|
||||
// import toast from 'react-hot-toast';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Sidebar from '../../../../components/common/Sidebar';
|
||||
import TopBar from '../../../../components/common/TopBar';
|
||||
import DomainHeader from '../../../../components/domains/DomainHeader';
|
||||
import AddDomain from '../../../../components/domains/AddDomain';
|
||||
import DomainSettings from '../../../../components/domains/DomainSettings';
|
||||
import exportCSV from '../../../../utils/exportcsv';
|
||||
import Settings from '../../../../components/settings/Settings';
|
||||
import { useFetchDomains } from '../../../../services/domains';
|
||||
import { useFetchSCKeywords } from '../../../../services/searchConsole';
|
||||
import SCKeywordsTable from '../../../../components/keywords/SCKeywordsTable';
|
||||
import { useFetchSettings } from '../../../../services/settings';
|
||||
|
||||
const DiscoverPage: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const [showDomainSettings, setShowDomainSettings] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showAddDomain, setShowAddDomain] = useState(false);
|
||||
const [scDateFilter, setSCDateFilter] = useState('thirtyDays');
|
||||
const { data: appSettings } = useFetchSettings();
|
||||
const { data: domainsData } = useFetchDomains(router);
|
||||
const scConnected = !!(appSettings && appSettings?.settings?.search_console_integrated);
|
||||
const { data: keywordsData, isLoading: keywordsLoading, isFetching } = useFetchSCKeywords(router, !!(domainsData?.domains?.length) && scConnected);
|
||||
|
||||
const theDomains: DomainType[] = (domainsData && domainsData.domains) || [];
|
||||
const theKeywords: SearchAnalyticsItem[] = keywordsData?.data && keywordsData.data[scDateFilter] ? keywordsData.data[scDateFilter] : [];
|
||||
|
||||
const activDomain: DomainType|null = useMemo(() => {
|
||||
let active:DomainType|null = null;
|
||||
if (domainsData?.domains && router.query?.slug) {
|
||||
active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug);
|
||||
}
|
||||
return active;
|
||||
}, [router.query.slug, domainsData]);
|
||||
|
||||
return (
|
||||
<div className="Domain ">
|
||||
{activDomain && activDomain.domain
|
||||
&& <Head>
|
||||
<title>{`${activDomain.domain} - SerpBear` } </title>
|
||||
</Head>
|
||||
}
|
||||
<TopBar showSettings={() => setShowSettings(true)} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="flex w-full max-w-7xl mx-auto">
|
||||
<Sidebar domains={theDomains} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="domain_kewywords px-5 pt-10 lg:px-0 lg:pt-8 w-full">
|
||||
{activDomain && activDomain.domain
|
||||
&& <DomainHeader
|
||||
domain={activDomain}
|
||||
domains={theDomains}
|
||||
showAddModal={() => console.log('XXXXX')}
|
||||
showSettingsModal={setShowDomainSettings}
|
||||
exportCsv={() => exportCSV(theKeywords, activDomain.domain, scDateFilter)}
|
||||
scFilter={scDateFilter}
|
||||
setScFilter={(item:string) => setSCDateFilter(item)}
|
||||
/>
|
||||
}
|
||||
<SCKeywordsTable
|
||||
isLoading={keywordsLoading || isFetching}
|
||||
domain={activDomain}
|
||||
keywords={theKeywords}
|
||||
isConsoleIntegrated={scConnected}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CSSTransition in={showAddDomain} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<AddDomain closeModal={() => setShowAddDomain(false)} />
|
||||
</CSSTransition>
|
||||
|
||||
<CSSTransition in={showDomainSettings} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<DomainSettings
|
||||
domain={showDomainSettings && theDomains && activDomain && activDomain.domain ? activDomain : false}
|
||||
closeModal={setShowDomainSettings}
|
||||
/>
|
||||
</CSSTransition>
|
||||
<CSSTransition in={showSettings} timeout={300} classNames="settings_anim" unmountOnExit mountOnEnter>
|
||||
<Settings closeSettings={() => setShowSettings(false)} />
|
||||
</CSSTransition>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscoverPage;
|
||||
90
pages/domain/insight/[slug]/index.tsx
Normal file
90
pages/domain/insight/[slug]/index.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import type { NextPage } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
// import { useQuery } from 'react-query';
|
||||
// import toast from 'react-hot-toast';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Sidebar from '../../../../components/common/Sidebar';
|
||||
import TopBar from '../../../../components/common/TopBar';
|
||||
import DomainHeader from '../../../../components/domains/DomainHeader';
|
||||
import AddDomain from '../../../../components/domains/AddDomain';
|
||||
import DomainSettings from '../../../../components/domains/DomainSettings';
|
||||
import exportCSV from '../../../../utils/exportcsv';
|
||||
import Settings from '../../../../components/settings/Settings';
|
||||
import { useFetchDomains } from '../../../../services/domains';
|
||||
import { useFetchSCInsight } from '../../../../services/searchConsole';
|
||||
import SCInsight from '../../../../components/insight/Insight';
|
||||
import { useFetchSettings } from '../../../../services/settings';
|
||||
|
||||
const InsightPage: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const [showDomainSettings, setShowDomainSettings] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showAddDomain, setShowAddDomain] = useState(false);
|
||||
const [scDateFilter, setSCDateFilter] = useState('thirtyDays');
|
||||
const { data: appSettings } = useFetchSettings();
|
||||
const { data: domainsData } = useFetchDomains(router);
|
||||
const scConnected = !!(appSettings && appSettings?.settings?.search_console_integrated);
|
||||
const { data: insightData } = useFetchSCInsight(router, !!(domainsData?.domains?.length) && scConnected);
|
||||
|
||||
const theDomains: DomainType[] = (domainsData && domainsData.domains) || [];
|
||||
const theInsight: InsightDataType = insightData && insightData.data ? insightData.data : {};
|
||||
|
||||
const activDomain: DomainType|null = useMemo(() => {
|
||||
let active:DomainType|null = null;
|
||||
if (domainsData?.domains && router.query?.slug) {
|
||||
active = domainsData.domains.find((x:DomainType) => x.slug === router.query.slug);
|
||||
}
|
||||
return active;
|
||||
}, [router.query.slug, domainsData]);
|
||||
|
||||
return (
|
||||
<div className="Domain ">
|
||||
{activDomain && activDomain.domain
|
||||
&& <Head>
|
||||
<title>{`${activDomain.domain} - SerpBear` } </title>
|
||||
</Head>
|
||||
}
|
||||
<TopBar showSettings={() => setShowSettings(true)} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="flex w-full max-w-7xl mx-auto">
|
||||
<Sidebar domains={theDomains} showAddModal={() => setShowAddDomain(true)} />
|
||||
<div className="domain_kewywords px-5 pt-10 lg:px-0 lg:pt-8 w-full">
|
||||
{activDomain && activDomain.domain
|
||||
&& <DomainHeader
|
||||
domain={activDomain}
|
||||
domains={theDomains}
|
||||
showAddModal={() => console.log('XXXXX')}
|
||||
showSettingsModal={setShowDomainSettings}
|
||||
exportCsv={() => exportCSV([], activDomain.domain, scDateFilter)}
|
||||
scFilter={scDateFilter}
|
||||
setScFilter={(item:string) => setSCDateFilter(item)}
|
||||
/>
|
||||
}
|
||||
<SCInsight
|
||||
isLoading={false}
|
||||
domain={activDomain}
|
||||
insight={theInsight}
|
||||
isConsoleIntegrated={scConnected}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CSSTransition in={showAddDomain} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<AddDomain closeModal={() => setShowAddDomain(false)} />
|
||||
</CSSTransition>
|
||||
|
||||
<CSSTransition in={showDomainSettings} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<DomainSettings
|
||||
domain={showDomainSettings && theDomains && activDomain && activDomain.domain ? activDomain : false}
|
||||
closeModal={setShowDomainSettings}
|
||||
/>
|
||||
</CSSTransition>
|
||||
<CSSTransition in={showSettings} timeout={300} classNames="settings_anim" unmountOnExit mountOnEnter>
|
||||
<Settings closeSettings={() => setShowSettings(false)} />
|
||||
</CSSTransition>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InsightPage;
|
||||
122
pages/domains/index.tsx
Normal file
122
pages/domains/index.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { NextPage } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import TopBar from '../../components/common/TopBar';
|
||||
import AddDomain from '../../components/domains/AddDomain';
|
||||
import Settings from '../../components/settings/Settings';
|
||||
import { useFetchSettings } from '../../services/settings';
|
||||
import { useFetchDomains } from '../../services/domains';
|
||||
import DomainItem from '../../components/domains/DomainItem';
|
||||
import Icon from '../../components/common/Icon';
|
||||
|
||||
type thumbImages = { [domain:string] : string }
|
||||
|
||||
const SingleDomain: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const [noScrapprtError, setNoScrapprtError] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showAddDomain, setShowAddDomain] = useState(false);
|
||||
const [domainThumbs, setDomainThumbs] = useState<thumbImages>({});
|
||||
const { data: appSettings } = useFetchSettings();
|
||||
const { data: domainsData, isLoading } = useFetchDomains(router, true);
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('Domains Data: ', domainsData);
|
||||
if (domainsData?.domains && domainsData.domains.length > 0) {
|
||||
const domainThumbsRaw = localStorage.getItem('domainThumbs');
|
||||
const domThumbs = domainThumbsRaw ? JSON.parse(domainThumbsRaw) : {};
|
||||
domainsData.domains.forEach(async (domain:DomainType) => {
|
||||
if (domain.domain) {
|
||||
if (!domThumbs[domain.domain]) {
|
||||
const domainImageBlob = await fetch(`https://image.thum.io/get/auth/66909-serpbear/maxAge/96/width/200/https://${domain.domain}`).then((res) => res.blob());
|
||||
if (domainImageBlob) {
|
||||
const reader = new FileReader();
|
||||
await new Promise((resolve, reject) => {
|
||||
reader.onload = resolve;
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(domainImageBlob);
|
||||
});
|
||||
const imageBase: string = reader.result && typeof reader.result === 'string' ? reader.result : '';
|
||||
localStorage.setItem('domainThumbs', JSON.stringify({ ...domThumbs, [domain.domain]: imageBase }));
|
||||
setDomainThumbs((currentThumbs) => ({ ...currentThumbs, [domain.domain]: imageBase }));
|
||||
}
|
||||
} else {
|
||||
setDomainThumbs((currentThumbs) => ({ ...currentThumbs, [domain.domain]: domThumbs[domain.domain] }));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [domainsData]);
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('appSettings.settings: ', appSettings && appSettings.settings);
|
||||
if (appSettings && appSettings.settings && (!appSettings.settings.scraper_type || (appSettings.settings.scraper_type === 'none'))) {
|
||||
setNoScrapprtError(true);
|
||||
}
|
||||
}, [appSettings]);
|
||||
|
||||
return (
|
||||
<div className="Domain flex flex-col min-h-screen">
|
||||
{noScrapprtError && (
|
||||
<div className=' p-3 bg-red-600 text-white text-sm text-center'>
|
||||
A Scrapper/Proxy has not been set up Yet. Open Settings to set it up and start using the app.
|
||||
</div>
|
||||
)}
|
||||
<Head>
|
||||
<title>Domains - SerpBear</title>
|
||||
</Head>
|
||||
<TopBar showSettings={() => setShowSettings(true)} showAddModal={() => setShowAddDomain(true)} />
|
||||
|
||||
<div className="flex flex-col w-full max-w-5xl mx-auto p-6 lg:mt-24 lg:p-0">
|
||||
<div className='flex justify-between mb-2 items-center'>
|
||||
<div className=' text-sm'>{domainsData?.domains?.length || 0} Domains</div>
|
||||
<div>
|
||||
<button
|
||||
className={'ml-2 inline-block py-2 text-blue-700 font-bold text-sm'}
|
||||
onClick={() => setShowAddDomain(true)}>
|
||||
<span
|
||||
className='text-center leading-4 mr-2 inline-block rounded-full w-7 h-7 pt-1 bg-blue-700 text-white font-bold text-lg'>+</span>
|
||||
<i className=' not-italic hidden lg:inline-block'>Add Domain</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex w-full flex-col mb-8'>
|
||||
{domainsData?.domains && domainsData.domains.map((domain:DomainType) => {
|
||||
return <DomainItem
|
||||
key={domain.ID}
|
||||
domain={domain}
|
||||
selected={false}
|
||||
isConsoleIntegrated={!!(appSettings && appSettings?.settings?.search_console_integrated) }
|
||||
thumb={domainThumbs[domain.domain]}
|
||||
// isConsoleIntegrated={false}
|
||||
/>;
|
||||
})}
|
||||
{isLoading && (
|
||||
<div className='noDomains mt-4 p-5 py-12 rounded border text-center bg-white text-sm'>
|
||||
<Icon type="loading" /> Loading Domains...
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && domainsData && domainsData.domains && domainsData.domains.length === 0 && (
|
||||
<div className='noDomains mt-4 p-5 py-12 rounded border text-center bg-white text-sm'>
|
||||
No Domains Found. Add a Domain to get started!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CSSTransition in={showAddDomain} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
|
||||
<AddDomain closeModal={() => setShowAddDomain(false)} />
|
||||
</CSSTransition>
|
||||
<CSSTransition in={showSettings} timeout={300} classNames="settings_anim" unmountOnExit mountOnEnter>
|
||||
<Settings closeSettings={() => setShowSettings(false)} />
|
||||
</CSSTransition>
|
||||
<footer className='text-center flex flex-1 justify-center pb-5 items-end'>
|
||||
<span className='text-gray-500 text-xs'><a href='https://github.com/towfiqi/serpbear' target="_blank" rel='noreferrer'>SerpBear v{appSettings?.settings?.version || '0.0.0'}</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleDomain;
|
||||
@@ -1,37 +1,14 @@
|
||||
import type { NextPage } from 'next';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import Icon from '../components/common/Icon';
|
||||
import AddDomain from '../components/domains/AddDomain';
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [domains, setDomains] = useState<Domain[]>([]);
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`${window.location.origin}/api/domains`)
|
||||
.then((result) => {
|
||||
if (result.status === 401) {
|
||||
router.push('/login');
|
||||
}
|
||||
return result.json();
|
||||
})
|
||||
.then((domainsRes:any) => {
|
||||
if (domainsRes?.domains && domainsRes.domains.length > 0) {
|
||||
const firstDomainItem = domainsRes.domains[0].slug;
|
||||
setDomains(domainsRes.domains);
|
||||
router.push(`/domain/${firstDomainItem}`);
|
||||
}
|
||||
setLoading(false);
|
||||
return false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
router.push('/domains');
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
@@ -46,7 +23,6 @@ const Home: NextPage = () => {
|
||||
<Icon type='loading' size={36} color="#999" />
|
||||
</main>
|
||||
<Toaster position='bottom-center' containerClassName="react_toaster" />
|
||||
{!loading && domains.length === 0 && <AddDomain closeModal={() => console.log('Cannot Close Modal!')} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
13
scrapers/index.ts
Normal file
13
scrapers/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import scrapingAnt from './services/scrapingant';
|
||||
import scrapingRobot from './services/scrapingrobot';
|
||||
import serpapi from './services/serpapi';
|
||||
import serply from './services/serply';
|
||||
import proxy from './services/proxy';
|
||||
|
||||
export default [
|
||||
scrapingRobot,
|
||||
scrapingAnt,
|
||||
serpapi,
|
||||
serply,
|
||||
proxy,
|
||||
];
|
||||
35
scrapers/services/proxy.ts
Normal file
35
scrapers/services/proxy.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import cheerio from 'cheerio';
|
||||
|
||||
const proxy:ScraperSettings = {
|
||||
id: 'proxy',
|
||||
name: 'Proxy',
|
||||
website: '',
|
||||
resultObjectKey: 'data',
|
||||
headers: () => {
|
||||
return { Accept: 'gzip,deflate,compress;' };
|
||||
},
|
||||
scrapeURL: (keyword) => {
|
||||
return `https://www.google.com/search?num=100&q=${encodeURI(keyword.keyword)}`;
|
||||
},
|
||||
serpExtractor: (content) => {
|
||||
const extractedResult = [];
|
||||
|
||||
const $ = cheerio.load(content);
|
||||
let lastPosition = 0;
|
||||
const mainContent = $('body').find('#main');
|
||||
const children = $(mainContent).find('h3');
|
||||
|
||||
for (let index = 0; index < children.length; index += 1) {
|
||||
const title = $(children[index]).text();
|
||||
const url = $(children[index]).closest('a').attr('href');
|
||||
const cleanedURL = url ? url.replaceAll(/^.+?(?=https:|$)/g, '').replaceAll(/(&).*/g, '') : '';
|
||||
if (title && url) {
|
||||
lastPosition += 1;
|
||||
extractedResult.push({ title, url: cleanedURL, position: lastPosition });
|
||||
}
|
||||
}
|
||||
return extractedResult;
|
||||
},
|
||||
};
|
||||
|
||||
export default proxy;
|
||||
19
scrapers/services/scrapingant.ts
Normal file
19
scrapers/services/scrapingant.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
const scrapingAnt:ScraperSettings = {
|
||||
id: 'scrapingant',
|
||||
name: 'ScrapingAnt',
|
||||
website: 'scrapingant.com',
|
||||
headers: (keyword) => {
|
||||
// eslint-disable-next-line max-len
|
||||
const mobileAgent = 'Mozilla/5.0 (Linux; Android 10; SM-G996U Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Mobile Safari/537.36';
|
||||
return keyword && keyword.device === 'mobile' ? { 'Ant-User-Agent': mobileAgent } : {};
|
||||
},
|
||||
scrapeURL: (keyword, settings, countryData) => {
|
||||
const scraperCountries = ['AE', 'BR', 'CN', 'DE', 'ES', 'FR', 'GB', 'HK', 'PL', 'IN', 'IT', 'IL', 'JP', 'NL', 'RU', 'SA', 'US', 'CZ'];
|
||||
const country = scraperCountries.includes(keyword.country.toUpperCase()) ? keyword.country : 'US';
|
||||
const lang = countryData[country][2];
|
||||
return `https://api.scrapingant.com/v2/extended?url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fnum%3D100%26hl%3D${lang}%26q%3D${encodeURI(keyword.keyword)}&x-api-key=${settings.scaping_api}&proxy_country=${country}&browser=false`;
|
||||
},
|
||||
resultObjectKey: 'result',
|
||||
};
|
||||
|
||||
export default scrapingAnt;
|
||||
13
scrapers/services/scrapingrobot.ts
Normal file
13
scrapers/services/scrapingrobot.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
const scrapingRobot:ScraperSettings = {
|
||||
id: 'scrapingrobot',
|
||||
name: 'Scraping Robot',
|
||||
website: 'scrapingrobot.com',
|
||||
scrapeURL: (keyword, settings, countryData) => {
|
||||
const country = keyword.country || 'US';
|
||||
const lang = countryData[country][2];
|
||||
return `https://api.scrapingrobot.com/?token=${settings.scaping_api}&proxyCountry=${country}&render=false${keyword.device === 'mobile' ? '&mobile=true' : ''}&url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fnum%3D100%26hl%3D${lang}%26q%3D${encodeURI(keyword.keyword)}`;
|
||||
},
|
||||
resultObjectKey: 'result',
|
||||
};
|
||||
|
||||
export default scrapingRobot;
|
||||
38
scrapers/services/serpapi.ts
Normal file
38
scrapers/services/serpapi.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
interface SerpApiResult {
|
||||
title: string,
|
||||
link: string,
|
||||
position: number,
|
||||
}
|
||||
|
||||
const serpapi:ScraperSettings = {
|
||||
id: 'serpapi',
|
||||
name: 'SerpApi.com',
|
||||
website: 'serpapi.com',
|
||||
headers: (keyword, settings) => {
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'X-API-Key': settings.scaping_api,
|
||||
};
|
||||
},
|
||||
scrapeURL: (keyword, settings) => {
|
||||
return `https://serpapi.com/search?q=${encodeURI(keyword.keyword)}&num=100&gl=${keyword.country}&device=${keyword.device}&api_key=${settings.scaping_api}`;
|
||||
},
|
||||
resultObjectKey: 'organic_results',
|
||||
serpExtractor: (content) => {
|
||||
const extractedResult = [];
|
||||
const results: SerpApiResult[] = (typeof content === 'string') ? JSON.parse(content) : content as SerpApiResult[];
|
||||
|
||||
for (const { link, title, position } of results) {
|
||||
if (title && link) {
|
||||
extractedResult.push({
|
||||
title,
|
||||
url: link,
|
||||
position,
|
||||
});
|
||||
}
|
||||
}
|
||||
return extractedResult;
|
||||
},
|
||||
};
|
||||
|
||||
export default serpapi;
|
||||
42
scrapers/services/serply.ts
Normal file
42
scrapers/services/serply.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
interface SerplyResult {
|
||||
title: string,
|
||||
link: string,
|
||||
realPosition: number,
|
||||
}
|
||||
const scraperCountries = ['US', 'CA', 'IE', 'GB', 'FR', 'DE', 'SE', 'IN', 'JP', 'KR', 'SG', 'AU', 'BR'];
|
||||
|
||||
const serply:ScraperSettings = {
|
||||
id: 'serply',
|
||||
name: 'Serply',
|
||||
website: 'serply.io',
|
||||
headers: (keyword, settings) => {
|
||||
const country = scraperCountries.includes(keyword.country.toUpperCase()) ? keyword.country : 'US';
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'X-User-Agent': keyword.device === 'mobile' ? 'mobile' : 'desktop',
|
||||
'X-Api-Key': settings.scaping_api,
|
||||
'X-Proxy-Location': country,
|
||||
};
|
||||
},
|
||||
scrapeURL: (keyword) => {
|
||||
const country = scraperCountries.includes(keyword.country.toUpperCase()) ? keyword.country : 'US';
|
||||
return `https://api.serply.io/v1/search/q=${encodeURI(keyword.keyword)}&num=100&hl=${country}`;
|
||||
},
|
||||
resultObjectKey: 'result',
|
||||
serpExtractor: (content) => {
|
||||
const extractedResult = [];
|
||||
const results: SerplyResult[] = (typeof content === 'string') ? JSON.parse(content) : content as SerplyResult[];
|
||||
for (const result of results) {
|
||||
if (result.title && result.link) {
|
||||
extractedResult.push({
|
||||
title: result.title,
|
||||
url: result.link,
|
||||
position: result.realPosition,
|
||||
});
|
||||
}
|
||||
}
|
||||
return extractedResult;
|
||||
},
|
||||
};
|
||||
|
||||
export default serply;
|
||||
@@ -4,11 +4,11 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||
|
||||
type UpdatePayload = {
|
||||
domainSettings: DomainSettings,
|
||||
domain: Domain
|
||||
domain: DomainType
|
||||
}
|
||||
|
||||
export async function fetchDomains(router: NextRouter) {
|
||||
const res = await fetch(`${window.location.origin}/api/domains`, { method: 'GET' });
|
||||
export async function fetchDomains(router: NextRouter, withStats:boolean) {
|
||||
const res = await fetch(`${window.location.origin}/api/domains${withStats ? '?withstats=true' : ''}`, { method: 'GET' });
|
||||
if (res.status >= 400 && res.status < 600) {
|
||||
if (res.status === 401) {
|
||||
console.log('Unauthorized!!');
|
||||
@@ -19,8 +19,8 @@ export async function fetchDomains(router: NextRouter) {
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export function useFetchDomains(router: NextRouter) {
|
||||
return useQuery('domains', () => fetchDomains(router));
|
||||
export function useFetchDomains(router: NextRouter, withStats:boolean = false) {
|
||||
return useQuery('domains', () => fetchDomains(router, withStats));
|
||||
}
|
||||
|
||||
export function useAddDomain(onSuccess:Function) {
|
||||
@@ -37,7 +37,7 @@ export function useAddDomain(onSuccess:Function) {
|
||||
}, {
|
||||
onSuccess: async (data) => {
|
||||
console.log('Domain Added!!!', data);
|
||||
const newDomain:Domain = data.domain;
|
||||
const newDomain:DomainType = data.domain;
|
||||
toast(`${newDomain.domain} Added Successfully!`, { icon: '✔️' });
|
||||
onSuccess(false);
|
||||
if (newDomain && newDomain.slug) {
|
||||
@@ -78,7 +78,7 @@ export function useUpdateDomain(onSuccess:Function) {
|
||||
|
||||
export function useDeleteDomain(onSuccess:Function) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation(async (domain:Domain) => {
|
||||
return useMutation(async (domain:DomainType) => {
|
||||
const res = await fetch(`${window.location.origin}/api/domains?domain=${domain.domain}`, { method: 'DELETE' });
|
||||
if (res.status >= 400 && res.status < 600) {
|
||||
throw new Error('Bad response from server');
|
||||
|
||||
@@ -2,21 +2,13 @@ import toast from 'react-hot-toast';
|
||||
import { NextRouter } from 'next/router';
|
||||
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||
|
||||
type KeywordsInput = {
|
||||
keywords: string,
|
||||
device: string,
|
||||
country: string,
|
||||
domain: string,
|
||||
tags: string,
|
||||
}
|
||||
|
||||
export const fetchKeywords = async (router: NextRouter) => {
|
||||
if (!router.query.slug) { return []; }
|
||||
const res = await fetch(`${window.location.origin}/api/keywords?domain=${router.query.slug}`, { method: 'GET' });
|
||||
return res.json();
|
||||
};
|
||||
|
||||
export function useFetchKeywords(router: NextRouter, setKeywordSPollInterval:Function, keywordSPollInterval:undefined|number = undefined) {
|
||||
export function useFetchKeywords(router: NextRouter, setKeywordSPollInterval?:Function, keywordSPollInterval:undefined|number = undefined) {
|
||||
const { data: keywordsData, isLoading: keywordsLoading, isError } = useQuery(
|
||||
['keywords', router.query.slug],
|
||||
() => fetchKeywords(router),
|
||||
@@ -44,9 +36,9 @@ export function useFetchKeywords(router: NextRouter, setKeywordSPollInterval:Fun
|
||||
|
||||
export function useAddKeywords(onSuccess:Function) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation(async (newKeywords:KeywordsInput) => {
|
||||
return useMutation(async (keywords:KeywordAddPayload[]) => {
|
||||
const headers = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
|
||||
const fetchOpts = { method: 'POST', headers, body: JSON.stringify(newKeywords) };
|
||||
const fetchOpts = { method: 'POST', headers, body: JSON.stringify({ keywords }) };
|
||||
const res = await fetch(`${window.location.origin}/api/keywords`, fetchOpts);
|
||||
if (res.status >= 400 && res.status < 600) {
|
||||
throw new Error('Bad response from server');
|
||||
|
||||
38
services/searchConsole.ts
Normal file
38
services/searchConsole.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { NextRouter } from 'next/router';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
export async function fetchSCKeywords(router: NextRouter) {
|
||||
// if (!router.query.slug) { throw new Error('Invalid Domain Name'); }
|
||||
const res = await fetch(`${window.location.origin}/api/searchconsole?domain=${router.query.slug}`, { method: 'GET' });
|
||||
if (res.status >= 400 && res.status < 600) {
|
||||
if (res.status === 401) {
|
||||
console.log('Unauthorized!!');
|
||||
router.push('/login');
|
||||
}
|
||||
throw new Error('Bad response from server');
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export function useFetchSCKeywords(router: NextRouter, domainLoaded: boolean = false) {
|
||||
// console.log('ROUTER: ', router);
|
||||
return useQuery('sckeywords', () => router.query.slug && fetchSCKeywords(router), { enabled: domainLoaded });
|
||||
}
|
||||
|
||||
export async function fetchSCInsight(router: NextRouter) {
|
||||
// if (!router.query.slug) { throw new Error('Invalid Domain Name'); }
|
||||
const res = await fetch(`${window.location.origin}/api/insight?domain=${router.query.slug}`, { method: 'GET' });
|
||||
if (res.status >= 400 && res.status < 600) {
|
||||
if (res.status === 401) {
|
||||
console.log('Unauthorized!!');
|
||||
router.push('/login');
|
||||
}
|
||||
throw new Error('Bad response from server');
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export function useFetchSCInsight(router: NextRouter, domainLoaded: boolean = false) {
|
||||
// console.log('ROUTER: ', router);
|
||||
return useQuery('scinsight', () => router.query.slug && fetchSCInsight(router), { enabled: domainLoaded });
|
||||
}
|
||||
@@ -9,7 +9,7 @@ body {
|
||||
}
|
||||
|
||||
.domKeywords {
|
||||
min-height: 70vh;
|
||||
/* min-height: 70vh; */
|
||||
border-color: #e9ebff;
|
||||
box-shadow: 0 0 20px rgb(20 34 71 / 5%);
|
||||
}
|
||||
@@ -83,21 +83,31 @@ body {
|
||||
}
|
||||
|
||||
.domKeywords_head--alpha_desc .domKeywords_head_keyword::after,
|
||||
.domKeywords_head--pos_desc .domKeywords_head_position::after {
|
||||
.domKeywords_head--pos_desc .domKeywords_head_position::after,
|
||||
.domKeywords_head--imp_asc .domKeywords_head_imp::after,
|
||||
.domKeywords_head--visits_asc .domKeywords_head_visits::after,
|
||||
.domKeywords_head--ctr_desc .domKeywords_head_ctr::after {
|
||||
content: "↓";
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.domKeywords_head--alpha_asc .domKeywords_head_keyword::after,
|
||||
.domKeywords_head--pos_asc .domKeywords_head_position::after {
|
||||
.domKeywords_head--pos_asc .domKeywords_head_position::after,
|
||||
.domKeywords_head--imp_desc .domKeywords_head_imp::after,
|
||||
.domKeywords_head--visits_desc .domKeywords_head_visits::after,
|
||||
.domKeywords_head--ctr_asc .domKeywords_head_ctr::after {
|
||||
content: "↑";
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.keywordDetails__section__results {
|
||||
@@ -168,6 +178,64 @@ body {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.domItem {
|
||||
transition: all 0.15s linear;
|
||||
border-color: #e9ebff;
|
||||
box-shadow: 0 0 20px rgb(20 34 71 / 5%);
|
||||
}
|
||||
|
||||
.domItem:hover h3 {
|
||||
color: #364aff
|
||||
}
|
||||
|
||||
.noDomains {
|
||||
border-color: #e9ebff;
|
||||
box-shadow: 0 0 20px rgb(20 34 71 / 5%);
|
||||
}
|
||||
|
||||
.domItem:hover {
|
||||
border-color: #9499d8;
|
||||
box-shadow: 0 0 20px rgb(30 65 161 / 25%);
|
||||
}
|
||||
|
||||
.domain_selector .selected,
|
||||
.insight_selector .selected {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.domain_selector .select,
|
||||
.insight_selector .select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.domain_selector .select_list,
|
||||
.insight_selector .select_list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.domain_selector .selected > span:nth-child(1),
|
||||
.insight_selector .selected > span:nth-child(1) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dom_sc_stats > div::after,
|
||||
.dom_stats > div::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 35px;
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dom_sc_stats > div:nth-child(3)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dom_stats > div:nth-child(2)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
/* Domain Header Button Tooltips */
|
||||
.domheader_action_button:hover i {
|
||||
@@ -178,15 +246,16 @@ body {
|
||||
.domheader_action_button i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
left: -40px;
|
||||
top: -22px;
|
||||
background: #222;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 0 10px;
|
||||
padding-bottom: 3px;
|
||||
transition: all 0.2s linear;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.domheader_action_button i::after {
|
||||
@@ -202,4 +271,14 @@ body {
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.domkeywordsTable--keywords.domkeywordsTable--hasSC .domKeywords_keywords::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #eff0f1;
|
||||
top: 0;
|
||||
right: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
128
types.d.ts
vendored
128
types.d.ts
vendored
@@ -1,15 +1,20 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
type Domain = {
|
||||
type DomainType = {
|
||||
ID: number,
|
||||
domain: string,
|
||||
slug: string,
|
||||
tags?: string[],
|
||||
tags?: string,
|
||||
notification: boolean,
|
||||
notification_interval: string,
|
||||
notification_emails: string,
|
||||
lastUpdated: string,
|
||||
added: string,
|
||||
keywordCount: number
|
||||
keywordCount?: number,
|
||||
keywordsUpdated?: string,
|
||||
avgPosition?: number,
|
||||
scVisits?: number,
|
||||
scImpressions?: number,
|
||||
scPosition?: number,
|
||||
}
|
||||
|
||||
type KeywordHistory = {
|
||||
@@ -31,7 +36,9 @@ type KeywordType = {
|
||||
url: string,
|
||||
tags: string[],
|
||||
updating: boolean,
|
||||
lastUpdateError: {date: string, error: string, scraper: string} | false
|
||||
lastUpdateError: {date: string, error: string, scraper: string} | false,
|
||||
scData?: KeywordSCData,
|
||||
uid?: string
|
||||
}
|
||||
|
||||
type KeywordLastResult = {
|
||||
@@ -47,7 +54,11 @@ type KeywordFilters = {
|
||||
}
|
||||
|
||||
type countryData = {
|
||||
[ISO:string] : string[]
|
||||
[ISO:string] : [countryName:string, cityName:string, language:string]
|
||||
}
|
||||
|
||||
type countryCodeData = {
|
||||
[ISO:string] : string
|
||||
}
|
||||
|
||||
type DomainSettings = {
|
||||
@@ -64,6 +75,109 @@ type SettingsType = {
|
||||
notification_email_from: string,
|
||||
smtp_server: string,
|
||||
smtp_port: string,
|
||||
smtp_username: string,
|
||||
smtp_password: string
|
||||
smtp_username?: string,
|
||||
smtp_password?: string,
|
||||
search_console_integrated?: boolean,
|
||||
available_scapers?: Array,
|
||||
scrape_interval?: string
|
||||
version?: string
|
||||
}
|
||||
|
||||
type KeywordSCDataChild = {
|
||||
yesterday: number,
|
||||
threeDays: number,
|
||||
sevenDays: number,
|
||||
thirtyDays: number,
|
||||
avgSevenDays: number,
|
||||
avgThreeDays: number,
|
||||
avgThirtyDays: number,
|
||||
}
|
||||
type KeywordSCData = {
|
||||
impressions: KeywordSCDataChild,
|
||||
visits: KeywordSCDataChild,
|
||||
ctr: KeywordSCDataChild,
|
||||
position:KeywordSCDataChild
|
||||
}
|
||||
|
||||
type KeywordAddPayload = {
|
||||
keyword: string,
|
||||
device: string,
|
||||
country: string,
|
||||
domain: string,
|
||||
tags: string,
|
||||
}
|
||||
|
||||
type SearchAnalyticsRawItem = {
|
||||
keys: string[],
|
||||
clicks: number,
|
||||
impressions: number,
|
||||
ctr: number,
|
||||
position: number,
|
||||
}
|
||||
|
||||
type SearchAnalyticsStat = {
|
||||
date: string,
|
||||
clicks: number,
|
||||
impressions: number,
|
||||
ctr: number,
|
||||
position: number,
|
||||
}
|
||||
|
||||
type InsightDataType = {
|
||||
stats: SearchAnalyticsStat[]|null,
|
||||
keywords: SCInsightItem[],
|
||||
countries: SCInsightItem[],
|
||||
pages: SCInsightItem[],
|
||||
}
|
||||
|
||||
type SCInsightItem = {
|
||||
clicks: number,
|
||||
impressions: number,
|
||||
ctr: number,
|
||||
position: number,
|
||||
countries?: number,
|
||||
country?: string,
|
||||
keyword?: string,
|
||||
keywords?: number,
|
||||
page?: string,
|
||||
date?: string
|
||||
}
|
||||
|
||||
type SearchAnalyticsItem = {
|
||||
keyword: string,
|
||||
uid: string,
|
||||
device: string,
|
||||
page: string,
|
||||
country: string,
|
||||
clicks: number,
|
||||
impressions: number,
|
||||
ctr: number,
|
||||
position: number,
|
||||
date?: string
|
||||
}
|
||||
|
||||
type SCDomainDataType = {
|
||||
threeDays : SearchAnalyticsItem[],
|
||||
sevenDays : SearchAnalyticsItem[],
|
||||
thirtyDays : SearchAnalyticsItem[],
|
||||
lastFetched?: string,
|
||||
lastFetchError?: string,
|
||||
stats? : SearchAnalyticsStat[],
|
||||
}
|
||||
|
||||
type SCKeywordType = SearchAnalyticsItem;
|
||||
|
||||
type scraperExtractedItem = {
|
||||
title: string,
|
||||
url: string,
|
||||
position: number,
|
||||
}
|
||||
interface ScraperSettings {
|
||||
id:string,
|
||||
name:string,
|
||||
website:string,
|
||||
resultObjectKey: string,
|
||||
headers?(keyword:KeywordType, settings: SettingsType): Object,
|
||||
scrapeURL?(keyword:KeywordType, settings:SettingsType, countries:countryData): string,
|
||||
serpExtractor?(content:string): scraperExtractedItem[],
|
||||
}
|
||||
|
||||
82
utils/SCsortFilter.ts
Normal file
82
utils/SCsortFilter.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Sorrt Keywords by user's given input.
|
||||
* @param {SCKeywordType[]} theKeywords - The Keywords to sort.
|
||||
* @param {string} sortBy - The sort method.
|
||||
* @returns {SCKeywordType[]}
|
||||
*/
|
||||
export const SCsortKeywords = (theKeywords:SCKeywordType[], sortBy:string) : SCKeywordType[] => {
|
||||
let sortedItems = [];
|
||||
const keywords = theKeywords.map((k) => ({ ...k, position: k.position === 0 ? 111 : k.position }));
|
||||
switch (sortBy) {
|
||||
case 'imp_asc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (a.impressions > b.impressions ? 1 : -1));
|
||||
break;
|
||||
case 'imp_desc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (b.impressions > a.impressions ? 1 : -1));
|
||||
break;
|
||||
case 'visits_asc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (a.clicks > b.clicks ? 1 : -1));
|
||||
break;
|
||||
case 'visits_desc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (b.clicks > a.clicks ? 1 : -1));
|
||||
break;
|
||||
case 'ctr_asc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => b.ctr - a.ctr);
|
||||
break;
|
||||
case 'ctr_desc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => a.ctr - b.ctr);
|
||||
break;
|
||||
case 'pos_asc':
|
||||
sortedItems = keywords.sort((a: SCKeywordType, b: SCKeywordType) => (b.position < a.position ? 1 : -1));
|
||||
sortedItems = sortedItems.map((k) => ({ ...k, position: k.position === 111 ? 0 : k.position }));
|
||||
break;
|
||||
case 'pos_desc':
|
||||
sortedItems = keywords.sort((a: SCKeywordType, b: SCKeywordType) => (a.position < b.position ? 1 : -1));
|
||||
sortedItems = sortedItems.map((k) => ({ ...k, position: k.position === 111 ? 0 : k.position }));
|
||||
break;
|
||||
case 'alpha_desc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (b.keyword > a.keyword ? 1 : -1));
|
||||
break;
|
||||
case 'alpha_asc':
|
||||
sortedItems = theKeywords.sort((a: SCKeywordType, b: SCKeywordType) => (a.keyword > b.keyword ? 1 : -1));
|
||||
break;
|
||||
default:
|
||||
return theKeywords;
|
||||
}
|
||||
|
||||
return sortedItems;
|
||||
};
|
||||
|
||||
/**
|
||||
* Filters the Keywords by Device when the Device buttons are switched
|
||||
* @param {SCKeywordType[]} sortedKeywords - The Sorted Keywords.
|
||||
* @param {string} device - Device name (desktop or mobile).
|
||||
* @returns {{desktop: SCKeywordType[], mobile: SCKeywordType[] } }
|
||||
*/
|
||||
export const SCkeywordsByDevice = (sortedKeywords: SCKeywordType[], device: string): {[key: string]: SCKeywordType[] } => {
|
||||
const deviceKeywords: {[key:string] : SCKeywordType[]} = { desktop: [], mobile: [] };
|
||||
sortedKeywords.forEach((keyword) => {
|
||||
if (keyword.device === device) { deviceKeywords[device].push(keyword); }
|
||||
});
|
||||
return deviceKeywords;
|
||||
};
|
||||
|
||||
/**
|
||||
* Filters the keywords by country, search string or tags.
|
||||
* @param {SCKeywordType[]} keywords - The keywords.
|
||||
* @param {KeywordFilters} filterParams - The user Selected filter object.
|
||||
* @returns {SCKeywordType[]}
|
||||
*/
|
||||
export const SCfilterKeywords = (keywords: SCKeywordType[], filterParams: KeywordFilters):SCKeywordType[] => {
|
||||
const filteredItems:SCKeywordType[] = [];
|
||||
keywords.forEach((keywrd) => {
|
||||
const countryMatch = filterParams.countries.length === 0 ? true : filterParams.countries && filterParams.countries.includes(keywrd.country);
|
||||
const searchMatch = !filterParams.search ? true : filterParams.search && keywrd.keyword.includes(filterParams.search);
|
||||
|
||||
if (countryMatch && searchMatch) {
|
||||
filteredItems.push(keywrd);
|
||||
}
|
||||
});
|
||||
|
||||
return filteredItems;
|
||||
};
|
||||
@@ -253,6 +253,262 @@ const countries: countryData = {
|
||||
ZA: ['South Africa', 'Pretoria', 'af'],
|
||||
ZM: ['Zambia', 'Lusaka', 'en'],
|
||||
ZW: ['Zimbabwe', 'Harare', 'en'],
|
||||
ZZ: ['Unknown', 'Unknown', 'en'],
|
||||
};
|
||||
|
||||
export const countryAlphaTwoCodes: countryCodeData = {
|
||||
AFG: 'AF',
|
||||
ALA: 'AX',
|
||||
ALB: 'AL',
|
||||
DZA: 'DZ',
|
||||
ASM: 'AS',
|
||||
AND: 'AD',
|
||||
AGO: 'AO',
|
||||
AIA: 'AI',
|
||||
ATA: 'AQ',
|
||||
ATG: 'AG',
|
||||
ARG: 'AR',
|
||||
ARM: 'AM',
|
||||
ABW: 'AW',
|
||||
AUS: 'AU',
|
||||
AUT: 'AT',
|
||||
AZE: 'AZ',
|
||||
BHS: 'BS',
|
||||
BHR: 'BH',
|
||||
BGD: 'BD',
|
||||
BRB: 'BB',
|
||||
BLR: 'BY',
|
||||
BEL: 'BE',
|
||||
BLZ: 'BZ',
|
||||
BEN: 'BJ',
|
||||
BMU: 'BM',
|
||||
BTN: 'BT',
|
||||
BOL: 'BO',
|
||||
BES: 'BQ',
|
||||
BIH: 'BA',
|
||||
BWA: 'BW',
|
||||
BVT: 'BV',
|
||||
BRA: 'BR',
|
||||
IOT: 'IO',
|
||||
BRN: 'BN',
|
||||
BGR: 'BG',
|
||||
BFA: 'BF',
|
||||
BDI: 'BI',
|
||||
CPV: 'CV',
|
||||
KHM: 'KH',
|
||||
CMR: 'CM',
|
||||
CAN: 'CA',
|
||||
CYM: 'KY',
|
||||
CAF: 'CF',
|
||||
TCD: 'TD',
|
||||
CHL: 'CL',
|
||||
CHN: 'CN',
|
||||
CXR: 'CX',
|
||||
CCK: 'CC',
|
||||
COL: 'CO',
|
||||
COM: 'KM',
|
||||
COG: 'CG',
|
||||
COD: 'CD',
|
||||
COK: 'CK',
|
||||
CRI: 'CR',
|
||||
CIV: 'CI',
|
||||
HRV: 'HR',
|
||||
CUB: 'CU',
|
||||
CUW: 'CW',
|
||||
CYP: 'CY',
|
||||
CZE: 'CZ',
|
||||
DNK: 'DK',
|
||||
DJI: 'DJ',
|
||||
DMA: 'DM',
|
||||
DOM: 'DO',
|
||||
ECU: 'EC',
|
||||
EGY: 'EG',
|
||||
SLV: 'SV',
|
||||
GNQ: 'GQ',
|
||||
ERI: 'ER',
|
||||
EST: 'EE',
|
||||
SWZ: 'SZ',
|
||||
ETH: 'ET',
|
||||
FLK: 'FK',
|
||||
FRO: 'FO',
|
||||
FJI: 'FJ',
|
||||
FIN: 'FI',
|
||||
FRA: 'FR',
|
||||
GUF: 'GF',
|
||||
PYF: 'PF',
|
||||
ATF: 'TF',
|
||||
GAB: 'GA',
|
||||
GMB: 'GM',
|
||||
GEO: 'GE',
|
||||
DEU: 'DE',
|
||||
GHA: 'GH',
|
||||
GIB: 'GI',
|
||||
GRC: 'GR',
|
||||
GRL: 'GL',
|
||||
GRD: 'GD',
|
||||
GLP: 'GP',
|
||||
GUM: 'GU',
|
||||
GTM: 'GT',
|
||||
GGY: 'GG',
|
||||
GIN: 'GN',
|
||||
GNB: 'GW',
|
||||
GUY: 'GY',
|
||||
HTI: 'HT',
|
||||
HMD: 'HM',
|
||||
VAT: 'VA',
|
||||
HND: 'HN',
|
||||
HKG: 'HK',
|
||||
HUN: 'HU',
|
||||
ISL: 'IS',
|
||||
IND: 'IN',
|
||||
IDN: 'ID',
|
||||
IRN: 'IR',
|
||||
IRQ: 'IQ',
|
||||
IRL: 'IE',
|
||||
IMN: 'IM',
|
||||
ISR: 'IL',
|
||||
ITA: 'IT',
|
||||
JAM: 'JM',
|
||||
JPN: 'JP',
|
||||
JEY: 'JE',
|
||||
JOR: 'JO',
|
||||
KAZ: 'KZ',
|
||||
KEN: 'KE',
|
||||
KIR: 'KI',
|
||||
PRK: 'KP',
|
||||
KOR: 'KR',
|
||||
KWT: 'KW',
|
||||
KGZ: 'KG',
|
||||
LAO: 'LA',
|
||||
LVA: 'LV',
|
||||
LBN: 'LB',
|
||||
LSO: 'LS',
|
||||
LBR: 'LR',
|
||||
LBY: 'LY',
|
||||
LIE: 'LI',
|
||||
LTU: 'LT',
|
||||
LUX: 'LU',
|
||||
MAC: 'MO',
|
||||
MDG: 'MG',
|
||||
MWI: 'MW',
|
||||
MYS: 'MY',
|
||||
MDV: 'MV',
|
||||
MLI: 'ML',
|
||||
MLT: 'MT',
|
||||
MHL: 'MH',
|
||||
MTQ: 'MQ',
|
||||
MRT: 'MR',
|
||||
MUS: 'MU',
|
||||
MYT: 'YT',
|
||||
MEX: 'MX',
|
||||
FSM: 'FM',
|
||||
MDA: 'MD',
|
||||
MCO: 'MC',
|
||||
MNG: 'MN',
|
||||
MNE: 'ME',
|
||||
MSR: 'MS',
|
||||
MAR: 'MA',
|
||||
MOZ: 'MZ',
|
||||
MMR: 'MM',
|
||||
NAM: 'NA',
|
||||
NRU: 'NR',
|
||||
NPL: 'NP',
|
||||
NLD: 'NL',
|
||||
NCL: 'NC',
|
||||
NZL: 'NZ',
|
||||
NIC: 'NI',
|
||||
NER: 'NE',
|
||||
NGA: 'NG',
|
||||
NIU: 'NU',
|
||||
NFK: 'NF',
|
||||
MKD: 'MK',
|
||||
MNP: 'MP',
|
||||
NOR: 'NO',
|
||||
OMN: 'OM',
|
||||
PAK: 'PK',
|
||||
PLW: 'PW',
|
||||
PSE: 'PS',
|
||||
PAN: 'PA',
|
||||
PNG: 'PG',
|
||||
PRY: 'PY',
|
||||
PER: 'PE',
|
||||
PHL: 'PH',
|
||||
PCN: 'PN',
|
||||
POL: 'PL',
|
||||
PRT: 'PT',
|
||||
PRI: 'PR',
|
||||
QAT: 'QA',
|
||||
REU: 'RE',
|
||||
ROU: 'RO',
|
||||
RUS: 'RU',
|
||||
RWA: 'RW',
|
||||
BLM: 'BL',
|
||||
SHN: 'SH',
|
||||
KNA: 'KN',
|
||||
LCA: 'LC',
|
||||
MAF: 'MF',
|
||||
SPM: 'PM',
|
||||
VCT: 'VC',
|
||||
WSM: 'WS',
|
||||
SMR: 'SM',
|
||||
STP: 'ST',
|
||||
SAU: 'SA',
|
||||
SEN: 'SN',
|
||||
SRB: 'RS',
|
||||
SYC: 'SC',
|
||||
SLE: 'SL',
|
||||
SGP: 'SG',
|
||||
SXM: 'SX',
|
||||
SVK: 'SK',
|
||||
SVN: 'SI',
|
||||
SLB: 'SB',
|
||||
SOM: 'SO',
|
||||
ZAF: 'ZA',
|
||||
SGS: 'GS',
|
||||
SSD: 'SS',
|
||||
ESP: 'ES',
|
||||
LKA: 'LK',
|
||||
SDN: 'SD',
|
||||
SUR: 'SR',
|
||||
SJM: 'SJ',
|
||||
SWE: 'SE',
|
||||
CHE: 'CH',
|
||||
SYR: 'SY',
|
||||
TWN: 'TW',
|
||||
TJK: 'TJ',
|
||||
TZA: 'TZ',
|
||||
THA: 'TH',
|
||||
TLS: 'TL',
|
||||
TGO: 'TG',
|
||||
TKL: 'TK',
|
||||
TON: 'TO',
|
||||
TTO: 'TT',
|
||||
TUN: 'TN',
|
||||
TUR: 'TR',
|
||||
TKM: 'TM',
|
||||
TCA: 'TC',
|
||||
TUV: 'TV',
|
||||
UGA: 'UG',
|
||||
UKR: 'UA',
|
||||
ARE: 'AE',
|
||||
GBR: 'GB',
|
||||
USA: 'US',
|
||||
UMI: 'UM',
|
||||
URY: 'UY',
|
||||
UZB: 'UZ',
|
||||
VUT: 'VU',
|
||||
VEN: 'VE',
|
||||
VNM: 'VN',
|
||||
VGB: 'VG',
|
||||
VIR: 'VI',
|
||||
WLF: 'WF',
|
||||
ESH: 'EH',
|
||||
YEM: 'YE',
|
||||
ZMB: 'ZM',
|
||||
ZWE: 'ZW',
|
||||
ZZZ: 'ZZ',
|
||||
};
|
||||
|
||||
export const getCountryCodeFromAlphaThree = (AlphaThreeCode:string): string => countryAlphaTwoCodes[AlphaThreeCode];
|
||||
|
||||
export default countries;
|
||||
|
||||
45
utils/domains.ts
Normal file
45
utils/domains.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import Keyword from '../database/models/keyword';
|
||||
import parseKeywords from './parseKeywords';
|
||||
import { readLocalSCData } from './searchConsole';
|
||||
|
||||
const getdomainStats = async (domains:DomainType[]): Promise<DomainType[]> => {
|
||||
const finalDomains: DomainType[] = [];
|
||||
console.log('domains: ', domains.length);
|
||||
|
||||
for (const domain of domains) {
|
||||
const domainWithStat = domain;
|
||||
|
||||
// First Get ALl The Keywords for this Domain
|
||||
const allKeywords:Keyword[] = await Keyword.findAll({ where: { domain: domain.domain } });
|
||||
const keywords: KeywordType[] = parseKeywords(allKeywords.map((e) => e.get({ plain: true })));
|
||||
domainWithStat.keywordCount = keywords.length;
|
||||
const keywordPositions = keywords.reduce((acc, itm) => (acc + itm.position), 0);
|
||||
const KeywordsUpdateDates: number[] = keywords.reduce((acc: number[], itm) => [...acc, new Date(itm.lastUpdated).getTime()], [0]);
|
||||
domainWithStat.keywordsUpdated = new Date(Math.max(...KeywordsUpdateDates)).toJSON();
|
||||
domainWithStat.avgPosition = Math.round(keywordPositions / keywords.length);
|
||||
|
||||
// Then Load the SC File and read the stats and calculate the Last 7 days stats
|
||||
const localSCData = await readLocalSCData(domain.domain);
|
||||
const days = 7;
|
||||
if (localSCData && localSCData.stats && localSCData.stats.length) {
|
||||
const lastSevenStats = localSCData.stats.slice(-days);
|
||||
const totalStats = lastSevenStats.reduce((acc, item) => {
|
||||
return {
|
||||
impressions: item.impressions + acc.impressions,
|
||||
clicks: item.clicks + acc.clicks,
|
||||
ctr: item.ctr + acc.ctr,
|
||||
position: item.position + acc.position,
|
||||
};
|
||||
}, { impressions: 0, clicks: 0, ctr: 0, position: 0 });
|
||||
domainWithStat.scVisits = totalStats.clicks;
|
||||
domainWithStat.scImpressions = totalStats.impressions;
|
||||
domainWithStat.scPosition = Math.round(totalStats.position / days);
|
||||
}
|
||||
|
||||
finalDomains.push(domainWithStat);
|
||||
}
|
||||
|
||||
return finalDomains;
|
||||
};
|
||||
|
||||
export default getdomainStats;
|
||||
@@ -6,21 +6,36 @@ import countries from './countries';
|
||||
* @param {string} domain - The domain name.
|
||||
* @returns {void}
|
||||
*/
|
||||
const exportCSV = (keywords: KeywordType[], domain:string) => {
|
||||
const csvHeader = 'ID,Keyword,Position,URL,Country,Device,Updated,Added,Tags\r\n';
|
||||
const exportCSV = (keywords: KeywordType[] | SCKeywordType[], domain:string, scDataDuration = 'lastThreeDays') => {
|
||||
const isSCKeywords = !!(keywords && keywords[0] && keywords[0].uid);
|
||||
let csvHeader = 'ID,Keyword,Position,URL,Country,Device,Updated,Added,Tags\r\n';
|
||||
let csvBody = '';
|
||||
let fileName = `${domain}-keywords_serp.csv`;
|
||||
|
||||
keywords.forEach((keywordData) => {
|
||||
const { ID, keyword, position, url, country, device, lastUpdated, added, tags } = keywordData;
|
||||
// eslint-disable-next-line max-len
|
||||
csvBody += `${ID}, ${keyword}, ${position === 0 ? '-' : position}, ${url || '-'}, ${countries[country][0]}, ${device}, ${lastUpdated}, ${added}, ${tags.join(',')}\r\n`;
|
||||
});
|
||||
console.log(keywords[0]);
|
||||
console.log('isSCKeywords:', isSCKeywords);
|
||||
|
||||
if (isSCKeywords) {
|
||||
csvHeader = 'ID,Keyword,Position,Impressions,Clicks,CTR,Country,Device\r\n';
|
||||
fileName = `${domain}-search-console-${scDataDuration}.csv`;
|
||||
keywords.forEach((keywordData, index) => {
|
||||
const { keyword, position, country, device, clicks, impressions, ctr } = keywordData as SCKeywordType;
|
||||
// eslint-disable-next-line max-len
|
||||
csvBody += `${index}, ${keyword}, ${position === 0 ? '-' : position}, ${impressions}, ${clicks}, ${ctr}, ${countries[country][0]}, ${device}\r\n`;
|
||||
});
|
||||
} else {
|
||||
keywords.forEach((keywordData) => {
|
||||
const { ID, keyword, position, url, country, device, lastUpdated, added, tags } = keywordData as KeywordType;
|
||||
// eslint-disable-next-line max-len
|
||||
csvBody += `${ID}, ${keyword}, ${position === 0 ? '-' : position}, ${url || '-'}, ${countries[country][0]}, ${device}, ${lastUpdated}, ${added}, ${tags.join(',')}\r\n`;
|
||||
});
|
||||
}
|
||||
|
||||
const blob = new Blob([csvHeader + csvBody], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', `${domain}-keywords_serp.csv`);
|
||||
link.setAttribute('download', fileName);
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
import dayjs from 'dayjs';
|
||||
import { readFile } from 'fs/promises';
|
||||
import path from 'path';
|
||||
import { getKeywordsInsight, getPagesInsight } from './insight';
|
||||
import { readLocalSCData } from './searchConsole';
|
||||
|
||||
const serpBearLogo = 'https://i.imgur.com/ikAdjQq.png';
|
||||
const mobileIcon = 'https://i.imgur.com/SqXD9rd.png';
|
||||
const desktopIcon = 'https://i.imgur.com/Dx3u0XD.png';
|
||||
const serpBearLogo = 'https://erevanto.sirv.com/Images/serpbear/ikAdjQq.png';
|
||||
const mobileIcon = 'https://erevanto.sirv.com/Images/serpbear/SqXD9rd.png';
|
||||
const desktopIcon = 'https://erevanto.sirv.com/Images/serpbear/Dx3u0XD.png';
|
||||
const googleIcon = 'https://erevanto.sirv.com/Images/serpbear/Sx3u0X9.png';
|
||||
|
||||
type SCStatsObject = {
|
||||
[key:string]: {
|
||||
html: string,
|
||||
label: string,
|
||||
clicks?: number,
|
||||
impressions?: number
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* Geenrate Human readable Time string.
|
||||
* Generate Human readable Time string.
|
||||
* @param {number} date - Keywords to scrape
|
||||
* @returns {string}
|
||||
*/
|
||||
@@ -48,7 +60,10 @@ const getPositionChange = (history:KeywordHistory, position:number) : number =>
|
||||
}));
|
||||
const historySorted = historyArray.sort((a, b) => a.date - b.date);
|
||||
const previousPos = historySorted[historySorted.length - 2].position;
|
||||
status = previousPos - position;
|
||||
status = previousPos === 0 ? position : previousPos - position;
|
||||
if (position === 0 && previousPos > 0) {
|
||||
status = previousPos - 100;
|
||||
}
|
||||
}
|
||||
return status;
|
||||
};
|
||||
@@ -98,7 +113,113 @@ const generateEmail = async (domainName:string, keywords:KeywordType[]) : Promis
|
||||
.replace('{{stat}}', stat)
|
||||
.replace('{{preheader}}', stat);
|
||||
|
||||
return updatedEmail;
|
||||
const isConsoleIntegrated = !!(process.env.SEARCH_CONSOLE_PRIVATE_KEY && process.env.SEARCH_CONSOLE_CLIENT_EMAIL);
|
||||
const htmlWithSCStats = isConsoleIntegrated ? await generateGoogeleConsoleStats(domainName) : '';
|
||||
const emailHTML = updatedEmail.replace('{{SCStatsTable}}', htmlWithSCStats);
|
||||
|
||||
// await writeFile('testemail.html', emailHTML, { encoding: 'utf-8' });
|
||||
|
||||
return emailHTML;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate the Email HTML for Google Search Console Data.
|
||||
* @param {string} domainName - The Domain name for which to generate the HTML.
|
||||
* @returns {Promise<string>}
|
||||
*/
|
||||
const generateGoogeleConsoleStats = async (domainName:string): Promise<string> => {
|
||||
if (!domainName) return '';
|
||||
|
||||
const localSCData = await readLocalSCData(domainName);
|
||||
if (!localSCData || !localSCData.stats || !localSCData.stats.length) {
|
||||
return ''; // IF No SC Data Found, Abot the process.
|
||||
}
|
||||
|
||||
const scData:SCStatsObject = {
|
||||
stats: { html: '', label: 'Performance for Last 7 Days', clicks: 0, impressions: 0 },
|
||||
keywords: { html: '', label: 'Top 5 Keywords' },
|
||||
pages: { html: '', label: 'Top 5 Pages' },
|
||||
};
|
||||
const SCStats = localSCData && localSCData.stats && Array.isArray(localSCData.stats) ? localSCData.stats.reverse().slice(0, 7) : [];
|
||||
const keywords = getKeywordsInsight(localSCData, 'clicks', 'sevenDays');
|
||||
const pages = getPagesInsight(localSCData, 'clicks', 'sevenDays');
|
||||
const genColumn = (item:SCInsightItem, firstColumKey:string):string => {
|
||||
return `<tr class="keyword">
|
||||
<td>${item[firstColumKey as keyof SCInsightItem]}</td>
|
||||
<td>${item.clicks}</td>
|
||||
<td>${item.impressions}</td>
|
||||
<td>${Math.round(item.position)}</td>
|
||||
</tr>`;
|
||||
};
|
||||
if (SCStats.length > 0) {
|
||||
scData.stats.html = SCStats.reduce((acc, item) => acc + genColumn(item, 'date'), '');
|
||||
}
|
||||
if (keywords.length > 0) {
|
||||
scData.keywords.html = keywords.slice(0, 5).reduce((acc, item) => acc + genColumn(item, 'keyword'), '');
|
||||
}
|
||||
if (pages.length > 0) {
|
||||
scData.pages.html = pages.slice(0, 5).reduce((acc, item) => acc + genColumn(item, 'page'), '');
|
||||
}
|
||||
scData.stats.clicks = SCStats.reduce((acc, item) => acc + item.clicks, 0);
|
||||
scData.stats.impressions = SCStats.reduce((acc, item) => acc + item.impressions, 0);
|
||||
|
||||
// Create Stats Start, End Date
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const endDate = new Date(SCStats[0].date);
|
||||
const startDate = new Date(SCStats[SCStats.length - 1].date);
|
||||
|
||||
// Add the SC header Title
|
||||
let htmlWithSCStats = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="console_table">
|
||||
<tr>
|
||||
<td style="font-weight:bold;">
|
||||
<img class="google_icon" src="${googleIcon}" alt="Google"> Google Search Console Stats</h3>
|
||||
</td>
|
||||
<td class="stat" align="right" style="font-size: 12px;">
|
||||
${startDate.getDate()} ${months[startDate.getMonth()]} - ${endDate.getDate()} ${months[endDate.getMonth()]}
|
||||
(Last 7 Days)
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`;
|
||||
|
||||
// Add the SC Data Tables
|
||||
Object.keys(scData).forEach((itemKey) => {
|
||||
const scItem = scData[itemKey as keyof SCStatsObject];
|
||||
const scItemFirstColName = itemKey === 'stats' ? 'Date' : `${itemKey[0].toUpperCase()}${itemKey.slice(1)}`;
|
||||
htmlWithSCStats += `<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="subhead">
|
||||
<tr>
|
||||
<td style="font-weight:bold;">${scItem.label}</h3></td>
|
||||
${scItem.clicks && scItem.impressions ? (
|
||||
`<td class="stat" align="right">
|
||||
<strong>${scItem.clicks}</strong> Clicks | <strong>${scItem.impressions}</strong> Views
|
||||
</td>`
|
||||
)
|
||||
: ''
|
||||
}
|
||||
</tr>
|
||||
</table>
|
||||
<table role="presentation" class="main" style="margin-bottom:20px">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="wrapper">
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="keyword_table keyword_table--sc">
|
||||
<tbody>
|
||||
<tr align="left">
|
||||
<th>${scItemFirstColName}</th>
|
||||
<th>Clicks</th>
|
||||
<th>Views</th>
|
||||
<th>Position</th>
|
||||
</tr>
|
||||
${scItem.html}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`;
|
||||
});
|
||||
|
||||
return htmlWithSCStats;
|
||||
};
|
||||
|
||||
export default generateEmail;
|
||||
|
||||
142
utils/insight.ts
Normal file
142
utils/insight.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
export const sortInsightItems = (items:SCInsightItem[], sortBy: string = 'clicks') => {
|
||||
const sortKey = sortBy as keyof SCInsightItem;
|
||||
let sortedItems = [];
|
||||
switch (sortKey) {
|
||||
case 'clicks':
|
||||
sortedItems = items.sort((a, b) => (b.clicks > a.clicks ? 1 : -1));
|
||||
break;
|
||||
case 'impressions':
|
||||
sortedItems = items.sort((a, b) => (b.impressions > a.impressions ? 1 : -1));
|
||||
break;
|
||||
case 'position':
|
||||
sortedItems = items.sort((a, b) => (b.position > a.position ? 1 : -1));
|
||||
break;
|
||||
default:
|
||||
sortedItems = items;
|
||||
break;
|
||||
}
|
||||
return sortedItems;
|
||||
};
|
||||
|
||||
export const getCountryInsight = (SCData:SCDomainDataType, sortBy:string = 'clicks', queryDate:string = 'thirtyDays') : SCInsightItem[] => {
|
||||
const keywordsCounts: { [key:string]: string[] } = {};
|
||||
const countryItems: { [key:string]: SCInsightItem } = {};
|
||||
const dateKey = queryDate as keyof SCDomainDataType;
|
||||
const scData = SCData[dateKey] ? SCData[dateKey] as SearchAnalyticsItem[] : [];
|
||||
const allCountries: string[] = [...new Set(scData.map((item) => item.country))];
|
||||
|
||||
allCountries.forEach((countryKey:string) => {
|
||||
const itemData = { clicks: 0, impressions: 0, ctr: 0, position: 0 };
|
||||
scData.forEach((itm) => {
|
||||
if (itm.country === countryKey) {
|
||||
itemData.clicks += itm.clicks;
|
||||
itemData.impressions += itm.impressions;
|
||||
itemData.ctr += itm.ctr;
|
||||
itemData.position += itm.position;
|
||||
if (!keywordsCounts[itm.country]) {
|
||||
keywordsCounts[itm.country] = [];
|
||||
}
|
||||
if (keywordsCounts[itm.country] && !keywordsCounts[itm.country].includes(itm.keyword)) {
|
||||
keywordsCounts[itm.country].push(itm.keyword);
|
||||
}
|
||||
}
|
||||
});
|
||||
countryItems[countryKey] = itemData;
|
||||
});
|
||||
|
||||
const countryInsight: SCInsightItem[] = Object.keys(countryItems).map((countryCode:string) => {
|
||||
return {
|
||||
...countryItems[countryCode],
|
||||
position: Math.round(countryItems[countryCode].position / keywordsCounts[countryCode].length),
|
||||
ctr: countryItems[countryCode].ctr / keywordsCounts[countryCode].length,
|
||||
keywords: keywordsCounts[countryCode].length,
|
||||
country: countryCode,
|
||||
};
|
||||
});
|
||||
|
||||
return sortBy ? sortInsightItems(countryInsight, sortBy) : countryInsight;
|
||||
};
|
||||
|
||||
export const getKeywordsInsight = (SCData:SCDomainDataType, sortBy:string = 'clicks', queryDate:string = 'thirtyDays') : SCInsightItem[] => {
|
||||
const keywordItems: { [key:string]: SCInsightItem } = {};
|
||||
const keywordCounts: { [key:string]: number } = {};
|
||||
const countriesCount: { [key:string]: string[] } = {};
|
||||
const dateKey = queryDate as keyof SCDomainDataType;
|
||||
const scData = SCData[dateKey] ? SCData[dateKey] as SearchAnalyticsItem[] : [];
|
||||
const allKeywords: string[] = [...new Set(scData.map((item) => item.keyword))];
|
||||
|
||||
allKeywords.forEach((keyword:string) => {
|
||||
const itemData = { clicks: 0, impressions: 0, ctr: 0, position: 0 };
|
||||
const keywordKey = keyword.replaceAll(' ', '_');
|
||||
scData.forEach((itm) => {
|
||||
if (itm.keyword === keyword) {
|
||||
itemData.clicks += itm.clicks;
|
||||
itemData.impressions += itm.impressions;
|
||||
itemData.ctr += itm.ctr;
|
||||
itemData.position += itm.position;
|
||||
if (!countriesCount[keywordKey]) {
|
||||
countriesCount[keywordKey] = [];
|
||||
}
|
||||
if (countriesCount[keywordKey] && !countriesCount[keywordKey].includes(itm.country)) {
|
||||
countriesCount[keywordKey].push(itm.keyword);
|
||||
}
|
||||
keywordCounts[keywordKey] = keywordCounts[keywordKey] ? keywordCounts[keywordKey] + 1 : 1;
|
||||
}
|
||||
});
|
||||
keywordItems[keywordKey] = itemData;
|
||||
});
|
||||
|
||||
const keywordInsight: SCInsightItem[] = Object.keys(keywordItems).map((keyword:string) => {
|
||||
return {
|
||||
...keywordItems[keyword],
|
||||
position: Math.round(keywordItems[keyword].position / keywordCounts[keyword]),
|
||||
ctr: keywordItems[keyword].ctr / keywordCounts[keyword],
|
||||
countries: countriesCount[keyword].length,
|
||||
keyword: keyword.replaceAll('_', ' '),
|
||||
};
|
||||
});
|
||||
|
||||
return sortBy ? sortInsightItems(keywordInsight, sortBy) : keywordInsight;
|
||||
};
|
||||
|
||||
export const getPagesInsight = (SCData:SCDomainDataType, sortBy:string = 'clicks', queryDate:string = 'thirtyDays') : SCInsightItem[] => {
|
||||
const pagesItems: { [key:string]: SCInsightItem } = {};
|
||||
const keywordCounts: { [key:string]: number } = {};
|
||||
const countriesCount: { [key:string]: string[] } = {};
|
||||
const dateKey = queryDate as keyof SCDomainDataType;
|
||||
const scData = SCData[dateKey] ? SCData[dateKey] as SearchAnalyticsItem[] : [];
|
||||
const allPages: string[] = [...new Set(scData.map((item) => item.page))];
|
||||
|
||||
allPages.forEach((page:string) => {
|
||||
const itemData = { clicks: 0, impressions: 0, ctr: 0, position: 0 };
|
||||
scData.forEach((itm) => {
|
||||
if (itm.page === page) {
|
||||
itemData.clicks += itm.clicks;
|
||||
itemData.impressions += itm.impressions;
|
||||
itemData.ctr += itm.ctr;
|
||||
itemData.position += itm.position;
|
||||
if (!countriesCount[page]) {
|
||||
countriesCount[page] = [];
|
||||
}
|
||||
if (countriesCount[page] && !countriesCount[page].includes(itm.country)) {
|
||||
countriesCount[page].push(itm.country);
|
||||
}
|
||||
keywordCounts[page] = keywordCounts[page] ? keywordCounts[page] + 1 : 1;
|
||||
}
|
||||
});
|
||||
pagesItems[page] = itemData;
|
||||
});
|
||||
|
||||
const pagesInsight: SCInsightItem[] = Object.keys(pagesItems).map((page:string) => {
|
||||
return {
|
||||
...pagesItems[page],
|
||||
position: Math.round(pagesItems[page].position / keywordCounts[page]),
|
||||
ctr: pagesItems[page].ctr / keywordCounts[page],
|
||||
countries: countriesCount[page].length,
|
||||
keywords: keywordCounts[page],
|
||||
page,
|
||||
};
|
||||
});
|
||||
|
||||
return sortBy ? sortInsightItems(pagesInsight, sortBy) : pagesInsight;
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import { RefreshResult, scrapeKeywordFromGoogle } from './scraper';
|
||||
|
||||
/**
|
||||
* Refreshes the Keywords position by Scraping Google Search Result by
|
||||
* Determining whether the keywords should be scraped in Parallal or not
|
||||
* Determining whether the keywords should be scraped in Parallel or not
|
||||
* @param {KeywordType[]} keywords - Keywords to scrape
|
||||
* @param {SettingsType} settings - The App Settings that contain the Scraper settings
|
||||
* @returns {Promise}
|
||||
@@ -14,8 +14,8 @@ const refreshKeywords = async (keywords:KeywordType[], settings:SettingsType): P
|
||||
|
||||
let refreshedResults: RefreshResult[] = [];
|
||||
|
||||
if (settings.scraper_type === 'scrapingant') {
|
||||
refreshedResults = await refreshParallal(keywords, settings);
|
||||
if (['scrapingant', 'serpapi'].includes(settings.scraper_type)) {
|
||||
refreshedResults = await refreshParallel(keywords, settings);
|
||||
} else {
|
||||
for (const keyword of keywords) {
|
||||
console.log('START SCRAPE: ', keyword.keyword);
|
||||
@@ -30,12 +30,12 @@ const refreshKeywords = async (keywords:KeywordType[], settings:SettingsType): P
|
||||
};
|
||||
|
||||
/**
|
||||
* Scrape Google Keyword Search Result in Prallal.
|
||||
* Scrape Google Keyword Search Result in Parallel.
|
||||
* @param {KeywordType[]} keywords - Keywords to scrape
|
||||
* @param {SettingsType} settings - The App Settings that contain the Scraper settings
|
||||
* @returns {Promise}
|
||||
*/
|
||||
const refreshParallal = async (keywords:KeywordType[], settings:SettingsType) : Promise<RefreshResult[]> => {
|
||||
const refreshParallel = async (keywords:KeywordType[], settings:SettingsType) : Promise<RefreshResult[]> => {
|
||||
const promises: Promise<RefreshResult>[] = keywords.map((keyword) => {
|
||||
return scrapeKeywordFromGoogle(keyword, settings);
|
||||
});
|
||||
|
||||
139
utils/scraper.ts
139
utils/scraper.ts
@@ -1,10 +1,9 @@
|
||||
import axios, { AxiosResponse, CreateAxiosDefaults } from 'axios';
|
||||
// import axiosRetry from 'axios-retry';
|
||||
// import path from 'path';
|
||||
import cheerio from 'cheerio';
|
||||
import { readFile, writeFile } from 'fs/promises';
|
||||
import HttpsProxyAgent from 'https-proxy-agent';
|
||||
import countries from './countries';
|
||||
import allScrapers from '../scrapers/index';
|
||||
|
||||
type SearchResult = {
|
||||
title: string,
|
||||
@@ -26,19 +25,13 @@ export type RefreshResult = false | {
|
||||
error?: boolean | string
|
||||
}
|
||||
|
||||
interface SerplyResult {
|
||||
title: string,
|
||||
link: string,
|
||||
realPosition: number,
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a SERP Scraper client promise based on the app settings.
|
||||
* @param {KeywordType} keyword - the keyword to get the SERP for.
|
||||
* @param {SettingsType} settings - the App Settings that contains the scraper details
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export const getScraperClient = (keyword:KeywordType, settings:SettingsType): Promise<AxiosResponse|Response> | false => {
|
||||
export const getScraperClient = (keyword:KeywordType, settings:SettingsType, scraper?: ScraperSettings): Promise<AxiosResponse|Response> | false => {
|
||||
let apiURL = ''; let client: Promise<AxiosResponse|Response> | false = false;
|
||||
const headers: any = {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -52,35 +45,27 @@ export const getScraperClient = (keyword:KeywordType, settings:SettingsType): Pr
|
||||
headers['User-Agent'] = mobileAgent;
|
||||
}
|
||||
|
||||
if (settings && settings.scraper_type === 'scrapingant' && settings.scaping_api) {
|
||||
const scraperCountries = ['AE', 'BR', 'CN', 'DE', 'ES', 'FR', 'GB', 'HK', 'PL', 'IN', 'IT', 'IL', 'JP', 'NL', 'RU', 'SA', 'US', 'CZ'];
|
||||
const country = scraperCountries.includes(keyword.country.toUpperCase()) ? keyword.country : 'US';
|
||||
const lang = countries[country][2];
|
||||
apiURL = `https://api.scrapingant.com/v2/extended?url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fnum%3D100%26hl%3D${lang}%26q%3D${encodeURI(keyword.keyword)}&x-api-key=${settings.scaping_api}&proxy_country=${country}&browser=false`;
|
||||
}
|
||||
|
||||
if (settings && settings.scraper_type === 'scrapingrobot' && settings.scaping_api) {
|
||||
const country = keyword.country || 'US';
|
||||
const lang = countries[country][2];
|
||||
apiURL = `https://api.scrapingrobot.com/?token=${settings.scaping_api}&proxyCountry=${country}&render=false${keyword.device === 'mobile' ? '&mobile=true' : ''}&url=https%3A%2F%2Fwww.google.com%2Fsearch%3Fnum%3D100%26hl%3D${lang}%26q%3D${encodeURI(keyword.keyword)}`;
|
||||
}
|
||||
|
||||
// Serply.io docs https://docs.serply.io/api
|
||||
if (settings && settings.scraper_type === 'serply' && settings.scaping_api) {
|
||||
const scraperCountries = ['US', 'CA', 'IE', 'GB', 'FR', 'DE', 'SE', 'IN', 'JP', 'KR', 'SG', 'AU', 'BR'];
|
||||
const country = scraperCountries.includes(keyword.country.toUpperCase()) ? keyword.country : 'US';
|
||||
if (keyword.device === 'mobile') {
|
||||
headers['X-User-Agent'] = 'mobile';
|
||||
} else {
|
||||
headers['X-User-Agent'] = 'desktop';
|
||||
if (scraper) {
|
||||
// Set Scraper Header
|
||||
const scrapeHeaders = scraper.headers ? scraper.headers(keyword, settings) : null;
|
||||
const scraperAPIURL = scraper.scrapeURL ? scraper.scrapeURL(keyword, settings, countries) : null;
|
||||
if (scrapeHeaders && Object.keys(scrapeHeaders).length > 0) {
|
||||
Object.keys(scrapeHeaders).forEach((headerItemKey:string) => {
|
||||
headers[headerItemKey] = scrapeHeaders[headerItemKey as keyof object];
|
||||
});
|
||||
}
|
||||
// Set Scraper API URL
|
||||
// If not URL is generated, stop right here.
|
||||
if (scraperAPIURL) {
|
||||
apiURL = scraperAPIURL;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
headers['X-Proxy-Location'] = country;
|
||||
headers['X-Api-Key'] = settings.scaping_api;
|
||||
apiURL = `https://api.serply.io/v1/search/q=${encodeURI(keyword.keyword)}&num=100&hl=${country}`;
|
||||
}
|
||||
|
||||
if (settings && settings.scraper_type === 'proxy' && settings.proxy) {
|
||||
const axiosConfig: CreateAxiosDefaults = {};
|
||||
headers.Accept = 'gzip,deflate,compress;';
|
||||
axiosConfig.headers = headers;
|
||||
const proxies = settings.proxy.split(/\r?\n|\r|\n/g);
|
||||
let proxyURL = '';
|
||||
@@ -117,30 +102,37 @@ export const scrapeKeywordFromGoogle = async (keyword:KeywordType, settings:Sett
|
||||
result: keyword.lastResult,
|
||||
error: true,
|
||||
};
|
||||
const scraperClient = getScraperClient(keyword, settings);
|
||||
const scraperType = settings?.scraper_type || '';
|
||||
const scraperObj = allScrapers.find((scraper:ScraperSettings) => scraper.id === scraperType);
|
||||
const scraperClient = getScraperClient(keyword, settings, scraperObj);
|
||||
|
||||
if (!scraperClient) { return false; }
|
||||
let res:any = null; let scraperError:any = null;
|
||||
try {
|
||||
if (settings && settings.scraper_type === 'proxy' && settings.proxy) {
|
||||
res = await scraperClient;
|
||||
} else {
|
||||
res = await scraperClient.then((result:any) => result.json());
|
||||
}
|
||||
|
||||
if (res && (res.data || res.html || res.result || res.results)) {
|
||||
const extracted = extractScrapedResult(res.data || res.html || res.result || res.results, settings.scraper_type);
|
||||
// await writeFile('result.txt', JSON.stringify(extracted), { encoding: 'utf-8' }).catch((err) => { console.log(err); });
|
||||
let scraperError:any = null;
|
||||
try {
|
||||
const res = scraperType === 'proxy' && settings.proxy ? await scraperClient : await scraperClient.then((reslt:any) => reslt.json());
|
||||
const scraperResult = scraperObj?.resultObjectKey && res[scraperObj.resultObjectKey] ? res[scraperObj.resultObjectKey] : '';
|
||||
const scrapeResult:string = (res.data || res.html || res.results || scraperResult || '');
|
||||
if (res && scrapeResult) {
|
||||
const extracted = scraperObj?.serpExtractor ? scraperObj.serpExtractor(scrapeResult) : extractScrapedResult(scrapeResult, keyword.device);
|
||||
// await writeFile('result.txt', JSON.stringify(scrapeResult), { encoding: 'utf-8' }).catch((err) => { console.log(err); });
|
||||
const serp = getSerp(keyword.domain, extracted);
|
||||
refreshedResults = { ID: keyword.ID, keyword: keyword.keyword, position: serp.postion, url: serp.url, result: extracted, error: false };
|
||||
console.log('SERP: ', keyword.keyword, serp.postion, serp.url);
|
||||
console.log('[SERP]: ', keyword.keyword, serp.postion, serp.url);
|
||||
} else {
|
||||
scraperError = res.detail || res.error || 'Unknown Error';
|
||||
throw new Error(res);
|
||||
}
|
||||
} catch (error:any) {
|
||||
console.log('#### SCRAPE ERROR: ', keyword.keyword, '. Error: ', scraperError);
|
||||
refreshedResults.error = scraperError;
|
||||
if (settings.scraper_type === 'proxy' && error && error.response && error.response.statusText) {
|
||||
refreshedResults.error = `[${error.response.status}] ${error.response.statusText}`;
|
||||
}
|
||||
|
||||
console.log('[ERROR] Scraping Keyword : ', keyword.keyword, '. Error: ', error && error.response && error.response.statusText);
|
||||
if (!(error && error.response && error.response.statusText)) {
|
||||
console.log('[ERROR_MESSAGE]: ', error);
|
||||
}
|
||||
}
|
||||
|
||||
return refreshedResults;
|
||||
@@ -149,10 +141,10 @@ export const scrapeKeywordFromGoogle = async (keyword:KeywordType, settings:Sett
|
||||
/**
|
||||
* Extracts the Google Search result as object array from the Google Search's HTML content
|
||||
* @param {string} content - scraped google search page html data.
|
||||
* @param {string} scraper_type - the type of scraper (Proxy or Scraper)
|
||||
* @param {string} device - The device of the keyword.
|
||||
* @returns {SearchResult[]}
|
||||
*/
|
||||
export const extractScrapedResult = (content: string, scraper_type:string): SearchResult[] => {
|
||||
export const extractScrapedResult = (content: string, device: string): SearchResult[] => {
|
||||
const extractedResult = [];
|
||||
|
||||
const $ = cheerio.load(content);
|
||||
@@ -160,43 +152,34 @@ export const extractScrapedResult = (content: string, scraper_type:string): Sear
|
||||
const searchResult = hasNumberofResult.children();
|
||||
let lastPosition = 0;
|
||||
|
||||
if (scraper_type === 'proxy') {
|
||||
const mainContent = $('body').find('#main');
|
||||
const children = $(mainContent).find('h3');
|
||||
|
||||
for (let index = 0; index < children.length; index += 1) {
|
||||
const title = $(children[index]).text();
|
||||
const url = $(children[index]).closest('a').attr('href');
|
||||
const cleanedURL = url ? url.replace('/url?q=', '').replace(/&sa=.*/, '') : '';
|
||||
for (let i = 0; i < searchResult.length; i += 1) {
|
||||
if (searchResult[i]) {
|
||||
const title = $(searchResult[i]).find('h3').html();
|
||||
const url = $(searchResult[i]).find('a').attr('href');
|
||||
// console.log(i, url?.slice(0, 40), title?.slice(0, 40));
|
||||
if (title && url) {
|
||||
lastPosition += 1;
|
||||
extractedResult.push({ title, url: cleanedURL, position: lastPosition });
|
||||
extractedResult.push({ title, url, position: lastPosition });
|
||||
}
|
||||
}
|
||||
} else if (scraper_type === 'serply') {
|
||||
// results already in json
|
||||
const results: SerplyResult[] = (typeof content === 'string') ? JSON.parse(content) : content as SerplyResult[];
|
||||
for (const result of results) {
|
||||
if (result.title && result.link) {
|
||||
extractedResult.push({
|
||||
title: result.title,
|
||||
url: result.link,
|
||||
position: result.realPosition,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < searchResult.length; i += 1) {
|
||||
if (searchResult[i]) {
|
||||
const title = $(searchResult[i]).find('h3').html();
|
||||
const url = $(searchResult[i]).find('a').attr('href');
|
||||
// console.log(i, url?.slice(0, 40), title?.slice(0, 40));
|
||||
}
|
||||
|
||||
// Mobile Scraper
|
||||
if (extractedResult.length === 0 && device === 'mobile') {
|
||||
const items = $('body').find('#rso > div');
|
||||
for (let i = 0; i < items.length; i += 1) {
|
||||
const item = $(items[i]);
|
||||
const linkDom = item.find('a[role="presentation"]');
|
||||
if (linkDom) {
|
||||
const url = linkDom.attr('href');
|
||||
const titleDom = linkDom.find('[role="link"]');
|
||||
const title = titleDom ? titleDom.text() : '';
|
||||
if (title && url) {
|
||||
lastPosition += 1;
|
||||
extractedResult.push({ title, url, position: lastPosition });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return extractedResult;
|
||||
@@ -229,7 +212,7 @@ export const retryScrape = async (keywordID: number) : Promise<void> => {
|
||||
|
||||
const filePath = `${process.cwd()}/data/failed_queue.json`;
|
||||
const currentQueueRaw = await readFile(filePath, { encoding: 'utf-8' }).catch((err) => { console.log(err); return '[]'; });
|
||||
currentQueue = JSON.parse(currentQueueRaw);
|
||||
currentQueue = currentQueueRaw ? JSON.parse(currentQueueRaw) : [];
|
||||
|
||||
if (!currentQueue.includes(keywordID)) {
|
||||
currentQueue.push(keywordID);
|
||||
@@ -249,7 +232,7 @@ export const removeFromRetryQueue = async (keywordID: number) : Promise<void> =>
|
||||
|
||||
const filePath = `${process.cwd()}/data/failed_queue.json`;
|
||||
const currentQueueRaw = await readFile(filePath, { encoding: 'utf-8' }).catch((err) => { console.log(err); return '[]'; });
|
||||
currentQueue = JSON.parse(currentQueueRaw);
|
||||
currentQueue = currentQueueRaw ? JSON.parse(currentQueueRaw) : [];
|
||||
currentQueue = currentQueue.filter((item) => item !== keywordID);
|
||||
|
||||
await writeFile(filePath, JSON.stringify(currentQueue), { encoding: 'utf-8' }).catch((err) => { console.log(err); return '[]'; });
|
||||
|
||||
153
utils/searchConsole.ts
Normal file
153
utils/searchConsole.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
import { auth, searchconsole_v1 } from '@googleapis/searchconsole';
|
||||
import { readFile, writeFile } from 'fs/promises';
|
||||
import { getCountryCodeFromAlphaThree } from './countries';
|
||||
|
||||
export type SCDomainFetchError = {
|
||||
error: boolean,
|
||||
errorMsg: string,
|
||||
}
|
||||
type fetchConsoleDataResponse = SearchAnalyticsItem[] | SearchAnalyticsStat[] | SCDomainFetchError;
|
||||
const fetchSearchConsoleData = async (domainName:string, days:number, type?:string): Promise<fetchConsoleDataResponse> => {
|
||||
if (!domainName) return { error: true, errorMsg: 'Domain Not Provided!' };
|
||||
try {
|
||||
const authClient = new auth.GoogleAuth({
|
||||
credentials: {
|
||||
private_key: process.env.SEARCH_CONSOLE_PRIVATE_KEY ? process.env.SEARCH_CONSOLE_PRIVATE_KEY.replaceAll('\\n', '\n') : '',
|
||||
client_email: process.env.SEARCH_CONSOLE_CLIENT_EMAIL ? process.env.SEARCH_CONSOLE_CLIENT_EMAIL : '',
|
||||
},
|
||||
scopes: [
|
||||
'https://www.googleapis.com/auth/webmasters.readonly',
|
||||
],
|
||||
});
|
||||
const startDateRaw = new Date(new Date().setDate(new Date().getDate() - days));
|
||||
const padDate = (num:number) => String(num).padStart(2, '0');
|
||||
const startDate = `${startDateRaw.getFullYear()}-${padDate(startDateRaw.getMonth() + 1)}-${padDate(startDateRaw.getDate())}`;
|
||||
const endDate = `${new Date().getFullYear()}-${padDate(new Date().getMonth() + 1)}-${padDate(new Date().getDate())}`;
|
||||
const client = new searchconsole_v1.Searchconsole({ auth: authClient });
|
||||
// Params: https://developers.google.com/webmaster-tools/v1/searchanalytics/query
|
||||
let requestBody:any = {
|
||||
startDate,
|
||||
endDate,
|
||||
type: 'web',
|
||||
rowLimit: 1000,
|
||||
dataState: 'all',
|
||||
dimensions: ['query', 'device', 'country', 'page'],
|
||||
};
|
||||
if (type === 'stat') {
|
||||
requestBody = {
|
||||
startDate,
|
||||
endDate,
|
||||
dataState: 'all',
|
||||
dimensions: ['date'],
|
||||
};
|
||||
}
|
||||
|
||||
const res = client.searchanalytics.query({ siteUrl: `sc-domain:${domainName}`, requestBody });
|
||||
const resData:any = (await res).data;
|
||||
let finalRows = resData.rows ? resData.rows.map((item:SearchAnalyticsRawItem) => parseSearchConsoleItem(item, domainName)) : [];
|
||||
|
||||
if (type === 'stat' && resData.rows && resData.rows.length > 0) {
|
||||
// console.log(resData.rows);
|
||||
finalRows = [];
|
||||
resData.rows.forEach((row:SearchAnalyticsRawItem) => {
|
||||
finalRows.push({
|
||||
date: row.keys[0],
|
||||
clicks: row.clicks,
|
||||
impressions: row.impressions,
|
||||
ctr: row.ctr * 100,
|
||||
position: row.position,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return finalRows;
|
||||
} catch (error:any) {
|
||||
const qType = type === 'stats' ? '(stats)' : `(${days}days)`;
|
||||
console.log(`[ERROR] Search Console API Error for ${domainName} ${qType} : `, error?.response?.status, error?.response?.statusText);
|
||||
return { error: true, errorMsg: `${error?.response?.status}: ${error?.response?.statusText}` };
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchDomainSCData = async (domain:string): Promise<SCDomainDataType> => {
|
||||
const days = [3, 7, 30];
|
||||
const scDomainData:SCDomainDataType = { threeDays: [], sevenDays: [], thirtyDays: [], lastFetched: '', lastFetchError: '', stats: [] };
|
||||
if (domain) {
|
||||
for (const day of days) {
|
||||
const items = await fetchSearchConsoleData(domain, day);
|
||||
scDomainData.lastFetched = new Date().toJSON();
|
||||
if (Array.isArray(items)) {
|
||||
if (day === 3) scDomainData.threeDays = items as SearchAnalyticsItem[];
|
||||
if (day === 7) scDomainData.sevenDays = items as SearchAnalyticsItem[];
|
||||
if (day === 30) scDomainData.thirtyDays = items as SearchAnalyticsItem[];
|
||||
} else if (items.error) {
|
||||
scDomainData.lastFetchError = items.errorMsg;
|
||||
}
|
||||
}
|
||||
const stats = await fetchSearchConsoleData(domain, 30, 'stat');
|
||||
if (stats && Array.isArray(stats) && stats.length > 0) {
|
||||
scDomainData.stats = stats as SearchAnalyticsStat[];
|
||||
}
|
||||
await updateLocalSCData(domain, scDomainData);
|
||||
}
|
||||
|
||||
return scDomainData;
|
||||
};
|
||||
|
||||
export const parseSearchConsoleItem = (SCItem: SearchAnalyticsRawItem, domainName: string): SearchAnalyticsItem => {
|
||||
const { clicks = 0, impressions = 0, ctr = 0, position = 0 } = SCItem;
|
||||
const keyword = SCItem.keys[0];
|
||||
const device = SCItem.keys[1] ? SCItem.keys[1].toLowerCase() : 'desktop';
|
||||
const country = SCItem.keys[2] ? (getCountryCodeFromAlphaThree(SCItem.keys[2].toUpperCase()) || SCItem.keys[2]) : 'ZZ';
|
||||
const page = SCItem.keys[3] ? SCItem.keys[3].replace('https://', '').replace('http://', '').replace('www', '').replace(domainName, '') : '';
|
||||
const uid = `${country.toLowerCase()}:${device}:${keyword.replaceAll(' ', '_')}`;
|
||||
|
||||
return { keyword, uid, device, country, clicks, impressions, ctr: ctr * 100, position, page };
|
||||
};
|
||||
|
||||
export const integrateKeywordSCData = (keyword: KeywordType, SCData:SCDomainDataType) : KeywordType => {
|
||||
const kuid = `${keyword.country.toLowerCase()}:${keyword.device}:${keyword.keyword.replaceAll(' ', '_')}`;
|
||||
const impressions:any = { yesterday: 0, threeDays: 0, sevenDays: 0, thirtyDays: 0, avgSevenDays: 0, avgThreeDays: 0, avgThirtyDays: 0 };
|
||||
const visits :any = { yesterday: 0, threeDays: 0, sevenDays: 0, thirtyDays: 0, avgSevenDays: 0, avgThreeDays: 0, avgThirtyDays: 0 };
|
||||
const ctr:any = { yesterday: 0, threeDays: 0, sevenDays: 0, thirtyDays: 0, avgSevenDays: 0, avgThreeDays: 0, avgThirtyDays: 0 };
|
||||
const position:any = { yesterday: 0, threeDays: 0, sevenDays: 0, thirtyDays: 0, avgSevenDays: 0, avgThreeDays: 0, avgThirtyDays: 0 };
|
||||
|
||||
const threeDaysData = SCData.threeDays.find((item:SearchAnalyticsItem) => item.uid === kuid) || {};
|
||||
const SevenDaysData = SCData.sevenDays.find((item:SearchAnalyticsItem) => item.uid === kuid) || {};
|
||||
const ThirdyDaysData = SCData.thirtyDays.find((item:SearchAnalyticsItem) => item.uid === kuid) || {};
|
||||
const totalData:any = { threeDays: threeDaysData, sevenDays: SevenDaysData, thirtyDays: ThirdyDaysData };
|
||||
|
||||
Object.keys(totalData).forEach((dataKey) => {
|
||||
let avgDataKey = 'avgThreeDays'; let divideBy = 3;
|
||||
if (dataKey === 'sevenDays') { avgDataKey = 'avgSevenDays'; divideBy = 7; }
|
||||
if (dataKey === 'thirtyDays') { avgDataKey = 'avgThirtyDays'; divideBy = 30; }
|
||||
// Actual Data
|
||||
impressions[dataKey] = totalData[dataKey].impressions || 0;
|
||||
visits[dataKey] = totalData[dataKey].clicks || 0;
|
||||
ctr[dataKey] = Math.round((totalData[dataKey].ctr || 0) * 100) / 100;
|
||||
position[dataKey] = totalData[dataKey].position ? Math.round(totalData[dataKey].position) : 0;
|
||||
// Average Data
|
||||
impressions[avgDataKey] = Math.round(impressions[dataKey] / divideBy);
|
||||
ctr[avgDataKey] = Math.round((ctr[dataKey] / divideBy) * 100) / 100;
|
||||
visits[avgDataKey] = Math.round(visits[dataKey] / divideBy);
|
||||
position[avgDataKey] = Math.round(position[dataKey] / divideBy);
|
||||
});
|
||||
const finalSCData = { impressions, visits, ctr, position };
|
||||
|
||||
return { ...keyword, scData: finalSCData };
|
||||
};
|
||||
|
||||
export const readLocalSCData = async (domain:string): Promise<SCDomainDataType> => {
|
||||
const filePath = `${process.cwd()}/data/SC_${domain}.json`;
|
||||
const currentQueueRaw = await readFile(filePath, { encoding: 'utf-8' }).catch(async () => { await updateLocalSCData(domain); return '{}'; });
|
||||
const domainSCData = JSON.parse(currentQueueRaw);
|
||||
return domainSCData;
|
||||
};
|
||||
|
||||
export const updateLocalSCData = async (domain:string, scDomainData?:SCDomainDataType): Promise<SCDomainDataType|false> => {
|
||||
const filePath = `${process.cwd()}/data/SC_${domain}.json`;
|
||||
const emptyData:SCDomainDataType = { threeDays: [], sevenDays: [], thirtyDays: [], lastFetched: '', lastFetchError: '' };
|
||||
await writeFile(filePath, JSON.stringify(scDomainData || emptyData), { encoding: 'utf-8' }).catch((err) => { console.log(err); });
|
||||
return scDomainData || emptyData;
|
||||
};
|
||||
|
||||
export default fetchSearchConsoleData;
|
||||
@@ -4,8 +4,8 @@
|
||||
* @param {string} sortBy - The sort method.
|
||||
* @returns {KeywordType[]}
|
||||
*/
|
||||
export const sortKeywords = (theKeywords:KeywordType[], sortBy:string) : KeywordType[] => {
|
||||
let sortedItems = [];
|
||||
export const sortKeywords = (theKeywords:KeywordType[], sortBy:string, scDataType?: string) : KeywordType[] => {
|
||||
let sortedItems: KeywordType[] = [];
|
||||
const keywords = theKeywords.map((k) => ({ ...k, position: k.position === 0 ? 111 : k.position }));
|
||||
switch (sortBy) {
|
||||
case 'date_asc':
|
||||
@@ -28,6 +28,42 @@ export const sortKeywords = (theKeywords:KeywordType[], sortBy:string) : Keyword
|
||||
case 'alpha_desc':
|
||||
sortedItems = theKeywords.sort((a: KeywordType, b: KeywordType) => (a.keyword > b.keyword ? 1 : -1));
|
||||
break;
|
||||
case 'imp_desc':
|
||||
if (scDataType) {
|
||||
sortedItems = theKeywords.sort((a: KeywordType, b: KeywordType) => {
|
||||
const bImpressionData = b.scData?.impressions[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
const aImpressionData = a.scData?.impressions[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
return aImpressionData > bImpressionData ? 1 : -1;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'imp_asc':
|
||||
if (scDataType) {
|
||||
sortedItems = theKeywords.sort((a: KeywordType, b: KeywordType) => {
|
||||
const bImpressionData = b.scData?.impressions[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
const aImpressionData = a.scData?.impressions[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
return bImpressionData > aImpressionData ? 1 : -1;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'visits_desc':
|
||||
if (scDataType) {
|
||||
sortedItems = theKeywords.sort((a: KeywordType, b: KeywordType) => {
|
||||
const bVisitsData = b.scData?.visits[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
const aVisitsData = a.scData?.visits[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
return aVisitsData > bVisitsData ? 1 : -1;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'visits_asc':
|
||||
if (scDataType) {
|
||||
sortedItems = theKeywords.sort((a: KeywordType, b: KeywordType) => {
|
||||
const bVisitsData = b.scData?.visits[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
const aVisitsData = a.scData?.visits[scDataType as keyof KeywordSCDataChild] || 0;
|
||||
return bVisitsData > aVisitsData ? 1 : -1;
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return theKeywords;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,17 @@ const verifyUser = (req: NextApiRequest, res: NextApiResponse): string => {
|
||||
const cookies = new Cookies(req, res);
|
||||
const token = cookies && cookies.get('token');
|
||||
|
||||
const allowedApiRoutes = ['GET:/api/keyword', 'GET:/api/keywords', 'GET:/api/domains', 'POST:/api/refresh', 'POST:/api/cron', 'POST:/api/notify'];
|
||||
const allowedApiRoutes = [
|
||||
'GET:/api/keyword',
|
||||
'GET:/api/keywords',
|
||||
'GET:/api/domains',
|
||||
'POST:/api/refresh',
|
||||
'POST:/api/cron',
|
||||
'POST:/api/notify',
|
||||
'POST:/api/searchconsole',
|
||||
'GET:/api/searchconsole',
|
||||
'GET:/api/insight',
|
||||
];
|
||||
const verifiedAPI = req.headers.authorization ? req.headers.authorization.substring('Bearer '.length) === process.env.APIKEY : false;
|
||||
const accessingAllowedRoute = req.url && req.method && allowedApiRoutes.includes(`${req.method}:${req.url.replace(/\?(.*)/, '')}`);
|
||||
console.log(req.method, req.url);
|
||||
|
||||
Reference in New Issue
Block a user