Added showcase

content/showcase/architekten-ronacher/contents.lr

@@ -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.

content/showcase/atelier-ronacher/contents.lr

@@ -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.

content/showcase/contents.lr

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

content/showcase/lektor-website/contents.lr

@@ -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)

databags/menu.ini

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

models/showcase-site.ini

@@ -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

models/showcase.ini

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

templates/poweredby.html

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

templates/showcase-site.html

@@ -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 %}

templates/showcase.html

@@ -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 %}

webpack/scss/main.scss

@@ -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;