From f3bac83c1a03a5decbaef9e6183c81cd36219286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Ma=C5=84czak?= Date: Fri, 9 Aug 2024 17:08:14 +0200 Subject: [PATCH 1/7] PoC for giscuss --- blog/package-lock.json | 7 +- blog/public/commentsTheme.css | 203 +++++++++++++++++++++++++ blog/src/components/BlogPostPane.astro | 1 + blog/src/components/Comments.astro | 20 +++ blog/src/pages/blog/[...slug].astro | 2 + 5 files changed, 230 insertions(+), 3 deletions(-) create mode 100644 blog/public/commentsTheme.css create mode 100644 blog/src/components/Comments.astro diff --git a/blog/package-lock.json b/blog/package-lock.json index 63ae4e7..fd29e81 100644 --- a/blog/package-lock.json +++ b/blog/package-lock.json @@ -7349,9 +7349,9 @@ } }, "node_modules/fast-xml-parser": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.4.tgz", - "integrity": "sha512-utnwm92SyozgA3hhH2I8qldf2lBqm6qHOICawRNRFu1qMe3+oqr+GcXjGqTmXTMGE5T4eC03kr/rlh5C1IRdZA==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz", + "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==", "funding": [ { "type": "github", @@ -7362,6 +7362,7 @@ "url": "https://paypal.me/naturalintelligence" } ], + "license": "MIT", "dependencies": { "strnum": "^1.0.5" }, diff --git a/blog/public/commentsTheme.css b/blog/public/commentsTheme.css new file mode 100644 index 0000000..b722424 --- /dev/null +++ b/blog/public/commentsTheme.css @@ -0,0 +1,203 @@ +/*! + * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License + * Copyright (c) 2018 GitHub Inc. + * https://github.com/primer/primitives/blob/main/LICENSE + */ +main { + --color-prettylights-syntax-comment: #000000; + --color-prettylights-syntax-constant: #6cb6ff; + --color-prettylights-syntax-entity: #dcbdfb; + --color-prettylights-syntax-storage-modifier-import: #000000; + --color-prettylights-syntax-entity-tag: #8ddb8c; + --color-prettylights-syntax-keyword: #f47067; + --color-prettylights-syntax-string: #96d0ff; + --color-prettylights-syntax-variable: #f69d50; + --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b; + --color-prettylights-syntax-invalid-illegal-text: #000000; + --color-prettylights-syntax-invalid-illegal-bg: #922323; + --color-prettylights-syntax-carriage-return-text: #cdd9e5; + --color-prettylights-syntax-carriage-return-bg: #ad2e2c; + --color-prettylights-syntax-string-regexp: #8ddb8c; + --color-prettylights-syntax-markup-list: #eac55f; + --color-prettylights-syntax-markup-heading: #316dca; + --color-prettylights-syntax-markup-italic: #000000; + --color-prettylights-syntax-markup-bold: #000000; + --color-prettylights-syntax-markup-deleted-text: #ffd8d3; + --color-prettylights-syntax-markup-deleted-bg: #78191b; + --color-prettylights-syntax-markup-inserted-text: #b4f1b4; + --color-prettylights-syntax-markup-inserted-bg: #1b4721; + --color-prettylights-syntax-markup-changed-text: #ffddb0; + --color-prettylights-syntax-markup-changed-bg: #682d0f; + --color-prettylights-syntax-markup-ignored-text: #000000; + --color-prettylights-syntax-markup-ignored-bg: #255ab2; + --color-prettylights-syntax-meta-diff-range: #dcbdfb; + --color-prettylights-syntax-brackethighlighter-angle: #000000; + --color-prettylights-syntax-sublimelinter-gutter-mark: #000000; + --color-prettylights-syntax-constant-other-reference-link: #96d0ff; + --color-btn-text: #000000; + --color-btn-bg: #ECB337; + --color-btn-border: #000000; + --color-btn-shadow: 0 0 #0000; + --color-btn-inset-shadow: 0 0 #0000; + --color-btn-hover-bg: #000000; + /* tu powyej */ + --color-btn-hover-border: #000000; + --color-btn-active-bg: #000000; + --color-btn-active-border: #000000; + --color-btn-selected-bg: #000000; + --color-btn-primary-text: hsl(0, 0%, 0%); + --color-btn-primary-bg: #ECB337; + --color-btn-primary-border: #000000; + --color-btn-primary-shadow: 0 0 #0000; + --color-btn-primary-inset-shadow: 0 0 #0000; + --color-btn-primary-hover-bg: #000000; + --color-btn-primary-hover-border: #cdd9e51a; + --color-btn-primary-selected-bg: #ECB337; + --color-btn-primary-selected-shadow: 0 0 #0000; + --color-btn-primary-disabled-text: #000000; + --color-btn-primary-disabled-bg: #FAF4E6; + --color-btn-primary-disabled-border: #000000; + --color-action-list-item-default-hover-bg: #000000; + --color-segmented-control-bg: #FAF4E6; + --color-segmented-control-button-bg: #ECB337; + --color-segmented-control-button-selected-border: #000000; + --color-fg-default: #000000; + --color-fg-muted: #000000; + --color-fg-subtle: #000000; + --color-canvas-default: #FAF4E6; + --color-canvas-overlay: #161b22; + --color-canvas-inset: #FAF4E6; + --color-canvas-subtle: #ECB337; + --color-border-default: #000000; + --color-border-muted: #000000; + --color-neutral-muted: #000000; + --color-accent-fg: #000000; + --color-accent-emphasis: #000000; + --color-accent-muted: #000000; + --color-accent-subtle: #000000; + --color-success-fg: #57ab5a; + --color-attention-fg: #c69026; + --color-attention-muted: #ae7c1466; + --color-attention-subtle: #000000; + --color-danger-fg: #e5534b; + --color-danger-muted: #e5534b66; + --color-danger-subtle: #e5534b1a; + --color-primer-shadow-inset: 0 0 #0000; + --color-scale-gray-7: #000000; + --color-scale-blue-8: #143d79; + + /*! Extensions from @primer/css/alerts/flash.scss */ + --color-social-reaction-bg-hover: #ECB337; + --color-social-reaction-bg-reacted-hover: #ECB337; +} + +main .pagination-loader-container { + background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg) +} + +/*! Custom CSS */ +.gsc-reactions-count { + display: none +} + +.gsc-timeline { + flex-direction: column-reverse +} + +.gsc-header { + padding-bottom: 1rem +} + +.gsc-comments>.gsc-header { + order: 1 +} + +.gsc-comment-box-textarea { + border-top-width: 2px; + border-right-width: 2px; + border-bottom-width: 2px; + border-left-width: 2px; +} + +.gsc-comment-box:not(.gsc-comment-box-is-reply) { + border-radius: 12px; + border-top-width: 4px; + border-right-width: 4px; + border-bottom-width: 4px; + border-left-width: 4px; +} + +.gsc-comment-box-textarea-extras { + border-right-width: 2px; + border-bottom-width: 2px; + border-left-width: 2px; +} + +.gsc-comment-box-tabs { + border-bottom-width: 2px; +} + +#__next .gsc-comment>div.border { + border-width: 4px; + border-radius: 12px; +} + +.gsc-comment-box-buttons button.btn-primary:hover:not([disabled]), +.gsc-social-reaction-summary-item-count { + color: #FAF4E6; +} + +.gsc-direct-reaction-buttons>button:hover .gsc-social-reaction-summary-item-count { + color: #000000; +} + +.gsc-reactions-button.gsc-social-reaction-summary-item { + border: 0; +} + +.BtnGroup-item>button:hover { + color: #FAF4E6; +} + +.BtnGroup-item { + border-width: 2px; +} + +.gsc-reply-box { + border-top-width: 2px; +} + +#__next .border { + border-width: 2px; +} + +#__next .border-b-0 { + border-bottom-width: 0; +} + +#__next .py-2 { + margin-bottom: -1px; +} + +.gsc-comment-box-tabs { + border-start-end-radius: 8px; + border-start-start-radius: 8px; +} + +.gsc-comments>.gsc-comment-box { + margin-bottom: 1rem; + order: 2 +} + +.gsc-comments>.gsc-timeline { + order: 3 +} + +.gsc-homepage-bg { + background-color: #FAF4E6 + /* #15202b -> tlo */ +} + +main .gsc-loading-image { + background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif) +} \ No newline at end of file diff --git a/blog/src/components/BlogPostPane.astro b/blog/src/components/BlogPostPane.astro index e243ec4..1129f49 100644 --- a/blog/src/components/BlogPostPane.astro +++ b/blog/src/components/BlogPostPane.astro @@ -10,6 +10,7 @@ const { import BeautifulButton from "./BeautifulButton.astro"; import "animate.css"; import "overlayscrollbars/overlayscrollbars.css"; +import Comments from "./Comments.astro"; --- + + diff --git a/blog/src/pages/blog/[...slug].astro b/blog/src/pages/blog/[...slug].astro index 488314a..dd499b3 100644 --- a/blog/src/pages/blog/[...slug].astro +++ b/blog/src/pages/blog/[...slug].astro @@ -2,6 +2,7 @@ import { type CollectionEntry, getCollection } from "astro:content"; import DesktopPage from "../../layouts/DesktopPage.astro"; import Pane from "../../components/BlogPostPane.astro"; +import Comments from "../../components/Comments.astro"; export const prerender = true; export async function getStaticPaths() { @@ -28,5 +29,6 @@ const { Content } = await post.render(); > + From be0016e1c9c38dd0eab8a6e6ddf528516f86bd42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Ma=C5=84czak?= Date: Fri, 9 Aug 2024 17:14:59 +0200 Subject: [PATCH 2/7] css fix for button --- blog/public/commentsTheme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blog/public/commentsTheme.css b/blog/public/commentsTheme.css index b722424..b5b8222 100644 --- a/blog/public/commentsTheme.css +++ b/blog/public/commentsTheme.css @@ -142,7 +142,7 @@ main .pagination-loader-container { border-radius: 12px; } -.gsc-comment-box-buttons button.btn-primary:hover:not([disabled]), +.gsc-comment-box-buttons button.btn:hover:not([disabled]), .gsc-social-reaction-summary-item-count { color: #FAF4E6; } From d68dc53cbd0e5585c5bb2fda7cc7607aa85f0e0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Ma=C5=84czak?= Date: Fri, 9 Aug 2024 17:19:12 +0200 Subject: [PATCH 3/7] can i remove tippy? --- blog/package.json | 3 +- blog/src/styles/global.css | 133 ------------------------------------- 2 files changed, 1 insertion(+), 135 deletions(-) diff --git a/blog/package.json b/blog/package.json index 9a0606b..3db431f 100644 --- a/blog/package.json +++ b/blog/package.json @@ -38,7 +38,6 @@ "svelte": "^4.2.12", "svelte-ux": "^0.60.6", "tailwindcss": "^3.4.1", - "tippy.js": "^6.3.7", "typescript": "^5.3.3" }, "devDependencies": { @@ -49,4 +48,4 @@ "flowbite": "^2.3.0", "flowbite-svelte": "^0.44.24" } -} +} \ No newline at end of file diff --git a/blog/src/styles/global.css b/blog/src/styles/global.css index ddc8ea5..fc3f64f 100644 --- a/blog/src/styles/global.css +++ b/blog/src/styles/global.css @@ -338,139 +338,6 @@ body { background-size: 10px 10px; */ } - -/* https: //unpkg.com/tippy.js@6.3.7/themes/light.css */ - -.tippy-box[data-theme='default'] { - background-color: #FAF4E6; - color: black; - border: 4px solid black; - box-shadow: 4px 4px 0 rgba(64, 64, 64, 0.8); -} - -/* TIPPY ARROW BORDER */ -.tippy-box { - border: 1px transparent -} - -.tippy-box[data-placement^=top]>.tippy-arrow:after { - border-top-color: inherit; - border-width: 8px 8px 0; - bottom: -8px; - left: 0 -} - -.tippy-box[data-placement^=bottom]>.tippy-arrow:after { - border-bottom-color: inherit; - color: red; - border-width: 0 8px 8px; - top: -8px; - left: 0 -} - -.tippy-box[data-placement^=left]>.tippy-arrow:after { - border-left-color: inherit; - border-width: 8px 0 8px 8px; - right: -8px; - top: 0 -} - -.tippy-box[data-placement^=right]>.tippy-arrow:after { - border-width: 14px 14px 14px 0; - left: -14px; - top: -6px; - border-right-color: inherit -} - -.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child) { - top: 17px -} - -.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child) { - bottom: 17px -} - -.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child) { - left: 12px -} - -.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child) { - right: 12px -} - -.tippy-arrow { - border-color: inherit -} - -.tippy-arrow:after { - content: ""; - z-index: -1; - position: absolute; - border-color: transparent; - border-style: solid -} - -/* TIPPY ARROW BORDER END */ - -.tippy-box[data-theme~='default'][data-placement^='right']>.tippy-arrow::before { - border-right-color: #FAF4E6; - left: -8px; -} - -.tippy-box[data-theme~="light"] { - color: red; - box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), - 0 4px 80px -8px rgba(36, 40, 47, 0.25), - 0 4px 4px -2px rgba(91, 94, 105, 0.15); - background-color: #fff; -} - -.tippy-box[data-theme~="light"][data-placement^="top"]>.tippy-arrow:before { - border-top-color: #fff; -} - -.tippy-box[data-theme~="light"][data-placement^="bottom"]>.tippy-arrow:before { - border-bottom-color: #fff; -} - -.tippy-box[data-theme~="light"][data-placement^="left"]>.tippy-arrow:before { - border-left-color: #fff; -} - -.tippy-box[data-theme~="light"][data-placement^="right"]>.tippy-arrow:before { - border-right-color: #fff; -} - -.tippy-box[data-theme~="light"]>.tippy-backdrop { - background-color: #fff; -} - -.tippy-box[data-theme~="light"]>.tippy-svg-arrow { - fill: #fff; -} - -/* https://unpkg.com/tippy.js@6.3.7/animations/scale.css */ -.tippy-box[data-animation="scale"][data-placement^="top"] { - transform-origin: bottom; -} - -.tippy-box[data-animation="scale"][data-placement^="bottom"] { - transform-origin: top; -} - -.tippy-box[data-animation="scale"][data-placement^="left"] { - transform-origin: right; -} - -.tippy-box[data-animation="scale"][data-placement^="right"] { - transform-origin: left; -} - -.tippy-box[data-animation="scale"][data-state="hidden"] { - transform: scale(0.5); - opacity: 0; -} - .os-scrollbar { /* // The size of the scrollbar */ --os-size: 20px !important; From 2b1f2ed07014f114f3957db17e44e9785b8b91be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Ma=C5=84czak?= Date: Fri, 9 Aug 2024 21:36:05 +0200 Subject: [PATCH 4/7] fix for icon drag and hover --- blog/src/components/DesktopIcon.astro | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/blog/src/components/DesktopIcon.astro b/blog/src/components/DesktopIcon.astro index 7268832..27718ea 100644 --- a/blog/src/components/DesktopIcon.astro +++ b/blog/src/components/DesktopIcon.astro @@ -56,9 +56,11 @@ export let menu = true; {label} -
+