Skip to content

Commit

Permalink
Introduce blog-cards
Browse files Browse the repository at this point in the history
  • Loading branch information
robingronlund committed Apr 30, 2020
1 parent b71ec7c commit 4a33444
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 155 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@
"@sanity/cli": "^1.149.9",
"lerna": "^3.14.0"
}
}
}
3 changes: 2 additions & 1 deletion studio/config/.checksums
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"#": "Used by Sanity to keep track of configuration file checksums, do not delete or modify!",
"@sanity/default-layout": "bb034f391ba508a6ca8cd971967cbedeb131c4d19b17b28a0895f32db5d568ea",
"@sanity/default-login": "6fb6d3800aa71346e1b84d95bbcaa287879456f2922372bb0294e30b968cd37f",
"@sanity/data-aspects": "d199e2c199b3e26cd28b68dc84d7fc01c9186bf5089580f2e2446994d36b3cb6"
"@sanity/data-aspects": "d199e2c199b3e26cd28b68dc84d7fc01c9186bf5089580f2e2446994d36b3cb6",
"@sanity/form-builder": "b38478227ba5e22c91981da4b53436df22e48ff25238a55a973ed620be5068aa"
}
5 changes: 5 additions & 0 deletions studio/config/@sanity/form-builder.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"images": {
"directUploads": true
}
}
2 changes: 1 addition & 1 deletion studio/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

111 changes: 58 additions & 53 deletions web/src/components/Nav.svelte
Original file line number Diff line number Diff line change
@@ -1,60 +1,65 @@
<script>
export let segment;
export let segment;
</script>

<style>
nav {
border-bottom: 1px solid rgba(255,62,0,0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255,62,0);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: "";
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: "";
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255, 62, 0);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>

<nav>
<ul>
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>

<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>
<ul>
<li>
<a
rel="prefetch"
class={segment === undefined ? 'selected' : ''}
href=".">
blog
</a>
</li>
<li>
<a class={segment === 'about' ? 'selected' : ''} href="about">about</a>
</li>
</ul>
</nav>
7 changes: 7 additions & 0 deletions web/src/getImageUrl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import urlBuilder from "@sanity/image-url";
import client from "./sanityClient";

const builder = urlBuilder(client);
export default function getImageUrl(source) {
return builder.image(source);
}
39 changes: 0 additions & 39 deletions web/src/routes/blog/index.svelte

This file was deleted.

148 changes: 92 additions & 56 deletions web/src/routes/index.svelte
Original file line number Diff line number Diff line change
@@ -1,62 +1,98 @@
<script context="module">
import BlockContent from "@movingbrands/svelte-portable-text";
import serializers from "../components/serializers";
import getImageUrl from "../getImageUrl";
import client from "../sanityClient";
export function preload({ params, query }) {
return client
.fetch(
'*[_type == "post" && defined(slug.current) && publishedAt < now()]|order(publishedAt desc)'
)
.then(posts => {
return { posts };
})
.catch(err => this.error(500, err));
}
</script>

<script>
export let posts;
function formatDate(date) {
return new Date(date).toLocaleDateString();
}
</script>

<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
svg {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
.posts {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
grid-gap: 15px;
}
@media only screen and (min-width: 992px) {
.posts {
grid-template-columns: repeat(2, 1fr);
}
}
.post-item {
display: flex;
align-items: flex-end;
height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.63);
opacity: 1;
transition: 0.2s ease;
backface-visibility: hidden;
}
.post-item:hover {
opacity: 0.8;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.63);
}
.post-item__footer {
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: flex-start;
width: 100%;
background: white;
padding: 15px;
height: 132px;
max-height: 132px;
}
.post-item__title {
color: hotpink;
}
.post-item__date {
font-size: smaller;
align-self: end;
}
</style>

<svelte:head>
<title>Sapper project template</title>
<title>Blog</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svelte" x="0px" y="0px" viewBox="0 0 519 139" style="enable-background:new 0 0 519 139;" xml:space="preserve">
<style type="text/css">
.st0{fill:#159497;}
.st1{fill:#FFFFFF;}
.st2{fill:#4A4A55;}
</style>
<path id="back" class="st0" d="M110.2,28.4C99.8,13.5,79.3,9.1,64.4,18.6L38.4,35.2c-7.1,4.5-12,11.7-13.5,20 c-1.2,6.9-0.2,14,3.1,20.2c-2.2,3.4-3.8,7.2-4.5,11.2c-1.5,8.4,0.5,17.1,5.5,24.1c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6 c7.1-4.5,12-11.7,13.5-20c1.2-6.9,0.1-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C117.2,44.1,115.2,35.5,110.2,28.4"/>
<path id="front" class="st1" d="M61.9,112.2c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.1-0.8,0.4-1.6,0.6-2.4l0.5-1.5 l1.3,1c3.1,2.2,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.7,1.1,3.8c1.5,2.1,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26-16.6 c1.3-0.8,2.2-2.1,2.4-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.1-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3 c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.2-14.5c0.9-5,3.8-9.4,8.1-12.1L72,29.3c1.6-1,3.4-1.8,5.3-2.3 c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1 c0.1-1.4-0.3-2.8-1.1-3.9c-1.5-2.1-4.2-3.1-6.7-2.4c-0.6,0.2-1.1,0.4-1.6,0.7L53.8,57.3c-1.3,0.8-2.2,2.1-2.5,3.6 c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.1,4.1,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2 c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1l-26.1,16.6C65.6,110.9,63.8,111.7,61.9,112.2"/>
<g>
<path class="st2" d="M150.8,85.9l8.3-3.1c2.5,5.4,7.3,9,13.7,9c6.5,0,10.8-3.2,10.8-9.2c0-6.5-6.5-8.8-13.5-11.2 c-8.3-3-17.4-6.2-17.4-17.1c0-8.4,6.9-15.6,19-15.6c10.1,0,16.4,5,18.4,11.8l-8.2,2.7c-1.4-3.4-5.1-6-10.9-6 c-5.7,0-9.1,2.6-9.1,7.2c0,4.9,5.5,6.8,12,9c8.6,3.2,18.8,6.8,18.8,19.2c0,11.4-8.9,17.8-20.4,17.8 C161.9,100.4,153.8,94.8,150.8,85.9z"/>
<path class="st2" d="M241,85.7h-24.1l-4.9,13.7h-9.2l21.5-59.6h9.1L255,99.4h-9.2L241,85.7z M231,57.6c-0.7-1.9-1.6-4.7-2-6.7 c-0.5,2-1.4,4.8-2,6.7l-7.3,20.3h18.6L231,57.6z"/>
<path class="st2" d="M268.3,39.8h23.9c14.6,0,19.7,9.3,19.7,18.2c0,8.3-5.5,18.2-19.7,18.2h-15.1v23.2h-8.9V39.8z M302.8,58 c0-4.2-2.1-9.7-10-9.7h-15.6v19.4h15.6C300.2,67.7,302.8,62.6,302.8,58z"/>
<path class="st2" d="M326,39.8h23.9c14.6,0,19.7,9.3,19.7,18.2c0,8.3-5.5,18.2-19.7,18.2h-15.1v23.2H326V39.8z M360.4,58 c0-4.2-2.1-9.7-10-9.7h-15.6v19.4h15.6C357.9,67.7,360.4,62.6,360.4,58z"/>
<path class="st2" d="M383.7,39.8h37v8.3h-28.1v16.4h18.1v8.3h-18.1V91h30v8.3h-38.8V39.8z"/>
<path class="st2" d="M438.7,39.8h25.1c14.6,0,19.2,8.7,19.2,17.6c0,6.9-3.8,14.5-12.9,16.9l12.3,25.1h-10.1L460.5,75h-12.9v24.4 h-8.9V39.8z M464,66.5c7.4,0,9.9-4.5,9.9-9.1c0-4.2-2-9.1-9.9-9.1h-16.4v18.2H464z"/>
</g>
</svg>
<figcaption>HIGH FIVE!</figcaption>
</figure>

<p><strong>Go to <a href="/blog">/blog</a> to see content loaded from <a href="https://www.sanity.io">Sanity</a></strong></p>
<h1>Recent posts</h1>
<div class="posts">
{#each posts as post}
<a
class="post-item"
rel="prefetch"
href="blog/{post.slug.current}"
style="background-image: url('{getImageUrl(post.mainImage).width(600)}')">
<div class="post-item__footer">
<h3 class="post-item__title">{post.title}</h3>
<BlockContent blocks={post.excerpt} {serializers} />
<span class="post-item__date">({formatDate(post.publishedAt)})</span>
</div>
</a>
{/each}
</div>
13 changes: 10 additions & 3 deletions web/static/global.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
body {
margin: 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333;
}

h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
line-height: 1.2;
Expand All @@ -18,6 +24,7 @@ h1 {

a {
color: inherit;
text-decoration-line: none;
}

code {
Expand All @@ -33,4 +40,4 @@ code {
body {
font-size: 16px;
}
}
}

0 comments on commit 4a33444

Please sign in to comment.