From c856c6b355afdf27d2e4346fa2e0dce7b7536151 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Fri, 22 Nov 2024 16:44:17 +1100
Subject: [PATCH] updated installation instructions in README

---
 README.md    | 140 +++++++++++++++++++++++++++++++++++++++++++++++++--
 package.json |   5 ++
 2 files changed, 142 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 67d5ba7..81d56ad 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,34 @@ cp themes/hugo-saasify-theme/package.json .
 cp themes/hugo-saasify-theme/postcss.config.js .
 cp themes/hugo-saasify-theme/tailwind.config.js .
 
+# Update tailwind.config.js with the following content:
+```
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('./themes/hugo-saasify-theme/tailwind.config.js')],
+  content: [
+    "./themes/hugo-saasify-theme/layouts/**/*.html",
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}"
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        heading: ['Plus Jakarta Sans', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+}
+```
+
+```bash
 # Install dependencies
 npm install
 ```
@@ -59,21 +87,117 @@ npm install
 Create or update your `hugo.toml` with the following configuration:
 
 ```toml
+# Basic Configuration
 baseURL = "/"
 languageCode = "en-us"
 title = "Your Site Title"
 theme = "hugo-saasify-theme"
 
-[params]
-  description = "Your site description"
-  author = "Your Name"
+# Required Features
+pygmentsCodeFences = true  # Enable syntax highlighting
+pygmentsUseClasses = true
+enableEmoji = true        # Enable emoji support
+enableGitInfo = true      # Enable Git info for lastmod
 
+# Required Module Configuration
 [module]
   [module.hugoVersion]
     extended = true
     min = "0.80.0"
+
+# Required Build Configuration
+[build]
+  writeStats = true      # Required for TailwindCSS
+
+# Required Markup Configuration
+[markup]
+  [markup.highlight]
+    noClasses = false
+    lineNos = true
+    codeFences = true
+  [markup.goldmark.renderer]
+    unsafe = true       # Allow HTML in markdown
+  [markup.tableOfContents]
+    endLevel = 3
+    ordered = false
+    startLevel = 2
+
+# Theme Parameters
+[params]
+  description = "Your site description"
+  author = "Your Name"
+  logo = "/images/logo.svg"      # Path to your logo
+
+  # Header Configuration
+  [params.header]
+    background = "bg-white/80 backdrop-blur-sm"
+    border = "border-b border-gray-100"
+    
+    # Header Logo
+    [params.header.logo]
+      src = "/images/logo.svg"
+    
+    # Header Buttons (optional)
+    [params.header.buttons]
+      [params.header.buttons.signIn]
+        text = "Sign in"
+        url = "/signin"
+      [params.header.buttons.getStarted]
+        text = "Get Started"
+        url = "/get-started"
+
+  # Global CTA Configuration (optional)
+  [params.cta]
+    enable = true
+    title = "Ready to Get Started?"
+    description = "Join companies using our platform"
+    [params.cta.primary_button]
+      text = "Get Started Free"
+      url = "/get-started"
+    [params.cta.secondary_button]
+      text = "Book Demo"
+      url = "/demo"
+
+  # Social Media Links (optional)
+  [params.social]
+    linkedin = "https://linkedin.com/in/yourusername"
+    twitter = "https://twitter.com/yourusername"
+    github = "https://github.com/yourusername"
+
+# Navigation Menu
+[menu]
+  [[menu.main]]
+    name = "Features"
+    weight = 1
+    [menu.main.params]
+      has_submenu = true
+      submenu = [
+        { name = "Feature 1", url = "/features/feature-1/" },
+        { name = "Feature 2", url = "/features/feature-2/" }
+      ]
+  [[menu.main]]
+    name = "Pricing"
+    url = "/pricing"
+    weight = 2
+  [[menu.main]]
+    name = "Blog"
+    url = "/blog"
+    weight = 3
 ```
 
+This configuration includes:
+
+- **Basic Settings**: Site title, language, and theme selection
+- **Required Features**: Syntax highlighting, emoji support, and Git integration
+- **Module Configuration**: Hugo version requirements
+- **Build Settings**: Required for TailwindCSS integration
+- **Markup Settings**: Code highlighting and markdown rendering options
+- **Theme Parameters**: 
+  - Header configuration with logo and navigation
+  - Call-to-action (CTA) sections
+  - Social media links
+- **Navigation Menu**: Main menu structure with dropdown support
+
 ## Development
 
 To start the development server with live reload:
@@ -87,6 +211,16 @@ This will:
 - Run the Hugo development server
 - Automatically rebuild when changes are detected
 
+To build your site for production:
+
+```bash
+npm run build
+```
+
+This will:
+- Build and minify your TailwindCSS styles
+- Generate minified Hugo site in the `public` directory
+
 ## Customization
 
 ### Colors
diff --git a/package.json b/package.json
index 66489f9..9fe30bb 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,15 @@
   "description": "A modern Hugo theme for SaaS websites",
   "author": "Chaoming Li",
   "license": "MIT",
+  "scripts": {
+    "start": "concurrently \"npx tailwindcss -i themes/hugo-saasify-theme/assets/css/main.css -o static/css/style.css --watch\" \"hugo server -D\"",
+    "build": "tailwindcss -i themes/hugo-saasify-theme/assets/css/main.css -o static/css/style.css --minify && hugo --minify"
+  },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "tailwindcss": "^3.3.5"