michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Many more styles transformed into sprinkles

Browse Source
This commit is contained in:
Michal Vanko 2021-12-14 09:26:42 +01:00
parent f8b6792a71
commit 2146f59af6
13 changed files with 725 additions and 610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1120
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -15,11 +15,11 @@
"svgstore": "svgstore -o static/build/icons-sprite.svg src/svg/**.svg"
},
"dependencies": {
"@vanilla-extract/css": "^1.6.3",
"@vanilla-extract/sprinkles": "^1.3.1",
"@vanilla-extract/vite-plugin": "^3.0.0",
"@vanilla-extract/css": "^1.6.8",
"@vanilla-extract/sprinkles": "^1.3.3",
"@vanilla-extract/vite-plugin": "^3.1.0",
"classnames": "^2.3.1",
"date-fns": "^2.25.0",
"date-fns": "^2.27.0",
"feed": "^4.2.2",
"front-matter": "^4.0.2",
"marked": "^3.0.4",
@ -33,21 +33,21 @@
"@sveltejs/kit": "^1.0.0-next.179",
"@tsconfig/svelte": "^2.0.1",
"@types/classnames": "^2.3.1",
"@types/node": "^16.10.2",
"@types/ramda": "^0.27.45",
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1",
"eslint": "^8.2.0",
"@types/node": "^16.11.12",
"@types/ramda": "^0.27.60",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"less": "^4.1.2",
"prettier": "~2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.44.1",
"svelte-preprocess": "^4.9.8",
"less": "^3.11.3",
"prettier": "~2.5.1",
"prettier-plugin-svelte": "^2.5.1",
"svelte": "^3.44.2",
"svelte-preprocess": "^4.10.0",
"svgstore-cli": "^2.0.1",
"tslib": "^2.3.1",
"typescript": "^4.4.4",
"vite": "^2.6.13"
"typescript": "^4.5.3",
"vite": "^2.7.2"
}
}

6
src/components/SvgIcon.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts">
import svgSprite from '../../static/build/icons-sprite.svg'
export let className
export let name
export let className: string
export let name: string
</script>
<svg aria-hidden="true" role="img" class={className}>
<svg aria-hidden="true" class={className}>
<use xlink:href={`${svgSprite}#${name}`} />
</svg>

7
src/components/portfolio/work.svelte
View File

@ -1,5 +1,6 @@
<script>
export let work
<script lang="ts">
import type { RecordAttributes } from '../../routes/portfolio/index.json'
export let work: RecordAttributes
</script>
<article>
@ -7,4 +8,4 @@
<section class="description">
{@html work.description}
</section>
</article>
</article>

4
src/markdown/parse-markdown.ts
View File

@ -3,8 +3,8 @@ import { renderer } from './renderer-extension'
marked.use({ renderer })
export function parseField<T>(field: string) {
return (item: T) => ({
export function parseField<T>(field: keyof T) {
return (item: T): T => ({
...item,
[field]: marked(item[field]),
})

14
src/routes/__layout.svelte
View File

@ -19,7 +19,7 @@
<script lang="ts">
import Nav from '../components/Nav.svelte'
import Footer from '../components/Footer.svelte'
import { mainStyle } from '../styles/vanilla.css'
import { mainContentClass } from './layout.css'
export let segment
export let latestPosts
@ -28,7 +28,7 @@
<div class="app-content">
<Nav {segment} />
<main class={mainStyle}>
<main class={mainContentClass}>
<slot />
</main>
<Footer {latestPosts} />
@ -37,17 +37,7 @@
<style global lang="less">
@import '../styles/global.module.less';
.app-content {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
}
main {
position: relative;
padding: 1.2em;
h1,
h2,
h3,

1
src/routes/blog/index.svelte
View File

@ -1,5 +1,4 @@
<script context="module" lang="ts">
// TODO Fix query & seeAll functionality
/**
* @type {import('@sveltejs/kit').Load}
*/

23
src/routes/index.css.ts Normal file
View File

@ -0,0 +1,23 @@
import { sprinkles } from '../../src/styles/sprinkles.css'
export const profilePicClass = sprinkles({
textAlign: 'center',
marginX: 'auto',
marginY: 'none',
})
export const mottoClass = sprinkles({
textAlign: 'center',
marginX: 'auto',
marginY: '2x',
fontSize: '2x',
})
export const welcomeNoteClass = sprinkles({
textAlign: 'center',
marginX: 'auto',
})
export const citeOwnerClass = sprinkles({
whiteSpace: 'nowrap',
})

37
src/routes/index.svelte
View File

@ -1,9 +1,18 @@
<script lang="ts">
import {
citeOwnerClass,
mottoClass,
profilePicClass,
welcomeNoteClass,
} from './index.css'
</script>
<svelte:head>
<title>Introduction @michalvankodev</title>
</svelte:head>
<header class="index-header">
<figure class="profile-pic">
<figure class="profile-pic {profilePicClass}">
<picture>
<source
media="(max-width: 550px)"
@ -13,13 +22,13 @@
</picture>
</figure>
<p class="motto">
<p class="motto {mottoClass}">
<cite>“Let your ambition carry you.”</cite>
<span class="cite-owner">- La Flame</span>
<span class="cite-owner {citeOwnerClass}">- La Flame</span>
</p>
</header>
<p>
<p class={welcomeNoteClass}>
Hey, welcome to my personal website. My name is
<strong>Michal&nbsp;Vanko</strong>
and I'm a
@ -27,23 +36,3 @@
. I'll try to share some stories and opinions about things that I'm interested
in.
</p>
<style>
figure,
p {
text-align: center;
margin: 0 auto;
}
p {
margin: 1em auto;
}
.motto {
font-size: 1.4em;
}
.cite-owner {
white-space: nowrap;
}
</style>

18
src/routes/layout.css.ts Normal file
View File

@ -0,0 +1,18 @@
import { style } from '@vanilla-extract/css'
import { sprinkles } from '../../src/styles/sprinkles.css'
export const appContentClass = style([
sprinkles({
display: 'grid',
}),
{
gridTemplateRows: 'auto 1fr auto',
gridTemplateColumns: '100%',
minHeight: '100vh',
},
])
export const mainContentClass = sprinkles({
position: 'relative',
padding: '3x',
})

19
src/routes/portfolio/index.css.ts Normal file
View File

@ -0,0 +1,19 @@
import { sprinkles } from '../../../src/styles/sprinkles.css'
export const linkableSectionClass = sprinkles({
marginTop: '4x',
})
export const nameTagClass = sprinkles({
textAlign: 'center',
})
export const listClass = sprinkles({
listStyle: 'none',
padding: 'none',
})
export const listItemClass = sprinkles({
marginX: 'none',
marginY: '3x',
})

13
src/routes/portfolio/index.json.ts
View File

@ -19,12 +19,21 @@ export interface ProjectAttributes extends RecordAttributes {
export interface PortfolioAttributes {
title: string
work_history: RecordAttributes[]
work_history_prelude: string
work_history: string[]
projects: ProjectAttributes[]
education: RecordAttributes[]
}
export type PortfolioContent = {
title: string
workHistory: RecordAttributes[]
workHistoryPrelude: string
projects: ProjectAttributes[]
education: RecordAttributes[]
body: string
}
export async function get() {
let pageSource: string
try {
@ -47,7 +56,7 @@ export async function get() {
.filter((education) => education.displayed)
.map(parseField('description'))
const response = {
const response: PortfolioContent = {
title: parsed.attributes.title,
body: marked(parsed.body),
workHistoryPrelude: marked(parsed.attributes.work_history_prelude),

41
src/routes/portfolio/index.svelte
View File

@ -1,4 +1,4 @@
<script context="module">
<script lang="ts" context="module">
/**
* @type {import('@sveltejs/kit').Load}
*/
@ -13,20 +13,22 @@
}
</script>
<script>
<script lang="ts">
import Work from '../../components/portfolio/work.svelte'
import Project from '../../components/portfolio/project.svelte'
import type { PortfolioContent } from './index.json'
import { listClass, listItemClass, nameTagClass } from './index.css'
export let content
export let content: PortfolioContent
</script>
<svelte:head>
<title>{content.title}</title>
</svelte:head>
<h1 class="name-tag">Michal Vanko</h1>
<h1 class="name-tag {nameTagClass}">Michal Vanko</h1>
<h2 class="name-tag">Software Architect and Consultant</h2>
<h2 class="name-tag {nameTagClass}">Software Architect and Consultant</h2>
<section id="personal-information">
{@html content.body}
@ -37,9 +39,9 @@
<section class="work-history-prelude">
{@html content.workHistoryPrelude}
</section>
<ul>
<ul class={listClass}>
{#each content.workHistory as work}
<li>
<li class={listItemClass}>
<Work {work} />
</li>
{/each}
@ -48,9 +50,9 @@
<section id="projects">
<h2>Projects</h2>
<ul>
<ul class={listClass}>
{#each content.projects as project}
<li>
<li class={listItemClass}>
<Project {project} />
</li>
{/each}
@ -59,9 +61,9 @@
<section id="education">
<h2>Education</h2>
<ul>
<ul class={listClass}>
{#each content.education as work}
<li>
<li class={listItemClass}>
<Work {work} />
</li>
{/each}
@ -76,21 +78,4 @@
margin-top: -5em;
visibility: hidden;
}
section[id] {
margin-top: 2em;
}
.name-tag {
text-align: center;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 1.5em 0;
}
</style>