Showing preview only (265K chars total). Download the full file or copy to clipboard to get everything.
Repository: g1eny0ung/hugo-theme-dream
Branch: master
Commit: 853d3e913085
Files: 110
Total size: 236.9 KB
Directory structure:
gitextract_ef1mvqor/
├── .editorconfig
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yaml
│ │ └── feature_request.yaml
│ └── workflows/
│ └── docs.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── archetypes/
│ ├── about.md
│ ├── posts/
│ │ └── index.md
│ └── posts.md
├── assets/
│ ├── css/
│ │ └── output.css
│ └── js/
│ ├── grid.js
│ ├── main.js
│ └── toc.js
├── config.toml
├── decapCMS/
│ ├── config.yml
│ └── index.html
├── docs/
│ ├── app/
│ │ ├── AdSense.jsx
│ │ ├── [[...mdxPath]]/
│ │ │ └── page.jsx
│ │ └── layout.jsx
│ ├── content/
│ │ ├── CHANGELOG.md
│ │ ├── _meta.js
│ │ ├── about-page.md
│ │ ├── adsense.mdx
│ │ ├── archives-page.md
│ │ ├── base-configurations.mdx
│ │ ├── custom-nav-items.mdx
│ │ ├── custom.mdx
│ │ ├── decap-cms.md
│ │ ├── i18n.md
│ │ ├── index.mdx
│ │ ├── light-and-dark-mode.mdx
│ │ ├── migrate-to-v3.mdx
│ │ ├── params-configurations.mdx
│ │ ├── post-page.mdx
│ │ ├── search.md
│ │ ├── social-comments.mdx
│ │ ├── social-links.mdx
│ │ ├── summary-images.mdx
│ │ ├── syntax-highlighting.mdx
│ │ ├── website-analytics.mdx
│ │ └── zen-mode.mdx
│ ├── mdx-components.jsx
│ ├── next.config.mjs
│ ├── package.json
│ └── public/
│ └── .nojekyll
├── hugo.example.toml
├── i18n/
│ ├── ar.toml
│ ├── bn.toml
│ ├── ca.toml
│ ├── de.toml
│ ├── en.toml
│ ├── es.toml
│ ├── fr.toml
│ ├── he.toml
│ ├── it.toml
│ ├── ja.toml
│ ├── lv.toml
│ ├── pt.toml
│ ├── ro.toml
│ ├── ru.toml
│ ├── sl.toml
│ ├── tr.toml
│ ├── vi.toml
│ └── zh.toml
├── layouts/
│ ├── 404.html
│ ├── _default/
│ │ ├── _markup/
│ │ │ ├── render-blockquote.html
│ │ │ ├── render-codeblock-math.html
│ │ │ ├── render-codeblock-mermaid.html
│ │ │ ├── render-image.html
│ │ │ └── render-link.html
│ │ ├── baseof.html
│ │ ├── single.html
│ │ ├── summary.html
│ │ ├── term.html
│ │ ├── terms.html
│ │ └── zen-summary.html
│ ├── index.html
│ ├── partials/
│ │ ├── author.html
│ │ ├── back.html
│ │ ├── commentSystemHeads.html
│ │ ├── commentSystems.html
│ │ ├── disqus.html
│ │ ├── footer.html
│ │ ├── footerLeft.html
│ │ ├── footerRight.html
│ │ ├── head.html
│ │ ├── luxon.html
│ │ ├── mathjax.html
│ │ ├── nav.html
│ │ ├── navCustomItems.html
│ │ ├── navMobileMenu.html
│ │ ├── paginator.html
│ │ ├── renderMobileNavItem.html
│ │ ├── renderNavItem.html
│ │ ├── scripts.html
│ │ ├── share.html
│ │ ├── socials.html
│ │ └── zen-back.html
│ └── section/
│ ├── posts.html
│ └── search.html
├── package.json
├── src/
│ ├── input.css
│ └── js/
│ ├── grid.js
│ ├── main.js
│ └── toc.js
├── tailwind.config.js
└── theme.toml
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: g1eny0ung # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yaml
================================================
name: Bug report
description: Create a report to help us improve
title: '[Bug]: '
labels:
- bug
assignees:
- g1eny0ung
body:
- type: input
id: version
attributes:
label: Version
description: What version of Dream are you using?
placeholder: v3.x.x or master
validations:
required: true
- type: dropdown
id: browsers
attributes:
label: What browsers are you seeing the problem on?
multiple: true
options:
- Chrome
- Firefox
- Safari
- Microsoft Edge
- type: textarea
id: bug
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is.
validations:
required: true
- type: textarea
id: reproduce
attributes:
label: To Reproduce
description: Steps to reproduce the behavior.
placeholder: |
You can also include screenshots or any other relevant information here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.yaml
================================================
name: Feature request
description: Suggest an idea for this project
title: '[Feature]: '
labels:
- feature
assignees:
- g1eny0ung
body:
- type: markdown
attributes:
value: |
> [!TIP]
> Thanks for suggesting a feature! Please fill out the sections below to help us understand your request better.
>
> If you have a question or need help, please open a discussion instead.
- type: textarea
id: feature
attributes:
label: Feature request
description: Please describe the feature you'd like to see added to the project.
placeholder: I'd like to see [...]
validations:
required: true
- type: textarea
id: solution
attributes:
label: Proposed solution
description: Please describe a possible solution to the feature request.
placeholder: I think we could [...]
- type: textarea
id: context
attributes:
label: Additional context
description: Add any other context or screenshots about the feature request here.
placeholder: I have an idea [...]
================================================
FILE: .github/workflows/docs.yml
================================================
# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy docs to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ['master']
paths:
- 'docs/**'
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: 'pages'
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: docs
steps:
- name: Checkout
uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
with:
version: 8
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
cache-dependency-path: 'docs/pnpm-lock.yaml'
- name: Restore cache
uses: actions/cache@v4
with:
path: |
docs/.next/cache
key: ${{ runner.os }}-nextjs-${{ hashFiles('docs/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-nextjs-
- run: pnpm install
- name: Build
run: pnpm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './docs/out'
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
package-lock.json
yarn.lock
docs/.next
docs/out
================================================
FILE: .prettierrc
================================================
{
"semi": false,
"singleQuote": true,
"printWidth": 120
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 Yue Yang
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# 🌱 hugo-theme-dream
> [!IMPORTANT]
> The latest version of Dream is v3.x.
>
> If you are using v2.x, please check the [v2 branch](https://github.com/g1eny0ung/hugo-theme-dream/tree/v2) and its [docs](https://hugo-theme-dream-docs-v2.netlify.app/).
- [Intro](#intro)
- [Documentation](#documentation)
- [Examples](#examples)
- [Publish your site](#publish-your-site)
## Intro
Dream is a [Hugo](https://gohugo.io/) theme. I build it for [my blog](https://g1en.site).
The main features are **Masonry Layout Posts** and **Flippable About Page**.
Dream also supports **light and dark mode** out of the box.
For people who prefer a simple and clean interface,
Dream has a [**Zen mode**](https://hugo-theme-dream.g1en.site/zen-mode).
It is more concentrated on reading and writing.
<img src="https://github.com/g1eny0ung/hugo-theme-dream/blob/master/docs/public/images/zen-mode.png?raw=true" alt="Zen Mode" height="500" />
## Documentation
<https://hugo-theme-dream.g1en.site>
## Examples
- [My blog](https://g1en.site) and its [source code](https://github.com/g1eny0ung/blog)
- [A demo of Zen mode](https://g1en-site-zen-mode-preview.netlify.app/)
## Publish your site
See [Hosting & Deployment](https://gohugo.io/hosting-and-deployment/).
## License
🌱 Hugo Theme Dream is licensed under the MIT License.
Author: [g1eny0ung](https://github.com/g1eny0ung).
================================================
FILE: archetypes/about.md
================================================
---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
draft: true
---
================================================
FILE: archetypes/posts/index.md
================================================
---
title: {{ replace .File.ContentBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# images:
# - /img/cover.jpg
categories:
- category1
tags:
- tag1
- tag2
# nolastmod: true
draft: true
---
Cut out summary from your post content here.
<!--more-->
The remaining content of your post.
================================================
FILE: archetypes/posts.md
================================================
---
title: {{ replace .File.ContentBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# covercaption: a description of the cover image
# images:
# - /img/cover.jpg
categories:
- category1
tags:
- tag1
- tag2
# nolastmod: true
# math: true
draft: true
---
Cut out summary from your post content here.
<!--more-->
The remaining content of your post.
================================================
FILE: assets/css/output.css
================================================
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-yellow-600: oklch(68.1% 0.162 75.834);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-black: #000;
--spacing: 0.25rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--radius-lg: 0.5rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.menu {
@layer daisyui.l1.l2.l3 {
display: flex;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: calc(0.25rem * 2);
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: 0.875rem;
:where(li ul) {
position: relative;
margin-inline-start: calc(0.25rem * 4);
padding-inline-start: calc(0.25rem * 2);
white-space: nowrap;
&:before {
position: absolute;
inset-inline-start: calc(0.25rem * 0);
top: calc(0.25rem * 3);
bottom: calc(0.25rem * 3);
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: "";
}
}
:where(li > .menu-dropdown:not(.menu-dropdown-show)) {
display: none;
}
:where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: calc(0.25rem * 2);
border-radius: var(--radius-field);
padding-inline: calc(0.25rem * 3);
padding-block: calc(0.25rem * 1.5);
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
user-select: none;
}
:where(li > details > summary) {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
&::-webkit-details-marker {
display: none;
}
}
:where(li > details > summary), :where(li > .menu-dropdown-toggle) {
&:after {
justify-self: flex-end;
display: block;
height: 0.375rem;
width: 0.375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: 0.2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none;
}
}
details {
overflow: hidden;
interpolate-size: allow-keywords;
}
details::details-content {
block-size: 0;
@media (prefers-reduced-motion: no-preference) {
transition-behavior: allow-discrete;
transition-property: block-size, content-visibility;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
details[open]::details-content {
block-size: auto;
}
:where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
rotate: 45deg;
translate: 0 1px;
}
:where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) {
&.menu-focus, &:focus-visible {
cursor: pointer;
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
}
:where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
cursor: pointer;
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
}
:where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: 0.5rem 1rem;
height: 1px;
}
:where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch;
.badge {
justify-self: flex-end;
}
& > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
&:not(&:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
}
}
&.menu-disabled {
pointer-events: none;
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
}
}
.dropdown:focus-within {
.menu-dropdown-toggle:after {
rotate: 45deg;
translate: 0 1px;
}
}
.dropdown-content {
margin-top: calc(0.25rem * 2);
padding: calc(0.25rem * 2);
&:before {
display: none;
}
}
}
}
.dropdown {
@layer daisyui.l1.l2.l3 {
position: relative;
display: inline-block;
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
& > *:not(:has(~ [class*="dropdown-content"])):focus {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
.dropdown-content {
position: absolute;
}
&.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%;
}
&[popover], .dropdown-content {
z-index: 999;
@media (prefers-reduced-motion: no-preference) {
animation: dropdown 0.2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
}
@starting-style {
&[popover], .dropdown-content {
scale: 95%;
opacity: 0;
}
}
&:not(.dropdown-close) {
&.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within {
> [tabindex]:first-child {
pointer-events: none;
}
.dropdown-content {
opacity: 100%;
scale: 100%;
}
}
&.dropdown-hover:hover {
.dropdown-content {
opacity: 100%;
scale: 100%;
}
}
}
&:is(details) {
summary {
&::-webkit-details-marker {
display: none;
}
}
}
&:where([popover]) {
background: #0000;
}
&[popover] {
position: fixed;
color: inherit;
@supports not (position-area: bottom) {
margin: auto;
&.dropdown-close, &.dropdown-open:not(:popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%;
}
&::backdrop {
background-color: color-mix(in oklab, #000 30%, #0000);
}
}
&.dropdown-close, &:not(.dropdown-open, :popover-open) {
display: none;
transform-origin: top;
opacity: 0%;
scale: 95%;
}
}
}
}
.btn {
:where(&) {
@layer daisyui.l1.l2.l3 {
width: unset;
}
}
@layer daisyui.l1.l2.l3 {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: calc(0.25rem * 1.5);
text-align: center;
vertical-align: middle;
outline-offset: 2px;
webkit-user-select: none;
user-select: none;
padding-inline: var(--btn-p);
color: var(--btn-fg);
--tw-prose-links: var(--btn-fg);
height: var(--size);
font-size: var(--fontsize, 0.875rem);
font-weight: 600;
outline-color: var(--btn-color, var(--color-base-content));
transition-property: color, background-color, border-color, box-shadow;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 0.2s;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
background-color: var(--btn-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--btn-noise);
border-width: var(--border);
border-style: solid;
border-color: var(--btn-border);
text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
touch-action: manipulation;
box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
--size: calc(var(--size-field, 0.25rem) * 10);
--btn-bg: var(--btn-color, var(--color-base-200));
--btn-fg: var(--color-base-content);
--btn-p: 1rem;
--btn-border: var(--btn-bg);
@supports (color: color-mix(in lab, red, red)) {
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
}
--btn-shadow: 0 3px 2px -2px var(--btn-bg),
0 4px 3px -2px var(--btn-bg);
@supports (color: color-mix(in lab, red, red)) {
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
}
--btn-noise: var(--fx-noise);
@media (hover: hover) {
&:hover {
--btn-bg: var(--btn-color, var(--color-base-200));
@supports (color: color-mix(in lab, red, red)) {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
}
}
}
&:focus-visible, &:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate;
}
&:active:not(.btn-active) {
translate: 0 0.5px;
--btn-bg: var(--btn-color, var(--color-base-200));
@supports (color: color-mix(in lab, red, red)) {
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
}
--btn-border: var(--btn-color, var(--color-base-200));
@supports (color: color-mix(in lab, red, red)) {
--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
}
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
}
&:is(input[type="checkbox"], input[type="radio"]) {
appearance: none;
&[aria-label]::after {
--tw-content: attr(aria-label);
content: var(--tw-content);
}
}
&:where(input:checked:not(.filter .btn)) {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-content);
isolation: isolate;
}
}
&:disabled {
@layer daisyui.l1.l2 {
&:not(.btn-link, .btn-ghost) {
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
box-shadow: none;
}
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
}
}
}
&[disabled] {
@layer daisyui.l1.l2 {
&:not(.btn-link, .btn-ghost) {
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
box-shadow: none;
}
pointer-events: none;
--btn-border: #0000;
--btn-noise: none;
--btn-fg: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
}
}
}
}
.input {
@layer daisyui.l1.l2.l3 {
cursor: text;
border: var(--border) solid #0000;
position: relative;
display: inline-flex;
flex-shrink: 1;
appearance: none;
align-items: center;
gap: calc(0.25rem * 2);
background-color: var(--color-base-100);
padding-inline: calc(0.25rem * 3);
vertical-align: middle;
white-space: nowrap;
width: clamp(3rem, 20rem, 100%);
height: var(--size);
font-size: max(var(--font-size, 0.875rem), 0.875rem);
touch-action: manipulation;
border-start-start-radius: var(--join-ss, var(--radius-field));
border-start-end-radius: var(--join-se, var(--radius-field));
border-end-start-radius: var(--join-es, var(--radius-field));
border-end-end-radius: var(--join-ee, var(--radius-field));
border-color: var(--input-color);
box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
}
--size: calc(var(--size-field, 0.25rem) * 10);
--input-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}
&:where(input) {
display: inline-flex;
}
:where(input) {
display: inline-flex;
height: 100%;
width: 100%;
appearance: none;
background-color: transparent;
border: none;
&:focus, &:focus-within {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
}
:where(input[type="url"]), :where(input[type="email"]) {
direction: ltr;
}
:where(input[type="date"]) {
display: inline-flex;
}
&:focus, &:focus-within {
--input-color: var(--color-base-content);
box-shadow: 0 1px var(--input-color);
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
}
outline: 2px solid var(--input-color);
outline-offset: 2px;
isolation: isolate;
}
@media (pointer: coarse) {
@supports (-webkit-touch-callout: none) {
&:focus, &:focus-within {
--font-size: 1rem;
}
}
}
&:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}
&::placeholder {
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
}
box-shadow: none;
}
&:has(> input[disabled]) > input[disabled] {
cursor: not-allowed;
}
&::-webkit-date-and-time-value {
text-align: inherit;
}
&[type="number"] {
&::-webkit-inner-spin-button {
margin-block: calc(0.25rem * -3);
margin-inline-end: calc(0.25rem * -3);
}
}
&::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
}
&:has(> input[type="date"]) {
:where(input[type="date"]) {
display: inline-flex;
webkit-appearance: none;
appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
width: 1em;
height: 1em;
cursor: pointer;
}
}
}
}
.range {
@layer daisyui.l1.l2.l3 {
appearance: none;
webkit-appearance: none;
--range-thumb: var(--color-base-100);
--range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
--range-progress: currentColor;
--range-fill: 1;
--range-p: 0.25rem;
--range-bg: currentColor;
@supports (color: color-mix(in lab, red, red)) {
--range-bg: color-mix(in oklab, currentColor 10%, #0000);
}
cursor: pointer;
overflow: hidden;
background-color: transparent;
vertical-align: middle;
width: clamp(3rem, 20rem, 100%);
--radius-selector-max: calc(
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
);
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
border: none;
height: var(--range-thumb-size);
[dir="rtl"] & {
--range-dir: -1;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
&::-webkit-slider-runnable-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * 0.5);
}
@media (forced-colors: active) {
&::-webkit-slider-runnable-track {
border: 1px solid;
}
}
@media (forced-colors: active) {
&::-moz-range-track {
border: 1px solid;
}
}
&::-webkit-slider-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: var(--range-thumb);
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
appearance: none;
webkit-appearance: none;
top: 50%;
color: var(--range-progress);
transform: translateY(-50%);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
}
}
&::-moz-range-track {
width: 100%;
background-color: var(--range-bg);
border-radius: var(--radius-selector);
height: calc(var(--range-thumb-size) * 0.5);
}
&::-moz-range-thumb {
position: relative;
box-sizing: border-box;
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
background-color: currentColor;
height: var(--range-thumb-size);
width: var(--range-thumb-size);
border: var(--range-p) solid;
top: 50%;
color: var(--range-progress);
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
}
}
&:disabled {
cursor: not-allowed;
opacity: 30%;
}
}
}
.timeline {
@layer daisyui.l1.l2.l3 {
position: relative;
display: flex;
> li {
position: relative;
display: grid;
flex-shrink: 0;
align-items: center;
grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) );
grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) );
> hr {
border: none;
width: 100%;
&:first-child {
grid-column-start: 1;
grid-row-start: 2;
}
&:last-child {
grid-column-start: 3;
grid-column-end: none;
grid-row-start: 2;
grid-row-end: auto;
}
@media print {
border: 0.1px solid var(--color-base-300);
}
}
}
:where(hr) {
height: calc(0.25rem * 1);
background-color: var(--color-base-300);
}
&:has(.timeline-middle hr) {
&:first-child {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: var(--radius-selector);
border-end-end-radius: var(--radius-selector);
}
&:last-child {
border-start-start-radius: var(--radius-selector);
border-end-start-radius: var(--radius-selector);
border-start-end-radius: 0;
border-end-end-radius: 0;
}
}
&:not(:has(.timeline-middle)) {
:first-child hr:last-child {
border-start-start-radius: var(--radius-selector);
border-end-start-radius: var(--radius-selector);
border-start-end-radius: 0;
border-end-end-radius: 0;
}
:last-child hr:first-child {
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: var(--radius-selector);
border-end-end-radius: var(--radius-selector);
}
}
}
}
.menu-horizontal {
@layer daisyui.l1.l2 {
display: inline-flex;
flex-direction: row;
& > li:not(.menu-title) > details {
& > ul {
position: absolute;
margin-inline-start: calc(0.25rem * 0);
margin-top: calc(0.25rem * 4);
transform-origin: top;
border-radius: var(--radius-box);
background-color: var(--color-base-100);
padding-block: calc(0.25rem * 2);
padding-inline-end: calc(0.25rem * 2);
opacity: 0%;
scale: 95%;
box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1);
@media (prefers-reduced-motion: no-preference) {
@starting-style {
scale: 95%;
opacity: 0;
}
animation: menu 0.2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
}
&[open] > ul {
opacity: 100%;
scale: 100%;
}
}
& > li > details > ul {
&:before {
--tw-content: none;
content: var(--tw-content);
}
}
}
}
.avatar {
@layer daisyui.l1.l2.l3 {
position: relative;
display: inline-flex;
vertical-align: middle;
& > div {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
.card {
@layer daisyui.l1.l2.l3 {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-box);
outline-width: 2px;
transition: outline 0.2s ease-in-out;
outline: 0 solid #0000;
outline-offset: 2px;
&:focus {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
&:focus-visible {
outline-color: currentColor;
}
:where(figure:first-child) {
overflow: hidden;
border-start-start-radius: inherit;
border-start-end-radius: inherit;
border-end-start-radius: unset;
border-end-end-radius: unset;
}
:where(figure:last-child) {
overflow: hidden;
border-start-start-radius: unset;
border-start-end-radius: unset;
border-end-start-radius: inherit;
border-end-end-radius: inherit;
}
figure {
display: flex;
align-items: center;
justify-content: center;
}
&:has(> input:is(input[type="checkbox"], input[type="radio"])) {
cursor: pointer;
user-select: none;
}
&:has(> :checked) {
outline: 2px solid currentColor;
}
}
}
.sticky {
position: sticky;
}
.dropdown-end {
@layer daisyui.l1.l2 {
--anchor-h: span-left;
:where(.dropdown-content) {
inset-inline-end: calc(0.25rem * 0);
translate: 0 0;
[dir="rtl"] & {
translate: 0 0;
}
}
&.dropdown-left {
--anchor-h: left;
--anchor-v: span-top;
.dropdown-content {
top: auto;
bottom: calc(0.25rem * 0);
}
}
&.dropdown-right {
--anchor-h: right;
--anchor-v: span-top;
.dropdown-content {
top: auto;
bottom: calc(0.25rem * 0);
}
}
}
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.join {
display: inline-flex;
align-items: stretch;
--join-ss: 0;
--join-se: 0;
--join-es: 0;
--join-ee: 0;
:where(.join-item) {
border-start-start-radius: var(--join-ss, 0);
border-start-end-radius: var(--join-se, 0);
border-end-start-radius: var(--join-es, 0);
border-end-end-radius: var(--join-ee, 0);
* {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
}
> .join-item:where(:first-child) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0;
}
:first-child:not(:last-child) {
:where(.join-item) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0;
}
}
> .join-item:where(:last-child) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field);
}
:last-child:not(:first-child) {
:where(.join-item) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field);
}
}
> .join-item:where(:only-child) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
:only-child {
:where(.join-item) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
}
> :where(:focus, :has(:focus)) {
z-index: 1;
}
@media (hover: hover) {
> :where(.btn:hover, :has(.btn:hover)) {
isolation: isolate;
}
}
}
.z-1 {
z-index: 1;
}
.z-30 {
z-index: 30;
}
.timeline-end {
@layer daisyui.l1.l2.l3 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
margin: calc(0.25rem * 1);
align-self: flex-start;
justify-self: center;
}
}
.timeline-start {
@layer daisyui.l1.l2.l3 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
margin: calc(0.25rem * 1);
align-self: flex-end;
justify-self: center;
}
}
.timeline-vertical {
@layer daisyui.l1.l2 {
flex-direction: column;
> li {
justify-items: center;
--timeline-row-start: minmax(0, 1fr);
--timeline-row-end: minmax(0, 1fr);
> hr {
height: 100%;
width: calc(0.25rem * 1);
&:first-child {
grid-column-start: 2;
grid-row-start: 1;
}
&:last-child {
grid-column-start: 2;
grid-column-end: auto;
grid-row-start: 3;
grid-row-end: none;
}
}
}
.timeline-start {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
align-self: center;
justify-self: flex-end;
}
.timeline-end {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
align-self: center;
justify-self: flex-start;
}
&:has(.timeline-middle) {
> li {
> hr {
&:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: var(--radius-selector);
border-bottom-left-radius: var(--radius-selector);
}
&:last-child {
border-top-left-radius: var(--radius-selector);
border-top-right-radius: var(--radius-selector);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}
&:not(:has(.timeline-middle)) {
:first-child {
> hr:last-child {
border-top-left-radius: var(--radius-selector);
border-top-right-radius: var(--radius-selector);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
:last-child {
> hr:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: var(--radius-selector);
border-bottom-left-radius: var(--radius-selector);
}
}
}
&.timeline-snap-icon {
> li {
--timeline-col-start: minmax(0, 1fr);
--timeline-row-start: 0.5rem;
}
}
}
}
.timeline-middle {
@layer daisyui.l1.l2.l3 {
grid-column-start: 2;
grid-row-start: 2;
}
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.divider {
@layer daisyui.l1.l2.l3 {
display: flex;
height: calc(0.25rem * 4);
flex-direction: row;
align-items: center;
align-self: stretch;
white-space: nowrap;
margin: var(--divider-m, 1rem 0);
--divider-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
&:before, &:after {
content: "";
height: calc(0.25rem * 0.5);
width: 100%;
flex-grow: 1;
background-color: var(--divider-color);
}
@media print {
&:before, &:after {
border: 0.5px solid;
}
}
&:not(:empty) {
gap: calc(0.25rem * 4);
}
}
}
.container {
margin-inline: auto;
}
.mx-8 {
margin-inline: calc(var(--spacing) * 8);
}
.mx-auto {
margin-inline: auto;
}
.my-0 {
margin-block: calc(var(--spacing) * 0);
}
.my-0\! {
margin-block: calc(var(--spacing) * 0) !important;
}
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
.my-5 {
margin-block: calc(var(--spacing) * 5);
}
.my-8 {
margin-block: calc(var(--spacing) * 8);
}
.join-item {
&:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
margin-inline-start: calc(var(--border, 1px) * -1);
margin-block-start: 0;
}
&:where(*:is(:disabled, [disabled], .btn-disabled)) {
border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
word-break: break-word;
}
:where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500;
}
:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
:where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
:where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
:where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
:where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
:where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
:where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
:where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
:where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
:where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
:where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
}
:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
color: var(--tw-prose-bullets);
}
:where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em;
}
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
}
:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: normal;
font-style: normal;
color: var(--tw-prose-body);
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em;
}
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: open-quote;
}
:where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: close-quote;
}
:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
:where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 900;
color: inherit;
}
:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
:where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 800;
color: inherit;
}
:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
:where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
:where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
:where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-inline-end: 0.375em;
padding-bottom: 0.1875em;
padding-inline-start: 0.375em;
}
:where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.875em;
}
:where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.9em;
}
:where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
:where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
:where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
:where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 0;
}
:where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: baseline;
}
:where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
:where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: top;
}
:where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-align: start;
}
:where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
:where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
--tw-prose-body: oklch(37.3% 0.034 259.733);
--tw-prose-headings: oklch(21% 0.034 264.665);
--tw-prose-lead: oklch(44.6% 0.03 256.802);
--tw-prose-links: oklch(21% 0.034 264.665);
--tw-prose-bold: oklch(21% 0.034 264.665);
--tw-prose-counters: oklch(55.1% 0.027 264.364);
--tw-prose-bullets: oklch(87.2% 0.01 258.338);
--tw-prose-hr: oklch(92.8% 0.006 264.531);
--tw-prose-quotes: oklch(21% 0.034 264.665);
--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
--tw-prose-captions: oklch(55.1% 0.027 264.364);
--tw-prose-kbd: oklch(21% 0.034 264.665);
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
--tw-prose-code: oklch(21% 0.034 264.665);
--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
--tw-prose-th-borders: oklch(87.2% 0.01 258.338);
--tw-prose-td-borders: oklch(92.8% 0.006 264.531);
--tw-prose-invert-body: oklch(87.2% 0.01 258.338);
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
--tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
--tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
--tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
--tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
--tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
--tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
font-size: 1rem;
line-height: 1.75;
:where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
:where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
:where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
:where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
:where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
:where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
:where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
:where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
:where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
padding-inline-start: 1.625em;
}
:where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
:where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
:where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
:where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
:where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
:where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.status {
@layer daisyui.l1.l2.l3 {
display: inline-block;
aspect-ratio: 1 / 1;
width: calc(0.25rem * 2);
height: calc(0.25rem * 2);
border-radius: var(--radius-selector);
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
box-shadow: 0 2px 3px -1px currentColor;
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
}
}
}
.badge {
@layer daisyui.l1.l2.l3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(0.25rem * 2);
border-radius: var(--radius-selector);
vertical-align: middle;
color: var(--badge-fg);
border: var(--border) solid var(--badge-color, var(--color-base-200));
font-size: 0.875rem;
width: fit-content;
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
background-color: var(--badge-bg);
--badge-bg: var(--badge-color, var(--color-base-100));
--badge-fg: var(--color-base-content);
--size: calc(var(--size-selector, 0.25rem) * 6);
height: var(--size);
padding-inline: calc(var(--size) / 2 - var(--border));
}
}
.card-body {
@layer daisyui.l1.l2.l3 {
display: flex;
flex: auto;
flex-direction: column;
gap: calc(0.25rem * 2);
padding: var(--card-p, 1.5rem);
font-size: var(--card-fs, 0.875rem);
:where(p) {
flex-grow: 1;
}
}
}
.alert {
border-width: var(--border);
border-color: var(--alert-border-color, var(--color-base-200));
@layer daisyui.l1.l2.l3 {
border-style: solid;
--alert-border-color: var(--color-base-200);
display: grid;
align-items: center;
gap: calc(0.25rem * 4);
border-radius: var(--radius-box);
padding-inline: calc(0.25rem * 4);
padding-block: calc(0.25rem * 3);
color: var(--color-base-content);
background-color: var(--alert-color, var(--color-base-200));
justify-content: start;
justify-items: start;
grid-auto-flow: column;
grid-template-columns: auto;
text-align: start;
font-size: 0.875rem;
line-height: 1.25rem;
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
@supports (color: color-mix(in lab, red, red)) {
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
}
&:has(:nth-child(2)) {
grid-template-columns: auto minmax(auto, 1fr);
}
}
}
.card-actions {
@layer daisyui.l1.l2.l3 {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: calc(0.25rem * 2);
}
}
.card-title {
@layer daisyui.l1.l2.l3 {
display: flex;
align-items: center;
gap: calc(0.25rem * 2);
font-size: var(--cardtitle-fs, 1.125rem);
font-weight: 600;
}
}
.prose {
:root & {
--tw-prose-body: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
}
--tw-prose-headings: var(--color-base-content);
--tw-prose-lead: var(--color-base-content);
--tw-prose-links: var(--color-base-content);
--tw-prose-bold: var(--color-base-content);
--tw-prose-counters: var(--color-base-content);
--tw-prose-bullets: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
}
--tw-prose-hr: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}
--tw-prose-quotes: var(--color-base-content);
--tw-prose-quote-borders: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}
--tw-prose-captions: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
}
--tw-prose-code: var(--color-base-content);
--tw-prose-pre-code: var(--color-neutral-content);
--tw-prose-pre-bg: var(--color-neutral);
--tw-prose-th-borders: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
}
--tw-prose-td-borders: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}
--tw-prose-kbd: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
--tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000);
}
:where(code):not(pre > code) {
background-color: var(--color-base-200);
border-radius: var(--radius-selector);
border: var(--border) solid var(--color-base-300);
padding-inline: 0.5em;
padding-block: 0.2em;
font-weight: inherit;
&:before, &:after {
display: none;
}
}
}
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-flex {
display: inline-flex;
}
.divider-vertical {
@layer daisyui.l1.l2 {
--divider-m: 1rem 0;
&.divider {
height: calc(0.25rem * 4);
width: auto;
flex-direction: row;
&:before {
height: calc(0.25rem * 0.5);
width: 100%;
}
&:after {
height: calc(0.25rem * 0.5);
width: 100%;
}
}
}
}
.btn-square {
@layer daisyui.l1.l2 {
padding-inline: calc(0.25rem * 0);
width: var(--size);
height: var(--size);
}
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-\[60vh\] {
height: 60vh;
}
.w-2\/3 {
width: calc(2/3 * 100%);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-24 {
width: calc(var(--spacing) * 24);
}
.w-36 {
width: calc(var(--spacing) * 36);
}
.w-full {
width: 100%;
}
.max-w-48 {
max-width: calc(var(--spacing) * 48);
}
.max-w-\[65ch\] {
max-width: 65ch;
}
.max-w-none {
max-width: none;
}
.flex-1 {
flex: 1;
}
.grow {
flex-grow: 1;
}
.link {
@layer daisyui.l1.l2.l3 {
cursor: pointer;
text-decoration-line: underline;
&:focus {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}
}
.cursor-pointer {
cursor: pointer;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.space-y-4 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-8 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
}
.justify-self-start\! {
justify-self: flex-start !important;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.timeline-box {
@layer daisyui.l1.l2.l3 {
border: var(--border) solid;
border-radius: var(--radius-box);
border-color: var(--color-base-300);
background-color: var(--color-base-100);
padding-inline: calc(0.25rem * 4);
padding-block: calc(0.25rem * 2);
font-size: 0.75rem;
box-shadow: 0 1px 2px 0 oklch(0% 0 0/0.05);
}
}
.rounded-box {
border-radius: var(--radius-box);
}
.rounded-box {
border-radius: var(--radius-box);
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-base-content\/30 {
border-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
}
}
.bg-base-100 {
background-color: var(--color-base-100);
}
.bg-primary {
background-color: var(--color-primary);
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.px-0 {
padding-inline: calc(var(--spacing) * 0);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.pt-8 {
padding-top: calc(var(--spacing) * 8);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.text-base-content\/60 {
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
}
.text-primary-content {
color: var(--color-primary-content);
}
.italic {
font-style: italic;
}
.no-underline {
text-decoration-line: none;
}
.prose {
& :where(.btn-link):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
text-decoration-line: none;
}
}
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0%;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.btn-ghost {
@layer daisyui.l1 {
&:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-border: #0000;
--btn-noise: none;
&:not(:disabled, [disabled], .btn-disabled) {
outline-color: currentcolor;
--btn-fg: var(--btn-color, currentColor);
}
}
@media (hover: none) {
&:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
outline-color: currentcolor;
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color, currentColor);
--btn-border: #0000;
--btn-noise: none;
}
}
}
}
.prose-quoteless {
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: none;
}
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: none;
}
}
.btn-outline {
@layer daisyui.l1 {
&:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none;
}
@media (hover: none) {
&:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
--btn-shadow: "";
--btn-bg: #0000;
--btn-fg: var(--btn-color);
--btn-border: var(--btn-color);
--btn-noise: none;
}
}
}
}
.btn-sm {
@layer daisyui.l1.l2 {
--fontsize: 0.75rem;
--btn-p: 0.75rem;
--size: calc(var(--size-field, 0.25rem) * 8);
}
}
.badge-primary {
@layer daisyui.l1.l2 {
--badge-color: var(--color-primary);
--badge-fg: var(--color-primary-content);
}
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.\[--timeline-col-start\:64px\] {
--timeline-col-start: 64px;
}
.group-hover\:text-primary-content {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: var(--color-primary-content);
}
}
}
.hover\:avatar-online {
&:hover {
@media (hover: hover) {
@layer daisyui.l1.l2 {
&:before {
content: "";
position: absolute;
z-index: 1;
display: block;
border-radius: calc(infinity * 1px);
background-color: var(--color-success);
outline: 2px solid var(--color-base-100);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
}
}
}
}
.hover\:bg-base-content\/10 {
&:hover {
@media (hover: hover) {
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
}
}
}
.hover\:bg-primary {
&:hover {
@media (hover: hover) {
background-color: var(--color-primary);
}
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.hover\:badge-primary {
&:hover {
@media (hover: hover) {
@layer daisyui.l1.l2 {
--badge-color: var(--color-primary);
--badge-fg: var(--color-primary-content);
}
}
}
}
.sm\:flex {
@media (width >= 40rem) {
display: flex;
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
}
}
.sm\:items-center {
@media (width >= 40rem) {
align-items: center;
}
}
.sm\:gap-2 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 2);
}
}
.md\:divider-horizontal {
@media (width >= 48rem) {
@layer daisyui.l1.l2 {
--divider-m: 0 1rem;
&.divider {
height: auto;
width: calc(0.25rem * 4);
flex-direction: column;
&:before {
height: 100%;
width: calc(0.25rem * 0.5);
}
&:after {
height: 100%;
width: calc(0.25rem * 0.5);
}
}
}
}
}
.md\:w-1\/2 {
@media (width >= 48rem) {
width: calc(1/2 * 100%);
}
}
.md\:basis-\[200px\] {
@media (width >= 48rem) {
flex-basis: 200px;
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
}
}
.md\:gap-4 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 4);
}
}
.md\:px-0 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 0);
}
}
.lg\:col-span-2 {
@media (width >= 64rem) {
grid-column: span 2 / span 2;
}
}
.lg\:mt-8 {
@media (width >= 64rem) {
margin-top: calc(var(--spacing) * 8);
}
}
.lg\:mt-12 {
@media (width >= 64rem) {
margin-top: calc(var(--spacing) * 12);
}
}
.lg\:block {
@media (width >= 64rem) {
display: block;
}
}
.lg\:flex {
@media (width >= 64rem) {
display: flex;
}
}
.lg\:grid {
@media (width >= 64rem) {
display: grid;
}
}
.lg\:w-1\/3 {
@media (width >= 64rem) {
width: calc(1/3 * 100%);
}
}
.lg\:basis-\[300px\] {
@media (width >= 64rem) {
flex-basis: 300px;
}
}
.lg\:grid-cols-4 {
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lg\:flex-col {
@media (width >= 64rem) {
flex-direction: column;
}
}
.lg\:items-end {
@media (width >= 64rem) {
align-items: flex-end;
}
}
.xl\:w-1\/4 {
@media (width >= 80rem) {
width: calc(1/4 * 100%);
}
}
.dark\:border {
&:where(.dark, .dark *) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.dark\:border-b {
&:where(.dark, .dark *) {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
}
.dark\:border-base-content\/30 {
&:where(.dark, .dark *) {
border-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
}
}
}
.dark\:border-base-content\/60 {
&:where(.dark, .dark *) {
border-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
}
}
.dark\:bg-base-content {
&:where(.dark, .dark *) {
background-color: var(--color-base-content);
}
}
.dark\:prose-invert {
&:where(.dark, .dark *) {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
}
.\[\&_ion-icon\]\:text-lg {
& ion-icon {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
}
html {
scroll-behavior: smooth;
}
#disqus_thread iframe[src*='ads-iframe'] {
display: none;
}
#dream-global-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
z-index: -1;
}
.flip-container {
width: 100vw;
height: calc(100vh - 80px - 2rem);
max-width: 100%;
perspective: 1000px;
&.flip-it {
.flipper {
transform: rotateY(180deg);
}
.front {
overflow: hidden;
}
.back {
transform: translateX(0) rotateY(180deg);
}
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.75s;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 0.75s;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: translateX(-25%) rotateY(180deg);
}
}
#TableOfContents {
position: sticky;
top: calc(var(--spacing) * 24);
max-height: calc(100vh - 7rem);
overflow-y: auto;
}
@supports (-moz-appearance: none) {
#TableOfContents {
position: initial;
}
}
#TableOfContents ul {
@layer daisyui.l1.l2.l3 {
display: flex;
width: fit-content;
flex-direction: column;
flex-wrap: wrap;
padding: calc(0.25rem * 2);
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
font-size: 0.875rem;
:where(li ul) {
position: relative;
margin-inline-start: calc(0.25rem * 4);
padding-inline-start: calc(0.25rem * 2);
white-space: nowrap;
&:before {
position: absolute;
inset-inline-start: calc(0.25rem * 0);
top: calc(0.25rem * 3);
bottom: calc(0.25rem * 3);
background-color: var(--color-base-content);
opacity: 10%;
width: var(--border);
content: "";
}
}
:where(li > .menu-dropdown:not(.menu-dropdown-show)) {
display: none;
}
:where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: calc(0.25rem * 2);
border-radius: var(--radius-field);
padding-inline: calc(0.25rem * 3);
padding-block: calc(0.25rem * 1.5);
text-align: start;
transition-property: color, background-color, box-shadow;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
grid-auto-columns: minmax(auto, max-content) auto max-content;
text-wrap: balance;
user-select: none;
}
:where(li > details > summary) {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
&::-webkit-details-marker {
display: none;
}
}
:where(li > details > summary), :where(li > .menu-dropdown-toggle) {
&:after {
justify-self: flex-end;
display: block;
height: 0.375rem;
width: 0.375rem;
rotate: -135deg;
translate: 0 -1px;
transition-property: rotate, translate;
transition-duration: 0.2s;
content: "";
transform-origin: 50% 50%;
box-shadow: 2px 2px inset;
pointer-events: none;
}
}
details {
overflow: hidden;
interpolate-size: allow-keywords;
}
details::details-content {
block-size: 0;
@media (prefers-reduced-motion: no-preference) {
transition-behavior: allow-discrete;
transition-property: block-size, content-visibility;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
details[open]::details-content {
block-size: auto;
}
:where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
rotate: 45deg;
translate: 0 1px;
}
:where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) {
&.menu-focus, &:focus-visible {
cursor: pointer;
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
color: var(--color-base-content);
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
}
:where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
cursor: pointer;
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
}
:where(li:empty) {
background-color: var(--color-base-content);
opacity: 10%;
margin: 0.5rem 1rem;
height: 1px;
}
:where(li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch;
.badge {
justify-self: flex-end;
}
& > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active {
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
&:not(&:active) {
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
}
}
&.menu-disabled {
pointer-events: none;
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
}
}
.dropdown:focus-within {
.menu-dropdown-toggle:after {
rotate: 45deg;
translate: 0 1px;
}
}
.dropdown-content {
margin-top: calc(0.25rem * 2);
padding: calc(0.25rem * 2);
&:before {
display: none;
}
}
}
@layer daisyui.l1.l2 {
:where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
border-radius: var(--radius-field);
padding-inline: calc(0.25rem * 2.5);
padding-block: calc(0.25rem * 1);
font-size: 0.75rem;
}
.menu-title {
padding-inline: calc(0.25rem * 3);
padding-block: calc(0.25rem * 2);
}
}
}
.dream-alert {
> .heading {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 1);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
ion-icon {
font-size: 1rem;
}
&.note {
border-inline-start-color: var(--color-blue-600);
&:where(.dark, .dark *) {
border-inline-start-color: var(--color-blue-500);
}
.heading {
color: var(--color-blue-600);
&:where(.dark, .dark *) {
color: var(--color-blue-500);
}
}
}
&.tip {
border-inline-start-color: var(--color-green-600);
&:where(.dark, .dark *) {
border-inline-start-color: var(--color-green-500);
}
.heading {
color: var(--color-green-600);
&:where(.dark, .dark *) {
color: var(--color-green-500);
}
}
}
&.important {
border-inline-start-color: var(--color-purple-600);
&:where(.dark, .dark *) {
border-inline-start-color: var(--color-purple-500);
}
.heading {
color: var(--color-purple-600);
&:where(.dark, .dark *) {
color: var(--color-purple-500);
}
}
}
&.warning {
border-inline-start-color: var(--color-yellow-600);
&:where(.dark, .dark *) {
border-inline-start-color: var(--color-yellow-500);
}
.heading {
color: var(--color-yellow-600);
&:where(.dark, .dark *) {
color: var(--color-yellow-500);
}
}
}
&.caution {
border-inline-start-color: var(--color-red-600);
&:where(.dark, .dark *) {
border-inline-start-color: var(--color-red-500);
}
.heading {
color: var(--color-red-600);
&:where(.dark, .dark *) {
color: var(--color-red-500);
}
}
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=emerald]:checked),[data-theme=emerald] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(35.519% 0.032 262.988);
--color-primary: oklch(76.662% 0.135 153.45);
--color-primary-content: oklch(33.387% 0.04 162.24);
--color-secondary: oklch(61.302% 0.202 261.294);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(72.772% 0.149 33.2);
--color-accent-content: oklch(0% 0 0);
--color-neutral: oklch(35.519% 0.032 262.988);
--color-neutral-content: oklch(98.462% 0.001 247.838);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(20.84% 0.008 17.911);
--color-base-200: oklch(18.522% 0.007 17.911);
--color-base-300: oklch(16.203% 0.007 17.911);
--color-base-content: oklch(83.768% 0.001 17.911);
--color-primary: oklch(68.628% 0.185 148.958);
--color-primary-content: oklch(0% 0 0);
--color-secondary: oklch(69.776% 0.135 168.327);
--color-secondary-content: oklch(13.955% 0.027 168.327);
--color-accent: oklch(70.628% 0.119 185.713);
--color-accent-content: oklch(14.125% 0.023 185.713);
--color-neutral: oklch(30.698% 0.039 171.364);
--color-neutral-content: oklch(86.139% 0.007 171.364);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
}
@layer base {
:root:has(input.theme-controller[value=emerald]:checked),[data-theme=emerald] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(35.519% 0.032 262.988);
--color-primary: oklch(76.662% 0.135 153.45);
--color-primary-content: oklch(33.387% 0.04 162.24);
--color-secondary: oklch(61.302% 0.202 261.294);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(72.772% 0.149 33.2);
--color-accent-content: oklch(0% 0 0);
--color-neutral: oklch(35.519% 0.032 262.988);
--color-neutral-content: oklch(98.462% 0.001 247.838);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=forest]:checked),[data-theme=forest] {
color-scheme: dark;
--color-base-100: oklch(20.84% 0.008 17.911);
--color-base-200: oklch(18.522% 0.007 17.911);
--color-base-300: oklch(16.203% 0.007 17.911);
--color-base-content: oklch(83.768% 0.001 17.911);
--color-primary: oklch(68.628% 0.185 148.958);
--color-primary-content: oklch(0% 0 0);
--color-secondary: oklch(69.776% 0.135 168.327);
--color-secondary-content: oklch(13.955% 0.027 168.327);
--color-accent: oklch(70.628% 0.119 185.713);
--color-accent-content: oklch(14.125% 0.023 185.713);
--color-neutral: oklch(30.698% 0.039 171.364);
--color-neutral-content: oklch(86.139% 0.007 171.364);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
}
}
@layer base {
:root {
scrollbar-color: currentColor #0000;
@supports (color: color-mix(in lab, red, red)) {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
}
}
}
@layer base {
@property --radialprogress {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
}
@layer base {
:root:not(span) {
overflow: var(--page-overflow);
}
}
@layer base {
:root {
background: var(--page-scroll-bg, var(--root-bg));
--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
var(--root-bg, #0000);
@supports (color: color-mix(in lab, red, red)) {
--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000))
color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%));
}
--page-scroll-transition-on: background-color 0.3s ease-out;
transition: var(--page-scroll-transition);
scrollbar-gutter: var(--page-scroll-gutter, unset);
scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset);
}
@keyframes set-page-has-scroll {
0%, to {
--page-has-scroll: 1;
}
}
}
@layer base {
:root, [data-theme] {
background: var(--page-scroll-bg, var(--root-bg));
color: var(--color-base-content);
}
:where(:root, [data-theme]) {
--root-bg: var(--color-base-100);
}
}
@keyframes rating {
0%, 40% {
scale: 1.1;
filter: brightness(1.05) contrast(1.05);
}
}
@keyframes dropdown {
0% {
opacity: 0;
}
}
@keyframes radio {
0% {
padding: 5px;
}
50% {
padding: 3px;
}
}
@keyframes toast {
0% {
scale: 0.9;
opacity: 0;
}
100% {
scale: 1;
opacity: 1;
}
}
@keyframes rotator {
89.9999%, 100% {
--first-item-position: 0 0%;
}
90%, 99.9999% {
--first-item-position: 0 calc(var(--items) * 100%);
}
100% {
translate: 0 -100%;
}
}
@keyframes skeleton {
0% {
background-position: 150%;
}
100% {
background-position: -50%;
}
}
@keyframes menu {
0% {
opacity: 0;
}
}
@keyframes progress {
50% {
background-position-x: -115%;
}
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-space-y-reverse: 0;
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
================================================
FILE: assets/js/grid.js
================================================
"use strict";
function initGrid() {
document.querySelectorAll('.dream-grid').forEach(function (grid) {
var msnry = new Masonry(grid, {
itemSelector: '.dream-column'
});
if (grid.classList.contains('dream-grid-about')) {
window.aboutMasonry = msnry;
}
imagesLoaded(grid, function () {
grid.style.opacity = 1;
msnry.layout();
});
});
}
initGrid();
================================================
FILE: assets/js/main.js
================================================
"use strict";
document.addEventListener('alpine:init', function () {
Alpine.store('darkMode', {
init: function init() {
var _this = this;
var isDark = window.localStorage.getItem('hugo-theme-dream-is-dark');
if (isDark) {
this.on = isDark;
} else {
this.mql.addEventListener('change', function (event) {
_this.on = event.matches ? 'y' : 'n';
});
this.on = 'auto';
}
setTimeout(function () {
_this.setThemeForUtterances();
}, 6000);
},
mql: window.matchMedia('(prefers-color-scheme: dark)'),
on: 'n',
isDark: function isDark() {
return this.on === 'auto' ? this.mql.matches : this.on === 'y';
},
theme: function theme() {
return this.isDark() ? window.darkTheme : window.lightTheme;
},
iconMap: {
n: 'sunny',
y: 'moon',
auto: 'desktop'
},
icon: function icon() {
return this.iconMap[this.on];
},
toggle: function toggle(status) {
this.on = status;
if (status === 'auto') {
window.localStorage.removeItem('hugo-theme-dream-is-dark');
} else {
window.localStorage.setItem('hugo-theme-dream-is-dark', status);
}
this.setThemeForUtterances();
this.changeSyntaxHighlightingTheme();
},
changeSyntaxHighlightingTheme: function changeSyntaxHighlightingTheme() {
if (document.querySelector('#dream-single-post-main')) {
var customSyntaxHighlightingUrl = this.isDark() ? window.customSyntaxHighlighting.dark : window.customSyntaxHighlighting.light;
document.querySelector('link[data-custom-syntax-highlighting]').setAttribute('href', customSyntaxHighlightingUrl);
}
},
setThemeForUtterances: function setThemeForUtterances() {
var utterances = document.querySelector('iframe.utterances-frame');
if (utterances) {
utterances.contentWindow.postMessage({
type: 'set-theme',
theme: this.isDark() ? 'github-dark' : 'github-light'
}, 'https://utteranc.es');
}
}
});
});
================================================
FILE: assets/js/toc.js
================================================
"use strict";
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function tocHighlighter() {
return {
headings: [],
links: [],
debouncedScroll: null,
init: function init() {
var toc = document.querySelector('#TableOfContents');
if (!toc || window.getComputedStyle(toc.parentElement).display === 'none') {
return;
}
this.links = _toConsumableArray(toc.querySelectorAll('a'));
this.headings = this.links.map(function (link) {
var _link$getAttribute;
return document.getElementById((_link$getAttribute = link.getAttribute('href')) === null || _link$getAttribute === void 0 ? void 0 : _link$getAttribute.replace('#', ''));
}).filter(Boolean);
this.debouncedScroll = this.debounce(this.onScroll.bind(this), 300);
this.debouncedScroll();
},
onScroll: function onScroll() {
var closest = null;
var minOffset = Infinity;
this.headings.forEach(function (el, index) {
var rect = el.getBoundingClientRect();
var offset = Math.abs(rect.top);
if (rect.top < window.innerHeight && offset < minOffset) {
minOffset = offset;
closest = index;
}
});
if (closest !== null && this.links[closest]) {
this.setActive(this.links[closest]);
}
},
setActive: function setActive(activeLink) {
this.links.forEach(function (link) {
return link.classList.remove('menu-active');
});
activeLink.classList.add('menu-active');
},
debounce: function debounce(fn, delay) {
var timeout;
return function () {
var _this = this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timeout);
timeout = setTimeout(function () {
return fn.apply(_this, args);
}, delay);
};
}
};
}
================================================
FILE: config.toml
================================================
[module]
[module.hugoVersion]
min = "0.97.0"
extended = true
================================================
FILE: decapCMS/config.yml
================================================
backend:
name: git-gateway
branch: master
publish_mode: editorial_workflow
media_folder: static/img
public_folder: /img
collections:
- name: 'post'
label: 'Post'
folder: 'content/posts'
create: true
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
fields:
- label: 'Draft'
name: 'draft'
widget: 'boolean'
default: false
- label: 'Title'
name: 'title'
widget: 'string'
- label: 'Publish Date'
name: 'date'
widget: 'datetime'
- label: 'Last Modified Date'
name: 'lastmod'
widget: 'datetime'
required: false
- label: 'Author'
name: 'author'
widget: 'string'
required: false
- label: 'Author Link'
name: 'authorlink'
widget: 'string'
required: false
- label: 'Cover'
name: 'cover'
widget: 'image'
required: false
- label: 'Categories'
name: 'categories'
widget: 'list'
summary: '{{fields.category}}'
field:
label: 'Category'
name: 'category'
widget: 'string'
- label: 'Tags'
name: 'tags'
widget: 'list'
summary: '{{fields.tag}}'
field:
label: 'Tag'
name: 'tag'
widget: 'string'
- label: 'Disable Last Modified Date'
name: 'nolastmod'
widget: 'boolean'
default: false
- label: 'Body'
name: 'body'
widget: 'markdown'
- name: 'about'
label: 'About'
folder: 'content/about'
create: true
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
fields:
- label: 'Draft'
name: 'draft'
widget: 'boolean'
default: false
- label: 'Title'
name: 'title'
widget: 'string'
- label: 'Publish Date'
name: 'date'
widget: 'datetime'
- label: 'Body'
name: 'body'
widget: 'markdown'
================================================
FILE: decapCMS/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<!-- Include the script that enables Netlify Identity on this page. -->
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Include the script that builds the page and powers Decap CMS -->
<script src="https://cdn.jsdelivr.net/npm/decap-cms@3.6.2/dist/decap-cms.js" integrity="sha256-WxCg7VZgMojBMxL13SErQg75vziDFV937n92ia4vijY=" crossorigin="anonymous"></script>
</body>
</html>
================================================
FILE: docs/app/AdSense.jsx
================================================
'use client'
import { useEffect } from 'react'
import Script from 'next/script'
export default function AdSense() {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [])
return (
<div style={{ width: '100%' }}>
<Script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2097283051393565"
crossOrigin="anonymous"
strategy="lazyOnload"
/>
<ins
className="adsbygoogle"
style={{ display: 'flex', justifyContent: 'left' }}
data-ad-client="ca-pub-2097283051393565"
data-ad-slot="4533331907"
data-ad-format="rectangle"
data-full-width-responsive="true"
/>
</div>
)
}
================================================
FILE: docs/app/[[...mdxPath]]/page.jsx
================================================
import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents as getMDXComponents } from '../../mdx-components'
export const generateStaticParams = generateStaticParamsFor('mdxPath')
export async function generateMetadata(props) {
const params = await props.params
const { metadata } = await importPage(params.mdxPath)
return metadata
}
const Wrapper = getMDXComponents().wrapper
export default async function Page(props) {
const params = await props.params
const { default: MDXContent, toc, metadata, sourceCode } = await importPage(params.mdxPath)
return (
<Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
<MDXContent {...props} params={params} />
</Wrapper>
)
}
================================================
FILE: docs/app/layout.jsx
================================================
import { Layout, Navbar, Footer } from 'nextra-theme-docs'
import { Banner, Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import Adsense from './AdSense'
// Required for theme styles, previously was imported under the hood
import 'nextra-theme-docs/style.css'
const siteTitle = '🌱 Hugo Theme Dream'
/** @type {import('next').Metadata} */
export const metadata = {
metadataBase: new URL('https://hugo-theme-dream.g1en.site'),
title: {
default: 'Hugo Theme Dream',
template: `%s | Hugo Theme Dream`,
},
}
const banner = (
<Banner storageKey="zen-mode">
<a href="https://hugo-theme-dream.g1en.site/zen-mode">{siteTitle} 3.5 introduces Zen mode. Read more →</a>
</Banner>
)
const navbar = (
<Navbar
logo={<span style={{ fontSize: '1.125rem', fontWeight: 600 }}>{siteTitle}</span>}
projectLink="https://github.com/g1eny0ung/hugo-theme-dream"
/>
)
const footer = (
<Footer>
<p>
<a style={{ textDecoration: 'underline' }} href="https://github.com/g1eny0ung/hugo-theme-dream" target="_blank">
{siteTitle}
</a>{' '}
is released under the{' '}
<a style={{ textDecoration: 'underline' }} href="https://choosealicense.com/licenses/mit/" target="_blank">
MIT License
</a>
.
</p>
</Footer>
)
export default async function RootLayout({ children }) {
return (
<html
// Not required, but good for SEO
lang="en"
// Required to be set
dir="ltr"
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
suppressHydrationWarning
>
<Head
color={{
hue: 146,
saturation: 50,
lightness: 36,
}}
>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🌱</text></svg>"
/>
</Head>
<body>
<Layout
banner={banner}
navbar={navbar}
pageMap={await getPageMap()}
docsRepositoryBase="https://github.com/g1eny0ung/hugo-theme-dream/tree/master/docs"
editLink="Edit this page on GitHub"
sidebar={{ defaultMenuCollapseLevel: 1 }}
toc={{
extraContent: <Adsense />,
}}
footer={footer}
// ...Your additional theme config options
>
{children}
</Layout>
</body>
</html>
)
}
================================================
FILE: docs/content/CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## [Unreleased]
## [3.14.0] - 2026-02-08
### Added
- Support image title as <https://gohugo.io/render-hooks/images/> describes
### Changed
- Optimize browser compatibility of toc and achieve smooth scrolling
## [3.13.0] - 2025-09-08
### Added
- Mathematics enhancements [#387](https://github.com/g1eny0ung/hugo-theme-dream/pull/387)
- Support `$` delimiter for inline math
- Support `math: true` page param for whole page math rendering
- Add `covercaption` page param to display a caption for the cover image in the single post page (you need to set `showSummaryCoverInPost` to `true` first)
### Fixed
- Fix the integrity issue of jsdelivr alpinejs
## [3.12.0] - 2025-04-09
### Added
- Highlight toc items when scrolling [#383](https://github.com/g1eny0ung/hugo-theme-dream/pull/383)
### Changed
- Upgrade to tailwindcss v4 and daisyUI v5 [#374](https://github.com/g1eny0ung/hugo-theme-dream/pull/374)
### Fixed
- Escape mermaidjs code before safe [#376](https://github.com/g1eny0ung/hugo-theme-dream/pull/376)
- Use one default $navItems [#381](https://github.com/g1eny0ung/hugo-theme-dream/pull/381)
## [3.11.0] - 2025-03-04
### Added
- Add Google AdSense support [#363](https://github.com/g1eny0ung/hugo-theme-dream/pull/363)
### Changed
- Remove author display if both post author and site author are not set [#354](https://github.com/g1eny0ung/hugo-theme-dream/pull/354)
- Prioritize page descriptions over page summaries [#356](https://github.com/g1eny0ung/hugo-theme-dream/pull/356)
- Allow favicon to be specified in text format
- Support Twikoo comment system [#359](https://github.com/g1eny0ung/hugo-theme-dream/pull/359)
- Allow specifying `about` in [`reorderNavItems`](./params-configurations.mdx#reordernavitems) [#371](https://github.com/g1eny0ung/hugo-theme-dream/pull/371)
### Fixed
- Fix the background and z-index problem of the zoomable image
- Optimize layout shifts when the homepage loads [#364](https://github.com/g1eny0ung/hugo-theme-dream/pull/364)
- Disable Disqus ads
## [3.10.0] - 2025-01-07
### Added
- Add `imageZoomableInPost` param to control the zoomable of images in the single post page [#345](https://github.com/g1eny0ung/hugo-theme-dream/pull/345)
- Support mathematical equations and expressions by using [MathJax](https://www.mathjax.org/) [#350](https://github.com/g1eny0ung/hugo-theme-dream/pull/350)
### Changed
- Make TOC scrollable when it is too long [#340](https://github.com/g1eny0ung/hugo-theme-dream/pull/340)
- Bump Mermaid version to 11.4.1
- Now external links will open in a new tab by default
### Fixed
- Fix Disqus styling issues
- Add background color to the dark mode switch button
## [3.9.0] - 2024-11-17
### Added
- Now you can group posts with any layout in archives page, see [custom group layout](https://hugo-theme-dream.g1en.site/archives-page#custom-group-layout) for more details
### Changed
- Append global page footer on about page [#329](https://github.com/g1eny0ung/hugo-theme-dream/pull/329)
### Fixed
- Supplement translations in fr/pt [#327](https://github.com/g1eny0ung/hugo-theme-dream/pull/327)
- Dropdown menu links are not clickable on Safari [#334](https://github.com/g1eny0ung/hugo-theme-dream/pull/334)
## [3.8.2] - 2024-09-25
### Added
- Now you can share your post to WhatsApp [#317](https://github.com/g1eny0ung/hugo-theme-dream/pull/317)
- Add `reorderShares` param [#320](https://github.com/g1eny0ung/hugo-theme-dream/pull/320)
- Add a slot for Google AdSense on the post page, view [this issue](https://github.com/g1eny0ung/hugo-theme-dream/issues/315#issuecomment-2370701549) for more details
### Changed
- Rename `updateAt` to `updatedAt` in i18n files
### Fixed
- Tweak English translations for `minuteRead` and `updateAt` [#323](https://github.com/g1eny0ung/hugo-theme-dream/pull/323)
## [3.8.1] - 2024-09-08
### Fixed
- Fix the cache issue of `commentSystems.html`
- Add missing "about" translation to the Italian language file
## [3.8.0] - 2024-09-07
### Added
- Valine comments can now be customized using a partial file [#311](https://github.com/g1eny0ung/hugo-theme-dream/pull/311)
- Support [Waline](https://waline.js.org/en/) comments [#310](https://github.com/g1eny0ung/hugo-theme-dream/pull/310)
### Changed
- Upgrade Hugo minimum version to 0.97.0
### Deprecated
- Deprecate `VALINE_LANGUAGE` param [#309](https://github.com/g1eny0ung/hugo-theme-dream/pull/309)
## [3.7.0] - 2024-08-29
### Added
- Add [Mermaid](https://mermaid.js.org/intro/) diagrams support [#307](https://github.com/g1eny0ung/hugo-theme-dream/pull/307)
- Add [GitHub Alerts Markdown extension](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) compatible alerts [#308](https://github.com/g1eny0ung/hugo-theme-dream/pull/308)
### Fixed
- Fix image size of summary cards in Zen mode
## [3.6.1] - 2024-08-25
### Fixed
- Render SVG images in summary
- Incorrect use of the `_internal/schema.html` template [#306](https://github.com/g1eny0ung/hugo-theme-dream/pull/306)
- Remove shortcut link type in favicon
## [3.6.0] - 2024-08-24
### Added
- Add `noDefaultSummaryCover` param [#301](https://github.com/g1eny0ung/hugo-theme-dream/pull/301)
### Changed
- Enhance Japanese translation [#303](https://github.com/g1eny0ung/hugo-theme-dream/pull/303)
- Enhance Chinese translation
- Supplement meta tags for SEO [#305](https://github.com/g1eny0ung/hugo-theme-dream/pull/305)
### Deprecated
- Deprecate `hasTwitterEmbed` param [#302](https://github.com/g1eny0ung/hugo-theme-dream/pull/302)
## [3.5.0] - 2024-08-19
🍃 Hugo Theme Dream 3.5 introduces Zen mode. View [Zen Mode](./zen-mode.mdx) for more details.
### Added
- Zen mode: a simple layout that allows you to concentrate on reading and writing [#299](https://github.com/g1eny0ung/hugo-theme-dream/pull/299)
### Changed
- Now taxonomy pages follow the same layout as the home page
### Deprecated
- If you still use `disqusShortname`, please replace it with `services.disqus.shortname`
### Fixed
- Fix height of `.flip-container` class
- Fix tabindex issue in nav menu
## [3.4.1] - 2024-08-14
### Added
- Allow text-based custom nav items
### Changed
- Refactor the implementation of localized time [#298](https://github.com/g1eny0ung/hugo-theme-dream/pull/298)
## [3.4.0] - 2024-08-10
### Added
- Add `reorderNavItems` and `collapseNavItems` params to reorder and collapse navigation items
- Add `[params.navItems]` to append custom items to the navbar
### Changed
- Minimalize the theme css
### Fixed
- Add missing descriptive attributes in some elements
## [3.3.0] - 2024-08-01
### Added
- Support arbitrary taxonomies [#292](https://github.com/g1eny0ung/hugo-theme-dream/pull/292)
### Fixed
- Fix the overflow problem of pre's content
- Fix an overflow problem when users enable always show scroll bars in the system settings
- Resources accessibility when deploying site to a subdomain [#295](https://github.com/g1eny0ung/hugo-theme-dream/pull/295)
## [3.2.0] - 2024-07-25
### Added
- Add `showPrevNextPost` param to control the display of previous and next post links in the single post page
- Add `showTableOfContents` param to control the display of the table of contents in the single post page
## [3.1.1] - 2024-07-23
### Changed
- Adjust shadow style of navbar
- Now if a paginator has only one page, the previous and next buttons will be hidden
### Fixed
- Correct the usage of semantic elements in `baseof.html` and `single.html`
## [3.1.0] - 2024-07-18
### Added
- Support image optimization for summary images. See [Image Optimization](https://hugo-theme-dream.g1en.site/summary-images#image-optimization) for more details
### Changed
- Upgrade `imagesloaded` to `5.0.0`
### Fixed
- Fix the problem of misaligned images during initial loading
## [3.0.1] - 2024-07-12
### Fixed
- Add WAI-ARIA roles to some non-semantic elements
- Fix mobile layout in term.html
- Add mobile display for nav right section
## [3.0.0] - 2024-07-09
🎉 Hugo Theme Dream 3.0 is released.
See the [migration guide](https://hugo-theme-dream.g1en.site/migrate-to-v3) for more details.
================================================
FILE: docs/content/_meta.js
================================================
export default {
'docs-v2': {
title: 'Docs (v2)',
type: 'page',
href: 'https://hugo-theme-dream-docs-v2.netlify.app',
},
index: 'Quick Start',
'base-configurations': 'Base Configurations',
'params-configurations': 'Params Configurations',
'zen-mode': 'Zen Mode',
i18n: 'Internationalization',
'website-analytics': 'Website Analytics',
'social-comments': 'Social Comments',
'adsense': 'Google AdSense',
'post-page': 'Post Page',
'about-page': 'About Page',
'archives-page': 'Archives Page',
'custom-nav-items': 'Custom Nav Items',
search: 'Search',
'summary-images': 'Summary Images',
'syntax-highlighting': 'Syntax Highlighting',
'social-links': 'Social Links',
'light-and-dark-mode': 'Light and Dark Mode',
custom: 'Custom Theme',
'decap-cms': 'Decap CMS',
CHANGELOG: 'Changelog',
'migrate-to-v3': 'Migrate to v3',
}
================================================
FILE: docs/content/about-page.md
================================================
# About Page
In [Quick Start](/), we added **About Me** as below:
```bash
hugo new about/me.md
```
```md
---
title: About Me
---
Hi, my name is Yue Yang.
This is my blog.
```
Then create an `index.md` in the about folder and put below contents into it:
```md
---
headless: true
---
```
You will be curious why it's needed to create an `index.md`. Because Dream doesn't want the about folder to be output as `RegularPages`.
Related docs: <https://gohugo.io/content-management/page-bundles/#headless-bundles>
## Access the About page
There are two ways to access the About page:
- Click the **About** link in the top right navigation bar
- Click the avatar in the top left navigation bar
## More descriptions
You can add multiple `.md` files, all of them will be rendered one by one in the masonry layout.
```bash
hugo new about/desc1.md
hugo new about/desc2.md
```
================================================
FILE: docs/content/adsense.mdx
================================================
# Google Adsense
> [!WARNING]
>
> Currently, this feature is still experimental. It's only take effect on the [Post Page](post-page.mdx).
>
> It may change in the future.
## How to use
Even though Adsense provides auto ads, it's also necessary to add slots to control the position of the ads.
You can create these partial files in the `layouts/partials` folder to enable Google Adsense on your site.
- **`adsense.html`**
- **`adsense-post-bottom.html`**
The `adsense.html` is used to add the ads to the left sidebar on the post page. Please use
the [display ad unit](https://support.google.com/adsense/answer/9274025) for this slot.
The `adsense-post-bottom.html` is used to add the ads to the bottom of the post page. Please use
the [In-article ad](https://support.google.com/adsense/answer/9185052) for this slot.
After creating ad units, put the code in the partial file to make it work.
## Tips
### Use rectangle format
After testing, I found that the ad unit with rectangle format is the best choice for the left sidebar (`adsense.html`).
Otherwise, Adsense usually uses [a nearly `600px` height ad unit](https://support.google.com/google-ads/answer/7031480)
because there is enough space for it.
So I recommend referring to this [document](https://support.google.com/adsense/answer/9183460) to specify the
`data-ad-format` to `rectangle`.
================================================
FILE: docs/content/archives-page.md
================================================
# Archives Page
Archives page is a list of all posts by timeline. It will be rendered as `/posts`.
## Custom Header
You can custom your archives page's header by placing a `_index.md` in `content/posts`.
For example, paste below in `_index.md`:
```markdown
---
title: Archives
---
All posts by timeline.
```
These will be rendered as:
```html
<h1 class="text-3xl">Archives</h1>
<p class="text-sm">All posts by timeline.</p>
```
One is the title, and the other is the description.
## Custom Group Layout
The timeline is grouped by year by default. You can use a custom layout to group by month or any other way.
This can be done by adding a `groupLayout` field in the front matter of the `_index.md` file.
For example, in `content/posts/_index.md`:
```markdown
---
groupLayout: Jan 2006
---
```
For how to define the layout, please refer to [layout string](https://gohugo.io/methods/pages/groupbydate/#layout-string).
================================================
FILE: docs/content/base-configurations.mdx
================================================
# Base Configurations
> [!NOTE]
>
> This doc only introduces some settings that are commonly used in most Hugo sites.
>
> Please view the [full configuration](https://gohugo.io/getting-started/configuration/#all-configuration-settings) for more details.
## Basic Settings
### baseURL = "https://g1en.site"
The absolute URL (protocol, host, path, and trailing slash) of your published site.
### defaultContentLanguage = "zh"
Content without language indicator will default to this language. Default is `en`.
### languageCode = "zh-Hans"
LanguageCode is used to set the `lang` attribute in the `<html>` tag. It will also be:
- Used in RSS
- Used in the `og:locale` meta tag
### title = "g1eny0ung's Blog"
The site title.
## Extra Settings
### enableRobotsTXT = true
Optional. View https://en.wikipedia.org/wiki/Robots.txt to learn more about the `robots.txt` file.
### hasCJKLanguage = true
As my blog was written in Chinese, I need to set this to correct the `{{ .ReadingTime }}` of the post.
================================================
FILE: docs/content/custom-nav-items.mdx
================================================
# Append Custom Items to the Navbar
This doc will guide you on how to append custom items to the navbar.
You can add arbitrary items to the navbar by setting
the `[params.navItems]` in your `hugo.toml`, below is an example:
> [!TIP]
>
> For a good visual experience, it is recommended not to add too many customisation items, i.e. just highlight the
> navigation items you want the user to see.
```toml
[params]
[params.navItems]
series = { href = "/series", icon = "planet", title = "Series" }
github = { href = "https://github.com/g1eny0ung", target = "_blank", icon = "logo-github", title = "GitHub" }
```
In this example, we define two keys `series` and `github` under `params.navItems`,
Dream will find them and append them to the navbar by default.
You can also reorder custom items with the default items by setting the `reorderNavItems` parameter in your `hugo.toml`:
```toml
reorderNavItems = ["github", "about", "search", "rss", "posts", "categories", "tags", "series"]
```
The same goes for `collapseNavItems`, you can also collapse custom items to a dropdown menu:
```toml
collapseNavItems = ["series"]
```
The next section will describe the properties in the sub-tables we used in the example before.
## Properties
Each sub-table (object) can have the following properties.
### Required
- `href`: The URL of the item.
- `title`: The title of the item.
### Optional
- `target`: The [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) of the item.
- `icon`: The name of the icon. You can find available icons [here](https://ionic.io/ionicons).
================================================
FILE: docs/content/custom.mdx
================================================
# Custom Theme
This doc describes how to add `CSS` and `JS` to customize the theme.
Before customization, you need to add the related fields to your configuration, below is an example:
```toml
[params]
[params.advanced]
customCSS = ["css/custom.css"] # Files in the list will be loaded in order.
customJS = ["js/custom.js"]
```
> [!NOTE]
>
> The file paths specified in `customCSS` and `customJS` are related to the `static` folder, so you need to put your custom files in the `static` folder.
## CSS
> [!NOTE]
>
> In v3, Dream uses [tailwindcss](https://tailwindcss.com/) and [daisyUI](https://daisyui.com/) to build the theme.
> The old way to customize the CSS is still available (by adding `customCSS`), but now it's harder to style components with
> pure css, because the tailwindcss class is more trivial than the Semantic UI used in the past.
>
> I'll think about how to customize styles based on tailwindcss more easily in the future.
>
> So if you are not familiar with frontend development, recommend you to ignore this part. Mostly, you don't need to customize the CSS.
## JS
> [!NOTE]
>
> In v3, Dream uses [Alpine.js](https://alpinejs.dev/) to build the theme.
>
> Like the CSS, the old way to customize the JS is still available (by adding `customJS`),
> but there are no specific hooks for now that allow you to execute JS functions to modify specific places.
>
> Now you can use Alpine.js to do anything you want. I prepare to add some hooks in the future to make it easier to customize the theme with Alpine.js.
>
> So if you are not familiar with frontend development, I recommend you to ignore this part. Mostly, you don't need to customize the JS.
================================================
FILE: docs/content/decap-cms.md
================================================
# Decap CMS
Dream provides a predefined configuration for [Decap CMS](https://decapcms.org/).
It locates in the `decapCMS` folder.
To use it, create an `admin` folder in your `static` directory, then copy the contents of the `decapCMS` folder to the `admin` folder.
================================================
FILE: docs/content/i18n.md
================================================
# i18n
i18n means [internationalization](https://en.wikipedia.org/wiki/Internationalization_and_localization).
Dream supports multiple languages. You can view the list of supported languages in [hugo-theme-dream/i18n/](https://github.com/g1eny0ung/hugo-theme-dream/tree/master/i18n).
If you don't see your language in the list, welcome to contribute by adding a new language file.
================================================
FILE: docs/content/index.mdx
================================================
# Quick Start
> [!NOTE]
>
> I assume you have already read [Hugo Getting Started](https://gohugo.io/getting-started/),
> this can help you to get an overview of Hugo and understand this guide better.
## Introduction
Dream is a [Hugo](https://gohugo.io/) theme. I build it for [my blog](https://g1en.site).
The main features are **Masonry Layout Posts** and **Flippable About Page**.
Dream also supports **light and dark mode** out of the box.
For people who prefer a simple and clean interface,
Dream has a [**Zen mode**](https://hugo-theme-dream.g1en.site/zen-mode).
It is more concentrated on reading and writing.
## Installation
Go into your site folder:
```sh
mkdir -p themes && cd themes
git clone https://github.com/g1eny0ung/hugo-theme-dream.git dream
```
## Create configuration file
Create `hugo.toml` if it doesn't already exist in your site folder, and then enable Dream by adding:
```toml
theme = "dream"
```
> [!NOTE]
>
> If you are cloning the theme with another name, replace `dream` with the name you cloned.
>
> For example, if you cloned the theme with the name `my-dream`, you should write `theme = "my-dream"`.
> [!TIP]
>
> You can download and use this [default configuration file](https://github.com/g1eny0ung/hugo-theme-dream/blob/master/hugo.example.toml). It contains all params used in Dream.
## Default or Zen Mode
Dream has two out-of-the-box modes: **Default** and **Zen**.
Default mode will display your posts in a masonry layout.
Zen mode will display your posts in a single column layout.
It is more suitable for people who prefer a simple and clean interface.
And it is more concentrated on reading and writing.
Here is a demo of the Zen mode: https://g1en-site-zen-mode-preview.netlify.app/.
You can enable Zen mode by adding `zenMode = true` to the configuration file.
```toml
[params]
zenMode = true
```
View [Zen Mode](./zen-mode.md) for more details.
## Set language for your site
Open `hugo.toml` and write:
```toml
defaultContentLanguage = "en"
```
View [i18n](./i18n.md) for supported languages and more details.
## Website Analytics
Dream supports [Google Analytics](https://www.google.com/analytics/) for website analytics.
In `hugo.toml`, set:
```toml
[services]
[services.googleAnalytics]
ID = "..."
```
> [!WARNING]
>
> You may have used `googleAnalytics = "..."` before. This is deprecated in Hugo `0.120.0`.
>
> Please upgrade to the new configuration. See https://gohugo.io/methods/site/googleanalytics/ for more details.
## Social Comments
Dream can use [Disqus](https://disqus.com/) for social comments.
In `hugo.toml`, set:
```toml
[services]
[services.disqus]
shortname = "..."
```
> [!WARNING]
>
> You may have used `disqusShortname = "..."` before. This is deprecated in Hugo `0.120.0`.
>
> Please upgrade to the new configuration. See https://gohugo.io/methods/site/disqusshortname/ for more details.
> [!WARNING]
>
> Currently, Disqus does not support [oklch colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) which is used in Dream.
> We need to make an extra hack to make it work. See [Compatible with oklch colors](./social-comments.md#compatible-with-oklch-colors) for more details.
For more social comment systems, view [Social Comments](./social-comments.md).
## Introduce Yourself
Dream provides a flippable about page to introduce yourself.
Type the command below in your terminal to create the first section about you:
```bash
hugo new about/me.md
```
Write something **about you**:
```md
---
title: About Me
---
Hi, my name is Yue Yang.
This is my blog.
```
Then create an `index.md` in the `content/about` folder and put below contents into it:
```md
---
headless: true
---
```
You will then see **About** in the top right navigation bar. Click it to display your about page.
## Write your first article
All of your posts must be in the `content/posts` folder.
You can generate it with:
```bash
hugo new posts/article-title.md
```
The default content of `article-title.md` is:
```md
---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# images:
# - /img/cover.jpg
categories:
- category1
tags:
- tag1
- tag2
# nolastmod: true
draft: true
---
Cut out summary from your post content here.
<!--more-->
The remaining content of your post.
```
This is the default template of a post.
For a quick start, you can leave the default content as it is. Only remove `draft: true` to publish your post.
To preview your post, you can start the Hugo server:
```bash
hugo server -D
```
The `-D` parameter indicates that drafts are included in the preview.
## What's next?
The left sidebar contains more detailed configurations and features.
Wish you a happy journey with 🌱 Dream!
================================================
FILE: docs/content/light-and-dark-mode.mdx
================================================
# Light and Dark Mode
From Dream v3, it uses daisyUI to provide some out-of-box [themes](https://daisyui.com/docs/themes/) to use in light and dark mode.
There are two steps to customize the light and dark mode:
1. Specify themes for light and dark mode in the `hugo.toml`:
```toml
lightTheme = "emerald"
darkTheme = "forest"
```
1. And then, open `src/input.css` in the root directory of Dream, specify the themes you want to use:
```css
@plugin "daisyui" {
themes: emerald --default, forest --prefersdark;
}
```
> [!IMPORTANT]
>
> You must install dependencies (`pnpm i`) before compiling the CSS.
Then run `npm run css` or `pnpm css` to compile the CSS.
================================================
FILE: docs/content/migrate-to-v3.mdx
================================================
import { Tabs } from 'nextra/components'
# Migrate to v3
This guide will help you migrate your existing v2 project to v3. It will cover the most common changes you will need to make to your project to get it working with v3.
## Introduction
<Tabs items={['English', '中文']}>
<Tabs.Tab>
Around the end of 2017, I was planning to start my own blog. I came across Hugo, which is very fast, and it subverted my idea of using Node.js Hexo to build a blog. At the same time, I didn't want to use existing themes, I wanted to write my own theme from scratch, because I thought it was a unique experience. I named it Dream, which represents my little dream. I was still an intern at that time, just starting to work, I learned it in my spare time, and finally developed the first version of the theme. In my current opinion, the design is not that good-looking, but I can still understand my mood at that time, I was excited and full of accomplishment at that time.
Later, as my technology improved, I gradually overturned my previous design. I think this process is also inevitable. As a person grows, his level and quality will gradually improve, so he will naturally have the idea of wanting to modify his early works. So, I started my v2.0 action, I used masonry layout to reconstruct Dream, because I particularly liked this irregular arrangement structure at that time, I think it is very good to display my articles in this form. From this stage on, my theme was gradually discovered by more and more people, and many people also started to use my theme, and they also raised many questions, and I would also fix it synchronously. In this way, Dream has continuously added more parameters, and on the basis of masonry layout, there are more customizable display forms.
But later, due to my loss of motivation to write a blog (there are many reasons, the COVID-19, work, life troubles, etc.), the maintenance of Dream has gradually become deserted. I have tried many times to modify some places before, but in the end it all came to nothing (for example, I once wanted to use Bulma to replace the outdated and no longer maintained Semantic UI). Just like I lost my motivation to write a blog, it is also very difficult for me to complete other things, I became very anxious, it was the kind of anxiety of growth, which makes you no longer able to concentrate and wholeheartedly do one thing. Time is all fragmented.
Around the beginning of this year (2024), when I saw my blog again (I rarely looked at it myself before), I thought I should make some changes. I want to pick up my blog again, and not just it, I want to pick up every unfinished thing I have done. I have already passed a lot of my youth, and I don't want to waste it anymore. But it is easy to think, but it is still very difficult to do. I started to rebuild Dream, I used three new things: tailwindcss, daisyUI and Alpine.js, to replace the old technology stack. These are all new things I have come into contact with in the past few years. I combine them with Hugo, so that Hugo can both maintain its speed and have stronger rendering capabilities. At the same time, I also adopted a new design. Before, I added a lot of parameters, but I didn't think carefully about whether they were "meaningful" modifications. As a theme, my current idea is to be ready to use without making too many modifications. This may be the original intention of a theme. To make a durable and durable design, not a fancy design, is more in line with my current ideas. This reconstruction is also a summary of my 7 years of aesthetics, design and technology.
Time came to the beginning of July, and I finally completed the reconstruction, which is a new milestone version. I have not only completed the modification of the theme, but also completed the writing of the documentation. I want to make it very good in every aspect. This is also my commitment to myself. I want to complete every task completely. This is just the beginning of all subsequent things. I hope you will like Dream's latest design. If you encounter any problems during use, please feel free to raise them in the [issues](https://github.com/g1eny0ung/hugo-theme-dream/issues), and I will check them in time.
The following content will help you migrate from v2 to v3. You can compare it one by one to make modifications. Similarly, if you encounter any migration issues, please feel free to raise them at any time.
</Tabs.Tab>
<Tabs.Tab>
大约在 2017 年底，那时候的我想要建立一个自己的博客，我偶然发现了 Hugo，它速度很快，打破了我想要使用 Node.js Hexo 去建立博客的想法。同时，我不打算使用已有的主题，我想要自己从头书写一个属于我自己的主题，因为我觉得这是一个独一无二的体验。我把它起名为 Dream，代表着我的一个小梦想。那时候我还在实习，是我刚刚接触工作的时候，我在业余时间自己学习，终于开发出了第一版的主题。在我现在看来它设计的没有那么好看，但是我依然能理解我当时的心情，那时候的我是激动的且富有成就感的。
后来，随着我的技术的进步，我逐步推翻了我之前的设计。这个过程我想也是必然的，随着一个人的成长，他的水平素养得到了逐渐的提升，那么自然会对早期的作品产生想要修改的想法。于是，我开启了我的 v2.0 行动，我使用了 masonry layout 去重构了 Dream，因为我那时候特别喜欢这种不规则的排列结构，我觉得以这样的形式去展示我的文章是很好看的。从这个阶段开始，我的主题逐渐被更多的人发现，也有很多人开始使用我的主题，他们也提出了很多问题，我也会同步进行修复。就这样，Dream 不断加入了更多的参数，在 masonry layout 的基础上有了更多的自定义展示形式。
但后来，由于我丧失了写博客的动力（原因有很多，新冠疫情，工作，人生烦恼等等），Dream 的维护也逐渐地荒废掉了。我曾经多次努力去修改一些地方，但是最后都不了了之（比如我曾经想使用 Bulma 去替换过时且不再维护的 Semantic UI）。就像我丧失了写博客的动力一样，做其他的事情我也很难完整地完成它们，我变得很焦虑，是那种成长的焦虑😐，让你不再能够专心地，心无旁骛地去做一件事情。时间全部被碎片化掉了。
大约是今年（2024）开始吧，当我又一次看到我的博客的时候（之前我自己都已经很少去看了），我想我应该做出一些改变了。我想重新拾起我的博客，也不仅仅是它，我想拾起每一个我半途而废的事情，我的年轻时光已经过去很多了，现在我再也不想去浪费掉它们了。但是想很容易，做起来还是很困难的，我开始重新构建 Dream，我使用了三个新东西：tailwindcss，daisyUI 和 Alpine.js，去替换了那些老旧的技术栈，这些都是我最近几年接触到的新事物，我将它们与 Hugo 结合在了一起，让 Hugo 既保持快速，也拥有了更强的渲染能力。同时我也采用了新的设计，之前我添加了大量的参数，但是我都没有好好思考它们是否是一个“有意义”的修改，作为一个主题，我现在的想法是，开箱即用，而不做出过多的修改，这可能才是一个主题的初衷吧。做耐看耐用的设计，而不是花里胡哨的设计，更能符合我现在的想法，这次的重构也是我 7 年来在审美，设计和技术上的一个总结。
时间来到了现在，7月初，我终于完成了重构，这是一个新的里程碑版本。我不仅完成了主题的修改，也完成了文档的书写。我想要在每个方面都让它变得很精良，这也是我对我自己的承诺，我要完整地去完成每一件事情，这仅仅是后面所有事情的开始。希望你能喜欢 Dream 的最新设计，如果你遇到了使用上的问题，欢迎你前往 [issues](https://github.com/g1eny0ung/hugo-theme-dream/issues) 提出，我会及时地进行查看的。
以下的内容会帮助你从 v2 迁移到 v3，你可以一一对照去进行修改。同样，如果你遇到了迁移方面的问题，也欢迎你随时提出。
</Tabs.Tab>
</Tabs>
## Params Changes
Some params have been changed in v3. You can compare the following sections to make modifications.
### copyright
The old `copyright = ""` has been removed, it used to be used to display copyright on the About page. Now you can add
a copyright file directly into the `content/about` folder, and it will be displayed on the About page:
```bash
hugo new about/copyright.md
```
### Colors and Dark Mode
There're many color params in v2, but in v3, all params below have been removed:
```toml
# background = ""
# linkColor = "seagreen"
# dark mode
# defaultDark = true
# backgroundDark = "black"
# darkLinkColor = "darkseagreen"
# darkNav = true
# dark404 = true
```
Currently, Dream uses daisyUI to provide some out-of-box [themes](https://daisyui.com/docs/themes/)
to use in light and dark mode.
Please view [Light and Dark Mode](light-and-dark-mode.md) for more details.
### Tags and Categories
If you have the following params specified, you can safely remove them:
```toml
# maxTags = 5
# categoriesLimitInHeader = 6 # deprecated
# headerBottomText = "" # deprecated
```
### Social Links
Old specific social links have been removed:
```toml
# twitter = ""
# facebook = ""
# instagram = ""
# mastodon = ""
# linkedin = ""
# github = ""
# stackoverflow = ""
# codepen = ""
```
Refer to [Social Links](social-links.md) for the updated configuration.
### highlightjs
highlight.js has been deprecated in favor of Hugo built-in syntax highlighting,
you can safely remove the following params:
```toml
# highlightjs = true
# highlightjsCDN = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"
# highlightjsExtraLanguages = ["ocaml"]
# highlightjsTheme = "gruvbox-light"
# highlightjsThemeDark = "gruvbox-dark"
```
If you want to custom the syntax highlighting,
please refer to [Syntax Highlighting](syntax-highlighting.md).
> [!NOTE]
>
> Customizing the syntax highlighting is recommended if you have code blocks in your posts.
### Search
The old search has been removed, you can safely remove the following params:
```toml
# search
# enableSearch = true
```
The new way to add search functionality is described in [Search](search.md).
### Other options
Below are some other options that have been removed, you can safely remove them:
```toml
# reversePostAndAside = true
# shareInAside = true
# fixedNav = true
# collapsibleTags = true
# collapseBySummary = true
# disableFlip = true
# hideBackSocialLinks = true
```
## Almost Done
I hope this guide has helped you migrate your project to v3 successfully.
I may ignore some deprecated params, if you encounter any problems,
please feel free to raise them in the [issues](https://github.com/g1eny0ung/hugo-theme-dream/issues),
thank you very much!
Wish you a happy journey with Dream v3! 🎉
================================================
FILE: docs/content/params-configurations.mdx
================================================
# Params Configurations
This doc introduces all the parameters that can be configured in the `[params]`.
## Example
```toml
[params]
# zenMode = true
lightTheme = "emerald"
darkTheme = "forest"
# backgroundImage = "img/global-background.jpg"
# backgroundImageDark = ""
images = ["img/global-background.jpg"]
author = "g1eny0ung"
description = "g1eny0ung 的生活记录～"
avatar = "img/personal/avatar.jpg"
headerTitle = "g1eny0ung's Blog"
motto = "与其感慨路难行，不如马上出发。"
# footerBottomText = ""
rss = true
utterancesRepo = "g1eny0ung/g1eny0ung.github.io"
# valine = true
# LEANCLOUD_APP_ID = ""
# LEANCLOUD_APP_KEY = ""
# waline = true
# walineServer = ""
email = "g1enyy0ung@gmail.com"
siteStartYear = 2016
favicon = "favicon.ico"
# Syntax highlighting
customSyntaxHighlighting = true
# options
stickyNav = true
# reorderNavItems = ["about", "search", "rss", "posts", "categories", "tags"]
# collapseNavItems = ["posts", "categories", "tags"]
# noDefaultSummaryCover = true
showTableOfContents = true
showSummaryCoverInPost = true
imageZoomableInPost = true
showPrevNextPost = true
# reorderShares = ["x", "facebook", "whatsapp"]
[params.advanced]
# customCSS = ["css/custom.css"]
# customJS = []
[params.experimental]
jsDate = true
jsDateFormat = "yyyy年MM月dd日"
```
## Basic
### zenMode
Zen mode is a simple layout that allows you to concentrate on reading and writing.
It uses a simple and clean interface rather than the default masonry layout.
👉 View [Zen Mode](zen-mode.md) for more details.
### Light and Dark Mode
> Required.
You can first add these two parameters to the `[params]`, they are default themes for light and dark mode.
```toml
lightTheme = "emerald"
darkTheme = "forest"
```
For using other themes, view [Light and Dark Mode](light-and-dark-mode.md) for more details.
### backgroundImage
Define a global background image.
### backgroundImageDark
Define a global background image in dark mode.
### images
View https://gohugo.io/templates/internal/#open-graph for more details.
Use the first one of site images as the fallback image for Open Graph.
### author
The author field will be used as:
- `<meta name="author" content="g1eny0ung" />`
- In the summary of post cards
### description
The description field will be used as `<meta name="description" content="g1eny0ung 的生活记录～" />`
### avatar
Your personal avatar.
### headerTitle
The global title of the website.
### motto
A motto that will be displayed below the `headerTitle`. This field is optional.
### footerBottomText
Used to display text at the bottom of the site footer, below the `siteStartYear` field. This field supports HTML.
> [!NOTE]
>
> If this field is not specified, the default text will be displayed as:
>
> `🌱 Powered by Hugo with theme Dream.`
### rss
Enable RSS.
### utterancesRepo
Utterances is a lightweight comments widget built on GitHub Issues.
By setting `utterancesRepo`, each post will have a comment section powered by GitHub Issues.
View https://utteranc.es for more details.
### valine
Valine is a fast, simple & efficient LeanCloud based no backend comment system.
You can view https://valine.js.org/en/index.html for more details.
To make it work, you still need to set these two parameters:
```toml
[params]
LEANCLOUD_APP_ID = ""
LEANCLOUD_APP_KEY = ""
```
To customize Valine, you can create a partial file named `valine.html` in the `layouts/partials` folder.
Here is an [example](https://github.com/g1eny0ung/blog/blob/master/layouts/partials/valine.html).
> [!IMPORTANT]
>
> You still need to set the `valine` parameter to `true` to enable Valine when using a custom partial file.
>
> Other related parameters will be ignored.
### waline
Waline is a simple comment system with backend support fork from Valine.
You can view https://waline.js.org/en/ for more details.
To enable Waline, you need to set the `waline` parameter to `true` and
set the `walineServer` parameter to your Waline server address:
```toml
waline = true
walineServer = "https://your-waline-server.com"
```
If you want to customize Waline,
you can create a partial file named `waline.html` in the `layouts/partials` folder.
Here is an [example](https://github.com/g1eny0ung/blog/blob/master/layouts/partials/waline.html).
> [!IMPORTANT]
>
> You still need to set the `waline` parameter to `true` to enable Waline when using a custom partial file.
>
> Other related parameters will be ignored.
### twikoo
Twikoo is a **simple**, **safe**, **free** comment system.
You can view https://twikoo.js.org/en/ for more details.
To enable Twikoo, you need to set the `params.twikoo.enabled` parameter to `true` and set the following 3 parameters according to the [official manual](https://twikoo.js.org/en/quick-start.html):
```toml
[params.twikoo]
enabled = true
envID = ""
region = ""
lang = ""
```
If you want to customize Twikoo,
you can create a partial file named `twikoo.html` in the `layouts/partials` folder.
Here is an [example](https://github.com/g1eny0ung/blog/blob/master/layouts/partials/twikoo.html).
> [!IMPORTANT]
>
> You still need to set the `params.twikoo.enabled` parameter to `true` to enable Twikoo when using a custom partial file.
>
> Other related parameters will be ignored.
### siteStartYear
Set the start year of your site, it will be displayed as **siteStartYear - currentYear (eg: 2016 - 2020)** in the
site footer.
### favicon
Custom the [favicon](https://en.wikipedia.org/wiki/Favicon) of your site, place it in the `static` folder.
> [!NOTE]
>
> You can also specify the favicon in text format (starting with `<link`), for example:
>
> ```html
> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🌱</text></svg>"></link>
> ```
### customSyntaxHighlighting
View [Syntax highlighting](syntax-highlighting.mdx) for more details.
### stickyNav
Make navbar sticky when scrolling.
### reorderNavItems
Reorder the navigation items.
This parameter is **an array of strings**, the default value is:
```toml
reorderNavItems = ["about", "search", "rss", "posts", "categories", "tags"]
```
> [!NOTE]
>
> The names of these default items are fixed, and they are the navigation items provided by the Dream theme by default.
> [!NOTE]
>
> This parameter also allows you to remove the default navigation items.
> For example, if you don't want to show the `rss` item, you can set the value as:
>
> `reorderNavItems = ["about", "search", "posts", "categories", "tags"]`
For reordering custom navigation items, see [Custom Navbar Items](custom-nav-items.mdx).
### collapseNavItems
> [!WARNING]
>
> In mobile, this parameter will not take effect because all navigation items will be collapsed into a dropdown menu.
Collapse specific navigation items to a dropdown menu.
For example, if you want to collapse the `posts`, `categories`, and `tags` items, you can set the value as:
```toml
collapseNavItems = ["posts", "categories", "tags"]
```
For collapsing custom navigation items, see [Custom Navbar Items](custom-nav-items.md).
### noDefaultSummaryCover
If you are not specify the `cover` field in the front matter of your posts,
a default cover image will be displayed in the summary cards.
If you don't want this behavior, you can set this param to `true`.
### showTableOfContents
Show the table of contents on the single post page.
### showSummaryCoverInPost
Show the summary cover image at the top of the single post page.
### imageZoomableInPost
Make images zoomable in the single post page. This feature uses [medium-zoom](https://github.com/francoischalifour/medium-zoom) under the hood.
> [!NOTE]
>
> For advanced usage, you may want to customize the medium-zoom options. Dream allows you to
> create a partial file named `medium-zoom.html` in the `layouts/partials` folder to replace the
> default behavior. For example, you can put the following code in the `medium-zoom.html` file:
>
> ```html
> <script type="module">
> import mediumZoom from 'https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/+esm'
> mediumZoom('#dream-single-post-content img', {
> // Put your custom options here.
> }) // #dream-single-post-content is the id of the post content.
>
> // You can also further control the logic of zooming images.
> // Like zooming lazy-loaded images.
> </script>
> ```
### showPrevNextPost
Show previous and next post links in the single post page.
### reorderShares
Same as [reorderNavItems](#reorderNavItems), reorder the share buttons in the single post page.
This parameter is **an array of strings**, the default value is:
```toml
reorderShares = ["x", "facebook", "whatsapp"]
```
> [!NOTE]
>
> This parameter also allows you to remove the default share items.
> For example, if you don't want to show the `whatsapp` item, you can set the value as:
>
> `reorderShares = ["x", "facebook"]`
## Advanced
> [!WARNING]
>
> Generally, the following advanced parameters are not necessary to be set. Their main purpose is to further customize
> the entire theme.
### customCSS
Add your custom CSS files **after** the theme CSS files.
For example, create a folder named `css` under `static`, then add `custom.css` into it.
View [Custom Theme](custom.md#css) for more details.
### customJS
Like `customCSS`, add your custom JS files **after** the theme JS files.
View [Custom Theme](custom.md#js) for more details.
## Experimental
> [!WARNING]
>
> The experimental parameters are often not perfect. They have advantages as well as certain disadvantages.
### jsDate
Use [Luxon](https://moment.github.io/luxon/index.html) to replace the Hugo built-in [.Format](https://gohugo.io/methods/time/format/) function. This allows you to define the time format more flexibly.
You may not want to use this param if you want the final date is generated at compile time. After setting this param, all dates will output as an [RFC3339](https://en.wikipedia.org/wiki/ISO_8601) format and all rest format operations will be executed after the page is loaded.
For how to define the format, see below.
### jsDateFormat
Refer to this page (https://moment.github.io/luxon/docs/manual/formatting.html) to define your date format.
For example, `yyyy-MM-dd` represents a date format like `2021-04-17`.
================================================
FILE: docs/content/post-page.mdx
================================================
# Post Page
In [Quick Start](/), we created an example article as below:
{/* prettier-ignore */}
```md
---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# covercaption: a description of the cover image
# images:
# - /img/cover.jpg
categories:
- category1
tags:
- tag1
- tag2
# nolastmod: true
# math: true
draft: true
---
Cut out summary from your post content here.
<!--more-->
The remaining content of your post.
```
There are some parameters in the front matter you can use to customize your post page (and also its summary).
View the below section to learn more about the parameters.
## Parameters
| Parameter | Description | Required | Auto-generated |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
| `title` | Title of the post | Yes | Yes |
| `date` | Date of the post | Yes | Yes |
| `lastmod` | Last modified date of the post | No | Yes |
| `author` | Author of the post, if it's not set, the global `author` will be used. If both are not set, the author will not be displayed. | No | No |
| `avatar` | Author's avatar | No | No |
| `authorlink` | Custom link for the current author | No | No |
| `cover` | Cover image of the post | No | No |
| `covercaption` | Caption for the cover image | No | No |
| `images` | Used in `og:image` meta tag | No | No |
| `categories` | Categories of the post | No | No |
| `tags` | Tags of the post | No | No |
| `nolastmod` | Disable the last modified date | No | No |
## Features
> See https://g1en.site/posts/dream-post-features/ for a live demo.
### Alerts
Dream supports [GitHub Alerts Markdown extension](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) compatible alerts. You can use it in your post like below:
```md
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
```
If you want to change the default title of the alerts, you can add a
[markdown attribute](https://gohugo.io/content-management/markdown-attributes/)
named `text` like below:
{/* prettier-ignore */}
```md
> [!NOTE]
> The default alert title is changed to "Hello".
{text="Hello"}
```
> [!IMPORTANT]
>
> To enable markdown attributes, you still need to set below configuration in your `hugo.toml`:
>
> ```toml
> [markup]
> [markup.goldmark.parser.attribute]
> block = true
> ```
### Mermaid Diagrams
Dream supports [Mermaid](https://mermaid.js.org/) diagrams. You can use it like below:
````mdx filename="Markdown"
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
Rendered as:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
### Mathematics
Dream supports mathematical equations and expressions by using [MathJax](https://www.mathjax.org/).
The implementation of this feature referred to https://gohugo.io/content-management/mathematics/.
To use this feature, you need to enable and configure the Goldmark passthrough extension in your site configuration:
```toml
[markup]
[markup.goldmark]
[markup.goldmark.extensions]
[markup.goldmark.extensions.passthrough]
enable = true
[markup.goldmark.extensions.passthrough.delimiters]
block = [['\[', '\]'], ['$$', '$$']]
inline = [['\(', '\)'], ['$', '$']]
```
And then you can use it like below:
````mdx filename="Markdown"
```math
This is an inline \(a^*=x-b^*\) equation.
This is also an inline $a^*=x-b^*$ equation.
```
```math
These are block equations:
\[
\begin{aligned}
KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\
JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2}) + KL(\hat{y}||\frac{y+\hat{y}}{2}))
\end{aligned}
\]
These are also block equations:
$$a^*=x-b^*$$
$$
a^*=x-b^*
$$
```
````
If you don't want to use the `math` codeblock everywhere, you can also set **`math: true`** in the front matter of your post like below:
```md
---
math: true # YAML syntax
---
```
This allows you to use mathematics with other markdown syntaxes in the whole post, like:
```md
- This is an inline \(a^_=x-b^_\) equation.
- This is also an inline $a^*=x-b^*$ equation.
```
================================================
FILE: docs/content/search.md
================================================
# Search
Dream has a built-in search feature that allows you to search for content on your site.
You can enable it by adding a `_index.md` file to the `content/search` directory.
This file can be empty, but it must exist. Dream will automatically generate the search page (/search) for you.
================================================
FILE: docs/content/social-comments.mdx
================================================
# Social Comments
Currently, Dream supports these comment systems:
- [Disqus](https://disqus.com/)
- [utterances](https://utteranc.es/)
- [Valine](https://valine.js.org/en/)
- [Waline](https://waline.js.org/en/)
- [Twikoo](https://twikoo.js.org/en/)
## Disqus
In `hugo.toml`, set:
```toml
[services]
[services.disqus]
shortname = "..."
```
> [!WARNING]
>
> You may have used `disqusShortname = "..."` before. This is deprecated in Hugo `0.120.0`.
>
> Please upgrade to the new configuration. See https://gohugo.io/methods/site/disqusshortname/ for more details.
Disqus comments will be displayed on the [Post Page](post-page.mdx) and [About Page](about-page.md)
### Compatible with oklch colors
Disqus will detect the color scheme of the website and change the color of the comments accordingly.
However, Disqus does not support [oklch colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) which is used in Dream.
To make Disqus work with Dream, we need to make an extra hack.
First, create a custom css file in `static/css/custom.css`:
```css
[data-theme="emerald"] #disqus_thread {
color-scheme: none;
background-color: #fff;
}
[data-theme="emerald"] #disqus_thread a {
color: #333c4d;
}
[data-theme="forest"] #disqus_thread {
color-scheme: none;
background-color: #171213;
}
[data-theme="forest"] #disqus_thread a {
color: #cbc9ca;
}
```
The `background-color` and `color` can be obtained by inspecting the website in the browser. Follow below steps:
1. Open the devtools in the browser (press `F12`).
2. Click the `html` tag in the `Elements` tab.
3. Then search for `background` in the `Styles` tab.
4. Open the color picker and transform the oklch format to hex format.
5. Copy them to the custom css file.
After finishing above steps, remember to include this custom css file in `customCSS` in `hugo.toml`:
```toml
[params]
[params.advanced]
customCSS = ["css/custom.css"]
```
You may want to change the default themes `emerald` and `forest` to other themes.
Refer to [light-and-dark-mode](./light-and-dark-mode.md) and update `background-color` and `color` accordingly.
## utterances
See: [utterancesRepo](params-configurations.mdx#utterancesrepo)
The utterances only takes effect on the [Post Page](post-page.mdx).
## Valine
See: [valine](params-configurations.mdx#valine)
Valine only takes effect on the [Post Page](post-page.mdx).
## Waline
See: [waline](params-configurations.mdx#waline)
Waline only takes effect on the [Post Page](post-page.mdx).
## Twikoo
See: [twikoo](params-configurations.mdx#twikoo)
Twikoo only takes effect on the [Post Page](post-page.mdx).
================================================
FILE: docs/content/social-links.mdx
================================================
# Social Links
You can render social links on the About page (`layouts/partials/back.html`) using a custom data file.
This file must be named `data/socials.toml` (put it in the `data` folder) and
must contain a array named `socials`. For example:
```toml
# Go to https://ionic.io/ionicons to find available icons.
socials = [
{ href = "https://github.com/g1eny0ung", target="_blank", icon = "logo-github", title = "GitHub" },
{ href = "https://x.com/g1eny0ung", target="_blank", icon = "logo-x", title = "X" },
# { href = "https://facebook.com/g1eny0ung", target="_blank", icon = "logo-facebook", title = "Facebook" },
# { href = "https://instagram.com/g1eny0ung", target="_blank", icon = "logo-instagram", title = "Instagram" },
{ href = "https://www.linkedin.com/in/g1eny0ung", target="_blank", icon = "logo-linkedin", title = "Linkedin" },
{ href = "https://stackoverflow.com/users/5676489/g1eny0ung", target="_blank", icon = "logo-stackoverflow", title = "stack overflow" },
# { href = "https://codepen.io/g1eny0ung", target="_blank", icon = "logo-codepen", title = "Codepen" },
]
```
## Properties
Each table (object) in the array can have the following properties.
### Required
- `href`: The URL of the social link.
- `icon`: The name of the icon. You can find available icons [here](https://ionic.io/ionicons).
### Optional
- `target`: The [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) of the link.
- `title`: The title of the social link.
================================================
FILE: docs/content/summary-images.mdx
================================================
# Summary Images
Each post can have a cover image associated with it. This image is used in the summary view of the post.
You can also display it on the single post page by setting the [`showSummaryCoverInPost`](./params-configurations.mdx#showsummarycoverinpost)
parameter to `true`.
```md
---
cover: /img/build-a-chrome-extension-with-figwheel-main.png
---
```
> [!TIP]
>
> For a better visualization, it's recommended to set a cover image for each post (although it's not mandatory). I
> personally go to [Unsplash](https://unsplash.com/) or [Pexels](https://www.pexels.com/) to select covers (choose the small size).
>
> If you don't specify a cover image, Dream will use one of the predefined images as a placeholder in the summary card.
> To disable this behavior, set [`noDefaultSummaryCover`](./params-configurations.mdx#nodefaultsummarycover) to `true`.
## Image Optimization
> [!IMPORTANT]
>
> Hugo >= 0.97.0 is required.
Dream will transform summary images to webp format automatically if you are using
[page bundles](https://gohugo.io/content-management/page-bundles/) to organize your posts.
This will make the first load of your site faster.
The way it works is that Dream will look for the presence of the specified cover image
in the [page resources](https://gohugo.io/content-management/page-resources/).
If it exists, the image is processed.
For example, you can organize your posts like this:
```txt
content
├── posts
│ ├── post-1
│ │ ├── index.md
│ │ └── cover.jpg
```
Then in the front matter of `index.md`:
```md
---
cover: cover.jpg
images:
- cover.jpg
---
```
================================================
FILE: docs/content/syntax-highlighting.mdx
================================================
# Syntax Highlighting
If you don't like the default syntax highlighting provided by Hugo,
Setting `customSyntaxHighlighting = true` will enable the custom syntax highlighting provided by Chroma.
> [!IMPORTANT]
>
> You still need to set below configuration in your `hugo.toml`:
>
> ```toml
> [markup]
> [markup.highlight]
> noClasses = false
> ```
>
> This makes sure that the generated HTML uses classes for syntax highlighting, not inline styles.
Then you need to specify what themes you want to use and generate them. They need to follow below established rules:
- You must generate separate themes for light and dark modes
- They must be named `syntax-light.css` and `syntax-dark.css`
- They must be in the `assets/css` directory
For example, you can generate them using the following command:
```bash
# In your project directory.
hugo gen chromastyles --style=github > assets/css/syntax-light.css
hugo gen chromastyles --style=github-dark > assets/css/syntax-dark.css
```
Please refer to the [official documentation](https://gohugo.io/content-management/syntax-highlighting/) for more information.
================================================
FILE: docs/content/website-analytics.mdx
================================================
# Website Analytics
Now, Dream only support [Google Analytics](https://www.google.com/analytics/).
In `hugo.toml`, set:
```toml
[services]
[services.googleAnalytics]
ID = '...'
```
> [!WARNING]
>
> You may have used `googleAnalytics = "..."` before. This is deprecated in Hugo `0.120.0`.
>
> Please upgrade to the new configuration. See https://gohugo.io/methods/site/googleanalytics/ for more details.
================================================
FILE: docs/content/zen-mode.mdx
================================================
# Zen Mode
What is Zen mode?
Zen mode is a simple layout that allows you to concentrate on reading and writing.
It is a minimalist design that removes all distractions from the page.
This mode is more suitable for people who prefer a simple and clean interface
rather than the default masonry layout.
Here is a demo of the Zen mode: https://g1en-site-zen-mode-preview.netlify.app/.
And below is a screenshot of the Zen mode:
<div style={{ width: '75%', marginTop: '1.5rem' }}></div>
## Enable Zen Mode
To enable Zen mode, just add `zenMode = true` to the configuration file.
```toml
[params]
zenMode = true
```
================================================
FILE: docs/mdx-components.jsx
================================================
import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs' // nextra-theme-blog or your custom theme
// Get the default MDX components
const themeComponents = getThemeComponents()
// Merge components
export function useMDXComponents(components) {
return {
...themeComponents,
...components,
}
}
================================================
FILE: docs/next.config.mjs
================================================
import nextra from 'nextra'
import path from 'path'
const withNextra = nextra({})
export default withNextra({
turbopack: {
root: path.resolve('./'),
},
output: 'export',
images: {
unoptimized: true,
},
})
================================================
FILE: docs/package.json
================================================
{
"name": "docs",
"version": "1.0.0",
"description": "",
"type": "module",
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^16.1.6",
"nextra": "^4.6.1",
"nextra-theme-docs": "^4.6.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@theguild/remark-mermaid": "^0.3.0"
}
}
================================================
FILE: docs/public/.nojekyll
================================================
================================================
FILE: hugo.example.toml
================================================
baseurl = "https://example.com"
defaultContentLanguage = "en"
languageCode = "en"
title = "Hugo Theme Dream"
theme = "dream"
# [services]
# [services.disqus]
# shortname = ""
# [services.googleAnalytics]
# ID = ""
[params]
# zenMode = true
lightTheme = "emerald"
darkTheme = "forest"
# backgroundImage = "img/global-background.jpg"
# backgroundImageDark = ""
author = "Dream"
# description = ""
# avatar = "img/avatar.png"
headerTitle = "Hugo Theme Dream"
# motto = ""
# footerBottomText = ""
# rss = true
# utterancesRepo = ""
# valine = true
# LEANCLOUD_APP_ID = ""
# LEANCLOUD_APP_KEY = ""
# waline = true
# walineServer = ""
# email = ""
siteStartYear = 2016
# favicon = "favicon.ico"
# Syntax highlighting
# customSyntaxHighlighting = true
# options
# stickyNav = true
# reorderNavItems = ["about", "search", "rss", "posts", "categories", "tags"]
# collapseNavItems = ["posts", "categories", "tags"]
# noDefaultSummaryCover = true
# showTableOfContents = true
# showSummaryCoverInPost = true
# imageZoomableInPost = true
# showPrevNextPost = true
# reorderShares = ["x", "facebook", "whatsapp"]
# [params.navItems]
# [params.twikoo]
# enabled = true
# envID = ""
# region = ""
# lang = ""
# [params.advanced]
# customCSS = ["css/custom.css"]
# customJS = []
# [params.experimental]
# jsDate = true
# jsDateFormat = "yyyy年MM月dd日"
================================================
FILE: i18n/ar.toml
================================================
[home]
other = "الصفحة الرئيسية"
[backToHome]
other = "العودة إلى الصفحة الرئيسية"
[flip]
other = "!اقلب"
[archives]
other = "أرشيف"
[allTags]
other = "كل العلامات"
[tag]
one = "1 علامة"
other = "{{ .Count }} علامتان"
[allCategories]
other = "جميع الفئات"
[category]
one = "1 فئة"
other = "{{ .Count }} فئات"
[article]
one = "1 مقال"
other = "{{ .Count }} مقالات"
[socialLinks]
other = "روابط وسائل التواصل الاجتماعي"
[minuteRead]
one = " قراءة دقيقة"
other = " ست دقائق للقر"
[updatedAt]
other = "تم التحديث في"
[prevPage]
other = "الصفحة السابقة"
[nextPage]
other = "الصفحة التالية"
[search]
other = "يبحث"
================================================
FILE: i18n/bn.toml
================================================
[home]
other = "হোম"
[backToHome]
other = "হোমে ফেরত"
[flip]
other = "ফ্লিপ!"
[archives]
other = "আর্কাইভ"
[allTags]
other = "সকল ট্যাগ"
[tag]
one = "একটি ট্যাগ"
other = "{{ .Count }}টি ট্যাগ"
[allCategories]
other = "সকল ক্যাটাগরি"
[category]
one = "একটি ক্যাটাগরি"
other = "{{ .Count }}টি ক্যাটাগরি"
[article]
one = "একটি আর্টিকেল"
other = "{{ .Count }}টি আর্টিকেল"
[socialLinks]
other = "সোশাল লিঙ্কস"
[minuteRead]
one = " মিনিট"
other = " মিনিট"
[updatedAt]
other = "সর্বশেষ আপডেট"
[prevPage]
other = "আগের পেইজ"
[nextPage]
other = "পরের পেইজ"
[search]
other = "সার্চ"
================================================
FILE: i18n/ca.toml
================================================
[home]
other = "Pàgina inicial"
[backToHome]
other = "Tornar a la pàgina d'inici"
[flip]
other = "Capgirar!"
[archives]
other = "Arxiu"
[allTags]
other = "Totes les etiquetes"
[tag]
one = "1 etiqueta"
other = "{{ .Count }} etiquetes"
[allCategories]
other = "Totes les categories"
[category]
one = "1 categoria"
other = "{{ .Count }} categories"
[article]
one = "1 article"
other = "{{ .Count }} articles"
[socialLinks]
other = "Enllaços de xarxes socials"
[minuteRead]
one = " minut de lectura"
other = " minuts de lectura"
[updatedAt]
other = "Actualització a"
[prevPage]
other = "Pàgina anterior"
[nextPage]
other = "Pàgina següent"
[search]
other = "Buscar"
================================================
FILE: i18n/de.toml
================================================
[home]
other = "Start"
[backToHome]
other = "Zurück zum Start"
[flip]
other = "Flip it!"
[archives]
other = "Archiv"
[allTags]
other = "Alle Tags"
[tag]
one = "1 tag"
other = "{{ .Count }} Tags"
[allCategories]
other = "Alle Kategorien"
[category]
one = "1 Kategorie"
other = "{{ .Count }} Kategorien"
[article]
one = "1 Artikel"
other = "{{ .Count }} Artikel"
[socialLinks]
other = "Social Links"
[minuteRead]
other = " Minuten Lesezeit"
[updatedAt]
other = "Aktualisiert "
[prevPage]
other = "Vorherige Seite"
[nextPage]
other = "Nächste Seite"
================================================
FILE: i18n/en.toml
================================================
# Alerts
note = "Note"
tip = "Tip"
important = "Important"
warning = "Warning"
caution = "Caution"
home = "Home"
backToHome = "Back to home"
flip = "Flip it!"
about = "About"
search = "Search"
prevPage = "Previous page"
nextPage = "Next page"
archives = "Archives"
allCategories = "All Categories"
allTags = "All Tags"
minuteRead = " minute read"
updatedAt = "Updated at"
socialLinks = "Social Links"
[article]
one = "1 article"
other = "{{ .Count }} articles"
[category]
one = "1 category"
other = "{{ .Count }} categories"
[tag]
one = "1 tag"
other = "{{ .Count }} tags"
================================================
FILE: i18n/es.toml
================================================
# Alertas
note = "Nota"
tip = "Consejo"
important = "Importante"
warning = "Advertencia"
caution = "Cuidado"
home = "Inicio"
backToHome = "Volver a inicio"
flip = "Voltear!"
about = "Acerca"
search = "Buscar"
prevPage = "Página anterior"
nextPage = "Página siguiente"
archives = "Archivos"
allCategories = "Todas las categorías"
allTags = "Todas las etiquetas"
updatedAt = "Actualizado en"
socialLinks = "Enlaces sociales"
[minuteRead]
one = " minuto de lectura"
other = " minutos de lectura"
[article]
one = "1 artículo"
other = "{{ .Count }} artículos"
[category]
one = "1 categoría"
other = "{{ .Count }} categorías"
[tag]
one = "1 etiqueta"
other = "{{ .Count }} etiquetas"
================================================
FILE: i18n/fr.toml
================================================
note = "Note"
tip = "Astuce"
important = "Important"
warning = "Attention"
caution = "Prudence"
home = "Accueil"
backToHome = "Revenir à l'accueil"
flip = "Retourne ça !"
about = "À propos"
search = "Rechercher"
prevPage = "Page précédente"
nextPage = "Page suivante"
archives = "Archives"
allCategories = "Toutes les catégories"
allTags = "Tous les étiquettes"
updatedAt = "Mise à jour le"
socialLinks = "Liens sociaux"
[minuteRead]
one = " minute de lecture"
other = " minutes de lecture"
[article]
one = "1 article"
other = "{{ .Count }} articles"
[category]
one = "1 catégorie"
other = "{{ .Count }} catégories"
[tag]
one = "1 étiquette"
other = "{{ .Count }} étiquettes"
================================================
FILE: i18n/he.toml
================================================
[home]
other = "דף הבית"
[backToHome]
other = "חזור לדף הבית"
[flip]
other = "!להפוך"
[archives]
other = "ארכיון"
[allTags]
other = "כל התגים"
[tag]
one = "1 תג"
other = "תגים {{ .Count }}"
[allCategories]
other = "כל הקטגוריות"
[category]
one = "1 קטגוריה"
other = "קטגוריות {{ .Count }}"
[article]
one = "מאמר 1"
other = "מאמרים {{ .Count }}"
[socialLinks]
other = "קישורים למדיה חברתית"
[minuteRead]
one = " דקה לקרוא"
other = " דקות לקריאה"
[updatedAt]
other = "עודכן בשעה"
[prevPage]
other = "עמוד קודם"
[nextPage]
other = "עמוד הבא"
[search]
other = "לחפש"
================================================
FILE: i18n/it.toml
================================================
[home]
other = "Home"
[backToHome]
other = "Torna alla home"
[flip]
other = "Flip it!"
[about]
other = "Chi siamo"
[archives]
other = "Archivi"
[allTags]
other = "Tutti i tag"
[tag]
one = "Un tag"
other = "{{ .Count }} tag"
[allCategories]
other = "Tutte le categorie"
[category]
one = "Una categoria"
other = "{{ .Count }} categorie"
[article]
one = "Un articolo"
other = "{{ .Count }} articoli"
[socialLinks]
other = "Social"
[minuteRead]
one = " minuto"
other = " minuti"
[updatedAt]
other = "Aggiornato al"
[prevPage]
other = "Pagina precedente"
[nextPage]
other = "Pagina successiva"
[search]
other = "Cerca"
================================================
FILE: i18n/ja.toml
================================================
[home]
other = "Home"
[backToHome]
other = "Back to home"
[flip]
other = "Flip it!"
[about]
other = "About"
[archives]
other = "アーカイブ"
[allTags]
other = "タグ一覧"
[tag]
one = "1タグ"
other = "{{ .Count }}タグ"
[allCategories]
other = "カテゴリー一覧"
[category]
one = "1カテゴリー"
other = "{{ .Count }}カテゴリー"
[article]
one = "1記事"
other = "{{ .Count }}記事"
[socialLinks]
other = "SNS"
[minuteRead]
other = "分で読めます"
[updatedAt]
other = "更新日時"
[prevPage]
other = "前へ"
[nextPage]
other = "次へ"
[search]
other = "検索"
================================================
FILE: i18n/lv.toml
================================================
[home]
other = "Mājas lapa"
[backToHome]
other = "Atpakaļ uz sākumlapu"
[flip]
other = "Uzsist!"
[archives]
other = "Arhīvs"
[allTags]
other = "Visi tagi"
[tag]
one = "1 tagu"
other = "{{ .Count }} tagi"
[allCategories]
other = "Visas kategorijas"
[category]
one = "1 kategorija"
other = "{{ .Count }} kategorijas"
[article]
one = "1 raksts"
other = "{{ .Count }} raksti"
[socialLinks]
other = "Saites sociālajos tīklos"
[minuteRead]
one = " minūte lasīta"
other = " minūtes lasīts"
[updatedAt]
other = "Atjaunināts plkst"
[prevPage]
other = "Iepriekšējā lapa"
[nextPage]
other = "Nākamā lapaspuse"
[search]
other = "Meklēt"
================================================
FILE: i18n/pt.toml
================================================
note = "Nota"
tip = "Dica"
important = "Importante"
warning = "Aviso"
caution = "Cuidado"
home = "Página inicial"
backToHome = "Voltar para a página inicial"
flip = "Girar!"
about = "Sobre"
search = "Pesquisar"
prevPage = "Página anterior"
nextPage = "Próxima página"
archives = "Arquivos"
allCategories = "Todas as categorias"
allTags = "Todas as tags"
updatedAt = "Atualizado"
socialLinks = "Links de redes sociais"
[minuteRead]
one = " minuto de leitura"
other = " minutos de leitura"
[article]
one = "1 artigo"
other = "{{ .Count }} artigos"
[category]
one = "1 categoria"
other = "{{ .Count }} categorias"
[tag]
one = "1 tag"
other = "{{ .Count }} tags"
================================================
FILE: i18n/ro.toml
================================================
[home]
other = "Pagina principala"
[backToHome]
other = "Înapoi la pagina de start"
[flip]
other = "Întoarceți!"
[archives]
other = "Arhive"
[allTags]
other = "Toate etichetele"
[tag]
one = "1 etichetă"
other = "{{ .Count }} etichete"
[allCategories]
other = "Toate categoriile"
[category]
one = "1 categorie"
other = "{{ .Count }} categorii"
[article]
one = "1 articol"
other = "{{ .Count }} articole"
[socialLinks]
other = "Link-uri de social media"
[minuteRead]
one = " minut de citit"
other = " minute de citire"
[updatedAt]
other = "Actualizat la"
[prevPage]
other = "Pagina precedentă"
[nextPage]
other = "Pagina următoare"
[search]
other = "Căutare"
================================================
FILE: i18n/ru.toml
================================================
[home]
other = "Главная"
[backToHome]
other = "На главную"
[flip]
other = "Повернуть!"
[archives]
other = "Архивы"
[allTags]
other = "Все теги"
[tag]
one = "1 тег"
few = "{{ .Count }} тега"
many = "{{ .Count }} тегов"
other = "{{ .Count }} тегов"
[allCategories]
other = "Все категории"
[category]
one = "1 категория"
few = "{{ .Count }} категории"
many = "{{ .Count }} категорий"
other = "{{ .Count }} категорий"
[article]
one = "1 статья"
few = "{{ .Count }} статьи"
many = "{{ .Count }} статей"
other = "{{ .Count }} статей"
[socialLinks]
other = "Социальные сети"
[minuteRead]
one = " минута чтения"
few = " минуты чтения"
many = " минут чтения"
other = " минут чтения"
[updatedAt]
other = "Обновлено"
[prevPage]
other = "Предыдущая"
[nextPage]
other = "Следующая"
[search]
other = "Поиск"
================================================
FILE: i18n/sl.toml
================================================
[home]
other = "Domača stran"
[backToHome]
other = "Vrnite se na domačo stran"
[flip]
other = "Obrniti!"
[archives]
other = "Arhiv"
[allTags]
other = "Vse oznake"
[tag]
one = "1 oznaka"
other = "{{ .Count }} oznaki"
[allCategories]
other = "Vse kategorije"
[category]
one = "1 kategorija"
other = "{{ .Count }} kategoriji"
[article]
one = "1 članek"
other = "{{ .Count }} članka"
[socialLinks]
other = "Povezave do družabnih medijev"
[minuteRead]
one = " minuta za branje"
other = " minuti za branje"
[updatedAt]
other = "Posodobljeno ob"
[prevPage]
other = "Prejšnja stran"
[nextPage]
other = "Naslednja stran"
[search]
other = "Iskanje"
================================================
FILE: i18n/tr.toml
================================================
[home]
other = "Ana Sayfa"
[backToHome]
other = "Ana sayfaya geri dön"
[flip]
other = "Çevir!"
[archives]
other = "Arşivler"
[allTags]
other = "Tüm etiketler"
[tag]
one = "1 etiket"
other = "{{ .Count }} etiket"
[allCategories]
other = "Tüm kategoriler"
[category]
one = "1 kategori"
other = "{{ .Count }} kategori"
[article]
one = "1 makale"
other = "{{ .Count }} makale"
[socialLinks]
other = "Sosyal Bağlantılar"
[minuteRead]
one = " dakika okuma süresi"
other = " dakika okuma süresi"
[updatedAt]
other = "Güncellenme tarihi"
[prevPage]
other = "Önceki sayfa"
[nextPage]
other = "Sonraki sayfa"
[search]
other = "Arama"
================================================
FILE: i18n/vi.toml
================================================
# Alerts
note = "Ghi chú"
tip = "Mẹo vặt"
important = "Quan trọng"
warning = "Cảnh báo"
caution = "Thận trọng"
home = "Trang chủ"
backToHome = "Quay lại trang chủ"
flip = "Lật nó!"
about = "Giới thiệu"
search = "Tìm kiếm"
prevPage = "Trang trước"
nextPage = "Trang tiếp theo"
archives = "Lưu trữ"
allCategories = "Tất cả danh mục"
allTags = "Tất cả thẻ"
minuteRead = " phút đọc"
updatedAt = "Cập nhật lúc"
socialLinks = "Liên kết xã hội"
[article]
one = "1 bài viết"
other = "{{ .Count }} bài viết"
[category]
one = "1 danh mục"
other = "{{ .Count }} danh mục"
[tag]
one = "1 thẻ"
other = "{{ .Count }} thẻ"
================================================
FILE: i18n/zh.toml
================================================
note = "注意"
tip = "提示"
important = "重要"
warning = "警告"
caution = "小心"
home = "首页"
backToHome = "返回首页"
flip = "翻转一下！"
about = "关于"
search = "搜索"
prevPage = "上一页"
nextPage = "下一页"
archives = "归档"
allCategories = "所有分类"
allTags = "所有标签"
minuteRead = "分钟阅读"
updatedAt = "更新于"
socialLinks = "社交链接"
[article]
one = "1篇文章"
other = "{{ .Count }}篇文章"
[category]
one = "1分类"
other = "{{ .Count }}分类"
[tag]
one = "1标签"
other = "{{ .Count }}标签"
================================================
FILE: layouts/404.html
================================================
{{ define "title" }}404 Not Found{{ end }}
{{ define "main" }}
<div class="h-[60vh] mx-auto px-4 flex flex-col justify-center items-center prose dark:prose-invert">
<h1>Oops...You are lost in dream.</h1>
<p>Don't worry though, click the button below to wake up.</p>
<button class="btn my-5" @click="window.location.href = '{{ site.BaseURL }}'">{{ T "backToHome" }}</button>
</div>
{{ end }}
================================================
FILE: layouts/_default/_markup/render-blockquote.html
================================================
{{ $icons := dict
"note" "information-circle-outline"
"tip" "bulb-outline"
"important" "sparkles-outline"
"warning" "warning-outline"
"caution" "alert-circle-outline"
}}
{{ if eq .Type "alert" }}
<blockquote class="dream-alert {{ .AlertType }}">
<p class="heading">
<ion-icon name="{{ (index $icons .AlertType) }}"></ion-icon>
{{- or .Attributes.text (T .AlertType) (title .AlertType) -}}
</p>
{{ .Text | safeHTML }}
</blockquote>
{{ else }}
<blockquote>
{{ .Text | safeHTML }}
</blockquote>
{{ end }}
================================================
FILE: layouts/_default/_markup/render-codeblock-math.html
================================================
<p class="mathjax">
{{- .Inner | safeHTML -}}
</p>
{{ .Page.Store.Set "hasMathjax" true }}
================================================
FILE: layouts/_default/_markup/render-codeblock-mermaid.html
================================================
<pre class="mermaid">
{{ .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
================================================
FILE: layouts/_default/_markup/render-image.html
================================================
{{- if .IsBlock -}}
<figure>
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
>
{{- with .Title }}<figcaption class="text-sm italic text-center mt-2">{{ . }}</figcaption>{{ end -}}
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- end -}}
================================================
FILE: layouts/_default/_markup/render-link.html
================================================
{{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
{{- if $u.IsAbs }} target="_blank"{{ end -}}
>
{{- with .Text }}{{ . }}{{ end -}}
</a>
================================================
FILE: layouts/_default/baseof.html
================================================
<!DOCTYPE html>
<html lang="{{ site.LanguageCode }}"
x-data
:class="$store.darkMode.isDark() ? 'dark' : 'light'"
:data-theme="$store.darkMode.theme()">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ block "title" . -}} {{ T "home" }} {{- end }} | {{ site.Title }}</title>
{{ partial "head.html" . }}
{{ block "css" . }} {{ end }}
{{ range site.Params.Advanced.customCSS }}
<link rel="stylesheet" href="{{ . | relURL }}" />
{{ end }}
<script>
window.lightTheme = '{{ site.Params.lightTheme }}'
window.darkTheme = '{{ site.Params.darkTheme }}'
;(function() {
const isDark = ('hugo-theme-dream-is-dark' in localStorage)
? window.localStorage.getItem('hugo-theme-dream-is-dark') === 'y'
: window.matchMedia('(prefers-color-scheme: dark)').matches
const theme = isDark ? window.darkTheme : window.lightTheme
document.documentElement.setAttribute('data-theme', theme)
})()
</script>
gitextract_ef1mvqor/ ├── .editorconfig ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yaml │ │ └── feature_request.yaml │ └── workflows/ │ └── docs.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── archetypes/ │ ├── about.md │ ├── posts/ │ │ └── index.md │ └── posts.md ├── assets/ │ ├── css/ │ │ └── output.css │ └── js/ │ ├── grid.js │ ├── main.js │ └── toc.js ├── config.toml ├── decapCMS/ │ ├── config.yml │ └── index.html ├── docs/ │ ├── app/ │ │ ├── AdSense.jsx │ │ ├── [[...mdxPath]]/ │ │ │ └── page.jsx │ │ └── layout.jsx │ ├── content/ │ │ ├── CHANGELOG.md │ │ ├── _meta.js │ │ ├── about-page.md │ │ ├── adsense.mdx │ │ ├── archives-page.md │ │ ├── base-configurations.mdx │ │ ├── custom-nav-items.mdx │ │ ├── custom.mdx │ │ ├── decap-cms.md │ │ ├── i18n.md │ │ ├── index.mdx │ │ ├── light-and-dark-mode.mdx │ │ ├── migrate-to-v3.mdx │ │ ├── params-configurations.mdx │ │ ├── post-page.mdx │ │ ├── search.md │ │ ├── social-comments.mdx │ │ ├── social-links.mdx │ │ ├── summary-images.mdx │ │ ├── syntax-highlighting.mdx │ │ ├── website-analytics.mdx │ │ └── zen-mode.mdx │ ├── mdx-components.jsx │ ├── next.config.mjs │ ├── package.json │ └── public/ │ └── .nojekyll ├── hugo.example.toml ├── i18n/ │ ├── ar.toml │ ├── bn.toml │ ├── ca.toml │ ├── de.toml │ ├── en.toml │ ├── es.toml │ ├── fr.toml │ ├── he.toml │ ├── it.toml │ ├── ja.toml │ ├── lv.toml │ ├── pt.toml │ ├── ro.toml │ ├── ru.toml │ ├── sl.toml │ ├── tr.toml │ ├── vi.toml │ └── zh.toml ├── layouts/ │ ├── 404.html │ ├── _default/ │ │ ├── _markup/ │ │ │ ├── render-blockquote.html │ │ │ ├── render-codeblock-math.html │ │ │ ├── render-codeblock-mermaid.html │ │ │ ├── render-image.html │ │ │ └── render-link.html │ │ ├── baseof.html │ │ ├── single.html │ │ ├── summary.html │ │ ├── term.html │ │ ├── terms.html │ │ └── zen-summary.html │ ├── index.html │ ├── partials/ │ │ ├── author.html │ │ ├── back.html │ │ ├── commentSystemHeads.html │ │ ├── commentSystems.html │ │ ├── disqus.html │ │ ├── footer.html │ │ ├── footerLeft.html │ │ ├── footerRight.html │ │ ├── head.html │ │ ├── luxon.html │ │ ├── mathjax.html │ │ ├── nav.html │ │ ├── navCustomItems.html │ │ ├── navMobileMenu.html │ │ ├── paginator.html │ │ ├── renderMobileNavItem.html │ │ ├── renderNavItem.html │ │ ├── scripts.html │ │ ├── share.html │ │ ├── socials.html │ │ └── zen-back.html │ └── section/ │ ├── posts.html │ └── search.html ├── package.json ├── src/ │ ├── input.css │ └── js/ │ ├── grid.js │ ├── main.js │ └── toc.js ├── tailwind.config.js └── theme.toml
SYMBOL INDEX (22 symbols across 9 files)
FILE: assets/js/grid.js
function initGrid (line 3) | function initGrid() {
FILE: assets/js/toc.js
function _toConsumableArray (line 3) | function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterab...
function _nonIterableSpread (line 4) | function _nonIterableSpread() { throw new TypeError("Invalid attempt to ...
function _unsupportedIterableToArray (line 5) | function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == ty...
function _iterableToArray (line 6) | function _iterableToArray(r) { if ("undefined" != typeof Symbol && null ...
function _arrayWithoutHoles (line 7) | function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLike...
function _arrayLikeToArray (line 8) | function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r...
function tocHighlighter (line 9) | function tocHighlighter() {
FILE: docs/app/AdSense.jsx
function AdSense (line 6) | function AdSense() {
FILE: docs/app/[[...mdxPath]]/page.jsx
function generateMetadata (line 6) | async function generateMetadata(props) {
function Page (line 14) | async function Page(props) {
FILE: docs/app/layout.jsx
function RootLayout (line 45) | async function RootLayout({ children }) {
FILE: docs/mdx-components.jsx
function useMDXComponents (line 7) | function useMDXComponents(components) {
FILE: src/js/grid.js
function initGrid (line 1) | function initGrid() {
FILE: src/js/main.js
method init (line 3) | init() {
method isDark (line 24) | isDark() {
method theme (line 27) | theme() {
method icon (line 36) | icon() {
method toggle (line 40) | toggle(status) {
method changeSyntaxHighlightingTheme (line 53) | changeSyntaxHighlightingTheme() {
method setThemeForUtterances (line 65) | setThemeForUtterances() {
FILE: src/js/toc.js
function tocHighlighter (line 1) | function tocHighlighter() {
Condensed preview — 110 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (264K chars).
[
{
"path": ".editorconfig",
"chars": 229,
"preview": "# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n[*]\nindent_style = space\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 721,
"preview": "# These are supported funding model platforms\n\ngithub: g1eny0ung # Replace with up to 4 GitHub Sponsors-enabled username"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yaml",
"chars": 970,
"preview": "name: Bug report\ndescription: Create a report to help us improve\ntitle: '[Bug]: '\nlabels:\n - bug\nassignees:\n - g1eny0u"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.yaml",
"chars": 1080,
"preview": "name: Feature request\ndescription: Suggest an idea for this project\ntitle: '[Feature]: '\nlabels:\n - feature\nassignees:\n"
},
{
"path": ".github/workflows/docs.yml",
"chars": 1942,
"preview": "# Sample workflow for building and deploying a Next.js site to GitHub Pages\n#\n# To get started with Next.js see: https:/"
},
{
"path": ".gitignore",
"chars": 73,
"preview": ".DS_Store\n\nnode_modules\npackage-lock.json\nyarn.lock\n\ndocs/.next\ndocs/out\n"
},
{
"path": ".prettierrc",
"chars": 64,
"preview": "{\n \"semi\": false,\n \"singleQuote\": true,\n \"printWidth\": 120\n}\n"
},
{
"path": "LICENSE",
"chars": 1065,
"preview": "MIT License\n\nCopyright (c) 2019 Yue Yang\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "README.md",
"chars": 1644,
"preview": "# 🌱 hugo-theme-dream\n\n\n![GitHub Lic"
},
{
"path": "archetypes/about.md",
"chars": 96,
"preview": "---\ntitle: {{ replace .TranslationBaseName \"-\" \" \" | title }}\ndate: {{ .Date }}\ndraft: true\n---\n"
},
{
"path": "archetypes/posts/index.md",
"chars": 415,
"preview": "---\ntitle: {{ replace .File.ContentBaseName \"-\" \" \" | title }}\ndate: {{ .Date }}\nlastmod: {{ .Date }}\nauthor: Author Nam"
},
{
"path": "archetypes/posts.md",
"chars": 477,
"preview": "---\ntitle: {{ replace .File.ContentBaseName \"-\" \" \" | title }}\ndate: {{ .Date }}\nlastmod: {{ .Date }}\nauthor: Author Nam"
},
{
"path": "assets/css/output.css",
"chars": 96314,
"preview": "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, ut"
},
{
"path": "assets/js/grid.js",
"chars": 398,
"preview": "\"use strict\";\n\nfunction initGrid() {\n document.querySelectorAll('.dream-grid').forEach(function (grid) {\n var msnry "
},
{
"path": "assets/js/main.js",
"chars": 2091,
"preview": "\"use strict\";\n\ndocument.addEventListener('alpine:init', function () {\n Alpine.store('darkMode', {\n init: function in"
},
{
"path": "assets/js/toc.js",
"chars": 2994,
"preview": "\"use strict\";\n\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedItera"
},
{
"path": "config.toml",
"chars": 61,
"preview": "[module]\n[module.hugoVersion]\nmin = \"0.97.0\"\nextended = true\n"
},
{
"path": "decapCMS/config.yml",
"chars": 1970,
"preview": "backend:\n name: git-gateway\n branch: master\npublish_mode: editorial_workflow\nmedia_folder: static/img\npublic_folder: /"
},
{
"path": "decapCMS/index.html",
"chars": 626,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "docs/app/AdSense.jsx",
"chars": 753,
"preview": "'use client'\n\nimport { useEffect } from 'react'\nimport Script from 'next/script'\n\nexport default function AdSense() {\n "
},
{
"path": "docs/app/[[...mdxPath]]/page.jsx",
"chars": 743,
"preview": "import { generateStaticParamsFor, importPage } from 'nextra/pages'\nimport { useMDXComponents as getMDXComponents } from "
},
{
"path": "docs/app/layout.jsx",
"chars": 2503,
"preview": "import { Layout, Navbar, Footer } from 'nextra-theme-docs'\nimport { Banner, Head } from 'nextra/components'\nimport { get"
},
{
"path": "docs/content/CHANGELOG.md",
"chars": 8438,
"preview": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Change"
},
{
"path": "docs/content/_meta.js",
"chars": 876,
"preview": "export default {\n 'docs-v2': {\n title: 'Docs (v2)',\n type: 'page',\n href: 'https://hugo-theme-dream-docs-v2.ne"
},
{
"path": "docs/content/about-page.md",
"chars": 880,
"preview": "# About Page\n\nIn [Quick Start](/), we added **About Me** as below:\n\n```bash\nhugo new about/me.md\n```\n\n```md\n---\ntitle: A"
},
{
"path": "docs/content/adsense.mdx",
"chars": 1357,
"preview": "# Google Adsense\n\n> [!WARNING]\n>\n> Currently, this feature is still experimental. It's only take effect on the [Post Pag"
},
{
"path": "docs/content/archives-page.md",
"chars": 931,
"preview": "# Archives Page\n\nArchives page is a list of all posts by timeline. It will be rendered as `/posts`.\n\n## Custom Header\n\nY"
},
{
"path": "docs/content/base-configurations.mdx",
"chars": 1008,
"preview": "# Base Configurations\n\n> [!NOTE]\n>\n> This doc only introduces some settings that are commonly used in most Hugo sites.\n>"
},
{
"path": "docs/content/custom-nav-items.mdx",
"chars": 1606,
"preview": "# Append Custom Items to the Navbar\n\nThis doc will guide you on how to append custom items to the navbar.\n\nYou can add a"
},
{
"path": "docs/content/custom.mdx",
"chars": 1676,
"preview": "# Custom Theme\n\nThis doc describes how to add `CSS` and `JS` to customize the theme.\n\nBefore customization, you need to "
},
{
"path": "docs/content/decap-cms.md",
"chars": 268,
"preview": "# Decap CMS\n\nDream provides a predefined configuration for [Decap CMS](https://decapcms.org/).\nIt locates in the `decapC"
},
{
"path": "docs/content/i18n.md",
"chars": 384,
"preview": "# i18n\n\ni18n means [internationalization](https://en.wikipedia.org/wiki/Internationalization_and_localization).\n\nDream s"
},
{
"path": "docs/content/index.mdx",
"chars": 5099,
"preview": "# Quick Start\n\n> [!NOTE]\n>\n> I assume you have already read [Hugo Getting Started](https://gohugo.io/getting-started/),\n"
},
{
"path": "docs/content/light-and-dark-mode.mdx",
"chars": 706,
"preview": "# Light and Dark Mode\n\nFrom Dream v3, it uses daisyUI to provide some out-of-box [themes](https://daisyui.com/docs/theme"
},
{
"path": "docs/content/migrate-to-v3.mdx",
"chars": 8811,
"preview": "import { Tabs } from 'nextra/components'\n\n# Migrate to v3\n\nThis guide will help you migrate your existing v2 project to "
},
{
"path": "docs/content/params-configurations.mdx",
"chars": 10302,
"preview": "# Params Configurations\n\nThis doc introduces all the parameters that can be configured in the `[params]`.\n\n## Example\n\n`"
},
{
"path": "docs/content/post-page.mdx",
"chars": 6212,
"preview": "# Post Page\n\nIn [Quick Start](/), we created an example article as below:\n\n{/* prettier-ignore */}\n```md\n---\ntitle: {{ r"
},
{
"path": "docs/content/search.md",
"chars": 292,
"preview": "# Search\n\nDream has a built-in search feature that allows you to search for content on your site.\nYou can enable it by a"
},
{
"path": "docs/content/social-comments.mdx",
"chars": 2644,
"preview": "# Social Comments\n\nCurrently, Dream supports these comment systems:\n\n- [Disqus](https://disqus.com/)\n- [utterances](http"
},
{
"path": "docs/content/social-links.mdx",
"chars": 1511,
"preview": "# Social Links\n\nYou can render social links on the About page (`layouts/partials/back.html`) using a custom data file.\n\n"
},
{
"path": "docs/content/summary-images.mdx",
"chars": 1607,
"preview": "# Summary Images\n\nEach post can have a cover image associated with it. This image is used in the summary view of the pos"
},
{
"path": "docs/content/syntax-highlighting.mdx",
"chars": 1109,
"preview": "# Syntax Highlighting\n\nIf you don't like the default syntax highlighting provided by Hugo,\nSetting `customSyntaxHighligh"
},
{
"path": "docs/content/website-analytics.mdx",
"chars": 408,
"preview": "# Website Analytics\n\nNow, Dream only support [Google Analytics](https://www.google.com/analytics/).\n\nIn `hugo.toml`, set"
},
{
"path": "docs/content/zen-mode.mdx",
"chars": 652,
"preview": "# Zen Mode\n\nWhat is Zen mode?\n\nZen mode is a simple layout that allows you to concentrate on reading and writing.\nIt is "
},
{
"path": "docs/mdx-components.jsx",
"chars": 325,
"preview": "import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs' // nextra-theme-blog or your custom theme\n\n//"
},
{
"path": "docs/next.config.mjs",
"chars": 225,
"preview": "import nextra from 'nextra'\nimport path from 'path'\n\nconst withNextra = nextra({})\n\nexport default withNextra({\n turbop"
},
{
"path": "docs/package.json",
"chars": 444,
"preview": "{\n \"name\": \"docs\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev -"
},
{
"path": "docs/public/.nojekyll",
"chars": 0,
"preview": ""
},
{
"path": "hugo.example.toml",
"chars": 1353,
"preview": "baseurl = \"https://example.com\"\ndefaultContentLanguage = \"en\"\nlanguageCode = \"en\"\ntitle = \"Hugo Theme Dream\"\ntheme = \"dr"
},
{
"path": "i18n/ar.toml",
"chars": 623,
"preview": "[home]\nother = \"الصفحة الرئيسية\"\n\n[backToHome]\nother = \"العودة إلى الصفحة الرئيسية\"\n\n[flip]\nother = \"!اقلب\"\n\n[archives]\n"
},
{
"path": "i18n/bn.toml",
"chars": 587,
"preview": "[home]\nother = \"হোম\"\n\n[backToHome]\nother = \"হোমে ফেরত\"\n\n[flip]\nother = \"ফ্লিপ!\"\n\n[archives]\nother = \"আর্কাইভ\"\n\n[allTags]"
},
{
"path": "i18n/ca.toml",
"chars": 676,
"preview": "[home]\nother = \"Pàgina inicial\"\n\n[backToHome]\nother = \"Tornar a la pàgina d'inici\"\n\n[flip]\nother = \"Capgirar!\"\n\n[archive"
},
{
"path": "i18n/de.toml",
"chars": 560,
"preview": "[home]\nother = \"Start\"\n\n[backToHome]\nother = \"Zurück zum Start\"\n\n[flip]\nother = \"Flip it!\"\n\n[archives]\nother = \"Archiv\"\n"
},
{
"path": "i18n/en.toml",
"chars": 579,
"preview": "# Alerts\nnote = \"Note\"\ntip = \"Tip\"\nimportant = \"Important\"\nwarning = \"Warning\"\ncaution = \"Caution\"\n\nhome = \"Home\"\nbackTo"
},
{
"path": "i18n/es.toml",
"chars": 685,
"preview": "# Alertas\nnote = \"Nota\"\ntip = \"Consejo\"\nimportant = \"Importante\"\nwarning = \"Advertencia\"\ncaution = \"Cuidado\"\n\nhome = \"In"
},
{
"path": "i18n/fr.toml",
"chars": 683,
"preview": "note = \"Note\"\ntip = \"Astuce\"\nimportant = \"Important\"\nwarning = \"Attention\"\ncaution = \"Prudence\"\n\nhome = \"Accueil\"\nbackTo"
},
{
"path": "i18n/he.toml",
"chars": 578,
"preview": "[home]\nother = \"דף הבית\"\n\n[backToHome]\nother = \"חזור לדף הבית\"\n\n[flip]\nother = \"!להפוך\"\n\n[archives]\nother = \"ארכיון\"\n\n[a"
},
{
"path": "i18n/it.toml",
"chars": 629,
"preview": "[home]\nother = \"Home\"\n\n[backToHome]\nother = \"Torna alla home\"\n\n[flip]\nother = \"Flip it!\"\n\n[about]\nother = \"Chi siamo\"\n\n["
},
{
"path": "i18n/ja.toml",
"chars": 508,
"preview": "[home]\nother = \"Home\"\n\n[backToHome]\nother = \"Back to home\"\n\n[flip]\nother = \"Flip it!\"\n\n[about]\nother = \"About\"\n\n[archive"
},
{
"path": "i18n/lv.toml",
"chars": 639,
"preview": "[home]\nother = \"Mājas lapa\"\n\n[backToHome]\nother = \"Atpakaļ uz sākumlapu\"\n\n[flip]\nother = \"Uzsist!\"\n\n[archives]\nother = \""
},
{
"path": "i18n/pt.toml",
"chars": 666,
"preview": "note = \"Nota\"\ntip = \"Dica\"\nimportant = \"Importante\"\nwarning = \"Aviso\"\ncaution = \"Cuidado\"\n\nhome = \"Página inicial\"\nbackT"
},
{
"path": "i18n/ro.toml",
"chars": 671,
"preview": "[home]\nother = \"Pagina principala\"\n\n[backToHome]\nother = \"Înapoi la pagina de start\"\n\n[flip]\nother = \"Întoarceți!\"\n\n[arc"
},
{
"path": "i18n/ru.toml",
"chars": 808,
"preview": "[home]\nother = \"Главная\"\n\n[backToHome]\nother = \"На главную\"\n\n[flip]\nother = \"Повернуть!\"\n\n[archives]\nother = \"Архивы\"\n\n["
},
{
"path": "i18n/sl.toml",
"chars": 653,
"preview": "[home]\nother = \"Domača stran\"\n\n[backToHome]\nother = \"Vrnite se na domačo stran\"\n\n[flip]\nother = \"Obrniti!\"\n\n[archives]\no"
},
{
"path": "i18n/tr.toml",
"chars": 638,
"preview": "[home]\nother = \"Ana Sayfa\"\n\n[backToHome]\nother = \"Ana sayfaya geri dön\"\n\n[flip]\nother = \"Çevir!\"\n\n[archives]\nother = \"Ar"
},
{
"path": "i18n/vi.toml",
"chars": 614,
"preview": "# Alerts\nnote = \"Ghi chú\"\ntip = \"Mẹo vặt\"\nimportant = \"Quan trọng\"\nwarning = \"Cảnh báo\"\ncaution = \"Thận trọng\"\n\nhome = \""
},
{
"path": "i18n/zh.toml",
"chars": 439,
"preview": "note = \"注意\"\ntip = \"提示\"\nimportant = \"重要\"\nwarning = \"警告\"\ncaution = \"小心\"\n\nhome = \"首页\"\nbackToHome = \"返回首页\"\nflip = \"翻转一下！\"\nab"
},
{
"path": "layouts/404.html",
"chars": 398,
"preview": "{{ define \"title\" }}404 Not Found{{ end }}\n\n{{ define \"main\" }}\n<div class=\"h-[60vh] mx-auto px-4 flex flex-col justify-"
},
{
"path": "layouts/_default/_markup/render-blockquote.html",
"chars": 549,
"preview": "{{ $icons := dict\n \"note\" \"information-circle-outline\"\n \"tip\" \"bulb-outline\"\n \"important\" \"sparkles-outline\"\n \"warni"
},
{
"path": "layouts/_default/_markup/render-codeblock-math.html",
"chars": 93,
"preview": "<p class=\"mathjax\">\n {{- .Inner | safeHTML -}}\n</p>\n{{ .Page.Store.Set \"hasMathjax\" true }}\n"
},
{
"path": "layouts/_default/_markup/render-codeblock-mermaid.html",
"chars": 108,
"preview": "<pre class=\"mermaid\">\n {{ .Inner | htmlEscape | safeHTML }}\n</pre>\n{{ .Page.Store.Set \"hasMermaid\" true }}\n"
},
{
"path": "layouts/_default/_markup/render-image.html",
"chars": 422,
"preview": "{{- if .IsBlock -}}\n <figure>\n <img src=\"{{ .Destination | safeURL }}\"\n {{- with .PlainText }} alt=\"{{ . }}\"{{ "
},
{
"path": "layouts/_default/_markup/render-link.html",
"chars": 215,
"preview": "{{- $u := urls.Parse .Destination -}}\n<a href=\"{{ .Destination | safeURL }}\"\n {{- with .Title }} title=\"{{ . }}\"{{ end "
},
{
"path": "layouts/_default/baseof.html",
"chars": 3225,
"preview": "<!DOCTYPE html>\n<html lang=\"{{ site.LanguageCode }}\"\n x-data\n :class=\"$store.darkMode.isDark() ? 'dark' : 'light'\"\n :"
},
{
"path": "layouts/_default/single.html",
"chars": 6157,
"preview": "{{ define \"title\" }}{{ .Title }}{{ end }}\n\n{{ define \"css\" }}\n\n{{ if site.Params.customSyntaxHighlighting }}\n<link rel=\""
},
{
"path": "layouts/_default/summary.html",
"chars": 1949,
"preview": "<a class=\"card bg-base-100 hover:bg-base-content/10 shadow-xl cursor-pointer dark:border dark:border-base-content/30\" hr"
},
{
"path": "layouts/_default/term.html",
"chars": 1873,
"preview": "{{ define \"title\" }}\n{{- .Title -}}\n{{ end }}\n\n{{ define \"main\"}}\n\n{{ if site.Params.zenMode }}\n<div class=\"max-w-[65ch]"
},
{
"path": "layouts/_default/terms.html",
"chars": 2150,
"preview": "{{ define \"title\" }}\n{{ $title := (strings.FirstUpper .Data.Plural) }}\n{{ $translation := T (print \"all\" $title) }}\n{{ d"
},
{
"path": "layouts/_default/zen-summary.html",
"chars": 1501,
"preview": "<a class=\"flex justify-between items-center gap-4\" href=\"{{ .RelPermalink }}\">\n <div>\n <h2 class=\"text-lg font-mediu"
},
{
"path": "layouts/index.html",
"chars": 762,
"preview": "{{ define \"main\"}}\n\n{{ $paginator := .Paginate (where site.RegularPages \"Type\" \"posts\") }}\n\n{{ if site.Params.zenMode }}"
},
{
"path": "layouts/partials/author.html",
"chars": 753,
"preview": "<div class=\"flex items-center\">\n {{ if .Params.avatar }}\n <div class=\"avatar mr-1\">\n <div class=\"w-8 rounded-full\">"
},
{
"path": "layouts/partials/back.html",
"chars": 1393,
"preview": "<div class=\"dream-grid dream-grid-about\">\n {{ with site.GetPage \"/about\" }}\n {{ $aboutPages := .Resources.ByType \"page"
},
{
"path": "layouts/partials/commentSystemHeads.html",
"chars": 441,
"preview": "{{ if site.Params.valine }}\n <script src=\"https://cdn.jsdelivr.net/npm/valine@1.5.3/dist/Valine.min.js\" integrity=\"sha2"
},
{
"path": "layouts/partials/commentSystems.html",
"chars": 1952,
"preview": "{{ if site.Config.Services.Disqus.Shortname }}\n<article>\n {{ partial \"disqus.html\" (dict \"Context\" . \"Identifier\" .RelP"
},
{
"path": "layouts/partials/disqus.html",
"chars": 1410,
"preview": "{{- $pc := site.Config.Privacy.Disqus -}}\n{{- if not $pc.Disable -}}\n{{ if site.Config.Services.Disqus.Shortname }}<div "
},
{
"path": "layouts/partials/footer.html",
"chars": 298,
"preview": "{{ if site.Params.zenMode }}\n<footer class=\"flex justify-between items-center gap-2 max-w-[65ch] mx-auto px-4 md:px-0 py"
},
{
"path": "layouts/partials/footerLeft.html",
"chars": 713,
"preview": "<div>\n {{ if site.Params.siteStartYear }}\n <p>\n © {{ if eq now.Year site.Params.siteStartYear }}{{ now.Year }}{{ el"
},
{
"path": "layouts/partials/footerRight.html",
"chars": 855,
"preview": "<div\n x-data=\"{ icons: [\n { name: 'sunny', status: 'n' },\n { name: 'moon', status: 'y' },\n { name: 'desktop', "
},
{
"path": "layouts/partials/head.html",
"chars": 1929,
"preview": "{{ with site.Params.favicon }}\n {{ if hasPrefix . \"<link\" }}\n {{ . | safeHTML }}\n {{ else }}\n <link href=\"{{ . |"
},
{
"path": "layouts/partials/luxon.html",
"chars": 502,
"preview": "<script\n src=\"https://cdn.jsdelivr.net/npm/luxon@1.26.0\"\n integrity=\"sha256-4sbTzmCCW9LGrIh5OsN8V5Pfdad1F1MwhLAOyXKnsE"
},
{
"path": "layouts/partials/mathjax.html",
"chars": 321,
"preview": "<script async src=\"https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.min.js\"></script>\n<script>\n MathJax = {"
},
{
"path": "layouts/partials/nav.html",
"chars": 3248,
"preview": "{{ if site.Params.stickyNav }}\n<nav x-data=\"{ isSticky: false }\"\n x-init=\"window.addEventListener('scroll', () => { isS"
},
{
"path": "layouts/partials/navCustomItems.html",
"chars": 386,
"preview": "{{ $customItems := site.Params.navItems }}\n{{ $keys := slice }}\n\n{{ range $k, $v := $customItems }}\n{{ $keys = $keys | a"
},
{
"path": "layouts/partials/navMobileMenu.html",
"chars": 226,
"preview": "{{ $navItems := .navItems }}\n\n{{ range $navItems }}\n{{ partial \"renderMobileNavItem.html\" . }}\n{{ end }}\n\n{{ with site.P"
},
{
"path": "layouts/partials/paginator.html",
"chars": 617,
"preview": "<div class=\"join grid grid-cols-2\">\n {{ if .paginator.HasPrev }}\n <a href=\"{{ .paginator.Prev.URL }}\" title={{ T \"prev"
},
{
"path": "layouts/partials/renderMobileNavItem.html",
"chars": 2064,
"preview": "{{ if (eq . \"about\") }}\n\n{{ with site.GetPage \"/about\" }}\n{{ $aboutPages := .Resources.ByType \"page\" }}\n{{ if gt (len $a"
},
{
"path": "layouts/partials/renderNavItem.html",
"chars": 2422,
"preview": "{{ if and (eq . \"about\") }}\n\n{{ with site.GetPage \"/about\" }}\n{{ $aboutPages := .Resources.ByType \"page\" }}\n{{ if gt (le"
},
{
"path": "layouts/partials/scripts.html",
"chars": 765,
"preview": "{{ if not site.Params.zenMode }}\n <script src=\"https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js"
},
{
"path": "layouts/partials/share.html",
"chars": 1212,
"preview": "<div class=\"flex items-center gap-2\">\n <!-- slot: post-share-left.html -->\n {{ if fileExists \"layouts/partials/post-sh"
},
{
"path": "layouts/partials/socials.html",
"chars": 443,
"preview": "<ul class=\"menu menu-horizontal flex-wrap w-full px-0 [&_ion-icon]:text-lg\">\n {{ if site.Params.email }}\n <li>\n <a "
},
{
"path": "layouts/partials/zen-back.html",
"chars": 927,
"preview": "<div class=\"max-w-[65ch] mt-8 mx-auto px-4\">\n {{ with site.GetPage \"/about\" }}\n {{ $aboutPages := .Resources.ByType \"p"
},
{
"path": "layouts/section/posts.html",
"chars": 1288,
"preview": "{{ define \"title\" }}\n{{- .Title -}}\n{{ end }}\n\n{{ define \"main\"}}\n\n<div class=\"mt-8 lg:mt-12 px-4\">\n <div class=\"mx-aut"
},
{
"path": "layouts/section/search.html",
"chars": 2674,
"preview": "{{ define \"title\" }}\n{{- T \"search\" -}}\n{{ end }}\n\n{{ define \"main\" }}\n\n{{ if site.Params.zenMode }}\n<div class=\"max-w-["
},
{
"path": "package.json",
"chars": 832,
"preview": "{\n \"name\": \"hugo-theme-dream\",\n \"version\": \"3.0.0\",\n \"description\": \"A Hugo theme named Dream.\",\n \"repository\": \"htt"
},
{
"path": "src/input.css",
"chars": 2510,
"preview": "@import 'tailwindcss' source(none);\n\n@source \"input.css\";\n@source \"../layouts\";\n\n@plugin '@tailwindcss/typography';\n@plu"
},
{
"path": "src/js/grid.js",
"chars": 516,
"preview": "function initGrid() {\n document.querySelectorAll('.dream-grid').forEach((grid) => {\n const msnry = new Masonry(grid,"
},
{
"path": "src/js/main.js",
"chars": 2030,
"preview": "document.addEventListener('alpine:init', () => {\n Alpine.store('darkMode', {\n init() {\n const isDark = window.l"
},
{
"path": "src/js/toc.js",
"chars": 1408,
"preview": "function tocHighlighter() {\n return {\n headings: [],\n links: [],\n debouncedScroll: null,\n\n init() {\n c"
},
{
"path": "tailwind.config.js",
"chars": 884,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n container: {\n center: true,\n },\n "
},
{
"path": "theme.toml",
"chars": 588,
"preview": "name = \"Dream\"\nlicense = \"MIT\"\nlicenselink = \"https://github.com/g1eny0ung/hugo-theme-dream/blob/master/LICENSE\"\ndescrip"
}
]
About this extraction
This page contains the full source code of the g1eny0ung/hugo-theme-dream GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 110 files (236.9 KB), approximately 72.4k tokens, and a symbol index with 22 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.