{"data":{"site":{"siteMetadata":{"title":"Developerayo","author":"Shodipo Ayomide"}},"markdownRemark":{"id":"072eed8e-eb04-57b5-aa14-6a36030abd5e","excerpt":"Most of us have been there: experiencing the point where the content of your article on your blog get’s to be copied and reused by someone else on their own…","html":"

\n

Most of us have been there: experiencing the point where the content of your article on your blog get’s to be copied and reused by someone else on their own blog tagged to their name and zero credit to the writer/owner, the word for this is PLAGIARISM, now with the help of a simple css element and small bits of react, you can fix that.

\n

Here is a tweet (#thread) from Prosper Otemuyiwa about his plagiarism experience on one of his articles.

\n

Do something today that your future self will thank you for. Might be for yourself, family or community.

A few days ago I wanted do something in @vuejs & I googled as usual. I came across an article and started reading, and it was really making sense until I got to....

— Prosper Otemuyiwa (@unicodeveloper) June 25, 2019
\n

Continue reading thread here

\n
\n
Table of Contents\n- Prerequisites\n- Installing create-react-app\n- CodeSandbox\n- Setting up\n- Deploy it to Zeit Now\n- Conclusion
\n

Prerequisites

\n

Most of us have been there: experiencing the point where the content of your article on your blog gets to be copied and reused by someone else on their blog tagged to their name and zero credit to the writer/owner, the word for this is PLAGIARISM, now with the help of a simple CSS element and small bits of react, you can fix that.

\n
To create a new React project you’ll need
\n\n
So as to enable pushing your code to GitHub you’ll need
\n\n
For deployment, you’ll have to install
\n\n

Installing create-react-app

\n

Let’s start with installing create-react-app

\n
$ npx create-react-app safeguard-content
\n

CodeSandbox

\n

But in this case study I would be building this simple feature on CodeSandbox

\n

Start by visiting codesandbox.io, sign up/login with GitHub, once that is done you would be redirected to your dashboard then click Create Sandbox, you’ll get to have five tabs click on the one that says CLIENT TEMPLATES under that list you’ll file react as a client template, click it.

\n

\n

Once created, you will get a demo app in ReactJS.

\n

Setting up

\n

Next up, we will setup our ReactJS app with some HTML tags.

\n
import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport \"./styles.css\";\n\nfunction App() {\n   return (\n\t<div className=\"App\">\n\t  <h1>Hello Developer 🔥🔥🔥🔥</h1>\n\t  <h2>Start editing to see some magic happen!😄🔥</h2>\n\t  <h3>Hehehe! sorry, you can't 😅😎🔥🔥</h3>\n          <h4>But you can edit this</h4>\n      </div>\n\t);\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(<App />, rootElement);
\n
\n

\n

In the code above you can see the simple output in the GIF below, and you can see in line 4 that I am trying to import a style.css file.

\n

Next, let’s write some CSS

\n
.App {\n  font-family: sans-serif;\n  text-align: center;\n}\n\nh1 {\n  user-select: none;\n}\n\nh2 {\n  user-select: none;\n}\n\nh3 {\n  user-select: none;\n}
\n

In my index.js file I posted earlier I created three tags under the app function which are <h1>, <h2> <h3> & <h4>

\n
<h1>Hello Developer 🔥🔥🔥🔥</h1>\n<h2>Start editing to see some magic happen!😄🔥</h2>\n<h3>Hehehe! sorry, you can't 😅😎🔥🔥</h3>\n<h4>But you can edit this</h4>
\n

Which are under a function name app and className set as App, ref as .App in css

\n
function App() {\n   return (\n     <div className=\"App\">
\n

\n
\n

In the GIF above, the first three texts cannot be selected because I used a CSS element called user-select and the attribute set as none which automatically disable Copying with mouse and Ctrl + A also.

\n

The user-select element with the attribute as none which was called for in our style.css and was attached to the HTML tags we declared in our react code in index.html which was referenced above. The as one could be selected because we did not attach a CSS element to the <h4> tag.

\n

Deploy it to Zeit Now

\n

First, we need to create a now.json file in our main directory, once done add the code below in it.

\n
{\n  \"version\": 2,\n  \"name\": \"Safeguard Content\",\n  \"alias\": \"safeguard-content.now.sh\",\n  \"builds\": [\n    {\"src\": \"package.json\", \"use\": \"@now/static-build\", \"config\": {\"distDir\": \"build\"}}\n  ]\n}
\n

ZEIT NOW owns two versions which are Version 1 & Version 2 and in this case, we are using version 2 "version": 2. We are setting the name of our app as Safeguard Content.

\n

It is a best practice to always alias your domain to a particular one so you do not get a weird link at deployment, here our codebase has been aliased to safeguard-content.now.sh.

\n

For builds, we declared a now-build script in our package.json file under scripts to build our react app on the new server.

\n
 \"scripts\": {\n    ...\n    \"now-build\": \"react-scripts build\"\n  }
\n

Now that that is declared we would be rendering our app statically using the Zeit Now static build @now/static-build.

\n

Once that is done, we need to deploy to a new repo on GitHub

\n

\n

Look at the left-hand side of the repo, click the GitHub favicon and it gives you a second-half screen, put in your desired repo name, mine is safeguard-content, once written, create a repo. If you visit your GitHub profile you should find your repo there.

\n

Visit your Zeit dashboard and you will find your deployed site there.

\n

\n

You can go to https://safeguard-content.now.sh/ and check it.

\n

Conclusion

\n

Having your content copied and no credit given to you as the initial writer is sad, and this is a way out, You do not necessarily need to deploy to Zeit Now, you can easily also deploy to Netlify or other services you use.

\n

I hope you found this tutorial helpful and will be able to secure your blog post, You can find a full source of the project here on GitHub and CodeSandbox here

\n

Like this article? Follow @developerayo on Twitter.

","timeToRead":5,"frontmatter":{"title":"Safeguard your blog content in Reactjs and CSS","date":"November 06, 2019","description":"hehehe, I dont know if this shit would work but let's do it!! Curious about how to safeguard your blog content in your ReactJS app using CSS? You are about to find out!"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/safeguard-your-blog-content-in-reactjs-and-css/","previous":{"fields":{"slug":"/unstack-2019-conference-recap/"},"frontmatter":{"title":"unStack 2019 event recap; All the announcements that matter"}},"next":null}}