From d8d75ab752a3a1721f6ea9d531f3c43bc7c1b4b0 Mon Sep 17 00:00:00 2001 From: Arwed Mett Date: Fri, 16 Feb 2018 20:52:28 +0100 Subject: [PATCH] update --- src/app.js | 23 +++++---- src/elements/content.js | 107 +++++++++++++++++++++++++++++----------- src/elements/index.js | 12 ++--- src/elements/section.js | 11 +++-- src/util/index.js | 3 ++ src/util/map.js | 4 ++ test/index.js | 7 +++ test/util/index.js | 9 ++++ test/util/map.js | 13 +++++ webpack.config.js | 2 +- 10 files changed, 143 insertions(+), 48 deletions(-) create mode 100644 src/util/index.js create mode 100644 src/util/map.js create mode 100644 test/util/index.js create mode 100644 test/util/map.js diff --git a/src/app.js b/src/app.js index f2b3d55..9e539be 100644 --- a/src/app.js +++ b/src/app.js @@ -1,22 +1,27 @@ //@flow import React from "react" import { Header, Projects, Contact } from "./components" -import { Body, Section, Content } from "./elements" +import { Body, Section, content } from "./elements" import NoscriptWarning from "./noscript" import { ThemeProvider } from "styled-components" import { Dark } from "./themes" +const projects = { + title: "My Projects", + body: () => +} +const contact = { + title: "Contact", + body: () => +} + export default () =>
- -
- -
-
- -
- + { content([ + projects, + contact + ]) } diff --git a/src/elements/content.js b/src/elements/content.js index af13cae..0bf979f 100644 --- a/src/elements/content.js +++ b/src/elements/content.js @@ -1,39 +1,90 @@ //@flow -import React, { Component, Node } from "react" +import React, { Component } from "react" +import type { Node } from "react" +import { Section } from "." +import type { SectionDescription } from "." +import styled from "styled-components" +import Observer from "@researchgate/react-intersection-observer" -type LinkProps = { - title: String, - target: Node -} +const Link = styled.a` + text-decoration: inherit; + color: white; + min-height: 40px; + display: flex; + align-items: center; + padding: 0 20px; -type LinkState = { - target: Node -} + transition: 0.3s ease; + :hover { + background-color: #777; -class Link extends Component { - constructor(props) { - super(props) - const { target } = props - this.setState({ target }) } -} +` -type ContentProps = { - children: React.Node -} +const Header = styled.header.attrs({ + backgroundcolor: props => props.theme.backgroundcolor || "#111111" +})` + position: sticky; + top: 0; + display: flex; + justify-content: left; + align-items: center; + width: 60%; + z-index: 5; + margin: 20px auto; + min-height: 40px; + border-bottom: solid white; + background-color: ${ props => props.backgroundcolor }; +` -type ContentState = { +/** + * create a hash based on the section title + */ +const get_hash = (section: SectionDescription, key: number) => + key + "-" + section.title.toLocaleLowerCase().split(" ").join("-") -} +/** + * create a link to the section, according to the name and key. + */ +const create_link = (section: SectionDescription, key: number) => + { section.title } -class Content extends Component { - render() { - const { children } = this.props - return
- { children } -
- } -} +/** + * create a link for every section. + */ +const generate_links = (sections: Array) => sections.map(create_link) -export default Content +/** + * transform a section description intto a section. + */ +const create_section = (description: SectionDescription, key: number) => +
+ +/** + * create a list of sections from their description. + */ +const generate_sections = (descriptions: Array) => + descriptions.map(create_section) + + +const Sentinel = styled.div` + width: 100%; + height: 1px; +` + +const test = () => alert("test") + +export default (sections: Array) =>
+ + + +
+ { generate_links(sections) } +
+ { generate_sections(sections) } +
diff --git a/src/elements/index.js b/src/elements/index.js index 68fd4bd..5654363 100644 --- a/src/elements/index.js +++ b/src/elements/index.js @@ -6,13 +6,10 @@ export { Name as HeaderName } from "./header" -export { - Body -} from "./body" +export { Body } from "./body" -export { - default as Section -} from "./section" +export { default as Section } from "./section" +export type { SectionDescription } from "./section" export { default as Project, @@ -23,4 +20,5 @@ export { H1, H2, Title, P } from "./text" -export { default as Content } from "./content" +export { default as content } from "./content" + diff --git a/src/elements/section.js b/src/elements/section.js index 7fdd68e..93a9136 100644 --- a/src/elements/section.js +++ b/src/elements/section.js @@ -18,8 +18,13 @@ const Style = styled.section` const Title = H1 -export default (props: { title: string, children?: Node }) => diff --git a/src/util/index.js b/src/util/index.js new file mode 100644 index 0000000..44150d8 --- /dev/null +++ b/src/util/index.js @@ -0,0 +1,3 @@ +//@flow + +export { default as map } from "./map" diff --git a/src/util/map.js b/src/util/map.js new file mode 100644 index 0000000..89cb133 --- /dev/null +++ b/src/util/map.js @@ -0,0 +1,4 @@ +//@flow + +export default (f: (A, number) => B) => (elements: Array) => elements.map(f) + diff --git a/test/index.js b/test/index.js index e69de29..00333ee 100644 --- a/test/index.js +++ b/test/index.js @@ -0,0 +1,7 @@ +//@flow + +import util from "./util" + +describe("homepage", () => { + util() +}) diff --git a/test/util/index.js b/test/util/index.js new file mode 100644 index 0000000..bb2df67 --- /dev/null +++ b/test/util/index.js @@ -0,0 +1,9 @@ +//@flow + +import map from "./map" + +export default () => { + describe("util", () => { + map() + }) +} diff --git a/test/util/map.js b/test/util/map.js new file mode 100644 index 0000000..c367eb6 --- /dev/null +++ b/test/util/map.js @@ -0,0 +1,13 @@ +//@flow +import { map } from "../../src/util" +import assert from "assert" + +export default () => { + describe("map", () => { + const numbers = [1, 2, 3, 4, 5, 6, 7] + const numbers_plus_1 = map(x => x + 1)(numbers) + it("add one to all members", () => { + assert.deepEqual(numbers_plus_1, [2, 3, 4, 5, 6, 7, 8]) + }) + }) +} diff --git a/webpack.config.js b/webpack.config.js index c9efa0e..713932e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -102,7 +102,7 @@ const development = config => Object.assign({ }, config(), { stats: 'errors-only', host: process.env.HOST, - port: 3000, + port: 5000, compress: true, overlay: true, hot: true,