update

src/client/components/Article.js

@@ -8,8 +8,31 @@ export default function (app) {
         template: template,
         controllerAs: '$',
         controller: function ($sce) {
-            this.message = $sce.trustAsHtml(this.post.post);
+			//this.message = $sce.trustAsHtml(this.post.post);
             this.url = `/article/${this.post.id}`;
+
+			const isVertical = ({width, height}) => width < height;
+
+			const temp = document.createElement('div');
+			temp.innerHTML = this.post.post;
+
+			const vs = [...temp.querySelectorAll('img')]
+				.filter(isVertical)
+				.filter(i => i.parentNode)
+				.map(i => [i.parentNode, i])
+				.map(([container, img]) => {
+					const url = img.src;
+
+					const elem = document.createElement('div');
+					elem.innerHTML = `<div class="vertical-image">
+							<div class="vertical-image__back"><img src="${url}" alt="" /></div>
+							<img src="${url}" alt="" />
+						</div>`;
+
+					return container.replaceChild(elem, img);
+				});
+
+			this.message = $sce.trustAsHtml(temp.innerHTML);
         }
     });
 };

src/client/main.js

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom'
+import {Copyright} from './components/Copyright'
+
+ReactDOM.render(<Copyright props={{now: 'hi'}}/>, document.querySelector('.body-wrapper'))
+
+//<react-component name="Copyright" props="now" watch-depth="reference"/>

src/routes/gallery.js

@@ -45,7 +45,8 @@ function album() {
 const processAlbum = async album => {
     album.url = `/album/${album.id}`;
 
-    const previewImageId = album.images.length ? album.images[0] : null;
+    const previewFromImage = imgs => imgs.length ? imgs[0] : null;
+    const previewImageId = album.preview ? album.preview : previewFromImage(album.images);
     if (previewImageId) {
         const image = await c('images').findOne({_id: previewImageId});
         album.preview = image.data.medium;

src/routes/news.js

@@ -26,11 +26,8 @@ function news() {
             const limit = parseInt(ctx.query['limit']) || 20;
             const skip = parseInt(ctx.query['skip']) || 0;
 
-            const query = {};
-            if (ctx.query.type) query.type = ctx.query.type;
-
             const now = new Date();
-            const pinned = skip != 0 ? [] : await c('timeline')
+			const pinned = skip !== 0 ? [] : await c('timeline')
                 .find({until: {$gte: now}})
                 .toArray();
 
@@ -38,18 +35,18 @@ function news() {
             const pinnedIds = pinned.map(id);
 
             let posts = await c('timeline')
-                .find(query)
+				.find({
+					_id: {$nin: pinnedIds}
+				})
                 .sort({date: -1})
                 .skip(skip)
                 .limit(limit)
                 .toArray();
 
-            ctx.body = [
-                ...pinned.sort(sortNewsByDate),
-                ...posts.filter(
-                    i => !pinnedIds.includes(id(i))
-                )
-            ];
+			ctx.body = [
+				...pinned.sort(sortNewsByDate),
+				...posts
+			];
         }
     }));
 }

src/style/body-wrapper.scss

@@ -9,6 +9,24 @@
 
 .body-wrapper__content {
   margin: 0 auto 0;
+
+  a {
+    color: $dark-color;
+    text-decoration: none;
+    border-bottom: 1px solid lighten($dark-color, 10%);
+
+    &:hover {
+      border-bottom: 1px solid lighten($dark-color, 25%);
+    }
+
+    &:active {
+      border-bottom: 1px solid $dark-color;
+    }
+
+    &.invisible {
+      border-bottom: none;
+    }
+  }
 }
 
 @media (max-width: $mobile-width) {

src/style/components/cloud-page.scss

@@ -4,21 +4,6 @@
   margin-bottom: $post-margin;
 
   &__body{
-
-    a {
-      color: $dark-color;
-      text-decoration: none;
-      border-bottom: 1px solid lighten($dark-color, 10%);
-
-      &:hover {
-        border-bottom: 1px solid lighten($dark-color, 25%);
-      }
-
-      &:active {
-        border-bottom: 1px solid $dark-color;
-      }
-    }
-
     h1{
       text-align: center;
       margin-bottom: $single-margin;

src/style/components/navigation.scss

@@ -19,6 +19,7 @@
 
 .navigation__right {
   color: $dark-color;
+  font-size: $smaller-font-size;
   margin-right: 1em;
 
   z-index: 1000;

src/style/page.scss

@@ -1,6 +1,10 @@
 .page {
   width: 100%;
 
+  & img{
+    width: 100%;
+  }
+
   &.ng-leave {}
   &.ng-enter {}
 }

src/style/style.scss

@@ -27,6 +27,7 @@
 @import "page-animation";
 @import "main-image";
 @import "hudozka-title";
+@import "vertical-image";
 
 @import "schedule-selector";
 @import "schedule-mobile";

src/style/vertical-image.scss

@@ -0,0 +1,28 @@
+@import "variables";
+
+.vertical-image {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  & > img {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+  }
+
+  &__back {
+    position: absolute;
+    filter: blur(15px) grayscale(0) opacity(.75);
+
+    top: -50%;
+
+    & > img {
+      width: 105%;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+}

src/templates/main.html

@@ -23,12 +23,8 @@
     <link rel="stylesheet" href="/fonts/PTSans/stylesheet.css">
     <link rel="stylesheet" href="/fonts/PTSerif/stylesheet.css">
 
-    <script src="/libs.js"></script>
 
     <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
-    <script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
-
-    <script src="/app.js"></script>
 
     <script>
         if(window.location.host.indexOf('localhost') === -1){
@@ -98,4 +94,11 @@
 </body>
 {{{{/raw-helper}}}}
 
+<script src="/libs.js"></script>
+<script src="/app.js"></script>
+<!--<script src="/main.js"></script>-->
+<!--<script src="/react.js"></script>-->
+<!--<script src="/react-dom.min.js"></script>-->
+<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
+
 </html>