Skip to content

Commit

Permalink
Merge pull request #5 from contentstack/staging
Browse files Browse the repository at this point in the history
Json Preview
  • Loading branch information
Amitkanswal authored Nov 11, 2021
2 parents 4ec3a26 + bd1afc5 commit ca0e246
Show file tree
Hide file tree
Showing 30 changed files with 2,782 additions and 20,619 deletions.
File renamed without changes.
35 changes: 22 additions & 13 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
/* eslint-disable prettier/prettier */
module.exports = {
parser: 'babel-eslint',
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
sourceType: "module",
ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true,
},
},
extends: ['plugin:prettier/recommended', 'airbnb'],
plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
extends: ["plugin:prettier/recommended", "airbnb"],
plugins: ["react", "jsx-a11y", "import", "prettier"],
env: {
es6: true,
browser: true,
node: true,
jest: true,
},
rules: {
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
"react/prefer-stateless-function":[0, { "ignorePureComponents": true }],
"react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
"react/prefer-stateless-function": [0, { ignorePureComponents: true }],
"react/prop-types": [0],
'func-names': ['error', 'never'],
quotes: 'off',
'prettier/prettier': 'off',
'prop-types': 'off',
'react/destructuring-assignment': 'off',
'eslint-disable-next-line jsx-a11y/anchor-is-valid':'off',
"func-names": ["error", "never"],
quotes: "off",
"prop-types": "off",
"no-continue": "off",
"guard-for-in": "off",
"global-require": "off",
"no-param-reassign": "off",
"prettier/prettier": "off",
"consistent-return": "off",
"no-unused-expressions": "off",
"no-restricted-syntax": "off",
"react/no-array-index-key": "off",
"jsx-a11y/anchor-is-valid": "off",
"react/destructuring-assignment": "off",
"jsx-a11y/label-has-associated-control": "off",
"eslint-disable-next-line jsx-a11y/anchor-is-valid": "off",
},
};
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
[![Contentstack](https://camo.githubusercontent.com/d24f513afa94a4a762533d54a0f590300dbd0413/68747470733a2f2f7777772e636f6e74656e74737461636b2e636f6d2f646f63732f7374617469632f696d616765732f636f6e74656e74737461636b2e706e67)](https://www.contentstack.com/)
[![Contentstack Logo](/public/contentstack-readme-logo.png)](https://www.contentstack.com/)


# Build a Starter Website with Next.js and Contentstack
Expand Down
5 changes: 2 additions & 3 deletions components/about-section-bucket.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable no-undef */
import React from "react";
import ReactHtmlParser from "react-html-parser";
import parse from "html-react-parser";

export default function AboutSectionBucket(props) {
const { sectionWithBuckets } = props;
Expand All @@ -13,7 +12,7 @@ export default function AboutSectionBucket(props) {

<div className="mission-section-content">
{bucket.title_h3 && <h3>{bucket.title_h3}</h3>}
{bucket.description && ReactHtmlParser(bucket.description)}
{bucket.description && parse(bucket.description)}
</div>
</div>
);
Expand Down
5 changes: 2 additions & 3 deletions components/archive-relative.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import Link from "next/link";
import ReactHtmlParser from "react-html-parser";
import parse from "html-react-parser";

export default function ArchiveRelative(props) {
const { blogs } = props;
Expand All @@ -12,7 +11,7 @@ export default function ArchiveRelative(props) {
<a>
<div>
<h4>{blog.title}</h4>
{ReactHtmlParser(blog.body.slice(0, 80))}
{parse(blog.body.slice(0, 80))}
</div>
</a>
</Link>
Expand Down
1 change: 0 additions & 1 deletion components/blog-banner.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable camelcase */
import React from "react";

export default function BlogBanner(props) {
Expand Down
9 changes: 2 additions & 7 deletions components/blog-section.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable react/prop-types */
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable no-undef */
/* eslint-disable react/no-array-index-key */
import React from "react";
import Link from "next/link";
import ReactHtmlParser from "react-html-parser";
import parse from "html-react-parser";

class BlogSection extends React.Component {
render() {
Expand Down Expand Up @@ -34,7 +29,7 @@ class BlogSection extends React.Component {
)}
<div className="featured-content">
{blog.title && <h3>{blog.title}</h3>}
{blog.body && ReactHtmlParser(blog.body.slice(0, 300))}
{blog.body && parse(blog.body.slice(0, 300))}
{blog.url && (
<Link href={blog.url} passHref>
<a className="blogpost-readmore">{"Read More -->"}</a>
Expand Down
1 change: 0 additions & 1 deletion components/card-section.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import Link from "next/link";

Expand Down
74 changes: 74 additions & 0 deletions components/devtools.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React from "react";
import dynamic from "next/dynamic";

const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });

function filterObject(inputObject) {
const unWantedProps = [
"uid",
"_version",
"ACL",
"_in_progress",
"created_at",
"created_by",
"updated_at",
"updated_by",
"publish_details",
];
for (const key in inputObject) {
unWantedProps.includes(key) && delete inputObject[key];
if (typeof inputObject[key] !== "object") {
continue;
}
inputObject[key] = filterObject(inputObject[key]);
}
return inputObject;
}

const DevTools = ({ response }) => {
const filteredJson = filterObject(response);
return (
<div
className="modal fade"
id="staticBackdrop"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabIndex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h2 className="modal-title" id="staticBackdropLabel">
Json Response
</h2>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
/>
</div>
<div className="modal-body">
{response ? (
<pre id="jsonViewer">
{response && (
<DynamicReactJson
src={filteredJson}
collapsed={1}
name="response"
enableClipboard={false}
/>
)}
</pre>
) : (
""
)}
</div>
</div>
</div>
</div>
);
};
export default DevTools;
9 changes: 4 additions & 5 deletions components/footer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import Link from "next/link";
import ReactHtmlParser from "react-html-parser";
import parse from "html-react-parser";

export default function Footer(props) {
const { footer } = props;
Expand All @@ -21,7 +20,7 @@ export default function Footer(props) {
<div className="col-half">
<nav>
<ul className="nav-ul">
{footer.navigation.link?.map(menu => (
{footer.navigation.link?.map((menu) => (
<li className="footer-nav-li" key={menu.title}>
<Link href={menu.href}>{menu.title}</Link>
</li>
Expand All @@ -31,7 +30,7 @@ export default function Footer(props) {
</div>
<div className="col-quarter social-link">
<div className="social-nav">
{footer.social.social_share?.map(social => (
{footer.social.social_share?.map((social) => (
<a
href={social.link.href}
title={social.link.title}
Expand All @@ -44,7 +43,7 @@ export default function Footer(props) {
</div>
</div>
<div className="copyright">
{footer.copyright && ReactHtmlParser(footer.copyright)}
{footer.copyright && parse(footer.copyright)}
</div>
</footer>
);
Expand Down
38 changes: 25 additions & 13 deletions components/header.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable jsx-a11y/label-has-for */
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import ReactHtmlParser from "react-html-parser";
import parse from "html-react-parser";

export default function Header(props) {
const { header } = props;
const router = useRouter();
return (
<header className="header">
{header.notification_bar.show_announcement ? (
<div className="note-div">
{ReactHtmlParser(header.notification_bar.announcement_text)}
</div>
) : (
""
)}
<div className="note-div">
{header.notification_bar.show_announcement ? (
parse(header.notification_bar.announcement_text)
) : (
<div style={{ visibility: "hidden" }}>Devtools section</div>
)}
<span
className="devtools"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop"
>
<img src="/devtools.gif" alt="dev tools icon" title="json preview" />
</span>
</div>
<div className="max-width header-div">
<div className="wrapper-logo">
<Link href="/" className="logo-tag" title="Contentstack">
Expand All @@ -35,10 +39,18 @@ export default function Header(props) {
</label>
<nav className="menu">
<ul className="nav-ul header-ul">
{header.navigation_menu?.map(list => (
{header.navigation_menu?.map((list) => (
<li key={list.label} className="nav-li">
<Link href={list.page_reference[0].url}>
<a className={router.pathname === list.page_reference[0].url ? "active" : ""}>{list.label}</a>
<a
className={
router.pathname === list.page_reference[0].url
? "active"
: ""
}
>
{list.label}
</a>
</Link>
</li>
))}
Expand Down
6 changes: 2 additions & 4 deletions components/hero-banner.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable eqeqeq */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import Link from "next/link";

Expand All @@ -12,13 +10,13 @@ export default function HeroBanner(props) {
background: banner.bg_color ? banner.bg_color : "",
}}
>
<div className={`${props.title == "about" ? "about" : "home"}-content`}>
<div className={`${props.title === "about" ? "about" : "home"}-content`}>
{banner.banner_title && (
<h1 className="hero-title">{banner.banner_title}</h1>
)}
{banner.banner_description ? (
<p
className={`hero-description ${props.title == "about"
className={`hero-description ${props.title === "about"
&& "about-desc"}`}
>
{banner.banner_description}
Expand Down
42 changes: 36 additions & 6 deletions components/layout.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-unused-expressions */
import React from "react";
import Head from "next/head";
import Header from "./header";
import Footer from "./footer";
import DevTools from "./devtools";

class Layout extends React.Component {
render() {
const {
header, footer, page, blogpost, children,
} = this.props;

const jsonObj = { header, footer };
page && (jsonObj.page = page);
blogpost && (jsonObj.blog_post = blogpost);

function metaData(seo) {
const metaArr = [];
for (const key in seo) {
Expand All @@ -29,6 +38,24 @@ class Layout extends React.Component {
href="https://fonts.googleapis.com/css?family=Inter&amp;display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossOrigin="anonymous"
referrerPolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossOrigin="anonymous"
/>
<meta
name="application-name"
content="Contentstack-Nextjs-Starter-App"
Expand All @@ -44,13 +71,16 @@ class Layout extends React.Component {
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" />
<meta name="theme-color" content="#317EFB" />
<title>Contentstack-Nextjs-Starter-App</title>
{this.props.seo && this.props.seo.enable_search_indexing
? metaData(this.props.seo)
{page.seo && page.seo.enable_search_indexing
? metaData(page.seo)
: null}
</Head>
{this.props.header ? <Header header={this.props.header} /> : ""}
<main className="mainClass">{this.props.children}</main>
{this.props.footer ? <Footer footer={this.props.footer} /> : ""}
{header ? <Header header={header} /> : ""}
<main className="mainClass">
{children}
{Object.keys(jsonObj).length && <DevTools response={jsonObj} />}
</main>
{footer ? <Footer footer={footer} /> : ""}
</>
);
}
Expand Down
2 changes: 0 additions & 2 deletions components/render-components.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* eslint-disable consistent-return */
/* eslint-disable react/no-array-index-key */
import React from "react";

import Section from "./section";
Expand Down
Loading

0 comments on commit ca0e246

Please sign in to comment.