Merge pull request #5 from MichaelCurrin/add-content-and-styling-reac…

…t-app Add content and styling to React app
MichaelCurrin · Mar 21, 2020 · b9e059e · b9e059e
2 parents ddc68aa + f765200
commit b9e059e
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Instant website
-> Manifest a business idea as a simple webpage - using custom text and images supplied in a URL and no coding.
+> Manifest a business idea as a simple webpage - using custom text and images supplied in a URL and no coding
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/8f1fc5a5-1b67-4d14-94c6-512c4eacdad7/deploy-status)](https://app.netlify.com/sites/instant-website/deploys)
 [![GitHub tag](https://img.shields.io/github/tag/MichaelCurrin/instant-website.svg)](https://GitHub.com/MichaelCurrin/instant-website/tags/)

diff --git a/package.json b/package.json
@@ -1,10 +1,21 @@
 {
     "name": "instant-website",
+    "description": "Manifest a business idea as a simple webpage - using custom text and images supplied in a URL and no coding",
+    "version": "0.1.0",
+
+    "keywords": ["react", "react-url-query", "unsplash", "query-strings"],
     "author": {
         "name": "Michael Currin",
         "url": "https://MichaelCurrin.github.io/"
     },
-    "version": "0.0.1",
+    "license": "MIT",
+
+    "homepage": "https://instant-website.netlify.com",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/MichaelCurrin/instant-website.git"
+    },
+
     "devDependencies": {
         "react-scripts": "^0.6.1"
     },
@@ -15,10 +26,10 @@
         "react-dom": "^16.1.1",
         "react-url-query": "^1"
     },
+
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test --env=jsdom"
-    },
-    "license": "MIT"
+    }
 }
diff --git a/public/index.html b/public/index.html
@@ -11,6 +11,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.css">
+    <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>

diff --git a/src/App.js b/src/App.js
@@ -4,17 +4,12 @@ import history from './history';
 
 class App extends Component {
     componentDidMount() {
-        // Force an update if the URL changes
+        // Force an update if the URL changes.
         history.listen(() => this.forceUpdate());
     }
 
     render() {
-        return (
-            <div>
-                <h3>Instant website</h3>
-                <MainPage />
-            </div>
-        );
+        return <MainPage />;
     }
 }
 

diff --git a/src/MainPage.js b/src/MainPage.js
@@ -2,74 +2,112 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { addUrlProps, UrlQueryParamTypes } from 'react-url-query';
 
+const MAIN_IMG_W = 128,
+    MAIN_IMG_H = 128,
+    BG_IMG_W = 1600,
+    BG_IMG_H = 900;
+const REPO_URL = 'https://github.com/MichaelCurrin/instant-website';
+
 /**
  * Specify how the URL gets decoded here.
  *
  * Optionally use `queryParam: 'fooInUrl'` after type for custom name.
  */
 const urlPropsQueryConfig = {
     title: { type: UrlQueryParamTypes.string },
-    description: { type: UrlQueryParamTypes.string }
+    subtitle: { type: UrlQueryParamTypes.string },
+    description: { type: UrlQueryParamTypes.string },
+    mainImage: { type: UrlQueryParamTypes.string },
+    bgImage: { type: UrlQueryParamTypes.string }
 };
 
+function imageSearchUrl(keyword, w, h) {
+    return `https://source.unsplash.com/${w}x${h}/?${keyword}`;
+}
+
 class MainPage extends PureComponent {
     static propTypes = {
         title: PropTypes.string,
+        subtitle: PropTypes.string,
         description: PropTypes.string,
+        mainImage: PropTypes.string,
+        bgImage: PropTypes.string,
+
         // Change handlers are automatically generated and passed if a config is provided and
         // `addChangeHandlers` isn't false. They use `replaceIn` by default, just updating that
         // single query parameter and keeping the other existing ones.
         onChangeTitle: PropTypes.func,
+        onChangeSubtitle: PropTypes.func,
         onChangeDescription: PropTypes.func,
+        onChangeMainImage: PropTypes.func,
+        onChangeBgImage: PropTypes.func,
+
         onChangeUrlQueryParams: PropTypes.func
     };
 
+    // Note: These do not appear in the URL initially.
     static defaultProps = {
         title: 'Your title',
-        description: 'Your description'
+        subtitle: 'Your title',
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique odio, aut sed non ullam a iste quaerat doloremque adipisci nemo quod blanditiis deleniti necessitatibus unde quidem sit minus in labore?',
+        mainImage: 'nature',
+        bgImage: 'nature'
     };
 
     render() {
-        const { title, description, onChangeTitle, onChangeDescription, onChangeUrlQueryParams } = this.props;
+        const {
+            title,
+            subtitle,
+            description,
+            mainImage,
+            bgImage,
+
+            onChangeTitle,
+            onChangeDescription,
+            onChangeMainImage,
+            onChangeBgImage,
+            onChangeUrlQueryParams
+        } = this.props;
+
+        const mainImgUrl = imageSearchUrl(mainImage, MAIN_IMG_W, MAIN_IMG_H),
+            bgImageUrl = imageSearchUrl(bgImage, BG_IMG_W, BG_IMG_H);
+
+        document.body.style.backgroundImage = `url(${bgImageUrl})`;
 
         return (
-            <div>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td>Title</td>
-                            <td>{title}</td>
-                            <td>
-                                <button onClick={() => onChangeTitle(Math.random().toString(32).substring(8))}>
-                                    Change title
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>Description</td>
-                            <td>{description}</td>
-                            <td>
-                                <button onClick={() => onChangeDescription(Math.random().toString(32).substring(8))}>
-                                    Change description
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colSpan={3}>
-                                <button
-                                    onClick={() =>
-                                        onChangeUrlQueryParams({
-                                            title: Math.random().toString(32).substring(8),
-                                            description: Math.random().toString(32).substring(8)
-                                        })}
-                                >
-                                    Change both with one URL update
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            <main role="main">
+                <section>
+                    <div class="container">
+                        <div class="card is-wide">
+                            <div class="card-content ">
+                                <div class="media">
+                                    <div class="media-left">
+                                        <figure className={`image is-${MAIN_IMG_W}x${MAIN_IMG_H}`}>
+                                            <img class="is-rounded" src={mainImgUrl} alt="Custom image" />
+                                        </figure>
+                                    </div>
+
+                                    <div class="media-content">
+                                        <p class="title is-4">{title}</p>
+                                        <p class="subtitle is-6">{subtitle}</p>
+                                    </div>
+                                </div>
+
+                                <p class="content">{description}</p>
+
+                                <footer class="card-footer">
+                                    <p class="card-footer-item">
+                                        <span>
+                                            Made with <a href={REPO_URL}>Instant Website</a>
+                                        </span>
+                                    </p>
+                                </footer>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
         );
     }
 }