diff --git a/content/daily/2024/07/2024-07-02.md b/content/daily/2024/07/2024-07-02.md index 70c5cf8f2..cb734b444 100644 --- a/content/daily/2024/07/2024-07-02.md +++ b/content/daily/2024/07/2024-07-02.md @@ -1,6 +1,7 @@ --- title: 2024-07-02 author: ["Justin"] +date: 2024-07-02T17:20:17-04:00 lastmod: 2024-07-02T17:20:17-04:00 draft: false --- @@ -13,8 +14,8 @@ draft: false ### Tasks {#tasks} -- [ ] Chinese -- [X] Read +- [ ] Chinese +- [x] Read @@ -28,13 +29,13 @@ draft: false ### Reading {#reading} -- - - Apparently GPTel supports the 'awesome gpt prompts' by reading in the csv? - Just making a future note of this, might be something neat for my own projects. -- - - ellama, similar to GPTel. -- Okay, the quartz stuff is making my brain hurt. I think I need to rewrite some - of the hugo functionality. +- + - Apparently GPTel supports the 'awesome gpt prompts' by reading in the csv? + Just making a future note of this, might be something neat for my own projects. +- + - ellama, similar to GPTel. +- Okay, the quartz stuff is making my brain hurt. I think I need to rewrite some + of the hugo functionality. diff --git a/content/daily/2024/07/2024-07-04.md b/content/daily/2024/07/2024-07-04.md index b2270d833..dd4962485 100644 --- a/content/daily/2024/07/2024-07-04.md +++ b/content/daily/2024/07/2024-07-04.md @@ -1,7 +1,7 @@ --- title: 2024-07-04 author: ["Justin"] -lastmod: 2024-07-04T06:47:41-04:00 +lastmod: 2024-07-04T11:17:25-04:00 draft: false --- @@ -41,6 +41,6 @@ draft: false ## Journal {#journal} -4th of July! Messed with the site CSS a bit more. +4th of July! Messed with the site CSS a bit more, wanted to get quotebacks working. diff --git a/content/index.md b/content/index.md index 4cbe54e75..cfeaf5c02 100644 --- a/content/index.md +++ b/content/index.md @@ -4,13 +4,13 @@ title: Index
-
+
袖そでまくり たすきがけ 鉢巻はちまきしめて がんばって
疲つかれたら お茶ちゃにして 少すこしずつ良よくなるよ お勉強べんきょう -
+

Please don't strongly interpret the dot!

diff --git a/quartz.config.ts b/quartz.config.ts index dec40f187..80bc55d9d 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins" */ const config: QuartzConfig = { configuration: { - pageTitle: "𝕟𝕠𝕥𝕖𝕤| justin.vc", + pageTitle: "𝕟𝕠𝕥𝕖𝕤 justin.vc", enableSPA: true, enablePopovers: true, analytics: { diff --git a/quartz.layout.ts b/quartz.layout.ts index 9b3b8aabe..2066b7b04 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -31,7 +31,6 @@ export const defaultContentPageLayout: PageLayout = { Component.MobileOnly(Component.Spacer()), Component.Search(), Component.Darkmode(), - Component.Quoteback(), Component.DesktopOnly( Component.Explorer({ mapFn: mapFn, diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx index 1a179ebdc..29caadf16 100644 --- a/quartz/components/ContentMeta.tsx +++ b/quartz/components/ContentMeta.tsx @@ -29,9 +29,15 @@ export default ((opts?: Partial) => { let segment = "" if (fileData.dates?.created) { - segment += `Created: ${formatDate(getDate(cfg, fileData)!, cfg.locale)}` - if (fileData.frontmatter?.lastmod) { - segment += ` ⮕ Modified: ${formatDate(getDate(cfg, fileData, "modified")!, cfg.locale)}` + const createdDate = formatDate(getDate(cfg, fileData)!, cfg.locale) + const modifiedDate = fileData.frontmatter?.lastmod + ? formatDate(getDate(cfg, fileData, "modified")!, cfg.locale) + : null + + segment += `Created: ${createdDate}` + + if (modifiedDate && createdDate !== modifiedDate) { + segment += ` ⮕ Modified: ${modifiedDate}` } } diff --git a/quartz/components/Quoteback.tsx b/quartz/components/Quoteback.tsx deleted file mode 100644 index 76ed0e984..000000000 --- a/quartz/components/Quoteback.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { QuartzComponentConstructor, QuartzComponentProps } from "./types" - -interface Options { - includeScript: boolean -} - -const defaultOptions: Options = { - includeScript: true, -} - -export default ((userOpts?: Options) => { - const opts = { ...defaultOptions, ...userOpts } - - function Quoteback(props: QuartzComponentProps) { - if (!opts.includeScript) { - return null - } - - return ( - <> - - - - ) - } - - return Quoteback -}) satisfies QuartzComponentConstructor diff --git a/quartz/components/index.ts b/quartz/components/index.ts index 87a2ccc82..b3db76bed 100644 --- a/quartz/components/index.ts +++ b/quartz/components/index.ts @@ -19,7 +19,6 @@ import DesktopOnly from "./DesktopOnly" import MobileOnly from "./MobileOnly" import RecentNotes from "./RecentNotes" import Breadcrumbs from "./Breadcrumbs" -import Quoteback from "./Quoteback" export { ArticleTitle, @@ -43,5 +42,4 @@ export { RecentNotes, NotFound, Breadcrumbs, - Quoteback, } diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index 753320e59..37477aeeb 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -25,6 +25,7 @@ export interface Options { wikilinks: boolean callouts: boolean mermaid: boolean + quotebacks: boolean parseTags: boolean parseArrows: boolean parseBlockReferences: boolean @@ -40,6 +41,7 @@ const defaultOptions: Options = { wikilinks: true, callouts: true, mermaid: true, + quotebacks: true, parseTags: true, parseArrows: true, parseBlockReferences: true, @@ -715,6 +717,32 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin }) } + if (opts.quotebacks) { + js.push({ + script: ` + document.addEventListener('nav', async () => { + if (document.querySelector("blockquote.quoteback")) { + if (!customElements.get('quoteback-component')) { + const script = document.createElement('script'); + script.src = '/static/js/quoteback.js'; + document.body.appendChild(script); + + script.onload = () => { + // The script will automatically process quoteback elements when loaded + }; + } else { + // Manually trigger the DOMContentLoaded event to process new quotebacks + document.dispatchEvent(new Event('DOMContentLoaded')); + } + } + }); + `, + loadTime: "afterDOMReady", + moduleType: "module", + contentType: "inline", + }) + } + return { js } }, } diff --git a/quartz/static/js/quoteback.js b/quartz/static/js/quoteback.js index a9ef19778..83c95ed09 100644 --- a/quartz/static/js/quoteback.js +++ b/quartz/static/js/quoteback.js @@ -1,25 +1,26 @@ var editSVG = `` var quoteStyle = ` .quoteback-container { - --background-color: #eff1f5; - --border-color-normal: #cad3f5; - --border-color-hover: #b4befe; - --author-color: #575268; - --title-color: #1e1e2e; - --gototext-color: #b4befe; - --content-color: #575268; - --internal-blockquote-color: #1e1e2e; + --background-color: #eff1f5; /* Latte Base */ + --border-color-normal: #ccd0da; /* Latte Surface0 */ + --border-color-hover: #7287fd; /* Latte Lavender */ + --author-color: #4c4f69; /* Latte Text */ + --title-color: #1e66f5; /* Latte Blue */ + --gototext-color: #1e66f5; /* Latte Blue */ + --content-color: #4c4f69; /* Latte Text */ + --internal-blockquote-color: #8c8fa1; /* Latte Subtext0 */ } +/* Dark mode colors */ .quoteback-container.dark-theme { - --background-color: #1e1e2e; - --border-color-normal: #302d41; - --border-color-hover: #f2cdcd; - --author-color: #f5c2e7; - --title-color: #cba6f7; - --gototext-color: #f2cdcd; - --content-color: #cba6f7; - --internal-blockquote-color: #f5c2e7; + --background-color: #2a2b3c; /* Darker shade of blue-gray */ + --border-color-normal: #45475a; /* Mocha Surface1 */ + --border-color-hover: #cba6f7; /* Mocha Mauve */ + --author-color: #f5e0dc; /* Mocha Rosewater */ + --title-color: #89dceb; /* Mocha Sky blue */ + --gototext-color: #89dceb; /* Matching title color */ + --content-color: #cdd6f4; /* Mocha Text */ + --internal-blockquote-color: #bac2de; /* Mocha Subtext1 */ } .quoteback-container { @@ -34,12 +35,42 @@ var quoteStyle = ` transition: all 0.2s ease; } +.quoteback-container, +.quoteback-container.dark-theme { + color: var(--content-color); + background-color: var(--background-color); + border: 1px solid var(--border-color-normal); + transition: all 0.3s ease; +} + +.quoteback-container:hover, +.quoteback-container.dark-theme:hover { + border-color: var(--border-color-hover); +} + +.quoteback-author { + color: var(--author-color); +} + +.quoteback-title { + color: var(--title-color); +} + +.quoteback-arrow { + color: var(--gototext-color); +} + +.quoteback-content blockquote { + border-left-color: var(--internal-blockquote-color); +} + .quoteback-container:hover { transform: translateY(-3px); box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.15); border: 1px solid var(--border-color-hover); } +/* Rest of the CSS remains the same */ .quoteback-container .quoteback-parent { overflow: hidden; position: relative; @@ -146,6 +177,7 @@ var quoteStyle = ` } .quoteback-arrow { + color: var(--gototext-color) !important; font-size: 24px !important; text-decoration: none !important; } @@ -226,16 +258,14 @@ function applyQuotebackStyles() { index[item].removeChild(index[item].querySelector("footer")) var text = index[item].innerHTML - var url = index[item].cite var author = index[item].getAttribute("data-author") var title = index[item].getAttribute("data-title") var favicon = `https://s2.googleusercontent.com/s2/favicons?domain_url=${url}&sz=64` - var darkmode = index[item].getAttribute("darkmode") // create a new component with that data var component = ` - + ` var newEl = document.createElement("div") @@ -277,15 +307,12 @@ function applyQuotebackStyles() { this.url = this.getAttribute("url") this.favicon = this.getAttribute("favicon") this.editable = this.getAttribute("editable") - this.darkmode = this.getAttribute("darkmode") } connectedCallback() { console.info("connected") - if (this.darkmode == "true") { - this.shadowRoot.querySelector(".quoteback-container").classList += " dark-theme" - } + this.updateTheme() this.shadowRoot.querySelector(".quoteback-content").innerHTML = decodeURIComponent( this.getAttribute("text"), ) @@ -325,6 +352,29 @@ function applyQuotebackStyles() { }) } // end this fix + + // Observe theme changes + this.themeObserver = new MutationObserver(() => this.updateTheme()) + this.themeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ["saved-theme"], + }) + } + + disconnectedCallback() { + if (this.themeObserver) { + this.themeObserver.disconnect() + } + } + + updateTheme() { + const isDarkMode = document.documentElement.getAttribute("saved-theme") === "dark" + const container = this.shadowRoot.querySelector(".quoteback-container") + if (isDarkMode) { + container.classList.add("dark-theme") + } else { + container.classList.remove("dark-theme") + } } }