Added showcase

This commit is contained in:
Armin Ronacher 2015-12-27 21:46:27 +01:00
parent 318ccdde55
commit 06a3f32639
21 changed files with 240 additions and 1 deletions

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,20 @@
name: Architekten Ronacher
---
url: http://www.architekten-ronacher.at/
---
cover_image: frontpage.jpg
---
description:
This website is what originally inspired Lektor. At the center of project was
the idea to bring the photos of the projects in the foreground and to render
them out as full-size images with info text on top and optional additional
project information below the fold.
To achieve uniformity between the different projects a predefined structure for
all of the was defined. Editors just upload pictures and fill out the form to
add a new project. Lektor automatically generates out the necessary thumbnails
and builds the overview pages.
Minimal use of JavaScript is used to drive the slideshows and the filter on
the overview page.

Binary file not shown.

After

Width:  |  Height:  |  Size: 612 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 KiB

View File

@ -0,0 +1,15 @@
name: Atelier Ronacher
---
url: https://www.atelier-ronacher.at/
---
cover_image: frontpage.jpg
---
description:
Based on the design and general concept behind the website of [Architekten
Ronacher :ref](../architekten-ronacher/) a second project was created for a
vacation rental website. It uses Lektor to present itself the apartments and
the area surrounding it.
Because this is for a rental it also embeds external services like Google
Maps and a booking engine.

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 714 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

View File

@ -0,0 +1 @@
_model: showcase

View File

@ -0,0 +1,13 @@
name: Lektor Website
---
url: https://www.getlektor.com/
---
cover_image: frontpage.png
---
description:
This is the website of the Lektor CMS itself. It's the very website you are
looking at right now. What's special about this one is that it's structure
and content is available on GitHub so you can see how it's built.
[View the Sourcecode on GitHub](https://github.com/lektor/lektor-website)

Binary file not shown.

After

Width:  |  Height:  |  Size: 669 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

@ -6,6 +6,10 @@ label = Download
path = /docs
label = Documentation
[poweredby]
path = /showcase
label = Showcase
[blog]
path = /blog
label = Blog

24
models/showcase-site.ini Normal file
View File

@ -0,0 +1,24 @@
[model]
name = Site
label = {{ this.name }}
hidden = yes
[fields.name]
label = Name
type = string
size = large
[fields.url]
label = URL
type = url
width = 1/2
[fields.cover_image]
label = Cover Image
type = select
source = record.attachments.images
width = 1/2
[fields.description]
label = Description
type = markdown

8
models/showcase.ini Normal file
View File

@ -0,0 +1,8 @@
[model]
name = Showcase
label = Showcase
hidden = yes
[children]
model = showcase-site
order_by = name

5
templates/poweredby.html Normal file
View File

@ -0,0 +1,5 @@
{% extends "layout.html" %}
{% block title %}Powered By{% endblock %}
{% block body %}
<h1>Powered By</h1>
{% endblock %}

View File

@ -0,0 +1,49 @@
{% extends "layout.html" %}
{% block title %}{{ this.name }}{% endblock %}
{% block outerbody %}
<div class="container showcase-site">
<div class="row">
<div class="back-link">
<a href="{{ this.parent|url }}">Back to Showcase</a>
</div>
<h1>{{ this.name }}</h1>
<p class="site-link"><a href="{{ this.url }}">{{ this.url.host }}</a>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
{{ this.description }}
</div>
</div>
</div>
<div class="slideshow-wrapper">
<div class="slideshow">
<div class="slideshow-inner">
<div class="carousel slide" data-ride="carousel" data-interval="8500" id="site-slides">
<ol class="carousel-indicators">
{% for slide in this.attachments.images %}
<li data-target="#site-slides" data-slide-to="{{ loop.index0 }}"{%
if loop.first %} class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner" role="listbox">
{% for image in this.attachments.images %}
<div class="item slide{% if loop.first %} active{% endif %}">
<div class="container">
<img class="large" src="{{ image|url }}">
</div>
</div>
{% endfor %}
</div>
<a class="left carousel-control" href="#site-slides" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#site-slides" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
{% endblock %}

29
templates/showcase.html Normal file
View File

@ -0,0 +1,29 @@
{% extends "layout.html" %}
{% block title %}Showcase{% endblock %}
{% block body %}
<h1>Showcase</h1>
<p>
Want to see what Lektor is used for? This should give you a brief overview
of what projects are built on the basis of Lektor. We take good care of
ensuring this list stays up to date by carefully moderating it.
<p>
Click any of the showcases to learn a bit more about how it uses Lektor.
<div class="showcase row">
{% for project in this.children %}
<div class="project col-md-6">
<a href="{{ project|url }}">
<h2>{{ project.name }}</h2>
{% if project.cover_image %}
{% set image = project.attachments.get(project.cover_image) %}
<div class="frame"><img src="{{ image.thumbnail(480)|url }}" width="100%" alt=""></div>
{% endif %}
</a>
</div>
{% endfor %}
</div>
<p>
<small>You want your own website on here? <a
href="https://github.com/lektor/lektor-website/tree/master/content/showcase">For
the Lektor Website Repository on GitHub</a> to add your own project. Make sure to
add screenshots and a description about the project.
{% endblock %}

View File

@ -117,6 +117,10 @@ div.slideshow {
background: transparent!important;
}
.carousel-indicators li {
box-shadow: 0 0 4px $gray, 0 0 2px $gray;
}
div.slide {
div.container {
position: relative;
@ -151,6 +155,11 @@ div.slideshow {
height: auto;
width: 100%;
}
&.large {
width: 100%;
height: auto;
}
}
}
}
@ -377,6 +386,7 @@ div.screenshot-frame {
background: white url(../images/swirl.png);
background-size: 256px 256px;
border-radius: 10px;
img {
width: 100%;
border-radius: 5px;
@ -695,6 +705,67 @@ div.admonition {
}
}
div.showcase {
div.project {
> a {
display: block;
padding: 10px;
margin: 15px 0;
background: lighten($gray, 20) url(../images/mesh.png);
background-size: 256px 256px;
text-decoration: none;
border-radius: 3px;
h2 {
margin: 0 0 10px 0;
text-align: center;
padding: 0;
font-size: 24px;
color: white;
}
img {
box-shadow: 0 0 6px #444;
}
.frame {
background: white;
}
&:hover {
box-shadow: inset 0 0 10px $gray;
img {
opacity: 0.9;
box-shadow: 0 0 10px #444, 0 0 5px #444;
}
}
}
}
}
div.showcase-site {
div.back-link {
margin: 15px 0 15px 10px;
text-align: left;
a {
&:before {
content: "« ";
}
}
}
h1 {
text-align: center;
}
p.site-link {
text-align: center;
margin: 15px 0 25px 0;
text-decoration: underline;
}
}
/* search */
div.doc-styling div.gsc-control-cse {
font-family: $font-family-base!important;