From adb51dcf14e34ade0cdb0bb94d8c9a31fef6b7b3 Mon Sep 17 00:00:00 2001 From: Chakradhar B Date: Wed, 13 Jul 2022 17:47:46 +0530 Subject: [PATCH 1/4] add petal-theme --- apps/petal-e2e/.eslintrc.json | 10 + apps/petal-e2e/cypress.json | 12 + apps/petal-e2e/project.json | 28 + apps/petal-e2e/src/fixtures/example.json | 4 + apps/petal-e2e/src/integration/app.spec.ts | 13 + apps/petal-e2e/src/support/app.po.ts | 1 + apps/petal-e2e/src/support/commands.ts | 33 + apps/petal-e2e/src/support/index.ts | 17 + apps/petal-e2e/tsconfig.json | 10 + apps/petal/.eslintrc.json | 31 + apps/petal/components/ActiveLink.js | 31 + apps/petal/components/Homepage.js | 46 + apps/petal/components/Layout/Footer.js | 109 +++ apps/petal/components/Layout/Navbar.js | 175 ++++ apps/petal/components/Layout/index.js | 44 + apps/petal/components/Post/Excerpt.js | 70 ++ apps/petal/components/Post/FactCheckWidget.js | 251 +++++ apps/petal/components/Post/PostInfo.js | 114 +++ .../petal/components/Post/ShareButtonGroup.js | 86 ++ apps/petal/components/Post/Tag.js | 48 + apps/petal/components/Post/index.js | 404 ++++++++ apps/petal/components/PostGrid.js | 156 +++ apps/petal/components/StoryCard.js | 909 ++++++++++++++++++ apps/petal/index.d.ts | 6 + apps/petal/jest.config.ts | 11 + apps/petal/next-env.d.ts | 5 + apps/petal/next.config.js | 38 + apps/petal/pages/[slug].js | 368 +++++++ apps/petal/pages/_app.js | 85 ++ apps/petal/pages/_document.js | 102 ++ apps/petal/pages/author/[slug].js | 333 +++++++ apps/petal/pages/category/[slug].js | 159 +++ apps/petal/pages/format/[slug].js | 131 +++ apps/petal/pages/index.js | 92 ++ apps/petal/pages/podcasts.js | 148 +++ apps/petal/pages/tag/[slug].js | 126 +++ apps/petal/project.json | 60 ++ apps/petal/public/favicon.ico | Bin 0 -> 25931 bytes .../public/favicons/android-icon-144x144.png | Bin 0 -> 9082 bytes .../public/favicons/android-icon-192x192.png | Bin 0 -> 10733 bytes .../public/favicons/android-icon-36x36.png | Bin 0 -> 1772 bytes .../public/favicons/android-icon-48x48.png | Bin 0 -> 2493 bytes .../public/favicons/android-icon-72x72.png | Bin 0 -> 3964 bytes .../public/favicons/android-icon-96x96.png | Bin 0 -> 5585 bytes .../public/favicons/apple-icon-114x114.png | Bin 0 -> 6856 bytes .../public/favicons/apple-icon-120x120.png | Bin 0 -> 7310 bytes .../public/favicons/apple-icon-144x144.png | Bin 0 -> 9082 bytes .../public/favicons/apple-icon-152x152.png | Bin 0 -> 9798 bytes .../public/favicons/apple-icon-180x180.png | Bin 0 -> 12130 bytes .../public/favicons/apple-icon-57x57.png | Bin 0 -> 3038 bytes .../public/favicons/apple-icon-60x60.png | Bin 0 -> 3163 bytes .../public/favicons/apple-icon-72x72.png | Bin 0 -> 3964 bytes .../public/favicons/apple-icon-76x76.png | Bin 0 -> 4220 bytes .../favicons/apple-icon-precomposed.png | Bin 0 -> 11252 bytes apps/petal/public/favicons/apple-icon.png | Bin 0 -> 11252 bytes apps/petal/public/favicons/browserconfig.xml | 2 + apps/petal/public/favicons/favicon-16x16.png | Bin 0 -> 954 bytes apps/petal/public/favicons/favicon-32x32.png | Bin 0 -> 1625 bytes apps/petal/public/favicons/favicon-96x96.png | Bin 0 -> 5585 bytes apps/petal/public/favicons/favicon.ico | Bin 0 -> 1150 bytes apps/petal/public/favicons/manifest.json | 41 + .../petal/public/favicons/ms-icon-144x144.png | Bin 0 -> 9082 bytes .../petal/public/favicons/ms-icon-150x150.png | Bin 0 -> 9632 bytes .../petal/public/favicons/ms-icon-310x310.png | Bin 0 -> 28004 bytes apps/petal/public/favicons/ms-icon-70x70.png | Bin 0 -> 3832 bytes apps/petal/public/logo.png | Bin 0 -> 82422 bytes apps/petal/public/logo_mobile.png | Bin 0 -> 158001 bytes apps/petal/public/vercel.svg | 4 + apps/petal/specs/index.spec.tsx | 11 + apps/petal/src/utils/parseDate.js | 7 + apps/petal/src/utils/parseEditorJsData.js | 254 +++++ apps/petal/src/utils/theme.js | 696 ++++++++++++++ apps/petal/store/client.js | 14 + apps/petal/styles/Home.module.css | 123 +++ apps/petal/styles/global.css | 636 ++++++++++++ apps/petal/tsconfig.json | 18 + apps/petal/tsconfig.spec.json | 21 + 77 files changed, 6093 insertions(+) create mode 100644 apps/petal-e2e/.eslintrc.json create mode 100644 apps/petal-e2e/cypress.json create mode 100644 apps/petal-e2e/project.json create mode 100644 apps/petal-e2e/src/fixtures/example.json create mode 100644 apps/petal-e2e/src/integration/app.spec.ts create mode 100644 apps/petal-e2e/src/support/app.po.ts create mode 100644 apps/petal-e2e/src/support/commands.ts create mode 100644 apps/petal-e2e/src/support/index.ts create mode 100644 apps/petal-e2e/tsconfig.json create mode 100644 apps/petal/.eslintrc.json create mode 100644 apps/petal/components/ActiveLink.js create mode 100644 apps/petal/components/Homepage.js create mode 100644 apps/petal/components/Layout/Footer.js create mode 100644 apps/petal/components/Layout/Navbar.js create mode 100644 apps/petal/components/Layout/index.js create mode 100644 apps/petal/components/Post/Excerpt.js create mode 100644 apps/petal/components/Post/FactCheckWidget.js create mode 100644 apps/petal/components/Post/PostInfo.js create mode 100644 apps/petal/components/Post/ShareButtonGroup.js create mode 100644 apps/petal/components/Post/Tag.js create mode 100644 apps/petal/components/Post/index.js create mode 100644 apps/petal/components/PostGrid.js create mode 100644 apps/petal/components/StoryCard.js create mode 100644 apps/petal/index.d.ts create mode 100644 apps/petal/jest.config.ts create mode 100644 apps/petal/next-env.d.ts create mode 100644 apps/petal/next.config.js create mode 100644 apps/petal/pages/[slug].js create mode 100644 apps/petal/pages/_app.js create mode 100644 apps/petal/pages/_document.js create mode 100644 apps/petal/pages/author/[slug].js create mode 100644 apps/petal/pages/category/[slug].js create mode 100644 apps/petal/pages/format/[slug].js create mode 100644 apps/petal/pages/index.js create mode 100644 apps/petal/pages/podcasts.js create mode 100644 apps/petal/pages/tag/[slug].js create mode 100644 apps/petal/project.json create mode 100644 apps/petal/public/favicon.ico create mode 100644 apps/petal/public/favicons/android-icon-144x144.png create mode 100644 apps/petal/public/favicons/android-icon-192x192.png create mode 100644 apps/petal/public/favicons/android-icon-36x36.png create mode 100644 apps/petal/public/favicons/android-icon-48x48.png create mode 100644 apps/petal/public/favicons/android-icon-72x72.png create mode 100644 apps/petal/public/favicons/android-icon-96x96.png create mode 100644 apps/petal/public/favicons/apple-icon-114x114.png create mode 100644 apps/petal/public/favicons/apple-icon-120x120.png create mode 100644 apps/petal/public/favicons/apple-icon-144x144.png create mode 100644 apps/petal/public/favicons/apple-icon-152x152.png create mode 100644 apps/petal/public/favicons/apple-icon-180x180.png create mode 100644 apps/petal/public/favicons/apple-icon-57x57.png create mode 100644 apps/petal/public/favicons/apple-icon-60x60.png create mode 100644 apps/petal/public/favicons/apple-icon-72x72.png create mode 100644 apps/petal/public/favicons/apple-icon-76x76.png create mode 100644 apps/petal/public/favicons/apple-icon-precomposed.png create mode 100644 apps/petal/public/favicons/apple-icon.png create mode 100644 apps/petal/public/favicons/browserconfig.xml create mode 100644 apps/petal/public/favicons/favicon-16x16.png create mode 100644 apps/petal/public/favicons/favicon-32x32.png create mode 100644 apps/petal/public/favicons/favicon-96x96.png create mode 100644 apps/petal/public/favicons/favicon.ico create mode 100644 apps/petal/public/favicons/manifest.json create mode 100644 apps/petal/public/favicons/ms-icon-144x144.png create mode 100644 apps/petal/public/favicons/ms-icon-150x150.png create mode 100644 apps/petal/public/favicons/ms-icon-310x310.png create mode 100644 apps/petal/public/favicons/ms-icon-70x70.png create mode 100644 apps/petal/public/logo.png create mode 100644 apps/petal/public/logo_mobile.png create mode 100644 apps/petal/public/vercel.svg create mode 100644 apps/petal/specs/index.spec.tsx create mode 100644 apps/petal/src/utils/parseDate.js create mode 100644 apps/petal/src/utils/parseEditorJsData.js create mode 100644 apps/petal/src/utils/theme.js create mode 100644 apps/petal/store/client.js create mode 100644 apps/petal/styles/Home.module.css create mode 100644 apps/petal/styles/global.css create mode 100644 apps/petal/tsconfig.json create mode 100644 apps/petal/tsconfig.spec.json diff --git a/apps/petal-e2e/.eslintrc.json b/apps/petal-e2e/.eslintrc.json new file mode 100644 index 0000000..696cb8b --- /dev/null +++ b/apps/petal-e2e/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/apps/petal-e2e/cypress.json b/apps/petal-e2e/cypress.json new file mode 100644 index 0000000..f5805d0 --- /dev/null +++ b/apps/petal-e2e/cypress.json @@ -0,0 +1,12 @@ +{ + "fileServerFolder": ".", + "fixturesFolder": "./src/fixtures", + "integrationFolder": "./src/integration", + "modifyObstructiveCode": false, + "supportFile": "./src/support/index.ts", + "pluginsFile": false, + "video": true, + "videosFolder": "../../dist/cypress/apps/petal-e2e/videos", + "screenshotsFolder": "../../dist/cypress/apps/petal-e2e/screenshots", + "chromeWebSecurity": false +} diff --git a/apps/petal-e2e/project.json b/apps/petal-e2e/project.json new file mode 100644 index 0000000..5f7e02a --- /dev/null +++ b/apps/petal-e2e/project.json @@ -0,0 +1,28 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/petal-e2e/src", + "projectType": "application", + "targets": { + "e2e": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "apps/petal-e2e/cypress.json", + "devServerTarget": "petal:serve:development" + }, + "configurations": { + "production": { + "devServerTarget": "petal:serve:production" + } + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["apps/petal-e2e/**/*.{js,ts}"] + } + } + }, + "tags": [], + "implicitDependencies": ["petal"] +} diff --git a/apps/petal-e2e/src/fixtures/example.json b/apps/petal-e2e/src/fixtures/example.json new file mode 100644 index 0000000..294cbed --- /dev/null +++ b/apps/petal-e2e/src/fixtures/example.json @@ -0,0 +1,4 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io" +} diff --git a/apps/petal-e2e/src/integration/app.spec.ts b/apps/petal-e2e/src/integration/app.spec.ts new file mode 100644 index 0000000..75bdeab --- /dev/null +++ b/apps/petal-e2e/src/integration/app.spec.ts @@ -0,0 +1,13 @@ +import { getGreeting } from '../support/app.po'; + +describe('blog', () => { + beforeEach(() => cy.visit('/')); + + it('should display welcome message', () => { + // Custom command example, see `../support/commands.ts` file + cy.login('my-email@something.com', 'myPassword'); + + // Function helper example, see `../support/app.po.ts` file + getGreeting().contains('Welcome blog'); + }); +}); diff --git a/apps/petal-e2e/src/support/app.po.ts b/apps/petal-e2e/src/support/app.po.ts new file mode 100644 index 0000000..3293424 --- /dev/null +++ b/apps/petal-e2e/src/support/app.po.ts @@ -0,0 +1 @@ +export const getGreeting = () => cy.get('h1'); diff --git a/apps/petal-e2e/src/support/commands.ts b/apps/petal-e2e/src/support/commands.ts new file mode 100644 index 0000000..310f1fa --- /dev/null +++ b/apps/petal-e2e/src/support/commands.ts @@ -0,0 +1,33 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** + +// eslint-disable-next-line @typescript-eslint/no-namespace +declare namespace Cypress { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface Chainable { + login(email: string, password: string): void; + } +} +// +// -- This is a parent command -- +Cypress.Commands.add('login', (email, password) => { + console.log('Custom command example: Login', email, password); +}); +// +// -- This is a child command -- +// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/petal-e2e/src/support/index.ts b/apps/petal-e2e/src/support/index.ts new file mode 100644 index 0000000..3d469a6 --- /dev/null +++ b/apps/petal-e2e/src/support/index.ts @@ -0,0 +1,17 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands'; diff --git a/apps/petal-e2e/tsconfig.json b/apps/petal-e2e/tsconfig.json new file mode 100644 index 0000000..c4f818e --- /dev/null +++ b/apps/petal-e2e/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "sourceMap": false, + "outDir": "../../dist/out-tsc", + "allowJs": true, + "types": ["cypress", "node"] + }, + "include": ["src/**/*.ts", "src/**/*.js"] +} diff --git a/apps/petal/.eslintrc.json b/apps/petal/.eslintrc.json new file mode 100644 index 0000000..fdac1ad --- /dev/null +++ b/apps/petal/.eslintrc.json @@ -0,0 +1,31 @@ +{ + "extends": [ + "plugin:@nrwl/nx/react-typescript", + "next", + "next/core-web-vitals", + "../../.eslintrc.json" + ], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@next/next/no-html-link-for-pages": ["error", "apps/blog/pages"] + } + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ], + "rules": { + "@next/next/no-html-link-for-pages": "off" + }, + "env": { + "jest": true + } +} diff --git a/apps/petal/components/ActiveLink.js b/apps/petal/components/ActiveLink.js new file mode 100644 index 0000000..70ceb4a --- /dev/null +++ b/apps/petal/components/ActiveLink.js @@ -0,0 +1,31 @@ +import { useRouter } from 'next/router'; +import Link from 'next/link'; +import React, { Children } from 'react'; + +const ActiveLink = ({ children, activeClassName, ...props }) => { + const { asPath } = useRouter(); + const child = Children.only(children); + const childClassName = child.props.className || ''; + + // pages/index.js will be matched via props.href + // pages/about.js will be matched via props.href + // pages/[slug].js will be matched via props.as + + const addTrailingSlash = (url) => url.replace(/\/?$/, '/'); + const href = props.href && addTrailingSlash(props.href); + const as = props.as && addTrailingSlash(props.as); + const className = + asPath === href || asPath === as + ? `${childClassName} ${activeClassName}`.trim() + : childClassName; + + return ( + + {React.cloneElement(child, { + className: className || null, + })} + + ); +}; + +export default ActiveLink; diff --git a/apps/petal/components/Homepage.js b/apps/petal/components/Homepage.js new file mode 100644 index 0000000..dd364b2 --- /dev/null +++ b/apps/petal/components/Homepage.js @@ -0,0 +1,46 @@ +/** @jsx jsx */ +/** @jsxRuntime classic */ +import React from 'react'; // eslint-disable-line no-unused-vars +import { jsx } from 'theme-ui'; +import Link from 'next/link'; +import parseDate from '../src/utils/parseDate'; +import StoryCard from './StoryCard'; + +function Homepage({ data }) { + const { posts, featuredCategories } = data; + const featuredPost = posts.nodes[0]; + + return ( + <> +
+ {/* posts Section */} +
+
+

{posts.name}

+
`${theme.space.spacing6}`], + mt: (theme) => `${theme.space.spacing7}`, + gridGap: (theme) => `${theme.space.spacing7}`, + }} + > + {posts.nodes.slice(0, 9).map((post) => ( + + ))} +
+
+
+
+
+ + ); +} + +export default Homepage; diff --git a/apps/petal/components/Layout/Footer.js b/apps/petal/components/Layout/Footer.js new file mode 100644 index 0000000..2c46519 --- /dev/null +++ b/apps/petal/components/Layout/Footer.js @@ -0,0 +1,109 @@ +/** @jsx jsx */ +/** @jsxRuntime classic */ +import React from 'react'; // eslint-disable-line no-unused-vars +import { FaFacebook, FaTwitter, FaWhatsapp, FaLinkedin } from 'react-icons/fa'; +import { GoMarkGithub } from 'react-icons/go'; +import { jsx } from 'theme-ui'; + +const FooterTwo = () => ( + +); + +export default FooterTwo; diff --git a/apps/petal/components/Layout/Navbar.js b/apps/petal/components/Layout/Navbar.js new file mode 100644 index 0000000..fe094f0 --- /dev/null +++ b/apps/petal/components/Layout/Navbar.js @@ -0,0 +1,175 @@ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ +/** @jsx jsx */ +/** @jsxRuntime classic */ +import React, { useState, useEffect } from 'react'; +import { jsx } from 'theme-ui'; +import { FaHome, FaBars, FaSistrix } from 'react-icons/fa'; +import Link from 'next/link'; +import ActiveLink from '../ActiveLink'; + +export default function NavBar({ logo, data }) { + const { menu, categories, space } = data; + const mainMenu = menu.nodes.filter((i) => i.slug === 'main')[0]; + const [showMenu, setShowMenu] = useState(false); + const [width, setWidth] = useState(0); + + const updateWidth = () => { + const windowWidth = window.innerWidth; + setWidth(windowWidth); + }; + + useEffect(() => { + updateWidth(); + window.addEventListener('resize', updateWidth); + if (width >= 1024) { + setShowMenu(true); + } else { + setShowMenu(false); + } + return () => window.removeEventListener('resize', updateWidth); + }, [width]); + + const handleClick = () => { + setShowMenu((prevState) => !prevState); + }; + return ( + +
+
+
+ + + {space.site_title} + + +
+

+ +

+
+
+
+ +

search

+
+
+
+ + +

+ Sign in +

+ + + + +

+ Sign up +

+ + +
+ {/*
+ {mainMenu?.menu.map((item) => ( + + + {item.name} + + + ))} +
*/} +
+
+ + ); +} diff --git a/apps/petal/components/Layout/index.js b/apps/petal/components/Layout/index.js new file mode 100644 index 0000000..4425c81 --- /dev/null +++ b/apps/petal/components/Layout/index.js @@ -0,0 +1,44 @@ +/** @jsx jsx */ +/** @jsxRuntime classic */ +import React from 'react'; // eslint-disable-line no-unused-vars +import PropTypes from 'prop-types'; +import { jsx } from 'theme-ui'; +import Navbar from './Navbar'; + +import Footer from './Footer'; + +const Layout = ({ children, data }) => { + return ( + <> + {data && data.menu && } +
`${theme.fontSizes.h6}`, + null, + (theme) => `${theme.fontSizes.h5}`, + ], + color: (theme) => `${theme.colors.textPrimary}`, + lineHeight: 'normal', + pt: [(theme) => `${theme.space.spacing5}`, 0, 0], + minHeight: 'calc(100vh - 60px)', + mx: 'auto', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }} + > + {children} +
+