From 1c851271ea38826cd7a0d027b25bd12452e979fe Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 27 Aug 2021 14:08:11 -0400 Subject: [PATCH] add search support --- .github/workflows/deploy.yaml | 3 +- .gitignore | 3 +- assets/base.scss | 116 +++++++++++++++++ assets/darkmode.scss | 81 +++++------- content/_index.md | 2 +- content/notes/preview-changes.md | 2 +- layouts/_default/single.html | 9 +- layouts/partials/darkmode.html | 3 +- layouts/partials/header.html | 0 layouts/partials/search.html | 208 +++++++++++++++++++++++++++++++ 10 files changed, 367 insertions(+), 60 deletions(-) delete mode 100644 layouts/partials/header.html create mode 100644 layouts/partials/search.html diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index df50f6b..2190194 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -12,8 +12,9 @@ jobs: - uses: actions/checkout@v2 - name: Build Link Index - uses: jackyzha0/hugo-obsidian@v2.1 + uses: jackyzha0/hugo-obsidian@v2.3 with: + index: true input: content output: data diff --git a/.gitignore b/.gitignore index c216e49..1eaad60 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ public resources .idea content/.obsidian -data/linkIndex.yaml \ No newline at end of file +data/linkIndex.yaml +data/contentIndex.yaml \ No newline at end of file diff --git a/assets/base.scss b/assets/base.scss index 025c203..a1b5c7b 100644 --- a/assets/base.scss +++ b/assets/base.scss @@ -235,4 +235,120 @@ a[href^="/"] { .centered { margin-top: 30vh; +} + +header { + display: flex; + flex-direction: row; + align-items: center; + + & > nav { + @media all and (max-width: 600px) { + display: none; + } + + & > a { + margin-left: 2em; + } + } + + & > .spacer { + flex: 1 1 auto; + } + + & > svg { + cursor: pointer; + width: 18px; + min-width: 18px; + margin: 0 1em; + + &:hover .search-path { + stroke: var(--tertiary); + } + + .search-path { + stroke: var(--gray); + stroke-width: 2px; + transition: stroke 0.5s ease; + } + } +} + +#search-container { + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: none; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + + & > div { + width: 50%; + margin-top: 15vh; + margin-left: auto; + margin-right: auto; + + @media all and (max-width: 1200px) { + width: 90%; + } + + & > * { + width: 100%; + border-radius: 4px; + background: var(--light); + box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16); + margin-bottom: 2em; + } + + & > input { + box-sizing: border-box; + padding: 0.5em 1em; + font-family: Inter, sans-serif; + color: var(--dark); + font-size: 1.1em; + border: 1px solid var(--outlinegray); + + &:focus { + outline: none; + } + } + + & > #results-container { + & > .result-card { + padding: 1em; + cursor: pointer; + transition: background 0.2s ease; + border: 1px solid var(--outlinegray); + border-bottom: none; + + &:hover { + background: rgba(180, 180, 180, 0.15); + } + + &:first-of-type { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + &:last-of-type { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom: 1px solid var(--outlinegray); + } + + & > h3, & > p { + margin: 0; + } + + & .search-highlight { + background-color: #afbfc966; + padding: 0.05em 0.2em; + border-radius: 3px; + } + } + } + } } \ No newline at end of file diff --git a/assets/darkmode.scss b/assets/darkmode.scss index dde5be6..61967d7 100644 --- a/assets/darkmode.scss +++ b/assets/darkmode.scss @@ -1,67 +1,44 @@ - .darkmode { - text-align: right; + float: right; + padding: 1em; + min-width: 30px; + position: relative; + + @media all and (max-width: 450px) { + padding: 1em; + } & > .toggle { display: none; box-sizing: border-box; - - &:checked + .toggle-button:after { - left: 50%; - } - - & + .toggle-button { - box-sizing: border-box; - outline: 0; - display: inline-block; - width: 3em; - height: 1.5em; - position: relative; - cursor: pointer; - border: 2px solid var(--gray); - user-select: none; - padding: 2px; - transition: all 0.2s ease; - border-radius: 2em; - - &:after, &:before { - position: relative; - display: block; - box-sizing: border-box; - content: ""; - width: 50%; - height: 100%; - } - - &:before { - display: none; - } - - &:after { - left: 0; - transition: all 0.2s ease; - background: var(--gray); - content: ""; - border-radius: 1em; - } - } } - & #dayIcon { - position: relative; + & svg { + opacity: 0; + position: absolute; width: 20px; height: 20px; - top: -1.5px; + top: calc(50% - 10px); margin: 0 7px; fill: var(--gray); + transition: opacity 0.1s ease; } +} - & #nightIcon { - position: relative; - width: 18px; - height: 18px; - top: -2px; - margin: 0 7px; - fill: var(--gray); +.toggle:checked ~ label { + & > #dayIcon { + opacity: 0; + } + & > #nightIcon { + opacity: 1; + } +} + +.toggle:not(:checked) ~ label { + & > #dayIcon { + opacity: 1; + } + & > #nightIcon { + opacity: 0; } } \ No newline at end of file diff --git a/content/_index.md b/content/_index.md index 3d19704..b665a3d 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,5 +1,5 @@ # 🌱 Quartz -## v1.1 +## v2.0 Simple second brain and [digital garden](https://jzhao.xyz/posts/digital-gardening). diff --git a/content/notes/preview-changes.md b/content/notes/preview-changes.md index 21e106a..dac619e 100644 --- a/content/notes/preview-changes.md +++ b/content/notes/preview-changes.md @@ -15,7 +15,7 @@ $ go install github.com/jackyzha0/hugo-obsidian $ cd # Scrape all links in your Quartz folder and generate info for Quartz -$ hugo-obsidian -input=content -output=data +$ hugo-obsidian -input=content -output=data -index=true ``` Afterwards, start the Hugo server as shown above and your local backlinks and interactive graph should be populated! diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 14a3b05..1922083 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,11 +3,16 @@ {{ partial "head.html" . }} +{{partial "search.html" .}}
- {{partial "darkmode.html" .}} -
+
{{if .Title}}

{{ .Title }}

{{end}} + Search IconIcon to open search +
+ {{partial "darkmode.html" .}} +
+
{{if $.Site.Data.config.enableToc}}