From b23fc8f3d06b480e7632502a415715517f335752 Mon Sep 17 00:00:00 2001 From: bgoonz Date: Tue, 22 Mar 2022 21:32:35 +0000 Subject: [PATCH 1/2] update --- src/layouts/contact.js | 69 ---------------------------------------- src/layouts/home.js | 72 ------------------------------------------ src/layouts/index.js | 11 ------- src/layouts/notes.md | 2 -- src/layouts/page.js | 35 -------------------- src/layouts/post.js | 47 --------------------------- 6 files changed, 236 deletions(-) delete mode 100644 src/layouts/contact.js delete mode 100644 src/layouts/home.js delete mode 100644 src/layouts/index.js delete mode 100644 src/layouts/notes.md delete mode 100644 src/layouts/page.js delete mode 100644 src/layouts/post.js diff --git a/src/layouts/contact.js b/src/layouts/contact.js deleted file mode 100644 index 28e25b04bf..0000000000 --- a/src/layouts/contact.js +++ /dev/null @@ -1,69 +0,0 @@ -import _ from 'lodash'; -import React from 'react'; -import Footer from '../components/Footer'; -import FormField from '../components/FormField'; -import Header from '../components/Header'; -import { Layout } from '../components/index'; -import { htmlToReact, markdownify } from '../utils'; -export default class Contact extends React.Component { - render() { - const data = _.get(this.props, 'data'); - const config = _.get(data, 'config'); - const header = _.get(config, 'header'); - const page = _.get(this.props, 'page'); - const title = _.get(page, 'title'); - const subtitle = _.get(page, 'subtitle'); - const headerImage = _.get(page, 'img_path') ? _.get(page, 'img_path') : _.get(header, 'background_img'); - const markdownContent = _.get(page, 'markdown_content'); - const formId = _.get(page, 'form_id'); - const formAction = _.get(page, 'form_action'); - const formFields = _.get(page, 'form_fields'); - const submitLabel = _.get(page, 'submit_label'); - const formHoneypotInputId = formId + '-honeypot'; - const formHoneypotLabelId = formId + '-honeypot-label'; - const formHoneypotName = formId + '-bot-field'; - return ( - -
-
-
-
-
-

{title}

-
- {subtitle &&
{htmlToReact(subtitle)}
} -
- {markdownContent && markdownify(markdownContent)} -
-
- -
- - {_.map(formFields, (field, index) => ( - - ))} -
- -
- -
-
-
-
-
- - ); - } -} diff --git a/src/layouts/home.js b/src/layouts/home.js deleted file mode 100644 index 077916eb02..0000000000 --- a/src/layouts/home.js +++ /dev/null @@ -1,72 +0,0 @@ -import _ from 'lodash'; -import moment from 'moment-strftime'; -import React from 'react'; -import Footer from '../components/Footer'; -import Header from '../components/Header'; -import { Layout } from '../components/index'; -import { getPageUrl, Link, withPrefix } from '../utils'; -export default class Home extends React.Component { - renderPost(post, index, hasMoreLink, moreLinkText) { - const title = _.get(post, 'title'); - const thumbImage = _.get(post, 'thumb_img_path'); - const thumbImageAlt = _.get(post, 'thumb_img_alt', ''); - const excerpt = _.get(post, 'excerpt'); - const date = _.get(post, 'date'); - const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M'); - const formattedDate = moment(date).strftime('%B %d, %Y'); - const postUrl = getPageUrl(post, { withPrefix: true }); - return ( -
-
-

- {title} -

-
- Published on{' '} - -
-
- {thumbImage && ( - - {thumbImageAlt} - - )} - {excerpt && ( -
-

{excerpt}

-
- )} - {hasMoreLink && moreLinkText && ( -

- - {moreLinkText}

- )} -
- ); - } - render() { - const data = _.get(this.props, 'data'); - const config = _.get(data, 'config'); - const header = _.get(config, 'header'); - const headerImage = _.get(header, 'background_img'); - const page = _.get(this.props, 'page'); - const hasMoreLink = _.get(page, 'has_more_link'); - const moreLinkText = _.get(page, 'more_link_text'); - const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc'); - return ( - -
-
-
-
{_.map(posts, (post, index) => this.renderPost(post, index, hasMoreLink, moreLinkText))}
-
-
-
- - ); - } -} diff --git a/src/layouts/index.js b/src/layouts/index.js deleted file mode 100644 index 18b4c9a8f9..0000000000 --- a/src/layouts/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import contact from './contact'; -import home from './home'; -import page from './page'; -import post from './post'; -export { contact, home, page, post }; -export default { - contact, - home, - page, - post -}; diff --git a/src/layouts/notes.md b/src/layouts/notes.md deleted file mode 100644 index bc3e70ca37..0000000000 --- a/src/layouts/notes.md +++ /dev/null @@ -1,2 +0,0 @@ -can potentially delete this folder - diff --git a/src/layouts/page.js b/src/layouts/page.js deleted file mode 100644 index c94cea3afd..0000000000 --- a/src/layouts/page.js +++ /dev/null @@ -1,35 +0,0 @@ -import _ from 'lodash'; -import React from 'react'; -import Footer from '../components/Footer'; -import Header from '../components/Header'; -import { Layout } from '../components/index'; -import { htmlToReact, markdownify } from '../utils'; -export default class Page extends React.Component { - render() { - const data = _.get(this.props, 'data'); - const config = _.get(data, 'config'); - const header = _.get(config, 'header'); - const page = _.get(this.props, 'page'); - const title = _.get(page, 'title'); - const subtitle = _.get(page, 'subtitle'); - const headerImage = _.get(page, 'img_path') ? _.get(page, 'img_path') : _.get(header, 'background_img'); - const markdownContent = _.get(page, 'markdown_content'); - return ( - -
-
-
-
-
-

{title}

-
- {subtitle &&
{htmlToReact(subtitle)}
} - {markdownContent &&
{markdownify(markdownContent)}
} -
-
-
-
- - ); - } -} diff --git a/src/layouts/post.js b/src/layouts/post.js deleted file mode 100644 index 6f8fdd32c5..0000000000 --- a/src/layouts/post.js +++ /dev/null @@ -1,47 +0,0 @@ -import _ from 'lodash'; -import moment from 'moment-strftime'; -import React from 'react'; -import Footer from '../components/Footer'; -import Header from '../components/Header'; -import HeaderAlt from '../components/HeaderAlt'; -import { Layout } from '../components/index'; -import { htmlToReact, markdownify } from '../utils'; -export default class Post extends React.Component { - render() { - const data = _.get(this.props, 'data'); - const config = _.get(data, 'config'); - const header = _.get(config, 'header'); - const page = _.get(this.props, 'page'); - const hideHeader = _.get(page, 'hide_header'); - const title = _.get(page, 'title'); - const subtitle = _.get(page, 'subtitle'); - const headerImage = _.get(page, 'content_img_path') ? _.get(page, 'content_img_path') : _.get(header, 'background_img'); - const date = _.get(page, 'date'); - const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M'); - const formattedDate = moment(date).strftime('%B %d, %Y'); - const markdownContent = _.get(page, 'markdown_content'); - return ( - - {hideHeader ? :
} -
-
-
-
-

{title}

-
- Published on{' '} - -
-
- {subtitle &&
{htmlToReact(subtitle)}
} - {markdownContent &&
{markdownify(markdownContent)}
} -
-
-
-
- - ); - } -} From 2e1e285465ba2b734f2f504de4c982cefc7e9489 Mon Sep 17 00:00:00 2001 From: bgoonz Date: Tue, 22 Mar 2022 21:36:08 +0000 Subject: [PATCH 2/2] update --- notes/_SCRAp/components/ActionLink.js | 32 +++ notes/_SCRAp/components/CtaButtons.js | 24 +++ notes/_SCRAp/components/DocsMenu.js | 66 ++++++ notes/_SCRAp/components/DocsSubmenu.js | 25 +++ notes/_SCRAp/components/Footer.js | 161 +++++++++++++++ notes/_SCRAp/components/Header.js | 146 ++++++++++++++ notes/_SCRAp/components/Icon.js | 34 ++++ notes/_SCRAp/components/Layout.js | 89 +++++++++ notes/_SCRAp/components/SectionContent.js | 39 ++++ notes/_SCRAp/components/SectionCta.js | 34 ++++ notes/_SCRAp/components/SectionDocs.js | 57 ++++++ notes/_SCRAp/components/SectionGrid.js | 61 ++++++ notes/_SCRAp/components/SectionHero.js | 33 +++ notes/_SCRAp/components/Submenu.js | 27 +++ notes/_SCRAp/components/index.js | 46 +++++ .../docs/tutorials/react-class-2-func.md | 188 ++++++++++++++++++ 16 files changed, 1062 insertions(+) create mode 100644 notes/_SCRAp/components/ActionLink.js create mode 100644 notes/_SCRAp/components/CtaButtons.js create mode 100644 notes/_SCRAp/components/DocsMenu.js create mode 100644 notes/_SCRAp/components/DocsSubmenu.js create mode 100644 notes/_SCRAp/components/Footer.js create mode 100644 notes/_SCRAp/components/Header.js create mode 100644 notes/_SCRAp/components/Icon.js create mode 100644 notes/_SCRAp/components/Layout.js create mode 100644 notes/_SCRAp/components/SectionContent.js create mode 100644 notes/_SCRAp/components/SectionCta.js create mode 100644 notes/_SCRAp/components/SectionDocs.js create mode 100644 notes/_SCRAp/components/SectionGrid.js create mode 100644 notes/_SCRAp/components/SectionHero.js create mode 100644 notes/_SCRAp/components/Submenu.js create mode 100644 notes/_SCRAp/components/index.js create mode 100644 src/pages/docs/tutorials/react-class-2-func.md diff --git a/notes/_SCRAp/components/ActionLink.js b/notes/_SCRAp/components/ActionLink.js new file mode 100644 index 0000000000..8224d9458d --- /dev/null +++ b/notes/_SCRAp/components/ActionLink.js @@ -0,0 +1,32 @@ +import _ from 'lodash'; +import React from 'react'; +import { classNames, Link, withPrefix } from '../utils'; +import Icon from './Icon'; +export default class ActionLink extends React.Component { + render() { + let action = _.get(this.props, 'action', null); + return ( + + {_.get(action, 'style', null) === 'icon' && _.get(action, 'icon_class', null) ? ( + + + {_.get(action, 'label', null)} + + ) : ( + _.get(action, 'label', null) + )} + + ); + } +} diff --git a/notes/_SCRAp/components/CtaButtons.js b/notes/_SCRAp/components/CtaButtons.js new file mode 100644 index 0000000000..bb1b03723f --- /dev/null +++ b/notes/_SCRAp/components/CtaButtons.js @@ -0,0 +1,24 @@ +import _ from 'lodash'; +import React from 'react'; +import { classNames, Link, withPrefix } from '../utils'; +export default class CtaButtons extends React.Component { + render() { + let actions = _.get(this.props, 'actions', null); + return _.map(actions, (action, action_idx) => ( + + {_.get(action, 'label', null)} + + )); + } +} diff --git a/notes/_SCRAp/components/DocsMenu.js b/notes/_SCRAp/components/DocsMenu.js new file mode 100644 index 0000000000..29cf34b5e9 --- /dev/null +++ b/notes/_SCRAp/components/DocsMenu.js @@ -0,0 +1,66 @@ +import _ from 'lodash'; +import React from 'react'; +import { classNames, getPage, getPages, Link, pathJoin, withPrefix } from '../utils'; +import DocsSubmenu from './DocsSubmenu'; +export default class DocsMenu extends React.Component { + render() { + let site = _.get(this.props, 'site', null); + let page = _.get(this.props, 'page', null); + let root_docs_path = _.get( site, 'data.doc_sections.root_docs_path', null ); + let pageContextProps = this.props.pageContext.pages; + let root_page = getPage(pageContextProps, root_docs_path); + return ( + + ); + } +} diff --git a/notes/_SCRAp/components/DocsSubmenu.js b/notes/_SCRAp/components/DocsSubmenu.js new file mode 100644 index 0000000000..588027df61 --- /dev/null +++ b/notes/_SCRAp/components/DocsSubmenu.js @@ -0,0 +1,25 @@ +import _ from 'lodash'; +import React from 'react'; +import { classNames, Link, withPrefix } from '../utils'; +export default class DocsSubmenu extends React.Component { + render() { + let child_pages = _.get(this.props, 'child_pages', null); + let page = _.get(this.props, 'page', null); + return ( +
    + {_.map(child_pages, (child_page, child_page_idx) => { + return ( +
  • + { _.get( child_page, 'frontmatter.title', null ) } +
    • + ); + })} +
+ ); + } +} diff --git a/notes/_SCRAp/components/Footer.js b/notes/_SCRAp/components/Footer.js new file mode 100644 index 0000000000..916617e9b0 --- /dev/null +++ b/notes/_SCRAp/components/Footer.js @@ -0,0 +1,161 @@ +import _ from 'lodash'; +import React from 'react'; +import { htmlToReact } from '../utils'; +import ActionLink from './ActionLink'; + + +export default class Footer extends React.Component { + render() { + return ( +
+
+
+
+ +
+ + + + + + + + + +
+
+ + + + + + + + +
+ + index + + + + sitemap + + + + advanced + +
+
+
+ + + + + + + +
+
+ + search engine + + + by + freefind + + +
+ + Save to PDF + +
+ + webdevhub logo + +
+
+ +
+

+ {_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null) && ( + {htmlToReact(_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null))} + )} + {_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.links', null), (action, action_idx) => ( + + ))}{' '} +

+ {_.get(this.props, 'pageContext.site.siteMetadata.footer.has_social', null) && ( +
+ {_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.social_links', null), (action, action_idx) => ( + + ))}{' '} +
+ )}{' '} +
+
+
+ ); + } +} diff --git a/notes/_SCRAp/components/Header.js b/notes/_SCRAp/components/Header.js new file mode 100644 index 0000000000..84cfa0874e --- /dev/null +++ b/notes/_SCRAp/components/Header.js @@ -0,0 +1,146 @@ +import _ from 'lodash'; +import React from 'react'; +import { classNames, Link, withPrefix } from '../utils'; +import ActionLink from './ActionLink'; +import Submenu from './Submenu'; +export default class Header extends React.Component { + render() { + return ( +
+
+
+
+
+ { _.get( this.props, 'pageContext.site.siteMetadata.header.logo_img', null ) ? ( +

+ + { + +

+ ) : ( +

+ + { _.get( this.props, 'pageContext.site.siteMetadata.header.title', null ) } + +

+ ) } +
+ { _.get( this.props, 'pageContext.site.siteMetadata.header.has_nav', null ) && ( + + + + + ) } +
+
+
+ <> +
+
+
+
+ +
+ 🔎 +
+
+
+
+