Merge branch 'main' into nico-16122023

content/posts/customizing/customize-css/index.md

@@ -0,0 +1,103 @@
+---
+title: "Customizing CSS"
+date: 2024-01-13T22:00:50+06:00
+author:
+  name: Emruz Hossain
+  image: images/author/emruz.jpg
+menu:
+  sidebar:
+    name: CSS Customization
+    identifier: customize-css
+    parent: customizing
+    weight: 407
+---
+
+
+This theme allows you to customize the appearance of your site and its components by overriding the default CSS. This guide will demonstrate how to override the theme's color scheme and customize the CSS of individual components.
+
+This theme uses [Sass](https://sass-lang.com/) to generate CSS. If you are not familiar with Sass, you can learn more about it from [here](https://sass-lang.com/guide).
+
+## Override Theme Colors Variables
+
+If you want to change the default color scheme of the theme, you can override the theme color variables. To override the theme color variables, you need to create a file named `variables.scss` in the `assets/styles` directory of your site. Then copy the content of the default [variables.scss](https://github.com/hugo-toha/toha/blob/main/assets/styles/variables.scss) file and put into your custom `variables.scss` file. Here, only the `$theme` section from default `variables.scss` file is shown below:
+
+```scss
+// themes
+$themes: (
+  'light': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // slate 50
+    'bg-primary': #f8fafc,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // slate 200
+    'bg-secondary': #e2e8f0,
+    'bg-card': #fff,
+    // slate 800
+    'heading-color': #1e293b,
+    // slate 700
+    'text-color': #334155,
+    // slate 300
+    'inverse-text-color': #cbd5e1,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+  'dark': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // gray-800
+    'bg-primary': #1f2937,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // gray 900
+    'bg-secondary': #111827,
+    // slate 800
+    'bg-card': #1e293b,
+    // slate 100
+    'heading-color': #f1f5f9,
+    // slate 300
+    'text-color': #cbd5e1,
+    // slate 900
+    'inverse-text-color': #0f172a,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+);
+```
+
+The `light` and `dark` fields in the color mappings represent the color schemes for light mode and dark mode, respectively. By modifying the color codes in these fields, you can customize the look and feel of your site.
+
+## Override Component CSS
+
+To override the CSS of a component, create a `override.scss` file in your site's `assets/styles` directory. Then, put the new CSS for the component there. You don't have to re-write the entire CSS of the component. You can just put the changed fields.
+
+For example, to disable blur effect of the background image on the home page, you can add the following SCSS code in your `override.scss` file:
+
+```scss
+.home{
+  .background{
+    filter: none;
+  }
+}
+```

content/posts/customizing/customize-layout/index.md

@@ -1,7 +1,6 @@
 ---
 title: "Customizing the layout"
 date: 2021-08-07T06:20:50+06:00
-hero: /images/posts/configuration/about-section-hero.svg
 author:
   name: James Ray
   image: images/author/james.jpg
@@ -10,39 +9,38 @@ menu:
     name: Layout Customization
     identifier: customizing-layout
     parent: customizing
-    weight: 411
+    weight: 410
 ---
 
-## We've all been there
-We all want to be able to customize the layout of a given theme, and in this short tutorial I will show you how. I stumbled my way through this, and I hope you won't have to as well.
+{{< alert type="warning" >}}
+If you customize the layout of an existing component, you will not receive any future updates for that component when the theme is updated. You will need to manually update the component in your repository.
+{{< /alert >}}
 
-### Step 1 / CSS
-Finding what you are wanting to customize. The first thing I wanted to do was customize the css styles. I stumbled through a few git issues, and posts and found that truly the author made it easy, I just didn't think it through (as I was new to Hugo as well).
+In this tutorial, I will guide you on how to customize the layout of a theme. I have personally gone through the process and will share my insights to make it easier for you.
 
-All you will need to do is create the following structure in your root directory: `/static/css/style.css` Congrats! You're done! The rest is just styling things how you like.
+### Step 1 : Change the Layout File
 
-{{< alert type="warning" >}}
-The following steps will prevent you from seeing updates on any files that you overwrite.
-{{< /alert >}}
+To customize the layout of an existing section, page, or component, you need to locate the corresponding file in the theme's [layout directory](https://github.com/hugo-toha/toha/tree/main/layouts). Once you find the file, copy it and place it in the same directory structure within the `layouts` directory of your site.
+
+For example, to customize the layout of the `about` section, follow these steps:
 
-### Step 2 / Layout Changes
-After accomplishing the layout changes I wanted to look at what it would take to add SCSS into the theme. However, as stated, being new to Hugo set me back just a bit. Unfortunately, I was unable to find a better method, however you can overwrite the layout files by simply place the file you want in the same structure that is in the theme's layout directory.
-
-### Step 3 / Adding SCSS
-As stated I wanted to change the layout so that I could use SCSS. Well, we're to that point. Now that we know how to update the layout files you will need to update them to grab SCSS files instead. I personally used the following code and it seems to work well.
-```markdown
-<!--================= custom style overrides =========================-->
-    {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "")) }}
-    {{ $sass := resources.Get "/sass/style.scss" }}
-    {{ $style := $sass | resources.ToCSS $options }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}"/>
+1. Copy the `about.html` file from the `layouts/partials/sections` directory of the theme.
+2. Paste the copied file into the `layouts/partials/sections` directory of your repository.
+3. Edit the copied `about.html` file to make the desired layout changes for the `about` section.
+
+### Step 2: Add CSS Styles
+
+If you need to add additional CSS to your modified layout file, you can do so by adding the CSS code to the `assets/styles/override.scss` file in your site. This file is automatically loaded by the theme and will apply the custom styles. If you want to add the CSS in a separate file, then put the CSS into a SCSS file in `assets/styles` directory of your repo and include it in the `assets/styles/override.scss` file as following:
+
+```scss
+@import "your-style-file-name";
 ```
-You can leave our the `"includePaths" (slice "")` portion if you are not wanting to combine external files with it. SCSS will still be able to import files as expected.
 
-After adding the changes to the layouts, you will want to add your sass files into `/assests/sass/style.scss`
+### Step 3: Add JavaScript
 
-#### Recommended files
-These are the files I recommend to update to add SCSS.
-- `_default`
-  - `baseof.html`
-- `index.html`
+If your modified layout file requires additional JavaScript, the recommended way is to add the JavaScript in the layout file itself with `<script>` tag. If you want to add the JavaScript in a separate file, then put the JavaScript file in `assets/scripts` directory of your repo and include it in the layout file as following:
+
+```html
+{{ $script := resources.Get "scripts/your-script.js" }}
+<script src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
+```

content/posts/customizing/dark-theme/index.md

@@ -12,21 +12,13 @@ menu:
     weight: 405
 ---
 
-## Enable Dark Mode
-
-Toha `v3.6.0` has introduced dark theme. Thanks to [@donfiguerres](https://github.com/donfiguerres). This guide will show you how to enable it.
-
-At first, make sure you have updated the theme version to `v3.6.0` or later. Then, add the following section under `params` section of your `config.yaml` file.
+To enable the dark mode in Toha `v4.0.0`, simply set the `darkMode.enable` field to `true` under the `params.features` section in your `config.yaml` file. For example:
 
 ```yaml
-  darkMode:
-    enable: true
-    provider: darkreader
-    default: system
+params:
+  features:
+    darkMode:
+      enable: true
 ```
 
-Here,
-
-- **enable:** Specifies whether to enable the dark mode or not.
-- **provider:** Specifies the underlying provider that will be used to provide the dark mode functionality. Currently, it supports only [darkreader](https://darkreader.org/). We may support other providers in future.
-- **default:** Specifies which theme to use by default. It supports `system`, `light` and `dark` values.
+Congratulations! You are all set. You can now enjoy the dark mode in your site. The dark mode will obey user's system preference.

content/posts/customizing/new-section/index.md

@@ -1,13 +1,47 @@
 ---
-title: "How to add a new section"
-date: 2020-06-07T06:20:50+06:00
-hero: /images/posts/configuration/about-section-hero.svg
+title: "Adding a new section"
+date: 2024-01-13T22:30:50+06:00
+author:
+  name: Emruz Hossain
+  image: images/author/emruz.jpg
 menu:
   sidebar:
     name: Adding New Section
     identifier: customizing-add-new-section
     parent: customizing
-    weight: 410
+    weight: 415
 ---
 
-## Coming soon.......
+If the default sections, templates, and components do not meet your needs, you can easily add new sections, templates, and components to your site. This guide will demonstrate how to add a new section to your site.
+
+### Step 1 : Add Layout File
+
+To add a new section to your site, you need to create a layout file in the `layouts/partials/sections` directory. The file should be named after the section's name. For example, if you want to add a `contact` section with a contact form, create a file named `contact.html`. Use the following template for the `contact.html` file:
+
+```html
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container anchor p-lg-5 about-section" id="{{ $sectionID }}">
+  // Your custom HTML code here
+</div>
+```
+
+### Step 2: Add CSS Styles
+
+If you want to add custom CSS for your new section, you can do so by adding the CSS code to the `assets/styles/override.scss` file in your site. This file is automatically loaded by the theme and will apply the custom styles. Alternatively, you can create a separate SCSS file in the `assets/styles directory` of your repository and include it in the `assets/styles/override.scss` file using the following syntax:
+
+```scss
+@import "your-style-file-name";
+```
+
+### Step 3: Add JavaScript
+
+Similarly, if your new section requires additional JavaScript, the recommended way is to add the JavaScript in the layout file itself with `<script>` tag. If you want to add the JavaScript in a separate file, then put the JavaScript file in `assets/scripts` directory of your repo and include it in the layout file as following:
+
+```html
+{{ $script := resources.Get "scripts/your-script.js" }}
+<script src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
+```

go.mod

@@ -3,6 +3,6 @@ module github.com/hugo-toha/guides
 go 1.19
 
 // Uncomment for local development
-// replace github.com/hugo-toha/toha/v3 => ../toha
+// replace github.com/hugo-toha/toha/v4 => ../toha
 
 require github.com/hugo-toha/toha/v4 v4.1.0 // indirect