dynamic blogs

2020-07-27 18:58:34 +05:30
parent ce2e18f3d7
commit a1f9633830
7 changed files with 115 additions and 34 deletions
@@ -1,6 +1,28 @@
-import React from 'react';
-
+import React from "react"
+import { latestBlogs } from "../utils/workflows"
+import links from "../constants/page-links"
+import { isMediumUsernameVaid } from "../utils/validation"
 const Addons = (props) => {
+    const blogPostPorkflow = () => {
+        let payload = {
+            dev: {
+                show: props.data.devDynamicBlogs,
+                username: props.social.dev,
+            },
+            medium: {
+                show: props.data.mediumDynamicBlogs,
+                username: props.social.medium,
+            }
+        }
+        var actionContent = latestBlogs(payload);
+        var tempElement = document.createElement('a');
+        tempElement.setAttribute('href', 'data:text/yaml;charset=utf-8,' + encodeURIComponent(actionContent));
+        tempElement.setAttribute('download', 'blog-post-workflow.yml');
+        tempElement.style.display = 'none';
+        document.body.appendChild(tempElement);
+        tempElement.click();
+        document.body.removeChild(tempElement);
+    }
    return (
        <div className="section">
            <div className="section-title">Add-ons</div>
@@ -16,6 +38,27 @@ const Addons = (props) => {
                        onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
                </label>
            </div>
+            <div className="checkbox">
+                <label htmlFor="dev-dynamic-blogs" className="checkboxLabel">
+                    <input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
+                        onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (Github Action)
+                </label>
+            </div>
+            <div className="checkbox">
+                <label htmlFor="medium-dynamic-blogs" className="checkboxLabel">
+                    <input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
+                        onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (Github Action)
+                </label>
+            </div>
+
+            {(props.data.devDynamicBlogs && props.social.dev) || (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameVaid(props.social.medium)) ?
+                <div className="workflow">
+                    <div>
+                        download
+                        <span onClick={blogPostPorkflow} role="button" tabIndex="0" style={{ cursor: 'pointer', color: '#002ead' }}> blog-post-workflow.yml</span> file(learn
+                        <a href={links.addons} target="blank" style={{ color: '#002ead' }}> how to setup</a>)
+                    </div>
+                </div> : ''}
        </div>
    )
 }
@@ -1,5 +1,6 @@
 import React from 'react';
-import {icons, skills } from '../constants/skills';
+import { isMediumUsernameVaid } from '../utils/validation'
+import { icons, skills } from '../constants/skills';

 const Markdown = (props) => {
    const Title = (props) => {
@@ -60,7 +61,7 @@ const Markdown = (props) => {
    }
    const isSocial = (social) => {
        return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow
-            || social.linkedin || social.kaggle || social.instagram || social.fb || social.dribbble || social.behance ||social.medium ||social.youtube );
+            || social.linkedin || social.kaggle || social.instagram || social.fb || social.dribbble || social.behance || social.medium || social.youtube);
    }
    const DisplaySkills = (props) => {
        const listChosenSkills = [];
@@ -71,6 +72,16 @@ const Markdown = (props) => {
        });
        return listChosenSkills.length > 0 ? `<p align="left">${listChosenSkills.join(' ')}</p>` : '';
    }
+    const DisplayDynamicBlogs = (props) => {
+        if (props.show) {
+            return (<>{`### Blogs posts`}
+                <br />
+                {`<!-- BLOG-POST-LIST:START -->`}
+                <br />
+                {`<!-- BLOG-POST-LIST:END -->`}<br /> <br /></>)
+        }
+        return '';
+    }
    return (
        <div id="markdown-content">
            <><Title prefix={props.prefix.title} title={props.data.title} /></>
@@ -87,6 +98,8 @@ const Markdown = (props) => {
            <><DisplayWork prefix={props.prefix.contact} project={props.data.contact} /></>
            <><DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /></>

+            <><DisplayDynamicBlogs show={(props.data.devDynamicBlogs && props.social.dev) ||
+                (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameVaid(props.social.medium))} /></>
            <><DisplaySkills skills={props.skills} /></>
            <><GithubStats show={props.data.githubStats} github={props.social.github} /></>
            {isSocial(props.social) ? `<p align="center">` : ''} <br />
@@ -107,13 +120,13 @@ const Markdown = (props) => {
            <><DisplaySocial base='https://fb.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg'
                username={props.social.fb} /></>
            <><DisplaySocial base='https://instagram.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg'
-                username={ props.social.instagram } /></>
+                username={props.social.instagram} /></>
            <><DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg'
-                username={ props.social.dribbble } /></>
+                username={props.social.dribbble} /></>
            <><DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg'
-                username={ props.social.behance } /></>
+                username={props.social.behance} /></>
            <><DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg'
-                username={ props.social.medium } /></>
+                username={props.social.medium} /></>
            <><DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg'
                username={props.social.youtube} /></>
            {isSocial(props.social) ? `</p>` : ''}
@@ -58,7 +58,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
-          feed_list: "https://dev.to/feed/rahuldkjain, https://medium.com/@rahuldkjain"
+          feed_list: "https://dev.to/feed/rahuldkjain, https://medium.com/feed/@rahuldkjain"
 ```

 - Replace the above url list with your own rss feed urls. See [popular-sources](#popular-sources) for a list of common RSS feed urls.
@@ -380,7 +380,11 @@ a {
  border-style: solid;
  border-color: transparent var(--grey-90) transparent transparent;
 }
-
+.workflow {
+  margin-left: 2%;
+  padding: 1%;
+  background: var(--grey-05);
+}
@media only screen and (max-width: 1199px) {
  .section-title {
    font-size: 18px;
@@ -455,4 +459,7 @@ a {
  .warning {
    font-size: 10px;
  }
+  .workflow {
+    font-size: 12px;
+  }
 }
@@ -15,8 +15,7 @@ import Footer from '../components/footer';
 import './index.css'
 import { ArrowLeftIcon, CopyIcon, DownloadIcon, EyeIcon, CheckIcon, MarkdownIcon } from '@primer/octicons-react';
 import SEO from '../components/seo';
-import { isGithubUsernameValid } from '../utils/validation';
-import { latestBlogs } from '../utils/workflows';
+import { isGithubUsernameValid, isMediumUsernameVaid } from '../utils/validation';
 const IndexPage = () => {
  const [prefix, setPrefix] = useState({
    title: "Hi 👋, I'm",
@@ -42,6 +41,8 @@ const IndexPage = () => {
    funFact: '',
    visitorsBadge: false,
    githubStats: false,
+    devDynamicBlogs: false,
+    mediumDynamicBlogs: false,
  });
  const [link, setLink] = useState({
    currentWork: '',
@@ -140,9 +141,6 @@ const IndexPage = () => {
    trimDataValues(data, setData);
    trimDataValues(social, setSocial);
    trimDataValues(link, setLink);
-    // if (social.dev) {
-    //   latestBlogs(social.dev);
-    // }
    resetCopyMarkdownButton();
    if (data.visitorsBadge || data.githubStats) {
      if (social.github && isGithubUsernameValid(social.github)) {
@@ -265,12 +263,18 @@ const IndexPage = () => {
        <Work prefix={prefix} data={data} link={link} handlePrefixChange={handlePrefixChange} handleLinkChange={handleLinkChange} handleDataChange={handleDataChange} />
        <Skills skills={skills} handleSkillsChange={handleSkillsChange} />
        <Social social={social} handleSocialChange={handleSocialChange} />
-        <Addons data={data} handleCheckChange={handleCheckChange} />
+        <Addons data={data} social={social} handleCheckChange={handleCheckChange} />
        <div className="section">
          {(data.visitorsBadge || data.githubStats) && !social.github ?
            <div className="warning">* Please add github username to use these add-ons</div> : ''}
          {social.github && !isGithubUsernameValid(social.github) ?
            <div className="warning">* Github username is invalid, please add a valid username</div> : ''}
+          {social.medium && !isMediumUsernameVaid(social.medium) ?
+            <div className="warning">* Medium username is invalid, please add a valid username (with @)</div> : ''}
+          {data.mediumDynamicBlogs && !social.medium ?
+            <div className="warning">* Please add medium username to display latest blogs dynamically</div> : ''}
+          {data.devDynamicBlogs && !social.dev ?
+            <div className="warning">* Please add dev.to username to display latest blogs dynamically</div> : ''}
        </div>
        <div className="submit">
          <div className="button generate" tabIndex="0" role="button" onClick={handleGenerate}>Generate README</div>
@@ -2,5 +2,11 @@ const isGithubUsernameValid = (username) => {
    var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
    return pattern.test(username)
 }
+const isMediumUsernameVaid = (username) => {
+    if (username) {
+        return username[0] === '@'
+    }
+    return true
+}

-export {isGithubUsernameValid};
+export { isGithubUsernameValid, isMediumUsernameVaid };
@@ -1,20 +1,28 @@
-const latestBlogs = (devUsername) => {
-    let rssFeed = 'https://dev.to/feed/' + devUsername
-    let data = `
-        name: Latest blog post workflow
-        on: 
-            schedule:
-                - cron: '0 * * * *'
-        jobs: 
-            update-readme-with-blog: 
-                name: Update this repo's README with latest blog posts
-                runs - on: ubuntu - latest
-                steps: 
-                    - uses: actions / checkout@v2
-                    - uses: gautamkrishnar / blog - post - workflow@master
-                      with: 
-                        max_post_count: "4",
-                        feed_list: "${rssFeed}"`;
+import { isMediumUsernameVaid } from "../utils/validation"
+
+const latestBlogs = (payload) => {
+    let rssFeed = ''
+    if (payload.dev.show && payload.dev.username && payload.medium.show && payload.medium.username && isMediumUsernameVaid(payload.medium.username)) {
+        rssFeed = 'https://dev.to/feed/' + payload.dev.username + ', https://medium.com/feed/' + payload.medium.username
+    } else if(payload.dev.show && payload.dev.username) {
+        rssFeed = 'https://dev.to/feed/' + payload.dev.username
+    } else {
+        rssFeed = 'https://medium.com/feed/' + payload.medium.username
+    }
+    let data = `name: Latest blog post workflow
+on: 
+    schedule:
+        - cron: '0 * * * *'
+jobs: 
+    update-readme-with-blog: 
+        name: Update this repo's README with latest blog posts
+        runs - on: ubuntu - latest
+        steps: 
+            - uses: actions / checkout@v2
+            - uses: gautamkrishnar / blog - post - workflow@master
+              with: 
+                max_post_count: "4",
+                feed_list: "${rssFeed}"`;

    return data
 }