From 8790b46c58b92bc806bce2bdef5736ee1550298f Mon Sep 17 00:00:00 2001 From: bhc Date: Mon, 23 Oct 2023 20:56:29 +0300 Subject: [PATCH 01/42] favicons, color-scheme, theme --- src/app.html | 46 ++++++++++++++++++++++++++++-- static/{ => favicons}/favicon.png | Bin 2 files changed, 44 insertions(+), 2 deletions(-) rename static/{ => favicons}/favicon.png (100%) diff --git a/src/app.html b/src/app.html index 6769ed5..99366b9 100644 --- a/src/app.html +++ b/src/app.html @@ -2,11 +2,53 @@ - + + + + + + + + + + + + + %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/static/favicon.png b/static/favicons/favicon.png similarity index 100% rename from static/favicon.png rename to static/favicons/favicon.png From 9b74071458a88bcc0617392f864c801517835601 Mon Sep 17 00:00:00 2001 From: bhc Date: Mon, 23 Oct 2023 20:57:44 +0300 Subject: [PATCH 02/42] store/theme.ts init --- src/lib/stores/theme.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/lib/stores/theme.ts diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts new file mode 100644 index 0000000..ed79d1e --- /dev/null +++ b/src/lib/stores/theme.ts @@ -0,0 +1,24 @@ +import { writable } from 'svelte/store'; +import { browser } from '$app/environment'; + +function createTheme() { + let currentTheme; + if (browser) { + currentTheme = localStorage.getItem('theme-preference') || 'auto'; + } + + const { subscribe, set } = writable(currentTheme); + + return { + subscribe, + set: (value: string) => { + if (browser) { + localStorage.setItem('theme-preference', value); + document.firstElementChild?.setAttribute('data-theme', value); + } + set(value); + } + }; +} + +export const theme = createTheme(); From 4c2c09689d5bc05c438d181d249d1d02818f66b9 Mon Sep 17 00:00:00 2001 From: bhc Date: Mon, 23 Oct 2023 21:03:57 +0300 Subject: [PATCH 03/42] inline style deleted --- src/routes/+page.svelte | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5b7bed2..6cac85a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -25,21 +25,3 @@ GitHub repository for more information.

- - From 8e53e2f223118ed1c9118e3c8ffa4a64cdf5a621 Mon Sep 17 00:00:00 2001 From: bhc Date: Mon, 23 Oct 2023 21:12:16 +0300 Subject: [PATCH 04/42] del style --- src/routes/+layout.svelte | 33 --------------------------------- 1 file changed, 33 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2909df4..6e6526a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -14,36 +14,3 @@

Copyright 2023

- - From 37f7a692fd7081d3cd964bcb3f6f77a4c96d3769 Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 04:55:57 +0300 Subject: [PATCH 05/42] del style.css --- src/routes/+layout.svelte | 17 +----- src/routes/styles.css | 107 -------------------------------------- 2 files changed, 1 insertion(+), 123 deletions(-) delete mode 100644 src/routes/styles.css diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6e6526a..4fa864c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,16 +1 @@ - - -
-
- -
- -
- -
-

Copyright 2023

-
-
+ diff --git a/src/routes/styles.css b/src/routes/styles.css deleted file mode 100644 index 5641224..0000000 --- a/src/routes/styles.css +++ /dev/null @@ -1,107 +0,0 @@ -@import '@fontsource/comfortaa'; - -:root { - --font-body: Comfortaa, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-mono: 'Comfortaa', monospace; - --color-bg-0: rgb(202, 216, 228); - --color-bg-1: hsl(209, 36%, 86%); - --color-bg-2: hsl(224, 44%, 95%); - --color-theme-1: #ffc409; - --color-theme-2: #4075a6; - --color-text: rgba(0, 0, 0, 0.7); - --column-width: 42rem; - --column-margin-top: 4rem; - font-family: var(--font-body); - color: var(--color-text); -} - -body { - min-height: 100vh; - margin: 0; - background-attachment: fixed; - background-color: var(--color-bg-1); - background-size: 100vw 100vh; - background-image: radial-gradient( - 50% 50% at 50% 50%, - rgba(255, 255, 255, 0.75) 0%, - rgba(255, 255, 255, 0) 100% - ), - linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); -} - -h1, -h2, -p { - font-weight: 400; -} - -p { - line-height: 1.5; -} - -a { - color: var(--color-theme-1); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-size: 2rem; - text-align: center; -} - -h2 { - font-size: 1rem; -} - -pre { - font-size: 16px; - font-family: var(--font-mono); - background-color: rgba(255, 255, 255, 0.45); - border-radius: 3px; - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); - padding: 0.5em; - overflow-x: auto; - color: var(--color-text); -} - -.text-column { - display: flex; - max-width: 48rem; - flex: 0.6; - flex-direction: column; - justify-content: center; - margin: 0 auto; -} - -input, -button { - font-size: inherit; - font-family: inherit; -} - -button:focus:not(:focus-visible) { - outline: none; -} - -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } -} - -.visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: auto; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; -} From eb6f7918c9c8513e8e6cac975587e597c1b466b4 Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 04:56:12 +0300 Subject: [PATCH 06/42] npm sass --- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 1 + 2 files changed, 25 insertions(+) diff --git a/package-lock.json b/package-lock.json index 31082da..9d5871f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "eslint-plugin-svelte": "^2.30.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "sass": "^1.69.4", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", @@ -2007,6 +2008,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2928,6 +2935,23 @@ "rimraf": "bin.js" } }, + "node_modules/sass": { + "version": "1.69.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.4.tgz", + "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index 318493d..2caa097 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "eslint-plugin-svelte": "^2.30.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "sass": "^1.69.4", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", From 03ef4a32a7757314845ede81fda9a10c4b9df13b Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 04:59:58 +0300 Subject: [PATCH 07/42] font --- package-lock.json | 25 +++++++++++++++++++------ package.json | 8 ++++++-- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d5871f..18962ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,8 +7,12 @@ "": { "name": "website", "version": "0.0.1", + "dependencies": { + "@fontsource/inter": "^5.0.15", + "@fontsource/merriweather": "^5.0.8", + "@fontsource/ubuntu-mono": "^5.0.17" + }, "devDependencies": { - "@fontsource/comfortaa": "^5.0.16", "@neoconfetti/svelte": "^1.0.0", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", @@ -468,11 +472,20 @@ "node": ">=14" } }, - "node_modules/@fontsource/comfortaa": { - "version": "5.0.16", - "resolved": "https://registry.npmjs.org/@fontsource/comfortaa/-/comfortaa-5.0.16.tgz", - "integrity": "sha512-cMLfF68WhM2SRxrjvg/Ixeq53xk9LaLv1A/yWz3VuXoOMPx04NYhUlJnKDDqk1rMsjxEFyK3/MWGWlqynb0vpA==", - "dev": true + "node_modules/@fontsource/inter": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.15.tgz", + "integrity": "sha512-/IoWYEXl8lqJEx50JqNPT+bI4VNwxb/bg2oOfvG8PiEsDsmHRFvWBVHlohBNn1+QdBf+KbAjU/gb4vlGOSsVWw==" + }, + "node_modules/@fontsource/merriweather": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@fontsource/merriweather/-/merriweather-5.0.8.tgz", + "integrity": "sha512-4vvR6psdKcGzaFCQL8fGCqMI/mOLKD+mhmUe3iQilx/4VFkIcF7wswWHZ7KCPeF24edX8yd0QXX0DQ1CenMrYA==" + }, + "node_modules/@fontsource/ubuntu-mono": { + "version": "5.0.17", + "resolved": "https://registry.npmjs.org/@fontsource/ubuntu-mono/-/ubuntu-mono-5.0.17.tgz", + "integrity": "sha512-0V0FVXfbNtWERJKTf2mps8VzJy0xv9H+Pqfz9UkoPjNld1ILE+XzkgD+vIBFmkIo5zH7UdjxXaP2KkSMz8jpBw==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", diff --git a/package.json b/package.json index 2caa097..b74030e 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "format": "prettier --plugin-search-dir . --write ." }, "devDependencies": { - "@fontsource/comfortaa": "^5.0.16", "@neoconfetti/svelte": "^1.0.0", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", @@ -32,5 +31,10 @@ "vite": "^4.4.2", "vitest": "^0.32.2" }, - "type": "module" + "type": "module", + "dependencies": { + "@fontsource/inter": "^5.0.15", + "@fontsource/merriweather": "^5.0.8", + "@fontsource/ubuntu-mono": "^5.0.17" + } } From e73d53a2f60695a0adca2f39485dc0bc634752a1 Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 05:00:28 +0300 Subject: [PATCH 08/42] new scss files --- src/lib/scss/_animations.scss | 34 +++++++ src/lib/scss/_base.scss | 22 +++++ src/lib/scss/_breakpoints.scss | 43 ++++++++ src/lib/scss/_code-highlights.scss | 151 +++++++++++++++++++++++++++++ src/lib/scss/_functions.scss | 6 ++ src/lib/scss/_markdown.scss | 85 ++++++++++++++++ src/lib/scss/_mixins.scss | 49 ++++++++++ src/lib/scss/_reset.scss | 47 +++++++++ src/lib/scss/_themes.scss | 93 ++++++++++++++++++ src/lib/scss/_typography.scss | 63 ++++++++++++ src/lib/scss/_variables.scss | 13 +++ src/lib/scss/global.scss | 48 +++++++++ 12 files changed, 654 insertions(+) create mode 100644 src/lib/scss/_animations.scss create mode 100644 src/lib/scss/_base.scss create mode 100644 src/lib/scss/_breakpoints.scss create mode 100644 src/lib/scss/_code-highlights.scss create mode 100644 src/lib/scss/_functions.scss create mode 100644 src/lib/scss/_markdown.scss create mode 100644 src/lib/scss/_mixins.scss create mode 100644 src/lib/scss/_reset.scss create mode 100644 src/lib/scss/_themes.scss create mode 100644 src/lib/scss/_typography.scss create mode 100644 src/lib/scss/_variables.scss create mode 100644 src/lib/scss/global.scss diff --git a/src/lib/scss/_animations.scss b/src/lib/scss/_animations.scss new file mode 100644 index 0000000..828dfe2 --- /dev/null +++ b/src/lib/scss/_animations.scss @@ -0,0 +1,34 @@ +@keyframes svg-text-stroke { + 0% { + fill: transparent; + stroke: var(--text-color); + stroke-dashoffset: 25%; + stroke-dasharray: 0 50%; + stroke-width: 2; + } + 70% { + fill: transparent; + stroke: var(--text-color); + } + 80% { + fill: transparent; + stroke: var(--text-color); + stroke-width: 3; + } + 100% { + fill: var(--text-color); + stroke: transparent; + stroke-dashoffset: -25%; + stroke-dasharray: 50% 0; + stroke-width: 0; + } +} + +@keyframes spin { + from { + transform: rotate(0turn); + } + to { + transform: rotate(1turn); + } +} diff --git a/src/lib/scss/_base.scss b/src/lib/scss/_base.scss new file mode 100644 index 0000000..8b80de6 --- /dev/null +++ b/src/lib/scss/_base.scss @@ -0,0 +1,22 @@ +// Styles that are used everywhere + +.container { + @include padded-container; +} + +ul, +ol { + margin: 10px 0 10px 40px; + padding: 0; + + li { + margin: 6px 0; + + &::marker { + color: var(--color--primary); + } + } +} +ul { + list-style: outside; +} diff --git a/src/lib/scss/_breakpoints.scss b/src/lib/scss/_breakpoints.scss new file mode 100644 index 0000000..c14577f --- /dev/null +++ b/src/lib/scss/_breakpoints.scss @@ -0,0 +1,43 @@ +$breakpoint-iphone-se-max: 320px; +$breakpoint-phone-max: 767px; +$breakpoint-tablet-portrait-min: 768px; +$breakpoint-tablet-portrait-max: 900px; +$breakpoint-tablet-landscape-min: 901px; +$breakpoint-tablet-landscape-max: 1200px; +$breakpoint-desktop-min: 1201px; + +@mixin for-iphone-se { + @media (max-width: $breakpoint-iphone-se-max) { + @content; + } +} +@mixin for-phone-only { + @media (max-width: $breakpoint-phone-max) { + @content; + } +} +@mixin for-tablet-portrait-up { + @media (min-width: $breakpoint-tablet-portrait-min) { + @content; + } +} +@mixin for-tablet-portrait-down { + @media (max-width: $breakpoint-tablet-portrait-max) { + @content; + } +} +@mixin for-tablet-landscape-up { + @media (min-width: $breakpoint-tablet-landscape-min) { + @content; + } +} +@mixin for-tablet-landscape-down { + @media (max-width: $breakpoint-tablet-landscape-max) { + @content; + } +} +@mixin for-desktop-up { + @media (min-width: $breakpoint-desktop-min) { + @content; + } +} diff --git a/src/lib/scss/_code-highlights.scss b/src/lib/scss/_code-highlights.scss new file mode 100644 index 0000000..a815547 --- /dev/null +++ b/src/lib/scss/_code-highlights.scss @@ -0,0 +1,151 @@ +// pre[class*="language-"] { +// display: block; +// background-color: var(--code-background-color); +// color: var(--code-text-color); +// font-family: var(--mono-font); +// font-size: 0.85em; +// line-height: 1.33em; +// border-radius: 0.25em; +// box-shadow: var(--card-shadow); + +// padding: 30px 15px; + +// overflow-x: auto; +// scrollbar-color: var(--primary-color) var(--scrollbar-track-color); +// scrollbar-width: thin; + +// &::-webkit-scrollbar { +// height: 5px; +// } +// &::-webkit-scrollbar-thumb { +// background: var(--primary-color); +// } +// } + +code[class*='language-'], +pre[class*='language-'] { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + text-shadow: none; + background: rgba(29, 59, 83, 0.99); +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: rgba(29, 59, 83, 0.99); +} + +@media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } +} + +.token.comment, +.token.prolog, +.token.cdata { + color: rgb(99, 119, 119); + font-style: italic; +} + +.token.punctuation { + color: rgb(199, 146, 234); +} + +.namespace { + color: rgb(178, 204, 214); +} + +.token.deleted { + color: rgba(239, 83, 80, 0.56); + font-style: italic; +} + +.token.symbol, +.token.property { + color: rgb(128, 203, 196); +} + +.token.tag, +.token.operator, +.token.keyword { + color: rgb(127, 219, 202); +} + +.token.boolean { + color: rgb(255, 88, 116); +} + +.token.number { + color: rgb(247, 140, 108); +} + +.token.constant, +.token.function, +.token.builtin, +.token.char { + color: rgb(130, 170, 255); +} + +.token.selector, +.token.doctype { + color: rgb(199, 146, 234); + font-style: italic; +} + +.token.attr-name, +.token.inserted { + color: rgb(173, 219, 103); + font-style: italic; +} + +.token.string, +.token.url, +.token.entity, +.language-css .token.string, +.style .token.string { + color: rgb(173, 219, 103); +} + +.token.class-name, +.token.atrule, +.token.attr-value { + color: rgb(255, 203, 139); +} + +.token.regex, +.token.important, +.token.variable { + color: rgb(214, 222, 235); +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} diff --git a/src/lib/scss/_functions.scss b/src/lib/scss/_functions.scss new file mode 100644 index 0000000..bdd9d0b --- /dev/null +++ b/src/lib/scss/_functions.scss @@ -0,0 +1,6 @@ +// Calculate brightness of a given color. +@function brightness($color) { + // @return ((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)) / 255 * 100%; + // @return math.div((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114), 255); + @return calc(((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)) / 255); +} diff --git a/src/lib/scss/_markdown.scss b/src/lib/scss/_markdown.scss new file mode 100644 index 0000000..6265b2b --- /dev/null +++ b/src/lib/scss/_markdown.scss @@ -0,0 +1,85 @@ +#article-content { + .content { + a:not(.button) { + &:hover { + filter: drop-shadow(0px 0px 3px var(--color--primary)); + } + } + + p { + margin: 0.75rem 0; + line-height: 1.55em; + } + + h2 { + margin: 3rem 0 0.5rem; + } + + h3 { + font-size: 1.2rem; + margin: 2rem 0 0.3rem; + } + + h4 { + font-size: 1.3rem; + margin: 2rem 0 0.3rem; + } + + picture { + display: inline; + } + + img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + + max-width: 100%; + height: auto; + width: auto; + + box-shadow: var(--image-shadow); + } + + figcaption { + font-size: 0.85rem; + text-align: center; + margin-bottom: 2rem; + color: rgba(var(--color--text-rgb), 0.8); + } + + img + figcaption { + margin-top: -1rem; + } + + blockquote { + padding: 25px 25px 15px; + border-radius: 20px; + font-size: 1.1rem; + border-left: 4px solid var(--color--primary); + background: var(--color--callout-background); + } + + code:not([class^='language-']) { + background: var(--color--code-inline-background); + padding: 5px 10px; + border-radius: 5px; + } + + code { + font-family: var(--font--mono); + } + } + + .heading-link { + color: var(--color--primary); + text-decoration: none; + margin-right: 10px; + } + + img { + border-radius: 6px; + } +} diff --git a/src/lib/scss/_mixins.scss b/src/lib/scss/_mixins.scss new file mode 100644 index 0000000..221d102 --- /dev/null +++ b/src/lib/scss/_mixins.scss @@ -0,0 +1,49 @@ +@import './_breakpoints.scss'; +@import './_functions.scss'; + +@mixin padded-container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + + @include for-iphone-se { + padding-left: 0; + padding-right: 0; + } + + @include for-tablet-portrait-up { + padding-right: 20px; + padding-left: 20px; + } + + @include for-tablet-landscape-up { + padding-right: 30px; + padding-left: 30px; + } + + @include for-desktop-up { + max-width: 1080px; + } +} + +// Defines a bunch of CSS variables for a given color +// In HEX, HSL and RGB formats +// Plus a contrast option for text +@mixin define-color($title, $color) { + --color--#{$title}: #{$color}; + + --color--#{$title}-h: #{hue($color)}; + --color--#{$title}-l: #{lightness($color)}; + --color--#{$title}-s: #{saturation($color)}; + --color--#{$title}-a: #{alpha($color)}; + + --color--#{$title}-rgb: #{red($color)}, #{green($color)}, #{blue($color)}; + + --color--#{$title}-contrast: #{if( + brightness($color) > 186, + var(--color--text), + var(--color--text-inverse) + )}; +} diff --git a/src/lib/scss/_reset.scss b/src/lib/scss/_reset.scss new file mode 100644 index 0000000..58fde3d --- /dev/null +++ b/src/lib/scss/_reset.scss @@ -0,0 +1,47 @@ +/* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +* { + margin: 0; +} +html, +body { + height: 100%; +} +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +input, +button, +textarea, +select { + font: inherit; +} +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +#root, +#__next { + isolation: isolate; +} diff --git a/src/lib/scss/_themes.scss b/src/lib/scss/_themes.scss new file mode 100644 index 0000000..37f7fad --- /dev/null +++ b/src/lib/scss/_themes.scss @@ -0,0 +1,93 @@ +@import '$lib/scss/_mixins.scss'; + +@mixin base-theme { + @include define-color('primary', #6E29E7); + @include define-color('primary-shade', #b28cf2); + @include define-color('primary-tint', #f9f6fe); + + @include define-color('secondary', #ff571a); + @include define-color('secondary-shade', #ffa280); + @include define-color('secondary-tint', #fff8f5); + + @include define-color('yellow', #ffd400); + + @include define-color('text', #1c1e26); + @include define-color('text-shade', #5d5f65); + @include define-color('text-inverse', #ffffff); + @include define-color('text-inverse-shade', #9eb4b5); + + @include define-color('page-background', #f4f8fb); + @include define-color('post-page-background', #f3fbfc); + @include define-color('card-background', #ffffff); + + // Used for Callout component + @include define-color('callout-background', #f4f8fb); + @include define-color('callout-background--info', #dfeffd); + @include define-color('callout-accent--info', #2883f4); + @include define-color('callout-background--warning', #fff6b6); + @include define-color('callout-accent--warning', #c87820); + @include define-color('callout-background--error', #ffe8e8); + @include define-color('callout-accent--error', #f95256); + @include define-color('callout-background--success', #dcf7ec); + @include define-color('callout-accent--success', #009f70); + + // Used for Code Block component + @include define-color('code-background', #1c1e26); + @include define-color('code-text', #ffffff); + @include define-color('code-inline-background', #e3e3e3); + + --color--waves-start: rgba(var(--color--primary-rgb), 0.3); + --color--waves-end: rgba(var(--color--primary-rgb), 0.1); + + --card-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); + --card-shadow-hover: 0px 4px 10px 8px rgb(0 0 0 / 10%); + --image-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03); +} + +@mixin dark-theme { + @include define-color('primary', #9f67ff); + @include define-color('primary-shade', #4612A1); + @include define-color('primary-tint', #231934); + + @include define-color('secondary', #ff723f); + @include define-color('secondary-shade', #AB3307); + @include define-color('secondary-tint', #1b1918); + + @include define-color('yellow', #ffd400); + + @include define-color('text', #ffffff); + @include define-color('text-shade', #9eb4b5); + @include define-color('text-inverse', #1c1e26); + @include define-color('text-inverse-shade', #5d5f65); + + @include define-color('page-background', #1c1e26); + @include define-color('post-page-background', #141519); + @include define-color('card-background', #32343e); + + // Used for Callout component + @include define-color('callout-background', #1c1e26); + @include define-color('callout-background--info', #1d3874); + @include define-color('callout-accent--info', #6ca9f7); + @include define-color('callout-background--warning', #724413); + @include define-color('callout-accent--warning', #ffca39); + @include define-color('callout-background--error', #7c1d20); + @include define-color('callout-accent--error', #ff8082); + @include define-color('callout-background--success', #004737); + @include define-color('callout-accent--success', #00c48f); + + @include define-color('code-inline-background', #2b3131); +} + +:root { + @include base-theme; + + &[data-theme='dark'] { + @include dark-theme; + } + + &[data-theme='auto'] { + @media (prefers-color-scheme: dark) { + @include dark-theme; + } + } +} diff --git a/src/lib/scss/_typography.scss b/src/lib/scss/_typography.scss new file mode 100644 index 0000000..52c7b90 --- /dev/null +++ b/src/lib/scss/_typography.scss @@ -0,0 +1,63 @@ +a { + color: var(--color--text); + text-decoration-color: var(--color--primary); + text-underline-offset: 0.1em; + text-decoration-thickness: 2px; + transition: all 0.2s ease-in-out; + + &:hover { + text-underline-offset: 0.3em; + } +} + +::selection { + background-color: rgba(var(--color--primary-rgb), 0.3); + color: var(--color--text); + text-shadow: none; +} + +strong, +b { + font-weight: 600; +} +em, +i { + font-style: italic; +} + +// #region Titles +h1 { + font-size: 2.5rem; + font-weight: 700; + + @include for-phone-only { + font-size: 2rem; + } +} + +h2 { + font-size: 1.8rem; + font-weight: 600; +} + +h3 { + font-size: 1.5rem; + font-weight: 600; +} + +h4 { + font-size: 1.2rem; +} + +h5 { + font-size: 1rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: var(--font--title); +} +// #endregion diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss new file mode 100644 index 0000000..3bcef2e --- /dev/null +++ b/src/lib/scss/_variables.scss @@ -0,0 +1,13 @@ +:root { + // Fonts + --font--default: Inter, sans-serif; + --font--title: Merriweather, serif; + --font--mono: Ubuntu Mono, monospace; + + // Grabbed from open-props.style + --ease-3: cubic-bezier(0.25, 0, 0.3, 1); + --ease-4: cubic-bezier(0.25, 0, 0.2, 1); + --ease-out-1: cubic-bezier(0, 0, 0.75, 1); + --ease-out-3: cubic-bezier(0, 0, 0.3, 1); + --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); +} diff --git a/src/lib/scss/global.scss b/src/lib/scss/global.scss new file mode 100644 index 0000000..134f352 --- /dev/null +++ b/src/lib/scss/global.scss @@ -0,0 +1,48 @@ +@import '$lib/scss/_reset.scss'; +@import '$lib/scss/_variables.scss'; +@import '$lib/scss/_themes.scss'; +@import '$lib/scss/_breakpoints.scss'; +@import '$lib/scss/_functions.scss'; +@import '$lib/scss/_mixins.scss'; +@import '$lib/scss/_base.scss'; +@import '$lib/scss/_typography.scss'; +@import '$lib/scss/_markdown.scss'; +@import '$lib/scss/_code-highlights.scss'; +@import '$lib/scss/animations.scss'; + +@import '@fontsource/inter'; +@import '@fontsource/inter/600.css'; +@import '@fontsource/inter/700.css'; +@import '@fontsource/merriweather'; +@import '@fontsource/merriweather/900.css'; +@import '@fontsource/ubuntu-mono'; + +body { + --body-background-color: var(--color--page-background); + background-color: var(--body-background-color); + color: var(--color--text); + fill: var(--color--text); + transition: all 0.4s ease; + font-family: var(--font--default); + line-height: 1.3; + scroll-behavior: smooth; + + height: 100%; + min-height: 100vh; + /* safari viewport bug fix */ + min-height: -webkit-fill-available; + + width: 100%; + overflow-x: hidden; +} + +html { + scroll-behavior: smooth; + font-size: 18px; + width: 100%; +} + +#svelte-root { + height: 100%; + position: relative; +} From 5bb7cc405ec3c1fe9adc4b5b1c4cfe4b4e1e4876 Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 05:01:27 +0300 Subject: [PATCH 09/42] import global.scss --- src/routes/+layout.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4fa864c..92dd51c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1 +1,5 @@ + + From 2c10ed2a4b0ff334462b3b267abff167b9713810 Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 05:01:31 +0300 Subject: [PATCH 10/42] prettier --- src/lib/scss/_themes.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/scss/_themes.scss b/src/lib/scss/_themes.scss index 37f7fad..8e5bcb3 100644 --- a/src/lib/scss/_themes.scss +++ b/src/lib/scss/_themes.scss @@ -1,8 +1,8 @@ @import '$lib/scss/_mixins.scss'; @mixin base-theme { - @include define-color('primary', #6E29E7); - @include define-color('primary-shade', #b28cf2); + @include define-color('primary', #6e29e7); + @include define-color('primary-shade', #b28cf2); @include define-color('primary-tint', #f9f6fe); @include define-color('secondary', #ff571a); @@ -46,11 +46,11 @@ @mixin dark-theme { @include define-color('primary', #9f67ff); - @include define-color('primary-shade', #4612A1); + @include define-color('primary-shade', #4612a1); @include define-color('primary-tint', #231934); @include define-color('secondary', #ff723f); - @include define-color('secondary-shade', #AB3307); + @include define-color('secondary-shade', #ab3307); @include define-color('secondary-tint', #1b1918); @include define-color('yellow', #ffd400); From 714b971d7e7215b81045e965e083d2a7e16ddc0e Mon Sep 17 00:00:00 2001 From: bhc Date: Tue, 24 Oct 2023 06:06:07 +0300 Subject: [PATCH 11/42] add blog template --- package-lock.json | 410 ++++++++++++++++++ package.json | 7 + src/lib/components/atoms/Button.story.svelte | 51 +++ src/lib/components/atoms/Button.svelte | 132 ++++++ src/lib/components/atoms/Card.story.svelte | 36 ++ src/lib/components/atoms/Card.svelte | 99 +++++ src/lib/components/atoms/Image.svelte | 48 ++ src/lib/components/atoms/Logo.story.svelte | 17 + src/lib/components/atoms/Logo.svelte | 86 ++++ src/lib/components/atoms/RssLink.svelte | 22 + src/lib/components/atoms/SingleSparkle.svelte | 55 +++ .../components/atoms/Sparkles.story.svelte | 32 ++ src/lib/components/atoms/Sparkles.svelte | 71 +++ src/lib/components/atoms/Tag.story.svelte | 17 + src/lib/components/atoms/Tag.svelte | 31 ++ .../molecules/BlogPostCard.story.svelte | 32 ++ .../components/molecules/BlogPostCard.svelte | 97 +++++ .../components/molecules/Callout.story.svelte | 33 ++ src/lib/components/molecules/Callout.svelte | 71 +++ .../molecules/CodeBlock.story.svelte | 55 +++ src/lib/components/molecules/CodeBlock.svelte | 72 +++ .../molecules/FeatureCard.story.svelte | 20 + .../components/molecules/FeatureCard.svelte | 67 +++ .../molecules/MarkerHighlight.story.svelte | 33 ++ .../molecules/MarkerHighlight.svelte | 34 ++ .../components/molecules/Socials.story.svelte | 11 + src/lib/components/molecules/Socials.svelte | 73 ++++ .../molecules/SparklingHighlight.story.svelte | 40 ++ .../molecules/SparklingHighlight.svelte | 19 + .../components/molecules/ThemeToggle.svelte | 168 +++++++ .../molecules/TintHighlight.story.svelte | 33 ++ .../components/molecules/TintHighlight.svelte | 21 + .../components/organisms/About.story.svelte | 11 + src/lib/components/organisms/About.svelte | 87 ++++ .../organisms/ContentSection.story.svelte | 45 ++ .../organisms/ContentSection.svelte | 104 +++++ src/lib/components/organisms/Features.svelte | 73 ++++ .../components/organisms/Footer.story.svelte | 11 + src/lib/components/organisms/Footer.svelte | 70 +++ .../components/organisms/Header.story.svelte | 17 + src/lib/components/organisms/Header.svelte | 80 ++++ .../components/organisms/Hero.story.svelte | 11 + src/lib/components/organisms/Hero.svelte | 76 ++++ .../components/organisms/RecentPosts.svelte | 46 ++ .../components/organisms/RelatedPosts.svelte | 44 ++ .../components/organisms/Waves.story.svelte | 11 + src/lib/components/organisms/Waves.svelte | 93 ++++ src/lib/data/blog-posts/index.ts | 4 + src/lib/data/blog-posts/utils.ts | 72 +++ src/lib/data/features.ts | 43 ++ src/lib/data/meta.ts | 21 + src/lib/icons/alert.svelte | 22 + src/lib/icons/blog.svelte | 16 + src/lib/icons/chat.svelte | 36 ++ src/lib/icons/check.svelte | 21 + src/lib/icons/circle.svelte | 15 + src/lib/icons/download.svelte | 16 + src/lib/icons/error.svelte | 138 ++++++ src/lib/icons/experience.svelte | 14 + src/lib/icons/external-link.svelte | 21 + src/lib/icons/features.svelte | 16 + src/lib/icons/footer-wave.svelte | 15 + src/lib/icons/info.svelte | 22 + src/lib/icons/internet.svelte | 63 +++ src/lib/icons/pin.svelte | 21 + src/lib/icons/rss.svelte | 27 ++ src/lib/icons/socials/email.svelte | 20 + src/lib/icons/socials/github.svelte | 21 + src/lib/icons/socials/linkedin.svelte | 28 ++ src/lib/icons/socials/mastodon.svelte | 16 + src/lib/icons/socials/telegram.svelte | 15 + src/lib/icons/star.svelte | 15 + src/lib/utils/regex.ts | 1 + src/lib/utils/types.ts | 40 ++ src/routes/(blog-article)/+layout.server.ts | 11 + src/routes/(blog-article)/+layout.svelte | 190 ++++++++ src/routes/(blog-article)/blog-posts/+page.md | 67 +++ .../(blog-article)/customization/+page.md | 60 +++ .../(blog-article)/project-structure/+page.md | 57 +++ src/routes/(waves)/+layout.svelte | 35 ++ src/routes/(waves)/+page.server.ts | 11 + src/routes/(waves)/+page.svelte | 23 + src/routes/(waves)/404/+page.svelte | 41 ++ src/routes/(waves)/blog/+page.server.ts | 7 + src/routes/(waves)/blog/+page.svelte | 68 +++ src/routes/+error.svelte | 50 +++ src/routes/{+page.ts => +layout.ts} | 0 src/routes/{+page.svelte => oldpage.svelte} | 0 src/routes/rss.xml/+server.ts | 72 +++ svelte.config.js | 31 ++ vite.config.ts | 6 + 91 files changed, 4260 insertions(+) create mode 100644 src/lib/components/atoms/Button.story.svelte create mode 100644 src/lib/components/atoms/Button.svelte create mode 100644 src/lib/components/atoms/Card.story.svelte create mode 100644 src/lib/components/atoms/Card.svelte create mode 100644 src/lib/components/atoms/Image.svelte create mode 100644 src/lib/components/atoms/Logo.story.svelte create mode 100644 src/lib/components/atoms/Logo.svelte create mode 100644 src/lib/components/atoms/RssLink.svelte create mode 100644 src/lib/components/atoms/SingleSparkle.svelte create mode 100644 src/lib/components/atoms/Sparkles.story.svelte create mode 100644 src/lib/components/atoms/Sparkles.svelte create mode 100644 src/lib/components/atoms/Tag.story.svelte create mode 100644 src/lib/components/atoms/Tag.svelte create mode 100644 src/lib/components/molecules/BlogPostCard.story.svelte create mode 100644 src/lib/components/molecules/BlogPostCard.svelte create mode 100644 src/lib/components/molecules/Callout.story.svelte create mode 100644 src/lib/components/molecules/Callout.svelte create mode 100644 src/lib/components/molecules/CodeBlock.story.svelte create mode 100644 src/lib/components/molecules/CodeBlock.svelte create mode 100644 src/lib/components/molecules/FeatureCard.story.svelte create mode 100644 src/lib/components/molecules/FeatureCard.svelte create mode 100644 src/lib/components/molecules/MarkerHighlight.story.svelte create mode 100644 src/lib/components/molecules/MarkerHighlight.svelte create mode 100644 src/lib/components/molecules/Socials.story.svelte create mode 100644 src/lib/components/molecules/Socials.svelte create mode 100644 src/lib/components/molecules/SparklingHighlight.story.svelte create mode 100644 src/lib/components/molecules/SparklingHighlight.svelte create mode 100644 src/lib/components/molecules/ThemeToggle.svelte create mode 100644 src/lib/components/molecules/TintHighlight.story.svelte create mode 100644 src/lib/components/molecules/TintHighlight.svelte create mode 100644 src/lib/components/organisms/About.story.svelte create mode 100644 src/lib/components/organisms/About.svelte create mode 100644 src/lib/components/organisms/ContentSection.story.svelte create mode 100644 src/lib/components/organisms/ContentSection.svelte create mode 100644 src/lib/components/organisms/Features.svelte create mode 100644 src/lib/components/organisms/Footer.story.svelte create mode 100644 src/lib/components/organisms/Footer.svelte create mode 100644 src/lib/components/organisms/Header.story.svelte create mode 100644 src/lib/components/organisms/Header.svelte create mode 100644 src/lib/components/organisms/Hero.story.svelte create mode 100644 src/lib/components/organisms/Hero.svelte create mode 100644 src/lib/components/organisms/RecentPosts.svelte create mode 100644 src/lib/components/organisms/RelatedPosts.svelte create mode 100644 src/lib/components/organisms/Waves.story.svelte create mode 100644 src/lib/components/organisms/Waves.svelte create mode 100644 src/lib/data/blog-posts/index.ts create mode 100644 src/lib/data/blog-posts/utils.ts create mode 100644 src/lib/data/features.ts create mode 100644 src/lib/data/meta.ts create mode 100644 src/lib/icons/alert.svelte create mode 100644 src/lib/icons/blog.svelte create mode 100644 src/lib/icons/chat.svelte create mode 100644 src/lib/icons/check.svelte create mode 100644 src/lib/icons/circle.svelte create mode 100644 src/lib/icons/download.svelte create mode 100644 src/lib/icons/error.svelte create mode 100644 src/lib/icons/experience.svelte create mode 100644 src/lib/icons/external-link.svelte create mode 100644 src/lib/icons/features.svelte create mode 100644 src/lib/icons/footer-wave.svelte create mode 100644 src/lib/icons/info.svelte create mode 100644 src/lib/icons/internet.svelte create mode 100644 src/lib/icons/pin.svelte create mode 100644 src/lib/icons/rss.svelte create mode 100644 src/lib/icons/socials/email.svelte create mode 100644 src/lib/icons/socials/github.svelte create mode 100644 src/lib/icons/socials/linkedin.svelte create mode 100644 src/lib/icons/socials/mastodon.svelte create mode 100644 src/lib/icons/socials/telegram.svelte create mode 100644 src/lib/icons/star.svelte create mode 100644 src/lib/utils/regex.ts create mode 100644 src/lib/utils/types.ts create mode 100644 src/routes/(blog-article)/+layout.server.ts create mode 100644 src/routes/(blog-article)/+layout.svelte create mode 100644 src/routes/(blog-article)/blog-posts/+page.md create mode 100644 src/routes/(blog-article)/customization/+page.md create mode 100644 src/routes/(blog-article)/project-structure/+page.md create mode 100644 src/routes/(waves)/+layout.svelte create mode 100644 src/routes/(waves)/+page.server.ts create mode 100644 src/routes/(waves)/+page.svelte create mode 100644 src/routes/(waves)/404/+page.svelte create mode 100644 src/routes/(waves)/blog/+page.server.ts create mode 100644 src/routes/(waves)/blog/+page.svelte create mode 100644 src/routes/+error.svelte rename src/routes/{+page.ts => +layout.ts} (100%) rename src/routes/{+page.svelte => oldpage.svelte} (100%) create mode 100644 src/routes/rss.xml/+server.ts diff --git a/package-lock.json b/package-lock.json index 18962ff..5957454 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,12 +19,19 @@ "@types/cookie": "^0.5.1", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", + "dateformat": "^5.0.3", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte": "^2.30.0", + "mdsvex": "^0.11.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "reading-time": "^1.5.0", + "rehype-autolink-headings": "^7.0.0", + "rehype-external-links": "^3.0.0", + "rehype-slug": "^6.0.0", "sass": "^1.69.4", + "striptags": "^3.2.0", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", @@ -740,6 +747,15 @@ "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==", "dev": true }, + "node_modules/@types/hast": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.2.tgz", + "integrity": "sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==", + "dev": true, + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/json-schema": { "version": "7.0.14", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz", @@ -767,6 +783,12 @@ "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==", "dev": true }, + "node_modules/@types/unist": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.9.tgz", + "integrity": "sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==", + "dev": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz", @@ -956,6 +978,12 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, "node_modules/@vitest/expect": { "version": "0.32.4", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.4.tgz", @@ -1176,6 +1204,16 @@ "dequal": "^2.0.3" } }, + "node_modules/bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1410,6 +1448,15 @@ "node": ">=4" } }, + "node_modules/dateformat": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-5.0.3.tgz", + "integrity": "sha512-Kvr6HmPXUMerlLcLF+Pwq3K7apHpYmGDVqrxcDasBg86UcKeTSNWbEzU8bwdXnxnR44FtMhJAxI4Bov6Y/KUfA==", + "dev": true, + "engines": { + "node": ">=12.20" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1478,6 +1525,19 @@ "integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==", "dev": true }, + "node_modules/devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dev": true, + "dependencies": { + "dequal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -1768,6 +1828,12 @@ "node": ">=0.10.0" } }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -1912,6 +1978,12 @@ "node": "*" } }, + "node_modules/github-slugger": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", + "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==", + "dev": true + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -2012,6 +2084,45 @@ "node": ">=8" } }, + "node_modules/hast-util-heading-rank": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz", + "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-is-element": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz", + "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-string": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz", + "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -2068,6 +2179,18 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/is-absolute-url": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz", + "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2119,6 +2242,18 @@ "node": ">=8" } }, + "node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-reference": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", @@ -2294,6 +2429,21 @@ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "dev": true }, + "node_modules/mdsvex": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.11.0.tgz", + "integrity": "sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.3", + "prism-svelte": "^0.4.7", + "prismjs": "^1.17.1", + "vfile-message": "^2.0.4" + }, + "peerDependencies": { + "svelte": ">=3 <5" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -2792,6 +2942,21 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/prism-svelte": { + "version": "0.4.7", + "resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz", + "integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==", + "dev": true + }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/punycode": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", @@ -2839,6 +3004,65 @@ "node": ">=8.10.0" } }, + "node_modules/reading-time": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz", + "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==", + "dev": true + }, + "node_modules/rehype-autolink-headings": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.0.0.tgz", + "integrity": "sha512-DLskejGYHQP9v7vUW85BeYIclgfMQ1IwAMx+0lm8Sr3cME2NThgy2OdTfosmuBA68fqP5o4FK+dknpUMFvlxYQ==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0", + "@ungap/structured-clone": "^1.0.0", + "hast-util-heading-rank": "^3.0.0", + "hast-util-is-element": "^3.0.0", + "unified": "^11.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-external-links": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz", + "integrity": "sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0", + "@ungap/structured-clone": "^1.0.0", + "hast-util-is-element": "^3.0.0", + "is-absolute-url": "^4.0.0", + "space-separated-tokens": "^2.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-slug": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz", + "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0", + "github-slugger": "^2.0.0", + "hast-util-heading-rank": "^3.0.0", + "hast-util-to-string": "^3.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3060,6 +3284,16 @@ "node": ">=0.10.0" } }, + "node_modules/space-separated-tokens": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", + "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -3120,6 +3354,12 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/striptags": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz", + "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==", + "dev": true + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -3352,6 +3592,16 @@ "node": ">=6" } }, + "node_modules/trough": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz", + "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -3440,6 +3690,104 @@ "integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==", "dev": true }, + "node_modules/unified": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.3.tgz", + "integrity": "sha512-jlCV402P+YDcFcB2VcN/n8JasOddqIiaxv118wNBoZXEhOn+lYG7BR4Bfg2BwxvlK58dwbuH2w7GX2esAjL6Mg==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==", + "dev": true + }, + "node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-is/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==", + "dev": true + }, + "node_modules/unist-util-stringify-position": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", + "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-visit-parents/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==", + "dev": true + }, + "node_modules/unist-util-visit/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==", + "dev": true + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -3455,6 +3803,68 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/vfile": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz", + "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-message": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", + "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile/node_modules/@types/unist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz", + "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==", + "dev": true + }, + "node_modules/vfile/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vite": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", diff --git a/package.json b/package.json index b74030e..3effa80 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,19 @@ "@types/cookie": "^0.5.1", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", + "dateformat": "^5.0.3", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte": "^2.30.0", + "mdsvex": "^0.11.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.10.1", + "reading-time": "^1.5.0", + "rehype-autolink-headings": "^7.0.0", + "rehype-external-links": "^3.0.0", + "rehype-slug": "^6.0.0", "sass": "^1.69.4", + "striptags": "^3.2.0", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "tslib": "^2.4.1", diff --git a/src/lib/components/atoms/Button.story.svelte b/src/lib/components/atoms/Button.story.svelte new file mode 100644 index 0000000..f672527 --- /dev/null +++ b/src/lib/components/atoms/Button.story.svelte @@ -0,0 +1,51 @@ + + + + + + + + + + + + + +
+ + + + + + +
+ diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte new file mode 100644 index 0000000..f0bb660 --- /dev/null +++ b/src/lib/components/atoms/Button.svelte @@ -0,0 +1,132 @@ + + + + {#if $$slots['icon']} +
+ +
+ {/if} + + + + diff --git a/src/lib/components/atoms/Card.story.svelte b/src/lib/components/atoms/Card.story.svelte new file mode 100644 index 0000000..18f5fa3 --- /dev/null +++ b/src/lib/components/atoms/Card.story.svelte @@ -0,0 +1,36 @@ + + + +
+ + +
Card Content
+
Footer
+ + + + + + A cute dog +
+ Cards with images will automatically adapt between showing the image on top or bottom + depending on how wide it is. +
+ + + + + + A cute dog +
Card Content
+
Footer
+ + +
+ diff --git a/src/lib/components/atoms/Card.svelte b/src/lib/components/atoms/Card.svelte new file mode 100644 index 0000000..ce347af --- /dev/null +++ b/src/lib/components/atoms/Card.svelte @@ -0,0 +1,99 @@ + + + + {#if $$slots.image} +
+ +
+ {/if} +
+
+ +
+ {#if $$slots.footer} +
+ +
+ {/if} +
+ + + diff --git a/src/lib/components/atoms/Image.svelte b/src/lib/components/atoms/Image.svelte new file mode 100644 index 0000000..b1fed68 --- /dev/null +++ b/src/lib/components/atoms/Image.svelte @@ -0,0 +1,48 @@ + + + + + diff --git a/src/lib/components/atoms/Logo.story.svelte b/src/lib/components/atoms/Logo.story.svelte new file mode 100644 index 0000000..c173713 --- /dev/null +++ b/src/lib/components/atoms/Logo.story.svelte @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/src/lib/components/atoms/Logo.svelte b/src/lib/components/atoms/Logo.svelte new file mode 100644 index 0000000..10c35f1 --- /dev/null +++ b/src/lib/components/atoms/Logo.svelte @@ -0,0 +1,86 @@ + + + + + diff --git a/src/lib/components/atoms/RssLink.svelte b/src/lib/components/atoms/RssLink.svelte new file mode 100644 index 0000000..baf6416 --- /dev/null +++ b/src/lib/components/atoms/RssLink.svelte @@ -0,0 +1,22 @@ + + + + + + + \ No newline at end of file diff --git a/src/lib/components/atoms/SingleSparkle.svelte b/src/lib/components/atoms/SingleSparkle.svelte new file mode 100644 index 0000000..6f1fe2f --- /dev/null +++ b/src/lib/components/atoms/SingleSparkle.svelte @@ -0,0 +1,55 @@ + + +
+ + + +
+ + diff --git a/src/lib/components/atoms/Sparkles.story.svelte b/src/lib/components/atoms/Sparkles.story.svelte new file mode 100644 index 0000000..eb32165 --- /dev/null +++ b/src/lib/components/atoms/Sparkles.story.svelte @@ -0,0 +1,32 @@ + + + + + + + +
+ + + + + +
+ diff --git a/src/lib/components/atoms/Sparkles.svelte b/src/lib/components/atoms/Sparkles.svelte new file mode 100644 index 0000000..3ada195 --- /dev/null +++ b/src/lib/components/atoms/Sparkles.svelte @@ -0,0 +1,71 @@ + + +
+ {#each sparkles as sparkle (sparkle.id)} + + {/each} + + + +
+ + diff --git a/src/lib/components/atoms/Tag.story.svelte b/src/lib/components/atoms/Tag.story.svelte new file mode 100644 index 0000000..e617d32 --- /dev/null +++ b/src/lib/components/atoms/Tag.story.svelte @@ -0,0 +1,17 @@ + + + + + This is a Tag + + + + This is a Tag + + diff --git a/src/lib/components/atoms/Tag.svelte b/src/lib/components/atoms/Tag.svelte new file mode 100644 index 0000000..024b9cf --- /dev/null +++ b/src/lib/components/atoms/Tag.svelte @@ -0,0 +1,31 @@ + + +
+ +
+ + diff --git a/src/lib/components/molecules/BlogPostCard.story.svelte b/src/lib/components/molecules/BlogPostCard.story.svelte new file mode 100644 index 0000000..7b21f89 --- /dev/null +++ b/src/lib/components/molecules/BlogPostCard.story.svelte @@ -0,0 +1,32 @@ + + + +
+ + + + + + + +
+ diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte new file mode 100644 index 0000000..e79d505 --- /dev/null +++ b/src/lib/components/molecules/BlogPostCard.svelte @@ -0,0 +1,97 @@ + + + +
+ {#if coverImage} + Cover image of this blog post + {/if} +
+
+

+ {title} +

+ {#if readingTime} +
{readingTime}
+ {/if} + {#if excerpt} +

+ {excerpt} +

+ {/if} +
+
+ {#if tags?.length} +
+ {#each tags.slice(0, 2) as tag} + {tag} + {/each} +
+ {/if} +
+ + + diff --git a/src/lib/components/molecules/Callout.story.svelte b/src/lib/components/molecules/Callout.story.svelte new file mode 100644 index 0000000..2980d8c --- /dev/null +++ b/src/lib/components/molecules/Callout.story.svelte @@ -0,0 +1,33 @@ + + + + + + + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien mi, euismod eu + ipsum eget, faucibus maximus erat. Integer nisl tellus, interdum sit amet nunc vel, + ullamcorper suscipit odio. + + +
+ diff --git a/src/lib/components/molecules/Callout.svelte b/src/lib/components/molecules/Callout.svelte new file mode 100644 index 0000000..e5e451b --- /dev/null +++ b/src/lib/components/molecules/Callout.svelte @@ -0,0 +1,71 @@ + + +
+ {#if type} +
+ {#if type == 'info'} + + {:else if type == 'warning' || type == 'error'} + + {:else if type == 'success'} + + {/if} +
+ {/if} + +
+ + diff --git a/src/lib/components/molecules/CodeBlock.story.svelte b/src/lib/components/molecules/CodeBlock.story.svelte new file mode 100644 index 0000000..1640f16 --- /dev/null +++ b/src/lib/components/molecules/CodeBlock.story.svelte @@ -0,0 +1,55 @@ + + + + + + + + +
+ + + 
<Header />
+
+          <main>
+            <slot />
+          </main>
+          
+          <Footer />
+ + +
+ diff --git a/src/lib/components/molecules/CodeBlock.svelte b/src/lib/components/molecules/CodeBlock.svelte new file mode 100644 index 0000000..d63c118 --- /dev/null +++ b/src/lib/components/molecules/CodeBlock.svelte @@ -0,0 +1,72 @@ + + +
+ {#if filename} +
{filename}
+ {/if} + {#if lang} +
{lang}
+ {/if} + +
+ + diff --git a/src/lib/components/molecules/FeatureCard.story.svelte b/src/lib/components/molecules/FeatureCard.story.svelte new file mode 100644 index 0000000..0991750 --- /dev/null +++ b/src/lib/components/molecules/FeatureCard.story.svelte @@ -0,0 +1,20 @@ + + + +
+ + + +
+ diff --git a/src/lib/components/molecules/FeatureCard.svelte b/src/lib/components/molecules/FeatureCard.svelte new file mode 100644 index 0000000..45c8b69 --- /dev/null +++ b/src/lib/components/molecules/FeatureCard.svelte @@ -0,0 +1,67 @@ + + + +
+ Picture describing the {name} feature +
+
+
+ {name} +
+

{description}

+
+
+ {#if tags && tags.length > 0} +
+ {#each tags as tag} + {tag.label} + {/each} +
+ {/if} +
+ + + diff --git a/src/lib/components/molecules/MarkerHighlight.story.svelte b/src/lib/components/molecules/MarkerHighlight.story.svelte new file mode 100644 index 0000000..b820cfa --- /dev/null +++ b/src/lib/components/molecules/MarkerHighlight.story.svelte @@ -0,0 +1,33 @@ + + + + + + + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien mi, euismod eu ipsum + eget, faucibus maximus erat. Integer nisl tellus, interdum sit amet nunc vel, ullamcorper + suscipit odio. Praesent vitae nisl eros. Proin vel bibendum ante. Quisque nec fringilla libero. Duis + accumsan urna at arcu vestibulum placerat. Curabitur tincidunt neque mauris, vel posuere ex + malesuada quis. Ut nec odio placerat, aliquam elit vitae, volutpat eros. Duis vel sem purus. Donec gravida a + lectus vel sagittis. Morbi vel porttitor erat. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; + +
+ diff --git a/src/lib/components/molecules/MarkerHighlight.svelte b/src/lib/components/molecules/MarkerHighlight.svelte new file mode 100644 index 0000000..d5e55d2 --- /dev/null +++ b/src/lib/components/molecules/MarkerHighlight.svelte @@ -0,0 +1,34 @@ + + + + + + + diff --git a/src/lib/components/molecules/Socials.story.svelte b/src/lib/components/molecules/Socials.story.svelte new file mode 100644 index 0000000..9d828aa --- /dev/null +++ b/src/lib/components/molecules/Socials.story.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/lib/components/molecules/Socials.svelte b/src/lib/components/molecules/Socials.svelte new file mode 100644 index 0000000..a51d205 --- /dev/null +++ b/src/lib/components/molecules/Socials.svelte @@ -0,0 +1,73 @@ + + +
+ + + + + + + + + + + + + + + +
+ + diff --git a/src/lib/components/molecules/SparklingHighlight.story.svelte b/src/lib/components/molecules/SparklingHighlight.story.svelte new file mode 100644 index 0000000..ce07fc9 --- /dev/null +++ b/src/lib/components/molecules/SparklingHighlight.story.svelte @@ -0,0 +1,40 @@ + + + + + + + + + +
+ + + {text} + + +
+ diff --git a/src/lib/components/molecules/SparklingHighlight.svelte b/src/lib/components/molecules/SparklingHighlight.svelte new file mode 100644 index 0000000..088d23a --- /dev/null +++ b/src/lib/components/molecules/SparklingHighlight.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/components/molecules/ThemeToggle.svelte b/src/lib/components/molecules/ThemeToggle.svelte new file mode 100644 index 0000000..44edb38 --- /dev/null +++ b/src/lib/components/molecules/ThemeToggle.svelte @@ -0,0 +1,168 @@ + + + + + + + diff --git a/src/lib/components/molecules/TintHighlight.story.svelte b/src/lib/components/molecules/TintHighlight.story.svelte new file mode 100644 index 0000000..7603376 --- /dev/null +++ b/src/lib/components/molecules/TintHighlight.story.svelte @@ -0,0 +1,33 @@ + + + + + + + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien mi, euismod eu ipsum + eget, faucibus maximus erat. Integer nisl tellus, interdum sit amet nunc vel, ullamcorper + suscipit odio. Praesent vitae nisl eros. Proin vel bibendum ante. Quisque nec fringilla libero. Duis + accumsan urna at arcu vestibulum placerat. Curabitur tincidunt neque mauris, vel posuere ex + malesuada quis. Ut nec odio placerat, aliquam elit vitae, volutpat eros. Duis vel sem purus. Donec gravida a + lectus vel sagittis. Morbi vel porttitor erat. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia curae; + +
+ diff --git a/src/lib/components/molecules/TintHighlight.svelte b/src/lib/components/molecules/TintHighlight.svelte new file mode 100644 index 0000000..5bc35c8 --- /dev/null +++ b/src/lib/components/molecules/TintHighlight.svelte @@ -0,0 +1,21 @@ + + + + + + + diff --git a/src/lib/components/organisms/About.story.svelte b/src/lib/components/organisms/About.story.svelte new file mode 100644 index 0000000..fde8faa --- /dev/null +++ b/src/lib/components/organisms/About.story.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte new file mode 100644 index 0000000..0ffd948 --- /dev/null +++ b/src/lib/components/organisms/About.svelte @@ -0,0 +1,87 @@ + + +
+
+

+ This is a catchy headline that + sparkles! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum velit voluptatibus commodi + autem provident quam labore, libero beatae praesentium voluptate? +

+
+ Socials: + +
+
+
+ Sample for the static template +
+
+ + diff --git a/src/lib/components/organisms/ContentSection.story.svelte b/src/lib/components/organisms/ContentSection.story.svelte new file mode 100644 index 0000000..f5e4371 --- /dev/null +++ b/src/lib/components/organisms/ContentSection.story.svelte @@ -0,0 +1,45 @@ + + + + + +
+ +
+ 
Content
+ + + + + +
+ +
+ 
Content
+ + + + + +
+ +
+ 
Content
+ + + diff --git a/src/lib/components/organisms/ContentSection.svelte b/src/lib/components/organisms/ContentSection.svelte new file mode 100644 index 0000000..898a878 --- /dev/null +++ b/src/lib/components/organisms/ContentSection.svelte @@ -0,0 +1,104 @@ + + +
+
+ {#if title || description} +
+ {#if title} +

+ {title} +

+ {/if} + {#if description} +

+ {description} +

+ {/if} +
+ {/if} + {#if $$slots['button']} +
+ +
+ {/if} +
+
+ +
+
+ + diff --git a/src/lib/components/organisms/Features.svelte b/src/lib/components/organisms/Features.svelte new file mode 100644 index 0000000..4db5cf3 --- /dev/null +++ b/src/lib/components/organisms/Features.svelte @@ -0,0 +1,73 @@ + + + +
+
+ {#each features as feature} + + {/each} +
+
+ + + diff --git a/src/lib/components/organisms/Footer.story.svelte b/src/lib/components/organisms/Footer.story.svelte new file mode 100644 index 0000000..caece8b --- /dev/null +++ b/src/lib/components/organisms/Footer.story.svelte @@ -0,0 +1,11 @@ + + + +