New landing page for Hero project
This commit is contained in:
294
src/templates/projects/landing.pug
Normal file
294
src/templates/projects/landing.pug
Normal file
@@ -0,0 +1,294 @@
|
||||
| {% extends 'layout.html' %}
|
||||
|
||||
| {% block page_title %}{{ project.name }}{% endblock%}
|
||||
|
||||
| {% block og %}
|
||||
meta(property="og:type", content="website")
|
||||
|
||||
| {% if og_picture %}
|
||||
meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}")
|
||||
meta(name="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}")
|
||||
| {% elif node and node.picture %}
|
||||
meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}")
|
||||
meta(name="twitter:image", content="{{ node.picture.thumbnail('l', api=api) }}")
|
||||
| {% elif project.picture_header %}
|
||||
meta(property="og:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
|
||||
meta(name="twitter:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
|
||||
| {% endif %}
|
||||
|
||||
| {% if show_project %}
|
||||
meta(property="og:title", content="{{ project.name }} - Blender Cloud")
|
||||
meta(name="twitter:title", content="{{ project.name }} - Blender Cloud")
|
||||
meta(property="og:description", content="{{ project.summary }}")
|
||||
meta(name="twitter:description", content="{{ project.summary }}")
|
||||
meta(property="og:url", content="{{ url_for('projects.view', project_url=project.url, _external=True) }}")
|
||||
| {% else %}
|
||||
|
||||
| {% if node %}
|
||||
meta(property="og:title", content="{{ node.name }} - Blender Cloud")
|
||||
meta(name="twitter:title", content="{{ node.name }} on Blender Cloud")
|
||||
|
||||
| {% if node.node_type == 'post' %}
|
||||
|
||||
| {% if node.properties.content %}
|
||||
meta(property="og:description", content="{{ node.properties.content | truncate(180) }}")
|
||||
meta(name="twitter:description", content="{{ node.properties.content | truncate(180) }}")
|
||||
| {% else %}
|
||||
meta(property="og:description", content="Blender Cloud, your source for open content and training")
|
||||
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
|
||||
| {% endif %}
|
||||
|
||||
| {% else %}
|
||||
|
||||
| {% if node.description %}
|
||||
meta(property="og:description", content="{{ node.description | truncate(180) }}")
|
||||
meta(name="twitter:description", content="{{ node.description | truncate(180) }}")
|
||||
| {% else %}
|
||||
meta(property="og:description", content="Blender Cloud, your source for open content and training")
|
||||
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
|
||||
| {% endif %}
|
||||
|
||||
| {% endif %}
|
||||
|
||||
meta(property="og:url", content="{{url_for('projects.view_node', project_url=project.url, node_id=node._id)}}")
|
||||
| {% else %}
|
||||
meta(property="og:title", content="{{ project.name }} Blog on Blender Cloud")
|
||||
meta(name="twitter:title", content="{{ project.name }} Blog on Blender Cloud")
|
||||
meta(property="og:description", content="{{ project.summary }}")
|
||||
meta(name="twitter:description", content="{{ project.summary }}")
|
||||
|
||||
meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}")
|
||||
| {% endif %}
|
||||
|
||||
| {% endif %}
|
||||
| {% endblock og %}
|
||||
|
||||
| {% block page_overlay %}
|
||||
#page-overlay.video
|
||||
.video-embed
|
||||
#others
|
||||
| {% endblock %}
|
||||
|
||||
| {% block head %}
|
||||
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}")
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
|
||||
| {% endblock %}
|
||||
|
||||
| {% block css %}
|
||||
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
|
||||
link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet")
|
||||
link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
|
||||
| {% endblock %}
|
||||
|
||||
| {% block body %}
|
||||
header
|
||||
//a(href="{{ url_for( 'projects.view', project_url=project.url) }}")
|
||||
img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
|
||||
|
||||
a.page-card-cta.js-watch-video(
|
||||
href="https://www.youtube.com/watch?v=NwVGvcIrNWA",
|
||||
data-youtube-id="NwVGvcIrNWA")
|
||||
i.pi-play
|
||||
| Watch Film
|
||||
| {% block navbar_secondary %}
|
||||
nav.navbar-secondary
|
||||
.navbar-container
|
||||
nav.collapse.navbar-collapse
|
||||
ul.nav.navbar-nav.navbar-right
|
||||
li
|
||||
a.navbar-item(
|
||||
href="{{ url_for('projects.view', project_url=project.url) }}",
|
||||
title="{{ project.name }} Homepage")
|
||||
span
|
||||
b {{ project.name }}
|
||||
li
|
||||
a.navbar-item(
|
||||
href="{{ url_for('main.project_blog', project_url=project.url) }}",
|
||||
title="Project Blog",
|
||||
class="{% if category == 'blog' %}active{% endif %}")
|
||||
span Blog
|
||||
| {% for p in pages %}
|
||||
li
|
||||
a.navbar-item(
|
||||
href="{{ url_for('projects.view_node', project_url=project.url, node_id=p._id) }}",
|
||||
title="{{ p.name }}",
|
||||
class="{% if category == 'page' %}active{% endif %}")
|
||||
span {{ p.name }}
|
||||
| {% endfor %}
|
||||
li
|
||||
a.navbar-item(
|
||||
href="{{ url_for('projects.view_node', project_url=project.url, node_id='5ad24dd91effe4181aff5930') }}",
|
||||
title="Blender Cloud Blog",
|
||||
class="{% if category == 'blog' %}active{% endif %}")
|
||||
span Explore
|
||||
| {% endblock navbar_secondary %}
|
||||
#container
|
||||
section.node-details-container.project
|
||||
.node-details-title
|
||||
h1 {{ project.name }}
|
||||
|
||||
| {% if project.description %}
|
||||
.node-details-description
|
||||
| {{ project | markdowned('description') }}
|
||||
| {% endif %}
|
||||
|
||||
|
||||
section.gallery
|
||||
h2 Gallery
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type not in ['comment', 'post'] %}
|
||||
.thumbnail.expand-image-links
|
||||
.img-container
|
||||
a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}")
|
||||
img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}")
|
||||
.img-caption.table
|
||||
| {# Not using for the moment
|
||||
span.table-cell {{ n.name }}
|
||||
| #}
|
||||
| {% endif %}
|
||||
| {% endfor %}
|
||||
div(class="clearfix")
|
||||
a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See more
|
||||
|
||||
section.node-extra
|
||||
h2 Latest Updates
|
||||
|
||||
| {% if activity_stream %}
|
||||
.node-updates
|
||||
ul.node-updates-list
|
||||
| {% for n in activity_stream %}
|
||||
| {% if n.node_type == 'post' %}
|
||||
li.node-updates-list-item(
|
||||
data-node_id="{{ n._id }}",
|
||||
class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}")
|
||||
a.image(href="{{ url_for_node(node=n) }}")
|
||||
| {% if n.picture %}
|
||||
img(src="{{ n.picture.thumbnail('l', api=api) }}")
|
||||
| {% endif %}
|
||||
|
||||
.info
|
||||
a.title(href="{{ url_for_node(node=n) }}") {{ n.name }}
|
||||
p.description(href="{{ url_for_node(node=n) }}")
|
||||
| {% if n.node_type == 'post' %}
|
||||
| {{ n.properties | markdowned('content') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
|
||||
| {% else %}
|
||||
| {{ n | markdowned('description') | striptags | truncate(140, end="... <small>read more</small>") | safe | hide_none }}
|
||||
| {% endif %}
|
||||
//span.details
|
||||
// span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} ·
|
||||
// span.when {{ n._updated | pretty_date }} by
|
||||
// span.who {{ n.user.full_name }}
|
||||
| {% endif %}
|
||||
| {% endfor %}
|
||||
| {% endif %}
|
||||
a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates
|
||||
section.social
|
||||
h2 Contact
|
||||
p.
|
||||
Blender Animation Studio
|
||||
ton@blender.org
|
||||
|
||||
Entrepotdok 57A
|
||||
1018 AD Amsterdam
|
||||
the Netherlands
|
||||
ul.footer-social
|
||||
li
|
||||
a(href="https://www.facebook.com/BlenderCloudOfficial/",
|
||||
title="Follow us on Facebook")
|
||||
i.pi-social-facebook
|
||||
li
|
||||
a(href="https://twitter.com/Blender_Cloud",
|
||||
title="Follow us on Twitter")
|
||||
i.pi-social-twitter
|
||||
|
||||
| {% endblock body %}
|
||||
|
||||
|
||||
| {% block footer_scripts %}
|
||||
script.
|
||||
// Click anywhere in the page to hide the overlay
|
||||
function hideOverlay() {
|
||||
$('#page-overlay.video').removeClass('active');
|
||||
$('#page-overlay.video .video-embed').html('');
|
||||
}
|
||||
|
||||
$(document).click(function () {
|
||||
hideOverlay();
|
||||
});
|
||||
|
||||
$(document).keyup(function (e) {
|
||||
if (e.keyCode == 27) {
|
||||
hideOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
$('a.js-watch-video').click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
$('#page-overlay.video').addClass('active');
|
||||
|
||||
var videoId = $(this).attr('data-youtube-id');
|
||||
$('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId + '?rel=0&showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>')
|
||||
});
|
||||
|
||||
function loadNodeContent(url, nodeId) {
|
||||
|
||||
$('#project-loading').addClass('active');
|
||||
$.get(url, function (dataHtml) {
|
||||
// Update the DOM injecting the generate HTML into the page
|
||||
$('#page-overlay').addClass('active');
|
||||
$('#others').html(dataHtml);
|
||||
// $('#project_context').html(dataHtml);
|
||||
})
|
||||
.done(function () {
|
||||
// updateUi(nodeId, 'view');
|
||||
})
|
||||
.fail(function (dataResponse) {
|
||||
$('#project_context').html($('<iframe id="server_error"/>'));
|
||||
$('#server_error').attr('src', url);
|
||||
})
|
||||
.always(function () {
|
||||
$('#project-loading').removeAttr('class');
|
||||
$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
|
||||
});
|
||||
}
|
||||
|
||||
function displayNode(nodeId, pushState) {
|
||||
// Remove the 'n_' suffix from the id
|
||||
if (nodeId.substring(0, 2) == 'n_') {
|
||||
nodeId = nodeId.substr(2);
|
||||
}
|
||||
|
||||
var url = '/nodes/' + nodeId + '/view';
|
||||
loadNodeContent(url, nodeId);
|
||||
|
||||
// Determine whether we should push the new state or not.
|
||||
pushState = (typeof pushState !== 'undefined') ? pushState : true;
|
||||
if (!pushState) return;
|
||||
|
||||
// Push the correct URL onto the history.
|
||||
var push_state = {nodeId: nodeId, url: url};
|
||||
var push_url = '{{url_for("projects.view", project_url=project.url)}}' + nodeId;
|
||||
// console.log('Pushing state ', push_state, ' with URL ', push_url);
|
||||
window.history.pushState(
|
||||
push_state,
|
||||
'Node ' + nodeId, // TODO: use sensible title
|
||||
push_url
|
||||
);
|
||||
}
|
||||
|
||||
$("a[data-node_id]").on( "click", function(e) {
|
||||
// var nodeId = $(this).data('node_id');
|
||||
// displayNode(nodeId);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$('#page-overlay').addClass('active');
|
||||
var url = $(this).attr('href');
|
||||
$('#page-overlay').html('<img src="' + url + '"/>')
|
||||
});
|
||||
|
||||
|
||||
| {% endblock %}
|
||||
Reference in New Issue
Block a user