removed model/head.js

modesty · Sep 29, 2019 · f4a1bb1 · f4a1bb1
1 parent 080d7d9
commit f4a1bb1
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react2html",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "react2html - component based web site development starter kit",
   "private": false,
   "homepage": "https://github.com/modesty/react2html",

diff --git a/src/scripts/components/Head.js b/src/scripts/components/Head.js
@@ -1,21 +1,17 @@
 import React from 'react';
 
-import processRelPath from '../model/head';
-
-const Head = ({ title, description, styles, scripts, rel }) => {
-	const { touchHref, webMan, styleLinks, scriptLinks } = processRelPath(rel, styles, scripts);
+const Head = ({ title, description, links, styles, scripts }) => {
 	return (
 		<head>
 			<meta charSet="utf-8" />		
 			<title>{title}</title>
 			<meta name="description" content={description} />
 			<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-			<link rel="manifest" href={webMan} />
-			<link rel="apple-touch-icon" href={touchHref} />
+			{Object.entries(links).map((entry, i) => <link key={i} rel={entry[0]} href={entry[1]} />)}
+			{styles.map( (s, i) => <link rel="stylesheet" href={s} key={i} /> )}
+			{scripts.map((s, i) => <script src={s} key={i} />)}
 
-			{styleLinks.map( (s, i) => <link rel="stylesheet" href={s} key={i} /> )}
-			{scriptLinks.map((s, i) => <script src={s} key={i} />)}
 			<meta name="theme-color" content="#fafafa" />
 		</head>
 	);

diff --git a/src/scripts/components/Header.js b/src/scripts/components/Header.js
@@ -4,9 +4,8 @@ import Menu from './Menu';
 
 import processRelPath from '../model/header';
 
-const Header = ({ title, rel }) => {
-	let dataModel = processRelPath(rel);
-	let {homeLink, bannerLink} = dataModel;
+const Header = ({ title, rel = "" }) => {
+	const { homeLink, bannerLink, socials } = processRelPath(rel);
 
 	return (
 		<header className='header'>
@@ -28,7 +27,7 @@ const Header = ({ title, rel }) => {
 				<div className="col-md-3 hidden-sm hidden-xs">
 					<div className="soc-area">
 						<div className="icons-social">
-							{dataModel.socials.map( s => <a href={s.href} className={s.id} key={s.id}></a>)}
+							{socials.map( s => <a href={s.href} className={s.id} key={s.id}></a>)}
 						</div>
 					</div>
 				</div>

diff --git a/src/scripts/components/Main.js b/src/scripts/components/Main.js
@@ -1,8 +1,6 @@
-"use strict";
-
 import React from 'react';
 
-let Main = (props) =>
+const Main = (props) =>
 	<main className=''>
 		{props.children}
 	</main>;

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -5,10 +5,10 @@ import Header from './components/Header';
 import Main from './components/Main';
 import Footer from './components/Footer';
 
-const Root = ({title,description,scripts,styles,rel, gaKey}) => {
+const Root = ({title,description,links,scripts,styles,rel, gaKey}) => {
 	return (
 		<html className="no-js" lang="en">
-			<Head title={title} description={description} scripts={scripts} styles={styles} rel={rel} />
+			<Head title={title} description={description} links={links} scripts={scripts} styles={styles} rel={rel} />
 			<body data-track={gaKey} className='container'>
 				<Header title={title} />
 				<Main>

diff --git a/src/scripts/model/head.js b/src/scripts/model/head.js
diff --git a/src/scripts/model/header.js b/src/scripts/model/header.js
@@ -1,3 +1,5 @@
+import path from 'path';
+
 const HeaderModel = {
 	homeLink: {name: "Home", href: "./", img: "img/logo.png"},
 	bannerLink: {name: "Banner Ad", href: "", img: "http://placehold.it/420x60"},
@@ -11,12 +13,7 @@ const HeaderModel = {
 	]
 };
 
-export default function processRelPath(rel) {
-	let relPath = rel ? rel : "";
-
-	let homeLink = HeaderModel.homeLink, bannerLink = HeaderModel.bannerLink;
-
-	homeLink = {...homeLink, href: relPath + homeLink.href, img: relPath + homeLink.img};
-
-	return {...HeaderModel, homeLink: homeLink};
+export default function processRelPath(rel = "") {
+	const { homeLink:preHomeLink } = HeaderModel;
+	return {...HeaderModel, homeLink: {...preHomeLink, href: path.join(rel, preHomeLink.href), img: path.join(rel, preHomeLink.img)}};
 }
diff --git a/src/scripts/pages/about.js b/src/scripts/pages/about.js
@@ -5,12 +5,12 @@ import Header from '../components/Header';
 import Main from '../components/Main';
 import Footer from '../components/Footer';
 
-const About = ({title,description,scripts,styles,rel, gaKey}) => {
+const About = ({title,description,links, scripts,styles,rel, gaKey}) => {
 	return (
 		<html className="no-js" lang="en">
-			<Head title={title} description={description} scripts={scripts} styles={styles} rel={rel} />
+			<Head title={title} description={description} links={links} scripts={scripts} styles={styles} rel={rel} />
 			<body data-track={gaKey} className='container'>
-				<Header title={title} />
+				<Header title={title} rel={rel} />
 				<Main>
 					<h1>About React2Html</h1>
 					<p>More details can be found at <a href="https://github.com/modesty/react2html"> GitHub </a></p>

diff --git a/src/scripts/pages/contact.js b/src/scripts/pages/contact.js
@@ -5,12 +5,12 @@ import Header from '../components/Header';
 import Main from '../components/Main';
 import Footer from '../components/Footer';
 
-const Contact = ({title,description,scripts,styles,rel, gaKey}) => {
+const Contact = ({title,description,links,scripts,styles,rel,gaKey}) => {
 	return (
 		<html className="no-js" lang="en">
-			<Head title={title} description={description} scripts={scripts} styles={styles} rel={rel} />
+			<Head title={title} description={description} links={links} scripts={scripts} styles={styles} rel={rel} />
 			<body data-track={gaKey} className='container'>
-				<Header title={title} />
+				<Header title={title} rel={rel} />
 				<Main>
 					<h1>Contact Me</h1>
 					<p>email the author: <a href="mailto:[email protected]?subject=About%20CoeProject%20Article">[email protected]</a></p>

diff --git a/src/scripts/props/index.js b/src/scripts/props/index.js
@@ -1,12 +1,18 @@
+import path from 'path';
+import glob from 'glob';
+
 const pkg = require('../../../package.json');
 import Conf from '../../../tool/base.config';
-import glob from 'glob';
 
 export default {
     title: `Welcome to ${pkg.name} v${pkg.version}`,
     description: pkg.description,
-    scripts: glob.sync('**/*.js', { cwd: Conf.target.js_path }),
-    styles: glob.sync('**/*.css', { cwd: Conf.target.css_path }),
-    rel: './',
+    links: {
+        "site.webmanifest": "site.webmanifest",
+        "apple-touch-icon": "apple-touch-icon.png"
+    },
+    scripts: glob.sync('**/*.js', { cwd: Conf.target.js_path }).map(s => path.join("js", s)),
+    styles: glob.sync('**/*.css', { cwd: Conf.target.css_path }).map( s => path.join("css", s)),
+    rel: '',
     gaKey: Conf.TRACK_ID
 }
diff --git a/src/scripts/props/pages/about.js b/src/scripts/props/pages/about.js
@@ -1,3 +1,18 @@
+import path from 'path';
 import indexProps from '../index';
 
-export default { ...indexProps, rel: '../', title: "About", description: "About Modesty Zhang"};
+const baseDir = path.resolve(__dirname, "..");
+const rel = path.relative(__dirname, baseDir);
+
+const links = Object.keys(indexProps.links).reduce((ret, key) => {
+    ret[key] = path.join(rel, indexProps.links[key]);
+    return ret;
+}, {});
+
+const scripts = indexProps.scripts.map(s => path.join(rel, s));
+const styles = indexProps.styles.map(s => path.join(rel, s));
+
+export default {
+    ...indexProps, rel, links, styles, scripts,
+    title: "About", description: "About Modesty Zhang"
+};
diff --git a/src/scripts/props/pages/contact.js b/src/scripts/props/pages/contact.js
@@ -1,3 +1,18 @@
+import path from 'path';
 import indexProps from '../index';
 
-export default { ...indexProps, rel: '../', title: "Contact", description: "Contact Modesty Zhang"};
+const baseDir = path.resolve(__dirname, "..");
+const rel = path.relative(__dirname, baseDir);
+
+const links = Object.keys(indexProps.links).reduce((ret, key) => {
+    ret[key] = path.join(rel, indexProps.links[key]);
+    return ret;
+}, {});
+
+const scripts = indexProps.scripts.map(s => path.join(rel, s));
+const styles = indexProps.styles.map(s => path.join(rel, s));
+
+export default {
+    ...indexProps, rel, links, styles, scripts,
+    title: "Contact", description: "Contact Modesty Zhang"
+};