GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 23:15:46 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Quartz sync: Jul 4, 2024, 11:19 AM

Browse Source
This commit is contained in:
Justin 2024-07-04 11:19:56 -04:00
parent c2924fe2cf
commit b11caff9bb
10 changed files with 125 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
content/daily/2024/07/2024-07-02.md
View File

@ -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
</div>
@ -28,13 +29,13 @@ draft: false
### Reading {#reading}
- <https://github.com/karthink/gptel/blob/53a905dafc99fc1a3732655a2123657c145343a2/gptel-transient.el#L109>
- 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.
- <https://github.com/s-kostyaev/ellama>
- ellama, similar to GPTel.
- Okay, the quartz stuff is making my brain hurt. I think I need to rewrite some
of the hugo functionality.
- <https://github.com/karthink/gptel/blob/53a905dafc99fc1a3732655a2123657c145343a2/gptel-transient.el#L109>
- 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.
- <https://github.com/s-kostyaev/ellama>
- ellama, similar to GPTel.
- Okay, the quartz stuff is making my brain hurt. I think I need to rewrite some
of the hugo functionality.
</div>

4
content/daily/2024/07/2024-07-04.md
View File

@ -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.
</div>

4
content/index.md
View File

@ -4,13 +4,13 @@ title: Index
<div style="display: flex; align-items: flex-start; justify-content: space-between; width: 100%;">
<div style="flex: 4; min-width: 0; padding-right: 25px;">
<blockquote class="quoteback" darkmode="true" data-title="STUDY A GO!!GO!! 歌詞 GOLDEN GIRLS ふりがな付 - うたてん" data-author="@utaten" cite="https://soundcloud.com/softwarevibes/golden-boy-ost-ending">
<blockquote class="quoteback" data-title="STUDY A GO!!GO!! 歌詞 GOLDEN GIRLS ふりがな付 - うたてん" data-author="@utaten" cite="https://soundcloud.com/softwarevibes/golden-boy-ost-ending">
袖そでまくり たすきがけ
鉢巻はちまきしめて がんばって<br>
疲つかれたら お茶ちゃにして
少すこしずつ良よくなるよ お勉強べんきょう
<footer>@utaten<cite> <a href="https://utaten.com/lyric/to16060309/">https://utaten.com/lyric/to16060309/</a></cite></footer>
</blockquote>
</blockquote><script note="" src="/static/js/quoteback.js"></script>
</div>
<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;">
<p style="width: 100%; text-align: center; margin-bottom: 10px; font-weight: 1000;">Please don't strongly interpret the dot!</p>

2
quartz.config.ts
View File

@ -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: {

1
quartz.layout.ts
View File

@ -31,7 +31,6 @@ export const defaultContentPageLayout: PageLayout = {
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
Component.Quoteback(),
Component.DesktopOnly(
Component.Explorer({
mapFn: mapFn,

12
quartz/components/ContentMeta.tsx
View File

@ -29,9 +29,15 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
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}`
}
}

60
quartz/components/Quoteback.tsx
View File

@ -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 (
<>
<script src="/static/js/quoteback.js" defer></script>
<script defer>
{`
function initializeQuotebacksWrapper() {
if (typeof initializeQuotebacks === 'function') {
initializeQuotebacks();
}
}
document.addEventListener('DOMContentLoaded', initializeQuotebacksWrapper);
// Add a listener for internal navigation events
document.addEventListener('click', function(event) {
const target = event.target.closest('a');
if (target && target.href) {
setTimeout(initializeQuotebacksWrapper, 500); // Adjust the timeout as necessary
}
});
// Use MutationObserver to detect changes in the DOM and reinitialize quotebacks
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length || mutation.removedNodes.length) {
initializeQuotebacksWrapper();
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
`}
</script>
</>
)
}
return Quoteback
}) satisfies QuartzComponentConstructor

2
quartz/components/index.ts
View File

@ -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,
}

28
quartz/plugins/transformers/ofm.ts
View File

@ -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<Partial<Options>
})
}
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 }
},
}

96
quartz/static/js/quoteback.js
View File

@ -1,25 +1,26 @@
var editSVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.42852 8.1826L3.83008 6.04181C3.84249 5.9758 3.87452 5.91507 3.92201 5.86756L9.55515 0.234417C9.97431 -0.184732 10.7881 -0.0275712 11.408 0.592253C12.0277 1.21199 12.1848 2.02581 11.7657 2.44496L6.13255 8.0781C6.08504 8.12559 6.02431 8.15763 5.9583 8.17004L3.81761 8.5717C3.76434 8.58168 3.70943 8.57853 3.65765 8.56251C3.60587 8.54649 3.55878 8.51809 3.52045 8.47976C3.48212 8.44143 3.45372 8.39434 3.4377 8.34256C3.42168 8.29078 3.41853 8.23588 3.42852 8.1826ZM10.0266 0.705828L4.46633 6.26605L4.17359 7.82661L5.73407 7.53378L11.2943 1.97355C11.4042 1.86366 11.3175 1.44465 10.9365 1.06366C10.5555 0.682577 10.1364 0.59594 10.0266 0.705828ZM10.2326 12H0.333333C0.289558 12 0.246212 11.9914 0.205768 11.9746C0.165325 11.9579 0.128577 11.9333 0.0976236 11.9024C0.0666701 11.8714 0.0421171 11.8347 0.0253667 11.7942C0.00861633 11.7538 -3.32535e-06 11.7104 9.62344e-10 11.6667V1.76752C-3.32535e-06 1.72374 0.00861633 1.68039 0.0253667 1.63995C0.0421171 1.59951 0.0666701 1.56276 0.0976236 1.53181C0.128577 1.50085 0.165325 1.4763 0.205768 1.45955C0.246212 1.4428 0.289558 1.43418 0.333333 1.43418H5.7154L5.04872 2.10085H0.666667V11.3333H9.89922V6.95119L10.5659 6.28453V11.6667C10.5659 11.7104 10.5573 11.7538 10.5405 11.7942C10.5238 11.8347 10.4992 11.8714 10.4683 11.9024C10.4373 11.9333 10.4006 11.9579 10.3601 11.9746C10.3197 11.9914 10.2763 12 10.2326 12Z" fill="#9DB8BF"/></svg>`
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 = `
<quoteback-component darkmode="${darkmode}" url="${url}" text="${encodeURIComponent(text)}" author="${author}" title="${title}" favicon="${favicon}">
<quoteback-component url="${url}" text="${encodeURIComponent(text)}" author="${author}" title="${title}" favicon="${favicon}">
</quoteback-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")
}
}
}