What a refactor of articles
This commit is contained in:
@ -1,169 +0,0 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css'
|
||||
import { radialGradient, rgba, transparentize } from 'polished'
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
import {
|
||||
breakpoints,
|
||||
colors,
|
||||
mediaAt,
|
||||
menuBackground,
|
||||
transparent,
|
||||
vars,
|
||||
} from '$lib/styles/vars.css'
|
||||
|
||||
export const siteFooterClass = style([
|
||||
sprinkles({
|
||||
fontSize: { mobile: 'base', desktop: 'sm' },
|
||||
paddingX: '2x',
|
||||
paddingTop: '1x',
|
||||
color: 'menuLink',
|
||||
}),
|
||||
|
||||
radialGradient({
|
||||
colorStops: [
|
||||
`${menuBackground} 56%`,
|
||||
`${transparentize(0.4, menuBackground)} 100%`,
|
||||
],
|
||||
extent: '160% 100% at 100% 100%',
|
||||
fallback: transparent,
|
||||
}),
|
||||
{
|
||||
'@media': {
|
||||
[mediaAt(breakpoints.m)]: radialGradient({
|
||||
colorStops: [
|
||||
`${menuBackground} 48%`,
|
||||
`${transparentize(1, menuBackground)} 100%`,
|
||||
],
|
||||
extent: '140% 100% at 100% 100%',
|
||||
fallback: transparent,
|
||||
}),
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const headerClass = sprinkles({
|
||||
fontWeight: 'bold',
|
||||
fontSize: 'base',
|
||||
color: 'menuLink',
|
||||
margin: 'none',
|
||||
lineHeight: '3x',
|
||||
marginBottom: '1x',
|
||||
})
|
||||
|
||||
export const sectionListsClass = style([
|
||||
sprinkles({
|
||||
display: 'grid',
|
||||
justifyItems: { mobile: 'center', desktop: 'start' },
|
||||
textAlign: { mobile: 'center', desktop: 'start' },
|
||||
maxWidth: 'max',
|
||||
columnGap: '3x',
|
||||
margin: 'auto',
|
||||
}),
|
||||
{
|
||||
'@media': {
|
||||
[mediaAt(breakpoints.l)]: {
|
||||
gridTemplateColumns: 'auto auto auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
export const sectionListSectionClass = sprinkles({
|
||||
marginY: '3x',
|
||||
})
|
||||
|
||||
export const listUlClass = sprinkles({
|
||||
listStyle: 'none',
|
||||
padding: 'none',
|
||||
margin: 'none',
|
||||
})
|
||||
|
||||
export const listLiClass = sprinkles({
|
||||
marginLeft: '1x',
|
||||
})
|
||||
|
||||
export const nestedListLiClass = style([
|
||||
listLiClass,
|
||||
sprinkles({
|
||||
fontSize: 'sm',
|
||||
}),
|
||||
])
|
||||
|
||||
export const socialLinkLabelClass = sprinkles({
|
||||
paddingX: '1x',
|
||||
})
|
||||
|
||||
export const svgClass = style({
|
||||
fill: vars.color.menuLink,
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
})
|
||||
|
||||
export const strokeSvgClass = style([
|
||||
svgClass,
|
||||
{
|
||||
stroke: vars.color.menuLink,
|
||||
strokeWidth: '2px',
|
||||
},
|
||||
])
|
||||
|
||||
export const socialLinkClass = sprinkles({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: {
|
||||
mobile: 'center',
|
||||
desktop: 'start',
|
||||
},
|
||||
})
|
||||
|
||||
export const bottomLineClass = sprinkles({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginX: 'auto',
|
||||
paddingBottom: '1x',
|
||||
marginTop: '2x',
|
||||
maxWidth: 'max',
|
||||
})
|
||||
|
||||
export const dateClass = sprinkles({
|
||||
fontSize: 'xs',
|
||||
whiteSpace: 'nowrap',
|
||||
})
|
||||
|
||||
export const boldClass = sprinkles({
|
||||
fontWeight: 'bold',
|
||||
})
|
||||
|
||||
export const hrClass = style([
|
||||
sprinkles({
|
||||
marginY: '2x',
|
||||
marginX: '1x',
|
||||
}),
|
||||
{
|
||||
color: rgba(colors.midnightBlue, 0.14),
|
||||
borderWidth: '1px 0 0',
|
||||
},
|
||||
])
|
||||
|
||||
export const licenceText = sprinkles({
|
||||
textAlign: 'center',
|
||||
width: 'parent',
|
||||
fontSize: 'xs',
|
||||
})
|
||||
|
||||
export const latestPostsClass = style({})
|
||||
|
||||
globalStyle(`${siteFooterClass} a`, {
|
||||
color: vars.color.menuLink,
|
||||
})
|
||||
|
||||
globalStyle(`${headerClass} a:link, ${headerClass} a:visited`, {
|
||||
color: vars.color.menuLink,
|
||||
})
|
||||
|
||||
globalStyle(`${siteFooterClass} a:hover`, {
|
||||
color: vars.color.menuLinkHover,
|
||||
})
|
||||
|
||||
globalStyle(`${latestPostsClass} li a:visited:not(:hover)`, {
|
||||
color: vars.color.linkVisited,
|
||||
})
|
||||
@ -1,199 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import type { PostContent } from 'src/routes/blog/content'
|
||||
import SvgIcon from './SvgIcon.svelte'
|
||||
import {
|
||||
boldClass,
|
||||
bottomLineClass,
|
||||
dateClass,
|
||||
headerClass,
|
||||
hrClass,
|
||||
latestPostsClass,
|
||||
listLiClass,
|
||||
listUlClass,
|
||||
nestedListLiClass,
|
||||
sectionListsClass,
|
||||
sectionListSectionClass,
|
||||
siteFooterClass,
|
||||
socialLinkClass,
|
||||
socialLinkLabelClass,
|
||||
strokeSvgClass,
|
||||
svgClass,
|
||||
licenceText,
|
||||
} from './Footer.css'
|
||||
|
||||
export let latestPosts: PostContent[]
|
||||
</script>
|
||||
|
||||
<footer class="site-footer navigation-theme {siteFooterClass}">
|
||||
<div class="lists {sectionListsClass}">
|
||||
<section class="site-map {sectionListSectionClass}">
|
||||
<ul class={listUlClass}>
|
||||
<li class={listLiClass}>
|
||||
<a href="/">Introduction</a>
|
||||
</li>
|
||||
<li class={listLiClass}>
|
||||
<a href="/portfolio">Portfolio</a>
|
||||
<ul class={listUlClass}>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#personal-information">About</a>
|
||||
</li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#skills">Skills</a>
|
||||
</li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#work-history">Work History</a>
|
||||
</li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#projects">Projects</a>
|
||||
</li>
|
||||
<li class={nestedListLiClass}>
|
||||
<a href="/portfolio#education">Education</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="latest-posts {sectionListSectionClass} {latestPostsClass}">
|
||||
<h3 class={headerClass}>
|
||||
<a href="/blog">Latest posts</a>
|
||||
</h3>
|
||||
<ul class={listUlClass}>
|
||||
{#each latestPosts as post}
|
||||
<li class={listLiClass}>
|
||||
<a rel="prefetch" href="/blog/{post.slug}">
|
||||
<span>{post.title}</span>
|
||||
<time class="date {dateClass}" datetime={post.date}>
|
||||
- {format(new Date(post.date), 'do MMM, yyyy')}
|
||||
</time>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<hr class={hrClass} />
|
||||
<section class="subscribe {boldClass}">
|
||||
<a href="/feed.xml" rel="external" title="RSS feed" class="rss">
|
||||
Subscribe
|
||||
<SvgIcon name="rss" className={svgClass} />
|
||||
</a>
|
||||
<a
|
||||
href="/feed.json"
|
||||
rel="external"
|
||||
title="JSON feed"
|
||||
class="json-feed"
|
||||
aria-label="Subscribe with JSON feed"
|
||||
>
|
||||
<SvgIcon name="json-feed" className={svgClass} />
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
<section class="socials {sectionListSectionClass}">
|
||||
<h3 class={headerClass}>Contact</h3>
|
||||
<ul class="social-links {listUlClass}">
|
||||
<li class="email {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="mailto: michalvankosk@gmail.com"
|
||||
title="E-mail address"
|
||||
>
|
||||
<SvgIcon name="mail" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>michalvankosk@gmail.com</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://twitter.com/michalvankodev"
|
||||
title="Twitter profile"
|
||||
>
|
||||
<SvgIcon name="twitter" className={strokeSvgClass} />
|
||||
<span class={socialLinkLabelClass}>Twitter</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="github {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://github.com/michalvankodev"
|
||||
title="Github profile"
|
||||
>
|
||||
<SvgIcon name="github" className={strokeSvgClass} />
|
||||
<span class={socialLinkLabelClass}>Github</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="linkedin {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://www.linkedin.com/in/michal-vanko-dev/"
|
||||
title="LinkedIn profile"
|
||||
>
|
||||
<SvgIcon name="linkedin" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitch {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://twitch.tv/michalvankodev"
|
||||
title="Twitch profile"
|
||||
>
|
||||
<SvgIcon name="twitch" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>Twitch</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="instagram {listLiClass}">
|
||||
<a
|
||||
class={socialLinkClass}
|
||||
href="https://www.instagram.com/michalvankodev/"
|
||||
title="Instagram profile"
|
||||
>
|
||||
<SvgIcon name="instagram" className={svgClass} />
|
||||
<span class={socialLinkLabelClass}>Instagram</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class={bottomLineClass}>
|
||||
<p
|
||||
class={licenceText}
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dct="http://purl.org/dc/terms/"
|
||||
>
|
||||
<a
|
||||
property="dct:title"
|
||||
rel="cc:attributionURL"
|
||||
href="https://michalvanko.dev/">michalvanko.dev</a
|
||||
>
|
||||
by
|
||||
<a
|
||||
rel="cc:attributionURL dct:creator"
|
||||
property="cc:attributionName"
|
||||
href="https://michalvanko.dev/">Michal Vanko</a
|
||||
>
|
||||
is licensed under
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1"
|
||||
target="_blank"
|
||||
rel="license noopener noreferrer"
|
||||
style="display:inline-block;"
|
||||
>CC BY-NC-ND 4.0<img
|
||||
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
|
||||
src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
|
||||
alt="cc"
|
||||
/><img
|
||||
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
|
||||
src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
|
||||
alt="by"
|
||||
/><img
|
||||
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
|
||||
src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
|
||||
alt="nc"
|
||||
/><img
|
||||
style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
|
||||
src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"
|
||||
alt="nd"
|
||||
/></a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
</footer>
|
||||
@ -1,84 +0,0 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css'
|
||||
import { radialGradient, transparentize } from 'polished'
|
||||
import { menuBackground, transparent, vars } from '$lib/styles/vars.css'
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
|
||||
export const navigationClass = style([
|
||||
sprinkles({
|
||||
paddingTop: '1x',
|
||||
paddingBottom: '2x',
|
||||
paddingX: '1x',
|
||||
color: 'menu',
|
||||
textShadow: 'menuLinkShadow',
|
||||
}),
|
||||
radialGradient({
|
||||
colorStops: [
|
||||
`${menuBackground} 0%`,
|
||||
`${transparentize(1, menuBackground)} 100%`,
|
||||
],
|
||||
extent: '120% 100% at 0% 0%',
|
||||
fallback: transparent,
|
||||
}),
|
||||
])
|
||||
|
||||
export const navigationContentClass = sprinkles({
|
||||
display: 'flex',
|
||||
maxWidth: 'max',
|
||||
marginY: 'none',
|
||||
marginX: 'auto',
|
||||
})
|
||||
|
||||
export const navigationLinksClass = sprinkles({
|
||||
listStyle: 'none',
|
||||
margin: 'none',
|
||||
padding: 'none',
|
||||
display: 'flex',
|
||||
flex: '1',
|
||||
})
|
||||
|
||||
export const logoSectionClass = sprinkles({
|
||||
lineHeight: 'none',
|
||||
})
|
||||
|
||||
export const logoLinkClass = sprinkles({
|
||||
padding: 'none',
|
||||
display: 'block',
|
||||
})
|
||||
|
||||
globalStyle(`${navigationClass} a:not(${logoLinkClass})`, {
|
||||
color: vars.color.menuLink,
|
||||
padding: vars.space['1x'],
|
||||
})
|
||||
|
||||
globalStyle(`${navigationClass} a:hover`, {
|
||||
color: vars.color.menuLinkHover,
|
||||
})
|
||||
|
||||
export const logoImgClass = style({
|
||||
height: vars.space['3x'],
|
||||
})
|
||||
|
||||
export const selectedClass = sprinkles({
|
||||
textShadow: 'menuActiveLinkShadow',
|
||||
})
|
||||
|
||||
export const portfolioPageNavigation = style({
|
||||
position: 'sticky',
|
||||
top: '0px',
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
fontSize: vars.fontSize.sm,
|
||||
padding: vars.space['1x'],
|
||||
background: vars.color.background,
|
||||
boxShadow: `0px 0.5em 0.5em ${vars.color.background}`,
|
||||
})
|
||||
|
||||
export const portfolioPageNavigationLinksClass = sprinkles({
|
||||
maxWidth: 'l',
|
||||
marginX: 'auto',
|
||||
marginY: 'none',
|
||||
})
|
||||
|
||||
export const portfolioPageNavigationLinkClass = sprinkles({
|
||||
padding: '1x',
|
||||
})
|
||||
@ -1,86 +0,0 @@
|
||||
<script>
|
||||
import classNames from 'classnames'
|
||||
import {
|
||||
logoImgClass,
|
||||
logoLinkClass,
|
||||
logoSectionClass,
|
||||
navigationClass,
|
||||
navigationContentClass,
|
||||
navigationLinksClass,
|
||||
portfolioPageNavigation,
|
||||
portfolioPageNavigationLinkClass,
|
||||
portfolioPageNavigationLinksClass,
|
||||
selectedClass,
|
||||
} from './Nav.css'
|
||||
import { page } from "$app/stores"
|
||||
|
||||
$: segment = $page.url.pathname
|
||||
</script>
|
||||
|
||||
<nav class={navigationClass}>
|
||||
<section class={navigationContentClass}>
|
||||
<ul class={navigationLinksClass}>
|
||||
<li>
|
||||
<a class={classNames({ [selectedClass]: segment === '/' })} href="/">
|
||||
Introduction
|
||||
</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={classNames({ [selectedClass]: segment.startsWith('/blog') })}
|
||||
href="/blog"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class={classNames({
|
||||
[selectedClass]: segment.startsWith('/portfolio'),
|
||||
})}
|
||||
href="/portfolio"
|
||||
>
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<aside class="logo-section {logoSectionClass}">
|
||||
<a class="logo {logoLinkClass}" href=".">
|
||||
<img
|
||||
class={logoImgClass}
|
||||
src="/m-logo.svg"
|
||||
alt="m logo"
|
||||
width="44px"
|
||||
height="44px"
|
||||
/>
|
||||
</a>
|
||||
</aside>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
{#if segment === '/portfolio'}
|
||||
<section class="page-navigation {portfolioPageNavigation}">
|
||||
<div class={portfolioPageNavigationLinksClass}>
|
||||
<a
|
||||
class={portfolioPageNavigationLinkClass}
|
||||
href="/portfolio#personal-information">About</a
|
||||
>
|
||||
<a class={portfolioPageNavigationLinkClass} href="/portfolio#skills"
|
||||
>Skills</a
|
||||
>
|
||||
<a class={portfolioPageNavigationLinkClass} href="/portfolio#work-history"
|
||||
>Work History</a
|
||||
>
|
||||
<a class={portfolioPageNavigationLinkClass} href="/portfolio#projects"
|
||||
>Projects</a
|
||||
>
|
||||
<a class={portfolioPageNavigationLinkClass} href="/portfolio#education"
|
||||
>Education</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
@ -1,9 +0,0 @@
|
||||
<script lang="ts">
|
||||
import svgSprite from '../svg/build/icons-sprite.svg'
|
||||
export let className: string
|
||||
export let name: string
|
||||
</script>
|
||||
|
||||
<svg aria-hidden="true" class={className}>
|
||||
<use xlink:href={`${svgSprite}#${name}`} />
|
||||
</svg>
|
||||
@ -1,30 +0,0 @@
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
|
||||
export const tagsListClass = sprinkles({
|
||||
listStyle: 'none',
|
||||
margin: 'none',
|
||||
padding: 'none',
|
||||
display: 'inline',
|
||||
})
|
||||
|
||||
export const tagsListLiClass = sprinkles({
|
||||
display: 'inline',
|
||||
fontStyle: 'italic',
|
||||
})
|
||||
|
||||
export const publishedClass = sprinkles({
|
||||
whiteSpace: 'nowrap',
|
||||
fontStyle: 'italic',
|
||||
})
|
||||
|
||||
export const publishedLabelClass = sprinkles({
|
||||
color: 'tintedText',
|
||||
})
|
||||
|
||||
export const footerClass = sprinkles({
|
||||
display: 'flex',
|
||||
fontSize: 'sm',
|
||||
justifyContent: 'space-between',
|
||||
paddingTop: '1x',
|
||||
marginTop: '2x',
|
||||
})
|
||||
@ -1,36 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
|
||||
|
||||
import { format } from 'date-fns'
|
||||
import type { PostContent } from '../../routes/blog/content'
|
||||
import {
|
||||
footerClass,
|
||||
publishedClass,
|
||||
publishedLabelClass,
|
||||
tagsListClass,
|
||||
tagsListLiClass,
|
||||
} from './ArticleFooter.css'
|
||||
|
||||
export let post: PostContent
|
||||
</script>
|
||||
|
||||
<footer class="{footerClass} {horizontalBorderTopClass}">
|
||||
<div class="article-tags">
|
||||
{#if post.tags.length > 0}
|
||||
<span class="lighten">Tags:</span>
|
||||
<ul class={tagsListClass}>
|
||||
{#each post.tags as tag}
|
||||
<li class={tagsListLiClass}>
|
||||
<a href="/blog/tags/{tag}">{tag}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="created-at">
|
||||
<span class={publishedLabelClass}>Published on</span>
|
||||
<time datetime={post.date} class={publishedClass}>
|
||||
{format(new Date(post.date), "do MMMM',' y")}
|
||||
</time>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,21 +0,0 @@
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
|
||||
export const listClass = sprinkles({
|
||||
listStyle: 'none',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
})
|
||||
|
||||
export const listItemClass = sprinkles({
|
||||
paddingX: '1x',
|
||||
})
|
||||
|
||||
export const activePage = sprinkles({
|
||||
//fontStyle: 'italic',
|
||||
fontWeight: 'bold',
|
||||
paddingX: '2x',
|
||||
})
|
||||
|
||||
export const pageLinkClass = sprinkles({
|
||||
paddingX: '1x',
|
||||
})
|
||||
@ -1,51 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
activePage,
|
||||
listClass,
|
||||
listItemClass,
|
||||
pageLinkClass,
|
||||
} from './Paginator.css'
|
||||
|
||||
import { getPaginatorPages, createHref } from './paginatorUtils'
|
||||
|
||||
export const Divider = 'divider'
|
||||
|
||||
export let href: string
|
||||
export let page: number
|
||||
export let pageSize: number
|
||||
export let totalCount: number
|
||||
export let filters: Record<string, string>
|
||||
let paginatorPages: (number | typeof Divider)[]
|
||||
|
||||
$: paginatorPages = getPaginatorPages({ page, pageSize, totalCount })
|
||||
</script>
|
||||
|
||||
<ul class={listClass}>
|
||||
{#if page !== 1}
|
||||
<li class="{listItemClass} ">
|
||||
<a class={pageLinkClass} href={createHref(href, filters, page - 1)}
|
||||
><</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{#each paginatorPages as pageNumber}
|
||||
{#if pageNumber === Divider}
|
||||
<li class={listItemClass}>...</li>
|
||||
{:else if page === pageNumber}
|
||||
<li class="{listItemClass} {activePage}">{pageNumber}</li>
|
||||
{:else}
|
||||
<li class="{listItemClass} ">
|
||||
<a class={pageLinkClass} href={createHref(href, filters, pageNumber)}
|
||||
>{pageNumber}</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if page !== paginatorPages.length}
|
||||
<li class="{listItemClass} ">
|
||||
<a class={pageLinkClass} href={createHref(href, filters, page + 1)}
|
||||
>></a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
@ -1,52 +0,0 @@
|
||||
import { describe, expect, test } from 'vitest'
|
||||
import { Divider, getPaginatorPages } from './paginatorUtils'
|
||||
|
||||
describe('Paginator component', () => {
|
||||
describe('Paginator generates feasable pages to display', () => {
|
||||
test('Page: 1/5', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 1, totalCount: 5, pageSize: 1 })
|
||||
).toEqual([1, 2, 3, 4, 5])
|
||||
})
|
||||
test('Page: 4/7', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 4, totalCount: 7, pageSize: 1 })
|
||||
).toEqual([1, 2, 3, 4, 5, 6, 7])
|
||||
})
|
||||
test('Page: 4/8', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 4, totalCount: 8, pageSize: 1 })
|
||||
).toEqual([1, 2, 3, 4, 5, 6, Divider, 8])
|
||||
})
|
||||
test('Page: 1/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 1, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
|
||||
})
|
||||
test('Page: 2/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 2, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
|
||||
})
|
||||
test('Page: 5/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 5, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, Divider, 3, 4, 5, 6, 7, Divider, 10])
|
||||
})
|
||||
test('Page: 7/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 7, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
|
||||
})
|
||||
test('Page: 8/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 8, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
|
||||
})
|
||||
test('Page: 10/10', () => {
|
||||
expect(
|
||||
getPaginatorPages({ page: 10, totalCount: 10, pageSize: 1 })
|
||||
).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -1,49 +0,0 @@
|
||||
import { toParams } from '$lib/pagination/dropTakeParams'
|
||||
import { last, range } from 'ramda'
|
||||
|
||||
export const Divider = 'divider'
|
||||
|
||||
export function getPaginatorPages({
|
||||
page,
|
||||
pageSize,
|
||||
totalCount,
|
||||
}: {
|
||||
page: number
|
||||
pageSize: number
|
||||
totalCount: number
|
||||
}) {
|
||||
const maxLinksLength = 7
|
||||
const linksAroundActive = 2
|
||||
const totalPages = Math.ceil(totalCount / pageSize)
|
||||
const daco = range(1, totalPages + 1).reduce((acc, link) => {
|
||||
const isFirst = link === 1
|
||||
const isLast = link === totalPages
|
||||
const isPageOnStart = page <= 3 && link < maxLinksLength
|
||||
const isPageOnEnd =
|
||||
page >= totalPages - 3 && link > totalPages - maxLinksLength + 1
|
||||
|
||||
if ([isFirst, isLast, isPageOnStart, isPageOnEnd].some((value) => value)) {
|
||||
return [...acc, link]
|
||||
}
|
||||
|
||||
if (link < page - linksAroundActive || link > page + linksAroundActive) {
|
||||
if (last(acc) === Divider) {
|
||||
return acc
|
||||
}
|
||||
return [...acc, Divider]
|
||||
}
|
||||
|
||||
return [...acc, link]
|
||||
}, [])
|
||||
|
||||
return daco
|
||||
}
|
||||
|
||||
export function createHref(
|
||||
href: string,
|
||||
filters: Record<string, string>,
|
||||
pageNumber: number
|
||||
) {
|
||||
const filtersPath = toParams(filters)
|
||||
return `/${href}/${filtersPath ? filtersPath + '/' : ''}page/${pageNumber}`
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
|
||||
<section id="personal">
|
||||
<h3>Personal Information</h3>
|
||||
<p>I was born on 26th of May in Košice, Slovakia and I still live here.</p>
|
||||
<h4>Hobbies:</h4>
|
||||
<p>
|
||||
I enjoy playing basketball with my friends. I also like to play other team sports like football and hockey.
|
||||
I also play squash and table tennis. Once I've won a competition in squash at my university.
|
||||
During summer I love water skiing and swimming in a nearby lake.
|
||||
<br />
|
||||
I am very passionate about music. I've also tried some software for composing music but I am not really hooked into that yet.
|
||||
From time to time I enjoy playing board games with my friends.
|
||||
</p>
|
||||
<h4>Interests:</h4>
|
||||
<p>
|
||||
I like to explore new technologies and I'm passionate about <em>Open Source movement</em>,
|
||||
<em>Internet of Things</em> applications and <em>Linux desktop evolution</em>.
|
||||
<br />
|
||||
I am interested in modern software architecture and <em>reactive programming</em>.
|
||||
<br />
|
||||
I've attended various <strong>tech conferences and hackathons</strong>. I like them for all of the fascinating ideas that might be invented.
|
||||
<br />
|
||||
I've given presentations on various topics related to <em>web development</em>. You can <a href='#presentations'>take a look at some of them here</a>.
|
||||
<br />
|
||||
I enjoy <strong>teaching and explaining</strong> how various technologies and techniques work to my colleagues for their better understanding.
|
||||
<br />
|
||||
I take advantage of <strong>test driven development</strong>.
|
||||
</p>
|
||||
</section><!--/personal-->
|
||||
@ -1,18 +0,0 @@
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
|
||||
export const presentationFrameClass = sprinkles({
|
||||
width: 'image',
|
||||
height: 'image',
|
||||
})
|
||||
|
||||
export const presentationPreviewLinksClass = sprinkles({
|
||||
fontSize: 'sm',
|
||||
})
|
||||
|
||||
export const presentationDescriptionClass = sprinkles({
|
||||
paddingLeft: '1x',
|
||||
})
|
||||
|
||||
export const presentationNameClass = sprinkles({
|
||||
fontSize: 'base',
|
||||
})
|
||||
@ -1,41 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { PresentationAttributes } from 'src/routes/portfolio/index.json'
|
||||
import {
|
||||
presentationDescriptionClass,
|
||||
presentationFrameClass,
|
||||
presentationNameClass,
|
||||
presentationPreviewLinksClass,
|
||||
} from './presentation.css'
|
||||
|
||||
export let presentation: PresentationAttributes
|
||||
export let previewVisible = false
|
||||
|
||||
function togglePreviewVisible() {
|
||||
previewVisible = !previewVisible
|
||||
}
|
||||
</script>
|
||||
|
||||
<article>
|
||||
<a href={presentation.link} target="_blank">
|
||||
<h3 class={presentationNameClass}>{presentation.name}</h3>
|
||||
</a>
|
||||
|
||||
<section class="description {presentationDescriptionClass}">
|
||||
{@html presentation.description}
|
||||
</section>
|
||||
|
||||
<section class="preview">
|
||||
<div class={presentationPreviewLinksClass}>
|
||||
<a href="#presentations" on:click|preventDefault={togglePreviewVisible}
|
||||
>{previewVisible ? 'Close' : 'Open'} preview</a
|
||||
>
|
||||
</div>
|
||||
{#if previewVisible}
|
||||
<iframe
|
||||
class={presentationFrameClass}
|
||||
src={presentation.link}
|
||||
title="Presentation of {presentation.name}"
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
</article>
|
||||
@ -1,10 +0,0 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css'
|
||||
|
||||
export const projectScopeClass = style({})
|
||||
|
||||
globalStyle(`${projectScopeClass} img`, {
|
||||
float: 'right',
|
||||
width: '25%',
|
||||
})
|
||||
|
||||
// We need to get rid off the global selectors LOL
|
||||
@ -1,21 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { ProjectAttributes } from '../../routes/portfolio/index.json'
|
||||
import { projectScopeClass } from './project.css'
|
||||
|
||||
export let project: ProjectAttributes
|
||||
</script>
|
||||
|
||||
<article class="project {projectScopeClass}">
|
||||
<h3>{project.name}</h3>
|
||||
<section class="description">
|
||||
{#if project.image}
|
||||
<img
|
||||
src={project.image.source}
|
||||
class="project-image"
|
||||
alt={project.image.image_description}
|
||||
/>
|
||||
{/if}
|
||||
{@html project.description}
|
||||
</section>
|
||||
<aside />
|
||||
</article>
|
||||
@ -1,17 +0,0 @@
|
||||
<section id="skills">
|
||||
<h3>Skills</h3>
|
||||
<p>Slovak is my mother tongue and I've learned English as my second language. I speak English on advanced level.</p>
|
||||
<p>
|
||||
I'm an experienced <em>Linux Desktop</em> user. I prefer to use open source libraries and technologies while I develop solutions.
|
||||
<br>
|
||||
I'm in good command of Office Tools and I've experience with image manipulation programs like <em>GIMP</em> and <em>Inkscape</em>.
|
||||
<br>
|
||||
I can also compose music and sounds in <em>digital audio workstation</em>.
|
||||
</p>
|
||||
<p>I'm passionate about <em>software architecture</em>. My goal is to be able to design suitable solution for any kind of product. From small <em>presentation sites</em>, <em>IOT devices</em>, to large <em>enterprise applications running on cloud</em>.</p>
|
||||
<p>
|
||||
I do <em>public speaking</em> and I am not afraid to share my knowledge and passion about technology.
|
||||
</p>
|
||||
<p>I'm advanced user of source code management tools <em>git</em> and <em>svn</em>.</p>
|
||||
<p>I've a driving licence for category B 🚗.</p>
|
||||
</section>
|
||||
@ -1,15 +0,0 @@
|
||||
import { sprinkles } from '$lib/styles/sprinkles.css'
|
||||
|
||||
export const workFooterClass = sprinkles({
|
||||
marginTop: '1x',
|
||||
paddingTop: '1x',
|
||||
fontSize: 'sm',
|
||||
lineHeight: '1x',
|
||||
})
|
||||
|
||||
export const workAddressNameClass = sprinkles({
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'normal',
|
||||
margin: 'none',
|
||||
fontSize: 'base',
|
||||
})
|
||||
@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WorkAttributes } from '../../routes/portfolio/index.json'
|
||||
import { workAddressNameClass, workFooterClass } from './work.css'
|
||||
import { horizontalBorderTopClass } from '$lib/styles/scoops.css'
|
||||
export let work: WorkAttributes
|
||||
</script>
|
||||
|
||||
<article>
|
||||
<h3>{work.name}</h3>
|
||||
<section class="description">
|
||||
{@html work.description}
|
||||
</section>
|
||||
|
||||
{#if work.address}
|
||||
<footer class="{workFooterClass} {horizontalBorderTopClass}">
|
||||
<h4 class={workAddressNameClass}>{work.address.name}</h4>
|
||||
<address>
|
||||
<div>
|
||||
{work.address.location},
|
||||
{work.address.zipcode}
|
||||
{work.address.city},
|
||||
{work.address.country}
|
||||
</div>
|
||||
</address>
|
||||
</footer>
|
||||
{/if}
|
||||
</article>
|
||||
Reference in New Issue
Block a user