chore: move content to exampleSite

* update dev and build command

chore: move contents to exampleSite

chore: add configs to exampleSite

chore: use tailwindcss/nesting

* add postcss-import
* move imports to the top

chore: add config for theme dev

chore: add compiled css

chore: fix last updated issue

chore: dont't ignore hugo_stats.json

chore: update index page layout

.gitignore

@@ -2,5 +2,4 @@ node_modules/
 public/
 resources/
 
-hugo_stats.json
 .hugo_build.lock

assets/css/styles.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import "typography.css";
 @import "highlight.css";
 @import "components/cards.css";
@@ -10,6 +6,10 @@
 @import "components/sidebar.css";
 @import "components/navbar.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
   @apply text-base antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;

config.yaml

@@ -0,0 +1,31 @@
+build:
+  buildStats:
+    enable: true
+  cacheBusters:
+  - source: assets/watching/hugo_stats\.json
+    target: styles\.css
+  - source: assets/.*\.(js|ts|jsx|tsx)
+    target: (js|scripts|javascript)
+  - source: assets/.*\.(css|sass|scss)$
+    target: (css|styles|scss|sass)
+  - source: (postcss|tailwind)\.config\.js
+    target: (css|styles|scss|sass)
+  - source: assets/.*\.(.*)$
+    target: $1
+
+module:
+  mounts:
+  - source: static
+    target: static
+  - source: layouts
+    target: layouts
+  - source: data
+    target: data
+  - source: assets
+    target: assets
+  - source: i18n
+    target: i18n
+  - source: archetypes
+    target: archetypes
+  - source: hugo_stats.json
+    target: assets/watching/hugo_stats.json

exampleSite/content/_index.md

@@ -1,3 +1,4 @@
 ---
 title: Hextra Theme
+toc: false
 ---

exampleSite/content/blog/test.md

@@ -0,0 +1,5 @@
+---
+title: Test very long title to see how it looks
+---
+
+Hello world!

exampleSite/go.mod

@@ -0,0 +1,5 @@
+module github.com/imfing/hextra/exampleSite
+
+go 1.20
+
+replace github.com/imfing/hextra => ../

exampleSite/hugo.work

@@ -0,0 +1,3 @@
+go 1.20
+
+use ../

exampleSite/hugo.yaml

@@ -0,0 +1,74 @@
+# Configuration
+baseURL: "https://example.com/"
+title: "Hextra"
+
+enableRobotsTXT: true
+enableGitInfo: true
+# hasCJKLanguage: true
+
+outputs:
+  home: [HTML]
+  page: [HTML]
+  section: [HTML, RSS]
+
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+    title: Hextra
+  ja:
+    languageName: 日本語
+    weight: 2
+    title: "Hextra テーマ"
+
+module:
+  hugoVersion:
+    extended: true
+    min: "0.111.0"
+
+  workspace: hugo.work
+  imports:
+    path: github.com/imfing/hextra
+
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+
+menu:
+  main:
+    - name: Documentation
+      pageRef: /docs
+      weight: 1
+    - name: Blog
+      pageRef: /blog
+      weight: 2
+    - name: About
+      pageRef: /about
+      weight: 3
+    - name: Search
+      weight: 4
+      params:
+        type: search
+        placeholder: Search Hextra docs...
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+
+  sidebar:
+    - name: More
+      params:
+        type: separator
+      weight: 1
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 2
+
+params:
+  displayUpdatedDate: true
+  dateFormat: "January 2, 2006"

hugo.toml

@@ -1,91 +0,0 @@
-# Hugo config
-title = "Hextra Theme"
-
-baseURL = "https://example.org"
-
-disableKinds = ["taxonomy", "term"]
-
-defaultContentLanguage = 'en'
-[languages]
-  [languages.en]
-    languageName = 'English'
-    weight = 1
-    title = 'Hextra Theme'
-  [languages.ja]
-    languageName = '日本語'
-    weight = 2
-    title = 'Hextra テーマ'
-
-[module]
-  [module.hugoVersion]
-    extended = true
-    min      = "0.115.1"
-  [[module.mounts]]
-    source = "assets"
-    target = "assets"
-  [[module.mounts]]
-    source = "static"
-    target = "static"
-  [[module.mounts]]
-    source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
-
-[build]
-  writeStats = true
-  [[build.cachebusters]]
-    source = "assets/watching/hugo_stats\\.json"
-    target = "styles\\.css"
-  [[build.cachebusters]]
-    source = "(postcss|tailwind)\\.config\\.js"
-    target = "css"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(js|ts|jsx|tsx)"
-    target = "js"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(.*)$"
-    target = "$1"
-
-[markup]
-  [markup.goldmark]
-    [markup.goldmark.renderer]
-      unsafe = true
-  [markup.highlight]
-    noClasses = false
-
-
-[menu]
-  [[menu.main]]
-    name = 'Documentation'
-    pageRef = '/docs'
-    weight = 10
-  [[menu.main]]
-    name = 'Blog'
-    pageRef = '/blog'
-    weight = 20
-  [[menu.main]]
-    name = 'About'
-    pageRef = '/about'
-    weight = 30
-  [[menu.main]]
-    name = 'Search'
-    weight = 35
-    params = { type = 'search', placeholder = 'Search documentation...' }
-  [[menu.main]]
-    name = 'GitHub'
-    url = 'https://github.com'
-    weight = 40
-    params = { icon = 'github' }
-
-  [[menu.sidebar]]
-    name = 'More'
-    params = { type = 'separator' }
-    weight = 10
-  [[menu.sidebar]]
-    name = 'Hugo Docs ↗'
-    url = 'https://gohugo.io/documentation/'
-    weight = 20
-
-[params]
-  dateFormat = 'January 2, 2006'
-
-  displayUpdatedDate = true

hugo_stats.json

@@ -0,0 +1,167 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "article",
+      "body",
+      "button",
+      "div",
+      "footer",
+      "g",
+      "h1",
+      "h2",
+      "head",
+      "hr",
+      "html",
+      "input",
+      "kbd",
+      "link",
+      "meta",
+      "nav",
+      "p",
+      "path",
+      "script",
+      "span",
+      "style",
+      "svg",
+      "title",
+      "ul"
+    ],
+    "classes": [
+      "-ml-2",
+      "-mr-2",
+      "absolute",
+      "active:bg-gray-400/20",
+      "appearance-none",
+      "bg-black/[.05]",
+      "bg-gray-100",
+      "bg-transparent",
+      "bg-white",
+      "block",
+      "border",
+      "border-gray-200",
+      "container",
+      "contrast-more:border",
+      "contrast-more:border-current",
+      "contrast-more:border-gray-900",
+      "contrast-more:dark:border-current",
+      "contrast-more:dark:border-gray-50",
+      "contrast-more:dark:shadow-[0_0_0_1px_#fff]",
+      "contrast-more:dark:text-gray-100",
+      "contrast-more:dark:text-gray-300",
+      "contrast-more:shadow-[0_0_0_1px_#000]",
+      "contrast-more:text-current",
+      "contrast-more:text-gray-700",
+      "contrast-more:text-gray-800",
+      "dark:bg-dark",
+      "dark:bg-dark/50",
+      "dark:bg-gray-50/10",
+      "dark:bg-neutral-900",
+      "dark:border-gray-100/20",
+      "dark:border-neutral-800",
+      "dark:focus:bg-dark",
+      "dark:hover:text-gray-200",
+      "dark:placeholder:text-gray-400",
+      "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
+      "dark:text-gray-300",
+      "dark:text-gray-400",
+      "flex",
+      "flex-col",
+      "focus:bg-white",
+      "font-extrabold",
+      "font-medium",
+      "font-mono",
+      "gap-1",
+      "gap-2",
+      "h-16",
+      "h-5",
+      "h-full",
+      "hamburger-menu",
+      "hidden",
+      "hover:opacity-75",
+      "hover:text-gray-800",
+      "inset-x-0",
+      "items-center",
+      "justify-center",
+      "justify-end",
+      "leading-tight",
+      "lg:mx-auto",
+      "lg:prose-xl",
+      "ltr:md:left-auto",
+      "ltr:mr-auto",
+      "ltr:right-1.5",
+      "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "max-w-[90rem]",
+      "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "md:hidden",
+      "md:inline",
+      "md:inline-block",
+      "md:justify-start",
+      "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:text-sm",
+      "md:w-64",
+      "min-h-[100px]",
+      "mt-2",
+      "mt-6",
+      "mx-2",
+      "mx-auto",
+      "my-1.5",
+      "next-error-h1",
+      "overflow-auto",
+      "overscroll-contain",
+      "p-2",
+      "pb-[env(safe-area-inset-bottom)]",
+      "pl-[max(env(safe-area-inset-left),1.5rem)]",
+      "placeholder:text-gray-500",
+      "pointer-events-none",
+      "pr-[max(env(safe-area-inset-right),1.5rem)]",
+      "print:bg-transparent",
+      "print:hidden",
+      "prose",
+      "px-1.5",
+      "px-3",
+      "px-4",
+      "px-6",
+      "py-12",
+      "py-2",
+      "py-2.5",
+      "relative",
+      "rounded",
+      "rounded-lg",
+      "rounded-xl",
+      "rtl:left-1.5",
+      "rtl:md:right-auto",
+      "rtl:ml-auto",
+      "search-input",
+      "search-results",
+      "search-wrapper",
+      "select-none",
+      "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
+      "shadow-xl",
+      "sm:flex",
+      "sm:items-start",
+      "sr-only",
+      "sticky",
+      "text-[10px]",
+      "text-base",
+      "text-center",
+      "text-current",
+      "text-gray-100",
+      "text-gray-500",
+      "text-gray-600",
+      "text-gray-900",
+      "text-sm",
+      "text-xs",
+      "top-0",
+      "top-full",
+      "transition-colors",
+      "transition-opacity",
+      "w-full",
+      "w-screen",
+      "whitespace-nowrap",
+      "z-20",
+      "z-[-1]"
+    ],
+    "ids": null
+  }
+}

layouts/index.html

@@ -1,8 +1,14 @@
 {{ define "main" }}
-  <div class="container px-4 lg:mx-auto">
+  <div class="mx-auto flex max-w-[90rem]">
-    <article class="prose lg:prose-xl">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
-      <h1>{{ .Title }}</h1>
+    {{ partial "toc.html" . }}
+    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+        <div class="content">
+          <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
           {{ .Content }}
+        </div>
+      </main>
     </article>
   </div>
 {{ end }}

layouts/partials/components/last-updated.html

@@ -2,6 +2,8 @@
   {{- with .Lastmod -}}
     {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
     <div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">Last updated on <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+  {{- else -}}
+    <div class="mt-16"></div>
   {{- end -}}
 {{ else }}
   <div class="mt-16"></div>

layouts/partials/head-css.html

@@ -1,9 +1,9 @@
-{{ $options := dict "inlineImports" true }}
+{{ if and (not hugo.IsProduction) (eq hugo.Environment "theme")}}
   {{ $styles := resources.Get "css/styles.css" }}
-{{ $styles = $styles | resources.PostCSS $options }}
+  {{ $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
-{{ if not hugo.IsProduction }}
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 {{ else }}
+  {{ $styles := resources.Get "css/compiled/main.css" }}
   {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
   <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.integrity }}" />

package-lock.json

@@ -5,12 +5,11 @@
   "packages": {
     "": {
       "devDependencies": {
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.23",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
-        "postcss-nested": "^6.0.1",
         "prettier": "^2.8.8",
         "prettier-plugin-go-template": "^0.0.13",
         "tailwindcss": "^3.3.2"
@@ -117,19 +116,35 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@tailwindcss/typography": {
+    "node_modules/@tailwindcss/nesting": {
-      "version": "0.5.9",
+      "version": "0.0.0-insiders.565cd3e",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
-      "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
       "dev": true,
       "dependencies": {
-        "lodash.castarray": "^4.4.0",
+        "postcss-nested": "^5.0.5"
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
       },
       "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
       }
     },
     "node_modules/ansi-regex": {
@@ -768,24 +783,6 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -1,11 +1,10 @@
 {
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-go-template": "^0.0.13",
     "tailwindcss": "^3.3.2"

postcss.config.js

@@ -1,8 +1,12 @@
 let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
 const tailwind = require('tailwindcss')(tailwindConfig);
 const autoprefixer = require('autoprefixer');
-const nested = require('postcss-nested')
 
 module.exports = {
-	plugins: [tailwind, nested, ...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [])], // add nesting to the plugins array
+	plugins: [
+		require('postcss-import'),
+		require('@tailwindcss/nesting'),
+		tailwind,
+		...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [])
+	],
 };

tailwind.config.js

@@ -9,8 +9,13 @@ const makePrimaryColor =
       return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})`
     }
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./hugo_stats.json'],
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    './hugo_stats.json'
+  ],
   theme: {
     screens: {
       sm: '640px',

taskfile.yaml

@@ -1,11 +1,19 @@
-version: '3'
+version: "3"
 
 tasks:
-
+  dev:
-  serve:
     cmds:
-      - hugo server --enableGitInfo --buildDrafts --buildExpired --buildFuture -p 1313
+      - hugo server --debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
 
   build:
+    deps: [css]
     cmds:
-      - hugo --minify
+      - hugo --minify --source=exampleSite --themesDir=../..
+
+  css:
+    cmds:
+      - npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css
+
+  clean:
+    cmds:
+      - rm -rf public resources