[www] Collective/Person pages updated

src/components/CollectiveImage.js

@@ -0,0 +1,9 @@
+const React = require('react')
+
+module.exports = ({data}) => (
+	<img
+		className="CollectiveImage"
+		width="100%"
+		src={data.src}
+	/>
+)

src/components/Image.js

@@ -0,0 +1,12 @@
+const React = require('react')
+
+module.exports = ({data, alt, opa = true}) => (
+	<picture>
+		<img
+			className={opa ? 'opa' : ''}
+			alt={alt}
+			src={data.src}
+			srcSet={data.set.map(({url, density}) => `${url} ${density}x`)}
+		/>
+	</picture>
+)

src/components/TeacherCard.js

@@ -0,0 +1,37 @@
+const React = require('react')
+const Image = require('./Image')
+
+const Head = ({url, children}) => (
+	<h2>
+		<a href={url}>{children}</a>
+	</h2>
+)
+
+const Info = ({children}) => (
+	<div className="Article Article--cloud">
+		<div className="Article-Body">
+			{children}
+		</div>
+	</div>
+)
+
+module.exports = ({picture, name, url, profile}) => (
+	<div className="TeacherCard">
+		<div className="TeacherCard-Picture">
+			<Image data={picture}/>
+		</div>
+
+		<div className="TeacherCard-Info">
+			<Head url={url}>
+				<span>{name[0]} {name[1]}</span> <strong>{name[2]}</strong>
+			</Head>
+
+			<Info>
+				<p className="TeacherCard-Position"><i><strong>{profile.position}</strong></i></p>
+				<p>{profile.status}</p>
+				<p>Образование: {profile.edu}</p>
+				<p>Диплом: <i>{profile.diploma}</i></p>
+			</Info>
+		</div>
+	</div>
+)

src/components/TeacherProfile.js

@@ -15,17 +15,6 @@ const TeacherProfile = ({picture, name, url, profile, biography, shareable}) =>
 		</div>
 
 		<div className="teacher-profile__info">
-			<Head url={url}>
-				<span>{name[0]} {name[1]}</span> <strong>{name[2]}</strong>
-			</Head>
-
-			<div>
-				<p className="teacher-profile__position"><i><strong>{profile.position}</strong></i></p>
-				<p>{profile.status}</p>
-				<p>Образование: {profile.edu}</p>
-				<p>Диплом: <i>{profile.diploma}</i></p>
-			</div>
-
 			<div className="teacher-profile__biography">
 				{getHtml(biography)}
 			</div>

src/core/Config.js

@@ -24,6 +24,7 @@ class Config {
 		this.articlesPerPage = data.articlesPerPage || 5
 		this.collectiveOrder = data.collectiveOrder || []
 		this.articleCardDefaultPreview = data.articleCardDefaultPreview
+		this.collectiveImage = data.collectiveImage
 
 		this.redirect = new Map(Object
 			.entries(data.redirect)

src/core/Image.js

@@ -47,16 +47,18 @@ class Image {
 
 		const a = this.getArtifact(size)
 		const a2 = this.getArtifact(retinaSize)
+		const srcset = !a2
+			? null
+			: [{
+				url: a2.url,
+				density: ImageArtifactType.RETINA_DENSITY,
+			}]
+
 		return {
 			src: a.url,
 			width: a.width,
 			height: a.height,
-			set: [
-				{
-					url: a2.url,
-					density: ImageArtifactType.RETINA_DENSITY,
-				}
-			]
+			set: srcset,
 		}
 	}
 }

src/core/ImageArtifactType.js

@@ -7,7 +7,8 @@ class ImageArtifactType {
 ImageArtifactType.SMALL = 'small'
 ImageArtifactType.MEDIUM = 'medium'
 ImageArtifactType.BIG = 'big'
-ImageArtifactType.ORIGIN = 'origin'
+ImageArtifactType.ORIGIN = 'original'
+ImageArtifactType.ORIGINAL = 'original'
 
 ImageArtifactType.FACEBOOK = 'fb'
 

src/core/Teacher.js

@@ -20,7 +20,7 @@ class Teacher {
 
 	constructor(data) {
 		this.id = data.id
-		this.biography = data.biography
+		this.post = data.post
 		this.file = data.file
 		this.edu = data.edu
 		this.picture = data.picture

src/render/persons.js

@@ -0,0 +1,107 @@
+const React = require('react')
+const Picture = require('../components/Image')
+const CollectiveImage = require('../components/CollectiveImage')
+const Page = require('../components/Page')
+const TeacherCard = require('../components/TeacherCard')
+const {render} = require('../lib/render')
+const timestamp = require('../lib/date').timestamp
+const ImageArtifactType = require('../core/ImageArtifactType')
+const Teacher = require('../core/Teacher')
+const Image = require('../core/Image')
+const Config = require('../core/Config')
+const {sortBy} = require('../utils/sort')
+const {prioritySort} = require('../lib/sort')
+
+function getMeta(teacher) {
+	return {
+		title: teacher.name,
+		description: teacher.name,
+	}
+}
+
+function getCollectiveMeta() {
+	return {
+		title: 'Преподаватели',
+		description: 'Преподаватели Шлиссельбургской ДХШ',
+	}
+}
+
+// function getMeta(article) {
+// 	const types = [
+// 		ImageArtifactType.FACEBOOK,
+// 		ImageArtifactType.MEDIUM,
+// 		ImageArtifactType.BIG,
+// 		ImageArtifactType.ORIGIN,
+// 	]
+// 	const meta = {
+// 		title: article.title,
+// 	}
+//
+// 	if (article.preview) {
+// 		try {
+// 			const artifact = article.preview.findArtifact(types)
+// 			meta.image = artifact.url
+// 			meta.imageWidth = artifact.width
+// 			meta.imageHeight = artifact.height
+// 		} catch (error) {
+// 			meta.image = 'https://art.shlisselburg.org/entrance.jpg'
+// 			meta.imageWidth = 1200
+// 			meta.imageHeight = 630
+// 		}
+// 	}
+// 	return meta
+// }
+
+async function renderPerson(id) {
+	const teacher = await Teacher.findById(id)
+	if (!teacher) return null
+
+	const Component = (
+		<div className="content content_thin">
+			<Page shareable={true}>{teacher.post}</Page>
+		</div>
+	)
+
+	return render(teacher.url, Component, getMeta(teacher), {commentsEnabled: true, menuPadding: true})
+}
+
+const profilePicture = profile => profile.picture.getPicture(ImageArtifactType.BIG)
+
+async function renderCollective(path, order) {
+	const config = await Config.findConfig()
+	if (!config) return null
+
+	const preview = await Image.findByFile(config.collectiveImage)
+	if (!preview) return null
+
+	let teachers = await Teacher.find({})
+	if (!teachers) return null
+
+	const teachersSorted = prioritySort.bind(null, [...order], t => t.id)
+	teachers = teachersSorted(teachers)
+
+	const image = preview.getPicture(ImageArtifactType.ORIGINAL)
+
+	const Component = (
+		<div className="page-collective content content_full">
+			<CollectiveImage data={image}/>
+
+			<div className="content content_semi-wide">
+				{teachers.map((teacher, index) => (
+					<TeacherCard
+						key={index}
+						profile={teacher}
+						picture={profilePicture(teacher)}
+						url={teacher.url}
+						name={teacher.splitName()}
+					/>
+				))}
+			</div>
+		</div>
+	)
+
+	return render(path, Component, getCollectiveMeta())
+}
+
+exports.renderPerson = renderPerson
+exports.renderCollective = renderCollective

src/routes/teachers.js

@@ -1,69 +1,15 @@
-const React = require('react')
-const Article = require('../components/Article')
-const TeacherProfile = require('../components/TeacherProfile')
-const Teacher = require('../core/Teacher')
-const ImageArtifactType = require('../core/ImageArtifactType')
-const {render} = require('../lib/render')
-const {prioritySort} = require('../lib/sort')
 const getPathWithNoTrailingSlash = require('../lib/url').getPathWithNoTrailingSlash
-
+const {renderPerson, renderCollective} = require('../render/persons')
 const {get} = require('koa-route')
 
-function getCollectiveMeta() {
-	return {
-		title: 'Преподаватели',
-		description: 'Преподаватели Шлиссельбургской ДХШ',
-	}
-}
-
-function getMeta(teacher) {
-	return {
-		title: teacher.name,
-		description: teacher.name,
-	}
-}
-
-const pictureTypes = [
-	ImageArtifactType.BIG,
-	ImageArtifactType.MEDIUM,
-	ImageArtifactType.ORIGIN,
-]
-
-const profilePicture = profile => profile.picture.findArtifact(pictureTypes)
-
 function getCollective(order) {
-	const teachersSorted = prioritySort.bind(null, order, t => t.id)
-
 	return get('/collective', async ctx => {
 		const path = getPathWithNoTrailingSlash(ctx.path)
-		let teachers = await Teacher.find({})
-
-		if (teachers) {
-			teachers = teachersSorted(teachers)
-
-			const Component = (
-				<div className="page-collective content content_full">
-					<img className="page-collective__collective-image"
-						 width="100%"
-						 src="https://static.shlisselburg.org/art/graphics/collective.jpg"
-					/>
-
-					<div className="content content_semi-wide">
-						{teachers.map((teacher, index) => (
-							<TeacherProfile key={index}
-											profile={teacher}
-											picture={profilePicture(teacher)}
-											url={teacher.url}
-											biography={teacher.biography}
-											name={teacher.splitName()}
-							/>
-						))}
-					</div>
-				</div>
-			)
+		const body = await renderCollective(path, order)
 
+		if (body) {
 			ctx.type = 'text/html'
-			ctx.body = await render(path, Component, getCollectiveMeta(), {menuPadding: false})
+			ctx.body = body
 		} else {
 			ctx.status = 404
 		}
@@ -72,23 +18,11 @@ function getCollective(order) {
 
 function getTeacher() {
 	return get('/teacher/:id', async (ctx, id) => {
-		const path = getPathWithNoTrailingSlash(ctx.path)
-		const teacher = await Teacher.findById(id)
-
-		if (teacher) {
-			const Component = (
-				<div className="content content_semi-wide">
-					<TeacherProfile profile={teacher}
-									picture={profilePicture(teacher)}
-									biography={teacher.biography}
-									name={teacher.splitName()}
-									shareable={true}
-					/>
-				</div>
-			)
+		const body = await renderPerson(id)
 
+		if (body) {
 			ctx.type = 'text/html'
-			ctx.body = await render(path, Component, getMeta(teacher), {commentsEnabled: true})
+			ctx.body = body
 		} else {
 			ctx.status = 404
 		}

src/style/components/CollectiveImage.scss

@@ -0,0 +1,3 @@
+.CollectiveImage {
+  margin-bottom: var(--double-margin);
+}

src/style/components/TeacherCard.scss

@@ -3,13 +3,13 @@
 $picture-width: 30%;
 $info-width: 100% - $picture-width;
 
-.teacher-profile {
+.TeacherCard {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 
-  &__picture {
-    margin: 0 0 $double-margin;
+  &-Picture {
+    margin-bottom: var(--double-margin);
     width: $picture-width;
     max-width: 15em;
     min-width: 12em;
@@ -19,47 +19,29 @@ $info-width: 100% - $picture-width;
     }
   }
 
-  &__info {
+  &-Info {
     width: $info-width;
 
-    padding-left: $double-margin;
-    margin: 0 0 $double-margin;
+    padding-left: var(--double-margin);
+    margin-bottom: var(--double-margin);
     box-sizing: border-box;
-
-    h2 {
-      font-size: $big-font-size;
-      font-weight: 200;
-      text-align: left;
-
-      strong {
-        font-weight: 600;
-      }
-    }
   }
 
-  &__position {
+  &-Position {
     font-size: $bigger-font-size;
   }
-
-  &__biography {
-    margin-top: $double-margin;
-
-    p {
-      margin-bottom: $single-margin;
-    }
-  }
 }
 
 @media (max-width: $mobile-width) {
-  .teacher-profile {
-    margin: 0 auto $double-margin;
+  .TeacherCard {
+    margin: 0 auto var(--double-margin);
 
-    &__picture {
+    &-Picture {
       width: 100%;
       max-width: $mobile-width;
     }
 
-    &__info {
+    &-Info {
       width: 100%;
       padding-left: 0;
     }

src/style/hmenu.scss

@@ -15,7 +15,6 @@ $hmenu-icon-height: 32px;
 
   width: 100%;
   height: 100%;
-  padding: 0 0 $half-margin;
 
   position: relative;
 

src/style/style.scss

@@ -3,7 +3,6 @@
 @import "components/document";
 @import "components/document-row";
 @import "components/documents-container";
-@import "components/teacher-proifile";
 @import "components/main-menu";
 @import "components/navigation";
 @import "components/breadcrumbs";
@@ -23,6 +22,8 @@
 
 @import "components/ArticleCard";
 @import "components/ArticleCardList";
+@import "components/CollectiveImage";
+@import "components/TeacherCard";
 
 @import "main";
 @import "body-wrapper";