Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] new layout/design #72

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

[Feature] new layout/design #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c797723
New layout and design for Estatico
orioltf Jun 9, 2017
36a200d
Minor fixes for small viewport
orioltf Jun 9, 2017
c069a65
Move JS to toggle tree from preview to its own JS file
orioltf Jun 12, 2017
9291e97
Get rid from IIFE, rename variables with more meaningful names
orioltf Jun 13, 2017
4ecddd2
Responsive styles
orioltf Jun 13, 2017
3e69c59
Remove commented out code
orioltf Jun 13, 2017
5ce851b
Make footer content and data project related
orioltf Jun 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion gulp/js/default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ var taskName = 'js',
taskConfig = {
src: [
'./source/assets/js/main.js',
'./source/assets/js/head.js'
'./source/assets/js/head.js',
'./source/preview/assets/js/preview.js'
],
devSrc: [
'./source/assets/js/dev.js'
Expand Down
9 changes: 0 additions & 9 deletions helpers/handlebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,6 @@ helpers.dynamicPartial = function(name, partialData, options) {
return new Handlebars.SafeString(output);
};

// Module preview
helpers.hasVariants = function(variants, options) {
if (Object.keys(variants).length > 1) {
return options.fn(this);
} else {
return options.inverse(this);
}
};

// Register helpers
Handlebars.registerHelper(helpers);

Expand Down
39 changes: 37 additions & 2 deletions source/data/default.data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,49 @@
'use strict';

var util = require('gulp-util'),
tree = require('./tree.data.js'),
data = {
meta: {
project: 'Estático'
project: 'Estático',
client: {
name: 'Unic AG',
url: 'https://unic.com'
},
license: {
name: 'Apache 2.0',
url: 'http://www.apache.org/licenses/LICENSE-2.0'
},
social: [
{
url: 'http://facebook.com/unic',
title: 'Follow @unic on Facebook',
iconPath: 'M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z',
name: 'Facebook'
},
{
url: 'http://twitter.com/unic',
title: 'Follow @unic on Twitter',
iconPath: 'M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z',
name: 'Twitter'
},
{
url: 'https://www.linkedin.com/company/unic',
title: 'Find us on Linkedin',
iconPath: 'M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z',
name: 'LinkedIn'
},
{
url: 'https://github.com/unic/estatico',
title: 'Get the code on GitHub',
iconPath: 'M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z',
name: 'GitHub Repository'
}
]
},
env: util.env,
tree: tree,
props: {
svgSprites: JSON.stringify([

// Disabled since there are no icons by default
// '/assets/media/svg/base.svg'
])
Expand Down
45 changes: 45 additions & 0 deletions source/data/tree.data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
'use strict';

var _ = require('lodash'),
dataHelper = require('../../helpers/data.js'),
path = require('path'),

transform = function(data, filePath) {
const previewUrl = '/' + path.relative('./source/', filePath).replace('.data.js', '.html');

return _.merge(data, {
meta: {
previewUrl: previewUrl,
documentation: dataHelper.getDocumentation('../index.md')
}
});
},

data = {
pages: dataHelper.getDataGlob('./source/pages/**/*.data.js', transform),
demoPages: dataHelper.getDataGlob('./source/demo/pages/**/*.data.js', transform),
modules: dataHelper.getDataGlob('./source/modules/**/*.data.js', transform),
demoModules: dataHelper.getDataGlob('./source/demo/modules/**/*.data.js', transform),
styleguide: dataHelper.getDataGlob('./source/preview/styleguide/*.data.js', transform)
};

// console.log('pages =>', data.pages);


data.pages = _.sortBy(data.pages, function(item) {
return item.meta.title;
}).concat(_.sortBy(data.demoPages, function(item) {
return item.meta.title;
}));

data.modules = _.sortBy(data.modules, function(item) {
return item.meta.title;
}).concat(_.sortBy(data.demoModules, function(item) {
return item.meta.title;
}));

data.styleguide = _.sortBy(data.styleguide, function(item) {
return item.meta.title;
});

module.exports = data;
37 changes: 4 additions & 33 deletions source/index.data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,12 @@ var _ = require('lodash'),
requireNew = require('require-new'),
dataHelper = require('../helpers/data.js'),
defaultData = requireNew('./data/default.data.js'),
path = require('path'),
transform = function(data, filePath) {
var previewUrl = path.relative('./source/', filePath).replace('.data.js', '.html');

data = _.merge(data, {
meta: {
previewUrl: previewUrl
}
});

return data;
},

data = _.merge(defaultData, {
pages: dataHelper.getDataGlob('./source/pages/**/*.data.js', transform),
demoPages: dataHelper.getDataGlob('./source/demo/pages/**/*.data.js', transform),
modules: dataHelper.getDataGlob('./source/modules/**/*.data.js', transform),
demoModules: dataHelper.getDataGlob('./source/demo/modules/**/*.data.js', transform),
styleguide: dataHelper.getDataGlob('./source/preview/styleguide/*.data.js', transform)
meta: {
documentation: dataHelper.getDocumentation('index.md')
},
additionalLayoutClasses: 'sg--home'
});

data.pages = _.sortBy(data.pages, function(item) {
return item.meta.title;
}).concat(_.sortBy(data.demoPages, function(item) {
return item.meta.title;
}));

data.modules = _.sortBy(data.modules, function(item) {
return item.meta.title;
}).concat(_.sortBy(data.demoModules, function(item) {
return item.meta.title;
}));

data.styleguide = _.sortBy(data.styleguide, function(item) {
return item.meta.title;
});

module.exports = data;
68 changes: 5 additions & 63 deletions source/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,11 @@
{{#extend "preview/layouts/layout"}}
{{#content "content"}}
<div class="sg_index">
{{#if pages}}
<div class="sg_inner_wrapper">
<h2 class="sg_h2">Pages</h2>
<h2 class="sg__title sg__title--module">
<a href="/">{{meta.project}}</a>{{#if meta.title}} / {{meta.title}}{{/if}}
</h2>

<ul class="sg_index_list">
{{#each pages}}
{{#unless meta.hideFromListing}}
<li>
<a href="{{meta.previewUrl}}">{{meta.title}}</a>
{{#if meta.jira}}
(<a href="#{{meta.jira}}">
{{meta.jira}}
</a>)
{{/if}}
{{#if meta.feature}} &mdash; {{meta.feature}}{{/if}}
</li>
{{/unless}}
{{/each}}
</ul>
</div>
{{/if}}

{{#if modules}}
<div class="sg_inner_wrapper">
<h2 class="sg_h2">Modules</h2>

<ul class="sg_index_list">
{{#each modules}}
{{#unless meta.hideFromListing}}
<li>
<a href="{{meta.previewUrl}}">
{{meta.title}}
</a>
{{#if meta.jira}}
(<a href="#{{meta.jira}}">
{{meta.jira}}
</a>)
{{/if}}
{{#if meta.feature}} &mdash; {{meta.feature}}{{/if}}
</li>
{{/unless}}
{{/each}}
</ul>
</div>
{{/if}}

{{#if styleguide}}
<div class="sg_inner_wrapper">
<h2 class="sg_h2">Styleguide</h2>

<ul class="sg_index_list">
{{#each styleguide}}
{{#unless meta.hideFromListing}}
<li>
<a href="{{meta.previewUrl}}">
{{meta.title}}
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</div>
{{/if}}
<div class="sg__styleguide">
{{{meta.documentation}}}
</div>
{{/content}}
{{/extend}}
75 changes: 75 additions & 0 deletions source/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<style>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move this to the preview's main.scss?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left it here on purpose for 2 reasons:

  1. I don't want to pollute the styles from Estatico and/or the project, specially considering that adding those styles in there will affect for sure modules and/or pages using in this case quotes.
  2. I think it is great to have it as an example here to see that Estático is also capable to show beautiful documentation

What do you think?

.sg--home .sg__styleguide {
display: flex;
align-items: center;
}

blockquote {
display:block;
background: #fff;
padding: 15px 20px 15px 55px;
position: relative;

/*Font*/
font: italic 400 1.5em/1.2 Georgia, "Times New Roman", Times, serif;
color: #000;

/*Box Shadow - (Optional)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;

/*Borders - (Optional)*/
border-left-style: solid;
border-left-width: 15px;
border-right-style: solid;
border-right-width: 2px;

border-left-color: rgba(164, 196, 0, 0.8);
border-right-color: #a4c400;
}

blockquote:before {
content: "\201C"; /*Unicode for Left Double Quote*/

/*Font*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;

/*Positioning*/
position: absolute;
left: 10px;
top:5px;
}

blockquote:after {
/*Reset to make sure*/
content: "";
}

blockquote a {
border-bottom: 1px solid;
text-decoration: none;
cursor: pointer;
padding: 0 3px;
color: #a4c400;
transition: color .3s
}

blockquote a:hover {
color: #3a4ecc;
}

blockquote em {
font-style: italic;
}

@media and (min-width: 661px) {
blockquote {
font-size: 2.5em
}
}
</style>

> Estático is an open source static build system created with love at *[Unic AG](https://unic.com)* and crafted together with the community with the purpose of creating static and modular sites, systems, styleguides and/or design systems.