Many more styles transformed into sprinkles

package.json

@@ -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"
   }
 }

src/components/SvgIcon.svelte

@@ -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>

src/components/portfolio/work.svelte

@@ -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>

src/markdown/parse-markdown.ts

@@ -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]),
   })

src/routes/__layout.svelte

@@ -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,

src/routes/blog/index.svelte

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

src/routes/index.css.ts

@@ -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',
+})

src/routes/index.svelte

@@ -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>

src/routes/layout.css.ts

@@ -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',
+})

src/routes/portfolio/index.css.ts

@@ -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',
+})

src/routes/portfolio/index.json.ts

@@ -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),

src/routes/portfolio/index.svelte

@@ -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>