v1.0.5

- NPM Preparations. - Form Textarea width change. - Docs changes.
SavanDev · Feb 24, 2020 · e7e35c9 · e7e35c9
1 parent 0996fa0
commit e7e35c9
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,4 @@
-<div align=center>
-<img src="./src/img/logo.svg" width="256px" />
-</div>
+# Cleanify Design
 
 HTML, CSS & JS personal framework.
 

diff --git a/dist/css/cleanify-dark.css b/dist/css/cleanify-dark.css
diff --git a/dist/css/cleanify.css b/dist/css/cleanify.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cleanify-design",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "HTML, CSS & JS personal framework",
   "homepage": "https://savandev.github.io/cleanify-design/",
   "repository": "https://github.com/SavanDev/cleanify-design.git",
@@ -14,8 +14,7 @@
     "start": "gulp watch"
   },
   "dependencies": {
-    "rfs": "^8.0.4",
-    "sass": "^1.22.5"
+    "rfs": "^8.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",
@@ -42,7 +41,8 @@
     "react-scripts": "3.0.1",
     "typescript": "3.5.3",
     "webpack-cli": "^3.3.7",
-    "webpack-stream": "^5.2.1"
+    "webpack-stream": "^5.2.1",
+    "sass": "^1.22.5"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -61,6 +61,7 @@
   },
   "files": [
     "dist/{css,js}/*.{css,js}",
-    "scss/**/*.scss"
+    "scss/**/*.scss",
+    "js/**/*.js"
   ]
 }
diff --git a/public/css/cleanify-dark.css b/public/css/cleanify-dark.css
diff --git a/public/css/cleanify.css b/public/css/cleanify.css
diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link id="cleanifyCss" rel="stylesheet" href="./css/cleanify.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dark.min.css">
-    <title>Cleanify Design</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script src="./js/cleanify.js"></script>
-  </body>
-</html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link id="cleanifyCss" rel="stylesheet" href="%PUBLIC_URL%/css/cleanify.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dark.min.css">
+        <title>Cleanify Design</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script src="%PUBLIC_URL%/js/cleanify.js"></script>
+        <script type="text/javascript" id="cookiebanner"
+            src="https://cdn.jsdelivr.net/gh/dobarkod/[email protected]/dist/cookiebanner.min.js"></script>
+    </body>
+</html>
diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -63,5 +63,6 @@ button {
 textarea {
     @include formBasis();
     padding: 1.5rem;
-    max-width: 100%;
+    width: 100%;
+    resize: none;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,8 +14,8 @@ const App: React.FC = () => {
     <div id="app">
       <Navbar/>
       <Switch>
-        <Route path="/download" component={Download} />
-        <Route path="/docs" component={Docs} />
+        <Route path={process.env.PUBLIC_URL + "/download"} component={Download} />
+        <Route path={process.env.PUBLIC_URL + "/docs"} component={Docs} />
         <Route component={Home} />
       </Switch>
       <footer>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -21,10 +21,10 @@ class Navbar extends React.Component<any, INavbar> {
     render() {
         return (
             <nav>
-                <Link to ="/" className="navbar-title">Cleanify Design</Link>
+                <Link to ={process.env.PUBLIC_URL + "/"} className="navbar-title">Cleanify Design</Link>
                 <ul className="navbar-menu">
-                    <li><Link to ="/download"><FontAwesomeIcon icon="download" /> Download</Link></li>
-                    <li><Link to ="/docs"><FontAwesomeIcon icon="book" /> Documentation</Link></li>
+                    <li><Link to ={process.env.PUBLIC_URL + "/download"}><FontAwesomeIcon icon="download" /> Download</Link></li>
+                    <li><Link to ={process.env.PUBLIC_URL + "/docs"}><FontAwesomeIcon icon="book" /> Documentation</Link></li>
                 </ul>
                 <ul className="navbar-right-menu">
                     <li id="version">v{ packageJson.version }</li>

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faDownload, faBook, faLayerGroup, faLaptop, faBox, faBoxes, faGavel } from '@fortawesome/free-solid-svg-icons';
 
-const hashHistory = require('history').createHashHistory({ basename: process.env.PUBLIC_URL + '/' });
-
 library.add(faDownload, faBook, faLayerGroup, faLaptop, faBox, faBoxes, faGavel);
 
 ReactDOM.render(
-    <Router history={hashHistory} >
+    <BrowserRouter>
         <App />
-    </Router>,
+    </BrowserRouter>,
     document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change

diff --git a/src/pages/Docs.tsx b/src/pages/Docs.tsx
@@ -10,15 +10,15 @@ const Docs: React.FC = () => {
     return(
         <article>
             <ol>
-                <li><Link to ="/docs"><FontAwesomeIcon icon="laptop" /> Getting Started</Link></li>
-                <li><Link to ="/docs/layout"><FontAwesomeIcon icon="layer-group" /> Layout</Link></li>
-                <li><Link to ="/docs/content"><FontAwesomeIcon icon="box" /> Content</Link></li>
-                <li><Link to ="/docs/components"><FontAwesomeIcon icon="boxes" /> Components</Link></li>
+                <li><Link to ={process.env.PUBLIC_URL + "/docs"}><FontAwesomeIcon icon="laptop" /> Getting Started</Link></li>
+                <li><Link to ={process.env.PUBLIC_URL + "/docs/layout"}><FontAwesomeIcon icon="layer-group" /> Layout</Link></li>
+                <li><Link to ={process.env.PUBLIC_URL + "/docs/content"}><FontAwesomeIcon icon="box" /> Content</Link></li>
+                <li><Link to ={process.env.PUBLIC_URL + "/docs/components"}><FontAwesomeIcon icon="boxes" /> Components</Link></li>
             </ol>
             <Switch>
-                <Route path="/docs/layout" component={Layout} />
-                <Route path="/docs/content" component={Content} />
-                <Route path="/docs/components" component={Components} />
+                <Route path={process.env.PUBLIC_URL + "/docs/layout"} component={Layout} />
+                <Route path={process.env.PUBLIC_URL + "/docs/content"} component={Content} />
+                <Route path={process.env.PUBLIC_URL + "/docs/components"} component={Components} />
                 <Route component={GStarted} />
             </Switch>
         </article>

diff --git a/src/pages/Download.tsx b/src/pages/Download.tsx
@@ -11,38 +11,37 @@ const Download: React.FC = () => {
                 let version = json[0];
                 json.shift();
                 ReactDOM.render(
-                <section>
-                    <h4>{version.name}</h4>
-                    <pre style={{ margin: 10 }}>{version.body}</pre>
-                    <ol>
-                        <li><a href={version.html_url}>Download</a></li>
-                        <li><a href={version.zipball_url}>Source code (.zip)</a></li>
-                    </ol>
-                </section>,
-                document.getElementById("latest"));
-                ReactDOM.render(
-                    json.map((element: any) => 
-                        <li><a href={element.html_url} title={element.body}>{element.name}</a></li>
-                        ),
-                    document.getElementById('older')
-                );
+                    <article>
+                        <h1 id="headerTitle">Download <b>Cleanify Design</b></h1>
+                        <section>
+                            <h2>Latest version</h2>
+                            <section>
+                                <h4>{version.name}</h4>
+                                <pre style={{ margin: 10 }}>{version.body}</pre>
+                                <ol>
+                                    <li><a href={version.html_url}>Download</a></li>
+                                    <li><a href={version.zipball_url}>Source code (.zip)</a></li>
+                                </ol>
+                                <p>Or download from NPM: <b>npm install cleanify-design</b></p>
+                            </section>
+                            <h3>Other versions</h3>
+                            <ul id="older">
+                                {json.map((element: any) => 
+                                    <li><a href={element.html_url} title={element.body}>{element.name}</a></li>
+                                    )}
+                            </ul>
+                        </section>
+                    </article>,
+                    document.getElementById("releases"));
             });
     })();
 
     return(
-        <article>
-            <h1 id="headerTitle">Download <b>Cleanify Design</b></h1>
-            <section>
-                <h2>Latest version</h2>
-                <div id="latest">
-                    <p>Loading latest version...</p>
-                </div>
-                <h3>Other versions</h3>
-                <ul id="older">
-                    <li>Loading older versions...</li>
-                </ul>
-            </section>
-        </article>
+        <div id="releases">
+            <article>
+                <h1 id="headerTitle">Loading...</h1>
+            </article>
+        </div>
     );
 }
 

diff --git a/src/pages/docs/Components.tsx b/src/pages/docs/Components.tsx
@@ -197,7 +197,7 @@ const Components: React.FC = () => {
                 <p>* Not visible in mobiles</p>
                 <ol>
                     <li>Home</li>
-                    <li><Link to ="/docs/components">Download</Link></li>
+                    <li><Link to ={process.env.PUBLIC_URL + "/docs/components"}>Download</Link></li>
                     <li>Documentation</li>
                 </ol>
                 <Highlight className="codeSnippet html">
@@ -212,7 +212,7 @@ const Components: React.FC = () => {
                     <li>Hello World!</li>
                     <li>Example text</li>
                     <li>Test 3</li>
-                    <li><Link to ="/docs/components">Link example</Link></li>
+                    <li><Link to ={process.env.PUBLIC_URL + "/docs/components"}>Link example</Link></li>
                 </ul>
                 <br />
                 <Highlight className="codeSnippet html">
@@ -225,7 +225,7 @@ const Components: React.FC = () => {
                 <h2>Navbar</h2>
                 <section>
                     <nav>
-                        <Link to ="/docs/components" className="navbar-title">Cleanify Example</Link>
+                        <Link to ={process.env.PUBLIC_URL + "/docs/components"} className="navbar-title">Cleanify Example</Link>
                         <ul className="navbar-menu">
                             <li>Home</li>
                             <li>Test</li>

diff --git a/src/pages/docs/GStarted.tsx b/src/pages/docs/GStarted.tsx
@@ -7,7 +7,7 @@ const GStarted: React.FC = () => {
         <article>
             <section>
                 <h2>Let's start!</h2>
-                <p>Once the files have been <Link to ="/download">downloaded</Link>, the directory should look like this.</p>
+                <p>Once the files have been <Link to ={process.env.PUBLIC_URL + "/download"}>downloaded</Link>, the directory should look like this.</p>
                 <section>
                     <pre style={{ margin: 5 }}>
                         {'website'}<br/>