├── src
    ├── common
    │   ├── UIElements
    │   │   ├── embeds
    │   │   │   └── index.js
    │   │   ├── markdownRenderer
    │   │   │   ├── index.js
    │   │   │   ├── CustomCode.jsx
    │   │   │   └── MarkdownRenderer.jsx
    │   │   ├── index.js
    │   │   ├── ErrorBox.jsx
    │   │   ├── TagCard.jsx
    │   │   ├── Searchbar.jsx
    │   │   ├── SnippetCard.jsx
    │   │   ├── CategoryCard.jsx
    │   │   ├── SocialShareLinks.jsx
    │   │   └── ArticleCard.jsx
    │   ├── components
    │   │   ├── misc
    │   │   │   ├── index.js
    │   │   │   ├── Banner.jsx
    │   │   │   ├── Comment.jsx
    │   │   │   └── Newsletter.jsx
    │   │   ├── footer
    │   │   │   ├── CopyrightNotice.jsx
    │   │   │   └── Footer.jsx
    │   │   └── navbar
    │   │   │   ├── Navbar.jsx
    │   │   │   └── SearchResultsDisplay.jsx
    │   └── utils
    │   │   ├── schemaMarkup
    │   │       ├── index.js
    │   │       ├── BreadcrumbSchemaMarkup.jsx
    │   │       └── ArticleSchemaMarkup.jsx
    │   │   ├── index.js
    │   │   ├── cloudinary.js
    │   │   ├── apolloClient.js
    │   │   ├── Analytics.jsx
    │   │   ├── AdSense.jsx
    │   │   └── SEO.jsx
    ├── components
    │   ├── supportMe
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   └── KofiWidget.jsx
    │   │   └── SupportMePage.jsx
    │   ├── post
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   ├── MoreArticles.jsx
    │   │   │   └── Post.jsx
    │   │   └── PostPage.jsx
    │   ├── snippet
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   ├── MoreSnippets.jsx
    │   │   │   └── Snippet.jsx
    │   │   └── SnippetPage.jsx
    │   ├── search
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   ├── SearchPageHeader.jsx
    │   │   │   └── SearchPageBody.jsx
    │   │   ├── queries.js
    │   │   └── SearchPage.jsx
    │   ├── home
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   ├── LatestSnippets.jsx
    │   │   │   ├── LatestArticles.jsx
    │   │   │   └── Hero.jsx
    │   │   └── HomePage.jsx
    │   └── externalArticles
    │   │   ├── ExternalArticlesPage.jsx
    │   │   └── ExternalArticleCard.jsx
    ├── assets
    │   ├── fonts
    │   │   └── Alliance2.ttf
    │   └── icons
    │   │   ├── index.js
    │   │   ├── CircleIcon.js
    │   │   └── MyOnePostIcon.js
    ├── styles
    │   └── globals.css
    ├── theme
    │   ├── Fonts.jsx
    │   └── index.js
    ├── pages
    │   ├── _app.js
    │   ├── _document.js
    │   ├── support-me.js
    │   ├── tags
    │   │   └── index.js
    │   ├── categories
    │   │   └── index.js
    │   ├── snippets
    │   │   ├── index.js
    │   │   └── [snippetSlug].js
    │   ├── index.js
    │   ├── articles
    │   │   └── index.js
    │   ├── external-articles.js
    │   ├── legal
    │   │   └── [legalSlug].js
    │   └── [postSlug].js
    └── data
    │   ├── cookie-policy.md
    │   ├── terms-and-conditions.md
    │   └── privacy-policy.md
├── .yarnrc.yml
├── .eslintrc.json
├── giscus.json
├── public
    ├── ads.txt
    ├── favicon.ico
    ├── apple-icon.png
    ├── robots.txt
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── ms-icon-70x70.png
    ├── apple-icon-57x57.png
    ├── apple-icon-60x60.png
    ├── apple-icon-72x72.png
    ├── apple-icon-76x76.png
    ├── home-page-light.png
    ├── ms-icon-144x144.png
    ├── ms-icon-150x150.png
    ├── ms-icon-310x310.png
    ├── post-page-light.png
    ├── android-icon-36x36.png
    ├── android-icon-48x48.png
    ├── android-icon-72x72.png
    ├── android-icon-96x96.png
    ├── apple-icon-114x114.png
    ├── apple-icon-120x120.png
    ├── apple-icon-144x144.png
    ├── apple-icon-152x152.png
    ├── apple-icon-180x180.png
    ├── search-page-light.png
    ├── snippet-page-light.png
    ├── android-icon-144x144.png
    ├── android-icon-192x192.png
    ├── apple-icon-precomposed.png
    ├── blog-logo-maskable-512x512.png
    ├── browserconfig.xml
    └── manifest.json
├── .yarn
    └── install-state.gz
├── .dockerignore
├── .prettierrc
├── next-sitemap.config.mjs
├── docker-compose.yml
├── next.config.js
├── .prettierignore
├── jsconfig.json
├── .env.example
├── .gitignore
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    ├── FUNDING.yml
    └── pull_request_template.md
├── LICENSE
├── Dockerfile
├── package.json
├── config
    └── site.config.js
└── README.md


/src/common/UIElements/embeds/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/giscus.json:
--------------------------------------------------------------------------------
1 | {
2 |   "origins": ["https://blog.itsrakesh.com"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/ads.txt:
--------------------------------------------------------------------------------
1 | google.com, pub-5607528168839545, DIRECT, f08c47fec0942fa0


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.yarn/install-state.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/.yarn/install-state.gz


--------------------------------------------------------------------------------
/public/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | Sitemap: https://blog.itsrakesh.com/site-map
4 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/favicon-96x96.png


--------------------------------------------------------------------------------
/public/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/ms-icon-70x70.png


--------------------------------------------------------------------------------
/src/components/supportMe/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as KofiWidget } from './KofiWidget';
2 | 


--------------------------------------------------------------------------------
/public/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-57x57.png


--------------------------------------------------------------------------------
/public/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-60x60.png


--------------------------------------------------------------------------------
/public/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-72x72.png


--------------------------------------------------------------------------------
/public/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-76x76.png


--------------------------------------------------------------------------------
/public/home-page-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/home-page-light.png


--------------------------------------------------------------------------------
/public/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/ms-icon-144x144.png


--------------------------------------------------------------------------------
/public/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/ms-icon-150x150.png


--------------------------------------------------------------------------------
/public/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/ms-icon-310x310.png


--------------------------------------------------------------------------------
/public/post-page-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/post-page-light.png


--------------------------------------------------------------------------------
/public/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-36x36.png


--------------------------------------------------------------------------------
/public/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-48x48.png


--------------------------------------------------------------------------------
/public/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-72x72.png


--------------------------------------------------------------------------------
/public/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-96x96.png


--------------------------------------------------------------------------------
/public/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-114x114.png


--------------------------------------------------------------------------------
/public/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-120x120.png


--------------------------------------------------------------------------------
/public/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-144x144.png


--------------------------------------------------------------------------------
/public/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-152x152.png


--------------------------------------------------------------------------------
/public/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-180x180.png


--------------------------------------------------------------------------------
/public/search-page-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/search-page-light.png


--------------------------------------------------------------------------------
/public/snippet-page-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/snippet-page-light.png


--------------------------------------------------------------------------------
/public/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-144x144.png


--------------------------------------------------------------------------------
/public/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/android-icon-192x192.png


--------------------------------------------------------------------------------
/src/assets/fonts/Alliance2.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/src/assets/fonts/Alliance2.ttf


--------------------------------------------------------------------------------
/public/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/apple-icon-precomposed.png


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | Dockerfile
2 | .dockerignore
3 | node_modules
4 | npm-debug.log
5 | README.md
6 | .next
7 | .git
8 | yarn-error.log


--------------------------------------------------------------------------------
/public/blog-logo-maskable-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshPotnuru/blog/HEAD/public/blog-logo-maskable-512x512.png


--------------------------------------------------------------------------------
/src/assets/icons/index.js:
--------------------------------------------------------------------------------
1 | export { default as CircleIcon } from './CircleIcon';
2 | export { default as MyOnePostIcon } from './MyOnePostIcon';
3 | 


--------------------------------------------------------------------------------
/src/components/post/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Post } from './Post';
2 | export { default as MoreArticles } from './MoreArticles';
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "bracketSpacing": true,
3 |   "printWidth": 80,
4 |   "singleQuote": true,
5 |   "trailingComma": "none",
6 |   "tabWidth": 2
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/snippet/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Snippet } from './Snippet';
2 | export { default as MoreSnippets } from './MoreSnippets';
3 | 


--------------------------------------------------------------------------------
/next-sitemap.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
3 |   generateRobotsTxt: true
4 | };
5 | 
6 | export default config;
7 | 


--------------------------------------------------------------------------------
/src/common/UIElements/markdownRenderer/index.js:
--------------------------------------------------------------------------------
1 | export { default as MarkdownRenderer } from './MarkdownRenderer';
2 | export { default as CustomCode } from './CustomCode';


--------------------------------------------------------------------------------
/src/components/search/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as SearchPageHeader } from './SearchPageHeader';
2 | export { default as SearchPageBody } from './SearchPageBody';
3 | 


--------------------------------------------------------------------------------
/src/common/components/misc/index.js:
--------------------------------------------------------------------------------
1 | export { default as Comment } from './Comment';
2 | export { default as Newsletter } from './Newsletter';
3 | export { default as Banner } from './Banner';
4 | 


--------------------------------------------------------------------------------
/src/common/utils/schemaMarkup/index.js:
--------------------------------------------------------------------------------
1 | export { default as ArticleSchemaMarkup } from './ArticleSchemaMarkup';
2 | export { default as BreadcrumbSchemaMarkup } from './BreadcrumbSchemaMarkup';
3 | 


--------------------------------------------------------------------------------
/src/components/home/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Hero } from './Hero';
2 | export { default as LatestArticles } from './LatestArticles';
3 | export { default as LatestSnippets } from './LatestSnippets';
4 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | services:
 3 |   blog:
 4 |     build:
 5 |       context: ./
 6 |       target: runner
 7 |     volumes:
 8 |       - .:/app
 9 |     command: yarn dev
10 |     ports:
11 |       - "3000:3000"
12 |     environment:
13 |       NODE_ENV: development
14 | 


--------------------------------------------------------------------------------
/src/common/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as SEO } from './SEO';
2 | export { default as client } from './apolloClient';
3 | export { default as Analytics } from './Analytics';
4 | export { default as buildImage } from './cloudinary';
5 | export { default as AdSense } from './AdSense';
6 | 


--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | 
 3 | module.exports = {
 4 |   reactStrictMode: true,
 5 |   images: {
 6 |     domains: ['ik.imagekit.io', 'res.cloudinary.com']
 7 |   },
 8 |   i18n: {
 9 |     locales: ['en'],
10 |     defaultLocale: 'en'
11 |   },
12 |   output: 'standalone'
13 | };
14 | 


--------------------------------------------------------------------------------
/src/assets/icons/CircleIcon.js:
--------------------------------------------------------------------------------
 1 | import { Icon } from '@chakra-ui/react';
 2 | 
 3 | const CircleIcon = (props) => (
 4 |   <Icon viewBox="0 0 200 200" {...props}>
 5 |     <path
 6 |       fill="currentColor"
 7 |       d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
 8 |     />
 9 |   </Icon>
10 | );
11 | 
12 | export default CircleIcon;
13 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | *::-webkit-scrollbar {
 8 |   width: 0.7rem;
 9 | }
10 | 
11 | *::-webkit-scrollbar-track {
12 |   background-color: #7968e62c;
13 | }
14 | 
15 | *::-webkit-scrollbar-thumb {
16 |   border-radius: 10px;
17 |   background-color: #7868e6;
18 | }
19 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Ignore artifacts:
 2 | build
 3 | coverage
 4 | dist
 5 | 
 6 | # Ignore all HTML files:
 7 | *.html
 8 | 
 9 | LICENSE
10 | README.md
11 | .editorconfig
12 | .eslintignore
13 | .gitattributes
14 | .gitignore
15 | .gitkeep
16 | .prettierignore
17 | .github/
18 | *.yml
19 | *.yaml
20 | package*.json
21 | node_modules/
22 | public/
23 | package-lock.json
24 | yarn.lock
25 | .dockerignore


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "./src",
 4 |     "paths": {
 5 |       "@/*": ["components/*"],
 6 |       "@/components/*": ["common/components/*"],
 7 |       "@/utils/*": ["common/utils/"],
 8 |       "@/schemaMarkup/*": ["common/utils/schemaMarkup/*"],
 9 |       "@/UIElements/*": ["common/UIElements/*"],
10 |       "@/icons/*": ["assets/icons/*"]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/common/utils/cloudinary.js:
--------------------------------------------------------------------------------
 1 | import { Cloudinary } from '@cloudinary/url-gen';
 2 | 
 3 | const cld = new Cloudinary({
 4 |   cloud: {
 5 |     cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME
 6 |   },
 7 |   url: {
 8 |     secure: true
 9 |   }
10 | });
11 | 
12 | const buildImage = (src) => {
13 |   return cld.image(src).quality('auto').format('auto');
14 | };
15 | 
16 | export default buildImage;
17 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL=
 2 | NEXT_PUBLIC_HYGRAPH_AUTH_TOKEN=
 3 | 
 4 | NEXT_PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID=
 5 | 
 6 | NEXT_PUBLIC_SITE_URL=
 7 | 
 8 | NEXT_PUBLIC_GISCUS_REPO=
 9 | NEXT_PUBLIC_GISCUS_REPO_ID=
10 | NEXT_PUBLIC_GISCUS_CATEGORY=
11 | NEXT_PUBLIC_GISCUS_CATEGORY_ID=
12 | 
13 | NEXT_PUBLIC_KOFI_WIDGET_EMBED_URL=
14 | 
15 | NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=
16 | 
17 | NEXT_PUBLIC_SUBSTACK_URL=


--------------------------------------------------------------------------------
/src/common/UIElements/index.js:
--------------------------------------------------------------------------------
1 | export { default as Searchbar } from './Searchbar';
2 | export { default as ArticleCard } from './ArticleCard';
3 | export { default as SnippetCard } from './SnippetCard';
4 | export { default as CategoryCard } from './CategoryCard';
5 | export { default as TagCard } from './TagCard';
6 | export { default as SocialShareLinks } from './SocialShareLinks';
7 | export { default as ErrorBox } from './ErrorBox';
8 | 


--------------------------------------------------------------------------------
/src/common/UIElements/ErrorBox.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, HStack, Text } from '@chakra-ui/react';
 2 | import { WarningIcon } from '@chakra-ui/icons';
 3 | 
 4 | const ErrorBox = ({ error }) => {
 5 |   return (
 6 |     <Box p={2} bg={'red'} borderRadius={'md'}>
 7 |       <HStack>
 8 |         <WarningIcon />
 9 |         <Text color={'white'}>{error}</Text>
10 |       </HStack>
11 |     </Box>
12 |   );
13 | };
14 | 
15 | export default ErrorBox;
16 | 


--------------------------------------------------------------------------------
/src/common/utils/apolloClient.js:
--------------------------------------------------------------------------------
 1 | import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
 2 | 
 3 | const cache = new InMemoryCache();
 4 | const link = new HttpLink({
 5 |   uri: `${process.env.NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL}`,
 6 |   headers: {
 7 |     authorization: `Bearer ${process.env.NEXT_PUBLIC_HYGRAPH_AUTH_TOKEN}`
 8 |   }
 9 | });
10 | 
11 | const client = new ApolloClient({
12 |   cache,
13 |   link
14 | });
15 | 
16 | export default client;
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | .idea


--------------------------------------------------------------------------------
/src/common/components/misc/Banner.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Center, Link } from '@chakra-ui/react';
 2 | 
 3 | const Banner = () => {
 4 |   return (
 5 |     <Box bg="black" color="white" p={1} fontSize={'sm'}>
 6 |       <Center>
 7 |         Open for hire
 8 |         <Link
 9 |           href={"mailto:rakesh@itsrakesh.com"}
10 |           // isExternal
11 |           color={'brand.100'}
12 |           ml={1}
13 |         >
14 |           Contact me
15 |         </Link>
16 |       </Center>
17 |     </Box>
18 |   );
19 | };
20 | 
21 | export default Banner;
22 | 


--------------------------------------------------------------------------------
/src/theme/Fonts.jsx:
--------------------------------------------------------------------------------
 1 | import { Global } from '@emotion/react';
 2 | 
 3 | const Fonts = () => (
 4 |   <Global
 5 |     styles={`
 6 |       @font-face {
 7 |         font-family: 'Alliance No 2';
 8 |         font-style: normal;
 9 |         font-weight: 700;
10 |         font-display: swap;
11 |         src: url('./assets/fonts/Alliance2.ttf') format('woff2'), url('./assets/fonts/Alliance2.ttf') format('ttf');
12 |         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
13 |       }
14 |       `}
15 |   />
16 | );
17 | 
18 | export default Fonts;
19 | 


--------------------------------------------------------------------------------
/src/components/supportMe/components/KofiWidget.jsx:
--------------------------------------------------------------------------------
 1 | import { Box } from '@chakra-ui/react';
 2 | 
 3 | const KofiWidget = () => {
 4 |   return (
 5 |     <Box
 6 |       bgGradient={
 7 |         'radial(circle farthest-corner at 10% 20%,  rgba(255,221,51,1) 100.2%, rgba(187,187,187,1) 100.2%)'
 8 |       }
 9 |       rounded={'lg'}
10 |       my={2}
11 |     >
12 |       <iframe
13 |         id={'kofiframe'}
14 |         src={process.env.NEXT_PUBLIC_KOFI_WIDGET_EMBED_URL}
15 |         style={{
16 |           border: 'none',
17 |           width: '100%'
18 |         }}
19 |         height={'700'}
20 |       ></iframe>
21 |     </Box>
22 |   );
23 | };
24 | 
25 | export default KofiWidget;
26 | 


--------------------------------------------------------------------------------
/src/components/post/PostPage.jsx:
--------------------------------------------------------------------------------
 1 | import { Center } from '@chakra-ui/react';
 2 | 
 3 | import { ErrorBox } from '@/UIElements/index.js';
 4 | import { Post, MoreArticles } from './components';
 5 | import { Comment } from '@/components/misc';
 6 | 
 7 | const PostPage = ({ post, posts, error }) => {
 8 |   return (
 9 |     <>
10 |       {error ? (
11 |         <Center mt={8}>
12 |           <ErrorBox error={error} />
13 |         </Center>
14 |       ) : (
15 |         <>
16 |           <Post post={post} error={error} />
17 |           <Comment />
18 |           <MoreArticles posts={posts} />
19 |         </>
20 |       )}
21 |     </>
22 |   );
23 | };
24 | 
25 | export default PostPage;
26 | 


--------------------------------------------------------------------------------
/src/common/UIElements/TagCard.jsx:
--------------------------------------------------------------------------------
 1 | import { Badge, Link, Skeleton } from '@chakra-ui/react';
 2 | import NextLink from 'next/link';
 3 | import { motion } from 'framer-motion';
 4 | 
 5 | const TagCard = ({ tag }) => {
 6 |   return (
 7 |     <NextLink href={`/articles?t=${tag}`} passHref>
 8 |       <Link tabIndex={-1}>
 9 |         <Badge
10 |           px={4}
11 |           py={2}
12 |           cursor={'pointer'}
13 |           tabIndex={0}
14 |           as={motion.div}
15 |           whileHover={{ y: -5 }}
16 |           whileTap={{ y: 0 }}
17 |         >
18 |           #{tag}
19 |         </Badge>
20 |       </Link>
21 |     </NextLink>
22 |   );
23 | };
24 | 
25 | export default TagCard;
26 | 


--------------------------------------------------------------------------------
/src/theme/index.js:
--------------------------------------------------------------------------------
 1 | import { extendTheme, theme as base } from '@chakra-ui/react';
 2 | 
 3 | import siteConfig from '../../config/site.config';
 4 | 
 5 | const colors = {
 6 |   brand: siteConfig.branding.colors.brand,
 7 |   text: siteConfig.branding.colors.text,
 8 |   twitter: '#1DA1F2',
 9 |   linkedin: '#0077B5',
10 |   facebook: '#1877F2'
11 | };
12 | 
13 | const fonts = {
14 |   heading: `${siteConfig.branding.fonts.heading}, ${base.fonts?.heading}`,
15 |   body: `${siteConfig.branding.fonts.body}, ${base.fonts?.body}`
16 | };
17 | 
18 | const config = {
19 |   useSystemColorMode: true
20 | };
21 | 
22 | const theme = extendTheme({ colors, fonts, config });
23 | 
24 | export default theme;
25 | 


--------------------------------------------------------------------------------
/src/components/snippet/SnippetPage.jsx:
--------------------------------------------------------------------------------
 1 | import { Center } from '@chakra-ui/react';
 2 | 
 3 | import { ErrorBox } from '@/UIElements/index.js';
 4 | import { Snippet, MoreSnippets } from './components';
 5 | import { Comment } from '@/components/misc';
 6 | 
 7 | const SnippetPage = ({ snippet, snippets, error }) => {
 8 |   return (
 9 |     <>
10 |       {error ? (
11 |         <Center>
12 |           <ErrorBox error={error} />
13 |         </Center>
14 |       ) : (
15 |         <>
16 |           <Snippet snippet={snippet} />
17 |           <Comment />
18 |           <MoreSnippets snippets={snippets} />
19 |         </>
20 |       )}
21 |     </>
22 |   );
23 | };
24 | 
25 | export default SnippetPage;
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/src/components/home/HomePage.jsx:
--------------------------------------------------------------------------------
 1 | import { Center } from '@chakra-ui/react';
 2 | 
 3 | import { ErrorBox } from '@/UIElements/index.js';
 4 | import { Hero, LatestArticles, LatestSnippets } from './components';
 5 | 
 6 | const HomePage = ({ featuredPost, posts, snippets, categories, error }) => {
 7 |   return (
 8 |     <>
 9 |       {error ? (
10 |         <Center mt={8}>
11 |           <ErrorBox error={error} />
12 |         </Center>
13 |       ) : (
14 |         <>
15 |           <Hero featuredPost={featuredPost} categories={categories} />
16 |           <LatestArticles posts={posts} />
17 |           <LatestSnippets snippets={snippets} />
18 |         </>
19 |       )}
20 |     </>
21 |   );
22 | };
23 | 
24 | export default HomePage;
25 | 


--------------------------------------------------------------------------------
/src/common/utils/Analytics.jsx:
--------------------------------------------------------------------------------
 1 | import Script from 'next/script';
 2 | 
 3 | const Analytics = () => {
 4 |   return (
 5 |     <>
 6 |       <Script
 7 |         src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID}`}
 8 |         strategy={'afterInteractive'}
 9 |       />
10 |       <Script id={'gtag'} strategy={'afterInteractive'}>
11 |         {`
12 |           window.dataLayer = window.dataLayer || [];
13 |           function gtag(){dataLayer.push(arguments);}
14 |           gtag('js', new Date());
15 |           gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID}');
16 |        `}
17 |       </Script>
18 |     </>
19 |   );
20 | };
21 | 
22 | export default Analytics;
23 | 


--------------------------------------------------------------------------------
/src/components/externalArticles/ExternalArticlesPage.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Heading, SimpleGrid, Text } from '@chakra-ui/react';
 2 | import ExternalArticleCard from './ExternalArticleCard';
 3 | 
 4 | const ExternalArticlesPage = ({ articles }) => {
 5 |   return (
 6 |     <Box m={{ base: '5%', '2xl': '5% 10%' }}>
 7 |       <Heading color={'brand.50'}>EXTERNAL ARTICLES</Heading>
 8 |       <Text my={2}>Read articles written by me on other sites.</Text>
 9 |       <SimpleGrid columns={{ base: 1, md: 3, '2xl': 4 }} spacing={5}>
10 |         {articles.map((article) => (
11 |           <ExternalArticleCard key={article.id} article={article} />
12 |         ))}
13 |       </SimpleGrid>
14 |     </Box>
15 |   );
16 | };
17 | 
18 | export default ExternalArticlesPage;
19 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { ApolloProvider } from '@apollo/client';
 2 | import { ChakraProvider } from '@chakra-ui/react';
 3 | 
 4 | import { Banner } from '@/components/misc';
 5 | import { client } from '@/utils/index.js';
 6 | import siteConfig from '../../config/site.config';
 7 | import '../styles/globals.css';
 8 | import theme from '../theme';
 9 | import Fonts from '../theme/Fonts';
10 | 
11 | const MyApp = ({ Component, pageProps }) => {
12 |   return (
13 |     <ApolloProvider client={client}>
14 |       <ChakraProvider theme={theme}>
15 |         <Fonts />
16 |         {siteConfig.showBanner && <Banner />}
17 |         <Component {...pageProps} />
18 |       </ChakraProvider>
19 |     </ApolloProvider>
20 |   );
21 | };
22 | 
23 | export default MyApp;
24 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: RakeshPotnuru
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: itsrakesh
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
14 | 


--------------------------------------------------------------------------------
/src/common/utils/schemaMarkup/BreadcrumbSchemaMarkup.jsx:
--------------------------------------------------------------------------------
 1 | import Script from 'next/script';
 2 | 
 3 | const BreadcrumbSchemaMarkup = ({ items }) => {
 4 |   return (
 5 |     <Script
 6 |       id={'breadcrumb-schema'}
 7 |       type={'application/ld+json'}
 8 |       dangerouslySetInnerHTML={{
 9 |         __html: JSON.stringify({
10 |           '@context': 'http://schema.org/',
11 |           '@type': 'BreadcrumbList',
12 |           itemListElement: items.map((item) => {
13 |             return {
14 |               '@type': 'ListItem',
15 |               position: item.position,
16 |               name: item.name,
17 |               item: item.item
18 |             };
19 |           })
20 |         })
21 |       }}
22 |     />
23 |   );
24 | };
25 | 
26 | export default BreadcrumbSchemaMarkup;
27 | 


--------------------------------------------------------------------------------
/src/common/utils/AdSense.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | 
 3 | import siteConfig from '../../../config/site.config';
 4 | 
 5 | const AdSense = ({ adFormat, adSlot, ...props }) => {
 6 |   const loadAds = () => {
 7 |     try {
 8 |       if (typeof window !== 'undefined') {
 9 |         (window.adsbygoogle = window.adsbygoogle || []).push({});
10 |       }
11 |     } catch (error) {
12 |       console.log('Adsense error:', error.message);
13 |     }
14 |   };
15 | 
16 |   useEffect(() => {
17 |     loadAds();
18 |   }, []);
19 | 
20 |   return (
21 |     <ins
22 |       className={'adsbygoogle'}
23 |       data-ad-format={adFormat}
24 |       data-ad-client={'ca-' + siteConfig.adsense.publisherId}
25 |       data-ad-slot={adSlot}
26 |       {...props}
27 |     ></ins>
28 |   );
29 | };
30 | 
31 | export default AdSense;
32 | 


--------------------------------------------------------------------------------
/src/common/UIElements/Searchbar.jsx:
--------------------------------------------------------------------------------
 1 | import { Input, InputGroup, InputRightAddon } from '@chakra-ui/react';
 2 | import { Search2Icon } from '@chakra-ui/icons';
 3 | 
 4 | const Searchbar = ({ placeholder, width, searchHandler }) => {
 5 |   return (
 6 |     <form onSubmit={(e) => searchHandler(e)}>
 7 |       <InputGroup width={width}>
 8 |         <Input
 9 |           type={'text'}
10 |           name={'search'}
11 |           placeholder={placeholder ? placeholder : 'Search anything...'}
12 |         />
13 |         <InputRightAddon
14 |           aria-label={'Search'}
15 |           as={'button'}
16 |           type={'submit'}
17 |           cursor={'pointer'}
18 |           bgColor={'brand.50'}
19 |         >
20 |           <Search2Icon color={'white'} />
21 |         </InputRightAddon>
22 |       </InputGroup>
23 |     </form>
24 |   );
25 | };
26 | 
27 | export default Searchbar;
28 | 


--------------------------------------------------------------------------------
/src/common/UIElements/markdownRenderer/CustomCode.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Code, useMediaQuery } from '@chakra-ui/react';
 2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 3 | import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 4 | 
 5 | const CustomCode = ({ node, inline, className, children, ...props }) => {
 6 |   const [isLessThan780px] = useMediaQuery('(max-width: 780px)');
 7 |   const match = /language-(\w+)/.exec(className || '');
 8 | 
 9 |   return !inline && match ? (
10 |     <SyntaxHighlighter
11 |       style={dracula}
12 |       language={match[1]}
13 |       PreTag={Box}
14 |       wrapLongLines={isLessThan780px}
15 |       showLineNumbers={match[1] !== 'bash' && !isLessThan780px}
16 |       {...props}
17 |     >
18 |       {String(children).replace(/\n$/, '')}
19 |     </SyntaxHighlighter>
20 |   ) : (
21 |     <Code maxW={isLessThan780px && '15rem'} borderRadius={'md'} {...props}>
22 |       {children}
23 |     </Code>
24 |   );
25 | };
26 | 
27 | export default CustomCode;
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/src/components/home/components/LatestSnippets.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Button, Center, Heading, Link, Wrap } from '@chakra-ui/react';
 2 | import { ChevronRightIcon } from '@chakra-ui/icons';
 3 | import NextLink from 'next/link';
 4 | 
 5 | import { SnippetCard } from '@/UIElements/index.js';
 6 | 
 7 | const LatestSnippets = ({ snippets }) => {
 8 |   return (
 9 |     <Box m={{ base: '5% 10%', '2xl': '5% 15%' }}>
10 |       <Heading color={'brand.50'}>EXPLORE LATEST SNIPPETS</Heading>
11 |       <Wrap my={6}>
12 |         {snippets.map((snippet) => {
13 |           return <SnippetCard key={snippet.id} snippet={snippet} />;
14 |         })}
15 |       </Wrap>
16 |       <Center>
17 |         <NextLink href={'/snippets'} passHref>
18 |           <Link textDecor={'none'} tabIndex={-1}>
19 |             <Button rightIcon={<ChevronRightIcon />} bgColor={'transparent'}>
20 |               Browse all snippets
21 |             </Button>
22 |           </Link>
23 |         </NextLink>
24 |       </Center>
25 |     </Box>
26 |   );
27 | };
28 | 
29 | export default LatestSnippets;
30 | 


--------------------------------------------------------------------------------
/src/components/post/components/MoreArticles.jsx:
--------------------------------------------------------------------------------
 1 | import { Container, Heading, SimpleGrid } from '@chakra-ui/react';
 2 | 
 3 | import { ArticleCard } from '@/UIElements/index.js';
 4 | // import { AdSense } from 'common/utils';
 5 | // import siteConfig from '../../../../config/site.config';
 6 | 
 7 | const RelatedArticles = ({ posts }) => {
 8 |   return (
 9 |     <>
10 |       <Container maxW={'container.md'} my={20}>
11 |         <Heading color={'brand.50'}>MORE ARTICLES</Heading>
12 |         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
13 |           {posts.map((post) => (
14 |             <ArticleCard key={post.id} post={post} />
15 |           ))}
16 |         </SimpleGrid>
17 |       </Container>
18 |       {/* <Box my={20} mx={'auto'}>
19 |         <AdSense
20 |           style={{ display: 'block' }}
21 |           adFormat={'fluid'}
22 |           adSlot={siteConfig.adsense.slots.inFeed}
23 |           data-ad-layout-key={'-f9+52+6z-e1+5b'}
24 |         />
25 |       </Box> */}
26 |     </>
27 |   );
28 | };
29 | 
30 | export default RelatedArticles;
31 | 


--------------------------------------------------------------------------------
/src/common/components/misc/Comment.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react';
 2 | import Giscus from '@giscus/react';
 3 | 
 4 | const CommentBox = () => {
 5 |   const giscusTheme = useColorModeValue('light', 'dark');
 6 | 
 7 |   return (
 8 |     <Container maxW={'container.md'} my={10}>
 9 |       <Heading size={'md'}>LEAVE A COMMENT OR START A DISCUSSION</Heading>
10 |       <Box my={10}>
11 |         <Giscus
12 |           repo={process.env.NEXT_PUBLIC_GISCUS_REPO}
13 |           repoId={process.env.NEXT_PUBLIC_GISCUS_REPO_ID}
14 |           category={process.env.NEXT_PUBLIC_GISCUS_CATEGORY}
15 |           categoryId={process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
16 |           mapping="url"
17 |           reactionsEnabled="1"
18 |           emitMetadata="0"
19 |           inputPosition="top"
20 |           theme={giscusTheme}
21 |           lang="en"
22 |           loading="lazy"
23 |           crossorigin="anonymous"
24 |         />
25 |       </Box>
26 |     </Container>
27 |   );
28 | };
29 | 
30 | export default CommentBox;
31 | 


--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document';
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang={'en'} dir={'ltr'}>
 6 |       <Head>
 7 |         {/* Google AdSense */}
 8 |         {/* <script
 9 |           async
10 |           src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
11 |         /> */}
12 |         <script
13 |           dangerouslySetInnerHTML={{
14 |             __html: `
15 |             (adsbygoogle = window.adsbygoogle || []).push({
16 |               google_ad_client: "ca-pub-5607528168839545",
17 |               enable_page_level_ads: true
18 |             });
19 |             `
20 |           }}
21 |         />
22 |         <link
23 |           href={
24 |             'https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'
25 |           }
26 |           rel={'stylesheet'}
27 |         />
28 |       </Head>
29 |       <body>
30 |         <Main />
31 |         <NextScript />
32 |       </body>
33 |     </Html>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/snippet/components/MoreSnippets.jsx:
--------------------------------------------------------------------------------
 1 | import { Container, Heading, SimpleGrid } from '@chakra-ui/react';
 2 | 
 3 | import { SnippetCard } from '@/UIElements/index.js';
 4 | // import { AdSense } from 'common/utils';
 5 | // import siteConfig from '../../../../config/site.config';
 6 | 
 7 | const MoreSnippets = ({ snippets, loading }) => {
 8 |   return (
 9 |     <>
10 |       <Container maxW={'container.md'} my={20}>
11 |         <Heading color={'brand.50'}>MORE SNIPPETS</Heading>
12 |         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5} my={10}>
13 |           {snippets.map((snippet) => (
14 |             <SnippetCard key={snippet.id} snippet={snippet} loading={loading} />
15 |           ))}
16 |         </SimpleGrid>
17 |       </Container>
18 |       {/* <Box my={20} mx={'auto'}>
19 |         <AdSense
20 |           style={{ display: 'block' }}
21 |           adFormat={'fluid'}
22 |           adSlot={siteConfig.adsense.slots.inFeed}
23 |           data-ad-layout-key={'-f9+52+6z-e1+5b'}
24 |         />
25 |       </Box> */}
26 |     </>
27 |   );
28 | };
29 | 
30 | export default MoreSnippets;
31 | 


--------------------------------------------------------------------------------
/src/components/home/components/LatestArticles.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Heading,
 4 |   SimpleGrid,
 5 |   Center,
 6 |   Button,
 7 |   Link
 8 | } from '@chakra-ui/react';
 9 | import { ChevronRightIcon } from '@chakra-ui/icons';
10 | import NextLink from 'next/link';
11 | 
12 | import { ArticleCard } from '@/UIElements/index.js';
13 | 
14 | const LatestArticles = ({ posts }) => {
15 |   return (
16 |     <Box m={{ base: '5% 10%', '2xl': '5% 15%' }}>
17 |       <Heading color={'brand.50'}>READ LATEST ARTICLES</Heading>
18 |       <SimpleGrid columns={{ base: 1, md: 3 }} spacing={5}>
19 |         {posts.map((post, _i) => {
20 |           return <ArticleCard key={_i} post={post} />;
21 |         })}
22 |       </SimpleGrid>
23 |       <Center>
24 |         <NextLink href={'/articles'} passHref>
25 |           <Link textDecor={'none'} tabIndex={-1}>
26 |             <Button rightIcon={<ChevronRightIcon />} bgColor={'transparent'}>
27 |               Browse all articles
28 |             </Button>
29 |           </Link>
30 |         </NextLink>
31 |       </Center>
32 |     </Box>
33 |   );
34 | };
35 | 
36 | export default LatestArticles;
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 RakeshPotnuru
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/common/UIElements/SnippetCard.jsx:
--------------------------------------------------------------------------------
 1 | import { Box, Heading, Link, useColorModeValue } from '@chakra-ui/react';
 2 | import { ArrowForwardIcon } from '@chakra-ui/icons';
 3 | import NextLink from 'next/link';
 4 | import { motion } from 'framer-motion';
 5 | 
 6 | const SnippetCard = ({ snippet }) => {
 7 |   const cardShadow = useColorModeValue(
 8 |     'rgba(0, 0, 0, 0.16) 0px 1px 4px',
 9 |     'rgba(255, 255, 255, 0.16) 0px 1px 4px'
10 |   );
11 | 
12 |   return (
13 |     <NextLink href={`/snippets/${snippet.slug}`} passHref>
14 |       <Link tabIndex={-1}>
15 |         <Box
16 |           maxW={60}
17 |           p={5}
18 |           boxShadow={cardShadow}
19 |           borderRadius={'md'}
20 |           borderTopWidth={'4px'}
21 |           borderTopStyle={'solid'}
22 |           borderTopColor={'brand.100'}
23 |           cursor={'pointer'}
24 |           tabIndex={0}
25 |           as={motion.div}
26 |           whileHover={{ y: -5 }}
27 |           whileTap={{ y: 0 }}
28 |         >
29 |           <Heading size={'md'}>
30 |             {snippet.title} <ArrowForwardIcon color={'brand.100'} />
31 |           </Heading>
32 |         </Box>
33 |       </Link>
34 |     </NextLink>
35 |   );
36 | };
37 | 
38 | export default SnippetCard;
39 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:16-alpine AS deps
 2 | RUN apk add --no-cache libc6-compat
 3 | WORKDIR /app
 4 | 
 5 | COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 6 | RUN \
 7 |   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
 8 |   elif [ -f package-lock.json ]; then npm ci; \
 9 |   elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
10 |   else echo "Lockfile not found." && exit 1; \
11 |   fi
12 | 
13 | 
14 | FROM node:16-alpine AS builder
15 | WORKDIR /app
16 | COPY --from=deps /app/node_modules ./node_modules
17 | COPY . .
18 | 
19 | ENV NEXT_TELEMETRY_DISABLED 1
20 | 
21 | RUN yarn build
22 | 
23 | # If using npm comment out above and use below instead
24 | # RUN npm run build
25 | 
26 | FROM node:16-alpine AS runner
27 | WORKDIR /app
28 | 
29 | ENV NODE_ENV production
30 | ENV NEXT_TELEMETRY_DISABLED 1
31 | 
32 | RUN addgroup --system --gid 1001 nodejs
33 | RUN adduser --system --uid 1001 nextjs
34 | 
35 | COPY --from=builder /app/public ./public
36 | 
37 | COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
38 | COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
39 | 
40 | USER nextjs
41 | 
42 | EXPOSE 3000
43 | 
44 | ENV PORT 3000
45 | 
46 | CMD ["node", "server.js"]


--------------------------------------------------------------------------------
/src/common/components/footer/CopyrightNotice.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Avatar,
 3 |   Box,
 4 |   Center,
 5 |   Flex,
 6 |   Link,
 7 |   Spacer,
 8 |   Text
 9 | } from '@chakra-ui/react';
10 | 
11 | import siteConfig from '../../../../config/site.config';
12 | 
13 | const CopyrightNotice = () => {
14 |   return (
15 |     <Box
16 |       id={'copyright'}
17 |       py={5}
18 |       px={{ base: 10, md: 20 }}
19 |       bg={'gray.800'}
20 |       color={'white'}
21 |     >
22 |       <Flex direction={{ base: 'column', md: 'row' }}>
23 |         <Text>{siteConfig.copyrightText}</Text>
24 |         <Spacer />
25 |         <Text>v{siteConfig.siteVersion}</Text>
26 |       </Flex>
27 |       <Center>
28 |         <Text title={'Built with Love and NextJs by Rakesh'}>
29 |           &lt;/&gt; with 💖 &amp;{' '}
30 |           <Avatar
31 |             size={'xs'}
32 |             name={'NextJs'}
33 |             src={
34 |               'https://pbs.twimg.com/profile_images/1565710214019444737/if82cpbS_400x400.jpg'
35 |             }
36 |           />{' '}
37 |           by{' '}
38 |           <Link href={'https://itsrakesh.com'} isExternal>
39 |             Rakesh
40 |           </Link>
41 |         </Text>
42 |       </Center>
43 |     </Box>
44 |   );
45 | };
46 | 
47 | export default CopyrightNotice;
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "postbuild": "next-sitemap --config next-sitemap.config.mjs",
 9 |     "start": "next start",
10 |     "lint": "next lint"
11 |   },
12 |   "dependencies": {
13 |     "@apollo/client": "^3.6.5",
14 |     "@chakra-ui/icons": "^1.1.7",
15 |     "@chakra-ui/react": "^1.8.8",
16 |     "@cloudinary/url-gen": "^1.8.0",
17 |     "@emotion/react": "11",
18 |     "@emotion/styled": "11",
19 |     "@giscus/react": "^2.0.3",
20 |     "framer-motion": "6",
21 |     "graphql": "^16.5.0",
22 |     "moment": "^2.29.3",
23 |     "next": "^13.1.2",
24 |     "next-sitemap": "^3.1.6",
25 |     "react": "18.0.0",
26 |     "react-dom": "18.0.0",
27 |     "react-icons": "^4.3.1",
28 |     "react-markdown": "^8.0.3",
29 |     "react-moment": "^1.1.2",
30 |     "react-syntax-highlighter": "^15.5.0",
31 |     "reading-time": "^1.5.0",
32 |     "rehype-raw": "^6.1.1",
33 |     "remark-gfm": "^3.0.1"
34 |   },
35 |   "devDependencies": {
36 |     "eslint": "8.13.0",
37 |     "eslint-config-next": "12.1.5"
38 |   },
39 |   "packageManager": "yarn@4.2.2+sha512.c44e283c54e02de9d1da8687025b030078c1b9648d2895a65aab8e64225bfb7becba87e1809fc0b4b6778bbd47a1e2ab6ac647de4c5e383a53a7c17db6c3ff4b"
40 | }
41 | 


--------------------------------------------------------------------------------
/src/common/utils/schemaMarkup/ArticleSchemaMarkup.jsx:
--------------------------------------------------------------------------------
 1 | import Script from 'next/script';
 2 | 
 3 | import siteConfig from '../../../../config/site.config';
 4 | 
 5 | const ArticleSchemaMarkup = ({
 6 |   url,
 7 |   title,
 8 |   description,
 9 |   image,
10 |   author,
11 |   publishedAt,
12 |   updatedAt
13 | }) => {
14 |   return (
15 |     <Script
16 |       id={'article-schema'}
17 |       type={'application/ld+json'}
18 |       dangerouslySetInnerHTML={{
19 |         __html: JSON.stringify({
20 |           '@context': 'http://schema.org/',
21 |           '@type': 'BlogPosting',
22 |           mainEntityOfPage: {
23 |             '@type': 'WebPage',
24 |             '@id': url
25 |           },
26 |           author: {
27 |             '@type': 'Person',
28 |             name: author
29 |           },
30 |           publisher: {
31 |             '@type': 'Organization',
32 |             name: siteConfig.seo.copyright,
33 |             logo: {
34 |               '@type': 'ImageObject',
35 |               url: siteConfig.branding.logo
36 |             }
37 |           },
38 |           headline: title,
39 |           description: description,
40 |           image: image,
41 |           datePublished: publishedAt,
42 |           dateModified: updatedAt
43 |         })
44 |       }}
45 |     />
46 |   );
47 | };
48 | 
49 | export default ArticleSchemaMarkup;
50 | 


--------------------------------------------------------------------------------
/src/assets/icons/MyOnePostIcon.js:
--------------------------------------------------------------------------------
 1 | const MyOnePostIcon = () => {
 2 |   return (
 3 |     <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
 4 |       <path fill="#1C3AD4" d="M0 0h500v500H0z"></path>
 5 |       <path
 6 |         fill="#FDFDFE"
 7 |         d="M232 161c87.682 0 87.682 0 101 10l2.29 1.672C346.887 181.999 354.335 196.32 356 211c1.163 18.945-2.216 34.513-14.375 49.438-9.242 9.764-22.968 16.952-36.525 17.661-5.388.147-10.773.082-16.163.026L272 278v65h-40z"
 8 |       ></path>
 9 |       <path
10 |         fill="#FBFCFE"
11 |         d="M227 161v182h-40V209h-22v-28l12.5-3.812c12.93-3.978 25.73-8.278 38.502-12.732.663-.23 1.325-.462 2.008-.7q2.7-.941 5.4-1.89C226 161 226 161 227 161"
12 |       ></path>
13 |       <path
14 |         fill="#1E3DD5"
15 |         d="m272 193 13-.25 4.05-.11c9.518-.089 15.861 1.665 22.95 8.36 5.173 6.356 6.71 13.916 6 22-1.522 7.337-3.857 13.879-9.996 18.504-5.172 3.331-8.985 4.623-15.203 4.594l-3.3-.008-4.188-.028L272 246z"
16 |       ></path>
17 |       <path d="M0 459h1l.559 2.387c3.376 12.679 9.533 22.625 20.527 29.965 3.967 2.244 8.029 4.02 12.285 5.64C37 498 37 498 41 500H0zM499 459h1v41h-41v-1l2.387-.559c12.672-3.374 22.634-9.53 29.96-20.527 3.374-5.95 6.15-12.223 7.653-18.914M459 0h41v41h-1l-.559-2.387c-3.376-12.679-9.533-22.625-20.527-29.965-3.967-2.244-8.029-4.02-12.285-5.64C463 2 463 2 459 0M0 0h41v1l-2.387.559C25.934 4.935 15.988 11.092 8.648 22.086c-2.244 3.967-4.02 8.029-5.64 12.285C2 37 2 37 0 41z"></path>
18 |     </svg>
19 |   );
20 | };
21 | 
22 | export default MyOnePostIcon;
23 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | # Description
 2 | 
 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 4 | 
 5 | Fixes #<issue>
 6 | 
 7 | ## Type of change
 8 | 
 9 | - [ ] Bug fix (non-breaking change which fixes an issue)
10 | - [ ] New feature (non-breaking change which adds functionality)
11 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
12 | - [ ] This change requires a documentation update
13 | 
14 | # How Has This Been Tested?
15 | 
16 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
17 | 
18 | - [ ] Test A
19 | - [ ] Test B
20 | 
21 | **Test Configuration**:
22 | * Firmware version:
23 | * Hardware:
24 | * Toolchain:
25 | * SDK:
26 | 
27 | # Checklist:
28 | 
29 |  Please delete options that are not relevant.
30 |   
31 | - [ ] My code follows the style guidelines of this project
32 | - [ ] I have performed a self-review of my own code
33 | - [ ] I have commented my code, particularly in hard-to-understand areas
34 | - [ ] I have made corresponding changes to the documentation
35 | - [ ] My changes generate no new warnings
36 | - [ ] I have added tests that prove my fix is effective or that my feature works
37 | - [ ] New and existing unit tests pass locally with my changes
38 | - [ ] Any dependent changes have been merged and published in downstream modules
39 | 


--------------------------------------------------------------------------------
/src/common/UIElements/CategoryCard.jsx:
--------------------------------------------------------------------------------
 1 | import { Center, Link } from '@chakra-ui/react';
 2 | import { motion } from 'framer-motion';
 3 | import NextLink from 'next/link';
 4 | 
 5 | const gradients = [
 6 |   'linear(102.4deg,  rgba(253,189,85,1) 7.8%, rgba(249,131,255,1) 100.3%)',
 7 |   'radial(circle farthest-corner at 0.8% 3.1%,  rgba(255,188,224,1) 0%, rgba(170,165,255,1) 46%, rgba(165,255,205,1) 100.2%)',
 8 |   'radial(circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2%)',
 9 |   'linear(109.6deg,  rgba(218,185,252,1) 11.2%, rgba(125,89,252,1) 91.1%)',
10 |   'linear(83.2deg,  rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3%)',
11 |   'radial(circle farthest-corner at 10% 20%,  rgba(255,209,67,1) 0%, rgba(255,145,83,1) 90%)',
12 |   'radial(circle 597px at 93% 9.8%,  rgba(255,61,89,1) 1.7%, rgba(252,251,44,1) 97%)'
13 | ];
14 | 
15 | const CategoryCard = ({ m, category }) => {
16 |   return (
17 |     <NextLink href={`/articles?c=${category.slug}`} passHref>
18 |       <Link tabIndex={-1}>
19 |         <Center
20 |           m={m || 5}
21 |           p={4}
22 |           bgGradient={
23 |             gradients[Math.floor(Math.random() * (gradients.length - 1) + 1)]
24 |           }
25 |           borderRadius={'md'}
26 |           shadow={'md'}
27 |           tabIndex={0}
28 |           as={motion.div}
29 |           whileHover={{ y: -5 }}
30 |           whileTap={{ y: 0 }}
31 |         >
32 |           {category.name}
33 |         </Center>
34 |       </Link>
35 |     </NextLink>
36 |   );
37 | };
38 | 
39 | export default CategoryCard;
40 | 


--------------------------------------------------------------------------------
/src/pages/support-me.js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 6 | import SupportMePage from '@/supportMe/SupportMePage';
 7 | import { Analytics, SEO } from '@/utils/index.js';
 8 | import siteConfig from '../../config/site.config';
 9 | 
10 | const SupportMe = () => {
11 |   const router = useRouter();
12 |   const path = router.pathname;
13 | 
14 |   return (
15 |     <>
16 |       <SEO
17 |         title={siteConfig.seo.pages.supportMe.title}
18 |         description={siteConfig.seo.pages.supportMe.description}
19 |         image={siteConfig.seo.pages.supportMe.image}
20 |         altText={siteConfig.seo.pages.supportMe.title}
21 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}${path}`}
22 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}${path}`}
23 |       />
24 |       <BreadcrumbSchemaMarkup
25 |         items={[
26 |           {
27 |             position: 1,
28 |             name: 'Home',
29 |             item: process.env.NEXT_PUBLIC_SITE_URL
30 |           },
31 |           {
32 |             position: 2,
33 |             name: 'Support Me',
34 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/support-me`
35 |           }
36 |         ]}
37 |       />
38 |       <Analytics />
39 | 
40 |       <Navbar />
41 | 
42 |       <main>
43 |         <SupportMePage />
44 |         {/* <Newsletter /> */}
45 |       </main>
46 | 
47 |       <Footer />
48 |     </>
49 |   );
50 | };
51 | 
52 | export default SupportMe;
53 | 


--------------------------------------------------------------------------------
/src/components/search/queries.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client/core';
 2 | 
 3 | const GET_ARTICLES = gql`
 4 |   query GetArticles($searchQuery: String!) {
 5 |     posts(where: { _search: $searchQuery }, first: 12, stage: PUBLISHED) {
 6 |       customPublicationDate
 7 |       excerpt
 8 |       featuredImage
 9 |       publishedAt
10 |       slug
11 |       sponsored
12 |       tags
13 |       title
14 |       content
15 |     }
16 |   }
17 | `;
18 | 
19 | const GET_ARTICLES_MATCHING_CATEGORY = gql`
20 |   query ArticlesMatchingCategory($searchQuery: String!) {
21 |     posts(where: { category: { slug: $searchQuery } }, stage: PUBLISHED) {
22 |       customPublicationDate
23 |       excerpt
24 |       featuredImage
25 |       publishedAt
26 |       slug
27 |       sponsored
28 |       tags
29 |       title
30 |       content
31 |     }
32 |   }
33 | `;
34 | 
35 | const GET_ARTICLES_MATCHING_TAG = gql`
36 |   query ArticlesMatchingTag($searchQuery: Tag!) {
37 |     posts(where: { tags_contains_some: [$searchQuery] }, stage: PUBLISHED) {
38 |       customPublicationDate
39 |       excerpt
40 |       featuredImage
41 |       publishedAt
42 |       slug
43 |       sponsored
44 |       tags
45 |       title
46 |       content
47 |     }
48 |   }
49 | `;
50 | 
51 | const GET_SNIPPETS = gql`
52 |   query GetSnippets($searchQuery: String!) {
53 |     snippets(where: { _search: $searchQuery }, first: 12, stage: PUBLISHED) {
54 |       slug
55 |       title
56 |     }
57 |   }
58 | `;
59 | 
60 | const GET_CATEGORIES = gql`
61 |   query GetCategories($searchQuery: String!) {
62 |     categories(where: { _search: $searchQuery }, stage: PUBLISHED) {
63 |       name
64 |       slug
65 |     }
66 |   }
67 | `;
68 | 
69 | export const queries = {
70 |   GET_ARTICLES,
71 |   GET_ARTICLES_MATCHING_CATEGORY,
72 |   GET_ARTICLES_MATCHING_TAG,
73 |   GET_SNIPPETS,
74 |   GET_CATEGORIES
75 | };
76 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |  "short_name": "itsrakesh",
 3 |  "name": "itsrakesh - blog",
 4 |  "description": "Browse programming tutorials and articles written by Rakesh Potnuru. Learn Web Development, Blockchain, Web3 and Technical writing.",
 5 |  "scope": "/",
 6 |  "icons": [
 7 |   {
 8 |    "src": "\/android-icon-36x36.png",
 9 |    "sizes": "36x36",
10 |    "type": "image\/png",
11 |    "density": "0.75"
12 |   },
13 |   {
14 |    "src": "\/android-icon-48x48.png",
15 |    "sizes": "48x48",
16 |    "type": "image\/png",
17 |    "density": "1.0"
18 |   },
19 |   {
20 |    "src": "\/android-icon-72x72.png",
21 |    "sizes": "72x72",
22 |    "type": "image\/png",
23 |    "density": "1.5"
24 |   },
25 |   {
26 |    "src": "\/android-icon-96x96.png",
27 |    "sizes": "96x96",
28 |    "type": "image\/png",
29 |    "density": "2.0"
30 |   },
31 |   {
32 |    "src": "\/android-icon-144x144.png",
33 |    "sizes": "144x144",
34 |    "type": "image\/png",
35 |    "density": "3.0"
36 |   },
37 |   {
38 |    "src": "\/android-icon-192x192.png",
39 |    "sizes": "192x192",
40 |    "type": "image\/png",
41 |    "density": "4.0"
42 |   },
43 |   {
44 |     "src": "\/blog-icon-maskable-512x512.png",
45 |     "sizes": "512x512",
46 |     "type": "image/png",
47 |     "purpose": "maskable"
48 |   }
49 |  ],
50 |  "start_url": "/",
51 |  "background_color": "#7868E6",
52 |  "display": "browser",
53 |  "theme_color": "#7868E6",
54 |  "orientation": "any",
55 |  "screenshots": [
56 |     {
57 |       "src": "\/home-page-light.png",
58 |       "type": "image/png",
59 |       "sizes": "920x551"
60 |     },
61 |     {
62 |       "src": "\/search-page-light.png",
63 |       "type": "image/png",
64 |       "sizes": "920x551"
65 |     },
66 |     {
67 |       "src": "\/post-page-light.png",
68 |       "type": "image/png",
69 |       "sizes": "920x551"
70 |     },
71 |     {
72 |       "src": "\/snippet-page-light.png",
73 |       "type": "image/png",
74 |       "sizes": "920x551"
75 |     }
76 |  ]
77 | }
78 | 


--------------------------------------------------------------------------------
/src/pages/tags/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 6 | import SearchPage from '@/search/SearchPage';
 7 | import { Analytics, client, SEO } from '@/utils/index.js';
 8 | import siteConfig from '../../../config/site.config';
 9 | 
10 | const Tags = ({ tags, loading, error }) => {
11 |   return (
12 |     <>
13 |       <SEO
14 |         title={siteConfig.seo.pages.tags.title}
15 |         description={siteConfig.seo.pages.tags.description}
16 |         image={siteConfig.seo.pages.tags.image}
17 |         altText={siteConfig.seo.pages.tags.title}
18 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/tags`}
19 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/tags`}
20 |       />
21 |       <BreadcrumbSchemaMarkup
22 |         items={[
23 |           {
24 |             position: 1,
25 |             name: 'Home',
26 |             item: process.env.NEXT_PUBLIC_SITE_URL
27 |           },
28 |           {
29 |             position: 2,
30 |             name: 'Tags',
31 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/tags`
32 |           }
33 |         ]}
34 |       />
35 |       <Analytics />
36 | 
37 |       <Navbar />
38 | 
39 |       <main>
40 |         <SearchPage activeTab={3} tags={tags} loading={loading} error={error} />
41 |         {/* <Newsletter /> */}
42 |       </main>
43 | 
44 |       <Footer />
45 |     </>
46 |   );
47 | };
48 | 
49 | export async function getStaticProps() {
50 |   const { data, error } = await client.query({
51 |     query: gql`
52 |       query TagsPage {
53 |         __type(name: "Tag") {
54 |           enumValues {
55 |             name
56 |           }
57 |         }
58 |       }
59 |     `
60 |   });
61 | 
62 |   return {
63 |     props: {
64 |       tags: data?.__type?.enumValues,
65 |       error: error ? error.message : null
66 |     },
67 |     revalidate: 300
68 |   };
69 | }
70 | 
71 | export default Tags;
72 | 


--------------------------------------------------------------------------------
/src/components/externalArticles/ExternalArticleCard.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Avatar,
 3 |   Heading,
 4 |   HStack,
 5 |   Image,
 6 |   Link,
 7 |   Text,
 8 |   useColorModeValue,
 9 |   VStack
10 | } from '@chakra-ui/react';
11 | import Moment from 'react-moment';
12 | 
13 | const ExternalArticleCard = ({ article }) => {
14 |   const textColor = useColorModeValue('text', '#fff');
15 |   const shadow = useColorModeValue(
16 |     'lg',
17 |     'rgba(149, 157, 165, 0.2) 0px 8px 24px'
18 |   );
19 | 
20 |   return (
21 |     <VStack my={10} p={4} borderRadius={'xl'} shadow={shadow} h={'max-content'}>
22 |       {/* Featured image */}
23 |       <Link href={article.url} tabIndex={-1} isExternal>
24 |         <Image
25 |           src={article.featuredImage}
26 |           alt={article.title}
27 |           htmlWidth={'100%'}
28 |           htmlHeight={'auto'}
29 |           rounded={'lg'}
30 |           tabIndex={0}
31 |         />
32 |       </Link>
33 | 
34 |       {/* Website  */}
35 |       <HStack py={2} w={'fit-content'}>
36 |         <Avatar
37 |           size={'xs'}
38 |           name={article.domainName.split('.')[0]}
39 |           src={article.logoUrl}
40 |         />
41 |         <Link href={`https://${article.domainName}`} isExternal>
42 |           {article.domainName}
43 |         </Link>
44 |       </HStack>
45 | 
46 |       {/* Title */}
47 |       <Link
48 |         href={article.url}
49 |         alignSelf={'flex-start'}
50 |         _hover={{ color: 'brand.50' }}
51 |         tabIndex={-1}
52 |         isExternal
53 |       >
54 |         <Heading size={'md'} tabIndex={0}>
55 |           {article.title}
56 |         </Heading>
57 |       </Link>
58 | 
59 |       {/* Description */}
60 |       <Text color={textColor} alignSelf={'flex-start'}>
61 |         {article.description}
62 |       </Text>
63 | 
64 |       {/* Published Date */}
65 |       <Text alignSelf={'flex-start'} fontWeight={'medium'}>
66 |         <Moment format="MMM DD, YYYY">{article.publishedDate}</Moment>
67 |       </Text>
68 |     </VStack>
69 |   );
70 | };
71 | 
72 | export default ExternalArticleCard;
73 | 


--------------------------------------------------------------------------------
/src/pages/categories/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 6 | import SearchPage from '@/search/SearchPage';
 7 | import { Analytics, client, SEO } from '@/utils/index.js';
 8 | import siteConfig from '../../../config/site.config';
 9 | 
10 | const Categories = ({ categories, error }) => {
11 |   return (
12 |     <>
13 |       <SEO
14 |         title={siteConfig.seo.pages.categories.title}
15 |         description={siteConfig.seo.pages.categories.description}
16 |         image={siteConfig.seo.pages.categories.image}
17 |         altText={siteConfig.seo.pages.categories.title}
18 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/categories`}
19 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/categories`}
20 |       />
21 |       <BreadcrumbSchemaMarkup
22 |         items={[
23 |           {
24 |             position: 1,
25 |             name: 'Home',
26 |             item: process.env.NEXT_PUBLIC_SITE_URL
27 |           },
28 |           {
29 |             position: 2,
30 |             name: 'Categories',
31 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/categories`
32 |           }
33 |         ]}
34 |       />
35 |       <Analytics />
36 | 
37 |       <Navbar />
38 | 
39 |       <main>
40 |         <SearchPage activeTab={2} categories={categories} error={error} />
41 |         {/* <Newsletter /> */}
42 |       </main>
43 | 
44 |       <Footer />
45 |     </>
46 |   );
47 | };
48 | 
49 | export async function getStaticProps() {
50 |   const { data, error } = await client.query({
51 |     query: gql`
52 |       query CategoriesPage {
53 |         categories {
54 |           id
55 |           name
56 |           slug
57 |         }
58 |       }
59 |     `
60 |   });
61 | 
62 |   return {
63 |     props: {
64 |       categories: data?.categories,
65 |       error: error ? error.message : null
66 |     },
67 |     revalidate: 300
68 |   };
69 | }
70 | 
71 | export default Categories;
72 | 


--------------------------------------------------------------------------------
/src/pages/snippets/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 6 | import SearchPage from '@/search/SearchPage';
 7 | import { Analytics, client, SEO } from '@/utils/index.js';
 8 | import siteConfig from '../../../config/site.config';
 9 | 
10 | const Snippets = ({ snippets, error }) => {
11 |   return (
12 |     <>
13 |       <SEO
14 |         title={siteConfig.seo.pages.snippets.title}
15 |         description={siteConfig.seo.pages.snippets.description}
16 |         image={siteConfig.seo.pages.snippets.image}
17 |         altText={siteConfig.seo.pages.snippets.title}
18 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/snippets`}
19 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/snippets`}
20 |       />
21 |       <BreadcrumbSchemaMarkup
22 |         items={[
23 |           {
24 |             position: 1,
25 |             name: 'Home',
26 |             item: process.env.NEXT_PUBLIC_SITE_URL
27 |           },
28 |           {
29 |             position: 2,
30 |             name: 'Snippets',
31 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/snippets`
32 |           }
33 |         ]}
34 |       />
35 |       <Analytics />
36 | 
37 |       <Navbar />
38 | 
39 |       <main>
40 |         <SearchPage activeTab={1} snippets={snippets} error={error} />
41 |         {/* <Newsletter /> */}
42 |       </main>
43 | 
44 |       <Footer />
45 |     </>
46 |   );
47 | };
48 | 
49 | export async function getStaticProps() {
50 |   const { data, error } = await client.query({
51 |     query: gql`
52 |       query SnippetsPage {
53 |         snippets(orderBy: createdAt_DESC, first: 10) {
54 |           id
55 |           title
56 |           slug
57 |         }
58 |       }
59 |     `
60 |   });
61 | 
62 |   return {
63 |     props: {
64 |       snippets: data?.snippets,
65 |       error: error ? error.message : null
66 |     },
67 |     revalidate: 300
68 |   };
69 | }
70 | 
71 | export default Snippets;
72 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import HomePage from '@/home/HomePage';
 6 | import { Analytics, client, SEO } from '../common/utils';
 7 | 
 8 | const Home = ({ featuredPost, posts, snippets, categories, error }) => {
 9 |   return (
10 |     <>
11 |       <SEO />
12 |       <Analytics />
13 | 
14 |       <Navbar />
15 | 
16 |       <main>
17 |         <HomePage
18 |           featuredPost={featuredPost}
19 |           posts={posts}
20 |           snippets={snippets}
21 |           categories={categories}
22 |           error={error}
23 |         />
24 | 
25 |         {/* <Newsletter /> */}
26 |       </main>
27 |       <Footer />
28 |     </>
29 |   );
30 | };
31 | 
32 | export async function getStaticProps() {
33 |   const { data, error } = await client.query({
34 |     query: gql`
35 |       query HomePage {
36 |         posts(orderBy: createdAt_DESC, first: 3) {
37 |           featuredImage
38 |           customPublicationDate
39 |           excerpt
40 |           publishedAt
41 |           slug
42 |           sponsored
43 |           tags
44 |           title
45 |           content
46 |         }
47 |         snippets(orderBy: createdAt_DESC, first: 4) {
48 |           id
49 |           title
50 |           slug
51 |         }
52 |         categories(first: 4) {
53 |           id
54 |           name
55 |           slug
56 |         }
57 |       }
58 |     `
59 |   });
60 | 
61 |   const featuredPost = await client.query({
62 |     query: gql`
63 |       query FeaturedPost {
64 |         posts(first: 1, where: { featuredPost: true }) {
65 |           slug
66 |           title
67 |           featuredImage
68 |         }
69 |       }
70 |     `
71 |   });
72 | 
73 |   return {
74 |     props: {
75 |       posts: data?.posts,
76 |       snippets: data?.snippets,
77 |       categories: data?.categories,
78 |       featuredPost: featuredPost?.data?.posts[0],
79 |       error: error ? error.message : null
80 |     },
81 |     revalidate: 300
82 |   };
83 | }
84 | 
85 | export default Home;
86 | 


--------------------------------------------------------------------------------
/src/pages/articles/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | 
 3 | import Footer from '@/components/footer/Footer';
 4 | import Navbar from '@/components/navbar/Navbar';
 5 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 6 | import SearchPage from '@/search/SearchPage';
 7 | import { Analytics, client, SEO } from '@/utils/index.js';
 8 | import siteConfig from '../../../config/site.config';
 9 | 
10 | const Articles = ({ posts, error }) => {
11 |   return (
12 |     <>
13 |       <SEO
14 |         title={siteConfig.seo.pages.articles.title}
15 |         description={siteConfig.seo.pages.articles.description}
16 |         image={siteConfig.seo.pages.articles.image}
17 |         altText={siteConfig.seo.pages.articles.title}
18 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/articles`}
19 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/articles`}
20 |       />
21 |       <BreadcrumbSchemaMarkup
22 |         items={[
23 |           {
24 |             position: 1,
25 |             name: 'Home',
26 |             item: process.env.NEXT_PUBLIC_SITE_URL
27 |           },
28 |           {
29 |             position: 2,
30 |             name: 'Articles',
31 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/articles`
32 |           }
33 |         ]}
34 |       />
35 |       <Analytics />
36 | 
37 |       <Navbar />
38 | 
39 |       <main>
40 |         <SearchPage activeTab={0} posts={posts} error={error} />
41 |         {/* <Newsletter /> */}
42 |       </main>
43 | 
44 |       <Footer />
45 |     </>
46 |   );
47 | };
48 | 
49 | export async function getStaticProps() {
50 |   const { data, error } = await client.query({
51 |     query: gql`
52 |       query ArticlesPage {
53 |         posts(orderBy: createdAt_DESC, first: 12) {
54 |           featuredImage
55 |           id
56 |           customPublicationDate
57 |           excerpt
58 |           publishedAt
59 |           slug
60 |           sponsored
61 |           tags
62 |           title
63 |           content
64 |         }
65 |       }
66 |     `
67 |   });
68 | 
69 |   return {
70 |     props: {
71 |       posts: data?.posts,
72 |       error: error ? error.message : null
73 |     },
74 |     revalidate: 300
75 |   };
76 | }
77 | 
78 | export default Articles;
79 | 


--------------------------------------------------------------------------------
/src/pages/external-articles.js:
--------------------------------------------------------------------------------
 1 | import { gql } from '@apollo/client';
 2 | import { useRouter } from 'next/router';
 3 | 
 4 | import Footer from '@/components/footer/Footer';
 5 | import Navbar from '@/components/navbar/Navbar';
 6 | import ExternalArticlesPage from '@/externalArticles/ExternalArticlesPage';
 7 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
 8 | import { Analytics, client, SEO } from '@/utils/index.js';
 9 | import siteConfig from '../../config/site.config';
10 | 
11 | const ExternalArticles = ({ articles }) => {
12 |   const router = useRouter();
13 |   const path = router.pathname;
14 | 
15 |   return (
16 |     <>
17 |       <SEO
18 |         title={siteConfig.seo.pages.externalArticles.title}
19 |         description={siteConfig.seo.pages.externalArticles.description}
20 |         image={siteConfig.seo.pages.externalArticles.image}
21 |         altText={siteConfig.seo.pages.externalArticles.title}
22 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}${path}`}
23 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}${path}`}
24 |       />
25 |       <BreadcrumbSchemaMarkup
26 |         items={[
27 |           {
28 |             position: 1,
29 |             name: 'Home',
30 |             item: process.env.NEXT_PUBLIC_SITE_URL
31 |           },
32 |           {
33 |             position: 2,
34 |             name: 'External Articles',
35 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/expernal-articles`
36 |           }
37 |         ]}
38 |       />
39 |       <Analytics />
40 | 
41 |       <Navbar />
42 | 
43 |       <main>
44 |         <ExternalArticlesPage articles={articles} />
45 |         {/* <Newsletter /> */}
46 |       </main>
47 |       <Footer />
48 |     </>
49 |   );
50 | };
51 | 
52 | export async function getStaticProps() {
53 |   const { data } = await client.query({
54 |     query: gql`
55 |       query ExternalArticles {
56 |         externalArticles(orderBy: publishedDate_DESC, stage: PUBLISHED) {
57 |           id
58 |           domainName
59 |           logoUrl
60 |           featuredImage
61 |           publishedDate
62 |           title
63 |           description
64 |           url
65 |         }
66 |       }
67 |     `
68 |   });
69 | 
70 |   return {
71 |     props: {
72 |       articles: data.externalArticles
73 |     },
74 |     revalidate: 300
75 |   };
76 | }
77 | 
78 | export default ExternalArticles;
79 | 


--------------------------------------------------------------------------------
/src/common/UIElements/markdownRenderer/MarkdownRenderer.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Container,
 3 |   Divider,
 4 |   Heading,
 5 |   Image,
 6 |   Link,
 7 |   ListItem,
 8 |   OrderedList,
 9 |   Table,
10 |   TableContainer,
11 |   Tbody,
12 |   Text,
13 |   Th,
14 |   Thead,
15 |   Tr,
16 |   UnorderedList,
17 |   useMediaQuery
18 | } from '@chakra-ui/react';
19 | import ReactMarkdown from 'react-markdown';
20 | import remarkGfm from 'remark-gfm';
21 | import rehypeRaw from 'rehype-raw';
22 | 
23 | import { CustomCode } from './';
24 | 
25 | const MarkdownRenderer = ({ content }) => {
26 |   const [isLessThan780px] = useMediaQuery('(max-width: 780px)');
27 | 
28 |   return (
29 |     <Container maxW={'container.md'}>
30 |       <ReactMarkdown
31 |         remarkPlugins={[remarkGfm]}
32 |         rehypePlugins={[rehypeRaw]}
33 |         components={{
34 |           h1: Heading,
35 |           h2: (props) => <Heading my={6} size="lg" {...props} />,
36 |           h3: (props) => <Heading my={4} size="md" {...props} />,
37 |           p: (props) => <Text my={4} color={'textColor'} {...props} />,
38 |           ul: (props) => <UnorderedList my={4} {...props} />,
39 |           ol: (props) => <OrderedList my={4} {...props} />,
40 |           li: ListItem,
41 |           hr: Divider,
42 |           a: (props) => (
43 |             <Link href={props.href} color={'brand.50'} isExternal>
44 |               {props.children}
45 |             </Link>
46 |           ),
47 |           img: (props) => (
48 |             <Image
49 |               my={8}
50 |               shadow={'lg'}
51 |               htmlWidth={'100%'}
52 |               htmlHeight={'auto'}
53 |               src={props.src}
54 |               alt={props.alt}
55 |               {...props}
56 |             />
57 |           ),
58 |           code: CustomCode,
59 |           table: (props) => (
60 |             <TableContainer
61 |               w={isLessThan780px && '17rem'}
62 |               overflowX={'scroll'}
63 |               whiteSpace={'pre-wrap'}
64 |             >
65 |               <Table my={4} variant="striped" colorScheme={'gray'} {...props} />
66 |             </TableContainer>
67 |           ),
68 |           thead: Thead,
69 |           tr: Tr,
70 |           th: Th,
71 |           tbody: Tbody
72 |         }}
73 |       >
74 |         {content}
75 |       </ReactMarkdown>
76 |     </Container>
77 |   );
78 | };
79 | 
80 | export default MarkdownRenderer;
81 | 


--------------------------------------------------------------------------------
/src/common/UIElements/SocialShareLinks.jsx:
--------------------------------------------------------------------------------
 1 | import { IconButton, Link, Tooltip } from '@chakra-ui/react';
 2 | import { CheckIcon } from '@chakra-ui/icons';
 3 | import {
 4 |   FaFacebook,
 5 |   FaLink,
 6 |   FaLinkedin,
 7 |   FaReddit,
 8 |   FaTwitter
 9 | } from 'react-icons/fa';
10 | 
11 | import siteConfig from '../../../config/site.config';
12 | 
13 | const SocialShareIcon = ({ label, placement, href, icon }) => {
14 |   return (
15 |     <Tooltip hasArrow label={label} placement={placement}>
16 |       <Link href={href} tabIndex={-1} isExternal>
17 |         <IconButton aria-label={label} icon={icon} rounded={'full'} />
18 |       </Link>
19 |     </Tooltip>
20 |   );
21 | };
22 | 
23 | const SocialShareLinks = ({
24 |   toolTipPlacement,
25 |   onCopy,
26 |   hasCopied,
27 |   title,
28 |   slug
29 | }) => {
30 |   return (
31 |     <>
32 |       <SocialShareIcon
33 |         label={'Share on Twitter'}
34 |         placement={toolTipPlacement}
35 |         href={`https://twitter.com/intent/tweet?url=${process.env.NEXT_PUBLIC_SITE_URL}/${slug}&text="${title}"%20by%20${siteConfig.seo.twitterUsername}`}
36 |         icon={<FaTwitter />}
37 |       />
38 |       <SocialShareIcon
39 |         label={'Share on LinkedIn'}
40 |         placement={toolTipPlacement}
41 |         href={`https://www.linkedin.com/shareArticle?mini=true&url=${process.env.NEXT_PUBLIC_SITE_URL}/${slug}`}
42 |         icon={<FaLinkedin />}
43 |       />
44 |       <SocialShareIcon
45 |         label={'Share on Facebook'}
46 |         placement={toolTipPlacement}
47 |         href={`https://www.facebook.com/sharer/sharer.php?u=${process.env.NEXT_PUBLIC_SITE_URL}/${slug}`}
48 |         icon={<FaFacebook />}
49 |       />
50 |       <SocialShareIcon
51 |         label={'Share on Reddit'}
52 |         placement={toolTipPlacement}
53 |         href={`https://reddit.com/submit?url=${process.env.NEXT_PUBLIC_SITE_URL}/${slug}&title=${title}`}
54 |         icon={<FaReddit />}
55 |       />
56 |       <Tooltip hasArrow label="Copy Link" placement={toolTipPlacement}>
57 |         <IconButton
58 |           onClick={onCopy}
59 |           aria-label="copy link"
60 |           icon={
61 |             hasCopied ? (
62 |               <CheckIcon color={'white'} fontSize={'lg'} />
63 |             ) : (
64 |               <FaLink />
65 |             )
66 |           }
67 |           {...(hasCopied && { bg: 'green.400', _hover: { bg: 'green.500' } })}
68 |           rounded={'full'}
69 |         />
70 |       </Tooltip>
71 |     </>
72 |   );
73 | };
74 | 
75 | export default SocialShareLinks;
76 | 


--------------------------------------------------------------------------------
/src/components/search/components/SearchPageHeader.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Center,
 4 |   Heading,
 5 |   Input,
 6 |   InputGroup,
 7 |   InputLeftElement,
 8 |   useColorModeValue,
 9 |   useMediaQuery,
10 |   VStack
11 | } from '@chakra-ui/react';
12 | import { Search2Icon } from '@chakra-ui/icons';
13 | 
14 | const changePlaceholderText = (param) => {
15 |   switch (param) {
16 |     case 0:
17 |       return 'articles';
18 |     case 1:
19 |       return 'snippets';
20 |     case 2:
21 |       return 'categories';
22 |     case 3:
23 |       return 'tags';
24 |     default:
25 |       break;
26 |   }
27 | };
28 | 
29 | const SearchPageHeader = ({ activeTab, searchHandler }) => {
30 |   const [isLessThan480px] = useMediaQuery('(max-width: 480px)');
31 |   const inputBg = useColorModeValue('white', '#1A202C');
32 | 
33 |   return (
34 |     <>
35 |       {/* Search input on mobile screens */}
36 |       {isLessThan480px ? (
37 |         <form onSubmit={(e) => searchHandler(e)}>
38 |           <InputGroup m={7}>
39 |             <InputLeftElement pointerEvents={'none'}>
40 |               <Search2Icon />
41 |             </InputLeftElement>
42 |             <Input
43 |               type={'text'}
44 |               name={'search'}
45 |               placeholder={`Search ${changePlaceholderText(activeTab)}...`}
46 |               bg={inputBg}
47 |               w={'85%'}
48 |             />
49 |           </InputGroup>
50 |         </form>
51 |       ) : (
52 |         <Box
53 |           bgGradient={
54 |             'linear( 102.4deg,  rgba(253,189,85,1) 7.8%, rgba(249,131,255,1) 100.3% )'
55 |           }
56 |         >
57 |           {/* Search input on all screens expect mobile */}
58 |           <Box py={20}>
59 |             <Center>
60 |               <VStack spacing={6}>
61 |                 <Heading color={'white'}>
62 |                   What you want to {activeTab === 0 ? 'read' : 'explore'}?
63 |                 </Heading>
64 |                 <form onSubmit={(e) => searchHandler(e)}>
65 |                   <InputGroup>
66 |                     <InputLeftElement pointerEvents={'none'}>
67 |                       <Search2Icon />
68 |                     </InputLeftElement>
69 |                     <Input
70 |                       type={'text'}
71 |                       name={'search'}
72 |                       placeholder={`Search ${changePlaceholderText(
73 |                         activeTab
74 |                       )}...`}
75 |                       bg={inputBg}
76 |                     />
77 |                   </InputGroup>
78 |                 </form>
79 |               </VStack>
80 |             </Center>
81 |           </Box>
82 |         </Box>
83 |       )}
84 |     </>
85 |   );
86 | };
87 | 
88 | export default SearchPageHeader;
89 | 


--------------------------------------------------------------------------------
/src/common/components/misc/Newsletter.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Button,
 4 |   Center,
 5 |   Heading,
 6 |   Link,
 7 |   List,
 8 |   ListIcon,
 9 |   ListItem,
10 |   VStack,
11 |   SimpleGrid,
12 |   Divider
13 | } from '@chakra-ui/react';
14 | import { CheckCircleIcon, ChevronRightIcon } from '@chakra-ui/icons';
15 | 
16 | const Newsletter = () => {
17 |   return (
18 |     <Box
19 |       id={'newsletter'}
20 |       p={{ base: 10, md: 20 }}
21 |       mt={5}
22 |       bgGradient={
23 |         'linear( 83.2deg,  rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% )'
24 |       }
25 |     >
26 |       <Center color={'white'}>
27 |         <VStack>
28 |           <Heading mb={4} textAlign={['center', null]}>
29 |             Subscribe to Newsletter
30 |             <Center>
31 |               <Box my={2} w={'40%'} h={'5px'} bg={'brand.300'} />
32 |             </Center>
33 |           </Heading>
34 |           <SimpleGrid columns={[1, 2]} spacing={4} w={[null, '70%']}>
35 |             <Box>
36 |               <Center>
37 |                 <Heading size={'md'}>Weekly</Heading>
38 |               </Center>
39 |               <Divider my={2} />
40 |               <List spacing={4} my={2}>
41 |                 <ListItem>
42 |                   <ListIcon as={CheckCircleIcon} />
43 |                   Never miss an update.
44 |                 </ListItem>
45 |                 <ListItem>
46 |                   <ListIcon as={CheckCircleIcon} />
47 |                   Get articles and snippets directly to your inbox.
48 |                 </ListItem>
49 |                 <ListItem>
50 |                   <ListIcon as={CheckCircleIcon} />
51 |                   Subscribe to stay connected and avoid getting lost among
52 |                   millions of websites.
53 |                 </ListItem>
54 |               </List>
55 |             </Box>
56 |             <Box>
57 |               <Center>
58 |                 <Heading size={'md'}>Monthly</Heading>
59 |               </Center>
60 |               <Divider my={2} />
61 |               <List spacing={4} my={2}>
62 |                 <ListItem>
63 |                   <ListIcon as={CheckCircleIcon} />
64 |                   Coming soon...
65 |                 </ListItem>
66 |               </List>
67 |             </Box>
68 |           </SimpleGrid>
69 | 
70 |           <Link href={process.env.NEXT_PUBLIC_SUBSTACK_URL} isExternal>
71 |             <Button
72 |               rightIcon={<ChevronRightIcon />}
73 |               bg={'brand.300'}
74 |               color={'black'}
75 |               _hover={{ bg: 'brand.300', opacity: 0.8 }}
76 |               _active={{ bg: 'brand.300', opacity: 0.8 }}
77 |             >
78 |               Subscribe Now
79 |             </Button>
80 |           </Link>
81 |         </VStack>
82 |       </Center>
83 |     </Box>
84 |   );
85 | };
86 | 
87 | export default Newsletter;
88 | 


--------------------------------------------------------------------------------
/src/components/supportMe/SupportMePage.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Button,
 4 |   Center,
 5 |   Heading,
 6 |   Link,
 7 |   SimpleGrid,
 8 |   Spacer,
 9 |   Text,
10 |   useColorModeValue
11 | } from '@chakra-ui/react';
12 | import { FaTwitter } from 'react-icons/fa';
13 | 
14 | import siteConfig from '../../../config/site.config';
15 | import { KofiWidget } from './components';
16 | // import { AdSense } from 'common/utils';
17 | 
18 | const SupportMePage = () => {
19 |   const bgColor = useColorModeValue('gray.100', 'gray.700');
20 |   return (
21 |     <>
22 |       <Box m={{ base: '5% 10%', '2xl': '5% 15%' }}>
23 |         <Heading textAlign={'center'}>SUPPORT ME 💖</Heading>
24 |         <Text textAlign={'center'} my={4}>
25 |           Content creation is hard without your support.
26 |         </Text>
27 |         <Box my={8}>
28 |           <SimpleGrid my={8} columns={{ base: 1, md: 3 }}>
29 |             <Box>
30 |               <Heading size={'md'}>Follow me on Twitter</Heading>
31 |               <Text my={4}>
32 |                 Help me reach more audience. I also share my thoughts, resources
33 |                 and more useful stuff.
34 |               </Text>
35 |             </Box>
36 |             <Spacer />
37 |             <Center bg={bgColor} p={12} my={2} rounded={'md'}>
38 |               <Link href={siteConfig.urls.socials.twitter} isExternal>
39 |                 <Button
40 |                   leftIcon={<FaTwitter />}
41 |                   bg={'twitter'}
42 |                   color={'white'}
43 |                   shadow={'md'}
44 |                   _hover={{ bg: 'twitter', opacity: 0.8 }}
45 |                   _active={{ bg: 'twitter', opacity: 0.8 }}
46 |                 >
47 |                   Follow
48 |                 </Button>
49 |               </Link>
50 |             </Center>
51 |           </SimpleGrid>
52 |         </Box>
53 | 
54 |         <Box my={8}>
55 |           <SimpleGrid my={8} columns={{ base: 1, md: 2 }} spacing={6}>
56 |             {/* Ko-fi widget */}
57 |             <KofiWidget />
58 | 
59 |             <Box>
60 |               <Heading size={'md'}>Donate</Heading>
61 |               <Text my={4}>
62 |                 Your donations keep this blog running and motivate me to create
63 |                 more content.
64 |               </Text>
65 |               <Text as={'i'} fontSize={'sm'}>
66 |                 If you don&apos;t want to use this widget, you can donate via my{' '}
67 |                 <Link href={siteConfig.urls.kofi} color={'brand.50'} isExternal>
68 |                   ko-fi page
69 |                 </Link>
70 |                 .
71 |               </Text>
72 |             </Box>
73 |           </SimpleGrid>
74 |         </Box>
75 |       </Box>
76 |       {/* <Box my={20} mx={'auto'}>
77 |         <AdSense
78 |           style={{ display: 'block' }}
79 |           adFormat={'fluid'}
80 |           adSlot={siteConfig.adsense.slots.inFeed}
81 |           data-ad-layout-key={'-f9+52+6z-e1+5b'}
82 |         />
83 |       </Box> */}
84 |     </>
85 |   );
86 | };
87 | 
88 | export default SupportMePage;
89 | 


--------------------------------------------------------------------------------
/src/common/UIElements/ArticleCard.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Badge,
  3 |   Center,
  4 |   Heading,
  5 |   Image,
  6 |   Link,
  7 |   Text,
  8 |   useColorModeValue,
  9 |   VStack,
 10 |   Wrap
 11 | } from '@chakra-ui/react';
 12 | import NextLink from 'next/link';
 13 | import Moment from 'react-moment';
 14 | import readingTime from 'reading-time';
 15 | 
 16 | import { CircleIcon } from '../../assets/icons';
 17 | import TagCard from './TagCard';
 18 | import { buildImage } from '../utils';
 19 | import { Resize } from '@cloudinary/url-gen/actions';
 20 | 
 21 | const ArticleCard = ({ post }) => {
 22 |   const textColor = useColorModeValue('text', '#fff');
 23 |   const shadow = useColorModeValue(
 24 |     'lg',
 25 |     'rgba(149, 157, 165, 0.2) 0px 8px 24px'
 26 |   );
 27 | 
 28 |   const readTime = readingTime(post.content);
 29 | 
 30 |   return (
 31 |     <VStack my={10} p={4} borderRadius={'xl'} shadow={shadow} h={'max-content'}>
 32 |       {/* Cover image */}
 33 |       <NextLink href={`/${post.slug}`} passHref>
 34 |         <Link tabIndex={-1}>
 35 |           <Image
 36 |             src={buildImage(post.featuredImage.public_id)
 37 |               .resize(Resize.scale().width(1600).height(840))
 38 |               .toURL()}
 39 |             alt={post.title}
 40 |             htmlWidth={'100%'}
 41 |             htmlHeight={'auto'}
 42 |             rounded={'lg'}
 43 |             tabIndex={0}
 44 |           />
 45 |         </Link>
 46 |       </NextLink>
 47 | 
 48 |       <Wrap
 49 |         textTransform={'uppercase'}
 50 |         alignSelf={'flex-start'}
 51 |         color={'brand.100'}
 52 |         fontWeight={'bold'}
 53 |       >
 54 |         {/* Publication date */}
 55 |         <Text>
 56 |           <Moment format="MMM DD, YYYY">
 57 |             {post.customPublicationDate || post.publishedAt}
 58 |           </Moment>
 59 |         </Text>
 60 |         <Center>
 61 |           <CircleIcon boxSize={'2'} />
 62 |         </Center>
 63 | 
 64 |         {/* Read time */}
 65 |         <Text textTransform={'uppercase'}>{readTime.text}</Text>
 66 |         {post.sponsored && (
 67 |           <Center>
 68 |             <Badge h={'max-content'} colorScheme={'purple'}>
 69 |               sponsored
 70 |             </Badge>
 71 |           </Center>
 72 |         )}
 73 |       </Wrap>
 74 | 
 75 |       {/* Title */}
 76 |       <NextLink href={`/${post.slug}`} passHref>
 77 |         <Link tabIndex={-1} _hover={{ color: 'brand.50' }}>
 78 |           <Heading size={'md'} alignSelf={'flex-start'} tabIndex={0}>
 79 |             {post.title}
 80 |           </Heading>
 81 |         </Link>
 82 |       </NextLink>
 83 | 
 84 |       {/* Excerpt */}
 85 |       <Text alignSelf={'flex-start'} color={textColor} noOfLines={5}>
 86 |         {post.excerpt}
 87 |       </Text>
 88 | 
 89 |       {/* Tags */}
 90 |       <Wrap alignSelf={'flex-start'}>
 91 |         {post.tags.map((tag, _i) => (
 92 |           <TagCard tag={tag} key={_i} />
 93 |         ))}
 94 |       </Wrap>
 95 |     </VStack>
 96 |   );
 97 | };
 98 | 
 99 | export default ArticleCard;
100 | 


--------------------------------------------------------------------------------
/src/components/home/components/Hero.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Button,
 4 |   Center,
 5 |   Flex,
 6 |   Heading,
 7 |   Image,
 8 |   Link,
 9 |   SimpleGrid,
10 |   Spacer,
11 |   Text,
12 |   VStack
13 | } from '@chakra-ui/react';
14 | import { ChevronRightIcon } from '@chakra-ui/icons';
15 | import NextLink from 'next/link';
16 | import { Resize } from '@cloudinary/url-gen/actions';
17 | 
18 | import { CategoryCard } from '@/UIElements/index.js';
19 | import { buildImage } from '@/utils/index.js';
20 | 
21 | const Hero = ({ featuredPost, categories }) => {
22 |   return (
23 |     <Box m={{ base: '5%', md: '5% 10%', '2xl': '5% 15%' }}>
24 |       <Flex flexDirection={{ base: 'column', md: 'row' }}>
25 |         <VStack w={{ base: '100%', md: '60%' }}>
26 |           {/* Featured Post cover image */}
27 |           <NextLink href={`/${featuredPost.slug}`} passHref>
28 |             <Link tabIndex={-1}>
29 |               <Image
30 |                 src={buildImage(featuredPost.featuredImage.public_id)
31 |                   .resize(Resize.scale().width(1600).height(840))
32 |                   .toURL()}
33 |                 alt={featuredPost.title}
34 |                 htmlWidth={'100%'}
35 |                 htmlHeight={'auto'}
36 |                 tabIndex={0}
37 |               />
38 |             </Link>
39 |           </NextLink>
40 | 
41 |           <Box
42 |             p={1}
43 |             px={3}
44 |             w={'fit-content'}
45 |             bg={'black'}
46 |             borderRadius={'md'}
47 |             alignSelf={'self-start'}
48 |             fontWeight={'bold'}
49 |           >
50 |             <Text bgGradient={'linear(to-l, #7928CA, #FF0080)'} bgClip={'text'}>
51 |               FEATURED
52 |             </Text>
53 |           </Box>
54 | 
55 |           {/* Featured Post title */}
56 |           <NextLink href={`/${featuredPost.slug}`} passHref>
57 |             <Link tabIndex={-1}>
58 |               <Heading
59 |                 size={'lg'}
60 |                 tabIndex={0}
61 |                 alignSelf={'self-start'}
62 |                 _hover={{ color: 'brand.50' }}
63 |               >
64 |                 {featuredPost.title}
65 |               </Heading>
66 |             </Link>
67 |           </NextLink>
68 |         </VStack>
69 | 
70 |         <Spacer />
71 | 
72 |         {/* Categories */}
73 |         <Box>
74 |           <SimpleGrid columns={[2, 2]}>
75 |             {categories.map((category) => {
76 |               return <CategoryCard key={category.id} category={category} />;
77 |             })}
78 |           </SimpleGrid>
79 |           <Center>
80 |             <NextLink href={'/categories'} passHref>
81 |               <Link textDecor={'none'} tabIndex={-1}>
82 |                 <Button
83 |                   rightIcon={<ChevronRightIcon />}
84 |                   bgColor={'transparent'}
85 |                 >
86 |                   Browse all categories
87 |                 </Button>
88 |               </Link>
89 |             </NextLink>
90 |           </Center>
91 |         </Box>
92 |       </Flex>
93 |     </Box>
94 |   );
95 | };
96 | 
97 | export default Hero;
98 | 


--------------------------------------------------------------------------------
/src/pages/legal/[legalSlug].js:
--------------------------------------------------------------------------------
  1 | import { Box, Container } from '@chakra-ui/react';
  2 | import { promises as fs } from 'fs';
  3 | import path from 'path';
  4 | 
  5 | import { Analytics, SEO } from '@/utils/index.js';
  6 | import { BreadcrumbSchemaMarkup } from '@/schemaMarkup/index.js';
  7 | import { MarkdownRenderer } from '@/UIElements/markdownRenderer';
  8 | import siteConfig from '../../../config/site.config';
  9 | import Navbar from '@/components/navbar/Navbar';
 10 | import Footer from '@/components/footer/Footer';
 11 | 
 12 | const Legal = ({ data, legalSlug }) => {
 13 |   let title, description, image;
 14 | 
 15 |   if (legalSlug === 'privacy-policy') {
 16 |     title = siteConfig.seo.pages.privacy.title;
 17 |     description = siteConfig.seo.pages.privacy.description;
 18 |     image = siteConfig.seo.pages.privacy.image;
 19 |   } else if (legalSlug === 'cookie-policy') {
 20 |     title = siteConfig.seo.pages.cookie.title;
 21 |     description = siteConfig.seo.pages.cookie.description;
 22 |     image = siteConfig.seo.pages.cookie.image;
 23 |   } else {
 24 |     title = siteConfig.seo.pages.terms.title;
 25 |     description = siteConfig.seo.pages.terms.description;
 26 |     image = siteConfig.seo.pages.terms.image;
 27 |   }
 28 | 
 29 |   return (
 30 |     <>
 31 |       <SEO
 32 |         title={title}
 33 |         description={description}
 34 |         image={image}
 35 |         altText={title}
 36 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/legal/${legalSlug}`}
 37 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/legal/${legalSlug}`}
 38 |       />
 39 |       <BreadcrumbSchemaMarkup
 40 |         items={[
 41 |           {
 42 |             position: 1,
 43 |             name: 'Home',
 44 |             item: process.env.NEXT_PUBLIC_SITE_URL
 45 |           },
 46 |           {
 47 |             position: 2,
 48 |             name:
 49 |               legalSlug === 'privacy-policy'
 50 |                 ? 'Privacy Policy'
 51 |                 : legalSlug === 'cookie-policy'
 52 |                 ? 'Cookie Policy'
 53 |                 : 'Terms & Conditions',
 54 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/legal/${legalSlug}`
 55 |           }
 56 |         ]}
 57 |       />
 58 |       <Analytics />
 59 | 
 60 |       <Navbar />
 61 | 
 62 |       <main>
 63 |         <Container maxW={'4xl'} my={8}>
 64 |           {data && (
 65 |             <Box>
 66 |               <MarkdownRenderer content={data} />
 67 |             </Box>
 68 |           )}
 69 |         </Container>
 70 |       </main>
 71 | 
 72 |       <Footer />
 73 |     </>
 74 |   );
 75 | };
 76 | 
 77 | export async function getStaticProps({ params }) {
 78 |   const { legalSlug } = params;
 79 |   const fileDirectory = path.join(process.cwd(), `src/data/${legalSlug}.md`);
 80 |   const data = await fs.readFile(fileDirectory);
 81 | 
 82 |   return {
 83 |     props: {
 84 |       data: data.toString(),
 85 |       legalSlug: legalSlug
 86 |     }
 87 |   };
 88 | }
 89 | 
 90 | export async function getStaticPaths() {
 91 |   const paths = [
 92 |     { params: { legalSlug: 'cookie-policy' } },
 93 |     { params: { legalSlug: 'privacy-policy' } },
 94 |     { params: { legalSlug: 'terms-and-conditions' } }
 95 |   ];
 96 | 
 97 |   return {
 98 |     paths,
 99 |     fallback: false
100 |   };
101 | }
102 | 
103 | export default Legal;
104 | 


--------------------------------------------------------------------------------
/src/components/search/SearchPage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | // import { Box, Center } from '@chakra-ui/react';
  3 | import { useRouter } from 'next/router';
  4 | import { useLazyQuery } from '@apollo/client/react';
  5 | 
  6 | import { SearchPageBody, SearchPageHeader } from './components';
  7 | import { queries } from './queries';
  8 | // import { AdSense } from 'common/utils';
  9 | // import siteConfig from '../../../config/site.config';
 10 | 
 11 | const SearchPage = ({
 12 |   activeTab,
 13 |   posts,
 14 |   snippets,
 15 |   categories,
 16 |   tags,
 17 |   error
 18 | }) => {
 19 |   const [searchQuery, setSearchQuery] = useState('');
 20 |   const [queriedPosts, setQueriedPosts] = useState([]);
 21 |   const [queriedSnippets, setQueriedSnippets] = useState([]);
 22 |   const [queriedCategories, setQueriedCategories] = useState([]);
 23 |   const [queriedTags, setQueriedTags] = useState([]);
 24 |   const [variableError, setVariableError] = useState(null);
 25 | 
 26 |   const router = useRouter();
 27 |   const { query } = router;
 28 | 
 29 |   const [getData, { data, loading, error: queryError }] = useLazyQuery(
 30 |     activeTab === 0
 31 |       ? query.c
 32 |         ? queries.GET_ARTICLES_MATCHING_CATEGORY
 33 |         : query.t
 34 |         ? queries.GET_ARTICLES_MATCHING_TAG
 35 |         : queries.GET_ARTICLES
 36 |       : activeTab === 1
 37 |       ? queries.GET_SNIPPETS
 38 |       : queries.GET_CATEGORIES,
 39 |     {
 40 |       variables: {
 41 |         searchQuery: searchQuery
 42 |       }
 43 |     }
 44 |   );
 45 | 
 46 |   useEffect(() => {
 47 |     if (activeTab === 0) {
 48 |       setQueriedPosts(data?.posts || posts);
 49 |     } else if (activeTab === 1) {
 50 |       setQueriedSnippets(data?.snippets || snippets);
 51 |     } else if (activeTab === 2) {
 52 |       setQueriedCategories(data?.categories || categories);
 53 |     } else {
 54 |       setQueriedTags(
 55 |         (searchQuery && tags.filter((tag) => searchQuery === tag.name)) || tags
 56 |       );
 57 |     }
 58 |     setVariableError(queryError || error);
 59 |   }, [data, searchQuery]);
 60 | 
 61 |   useEffect(() => {
 62 |     if (query.c) {
 63 |       setSearchQuery(query.c);
 64 |       getData();
 65 |     } else if (query.t) {
 66 |       setSearchQuery(query.t);
 67 |       getData();
 68 |     }
 69 |   }, [query]);
 70 | 
 71 |   const searchHandler = (e) => {
 72 |     e.preventDefault();
 73 |     setSearchQuery(e.target.search.value);
 74 |     getData();
 75 |   };
 76 | 
 77 |   return (
 78 |     <>
 79 |       <SearchPageHeader
 80 |         activeTab={activeTab}
 81 |         posts={queriedPosts}
 82 |         snippets={queriedSnippets}
 83 |         categories={queriedCategories}
 84 |         searchHandler={searchHandler}
 85 |       />
 86 |       <SearchPageBody
 87 |         key={activeTab}
 88 |         activeTab={activeTab}
 89 |         posts={queriedPosts}
 90 |         snippets={queriedSnippets}
 91 |         categories={queriedCategories}
 92 |         tags={queriedTags}
 93 |         loading={loading}
 94 |         error={variableError}
 95 |       />
 96 |       {/* <Box my={20} mx={'auto'}>
 97 |         <AdSense
 98 |           style={{ display: 'block' }}
 99 |           adFormat={'fluid'}
100 |           adSlot={siteConfig.adsense.slots.inFeed}
101 |           data-ad-layout-key={'-f9+52+6z-e1+5b'}
102 |         />
103 |       </Box> */}
104 |     </>
105 |   );
106 | };
107 | 
108 | export default SearchPage;
109 | 


--------------------------------------------------------------------------------
/src/common/components/navbar/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import {
  3 |   Center,
  4 |   Flex,
  5 |   IconButton,
  6 |   Link,
  7 |   useColorModeValue,
  8 |   useMediaQuery,
  9 |   useColorMode,
 10 |   Image
 11 | } from '@chakra-ui/react';
 12 | import { MoonIcon, SunIcon } from '@chakra-ui/icons';
 13 | import NextLink from 'next/link';
 14 | import { gql } from '@apollo/client/core';
 15 | import { useLazyQuery } from '@apollo/client/react';
 16 | 
 17 | import { Searchbar } from '@/UIElements/index.js';
 18 | import SearchResultsDisplay from './SearchResultsDisplay';
 19 | import siteConfig from '../../../../config/site.config';
 20 | 
 21 | const Navbar = () => {
 22 |   const [isOpen, setIsOpen] = useState(false);
 23 |   const [searchQuery, setSearchQuery] = useState('');
 24 | 
 25 |   const [isLessThan780px] = useMediaQuery('(min-width: 768px)');
 26 | 
 27 |   const { toggleColorMode } = useColorMode();
 28 | 
 29 |   const toggleIcon = useColorModeValue(<MoonIcon />, <SunIcon />);
 30 |   const navColor = useColorModeValue('white', '#1A202C');
 31 | 
 32 |   const GET_SEARCH_ITEM = gql`
 33 |     query NavSearch($searchQuery: String) {
 34 |       posts(where: { _search: $searchQuery }, stage: PUBLISHED) {
 35 |         id
 36 |         title
 37 |         slug
 38 |       }
 39 |       snippets(where: { _search: $searchQuery }, stage: PUBLISHED) {
 40 |         id
 41 |         title
 42 |         slug
 43 |       }
 44 |       categories(where: { _search: $searchQuery }, stage: PUBLISHED) {
 45 |         id
 46 |         name
 47 |         slug
 48 |       }
 49 |     }
 50 |   `;
 51 | 
 52 |   const [getData, { data, loading, error }] = useLazyQuery(GET_SEARCH_ITEM, {
 53 |     variables: {
 54 |       searchQuery: searchQuery
 55 |     }
 56 |   });
 57 | 
 58 |   const searchHandler = (e) => {
 59 |     e.preventDefault();
 60 |     setSearchQuery(e.target.search.value);
 61 |     setIsOpen(true);
 62 |     getData();
 63 |   };
 64 | 
 65 |   return (
 66 |     <>
 67 |       <Flex
 68 |         py={3}
 69 |         px={[5, 20, 20]}
 70 |         bg={navColor}
 71 |         boxShadow={'0 8px 32px 0 rgba( 31, 38, 135, 0.37 )'}
 72 |         backdropFilter={'blur(40px)'}
 73 |         as={'nav'}
 74 |         align={'center'}
 75 |         justify={'space-between'}
 76 |         pos={'sticky'}
 77 |         top={0}
 78 |         zIndex={9999}
 79 |       >
 80 |         {/* Logo */}
 81 |         <Center cursor={'pointer'}>
 82 |           <NextLink href={'/'} passHref>
 83 |             <Link tabIndex={-1}>
 84 |               <Image
 85 |                 src={siteConfig.branding.logo}
 86 |                 alt={'itsrakesh blog logo'}
 87 |                 htmlWidth={50}
 88 |                 htmlHeight={50}
 89 |                 tabIndex={0}
 90 |               />
 91 |             </Link>
 92 |           </NextLink>
 93 |         </Center>
 94 | 
 95 |         {/* Searchbar */}
 96 |         {isLessThan780px && (
 97 |           <Center mx={5}>
 98 |             <Searchbar
 99 |               width={{ sm: '10rem', md: '25rem ' }}
100 |               searchHandler={searchHandler}
101 |             />
102 |           </Center>
103 |         )}
104 | 
105 |         {/* Toggle Color Mode (Light/Dark) */}
106 |         <Center>
107 |           <IconButton
108 |             aria-label={'Switch colormode'}
109 |             onClick={toggleColorMode}
110 |             icon={toggleIcon}
111 |           />
112 |         </Center>
113 |       </Flex>
114 | 
115 |       <SearchResultsDisplay
116 |         queriedItems={data}
117 |         loading={loading}
118 |         error={error}
119 |         isOpen={isOpen}
120 |         setIsOpen={setIsOpen}
121 |       />
122 |     </>
123 |   );
124 | };
125 | 
126 | export default Navbar;
127 | 


--------------------------------------------------------------------------------
/src/components/snippet/components/Snippet.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Avatar,
  3 |   Badge,
  4 |   Box,
  5 |   Center,
  6 |   Container,
  7 |   Divider,
  8 |   Heading,
  9 |   HStack,
 10 |   SimpleGrid,
 11 |   useClipboard,
 12 |   useColorModeValue,
 13 |   VStack
 14 | } from '@chakra-ui/react';
 15 | import Moment from 'react-moment';
 16 | 
 17 | import { MarkdownRenderer } from '@/UIElements/markdownRenderer';
 18 | import { SocialShareLinks } from '@/UIElements/index.js';
 19 | // import { AdSense } from 'common/utils';
 20 | // import siteConfig from '../../../../config/site.config';
 21 | 
 22 | const Snippet = ({ snippet }) => {
 23 |   const { hasCopied, onCopy } = useClipboard(
 24 |     `${process.env.NEXT_PUBLIC_SITE_URL}/snippets/${snippet.slug}`
 25 |   );
 26 | 
 27 |   const textColor = useColorModeValue('text', '#fff');
 28 | 
 29 |   return (
 30 |     <>
 31 |       {/* Adsense Page top Ad */}
 32 |       {/* <Box my={10}>
 33 |         <AdSense
 34 |           style={{ display: 'inline-block', width: '100%', height: '90px' }}
 35 |           adSlot={siteConfig.adsense.slots.pageTop}
 36 |         />
 37 |       </Box> */}
 38 | 
 39 |       {/* Snippet body */}
 40 |       <Container maxW={'container.md'}>
 41 |         <VStack>
 42 |           <Box>
 43 |             {/* Last updated */}
 44 |             {snippet.updatedAt !== snippet.publishedAt && (
 45 |               <HStack
 46 |                 alignSelf={'flex-start'}
 47 |                 textTransform={'uppercase'}
 48 |                 mb={5}
 49 |                 fontSize={'sm'}
 50 |               >
 51 |                 <Box>
 52 |                   Last updated:{' '}
 53 |                   <Moment format="MMM DD, YYYY">{snippet.updatedAt}</Moment>
 54 |                 </Box>
 55 |               </HStack>
 56 |             )}
 57 | 
 58 |             <SimpleGrid columns={[1, 2]}>
 59 |               <HStack alignSelf={'flex-start'} py={5} spacing={4}>
 60 |                 {/* Author image */}
 61 |                 <Avatar
 62 |                   name={snippet.author.name}
 63 |                   src={snippet.author.photo.url}
 64 |                 />
 65 |                 <VStack spacing={0}>
 66 |                   {/* Author name */}
 67 |                   <HStack>
 68 |                     <Box color={'brand.50'}>{snippet.author.name}</Box>{' '}
 69 |                     <Badge colorScheme={'green'}>Author</Badge>
 70 |                   </HStack>
 71 | 
 72 |                   {/* Published date */}
 73 |                   <Box alignSelf={'flex-start'} fontSize={'small'}>
 74 |                     <Moment format="MMM DD, YYYY">{snippet.publishedAt}</Moment>
 75 |                   </Box>
 76 |                 </VStack>
 77 |               </HStack>
 78 | 
 79 |               {/* Social-media sharing links */}
 80 |               <Center>
 81 |                 <HStack my={2}>
 82 |                   <SocialShareLinks
 83 |                     toolTipPlacement={'top'}
 84 |                     onCopy={onCopy}
 85 |                     hasCopied={hasCopied}
 86 |                     slug={snippet.slug}
 87 |                     title={snippet.title}
 88 |                   />
 89 |                 </HStack>
 90 |               </Center>
 91 |             </SimpleGrid>
 92 | 
 93 |             <Divider />
 94 | 
 95 |             {/* Snippet title */}
 96 |             <Heading as={'h1'} py={5}>
 97 |               {snippet.title}
 98 |             </Heading>
 99 |           </Box>
100 | 
101 |           {/* Snippet content */}
102 |           <Box lineHeight={1.8} letterSpacing={'wide'} color={textColor}>
103 |             <MarkdownRenderer content={snippet.content} />
104 |           </Box>
105 |           <Divider py={5} />
106 |         </VStack>
107 |       </Container>
108 |     </>
109 |   );
110 | };
111 | 
112 | export default Snippet;
113 | 


--------------------------------------------------------------------------------
/src/pages/snippets/[snippetSlug].js:
--------------------------------------------------------------------------------
  1 | import { gql } from '@apollo/client';
  2 | 
  3 | import Footer from '@/components/footer/Footer';
  4 | import Navbar from '@/components/navbar/Navbar';
  5 | import {
  6 |   ArticleSchemaMarkup,
  7 |   BreadcrumbSchemaMarkup
  8 | } from '@/schemaMarkup/index.js';
  9 | import SnippetPage from '@/snippet/SnippetPage';
 10 | import { Analytics, SEO, client } from '@/utils/index.js';
 11 | import siteConfig from '../../../config/site.config';
 12 | 
 13 | const SnippetHome = ({ snippet, snippets, error }) => {
 14 |   return (
 15 |     <>
 16 |       <SEO
 17 |         title={snippet.title}
 18 |         description={snippet.description}
 19 |         image={siteConfig.seo.pages.snippets.image}
 20 |         altText={snippet.title}
 21 |         canonical={`${process.env.NEXT_PUBLIC_SITE_URL}/snippets/${snippet.slug}`}
 22 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/snippets/${snippet.slug}`}
 23 |         ogType={'article'}
 24 |       />
 25 |       <BreadcrumbSchemaMarkup
 26 |         items={[
 27 |           {
 28 |             position: 1,
 29 |             name: 'Home',
 30 |             item: process.env.NEXT_PUBLIC_SITE_URL
 31 |           },
 32 |           {
 33 |             position: 2,
 34 |             name: 'Snippets',
 35 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/snippets`
 36 |           },
 37 |           {
 38 |             position: 3,
 39 |             name: snippet.title,
 40 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/snippets/${snippet.slug}`
 41 |           }
 42 |         ]}
 43 |       />
 44 |       <ArticleSchemaMarkup
 45 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/${snippet.slug}`}
 46 |         title={snippet.title}
 47 |         image={siteConfig.seo.pages.snippets.image}
 48 |         publishedAt={snippet.publishedAt}
 49 |         updatedAt={snippet.updatedAt}
 50 |         author={snippet.author.name}
 51 |         description={snippet.description}
 52 |       />
 53 |       <Analytics />
 54 | 
 55 |       <Navbar />
 56 | 
 57 |       <main>
 58 |         <SnippetPage snippet={snippet} snippets={snippets} error={error} />
 59 |         {/* <Newsletter /> */}
 60 |       </main>
 61 | 
 62 |       <Footer />
 63 |     </>
 64 |   );
 65 | };
 66 | 
 67 | export async function getStaticProps({ params }) {
 68 |   const { snippetSlug } = params;
 69 | 
 70 |   const { data, error } = await client.query({
 71 |     query: gql`
 72 |       query SnippetPage($slug: String!) {
 73 |         snippet(where: { slug: $slug }, stage: PUBLISHED) {
 74 |           updatedAt
 75 |           author {
 76 |             bio
 77 |             name
 78 |             photo
 79 |           }
 80 |           slug
 81 |           title
 82 |           description
 83 |           content
 84 |           publishedAt
 85 |         }
 86 |         snippets(
 87 |           first: 4
 88 |           orderBy: createdAt_DESC
 89 |           where: { slug_not: $slug }
 90 |         ) {
 91 |           title
 92 |           slug
 93 |           id
 94 |         }
 95 |       }
 96 |     `,
 97 |     variables: {
 98 |       slug: snippetSlug
 99 |     }
100 |   });
101 | 
102 |   return {
103 |     props: {
104 |       snippet: data?.snippet,
105 |       snippets: data?.snippets,
106 |       error: error ? error.message : null
107 |     },
108 |     revalidate: 300
109 |   };
110 | }
111 | 
112 | export async function getStaticPaths() {
113 |   const { data } = await client.query({
114 |     query: gql`
115 |       query SnippetSlugs {
116 |         snippets {
117 |           slug
118 |         }
119 |       }
120 |     `
121 |   });
122 | 
123 |   const paths = data?.snippets?.map((snippet) => {
124 |     return {
125 |       params: {
126 |         snippetSlug: snippet.slug
127 |       }
128 |     };
129 |   });
130 | 
131 |   return {
132 |     paths,
133 |     fallback: 'blocking'
134 |   };
135 | }
136 | 
137 | export default SnippetHome;
138 | 


--------------------------------------------------------------------------------
/src/pages/[postSlug].js:
--------------------------------------------------------------------------------
  1 | import { gql } from '@apollo/client';
  2 | 
  3 | import Footer from '@/components/footer/Footer';
  4 | import Navbar from '@/components/navbar/Navbar';
  5 | import PostPage from '@/post/PostPage';
  6 | import {
  7 |   ArticleSchemaMarkup,
  8 |   BreadcrumbSchemaMarkup
  9 | } from '@/schemaMarkup/index.js';
 10 | import { Analytics, SEO, client } from '@/utils/index.js';
 11 | 
 12 | const PostHome = ({ post, posts, error }) => {
 13 |   return (
 14 |     <>
 15 |       <SEO
 16 |         title={post.title}
 17 |         description={post.description}
 18 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/${post.slug}`}
 19 |         canonical={
 20 |           post.canonicalUrl ||
 21 |           `${process.env.NEXT_PUBLIC_SITE_URL}/${post.slug}`
 22 |         }
 23 |         image={post.featuredImage.url}
 24 |         altText={post.title}
 25 |         ogType={'article'}
 26 |       />
 27 |       <BreadcrumbSchemaMarkup
 28 |         items={[
 29 |           {
 30 |             position: 1,
 31 |             name: 'Home',
 32 |             item: process.env.NEXT_PUBLIC_SITE_URL
 33 |           },
 34 |           {
 35 |             position: 2,
 36 |             name: 'Articles',
 37 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/articles`
 38 |           },
 39 |           {
 40 |             position: 3,
 41 |             name: post.category.name,
 42 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/articles?c=${post.category.slug}`
 43 |           },
 44 |           {
 45 |             position: 4,
 46 |             name: post.title,
 47 |             item: `${process.env.NEXT_PUBLIC_SITE_URL}/${post.slug}`
 48 |           }
 49 |         ]}
 50 |       />
 51 |       <ArticleSchemaMarkup
 52 |         url={`${process.env.NEXT_PUBLIC_SITE_URL}/${post.slug}`}
 53 |         title={post.title}
 54 |         image={post.featuredImage.url}
 55 |         publishedAt={
 56 |           post.customPublicationDate
 57 |             ? post.customPublicationDate
 58 |             : post.publishedAt
 59 |         }
 60 |         updatedAt={post.updatedAt}
 61 |         author={post.author.name}
 62 |         description={post.description}
 63 |       />
 64 |       <Analytics />
 65 | 
 66 |       <Navbar />
 67 | 
 68 |       <main>
 69 |         <PostPage post={post} posts={posts} error={error} />
 70 |         {/* <Newsletter /> */}
 71 |       </main>
 72 | 
 73 |       <Footer />
 74 |     </>
 75 |   );
 76 | };
 77 | 
 78 | export async function getStaticProps({ params }) {
 79 |   const { postSlug } = params;
 80 | 
 81 |   const { data, error } = await client.query({
 82 |     query: gql`
 83 |       query PostPage($slug: String!) {
 84 |         post(where: { slug: $slug }, stage: PUBLISHED) {
 85 |           category {
 86 |             name
 87 |             slug
 88 |           }
 89 |           updatedAt
 90 |           featuredImage
 91 |           author {
 92 |             name
 93 |             photo
 94 |           }
 95 |           publishedAt
 96 |           slug
 97 |           sponsored
 98 |           audioId
 99 |           title
100 |           canonicalUrl
101 |           content
102 |           description
103 |           customPublicationDate
104 |         }
105 |         posts(
106 |           first: 2
107 |           orderBy: publishedAt_DESC
108 |           where: { slug_not: $slug }
109 |           stage: PUBLISHED
110 |         ) {
111 |           id
112 |           slug
113 |           sponsored
114 |           title
115 |           content
116 |           tags
117 |           customPublicationDate
118 |           publishedAt
119 |           excerpt
120 |           featuredImage
121 |         }
122 |       }
123 |     `,
124 |     variables: {
125 |       slug: postSlug
126 |     }
127 |   });
128 | 
129 |   return {
130 |     props: {
131 |       post: data?.post,
132 |       posts: data?.posts,
133 |       error: error ? error.message : null
134 |     },
135 |     revalidate: 300
136 |   };
137 | }
138 | 
139 | export async function getStaticPaths() {
140 |   const { data } = await client.query({
141 |     query: gql`
142 |       query PostSlugs {
143 |         posts {
144 |           slug
145 |         }
146 |       }
147 |     `
148 |   });
149 | 
150 |   const paths = data?.posts?.map((post) => {
151 |     return {
152 |       params: {
153 |         postSlug: post.slug
154 |       }
155 |     };
156 |   });
157 | 
158 |   return {
159 |     paths,
160 |     fallback: 'blocking'
161 |   };
162 | }
163 | 
164 | export default PostHome;
165 | 


--------------------------------------------------------------------------------
/src/common/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Box,
  3 |   Heading,
  4 |   HStack,
  5 |   Icon,
  6 |   IconButton,
  7 |   Link,
  8 |   List,
  9 |   ListItem,
 10 |   SimpleGrid,
 11 |   Spacer,
 12 |   VStack
 13 | } from '@chakra-ui/react';
 14 | import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
 15 | 
 16 | import siteConfig from '../../../../config/site.config';
 17 | import CopyrightNotice from './CopyrightNotice';
 18 | 
 19 | const Footer = () => {
 20 |   return (
 21 |     <footer>
 22 |       <Box id={'footer'} p={{ base: 10, md: 20 }} bg={'black'} color={'white'}>
 23 |         <SimpleGrid columns={{ base: 1, md: 3 }}>
 24 |           <VStack>
 25 |             <Heading fontFamily={'Poppins'}>itsrakesh</Heading>
 26 |             <HStack spacing={2}>
 27 |               <Link href={siteConfig.urls.socials.twitter} isExternal>
 28 |                 <IconButton
 29 |                   aria-label="twitter"
 30 |                   bg={'transparent'}
 31 |                   _hover={{ bg: 'transparent', color: 'twitter' }}
 32 |                   _active={{ bg: 'transparent', color: 'twitter' }}
 33 |                   _visited={{ bg: 'transparent', color: 'twitter' }}
 34 |                   icon={<Icon as={FaTwitter} w={6} h={6} />}
 35 |                 />
 36 |               </Link>
 37 |               <Link href={siteConfig.urls.socials.linkedin} isExternal>
 38 |                 <IconButton
 39 |                   aria-label="linkedin"
 40 |                   bg={'transparent'}
 41 |                   _hover={{ bg: 'transparent', color: 'linkedin' }}
 42 |                   _active={{ bg: 'transparent', color: 'linkedin' }}
 43 |                   _visited={{ bg: 'transparent', color: 'linkedin' }}
 44 |                   icon={<Icon as={FaLinkedin} w={6} h={6} />}
 45 |                 />
 46 |               </Link>
 47 |               <Link href={siteConfig.urls.socials.github} isExternal>
 48 |                 <IconButton
 49 |                   aria-label="github"
 50 |                   bg={'transparent'}
 51 |                   _hover={{ bg: 'transparent', color: 'whiteAlpha.500' }}
 52 |                   _active={{ bg: 'transparent', color: 'whiteAlpha.500' }}
 53 |                   _visited={{ bg: 'transparent', color: 'whiteAlpha.500' }}
 54 |                   icon={<Icon as={FaGithub} w={6} h={6} />}
 55 |                 />
 56 |               </Link>
 57 |               <Link href={siteConfig.urls.socials.myonepost} isExternal>
 58 |                 1️⃣
 59 |               </Link>
 60 |             </HStack>
 61 |           </VStack>
 62 | 
 63 |           <Spacer />
 64 | 
 65 |           <SimpleGrid columns={3} mt={{ base: 4, md: 0 }}>
 66 |             <VStack>
 67 |               <Heading
 68 |                 size={'sm'}
 69 |                 alignSelf={'flex-start'}
 70 |                 whiteSpace={'nowrap'}
 71 |               >
 72 |                 QUICK LINKS
 73 |               </Heading>
 74 |               <List
 75 |                 fontSize={'small'}
 76 |                 alignSelf={'flex-start'}
 77 |                 whiteSpace={'nowrap'}
 78 |                 spacing={1}
 79 |               >
 80 |                 <ListItem>
 81 |                   <Link href={siteConfig.urls.about} isExternal>
 82 |                     About
 83 |                   </Link>
 84 |                 </ListItem>
 85 |                 <ListItem>
 86 |                   <Link href={siteConfig.urls.status} isExternal>
 87 |                     Status
 88 |                   </Link>
 89 |                 </ListItem>
 90 |                 <ListItem>
 91 |                   <Link href={'/external-articles'}>External Articles</Link>
 92 |                 </ListItem>
 93 | 
 94 |                 {/* <ListItem>
 95 |                   <Link href={siteConfig.urls.newsletter} isExternal>
 96 |                     Newsletter
 97 |                   </Link>
 98 |                 </ListItem> */}
 99 |                 <ListItem>
100 |                   <Link href={'/support-me'}>Support Me </Link>❤️
101 |                 </ListItem>
102 |               </List>
103 |             </VStack>
104 | 
105 |             <Spacer />
106 | 
107 |             <VStack>
108 |               <Heading size={'sm'} alignSelf={'flex-start'}>
109 |                 LEGAL
110 |               </Heading>
111 |               <List fontSize={'small'} alignSelf={'flex-start'} spacing={1}>
112 |                 <ListItem>
113 |                   <Link href={'/legal/privacy-policy'}>Privacy Policy</Link>
114 |                 </ListItem>
115 |                 <ListItem>
116 |                   <Link href={'/legal/cookie-policy'}>Cookie Policy</Link>
117 |                 </ListItem>
118 |                 <ListItem>
119 |                   <Link href={'/legal/terms-and-conditions'}>
120 |                     Terms &amp; Conditions
121 |                   </Link>
122 |                 </ListItem>
123 |               </List>
124 |             </VStack>
125 |           </SimpleGrid>
126 |         </SimpleGrid>
127 |       </Box>
128 |       <CopyrightNotice />
129 |     </footer>
130 |   );
131 | };
132 | 
133 | export default Footer;
134 | 


--------------------------------------------------------------------------------
/config/site.config.js:
--------------------------------------------------------------------------------
  1 | const siteConfig = {
  2 |   seo: {
  3 |     title: 'itsrakesh - blog',
  4 |     author: 'Rakesh Potnuru',
  5 |     copyright: 'itsrakesh',
  6 |     description:
  7 |       'Browse programming tutorials and articles written by Rakesh Potnuru. Learn Web Development, Blockchain, Web3 and Technical writing.',
  8 |     image:
  9 |       'https://ik.imagekit.io/itsrakesh/Blog/itsrakesh_-_blog_r0SAC1__p.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350838485',
 10 |     altText: 'itsrakesh - blog',
 11 |     ogType: 'website',
 12 |     monetizationTag: '$ilp.uphold.com/82eq8NKY4NEZ',
 13 |     twitterUsername: '@rakesh_at_tweet',
 14 |     pages: {
 15 |       supportMe: {
 16 |         title: 'Support Me | itsrakesh - blog',
 17 |         description:
 18 |           'Your support keeps this blog alive and motivates me to keep creating content.',
 19 |         image:
 20 |           'https://ik.imagekit.io/itsrakesh/Blog/support_me_DUCAFlO96.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350841027'
 21 |       },
 22 |       articles: {
 23 |         title: 'Articles | itsrakesh - blog',
 24 |         description:
 25 |           'Read articles on web development, web3, blockchain, design, and more.',
 26 |         image:
 27 |           'https://ik.imagekit.io/itsrakesh/Blog/articles_QqdeLjlbl.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350838382'
 28 |       },
 29 |       snippets: {
 30 |         title: 'Snippets | itsrakesh - blog',
 31 |         description:
 32 |           'Snippets are code samples and quick tips that I have written. Explore and share them.',
 33 |         image:
 34 |           'https://ik.imagekit.io/itsrakesh/Blog/snippets_ma1o5jx8Z.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350839459'
 35 |       },
 36 |       categories: {
 37 |         title: 'Categories | itsrakesh - blog',
 38 |         description: 'Browse different categories.',
 39 |         image:
 40 |           'https://ik.imagekit.io/itsrakesh/Blog/categories_u4RkWWNIi.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350838394'
 41 |       },
 42 |       tags: {
 43 |         title: 'Tags | itsrakesh - blog',
 44 |         description: 'Explore all the tags.',
 45 |         image:
 46 |           'https://ik.imagekit.io/itsrakesh/Blog/tags_kBWiaEWuR.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350842330'
 47 |       },
 48 |       privacy: {
 49 |         title: 'Privacy Policy | itsrakesh - blog',
 50 |         description: 'This page contains itsrakesh - blog privacy policies.',
 51 |         image:
 52 |           'https://ik.imagekit.io/itsrakesh/Blog/privacy_policy_xq4AJG1mUd.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350838506'
 53 |       },
 54 |       cookie: {
 55 |         title: 'Cookie Policy | itsrakesh - blog',
 56 |         description: 'This page contains itsrakesh - blog cookie policies.',
 57 |         image:
 58 |           'https://ik.imagekit.io/itsrakesh/Blog/cookie_policy_ulfXI9cMG.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656351873708'
 59 |       },
 60 |       terms: {
 61 |         title: 'Terms & Conditions | itsrakesh - blog',
 62 |         description: 'This page contains itsrakesh - blog terms & conditions.',
 63 |         image:
 64 |           'https://ik.imagekit.io/itsrakesh/Blog/terms___conditions_jb7mesw-j.png?ik-sdk-version=javascript-1.4.3&updatedAt=1656350842954'
 65 |       },
 66 |       externalArticles: {
 67 |         title: 'External Articles | itsrakesh - blog',
 68 |         description: 'Read articles written by Rakesh Potnuru on other sites.',
 69 |         image:
 70 |           'https://ik.imagekit.io/itsrakesh/Blog/external_articles_urr6u2vH1.png?ik-sdk-version=javascript-1.4.3&updatedAt=1657081755552'
 71 |       }
 72 |     }
 73 |   },
 74 |   branding: {
 75 |     logo: 'https://ik.imagekit.io/itsrakesh/Blog/blog_logo_Gk6jqlMK8.png?ik-sdk-version=javascript-1.4.3&updatedAt=1650611776118',
 76 |     colors: {
 77 |       brand: {
 78 |         50: '#7868E6',
 79 |         100: '#FF5403',
 80 |         200: '#FF2E63',
 81 |         300: '#FFCC00',
 82 |         400: '#48466D',
 83 |         500: '#769FCD'
 84 |       },
 85 |       text: '#454E56',
 86 |       themeLight: '#7868E6',
 87 |       themeDark: '#000000'
 88 |     },
 89 |     fonts: {
 90 |       heading: 'Alliance No 2',
 91 |       body: 'Poppins'
 92 |     }
 93 |   },
 94 |   urls: {
 95 |     socials: {
 96 |       twitter: 'https://rksh.link/x',
 97 |       linkedin: 'https://rksh.link/linkedin',
 98 |       github: 'https://rksh.link/github',
 99 |       myonepost: 'https://rksh.link/myonepost'
100 |     },
101 |     about: 'https://itsrakesh.com/about',
102 |     status: 'https://status.itsrakesh.com',
103 |     newsletter: 'https://newsletter.itsrakesh.com',
104 |     kofi: 'https://ko-fi.com/itsrakesh',
105 |     productHunt: 'https://pbst.link/ph'
106 |   },
107 |   adsense: {
108 |     publisherId: 'pub-5607528168839545',
109 |     slots: {
110 |       pageTop: '6183806725',
111 |       inFeed: '3408517885'
112 |     }
113 |   },
114 |   yandex: {
115 |     id: '67e35e70e8aa9e9d'
116 |   },
117 |   copyrightText: `© ${new Date().getFullYear()} itsrakesh. All rights reserved.`,
118 |   siteVersion: '1.1.0',
119 |   showBanner: true
120 | };
121 | 
122 | export default siteConfig;
123 | 


--------------------------------------------------------------------------------
/src/common/utils/SEO.jsx:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head';
  2 | 
  3 | import siteConfig from '../../../config/site.config';
  4 | 
  5 | const Meta = ({
  6 |   title,
  7 |   description,
  8 |   url,
  9 |   image,
 10 |   canonical,
 11 |   ogType,
 12 |   altText
 13 | }) => {
 14 |   return (
 15 |     <Head>
 16 |       {/* Primary Meta Tags */}
 17 |       <title>{title}</title>
 18 |       <meta name={'title'} content={title} />
 19 |       <meta charSet={'UTF-8'} />
 20 |       <meta name={'viewport'} content={'width=device-width, initial-scale=1'} />
 21 |       <meta name={'description'} content={description} />
 22 |       <meta name={'author'} content={siteConfig.seo.author} />
 23 |       <meta name={'copyright'} content={siteConfig.seo.copyright} />
 24 |       <meta name={'application-name'} content={siteConfig.seo.title} />
 25 |       <meta
 26 |         name={'msapplication-TileColor'}
 27 |         content={siteConfig.branding.colors.theme}
 28 |       />
 29 |       <meta name={'msapplication-TileImage'} content={'/ms-icon-144x144.png'} />
 30 |       <meta
 31 |         name={'theme-color'}
 32 |         media={'(prefers-color-scheme: light)'}
 33 |         content={siteConfig.branding.colors.themeLight}
 34 |       />
 35 |       <meta
 36 |         name={'theme-color'}
 37 |         media={'(prefers-color-scheme: dark)'}
 38 |         content={siteConfig.branding.colors.themeDark}
 39 |       />
 40 |       <meta name={'robots'} content={'index, follow'} />
 41 | 
 42 |       {/* Web monetization - https://webmonetization.org/ */}
 43 |       <meta name={'monetization'} content={siteConfig.seo.monetizationTag} />
 44 | 
 45 |       <meta name={'yandex-verification'} content={siteConfig.yandex.id} />
 46 | 
 47 |       {/* Open Graph / Facebook */}
 48 |       <meta property={'og:site_name'} content={siteConfig.seo.title} />
 49 |       <meta property={'og:type'} content={ogType} />
 50 |       <meta property={'og:url'} content={url} />
 51 |       <meta property={'og:title'} content={title} />
 52 |       <meta property={'og:description'} content={description} />
 53 |       <meta property={'og:image'} content={image} />
 54 |       <meta property={'og:image:alt'} content={altText}></meta>
 55 |       <meta property={'og:locale'} content={'en'} />
 56 | 
 57 |       {/* Twitter */}
 58 |       <meta property={'twitter:card'} content={'summary_large_image'} />
 59 |       <meta property={'twitter:url'} content={url} />
 60 |       <meta property={'twitter:title'} content={title} />
 61 |       <meta property={'twitter:description'} content={description} />
 62 |       <meta property={'twitter:image'} content={image} />
 63 |       <meta
 64 |         property={'twitter:creator'}
 65 |         content={siteConfig.seo.twitterUsername}
 66 |       />
 67 | 
 68 |       {/* Apple Web App Meta */}
 69 |       <link
 70 |         rel={'apple-touch-icon'}
 71 |         sizes={'57x57'}
 72 |         href={'/apple-icon-57x57.png'}
 73 |       />
 74 |       <link
 75 |         rel={'apple-touch-icon'}
 76 |         sizes={'60x60'}
 77 |         href={'/apple-icon-60x60.png'}
 78 |       />
 79 |       <link
 80 |         rel={'apple-touch-icon'}
 81 |         sizes={'72x72'}
 82 |         href={'/apple-icon-72x72.png'}
 83 |       />
 84 |       <link
 85 |         rel={'apple-touch-icon'}
 86 |         sizes={'76x76'}
 87 |         href={'/apple-icon-76x76.png'}
 88 |       />
 89 |       <link
 90 |         rel={'apple-touch-icon'}
 91 |         sizes={'114x114'}
 92 |         href={'/apple-icon-114x114.png'}
 93 |       />
 94 |       <link
 95 |         rel={'apple-touch-icon'}
 96 |         sizes={'120x120'}
 97 |         href={'/apple-icon-120x120.png'}
 98 |       />
 99 |       <link
100 |         rel={'apple-touch-icon'}
101 |         sizes={'144x144'}
102 |         href={'/apple-icon-144x144.png'}
103 |       />
104 |       <link
105 |         rel={'apple-touch-icon'}
106 |         sizes={'152x152'}
107 |         href={'/apple-icon-152x152.png'}
108 |       />
109 |       <link
110 |         rel={'apple-touch-icon'}
111 |         sizes={'180x180'}
112 |         href={'/apple-icon-180x180.png'}
113 |       />
114 |       <link
115 |         rel={'icon'}
116 |         type={'image/png'}
117 |         sizes={'192x192'}
118 |         href={'/android-icon-192x192.png'}
119 |       />
120 |       <link
121 |         rel={'icon'}
122 |         type={'image/png'}
123 |         sizes={'32x32'}
124 |         href={'/favicon-32x32.png'}
125 |       />
126 |       <link
127 |         rel={'icon'}
128 |         type={'image/png'}
129 |         sizes={'96x96'}
130 |         href={'/favicon-96x96.png'}
131 |       />
132 |       <link
133 |         rel={'icon'}
134 |         type={'image/png'}
135 |         sizes={'16x16'}
136 |         href={'/favicon-16x16.png'}
137 |       />
138 |       <meta name={'apple-mobile-web-app-capable'} content={'yes'} />
139 |       <meta
140 |         name={'apple-mobile-web-app-status-bar-style'}
141 |         content={siteConfig.branding.colors.themeLight}
142 |       />
143 | 
144 |       <link rel={'manifest'} href={'/manifest.json'} />
145 |       <link rel={'canonical'} href={canonical} />
146 |       <link
147 |         rel={'alternate'}
148 |         href={'https://blog.itsrakesh.com'}
149 |         hrefLang={'x-default'}
150 |       />
151 | 
152 |       <link rel={'preconnect'} href={'https://fonts.googleapis.com'} />
153 |       <link rel={'preconnect'} href={'https://fonts.gstatic.com'} crossOrigin />
154 |     </Head>
155 |   );
156 | };
157 | 
158 | Meta.defaultProps = {
159 |   title: siteConfig.seo.title,
160 |   description: siteConfig.seo.description,
161 |   url: process.env.NEXT_PUBLIC_SITE_URL,
162 |   image: siteConfig.seo.image,
163 |   altText: siteConfig.seo.altText,
164 |   ogType: siteConfig.seo.ogType,
165 |   canonical: process.env.NEXT_PUBLIC_SITE_URL
166 | };
167 | 
168 | export default Meta;
169 | 


--------------------------------------------------------------------------------
/src/components/search/components/SearchPageBody.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Box,
  3 |   Center,
  4 |   SimpleGrid,
  5 |   Spinner,
  6 |   Tab,
  7 |   TabList,
  8 |   TabPanel,
  9 |   TabPanels,
 10 |   Tabs,
 11 |   useMediaQuery,
 12 |   Wrap
 13 | } from '@chakra-ui/react';
 14 | import { useRouter } from 'next/router';
 15 | 
 16 | import {
 17 |   ArticleCard,
 18 |   CategoryCard,
 19 |   ErrorBox,
 20 |   SnippetCard,
 21 |   TagCard
 22 | } from '@/UIElements/index.js';
 23 | 
 24 | const changeRoute = (tabIndex, router, query) => {
 25 |   switch (tabIndex) {
 26 |     case 0:
 27 |       return router.push(
 28 |         query.c
 29 |           ? `/articles?c=${query.c}`
 30 |           : query.t
 31 |           ? `/articles?t=${query.t}`
 32 |           : '/articles'
 33 |       );
 34 |     case 1:
 35 |       return router.push('/snippets');
 36 |     case 2:
 37 |       return router.push('/categories');
 38 |     case 3:
 39 |       return router.push('/tags');
 40 |     default:
 41 |       break;
 42 |   }
 43 | };
 44 | 
 45 | const SearchPageBody = ({
 46 |   activeTab,
 47 |   posts,
 48 |   snippets,
 49 |   categories,
 50 |   tags,
 51 |   loading,
 52 |   error
 53 | }) => {
 54 |   const [isLessThan480px] = useMediaQuery('(max-width: 480px)');
 55 | 
 56 |   const router = useRouter();
 57 |   const { query } = router;
 58 | 
 59 |   return (
 60 |     <>
 61 |       <Box p={[5, 10]}>
 62 |         <Tabs
 63 |           onChange={(index) => changeRoute(index, router, query)}
 64 |           defaultIndex={activeTab}
 65 |           isLazy
 66 |         >
 67 |           <TabList
 68 |             overflowX={isLessThan480px && 'scroll'}
 69 |             overflowY={isLessThan480px && 'hidden'}
 70 |           >
 71 |             <Tab _focus={{ outline: 'none' }}>Articles</Tab>
 72 |             <Tab _focus={{ outline: 'none' }}>Snippets</Tab>
 73 |             <Tab _focus={{ outline: 'none' }}>Categories</Tab>
 74 |             <Tab _focus={{ outline: 'none' }}>Tags</Tab>
 75 |           </TabList>
 76 |           <TabPanels>
 77 |             <TabPanel>
 78 |               {error ? (
 79 |                 <Center>
 80 |                   <ErrorBox error={error} />
 81 |                 </Center>
 82 |               ) : (
 83 |                 <>
 84 |                   {activeTab === 0 && !loading && posts.length > 0 ? (
 85 |                     <SimpleGrid
 86 |                       columns={{ base: 1, md: 3, '2xl': 4 }}
 87 |                       spacing={10}
 88 |                     >
 89 |                       {posts.map((post) => {
 90 |                         return <ArticleCard key={post.id} post={post} />;
 91 |                       })}
 92 |                     </SimpleGrid>
 93 |                   ) : (
 94 |                     <Center my={20}>
 95 |                       {loading ? <Spinner size={'lg'} /> : 'No articles found'}
 96 |                     </Center>
 97 |                   )}
 98 |                 </>
 99 |               )}
100 |             </TabPanel>
101 |             <TabPanel>
102 |               {error ? (
103 |                 <Center>
104 |                   <ErrorBox error={error} />
105 |                 </Center>
106 |               ) : (
107 |                 <>
108 |                   {activeTab === 1 && !loading && snippets.length > 0 ? (
109 |                     <Wrap my={6}>
110 |                       {snippets.map((snippet) => {
111 |                         return (
112 |                           <SnippetCard key={snippet.id} snippet={snippet} />
113 |                         );
114 |                       })}
115 |                     </Wrap>
116 |                   ) : (
117 |                     <Center my={20}>
118 |                       {loading ? <Spinner size={'lg'} /> : 'No snippets found'}
119 |                     </Center>
120 |                   )}
121 |                 </>
122 |               )}
123 |             </TabPanel>
124 |             <TabPanel>
125 |               {error ? (
126 |                 <Center>
127 |                   <ErrorBox error={error} />
128 |                 </Center>
129 |               ) : (
130 |                 <>
131 |                   {activeTab === 2 && !loading && categories.length > 0 ? (
132 |                     <Wrap>
133 |                       {categories.map((category) => {
134 |                         return (
135 |                           <CategoryCard key={category.id} category={category} />
136 |                         );
137 |                       })}
138 |                     </Wrap>
139 |                   ) : (
140 |                     <Center my={20}>
141 |                       {loading ? (
142 |                         <Spinner size={'lg'} />
143 |                       ) : (
144 |                         'No categories found'
145 |                       )}
146 |                     </Center>
147 |                   )}
148 |                 </>
149 |               )}
150 |             </TabPanel>
151 |             <TabPanel>
152 |               {error ? (
153 |                 <Center>
154 |                   <ErrorBox error={error} />
155 |                 </Center>
156 |               ) : (
157 |                 <>
158 |                   {activeTab === 3 && !loading && tags.length > 0 ? (
159 |                     <Wrap>
160 |                       {tags.map((tag, _i) => {
161 |                         return <TagCard key={_i} tag={tag.name} />;
162 |                       })}
163 |                     </Wrap>
164 |                   ) : (
165 |                     <Center my={20}>
166 |                       {loading ? <Spinner size={'lg'} /> : 'No tags found'}
167 |                     </Center>
168 |                   )}
169 |                 </>
170 |               )}
171 |             </TabPanel>
172 |           </TabPanels>
173 |         </Tabs>
174 |       </Box>
175 |     </>
176 |   );
177 | };
178 | 
179 | export default SearchPageBody;
180 | 


--------------------------------------------------------------------------------
/src/data/cookie-policy.md:
--------------------------------------------------------------------------------
 1 | Effective as of: 2022-06-19 07:36:45
 2 | 
 3 | # Cookie Policy
 4 | 
 5 | In this Cookie Policy we will provide you with detailed information on how itsrakesh - blog (hereinafter - the "we" or "our"), shall undertake to ensure the security of personal information and the protection of rights of the visitors and users of the websites (hereinafter - the "Visitors", "You") while you use our websites including but not limited to https://blog.itsrakesh.com (hereinafter - the "Site") and the content on it.
 6 | 
 7 | ## 1. What is a cookie?
 8 | 
 9 | A cookie is a small file placed onto your device that enables our Site features and functionality. For example, cookies can enable us to identify your device and secure your access to the Site. Cookies also allow the Site to remember information about your browsing on the Site for a while and to recognize you the next time you visit the Site. All this allows us to give you the opportunity to use the Site comfortably and to make the Site even more user-friendly.
10 | 
11 | ## 2. Why do we use cookies?
12 | 
13 | We use cookies for the following main purposes:
14 | 
15 | - To ensure efficient and safe functioning of the Site. We use cookies to enable and support our security features, and to help us detect malicious activity on our Site.
16 | - To understand, improve, and research products, features, and services, including when you access our Site from other websites or devices such as your computer or your mobile device.
17 | - To recognize the returning visitors of the Site. Cookies help us show you the right information and personalize your experience. Cookies also help avoiding re-registration or re-filling of the information by you each time you visit the Site.
18 | - To analyze your habits so that the functioning of the Site would be convenient, efficient and would conform to your needs and expectations.
19 | - To measure the flows of the information and data being sent to our Site. We use the cookies for accumulation of statistical data about the number of users of the Site and their use of the Site.
20 | 
21 | ## 3. What cookies do we use?
22 | 
23 | Each time you visit our Site, the long-term (persistent) cookies may be created, which stay in your browser after you sign-up and will be read by us when you return to our Site and not deleted after you finish browsing our Site, and the short-term (session) cookies, which expire or are deleted after you finish browsing our Site (i.e. they usually last during the current visit to our Site or browsing session).
24 | Cookies used by the Company:
25 | 
26 | - Strictly required or necessary cookies. These cookies are required for the operation of our Site. They include, for example, cookies that enable storage of information filled by you during the browsing session, enable you to log into secure areas of our Site. Without these cookies operation of the Site would be impossible or its functioning may be severely affected.
27 | - Preferences cookies. These improve the functional performance of our Site and make it easier for you to use. These cookies remember the settings selected by the Visitors (for example, the settings of language or currency). With the use of these cookies, the Visitors may avoid the changes of settings during each visit of the Site. These cookies also remember changes made by you in the Site (for example, in case you leave comment on the Site). These cookies do not track your behavior in other websites.
28 | - Analytics and Statistics. These cookies show us if the Visitor has visited our Site before. The analytic cookies allow us to recognize and count the number of users of our website and see how such users navigate through our Site. We also use cookies to understand, improve, and research products, features, and services. For instance, analytical cookies may show us, which websites are visited more frequently, help us to record dysfunctionalities of the Site, etc.
29 | 
30 | Third-party cookies:
31 | 
32 | - We use Google Analytics, a web analysis service provided by Google, Inc (hereinafter referred to as "Google"). The information collected by Google Analytics is transmitted to and stored with Google. Google may transmit the information collected by Google Analytics to the third parties as required by the law or when those third parties process the information in the name of Google. We recommend consulting the Google Privacy and Cookies Policy on a separate and regular basis.
33 | 
34 | ## 4. How to refuse or block cookies?
35 | 
36 | Many web browsers are set so that they would automatically accept all cookies.
37 | The Visitors may, at their discretion, manage, block or delete cookies, if the settings of their browser or device enable them to do so. Nevertheless, if you refuse or block the cookies or other similar technologies, some functions of the Site may be inaccessible to you or they may operate not properly.
38 | We draw your attention that necessary cookies are critical for functioning of our Site, and in case of your objections, some features of the Site may not work or may not work properly.
39 | You may require that we delete all the data about you, as collected and processed with the help of the cookies, by contacting to the email address rakesh@itsrakesh.com.
40 | You can opt out of Google Analytics without affecting how you visit our Site. For more information on opting out of being tracked by Google Analytics across all websites you use, visit this Google page: https://tools.google.com/dlpage/gaoptout.
41 | You may find more information about how to delete cookies, as well as the other useful information related to the use of the cookies, on the website http://www.allaboutcookies.org/.
42 | 
43 | ## 5. Do we update Cookie Policy?
44 | 
45 | This Cookie Policy may be updated by us from time to time. We will inform you about the updates, by providing the new version of the Cookie Policy. For this reason, we recommend you periodically visit our Site, where you will always find the latest version of this Cookie Policy. This Policy was created with the help of the [Cookie Policy Generator from TermsHub](https://termshub.io/cookie-policy?utm_source=referral&utm_medium=generated_documents&utm_campaign=referral_documents&utm_content=cp_th_text).
46 | This Cookie Policy shall be applied from the date of announcement of it on the Site.
47 | 


--------------------------------------------------------------------------------
/src/common/components/navbar/SearchResultsDisplay.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Box,
  3 |   Center,
  4 |   Divider,
  5 |   Heading,
  6 |   HStack,
  7 |   Link,
  8 |   Popover,
  9 |   PopoverBody,
 10 |   PopoverCloseButton,
 11 |   PopoverContent,
 12 |   PopoverHeader,
 13 |   Spinner,
 14 |   useMediaQuery,
 15 |   VStack
 16 | } from '@chakra-ui/react';
 17 | import NextLink from 'next/link';
 18 | 
 19 | import { ErrorBox } from '@/UIElements/index.js';
 20 | 
 21 | const SearchResultsDisplay = ({
 22 |   queriedItems,
 23 |   loading,
 24 |   error,
 25 |   isOpen,
 26 |   setIsOpen
 27 | }) => {
 28 |   const [isGreaterThan780px] = useMediaQuery('(min-width: 768px)');
 29 | 
 30 |   return (
 31 |     <>
 32 |       {/* Popover for search results */}
 33 |       {isGreaterThan780px && (
 34 |         <Box pos={'fixed'} zIndex={9999}>
 35 |           <Popover
 36 |             placement={'bottom'}
 37 |             isOpen={isOpen}
 38 |             trigger={'click'}
 39 |             isLazy
 40 |           >
 41 |             <PopoverContent w={'100vw'}>
 42 |               <PopoverCloseButton onClick={() => setIsOpen(false)} />
 43 |               <Center overflowInline={'auto'}>
 44 |                 <HStack>
 45 |                   <VStack>
 46 |                     <PopoverHeader>Articles</PopoverHeader>
 47 |                     <PopoverBody w={'17rem'} h={'100vh'}>
 48 |                       {error && <ErrorBox error={error.message} />}
 49 |                       {!error &&
 50 |                       queriedItems &&
 51 |                       !loading &&
 52 |                       queriedItems.posts.length > 0 ? (
 53 |                         queriedItems.posts.map((item) => (
 54 |                           <>
 55 |                             <NextLink
 56 |                               key={item.id}
 57 |                               href={`/${item.slug}`}
 58 |                               passHref
 59 |                             >
 60 |                               <Link tabIndex={-1}>
 61 |                                 <Heading
 62 |                                   my={2}
 63 |                                   size={'sm'}
 64 |                                   _hover={{ color: 'brand.50' }}
 65 |                                   tabIndex={0}
 66 |                                 >
 67 |                                   {item.title}
 68 |                                 </Heading>
 69 |                               </Link>
 70 |                             </NextLink>
 71 |                             <Divider />
 72 |                           </>
 73 |                         ))
 74 |                       ) : (
 75 |                         <Center my={20}>
 76 |                           {loading ? (
 77 |                             <Spinner size={'lg'} />
 78 |                           ) : (
 79 |                             <Heading size={'sm'}>Nothing in Articles</Heading>
 80 |                           )}
 81 |                         </Center>
 82 |                       )}
 83 |                     </PopoverBody>
 84 |                   </VStack>
 85 |                   <VStack>
 86 |                     <PopoverHeader>Snippets</PopoverHeader>
 87 |                     <PopoverBody w={'17rem'} h={'100vh'}>
 88 |                       {error && <ErrorBox error={error.message} />}
 89 |                       {!error &&
 90 |                       queriedItems &&
 91 |                       queriedItems.snippets.length > 0 ? (
 92 |                         queriedItems.snippets.map((item) => (
 93 |                           <>
 94 |                             <NextLink
 95 |                               key={item.id}
 96 |                               href={`/snippets/${item.slug}`}
 97 |                               passHref
 98 |                             >
 99 |                               <Link tabIndex={-1}>
100 |                                 <Heading
101 |                                   my={2}
102 |                                   size={'sm'}
103 |                                   _hover={{ color: 'brand.50' }}
104 |                                   tabIndex={0}
105 |                                 >
106 |                                   {item.title}
107 |                                 </Heading>
108 |                               </Link>
109 |                             </NextLink>
110 |                             <Divider />
111 |                           </>
112 |                         ))
113 |                       ) : (
114 |                         <Center my={20}>
115 |                           {loading ? (
116 |                             <Spinner size={'lg'} />
117 |                           ) : (
118 |                             <Heading size={'sm'}>Nothing in Snippets</Heading>
119 |                           )}
120 |                         </Center>
121 |                       )}
122 |                     </PopoverBody>
123 |                   </VStack>
124 |                   <VStack>
125 |                     <PopoverHeader>Categories</PopoverHeader>
126 |                     <PopoverBody w={'17rem'} h={'100vh'}>
127 |                       {error && <ErrorBox error={error.message} />}
128 |                       {!error &&
129 |                       queriedItems &&
130 |                       queriedItems.categories.length > 0 ? (
131 |                         queriedItems.categories.map((item) => (
132 |                           <>
133 |                             <NextLink
134 |                               key={item.id}
135 |                               href={`/articles?c=${item.slug}`}
136 |                               passHref
137 |                             >
138 |                               <Link tabIndex={-1}>
139 |                                 <Heading
140 |                                   my={2}
141 |                                   size={'sm'}
142 |                                   _hover={{ color: 'brand.50' }}
143 |                                   tabIndex={0}
144 |                                 >
145 |                                   {item.name}
146 |                                 </Heading>
147 |                               </Link>
148 |                             </NextLink>
149 |                             <Divider />
150 |                           </>
151 |                         ))
152 |                       ) : (
153 |                         <Center my={20}>
154 |                           {loading ? (
155 |                             <Spinner size={'lg'} />
156 |                           ) : (
157 |                             <Heading size={'sm'}>Nothing in Categories</Heading>
158 |                           )}
159 |                         </Center>
160 |                       )}
161 |                     </PopoverBody>
162 |                   </VStack>
163 |                 </HStack>
164 |               </Center>
165 |             </PopoverContent>
166 |           </Popover>
167 |         </Box>
168 |       )}
169 |     </>
170 |   );
171 | };
172 | 
173 | export default SearchResultsDisplay;
174 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > *__Update Jan 2025__: I have moved my blog from blog.itsrakesh.com to [itsrakesh.com/blog](https://itsrakesh.com/blog). Also, switched to Gatsby from NextJs and Contentful from Hygraph. ([GitHub repo](https://github.com/RakeshPotnuru/portfolio))*
  2 | 
  3 | <div id="top"></div>
  4 | 
  5 | [![Netlify Status](https://api.netlify.com/api/v1/badges/1c639728-6ada-4eaa-beb6-4bdcb492baa1/deploy-status)](https://app.netlify.com/sites/blog-itsrakesh/deploys)
  6 | [![Better Stack Badge](https://uptime.betterstack.com/status-badges/v1/monitor/sq5a.svg)](https://status.itsrakesh.com)
  7 | 
  8 | <br />
  9 | <div align="center">
 10 | 
 11 |   <h3 align="center">itsrakesh - blog</h3>
 12 | 
 13 |   <p align="center">
 14 |     Browse programming tutorials and articles written by Rakesh Potnuru.
 15 |     <br />
 16 |     <br />
 17 |     <a href="https://blog.itsrakesh.com">View Example</a>
 18 |     ·
 19 |     <a href="https://github.com/RakeshPotnuru/Blog/issues">Report Bug</a>
 20 |     ·
 21 |     <a href="https://github.com/RakeshPotnuru/Blog/issues">Request Feature</a>
 22 |   </p>
 23 | </div>
 24 | 
 25 | 
 26 | 
 27 | <!-- TABLE OF CONTENTS -->
 28 | <details>
 29 |   <summary>Table of Contents</summary>
 30 |   <ol>
 31 |     <li>
 32 |       <a href="#about-the-project">About The Project</a>
 33 |     </li>
 34 |     <li>
 35 |       <a href="#getting-started">Getting Started</a>
 36 |       <ul>
 37 |         <li><a href="#prerequisites">Prerequisites</a></li>
 38 |         <li><a href="#installation">Installation</a></li>
 39 |       </ul>
 40 |     </li>
 41 |     <li><a href="#contributing">Contributing</a></li>
 42 |     <li><a href="#license">License</a></li>
 43 |     <li><a href="#contact">Contact</a></li>
 44 |   </ol>
 45 | </details>
 46 | 
 47 | 
 48 | 
 49 | <!-- ABOUT THE PROJECT -->
 50 | ## About The Project
 51 | 
 52 | [![itsrakesh blog][product-screenshot]](https://blog.itsrakesh.com)
 53 | 
 54 | Follow [this](https://blog.itsrakesh.com/how-to-set-up-your-own-personal-blog-step-by-step-guide) guide to set up your own instance of this blog.
 55 | 
 56 | <p align="right">(<a href="#top">back to top</a>)</p>
 57 | 
 58 | 
 59 | 
 60 | ### Built With
 61 | 
 62 | * [Next.js](https://nextjs.org/)
 63 | * [Chakra UI](https://chakra-ui.com/)
 64 | * [Hygraph](https://hygraph.com/) (Previously GraphCMS)
 65 | 
 66 | ### Tools And Technologies Used
 67 | 
 68 | * [BeyondWords](https://beyondwords.io/) - Audio
 69 | * [Coil](https://coil.com/) - Web monetization
 70 | * [Google Analytics](https://analytics.google.com/)
 71 | * [Google AdSense](https://www.google.com/adsense/start/)
 72 | * [Giscus](https://giscus.app/) - A comments system powered by [GitHub Discussions](https://docs.github.com/en/discussions).
 73 | * [Netlify](https://netlify.com/)
 74 | 
 75 | 
 76 | <p align="right">(<a href="#top">back to top</a>)</p>
 77 | 
 78 | 
 79 | 
 80 | <!-- GETTING STARTED -->
 81 | ## Getting Started
 82 | 
 83 | Setup project locally for development.
 84 | 
 85 | > **Note** [Important]
 86 | > These instructions are for development purposes only. Follow [this](https://blog.itsrakesh.com/how-to-set-up-your-own-personal-blog-step-by-step-guide) guide to set up your own instance of this blog.
 87 | 
 88 | ### Prerequisites
 89 | 
 90 | #### Hygraph project set up
 91 | * Create or sign in to your [Hygraph](https://hygraph.com/) account.
 92 | * Click the button below to clone the Hygraph project.
 93 | 
 94 | [![Clone project](https://hygraph.com/button)](https://app.hygraph.com/clone/13f9db967a6640af82423ad6f304025d?name=itsrakesh-blog)
 95 | 
 96 | * Create or sign in to your [Cloudinary](https://cloudinary.com/) account.
 97 | * Follow [this](https://hygraph.com/blog/integrate-cloudinary-with-hygraph-ui-extensions) guide to install Cloudinary UI extension in Hygraph.
 98 | 
 99 | #### Blog set up
100 | * npm
101 |   ```sh
102 |   npm install npm@latest -g
103 |   ```
104 | * Create `.env.local` file at the root level of the project and copy env variables from `.env.example` file. You need to fill atleast these three variables for development purpose.
105 |   ```sh
106 |   NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL=
107 |   NEXT_PUBLIC_HYGRAPH_AUTH_TOKEN=
108 |   NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=
109 |   ```
110 | 
111 | ### Installation
112 | 
113 | 1. Fork the repo
114 | 2. Clone the repo
115 |    ```sh
116 |    git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git
117 |    ```
118 | 3. Install the dependencies
119 |    ```sh
120 |    yarn
121 |    ```
122 | 4. Start the development server
123 |    ```sh
124 |    yarn dev
125 |    ```
126 | 5. Your project will be running at http://localhost:3000
127 | 
128 | <p align="right">(<a href="#top">back to top</a>)</p>
129 | 
130 | ## Or
131 | 
132 | ### With Docker
133 | 
134 | 1. Fork the repo
135 | 2. Clone the repo
136 |    ```sh
137 |    git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git
138 |    ```
139 | 3. Build the image
140 |    ```sh
141 |    docker-compose build
142 |    ```
143 | 4. Run docker image
144 |    ```sh
145 |    docker-compose up
146 |    ```
147 | 5. Your project will be running at http://localhost:3000
148 | 
149 | <!-- CONTRIBUTING -->
150 | ## Contributing
151 | 
152 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
153 | 
154 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
155 | Don't forget to give the project a star! Thanks again!
156 | 
157 | 1. Fork the Project
158 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
159 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
160 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
161 | 5. Open a Pull Request
162 | 
163 | 
164 | <p align="right">(<a href="#top">back to top</a>)</p>
165 | 
166 | 
167 | 
168 | <!-- LICENSE -->
169 | ## License
170 | 
171 | Distributed under the MIT License. See `LICENSE.txt` for more information.
172 | 
173 | <p align="right">(<a href="#top">back to top</a>)</p>
174 | 
175 | 
176 | 
177 | <!-- CONTACT -->
178 | ## Contact
179 | 
180 | Twitter - [@rakesh_at_tweet](https://twitter.com/rakesh_at_tweet)
181 | 
182 | Project Link: [https://github.com/RakeshPotnuru/Blog](https://github.com/RakeshPotnuru/Blog)
183 | 
184 | Status - [status.itsrakesh.com](https://status.itsrakesh.com)
185 | 
186 | <p align="right">(<a href="#top">back to top</a>)</p>
187 | 
188 | 
189 | 
190 | <!-- MARKDOWN LINKS & IMAGES -->
191 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
192 | [contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
193 | [contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
194 | [forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
195 | [forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
196 | [stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
197 | [stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
198 | [issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
199 | [issues-url]: https://github.com/othneildrew/Best-README-Template/issues
200 | [license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
201 | [license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
202 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
203 | [linkedin-url]: https://linkedin.com/in/othneildrew
204 | [product-screenshot]: https://project-assets.showwcase.com/9161/1656502274336-home%2520page%2520-%2520light.png
205 | 


--------------------------------------------------------------------------------
/src/data/terms-and-conditions.md:
--------------------------------------------------------------------------------
  1 | # Terms and Conditions
  2 | 
  3 | ---
  4 | 
  5 | These terms and conditions outline the rules and regulations for the use of itsrakesh's Website, located at itsrakesh - blog.
  6 | 
  7 | By accessing this website we assume you accept these terms and conditions. Do not continue to use itsrakesh - blog if you do not agree to take all of the terms and conditions stated on this page.
  8 | 
  9 | The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: "Client", "You" and "Your" refers to you, the person log on this website and compliant to the Company’s terms and conditions. "The Company", "Ourselves", "We", "Our" and "Us", refers to our Company. "Party", "Parties", or "Us", refers to both the Client and ourselves. All terms refer to the offer, acceptance and consideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of provision of the Company’s stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization and/or he/she or they, are taken as interchangeable and therefore as referring to same.
 10 | 
 11 | ### Cookies
 12 | 
 13 | We employ the use of cookies. By accessing itsrakesh - blog, you agreed to use cookies in agreement with the itsrakesh's Privacy Policy.
 14 | 
 15 | Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.
 16 | 
 17 | ### License
 18 | 
 19 | Unless otherwise stated, itsrakesh and/or its licensors own the intellectual property rights for all material on itsrakesh - blog. All intellectual property rights are reserved. You may access this from itsrakesh - blog for your own personal use subjected to restrictions set in these terms and conditions.
 20 | 
 21 | You must not:
 22 | 
 23 | - Republish material from itsrakesh - blog
 24 | - Sell, rent or sub-license material from itsrakesh - blog
 25 | - Reproduce, duplicate or copy material from itsrakesh - blog
 26 | - Redistribute content from itsrakesh - blog
 27 | 
 28 | Parts of this website offer an opportunity for users to post and exchange opinions and information in certain areas of the website. itsrakeshdoes not filter, edit, publish or review Comments prior to their presence on the website. Comments do not reflect the views and opinions ofitsrakesh, its agents and/or affiliates. Comments reflect the views and opinions of the person who post their views and opinions. To the extent permitted by applicable laws, itsrakesh shall not be liable for the Comments or for any liability, damages or expenses caused and/or suffered as a result of any use of and/or posting of and/or appearance of the Comments on this website.
 29 | 
 30 | itsrakesh reserves the right to monitor all Comments and to remove any Comments which can be considered inappropriate, offensive or causes breach of these Terms and Conditions.
 31 | 
 32 | You warrant and represent that:
 33 | 
 34 | - You are entitled to post the Comments on our website and have all necessary licenses and consents to do so;
 35 | - The Comments do not invade any intellectual property right, including without limitation copyright, patent or trademark of any third party;
 36 | - The Comments do not contain any defamatory, libelous, offensive, indecent or otherwise unlawful material which is an invasion of privacy
 37 | - The Comments will not be used to solicit or promote business or custom or present commercial activities or unlawful activity.
 38 | 
 39 | You hereby grant itsrakesh a non-exclusive license to use, reproduce, edit and authorize others to use, reproduce and edit any of your Comments in any and all forms, formats or media.
 40 | 
 41 | ### Hyperlinking to our Content
 42 | 
 43 | The following organizations may link to our Website without prior written approval:
 44 | 
 45 | - Government agencies;
 46 | - Search engines;
 47 | - News organizations;
 48 | - Online directory distributors may link to our Website in the same manner as they hyperlink to the Websites of other listed businesses; and
 49 | - System wide Accredited Businesses except soliciting non-profit organizations, charity shopping malls, and charity fundraising groups which may not hyperlink to our Web site.
 50 | 
 51 | These organizations may link to our home page, to publications or to other Website information so long as the link:
 52 | 
 53 | - is not in any way deceptive;
 54 | - does not falsely imply sponsorship, endorsement or approval of the linking party and its products and/or services; and
 55 | - fits within the context of the linking party’s site.
 56 | 
 57 | We may consider and approve other link requests from the following types of organizations:
 58 | 
 59 | - commonly-known consumer and/or business information sources;
 60 | - dot.com community sites;
 61 | - associations or other groups representing charities;
 62 | - online directory distributors;
 63 | - internet portals;
 64 | - accounting, law and consulting firms; and
 65 | - educational institutions and trade associations.
 66 | 
 67 | We will approve link requests from these organizations if we decide that:
 68 | 
 69 | - the link would not make us look unfavorably to ourselves or to our accredited businesses;
 70 | - the organization does not have any negative records with us;
 71 | - the benefit to us from the visibility of the hyperlink compensates the absence of itsrakesh; and
 72 | - the link is in the context of general resource information.
 73 | 
 74 | These organizations may link to our home page so long as the link:
 75 | 
 76 | - is not in any way deceptive;
 77 | - does not falsely imply sponsorship, endorsement or approval of the linking party and its products or services; and
 78 | - fits within the context of the linking party’s site.
 79 | 
 80 | If you are one of the organizations listed in paragraph 2 above and are interested in linking to our website, you must inform us by sending an e-mail to itsrakesh. Please include your name, your organization name, contact information as well as the URL of your site, a list of any URLs from which you intend to link to our Website, and a list of the URLs on our site to which you would like to link. Wait 2-3 weeks for a response.
 81 | 
 82 | Approved organizations may hyperlink to our Website as follows:
 83 | 
 84 | - By use of our corporate name; or
 85 | - By use of the uniform resource locator being linked to; or
 86 | - By use of any other description of our Website being linked to that makes sense within the context and format of content on the linking party’s site.
 87 | 
 88 | No use of itsrakesh's logo or other artwork will be allowed for linking absent a trademark license agreement.
 89 | 
 90 | ### iFrames
 91 | 
 92 | Without prior approval and written permission, you may not create frames around our Webpages that alter in any way the visual presentation or appearance of our Website.
 93 | 
 94 | ### Content Liability
 95 | 
 96 | We shall not be hold responsible for any content that appears on your Website. You agree to protect and defend us against all claims that is rising on your Website. No link(s) should appear on any Website that may be interpreted as libelous, obscene or criminal, or which infringes, otherwise violates, or advocates the infringement or other violation of, any third party rights.
 97 | 
 98 | ### Your Privacy
 99 | 
100 | Please read Privacy Policy
101 | 
102 | ### Reservation of Rights
103 | 
104 | We reserve the right to request that you remove all links or any particular link to our Website. You approve to immediately remove all links to our Website upon request. We also reserve the right to amen these terms and conditions and it’s linking policy at any time. By continuously linking to our Website, you agree to be bound to and follow these linking terms and conditions.
105 | 
106 | ### Removal of links from our website
107 | 
108 | If you find any link on our Website that is offensive for any reason, you are free to contact and inform us any moment. We will consider requests to remove links but we are not obligated to or so or to respond to you directly.
109 | 
110 | We do not ensure that the information on this website is correct, we do not warrant its completeness or accuracy; nor do we promise to ensure that the website remains available or that the material on the website is kept up to date.
111 | 
112 | ### Disclaimer
113 | 
114 | To the maximum extent permitted by applicable law, we exclude all representations, warranties and conditions relating to our website and the use of this website. Nothing in this disclaimer will:
115 | 
116 | - limit or exclude our or your liability for death or personal injury;
117 | - limit or exclude our or your liability for fraud or fraudulent misrepresentation;
118 | - limit any of our or your liabilities in any way that is not permitted under applicable law; or
119 | - exclude any of our or your liabilities that may not be excluded under applicable law.
120 | 
121 | The limitations and prohibitions of liability set in this Section and elsewhere in this disclaimer:
122 | 
123 | - are subject to the preceding paragraph; and
124 | - govern all liabilities arising under the disclaimer, including liabilities arising in contract, in tort and for breach of statutory duty.
125 | 
126 | As long as the website and the information and services on the website are provided free of charge, we will not be liable for any loss or damage of any nature.
127 | 


--------------------------------------------------------------------------------
/src/components/post/components/Post.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import {
  3 |   Avatar,
  4 |   Badge,
  5 |   Box,
  6 |   Breadcrumb,
  7 |   BreadcrumbItem,
  8 |   BreadcrumbLink,
  9 |   Center,
 10 |   CircularProgress,
 11 |   CircularProgressLabel,
 12 |   Container,
 13 |   Divider,
 14 |   Heading,
 15 |   HStack,
 16 |   IconButton,
 17 |   Image,
 18 |   Link,
 19 |   useClipboard,
 20 |   useColorModeValue,
 21 |   useMediaQuery,
 22 |   VStack
 23 | } from '@chakra-ui/react';
 24 | import { ArrowBackIcon, CheckIcon, ChevronRightIcon } from '@chakra-ui/icons';
 25 | import NextLink from 'next/link';
 26 | import Script from 'next/script';
 27 | import Moment from 'react-moment';
 28 | import readingTime from 'reading-time';
 29 | import { Resize } from '@cloudinary/url-gen/actions';
 30 | 
 31 | import { CircleIcon } from '@/icons/index.js';
 32 | import { MarkdownRenderer } from '@/UIElements/markdownRenderer';
 33 | import { SocialShareLinks } from '@/UIElements/index.js';
 34 | import { buildImage } from '@/utils/index.js';
 35 | // import siteConfig from '../../../../config/site.config';
 36 | 
 37 | const Post = ({ post }) => {
 38 |   const [height, setHeight] = useState(0);
 39 |   const [sideContentVisibility, setSideContentVisibility] = useState('none');
 40 |   const [isLessThan1180px] = useMediaQuery('(max-width: 1180px)');
 41 |   const textColor = useColorModeValue('text', '#fff');
 42 |   const { hasCopied, onCopy } = useClipboard(
 43 |     `${process.env.NEXT_PUBLIC_SITE_URL}/${post.slug}`
 44 |   );
 45 | 
 46 |   const readTime = readingTime(post.content);
 47 | 
 48 |   // Calculate and update the height of the post content
 49 |   useEffect(() => {
 50 |     let handleProgress = () => {
 51 |       const totalScroll =
 52 |         document.documentElement.scrollTop -
 53 |         document.getElementById('head-content')?.clientHeight;
 54 |       const windowHeight =
 55 |         document.getElementById('blog-content')?.clientHeight;
 56 |       const scroll = `${totalScroll / windowHeight}`;
 57 |       setHeight(scroll);
 58 |     };
 59 | 
 60 |     window.addEventListener('scroll', handleProgress);
 61 |     return () => {
 62 |       window.removeEventListener('scroll', handleProgress);
 63 |     };
 64 |   }, []);
 65 | 
 66 |   // Auto-hide the side content visibility after progress reaches 100%
 67 |   useEffect(() => {
 68 |     if (Math.floor(height * 100) > 102) {
 69 |       setSideContentVisibility('none');
 70 |     } else {
 71 |       setSideContentVisibility('block');
 72 |     }
 73 |   }, [height]);
 74 | 
 75 |   return (
 76 |     <>
 77 |       {/* Adsense Page top Ad */}
 78 |       {/* <Box my={10}>
 79 |         <AdSense
 80 |           style={{ display: 'inline-block', width: '100%', height: '90px' }}
 81 |           adSlot={siteConfig.adsense.slots.pageTop}
 82 |         />
 83 |       </Box> */}
 84 | 
 85 |       {/* Breadcrumb */}
 86 |       <HStack mt={8} ml={6}>
 87 |         <NextLink href={'/'} passHref>
 88 |           <Link tabIndex={-1}>
 89 |             <IconButton
 90 |               aria-label={'go back'}
 91 |               icon={<ArrowBackIcon />}
 92 |               rounded={'full'}
 93 |             />
 94 |           </Link>
 95 |         </NextLink>
 96 |         <Breadcrumb separator={<ChevronRightIcon color="gray.500" />}>
 97 |           <BreadcrumbItem>
 98 |             <BreadcrumbLink href={'/'}>Home</BreadcrumbLink>
 99 |           </BreadcrumbItem>
100 |           <BreadcrumbItem>
101 |             <BreadcrumbLink href={`/articles?c=${post.category.slug}`}>
102 |               {post.category.name}
103 |             </BreadcrumbLink>
104 |           </BreadcrumbItem>
105 |           <BreadcrumbItem />
106 |         </Breadcrumb>
107 |       </HStack>
108 | 
109 |       {/* Post body */}
110 |       <Container maxW={'container.md'} style={{width: "100dvw"}}>
111 |         <VStack>
112 |           <Box id={'head-content'}>
113 |             <HStack
114 |               alignSelf={'flex-start'}
115 |               textTransform={'uppercase'}
116 |               mt={7}
117 |               mb={5}
118 |               fontSize={'sm'}
119 |             >
120 |               {/* Last updated */}
121 |               <Box>
122 |                 Last updated:{' '}
123 |                 <Moment format="MMM DD, YYYY">{post.updatedAt}</Moment>
124 |               </Box>
125 |               <Center>
126 |                 <CircleIcon boxSize={'2'} />
127 |               </Center>
128 | 
129 |               {/* Read time */}
130 |               <Box textTransform={'uppercase'}>{readTime.text}</Box>
131 |             </HStack>
132 | 
133 |             {/* Featured image */}
134 |             <Image
135 |               src={buildImage(post.featuredImage.public_id)
136 |                 .resize(Resize.scale().width(1600).height(840))
137 |                 .toURL()}
138 |               alt={post.title}
139 |               htmlWidth={'100%'}
140 |               htmlHeight={'auto'}
141 |             />
142 | 
143 |             <HStack alignSelf={'flex-start'} py={5} spacing={4}>
144 |               {/* Author image */}
145 |               <Avatar
146 |                 name={post.author.name}
147 |                 src={buildImage(post.author.photo.public_id).toURL()}
148 |               />
149 |               <VStack spacing={0}>
150 |                 {/* Author name */}
151 |                 <HStack>
152 |                   <Box color={'brand.50'}>{post.author.name}</Box>
153 |                   <Badge colorScheme={'green'} w={'max-content'}>
154 |                     Author
155 |                   </Badge>
156 |                   {post.sponsored && (
157 |                     <Badge colorScheme={'purple'}>sponsored</Badge>
158 |                   )}
159 |                 </HStack>
160 | 
161 |                 {/* Published date */}
162 |                 <Box alignSelf={'flex-start'} fontSize={'small'}>
163 |                   <Moment format="MMM DD, YYYY">
164 |                     {post.customPublicationDate
165 |                       ? post.customPublicationDate
166 |                       : post.publishedAt}
167 |                   </Moment>
168 |                 </Box>
169 |               </VStack>
170 |             </HStack>
171 | 
172 |             {/* Social media sharing links on devices whose resolution is less than 780px */}
173 |             {isLessThan1180px && (
174 |               <Center>
175 |                 <HStack my={2}>
176 |                   <SocialShareLinks
177 |                     toolTipPlacement={'top'}
178 |                     onCopy={onCopy}
179 |                     hasCopied={hasCopied}
180 |                     title={post.title}
181 |                     slug={post.slug}
182 |                   />
183 |                 </HStack>
184 |               </Center>
185 |             )}
186 | 
187 |             {/* Post reading completion progress indicator */}
188 |             {!isLessThan1180px && (
189 |               <Box
190 |                 id={'side-content'}
191 |                 pos={'fixed'}
192 |                 top={{ base: 60, '2xl': 60 }}
193 |                 right={{ base: 40, '2xl': 80 }}
194 |                 display={sideContentVisibility}
195 |               >
196 |                 <CircularProgress
197 |                   value={
198 |                     Math.floor(height * 100) < 0 ? 0 : Math.floor(height * 100)
199 |                   }
200 |                   color={
201 |                     Math.floor(height * 100) >= 100 ? 'green.400' : 'brand.50'
202 |                   }
203 |                 >
204 |                   <CircularProgressLabel>
205 |                     {Math.floor(height * 100) >= 100 ? (
206 |                       <CheckIcon color={'green.400'} fontSize={'lg'} />
207 |                     ) : Math.floor(height * 100) < 0 ? (
208 |                       `${0}%`
209 |                     ) : (
210 |                       `${Math.floor(height * 100)}%`
211 |                     )}
212 |                   </CircularProgressLabel>
213 |                 </CircularProgress>
214 | 
215 |                 {/* Social media sharing links */}
216 |                 <VStack mt={4}>
217 |                   <Box fontWeight={'bold'}>SHARE</Box>
218 |                   <SocialShareLinks
219 |                     toolTipPlacement={'right'}
220 |                     onCopy={onCopy}
221 |                     hasCopied={hasCopied}
222 |                     title={post.title}
223 |                     slug={post.slug}
224 |                   />
225 |                 </VStack>
226 |               </Box>
227 |             )}
228 | 
229 |             <Divider />
230 | 
231 |             {/* BeyondWords audio player widget */}
232 |             {post.audioId && (
233 |               <Box mt={4} mb={'-12%'}>
234 |                 <iframe
235 |                   allowFullScreen={false}
236 |                   src={`https://audio.beyondwords.io/e/${post.audioId}`}
237 |                   frameBorder={'0'}
238 |                   id={'speechkit-io-iframe'}
239 |                   scrolling={'no'}
240 |                   style={{ width: '100%' }}
241 |                 ></iframe>
242 |               </Box>
243 |             )}
244 |             <Script
245 |               src={
246 |                 'https://proxy.beyondwords.io/npm/@beyondwords/audio-player@latest/dist/module/iframe-helper.js'
247 |               }
248 |               type={'text/javascript'}
249 |               strategy={'beforeInteractive'}
250 |             />
251 | 
252 |             {/* Post title */}
253 |             <Heading as={'h1'} py={5}>
254 |               {post.title}
255 |             </Heading>
256 |           </Box>
257 | 
258 |           {/* Post content */}
259 |           <Box
260 |             lineHeight={1.8}
261 |             letterSpacing={'wide'}
262 |             color={textColor}
263 |             id={'blog-content'}
264 |             sx={{
265 |               width: 'fillAvailaible'
266 |             }}
267 |             style={{width: "100dvw"}}
268 |           >
269 |             <MarkdownRenderer content={post.content} />
270 |           </Box>
271 |           <Divider py={5} />
272 |         </VStack>
273 |       </Container>
274 |     </>
275 |   );
276 | };
277 | 
278 | export default Post;
279 | 


--------------------------------------------------------------------------------
/src/data/privacy-policy.md:
--------------------------------------------------------------------------------
  1 | # Privacy Policy
  2 | 
  3 | Last updated: June 19, 2022
  4 | 
  5 | This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.
  6 | 
  7 | We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. This Privacy Policy has been created with the help of the [Privacy Policy Generator](https://www.privacypolicies.com/privacy-policy-generator/).
  8 | 
  9 | # Interpretation and Definitions
 10 | 
 11 | ## Interpretation
 12 | 
 13 | The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
 14 | 
 15 | ## Definitions
 16 | 
 17 | For the purposes of this Privacy Policy:
 18 | 
 19 | - **Account** means a unique account created for You to access our Service or parts of our Service.
 20 | 
 21 | - **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to itsrakesh - blog.
 22 | 
 23 | - **Cookies** are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
 24 | 
 25 | - **Country** refers to: Andhra Pradesh, India
 26 | 
 27 | - **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
 28 | 
 29 | - **Personal Data** is any information that relates to an identified or identifiable individual.
 30 | 
 31 | - **Service** refers to the Website.
 32 | 
 33 | - **Service Provider** means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
 34 | 
 35 | - **Usage Data** refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
 36 | 
 37 | - **Website** refers to itsrakesh - blog, accessible from [https://blog.itsrakesh.com](https://blog.itsrakesh.com)
 38 | 
 39 | - **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
 40 | 
 41 | # Collecting and Using Your Personal Data
 42 | 
 43 | ## Types of Data Collected
 44 | 
 45 | ### Personal Data
 46 | 
 47 | While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
 48 | 
 49 | - Email address
 50 | 
 51 | - Usage Data
 52 | 
 53 | ### Usage Data
 54 | 
 55 | Usage Data is collected automatically when using the Service.
 56 | 
 57 | Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
 58 | 
 59 | When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
 60 | 
 61 | We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
 62 | 
 63 | ### Tracking Technologies and Cookies
 64 | 
 65 | We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:
 66 | 
 67 | - **Cookies or Browser Cookies.** A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies.
 68 | - **Flash Cookies.** Certain features of our Service may use local stored objects (or Flash Cookies) to collect and store information about Your preferences or Your activity on our Service. Flash Cookies are not managed by the same browser settings as those used for Browser Cookies. For more information on how You can delete Flash Cookies, please read "Where can I change the settings for disabling, or deleting local shared objects?" available at [https://helpx.adobe.com/flash-player/kb/disable-local-shared-objects-flash.html#main*Where_can_I_change_the_settings_for_disabling\_\_or_deleting_local_shared_objects*](https://helpx.adobe.com/flash-player/kb/disable-local-shared-objects-flash.html#main_Where_can_I_change_the_settings_for_disabling__or_deleting_local_shared_objects_)
 69 | - **Web Beacons.** Certain sections of our Service and our emails may contain small electronic files known as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) that permit the Company, for example, to count users who have visited those pages or opened an email and for other related website statistics (for example, recording the popularity of a certain section and verifying system and server integrity).
 70 | 
 71 | Cookies can be "Persistent" or "Session" Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser. Learn more about cookies on the [Privacy Policies website](https://www.privacypolicies.com/blog/privacy-policy-template/#Use_Of_Cookies_Log_Files_And_Tracking) article.
 72 | 
 73 | We use both Session and Persistent Cookies for the purposes set out below:
 74 | 
 75 | - **Necessary / Essential Cookies**
 76 | 
 77 |   Type: Session Cookies
 78 | 
 79 |   Administered by: Us
 80 | 
 81 |   Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.
 82 | 
 83 | - **Cookies Policy / Notice Acceptance Cookies**
 84 | 
 85 |   Type: Persistent Cookies
 86 | 
 87 |   Administered by: Us
 88 | 
 89 |   Purpose: These Cookies identify if users have accepted the use of cookies on the Website.
 90 | 
 91 | - **Functionality Cookies**
 92 | 
 93 |   Type: Persistent Cookies
 94 | 
 95 |   Administered by: Us
 96 | 
 97 |   Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.
 98 | 
 99 | For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of our Privacy Policy.
100 | 
101 | ## Use of Your Personal Data
102 | 
103 | The Company may use Personal Data for the following purposes:
104 | 
105 | - **To provide and maintain our Service**, including to monitor the usage of our Service.
106 | - **To manage Your Account:** to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
107 | - **For the performance of a contract:** the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
108 | - **To contact You:** To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
109 | - **To provide You** with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
110 | - **To manage Your requests:** To attend and manage Your requests to Us.
111 | 
112 | - **For business transfers:** We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
113 | - **For other purposes**: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
114 | 
115 | We may share Your personal information in the following situations:
116 | 
117 | - **With Service Providers:** We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You.
118 | - **For business transfers:** We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.
119 | - **With Affiliates:** We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.
120 | - **With business partners:** We may share Your information with Our business partners to offer You certain products, services or promotions.
121 | - **With other users:** when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside.
122 | - **With Your consent**: We may disclose Your personal information for any other purpose with Your consent.
123 | 
124 | ## Retention of Your Personal Data
125 | 
126 | The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
127 | 
128 | The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
129 | 
130 | ## Transfer of Your Personal Data
131 | 
132 | Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
133 | 
134 | Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
135 | 
136 | The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
137 | 
138 | ## Disclosure of Your Personal Data
139 | 
140 | ### Business Transactions
141 | 
142 | If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
143 | 
144 | ### Law enforcement
145 | 
146 | Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
147 | 
148 | ### Other legal requirements
149 | 
150 | The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
151 | 
152 | - Comply with a legal obligation
153 | - Protect and defend the rights or property of the Company
154 | - Prevent or investigate possible wrongdoing in connection with the Service
155 | - Protect the personal safety of Users of the Service or the public
156 | - Protect against legal liability
157 | 
158 | ## Security of Your Personal Data
159 | 
160 | The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
161 | 
162 | # Children's Privacy
163 | 
164 | Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
165 | 
166 | If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
167 | 
168 | # Links to Other Websites
169 | 
170 | Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
171 | 
172 | We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
173 | 
174 | # Changes to this Privacy Policy
175 | 
176 | We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
177 | 
178 | We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
179 | 
180 | You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
181 | 
182 | # Contact Us
183 | 
184 | If you have any questions about this Privacy Policy, You can contact us:
185 | 
186 | - By email: rakesh@itsrakesh.com
187 | 


--------------------------------------------------------------------------------