diff --git a/next.config.ts b/next.config.ts index cca4981b0..00369a10d 100644 --- a/next.config.ts +++ b/next.config.ts @@ -418,6 +418,11 @@ const nextConfig = { destination: "/docs/installation/framework-guides/symfony", permanent: false, }, + { + source: "/docs/guides/hugo", + destination: "/docs/installation/framework-guides/hugo", + permanent: false, + }, { source: "/docs/guides/meteor", destination: "/docs/installation/framework-guides/meteor", diff --git a/src/app/(docs)/docs/installation/framework-guides/hugo.tsx b/src/app/(docs)/docs/installation/framework-guides/hugo.tsx new file mode 100644 index 000000000..7ba308ad6 --- /dev/null +++ b/src/app/(docs)/docs/installation/framework-guides/hugo.tsx @@ -0,0 +1,159 @@ +import { css, html, Page, shell, Step, Tile, yaml } from "./utils"; +import Logo from "@/docs/img/guides/hugo.react.svg"; + +export let tile: Tile = { + title: "Hugo", + description: "Static site generator written in Go.", + Logo, +}; + +export let page: Page = { + title: "Install Tailwind CSS with Hugo", + description: "Setting up Tailwind CSS in a Hugo project.", +}; + +export let steps: Step[] = [ + { + title: "Create your project", + body: ( +

+ Start by creating a new Hugo project if you don't have one set up already. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + hugo new site --format yaml my-site + cd my-site + `, + }, + }, + { + title: "Install Tailwind CSS", + body: ( +

+ Install the Tailwind CSS CLI v4.1 or later. +

+ ), + + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm install --save-dev tailwindcss @tailwindcss/cli + `, + }, + }, + { + title: "Configure build parameters", + body: ( +

+ Add these build parameters to your site configuration. +

+ ), + code: { + name: "hugo.yaml", + lang: "yaml", + code: yaml` + build: + buildStats: + enable: true + cachebusters: + - source: assets/notwatching/hugo_stats\.json + target: css + - source: (postcss|tailwind)\.config\.js + target: css + module: + mounts: + - source: assets + target: assets + - disableWatch: true + source: hugo_stats.json + target: assets/notwatching/hugo_stats.json + `, + }, + }, + { + title: "Create CSS entry file", + body:

If you want Tailwind CSS to ignore your `hugo_stats.json`, list it in your `.gitignore` file.

, + code: { + name: "assets/css/main.css", + lang: "css", + code: css` + @import "tailwindcss"; + @source "hugo_stats.json"; + `, + }, + }, + { + title: "Create partial template", + body:

Create a partial template to process the CSS with the Tailwind CSS CLI.

, + code: { + name: "layouts/_partials/css.html", + lang: "html", + code: html` + {{ with (templates.Defer (dict "key" "global")) }} + {{ with resources.Get "css/main.css" }} + {{ $opts := dict "minify" (not hugo.IsDevelopment) }} + {{ with . | css.TailwindCSS $opts }} + {{ if hugo.IsDevelopment }} + + {{ else }} + {{ with . | fingerprint }} + + {{ end }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} + `, + }, + }, + { + title: "Start your build process", + body: ( +

+ Start the preview of your site. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + hugo server -M + `, + }, + }, + { + title: "Start using Tailwind in your Hugo project", + body: ( +

+ Add the partial template to the {""} of your base template and start using Tailwind’s utility classes to style the + content of your templates and pages. +

+ ), + code: { + name: "layouts/all.html", + lang: "html", + code: html` + + + + + + + {{ partialCached "css.html" . }} + + + +

+ + Hello world! +

+ + + `, + }, + }, +]; diff --git a/src/app/(docs)/docs/installation/framework-guides/index.ts b/src/app/(docs)/docs/installation/framework-guides/index.ts index 14f5a4b35..d9c1ac12c 100644 --- a/src/app/(docs)/docs/installation/framework-guides/index.ts +++ b/src/app/(docs)/docs/installation/framework-guides/index.ts @@ -26,6 +26,7 @@ const guides: Guide[] = await create({ astro: () => import("./astro"), qwik: () => import("./qwik"), rspack: () => import("./rspack"), + hugo: () => import("./hugo"), }); async function create(list: Record Promise>): Promise { diff --git a/src/app/(docs)/docs/installation/framework-guides/utils.ts b/src/app/(docs)/docs/installation/framework-guides/utils.ts index 07ea98ae4..ce63680e0 100644 --- a/src/app/(docs)/docs/installation/framework-guides/utils.ts +++ b/src/app/(docs)/docs/installation/framework-guides/utils.ts @@ -8,6 +8,7 @@ export const html = dedent; export const astro = dedent; export const twig = dedent; export const elixir = dedent; +export const yaml = dedent; export const handlebars = dedent; export interface LogoComponent { diff --git a/src/components/code-example.tsx b/src/components/code-example.tsx index 4fd1c86b2..d104cc15d 100644 --- a/src/components/code-example.tsx +++ b/src/components/code-example.tsx @@ -215,6 +215,7 @@ const highlighter = await createHighlighter({ "tsx", "twig", "vue", + "yaml", "md", ], }); diff --git a/src/components/highlight.tsx b/src/components/highlight.tsx index 758909f4d..1d0e29ca1 100644 --- a/src/components/highlight.tsx +++ b/src/components/highlight.tsx @@ -106,6 +106,7 @@ export const highlighter = await createHighlighter({ "tsx", "twig", "vue", + "yaml", "md", ], }); diff --git a/src/docs/img/guides/hugo.react.svg b/src/docs/img/guides/hugo.react.svg new file mode 100644 index 000000000..1678b8458 --- /dev/null +++ b/src/docs/img/guides/hugo.react.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +