From 9fb1c775863666fb8fdf93fd27729264216b3640 Mon Sep 17 00:00:00 2001 From: ZhymabekRoman Date: Mon, 21 Oct 2024 00:24:19 +0500 Subject: [PATCH] feat(Header, BlogCard): enhance UX with search and lazy loading --- new-web/bun.lockb | Bin 87768 -> 92962 bytes new-web/package.json | 7 +- new-web/src/app.css | 9 +- .../ui/command/command-dialog.svelte | 23 +++ .../ui/command/command-empty.svelte | 12 ++ .../ui/command/command-group.svelte | 18 ++ .../ui/command/command-input.svelte | 23 +++ .../components/ui/command/command-item.svelte | 24 +++ .../components/ui/command/command-list.svelte | 15 ++ .../ui/command/command-separator.svelte | 10 ++ .../ui/command/command-shortcut.svelte | 16 ++ .../lib/components/ui/command/command.svelte | 22 +++ .../src/lib/components/ui/command/index.ts | 37 ++++ .../ui/dialog/dialog-content.svelte | 6 +- .../src/lib/components/ui/skeleton/index.ts | 7 + .../components/ui/skeleton/skeleton.svelte | 11 ++ new-web/src/lib/elements/BlogCard.svelte | 63 ++++--- new-web/src/lib/elements/Footer.svelte | 56 ++++++ new-web/src/lib/elements/Header.svelte | 62 +++++-- new-web/src/lib/elements/ImageZoom.svelte | 33 ++++ new-web/src/lib/elements/Mansonry.svelte | 49 ------ new-web/src/lib/elements/ReportProblem.svelte | 4 + new-web/src/lib/elements/SearchDialog.svelte | 126 ++++++++++++++ new-web/src/lib/utils/dateFormatter.js | 9 + new-web/src/routes/+page.svelte | 7 +- new-web/src/routes/[slug]/+page.js | 5 + new-web/src/routes/[slug]/+page.svelte | 164 ++++++++++++++++++ 27 files changed, 721 insertions(+), 97 deletions(-) create mode 100644 new-web/src/lib/components/ui/command/command-dialog.svelte create mode 100644 new-web/src/lib/components/ui/command/command-empty.svelte create mode 100644 new-web/src/lib/components/ui/command/command-group.svelte create mode 100644 new-web/src/lib/components/ui/command/command-input.svelte create mode 100644 new-web/src/lib/components/ui/command/command-item.svelte create mode 100644 new-web/src/lib/components/ui/command/command-list.svelte create mode 100644 new-web/src/lib/components/ui/command/command-separator.svelte create mode 100644 new-web/src/lib/components/ui/command/command-shortcut.svelte create mode 100644 new-web/src/lib/components/ui/command/command.svelte create mode 100644 new-web/src/lib/components/ui/command/index.ts create mode 100644 new-web/src/lib/components/ui/skeleton/index.ts create mode 100644 new-web/src/lib/components/ui/skeleton/skeleton.svelte create mode 100644 new-web/src/lib/elements/Footer.svelte create mode 100644 new-web/src/lib/elements/ImageZoom.svelte delete mode 100644 new-web/src/lib/elements/Mansonry.svelte create mode 100644 new-web/src/lib/elements/SearchDialog.svelte create mode 100644 new-web/src/lib/utils/dateFormatter.js create mode 100644 new-web/src/routes/[slug]/+page.js create mode 100644 new-web/src/routes/[slug]/+page.svelte diff --git a/new-web/bun.lockb b/new-web/bun.lockb index bbaa631d2faa5dcbc3d26e6edf61ac9bdc5af27d..94657ecdaf7d305b5d574f7118be81775e54a779 100755 GIT binary patch delta 18282 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 UCa^ra(l$L<5-UBM$e8B80G;3?SO5S3 delta 15480 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 diff --git a/new-web/package.json b/new-web/package.json index 33882d9..d513cff 100644 --- a/new-web/package.json +++ b/new-web/package.json @@ -17,6 +17,7 @@ "@sveltejs/vite-plugin-svelte": "^3.0.0", "autoprefixer": "^10.4.20", "clsx": "^2.1.1", + "cmdk-sv": "^0.0.18", "lucide-svelte": "^0.453.0", "mode-watcher": "^0.4.1", "postcss": "^8.4.47", @@ -36,6 +37,10 @@ "@iconify/svelte": "^4.0.2", "bits-ui": "^0.21.16", "copy-to-clipboard": "^3.3.3", - "svelte-bricks": "^0.2.1" + "es-toolkit": "^1.25.2", + "medium-zoom": "^1.1.0", + "svelte-bricks": "^0.2.1", + "svelte-lazy": "^1.2.9", + "svelte-markdown": "^0.4.1" } } diff --git a/new-web/src/app.css b/new-web/src/app.css index 61368fa..5150d81 100644 --- a/new-web/src/app.css +++ b/new-web/src/app.css @@ -4,7 +4,7 @@ @layer base { :root { - --background: 0 0% 100%; + --background: 0, 0%, 97%; --foreground: 240 10% 3.9%; --muted: 240 4.8% 95.9%; @@ -37,7 +37,7 @@ } .dark { - --background: 240 10% 3.9%; + --background: 240 10% 12%; --foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; @@ -76,3 +76,8 @@ @apply bg-background text-foreground; } } + +.medium-zoom-overlay, +.medium-zoom-image--opened { + z-index: 999; +} diff --git a/new-web/src/lib/components/ui/command/command-dialog.svelte b/new-web/src/lib/components/ui/command/command-dialog.svelte new file mode 100644 index 0000000..a136629 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-dialog.svelte @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/new-web/src/lib/components/ui/command/command-empty.svelte b/new-web/src/lib/components/ui/command/command-empty.svelte new file mode 100644 index 0000000..3a0819d --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-empty.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/command-group.svelte b/new-web/src/lib/components/ui/command/command-group.svelte new file mode 100644 index 0000000..22f49a4 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-group.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/command-input.svelte b/new-web/src/lib/components/ui/command/command-input.svelte new file mode 100644 index 0000000..3c50f23 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-input.svelte @@ -0,0 +1,23 @@ + + +
+ + +
diff --git a/new-web/src/lib/components/ui/command/command-item.svelte b/new-web/src/lib/components/ui/command/command-item.svelte new file mode 100644 index 0000000..a75acc8 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-item.svelte @@ -0,0 +1,24 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/command-list.svelte b/new-web/src/lib/components/ui/command/command-list.svelte new file mode 100644 index 0000000..8ceda03 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-list.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/command-separator.svelte b/new-web/src/lib/components/ui/command/command-separator.svelte new file mode 100644 index 0000000..71688b8 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-separator.svelte @@ -0,0 +1,10 @@ + + + diff --git a/new-web/src/lib/components/ui/command/command-shortcut.svelte b/new-web/src/lib/components/ui/command/command-shortcut.svelte new file mode 100644 index 0000000..c89bd61 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command-shortcut.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/command.svelte b/new-web/src/lib/components/ui/command/command.svelte new file mode 100644 index 0000000..3889696 --- /dev/null +++ b/new-web/src/lib/components/ui/command/command.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/new-web/src/lib/components/ui/command/index.ts b/new-web/src/lib/components/ui/command/index.ts new file mode 100644 index 0000000..d8a2e7c --- /dev/null +++ b/new-web/src/lib/components/ui/command/index.ts @@ -0,0 +1,37 @@ +import { Command as CommandPrimitive } from "cmdk-sv"; + +import Root from "./command.svelte"; +import Dialog from "./command-dialog.svelte"; +import Empty from "./command-empty.svelte"; +import Group from "./command-group.svelte"; +import Item from "./command-item.svelte"; +import Input from "./command-input.svelte"; +import List from "./command-list.svelte"; +import Separator from "./command-separator.svelte"; +import Shortcut from "./command-shortcut.svelte"; + +const Loading = CommandPrimitive.Loading; + +export { + Root, + Dialog, + Empty, + Group, + Item, + Input, + List, + Separator, + Shortcut, + Loading, + // + Root as Command, + Dialog as CommandDialog, + Empty as CommandEmpty, + Group as CommandGroup, + Item as CommandItem, + Input as CommandInput, + List as CommandList, + Separator as CommandSeparator, + Shortcut as CommandShortcut, + Loading as CommandLoading, +}; diff --git a/new-web/src/lib/components/ui/dialog/dialog-content.svelte b/new-web/src/lib/components/ui/dialog/dialog-content.svelte index 9f7eab8..c573f02 100644 --- a/new-web/src/lib/components/ui/dialog/dialog-content.svelte +++ b/new-web/src/lib/components/ui/dialog/dialog-content.svelte @@ -26,14 +26,14 @@ )} {...$$restProps} > -
- + + diff --git a/new-web/src/lib/components/ui/skeleton/index.ts b/new-web/src/lib/components/ui/skeleton/index.ts new file mode 100644 index 0000000..186db21 --- /dev/null +++ b/new-web/src/lib/components/ui/skeleton/index.ts @@ -0,0 +1,7 @@ +import Root from "./skeleton.svelte"; + +export { + Root, + // + Root as Skeleton, +}; diff --git a/new-web/src/lib/components/ui/skeleton/skeleton.svelte b/new-web/src/lib/components/ui/skeleton/skeleton.svelte new file mode 100644 index 0000000..7e5d18b --- /dev/null +++ b/new-web/src/lib/components/ui/skeleton/skeleton.svelte @@ -0,0 +1,11 @@ + + +
diff --git a/new-web/src/lib/elements/BlogCard.svelte b/new-web/src/lib/elements/BlogCard.svelte index b6ce6bd..8f38579 100644 --- a/new-web/src/lib/elements/BlogCard.svelte +++ b/new-web/src/lib/elements/BlogCard.svelte @@ -1,5 +1,7 @@ + +
+
+
+ By Freedium and its contributors.
+ Made with ❤️ +
+ + + +
+ + +
+
+
diff --git a/new-web/src/lib/elements/Header.svelte b/new-web/src/lib/elements/Header.svelte index 8fb002f..12fe6cc 100644 --- a/new-web/src/lib/elements/Header.svelte +++ b/new-web/src/lib/elements/Header.svelte @@ -5,14 +5,22 @@ import ReportProblem from './ReportProblem.svelte'; import PayButtons from './PayButtons.svelte'; import ExtensionsButton from './ExtensionsButton.svelte'; - + import Icon from '@iconify/svelte'; + import SearchDialog from './SearchDialog.svelte'; import { Menu } from 'lucide-svelte'; + import { Button } from '$lib/components/ui/button/index.js'; + let isNavOpen = false; const toggleNav = () => { isNavOpen = !isNavOpen; }; + + let isSearchOpen = false; + const toggleSearch = () => { + isSearchOpen = !isSearchOpen; + }; + + diff --git a/new-web/src/lib/elements/ImageZoom.svelte b/new-web/src/lib/elements/ImageZoom.svelte new file mode 100644 index 0000000..808de89 --- /dev/null +++ b/new-web/src/lib/elements/ImageZoom.svelte @@ -0,0 +1,33 @@ + + + diff --git a/new-web/src/lib/elements/Mansonry.svelte b/new-web/src/lib/elements/Mansonry.svelte deleted file mode 100644 index 93d27e6..0000000 --- a/new-web/src/lib/elements/Mansonry.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
- -
- - \ No newline at end of file diff --git a/new-web/src/lib/elements/ReportProblem.svelte b/new-web/src/lib/elements/ReportProblem.svelte index 9cf4985..36a748a 100644 --- a/new-web/src/lib/elements/ReportProblem.svelte +++ b/new-web/src/lib/elements/ReportProblem.svelte @@ -53,6 +53,10 @@ Suggestion
+
+ + Vulnerability (XSS, etc.) +
Other diff --git a/new-web/src/lib/elements/SearchDialog.svelte b/new-web/src/lib/elements/SearchDialog.svelte new file mode 100644 index 0000000..ff7ee99 --- /dev/null +++ b/new-web/src/lib/elements/SearchDialog.svelte @@ -0,0 +1,126 @@ + + + + + + + + {#if loading} + {#each Array(3) as _} +
+ +
+ + + +
+
+ {/each} + {:else} + {#each searchResults as post} + + {post.title} +
+ {post.title} +
{formatDate(post.date)}
+
{post.excerpt}
+
+ + {/each} + {/if} + {#if searchResults.length === 0 && !loading} + +
+ Start typing post name to search or enter URL. + For example: + + - https://medium.com/post-test-1 + - How to create a blog post +
+ + {/if} + + diff --git a/new-web/src/lib/utils/dateFormatter.js b/new-web/src/lib/utils/dateFormatter.js new file mode 100644 index 0000000..0b43fbc --- /dev/null +++ b/new-web/src/lib/utils/dateFormatter.js @@ -0,0 +1,9 @@ +export function formatDate(isoString) { + const date = new Date(isoString); + + return new Intl.DateTimeFormat('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }).format(date); +} diff --git a/new-web/src/routes/+page.svelte b/new-web/src/routes/+page.svelte index d284597..06f1eb1 100644 --- a/new-web/src/routes/+page.svelte +++ b/new-web/src/routes/+page.svelte @@ -1,9 +1,9 @@ @@ -125,3 +122,5 @@
+ +