Revert "Merge pull request #3 from RaspberryProgramming/PreRelease"

This reverts commit 938e41d983, reversing
changes made to 7be49dd45f.

public/api/articles.json

@@ -11,12 +11,6 @@
             "title": "Hiding Data on Linux",
             "desc": "Showing you how to hide files within a file in linux.",
             "contents":"*Steganography*Steganography is the art or practice of concealing a message, image or file within another message, image or file. There are many techniques to perform steganography, one of which is to hide messages on physical paper in the physical world. Another technique involves hiding messages in digital images or digital data, also called digital messages. Images are the typical victim used to hide information. Social steganography is when messages are hidden in the title and context of a video or image. Names or words may be misspelled that are popular in a given time to suggest alternative meanings, or pictures can be traced by paint or drawing tools. When information is hidden in telecommunication networks, this is called network steganography. Today steganography is mostly done on computers with tools such as steghide, stegstudio and more. One simple way of doing so is on linux, by combining a zip file and an image in order to hide the in the back part of the image file.*Hiding Files Inside of a JPG File* You can first download an image that you'd like to use. Next, you'll create a file to hide. You can use anything, given that it can be hidden within a zip. I'm using a text file called steg.txt. Next, you'll want to compress the file. You can do this in the terminal by running the following. `zip zipfile.zip steg.txt` Now that you have a zip file you can now hide the file. We'll do this by using the cat command. This command will combine the data within two files, and allow us to create a new file with the data concatenated. Run the following command using image.jpg as our image file and zipfile as the zip we just created. If you have a file with a different file extension (I.E. .jpg, .png) change StegFile.jpg to reflect this change in addition to the original image file. `cat image.jpg zipfile.zip > StegFile.jpg` Now that everything is combined, you can attempt to view the StegFile.jpg image to see if you've correctly combined the two files. If you'd like to get the files out of the zip/steg file, you can then run the following on the image. `unzip StegFile.jpg` As you can see, it just unzipped the steg.txt from the image and placed it in the current directory. *Conclusion* Steganography is an interesting concept, especially revolving computer forensics and can be used to hide files and make interesting puzzles. *Sources* ~ https://www.merriam-webster.com/dictionary/steganography ~ ~ https://en.wikipedia.org/wiki/Steganography#Techniques ~ ~ http://steghide.sourceforge.net/ ~ ~ http://stegstudio.sourceforge.net/ ~"
-        },
-        {
-            "id": 2,
-            "title": "(POC) Cracking Wifi using Phone Numbers",
-            "desc": "Showing you how to crack wifi passwords using phone numbers.",
-            "contents":"*Introduction*This article is a proof of concept and should show you why it's dangerous to use your phone number as your wifi password. Since the introduction of wifi, people have tried breaking into and exploiting it. WEP an old edition of wifi password security was a very weak method and could be easily broken just by sniffing wifi traffic coming to/from the AP. Since the introduction of WPA security, cracking has become more and more difficult. Although, if you can find the right password, one could potentially crack the login for wireless networks. This is done by sniffing for a specific traffic containing an EAPoL or Extensible Authentication Protocol over Lan. This essentially contains an hashed version of the wifi password. Using this we can then bruteforce the password and crack the password. As found in another article (see references) many people use their phone numbers as their wifi passwords. This can make it specifically easy to crack since your phone number is often related to your location through your area code. For example, if I was living in New York City, my area code would be either 212 or 718. If the wifi's password hash was sniffed somewhere in NYC, every phone number could be stored in a file around 200MB in size. With the technology of today, that password would be cracked in a matter of minutes if you used a phone number as your password. *Prerequisits*~Linux~ ~Wifi Card~ ~git~ ~python3~ *Creating a Phone List* In order to create the list of phone numbers you'll need to use a tool that I created. You can grab the files by cloning the repository `git clone https://github.com/RaspberryProgramming/phone-wordlist-generator` Enter the folder by running `cd phone-wordlsit-generator` Using this you can generate every phone number in your area code and put it into a file. Replacing AREA with your area code run `python3 main.py --staticnum AREA` You will then find the phone numbers in a file called phones.list *Capturing Wifi Hashes* You might be wondering, how would I even get these password hashes? Theres a simple tool called aircrack-ng that gives you a suite of tools that you'll need. If you're running Ubuntu Linux you can run `sudo apt install aircrack-ng` To install all of the necessary tools. On Arch/Manjaro run `sudo pacman -Sy aircrack-ng-git` Now that you've got aircrack installed, you can now set your wifi card in monitor mode. Run `ifconfig`. You'll get something similar to the following output `wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500\ninet 192.168.0.2  netmask 255.255.255.0  broadcast 192.168.0.255\nether db:3d:4d:b5:ff:12  txqueuelen 1000  (Ethernet)\nRX packets 130672  bytes 152955605 (152.9 MB)\nRX errors 0  dropped 0  overruns 0  frame 0\nTX packets 40063  bytes 8409394 (8.4 MB)\nTX errors 0  dropped 0 overruns 0  carrier 0  collisions 0`"
         }
     ]
 }

src/components/App.js

@@ -4,7 +4,6 @@ import "./css/App.css";
 import Navigation from './Navigation';
 import Github from './Github';
 import Articles from './Articles';
-import ArticleEditor from './ArticleEditor';
 import About from './About';
 import Intro from './Intro';
 
@@ -19,7 +18,6 @@ const App = (props) => {
             <Route path="/github" render={(props) => <Github {...props} />} />
             <Route path="/about" component={About} />
             <Route path="/articles" component={Articles} />
-            <Route path="/articleEditor" component={ArticleEditor} />
           </Switch>
         </div>
       </div>

src/components/Article.js

@@ -1,49 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
-    const [show, setShow] = useState("");
-    const [currArticle, setCurrArticle] = useState("");
-
-    useEffect(()=>{
-        if (currArticle === ""){ // If no articles have been opened
-            if (show === "") {
-                // Set the current article and initiate the open animation
-                setCurrArticle(article);
-                setShow("open");
-                
-                // Once the animation runs, open the entire article
-                setTimeout(() =>{
-                    setShow("show");
-                }, 1024)
-            }
-
-        } else if (currArticle !== article) { // If we've changed articles
-            // Change currArticle to the actual current article and initiate close animation
-            setCurrArticle(article);
-            setShow("close");
-
-            // Step through the close animation, open animation, and fully opening the article
-            setTimeout(()=>{
-                setShow("");
-
-                setTimeout(()=>{
-
-                    setShow("open");
-
-                    setTimeout(() =>{
-                        setShow("show");
-                    }, 1024);
-                }, 1024);
-            }, 24);
-        }
-    }, [currArticle, article, show]);
-    
     let linkProcessor = (text) => {
         /**
          * Given some text, processes and returns jsx with any link represented as an anchor
          */
+
         let output = [""]; // Stores all text in a list
         let loc = 0; // Stores the current location in output that we're working with
 
@@ -72,41 +36,6 @@ const Article = ({article}) => {
         return output;
     };
 
-    let newLineProcessor = (text) => {
-        /**
-         * Given some text, processes and returns jsx with line breaks
-         */
-        let tmp;
-        let output = [""]; // Stores all text in a list
-        let loc = 0; // Stores the current location in output that we're working with
-        for (let i = 0; i < text.length; i++) { // Iterate through the entire text string
-            if (!React.isValidElement(text[i])) {
-                tmp = [""];
-                loc = 0;
-                for (let j = 0; j < text[i].length; j++){
-                    
-                    if (text[i].slice(j, j+1) === "\n"){ // slice from i to 4 chars plus and check for http
-                        if (tmp[loc] !== "") { // if the current output location isn't empty, increment loc
-                            loc++;
-                        }
-                        tmp[loc] = <br key={i+j}/>;
-                        tmp[++loc] = "";
-
-                    } else {
-                        // Append current char to output
-                        tmp[loc] += text[i][j];
-
-                    }
-                }
-                tmp[++loc] = "";
-            }
-            output.push(tmp)
-        }
- 
-         // Return the output
-         return output;
-    };
-
     let articleFormatter = (text) => {
         let output = []; // Used to store separate formatted text
         let type = []; // Parallel to output list to signify format type
@@ -114,7 +43,6 @@ const Article = ({article}) => {
         let tick=false; // used to check if we're currently in formatted text.
         let delimiters = ['', '`', '*', '~']; // Denotes characters used to format
 
-        
         for (let i = 0; i < text.length; i++) { // Iterate through input
             if (delimiters.indexOf(text[i]) !== -1) { // Detect Code Delimiter
                 
@@ -155,7 +83,6 @@ const Article = ({article}) => {
         return [...output.keys()].map((i)=>{ // Format text and return as jsx
             
             let text = linkProcessor(output[i]); // Process links
-            text = newLineProcessor(text);
             
             if (type[i] === 0){ // Return default text type
 
@@ -182,7 +109,7 @@ const Article = ({article}) => {
     };
 
     return (
-        <div className={"article " + show}>
+        <div className="article">
             <Theater
             title={article.title}
             description={article.desc}

src/components/ArticleEditor.js

@@ -1,23 +0,0 @@
-import React, { useState } from 'react';
-import Article from './Article';
-import "./css/ArticleEditor.css";
-
-const ArticleEditor = (props) => {
-    const [content, setContent] = useState("Hello World");
-
-    let article = {
-        "id":"0",
-        "title": "Article Editor",
-        "desc":"This is a place to edit articles",
-        "contents": content
-    };
-
-    return (
-    <div className="ArticleEditor">
-        <Article article={article}/>
-        <input type="text" onInput={e=>{setContent(e.target.value)}}/>
-    </div>
-    );
-};
-
-export default ArticleEditor;

src/components/css/ArticleEditor.css

@@ -1,22 +0,0 @@
-.ArticleEditor input {
-    width:100%;
-    height: 35vh;
-    border-style: solid;
-    border-color: lightgray;
-    border-radius: 2px;
-    border-width: 2px;
-    padding: 0.4em 0.4em 0.4em 0;
-    text-align: left;
-}
-
-.article .open {
-    max-height:100vh;
-}
-
-.article .Close {
-    max-height:100vh;
-}
-
-.article {
-    max-height:100vh;
-}

src/components/css/Articles.css

@@ -3,24 +3,6 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    max-height:0;
-    overflow: hidden;
-    transition: max-height 1s ease;
-
-}
-
-.article.open {
-    max-height:100vh;
-    transition: max-height 1s ease;
-}
-
-.article.close {
-    max-height:100vh;
-}
-
-.article.show {
-    max-height:none;
-
 }
 
 .article .content {

src/components/css/Theater.css

@@ -15,7 +15,7 @@
 
 .theater-bg {
     
-    height: inherit;
+    height: 100%;
     width:100%;
     background-size: cover;
     background-image: url('../../img/background.webp');

src/components/subcomponents/Listing.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import '../css/Listing.css';
 
 const Listing = (props) => {
@@ -12,12 +11,12 @@ const Listing = (props) => {
      */
     return (
         <div className="listing">
-            <Link to={props.link}>
+            <a href={props.link}>
                 <div className="title">{props.title}</div>
                 <div className="content">
                     {props.children}
                 </div>
-            </Link>
+            </a>
         </div>
     );    
 };