Display latest posts in footer and other links
This commit is contained in:
parent
a9d625be42
commit
dc54f5dd70
@ -38,6 +38,7 @@ export default {
|
|||||||
dedupe,
|
dedupe,
|
||||||
}),
|
}),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
|
svg(),
|
||||||
|
|
||||||
legacy &&
|
legacy &&
|
||||||
babel({
|
babel({
|
||||||
@ -67,7 +68,6 @@ export default {
|
|||||||
terser({
|
terser({
|
||||||
module: true,
|
module: true,
|
||||||
}),
|
}),
|
||||||
svg(),
|
|
||||||
],
|
],
|
||||||
|
|
||||||
onwarn,
|
onwarn,
|
||||||
@ -89,6 +89,7 @@ export default {
|
|||||||
dedupe,
|
dedupe,
|
||||||
}),
|
}),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
|
svg(),
|
||||||
],
|
],
|
||||||
external: Object.keys(pkg.dependencies).concat(
|
external: Object.keys(pkg.dependencies).concat(
|
||||||
require('module').builtinModules ||
|
require('module').builtinModules ||
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { format } from 'date-fns'
|
||||||
import twitterLogo from '../svg/iconfinder_Twitter_4070150.svg'
|
import twitterLogo from '../svg/iconfinder_Twitter_4070150.svg'
|
||||||
import githubLogo from '../svg/iconfinder_github_2561442.svg'
|
import githubLogo from '../svg/iconfinder_github_2561442.svg'
|
||||||
import twitchLogo from '../svg/iconfinder_twitch_306173.svg'
|
import twitchLogo from '../svg/iconfinder_twitch_306173.svg'
|
||||||
import instagramLogo from '../svg/iconfinder_38-instagram_1161953.svg'
|
import instagramLogo from '../svg/iconfinder_38-instagram_1161953.svg'
|
||||||
import emailIcon from '../svg/iconfinder_mail_5474819.svg'
|
import emailIcon from '../svg/iconfinder_mail_5474819.svg'
|
||||||
|
|
||||||
|
export let latestPosts
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -21,6 +24,18 @@
|
|||||||
color: #eae9be;
|
color: #eae9be;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
padding: 0.4em;
|
padding: 0.4em;
|
||||||
|
box-shadow: 1px 3px #959595;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists > section {
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-wrap {
|
.no-wrap {
|
||||||
@ -32,17 +47,18 @@
|
|||||||
color: #eae9be;
|
color: #eae9be;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials {
|
.lists ul {
|
||||||
/* display: flex;
|
|
||||||
align-items: center; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* display: inline-flex; */
|
}
|
||||||
/* align-items: center; */
|
|
||||||
|
.lists li {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists li li {
|
||||||
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-links a span {
|
.social-links a span {
|
||||||
@ -50,11 +66,6 @@
|
|||||||
padding: 0 0.4em;
|
padding: 0 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-links li {
|
|
||||||
/* display: inline-block; */
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email :global(svg path) {
|
.email :global(svg path) {
|
||||||
fill: #eae9be;
|
fill: #eae9be;
|
||||||
}
|
}
|
||||||
@ -89,6 +100,7 @@
|
|||||||
.social-links a {
|
.social-links a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-line {
|
.bottom-line {
|
||||||
@ -97,18 +109,78 @@
|
|||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 700px) {
|
.date {
|
||||||
.social-links a span {
|
font-size: 0.7em;
|
||||||
display: inline;
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 900px) {
|
||||||
|
.lists {
|
||||||
|
flex-direction: row;
|
||||||
|
text-align: start;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links a {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-line {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="no-wrap socials">
|
<div class="lists">
|
||||||
|
<section class="site-map">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/">Introduction</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio">Portfolio</a>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio#personal-information">About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio#skills">Skills</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio#work-history">Work History</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio#projects">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/portfolio#education">Education</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="latest-posts">
|
||||||
|
<h3>
|
||||||
|
<a href="/blog">Latest posts</a>
|
||||||
|
</h3>
|
||||||
|
<ul>
|
||||||
|
{#each latestPosts as post}
|
||||||
|
<li>
|
||||||
|
<a rel="prefetch" href="/blog/{post.slug}">
|
||||||
|
<span>{post.title}</span>
|
||||||
|
<span class="date">
|
||||||
|
- {format(new Date(post.date), 'do MMM, yyyy')}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="socials">
|
||||||
<h3>Contact</h3>
|
<h3>Contact</h3>
|
||||||
<ul class="social-links">
|
<ul class="social-links">
|
||||||
|
|
||||||
<li class="email">
|
<li class="email">
|
||||||
<a href="mailto: michalvankosk@gmail.com" title="E-mail address">
|
<a href="mailto: michalvankosk@gmail.com" title="E-mail address">
|
||||||
{@html emailIcon}
|
{@html emailIcon}
|
||||||
@ -142,6 +214,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<footer class="bottom-line">
|
<footer class="bottom-line">
|
||||||
<span class="no-wrap">Created by @michalvankodev</span>
|
<span class="no-wrap">Created by @michalvankodev</span>
|
||||||
|
@ -1,7 +1,20 @@
|
|||||||
|
<script context="module">
|
||||||
|
import { take } from 'ramda'
|
||||||
|
|
||||||
|
export function preload({ params, query }) {
|
||||||
|
return this.fetch(`blog.json`)
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(posts => {
|
||||||
|
return { latestPosts: take(5, posts) }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Nav from '../components/Nav.svelte'
|
import Nav from '../components/Nav.svelte'
|
||||||
import Footer from '../components/Footer.svelte'
|
import Footer from '../components/Footer.svelte'
|
||||||
export let segment
|
export let segment
|
||||||
|
export let latestPosts
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -24,5 +37,5 @@
|
|||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer {latestPosts} />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user