From b04399b46384d12422f86562243593520f7b42ce Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Wed, 15 Dec 2021 16:04:50 +0100 Subject: [PATCH] Get rid of less --- package-lock.json | 61 +++++++++++++++++-------- package.json | 1 - src/components/Nav.css.ts | 4 ++ src/components/Nav.svelte | 22 +++++++-- src/components/SvgIcon.svelte | 2 +- src/components/portfolio/project.css.ts | 10 ++++ src/components/portfolio/project.svelte | 10 +--- src/markdown/renderer-extension.ts | 2 +- src/routes/blog/index.svelte | 21 ++++++--- src/routes/layout.css.ts | 4 ++ 10 files changed, 96 insertions(+), 41 deletions(-) create mode 100644 src/components/portfolio/project.css.ts diff --git a/package-lock.json b/package-lock.json index aacaafb..0316243 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,6 @@ "eslint": "^8.4.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", - "less": "^3.11.3", "prettier": "~2.5.1", "prettier-plugin-svelte": "^2.5.1", "svelte": "^3.44.2", @@ -1277,7 +1276,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", - "devOptional": true, + "optional": true, + "peer": true, "dependencies": { "is-what": "^3.12.0" } @@ -1495,6 +1495,7 @@ "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "optional": true, + "peer": true, "dependencies": { "prr": "~1.0.1" }, @@ -2492,6 +2493,7 @@ "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", "optional": true, + "peer": true, "bin": { "image-size": "bin/image-size.js" }, @@ -2615,7 +2617,8 @@ "version": "3.14.1", "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/isexe": { "version": "2.0.0", @@ -2704,7 +2707,8 @@ "version": "3.13.1", "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz", "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==", - "devOptional": true, + "optional": true, + "peer": true, "dependencies": { "copy-anything": "^2.0.1", "tslib": "^1.10.0" @@ -2730,6 +2734,7 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2738,7 +2743,8 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "devOptional": true + "optional": true, + "peer": true }, "node_modules/levn": { "version": "0.4.1", @@ -2812,6 +2818,7 @@ "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "optional": true, + "peer": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -2858,6 +2865,7 @@ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", "optional": true, + "peer": true, "bin": { "mime": "cli.js" }, @@ -2945,7 +2953,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz", "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==", - "optional": true + "optional": true, + "peer": true }, "node_modules/natural-compare": { "version": "1.4.0", @@ -3112,6 +3121,7 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "optional": true, + "peer": true, "engines": { "node": ">=6" } @@ -3218,7 +3228,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", - "optional": true + "optional": true, + "peer": true }, "node_modules/punycode": { "version": "2.1.1", @@ -3422,6 +3433,7 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "optional": true, + "peer": true, "bin": { "semver": "bin/semver" } @@ -4855,7 +4867,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", - "devOptional": true, + "optional": true, + "peer": true, "requires": { "is-what": "^3.12.0" } @@ -5007,6 +5020,7 @@ "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "optional": true, + "peer": true, "requires": { "prr": "~1.0.1" } @@ -5692,7 +5706,8 @@ "version": "0.5.5", "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", - "optional": true + "optional": true, + "peer": true }, "import-cwd": { "version": "3.0.0", @@ -5782,7 +5797,8 @@ "version": "3.14.1", "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", - "devOptional": true + "optional": true, + "peer": true }, "isexe": { "version": "2.0.0", @@ -5853,7 +5869,8 @@ "version": "3.13.1", "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz", "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==", - "devOptional": true, + "optional": true, + "peer": true, "requires": { "copy-anything": "^2.0.1", "errno": "^0.1.1", @@ -5870,13 +5887,15 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "optional": true + "optional": true, + "peer": true }, "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "devOptional": true + "optional": true, + "peer": true } } }, @@ -5937,6 +5956,7 @@ "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "optional": true, + "peer": true, "requires": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -5967,7 +5987,8 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", - "optional": true + "optional": true, + "peer": true }, "min-indent": { "version": "1.0.1", @@ -6025,7 +6046,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz", "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==", - "optional": true + "optional": true, + "peer": true }, "natural-compare": { "version": "1.4.0", @@ -6155,7 +6177,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", - "optional": true + "optional": true, + "peer": true }, "polished": { "version": "4.1.3", @@ -6219,7 +6242,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", - "optional": true + "optional": true, + "peer": true }, "punycode": { "version": "2.1.1", @@ -6356,7 +6380,8 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "optional": true + "optional": true, + "peer": true }, "slash": { "version": "3.0.0", diff --git a/package.json b/package.json index 596a219..03e6424 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "eslint": "^8.4.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", - "less": "^3.11.3", "prettier": "~2.5.1", "prettier-plugin-svelte": "^2.5.1", "svelte": "^3.44.2", diff --git a/src/components/Nav.css.ts b/src/components/Nav.css.ts index 127ac43..c21e052 100644 --- a/src/components/Nav.css.ts +++ b/src/components/Nav.css.ts @@ -78,3 +78,7 @@ export const portfolioPageNavigationLinksClass = sprinkles({ marginX: 'auto', marginY: 'none', }) + +export const portfolioPageNavigationLinkClass = sprinkles({ + padding: '1x', +}) diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index 8e3074d..8d8271d 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -8,6 +8,7 @@ navigationContentClass, navigationLinksClass, portfolioPageNavigation, + portfolioPageNavigationLinkClass, portfolioPageNavigationLinksClass, selectedClass, } from './Nav.css' @@ -63,11 +64,22 @@ {#if segment === '/portfolio'}
- About - Skills - Work History - Projects - Education + About + Skills + Work History + Projects + Education
{/if} diff --git a/src/components/SvgIcon.svelte b/src/components/SvgIcon.svelte index c3c1712..61975d5 100644 --- a/src/components/SvgIcon.svelte +++ b/src/components/SvgIcon.svelte @@ -1,5 +1,5 @@ diff --git a/src/components/portfolio/project.css.ts b/src/components/portfolio/project.css.ts new file mode 100644 index 0000000..2aeb1e6 --- /dev/null +++ b/src/components/portfolio/project.css.ts @@ -0,0 +1,10 @@ +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 diff --git a/src/components/portfolio/project.svelte b/src/components/portfolio/project.svelte index e86ec06..fd17935 100644 --- a/src/components/portfolio/project.svelte +++ b/src/components/portfolio/project.svelte @@ -1,10 +1,11 @@ -
+

{project.name}

{#if project.image} @@ -18,10 +19,3 @@
- - diff --git a/src/markdown/renderer-extension.ts b/src/markdown/renderer-extension.ts index 702053d..2354c13 100644 --- a/src/markdown/renderer-extension.ts +++ b/src/markdown/renderer-extension.ts @@ -1,5 +1,5 @@ import Prism from 'prismjs' -import loadLanguages from 'prismjs/components/index' +import loadLanguages from 'prismjs/components/index.js' loadLanguages(['bash', 'markdown', 'json', 'yaml', 'typescript']) diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte index 3e32992..628d348 100644 --- a/src/routes/blog/index.svelte +++ b/src/routes/blog/index.svelte @@ -2,12 +2,11 @@ /** * @type {import('@sveltejs/kit').Load} */ - export function load({ fetch, page: { params, query } }) { - const blogQuery = query ? '?' + query.toString() : '' - return fetch(`blog.json${blogQuery}`) + export function load({ fetch }) { + return fetch(`blog.json`) .then((r) => r.json()) .then((posts) => { - return { props: { posts, query } } + return { props: { posts } } }) } @@ -18,10 +17,18 @@ import type { PostContent } from './_content' export let posts: PostContent[] - export let query - export let tagQuery + export let displayedPosts: PostContent[] + export let tagQuery: string - $: tagQuery = query.get('tag') + $: { + if (typeof window !== 'undefined') { + let params = new URLSearchParams(window.location.search) + tagQuery = params.get('tag') + displayedPosts = posts.filter((post) => post.tags.includes(tagQuery)) + } else { + displayedPosts = posts + } + } diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts index 1398db1..fce9fbb 100644 --- a/src/routes/layout.css.ts +++ b/src/routes/layout.css.ts @@ -18,6 +18,10 @@ export const mainContentClass = sprinkles({ }) // Layout global styles +// atomic design needs to get rid off these global selectors LOL +// There should be written markdown renderer for each type of output +// where every component gets the layout atomic class +// TODO Create atomic classes for maxWidhts and use them everywhere in the content globalStyle( `${mainContentClass} h1, ${mainContentClass} h2, ${mainContentClass} h3, ${mainContentClass} h4, ${mainContentClass} h5, ${mainContentClass} h6, ${mainContentClass} p, ${mainContentClass} ul, ${mainContentClass} ol, ${mainContentClass} figure, ${mainContentClass} img, ${mainContentClass} blockquote, ${mainContentClass} iframe, ${mainContentClass} footer`,