Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit b4423fb

Browse files
joehandjoehand
committed
add homepage and fix a few mobile things
1 parent e719982 commit b4423fb

6 files changed

Lines changed: 192 additions & 56 deletions

File tree

‎client/js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ function logger (state, emitter) {
2121
})
2222
}
2323

24-
css('dat-colors')
2524
css('tachyons')
25+
css('dat-colors')
2626

2727
// define routes:
2828
app.route('/publish', require('./pages/publish'))

‎client/js/elements/footer/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = function () {
3737
`
3838

3939
return html`
40-
<footer class="bg-neutral white absolute bottom-0 w-100">
40+
<footer class="pv2 bg-neutral white absolute bottom-0 w-100">
4141
<section class="pa2 ph4-m mw8-ns center-ns">
4242
<div class="pt2 cf">
4343
<div class="fl w-third">

‎client/js/elements/home-section/index.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const html = require('choo/html')
2+
3+
/*
4+
Options:
5+
6+
{
7+
bgColor: 'bg-white',
8+
color: 'neutral',
9+
title: 'Section',
10+
subtitle: 'Subtitle for this section',
11+
sections: [
12+
{
13+
title: 'First section',
14+
text: 'lorem bacon some things'
15+
},
16+
{
17+
title: 'Second section',
18+
text: 'lorem bacon some things'
19+
},
20+
{
21+
title: 'Third section',
22+
text: 'lorem bacon some things'
23+
}
24+
],
25+
cta: {
26+
link: '#',
27+
text: 'Learn More'
28+
}
29+
}
30+
*/
31+
32+
module.exports = function (props) {
33+
props = Object.assign({
34+
bgColor: 'bg-white'
35+
}, props)
36+
37+
if (!props.color && props.bgColor === 'bg-neutral') props.color = 'white'
38+
39+
// Allow html
40+
const subtitle = html`<p class="f4 mt1 ${props.bgColor !== 'bg-neutral' ? 'color-neutral-70' : 'color-neutral-30'} horizontal-rule"></p>`
41+
subtitle.innerHTML = props.subtitle
42+
43+
return html`
44+
<section class="pt4 ${props.bgColor} ${props.color ? props.color : ''}">
45+
<div class="pv2 ph3 pa4-m mw8-ns center-ns">
46+
<header>
47+
<h2 class="f2 mb0">${props.title}</h2>
48+
${subtitle}
49+
</header>
50+
<div class="pt3 cf">
51+
${props.sections.map((section) => {
52+
return textSection(section)
53+
})}
54+
</div>
55+
${cta()}
56+
</div>
57+
</section>
58+
`
59+
60+
function cta () {
61+
if (!props.cta) return
62+
return html`
63+
<p class="pv4">
64+
<a href="${props.cta.link}" class="f5 white bg-animate hover-color-white bg-green hover-bg-dark-green pa3 link">${props.cta.text}</a>
65+
</p>
66+
`
67+
}
68+
69+
function textSection (item) {
70+
const text = html`<p class="lh-copy ${props.bgColor === 'bg-neutral' ? 'color-neutral-30' : 'color-neutral-80'} pr4"></p>`
71+
text.innerHTML = item.text
72+
return html`
73+
<div class="fl w-third-ns w-100">
74+
<h3 class="f3">${item.title}</h3>
75+
${text}
76+
</div>
77+
`
78+
}
79+
}

‎client/js/pages/landing/index.js‎

Lines changed: 110 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,119 @@
11
const html = require('choo/html')
2-
const header = require('../../components/header')
2+
const css = require('sheetify')
33
const footer = require('../../elements/footer')
4+
const datIcon = require('../../elements/icon')
5+
const homeSection = require('../../elements/home-section')
46

57
module.exports = function (state, emit) {
8+
const splash = css`
9+
:host {
10+
background-repeat: repeat-y;
11+
background-position: center -75px;
12+
13+
@media screen and (min-width: 30em) {
14+
/* ns - not small breakpoint from tachyons */
15+
background-position: center -175px;
16+
}
17+
}
18+
`
19+
const backgroundImageUrl = '/public/img/bg-landing-page.svg'
20+
const star = datIcon('star-dat', {class: 'color-green'})
21+
622
return html`
7-
<div>
8-
${header(state, emit)}
9-
<section>
10-
helloooo world
23+
<div class="min-vh-100 pb7">
24+
<div class="${splash} pb6-ns pb4 w-100 center" style="background-image: url(${backgroundImageUrl})">
25+
<section class="tc pa3 pt5-ns">
26+
<h1 class="f3 f2-m f1-l fw2 black-90 mv3 tracked">
27+
Dat<span class="v-mid dib grow w2 h2">
28+
${star}
29+
</span>Base
30+
</h1>
31+
<h2 class="f5 fw2 color-neutral-60 mb4 lh-copy">
32+
Search for data preprints on DatBase!
33+
</h2>
34+
<div class="w-90 w-50-l center">
35+
${search()}
36+
</div>
37+
</section>
38+
<section class="bg-white mt4 mt3-ns mw7-ns center pa3 ph5-ns">
39+
<p class="f4 lh-copy measure-wide">
40+
Research papers are becoming increasingly accessible through open access and preprint servers.
41+
Research data is still behind locked custom APIs, confusing interfaces, or slow HTTP servers.
42+
We dream of world when all this data can be accessed as easy as the web.
43+
<a href="#">Imagine with us</a>.
44+
</p>
45+
<p class="f3 lh-copy measure-wide">
46+
DatBase is distributed preprints for data!
47+
Built by <a href="http://datproject.org">Dat Project</a>.
48+
</p>
49+
</section>
50+
</div>
51+
<section class="pa3 w-100 bg-neutral-04">
52+
<div class="mw7 center">
53+
<div class="pa4-l">
54+
<form class="mb0 pa4 br2-ns ba b--green">
55+
<fieldset class="cf bn ma0 pa0">
56+
<legend class="pa0 f5 f4-ns mb3 black-80">Get updates! We promise to only send the very exciting stuff.</legend>
57+
<div class="cf">
58+
<label class="clip" for="email-address">Email Address</label>
59+
<input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address">
60+
<input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
61+
</div>
62+
</fieldset>
63+
</form>
64+
</div>
65+
</div>
1166
</section>
12-
${footer(state, emit)}
67+
${homeSection({
68+
'title': 'What are Data Preprints?',
69+
'subtitle': 'With data preprints you can make data public & shareable before you are ready to publish.',
70+
'sections': [
71+
{
72+
'title': 'User Friendly',
73+
'text': `
74+
Dat's simple to use command line tool works alognside apps like Dropbox or Google Drive.
75+
Keep data private until you are ready to prepublish without changing your data management software.
76+
`
77+
},
78+
{
79+
'title': 'Reproducible History',
80+
'text': `
81+
Dat uses cryptographic registers to certify data ownership and track changes over time.
82+
A history of changes improves data reproducibility and transparency.
83+
`
84+
},
85+
{
86+
'title': 'One-Click Publish',
87+
'text': `
88+
In the future, DatBase will have one-click publishing to data repositories such as Zenodo or Dataverse.
89+
Dat's innovative storage makes it the perfect intermediate between files on your computer and data publishing sites.
90+
`
91+
}
92+
],
93+
'cta': {
94+
'link': 'http://datproject.org',
95+
'text': 'Learn more about Dat Project'
96+
}
97+
})}
98+
${footer()}
1399
</div>
14100
`
101+
102+
function search () {
103+
const keydown = (e) => {
104+
if (e.keyCode === 13) {
105+
var link = e.target.value
106+
e.target.value = ''
107+
emit('archive:view', link)
108+
}
109+
}
110+
111+
const searchIcon = datIcon('search', {class: 'absolute top-1 ml1 left-0 h2 w2 color-green'})
112+
return html`
113+
<div class="relative dat-input db">
114+
${searchIcon}
115+
<input class="f3 pv3 pr4 pl3 indent w-100 dat-input__input h3" name="import-dat" type="text" placeholder="preview dat://" onkeydown=${keydown} />
116+
</div>
117+
`
118+
}
15119
}

‎client/scss/imports/_sections.scss‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -43,51 +43,3 @@
4343
background-size: 100%;
4444
}
4545
}
46-
47-
.splash-visual {
48-
width: 100%;
49-
@media screen and (min-width: $md1) {
50-
width: 80%;
51-
}
52-
max-width: 900px;
53-
margin-left: auto;
54-
margin-right: auto;
55-
background: $color-white;
56-
display: block;
57-
margin-top: 1.25rem;
58-
margin-bottom: 3.5rem;
59-
border-radius: .25rem;
60-
overflow: hidden;
61-
transition: all 1s;
62-
transform: scale(0);
63-
img {
64-
display: block;
65-
}
66-
@media screen and (min-width: $md1) {
67-
min-height: 30vh;
68-
}
69-
animation: popup 1.5s;
70-
animation-iteration-count: 1;
71-
animation-delay: 1s;
72-
animation-fill-mode: forwards;
73-
box-shadow: 0 0 120px rgba(0,0,0,.25);
74-
}
75-
76-
@keyframes popup {
77-
0% {
78-
transform: scale(0);
79-
opacity: 0;
80-
}
81-
19% {
82-
transform: scale(1.1);
83-
}
84-
25% {
85-
transform: scale(1);
86-
opacity: 1;
87-
}
88-
80% {
89-
}
90-
100% {
91-
transform: scale(1);
92-
}
93-
}

‎server/page.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function page (url, contents, appState) {
3434
<link rel="stylesheet" type="text/css" href="/public/css/app.css"/>
3535
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500|Source+Sans+Pro:400,700" rel="stylesheet">
3636
<link rel="icon" href="/public/img/favicon.ico">
37+
<meta name="viewport" content="width=device-width, initial-scale=1">
3738
${renderMetaTags()}
3839
<meta property="og:site_name" content="Dat" />
3940
<meta property="og:type" content="article" />

0 commit comments

Comments
 (0)