move social and theme variables to data folder

exampleSite/config/_default/hugo.toml

@@ -1,109 +0,0 @@
-######################## default configuration ####################
-baseURL = "https://hugoplate.netlify.app/site/"
-title = "Hugoplate"
-theme = "hugoplate"
-# Default time zone for time stamps; use any valid tz database name: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
-timeZone = "America/New_York"
-# post pagination
-paginate = 2 # see https://gohugo.io/extras/pagination/
-# post excerpt
-summaryLength = 10 # see https://gohugo.io/content-management/excerpts/
-# google analytics
-googleAnalytics = "UA-123456-78" # example: UA-123456-78, for more info, read the article https://support.google.com/analytics/answer/1008080?hl=en
-# disqus short name
-disqusShortname = "themefisher-template" # we use disqus to show comments in blog posts . To install disqus please follow this tutorial https://portfolio.peter-baumgartner.net/2017/09/10/how-to-install-disqus-on-hugo/
-# disable language
-disableLanguages = [
-] # example: ["fr"] for disable french language. see https://gohugo.io/content-management/multilingual/
-hasCJKLanguage = false #  If hasCJKLanguage true, auto-detect Chinese/Japanese/Korean Languages in the content. see: https://gohugo.io/getting-started/configuration/#hascjklanguage
-
-
-########################## Permalinks ############################
-[permalinks.page]
-"pages" = "/:slugorfilename/"
-
-
-############################# Modules ############################
-[module]
-[[module.mounts]]
-source = "assets"
-target = "assets"
-
-[[module.mounts]]
-source = "hugo_stats.json"
-target = "assets/watching/hugo_stats.json"
-
-
-############################# Build ##############################
-[build]
-noJSConfigInAssets = false
-useResourceCacheWhen = 'fallback'
-[build.buildStats]
-enable = true
-[[build.cachebusters]]
-source = 'assets/.*\.(js|ts|jsx|tsx)'
-target = '(js|scripts|javascript)'
-[[build.cachebusters]]
-source = 'assets/.*\.(css|sass|scss)$'
-target = '(css|styles|scss|sass)'
-[[build.cachebusters]]
-source = '(postcss|tailwind)\.config\.js'
-target = '(css|styles|scss|sass)'
-[[build.cachebusters]]
-source = 'assets/.*\.(.*)$'
-target = '$1'
-
-
-############################# Outputs ############################
-[outputs]
-home = ["HTML", "RSS", "WebAppManifest", "SearchIndex"]
-
-############################# Imaging ############################
-[imaging]
-# See https://github.com/disintegration/imaging
-# Default JPEG or WebP quality setting. Default is 75.
-quality = 90
-resampleFilter = "lanczos"
-
-############################ Caches ##############################
-[caches]
-[caches.images]
-dir = ":resourceDir/_gen"
-maxAge = "720h"
-
-[caches.assets]
-dir = ":resourceDir/_gen"
-maxAge = "720h"
-
-
-############################ Markup ##############################
-[markup]
-[markup.goldmark.renderer]
-unsafe = true
-
-[markup.highlight]
-style = 'monokai' # see https://xyproto.github.io/splash/docs/all.html
-
-[markup.tableOfContents]
-startLevel = 2
-endLevel = 5
-ordered = true
-
-
-########################### Media types ###########################
-[mediaTypes]
-[mediaTypes."application/manifest+json"]
-suffixes = ["webmanifest"]
-
-
-########################### Output Format ##########################
-[outputFormats]
-[outputFormats.WebAppManifest]
-mediaType = "application/manifest+json"
-rel = "manifest"
-
-[outputFormats.SearchIndex]
-mediaType = "application/json"
-baseName = "searchindex"
-isPlainText = true
-notAlternative = true

exampleSite/config/_default/params.toml

@@ -78,27 +78,6 @@ button = "I Accept"
 [widgets]
 sidebar = ["categories", "tags"]
 
-############################# social site ########################
-[[social]]
-name = "facebook"
-icon = "fab fa-facebook" # fontawesome icon pack : https://fontawesome.com/icons/
-link = "#"
-
-[[social]]
-name = "twitter"
-icon = "fab fa-twitter" # fontawesome icon pack : https://fontawesome.com/icons/
-link = "#"
-
-[[social]]
-name = "mastodon"
-icon = "fab fa-mastodon" # fontawesome icon pack : https://fontawesome.com/icons/
-link = "#"
-
-[[social]]
-name = "instagram"
-icon = "fab fa-instagram" # fontawesome icon pack : https://fontawesome.com/icons/
-link = "#"
-
 
 # google map
 [google_map]
@@ -114,4 +93,4 @@ map_marker = "images/marker.png"
 enable = false
 # mailchimp subsciption
 mailchimp_form_action = "https://gmail.us4.list-manage.com/subscribe/post?u=463ee871f45d2d93748e77cad&id=a0a2c6d074" # replace this url with yours
-mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"     
+mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"

exampleSite/data/social.json

@@ -0,0 +1,24 @@
+{
+  "main": [
+    {
+      "name": "facebook",
+      "icon": "fab fa-facebook",
+      "link": "https://www.facebook.com/"
+    },
+    {
+      "name": "twitter",
+      "icon": "fab fa-twitter",
+      "link": "https://twitter.com/"
+    },
+    {
+      "name": "github",
+      "icon": "fab fa-github",
+      "link": "https://www.github.com/"
+    },
+    {
+      "name": "linkedin",
+      "icon": "fab fa-linkedin",
+      "link": "https://www.linkedin.com/"
+    }
+  ]
+}

exampleSite/data/theme.json

@@ -0,0 +1,44 @@
+{
+  "colors": {
+    "default": {
+      "theme_color": {
+        "primary": "#121212",
+        "body": "#fff",
+        "border": "#eaeaea",
+        "theme_light": "#f6f6f6",
+        "theme_dark": ""
+      },
+      "text_color": {
+        "default": "#444444",
+        "dark": "#040404",
+        "light": "#717171"
+      }
+    },
+    "darkmode": {
+      "theme_color": {
+        "primary": "#fff",
+        "body": "#1c1c1c",
+        "border": "#3E3E3E",
+        "theme_light": "#222222",
+        "theme_dark": ""
+      },
+      "text_color": {
+        "default": "#B4AFB6",
+        "dark": "#fff",
+        "light": "#B4AFB6"
+      }
+    }
+  },
+  "fonts": {
+    "font_family": {
+      "primary": "Heebo:wght@400;600",
+      "primary_type": "sans-serif",
+      "secondary": "Signika:wght@500;700",
+      "secondary_type": "sans-serif"
+    },
+    "font_size": {
+      "base": "16",
+      "scale": "1.250"
+    }
+  }
+}

exampleSite/hugo.toml

@@ -1,44 +1,112 @@
-# DON'T REMOVE THIS FILE.
+######################## default configuration ####################
-# This file is for render site varibles and plugins
+baseURL = "https://hugoplate.netlify.app/site/"
-#
+title = "Hugoplate"
-# The actual configuration files are stored in the `config/_default/` folder.
+theme = "hugoplate"
+# Default time zone for time stamps; use any valid tz database name: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
+timeZone = "America/New_York"
+# post pagination
+paginate = 2 # see https://gohugo.io/extras/pagination/
+# post excerpt
+summaryLength = 10 # see https://gohugo.io/content-management/excerpts/
+# google analytics
+googleAnalytics = "UA-123456-78" # example: UA-123456-78, for more info, read the article https://support.google.com/analytics/answer/1008080?hl=en
+# disqus short name
+disqusShortname = "themefisher-template" # we use disqus to show comments in blog posts . To install disqus please follow this tutorial https://portfolio.peter-baumgartner.net/2017/09/10/how-to-install-disqus-on-hugo/
+# disable language
+disableLanguages = [
+] # example: ["fr"] for disable french language. see https://gohugo.io/content-management/multilingual/
+hasCJKLanguage = false #  If hasCJKLanguage true, auto-detect Chinese/Japanese/Korean Languages in the content. see: https://gohugo.io/getting-started/configuration/#hascjklanguage
 
 
-######################### site variables ##############################
+########################## Permalinks ############################
-# customize your color and font from here.
+[permalinks.page]
-[params.colors.default.theme_color]
+"pages" = "/:slugorfilename/"
-primary = "#121212"
-body = "#fff"
-border = "#eaeaea"
-theme_light = "#f6f6f6"
-theme_dark = ""
 
-[params.colors.default.text_color]
-default = "#444444"
-dark = "#040404"
-light = "#717171"
 
-[params.colors.darkmode.theme_color]
+############################# Modules ############################
-primary = "#fff"
+[module]
-body = "#1c1c1c"
+[[module.mounts]]
-border = "#3E3E3E"
+source = "assets"
-theme_light = "#222222"
+target = "assets"
-theme_dark = ""
 
-[params.colors.darkmode.text_color]
+[[module.mounts]]
-default = "#B4AFB6"
+source = "hugo_stats.json"
-dark = "#fff"
+target = "assets/watching/hugo_stats.json"
-light = "#B4AFB6"
 
-[params.fonts.font_family]
-primary = "Heebo:wght@400;600"
-primary_type = "sans-serif"
-secondary = "Signika:wght@500;700"
-secondary_type = "sans-serif"
 
-[params.fonts.font_size]
+############################# Build ##############################
-base = "16"    # default is 16px
+[build]
-scale = "1.25" # default is "majorThird": 1.25
+noJSConfigInAssets = false
+useResourceCacheWhen = 'fallback'
+[build.buildStats]
+enable = true
+[[build.cachebusters]]
+source = 'assets/.*\.(js|ts|jsx|tsx)'
+target = '(js|scripts|javascript)'
+[[build.cachebusters]]
+source = 'assets/.*\.(css|sass|scss)$'
+target = '(css|styles|scss|sass)'
+[[build.cachebusters]]
+source = '(postcss|tailwind)\.config\.js'
+target = '(css|styles|scss|sass)'
+[[build.cachebusters]]
+source = 'assets/.*\.(.*)$'
+target = '$1'
+
+
+############################# Outputs ############################
+[outputs]
+home = ["HTML", "RSS", "WebAppManifest", "SearchIndex"]
+
+############################# Imaging ############################
+[imaging]
+# See https://github.com/disintegration/imaging
+# Default JPEG or WebP quality setting. Default is 75.
+quality = 90
+resampleFilter = "lanczos"
+
+############################ Caches ##############################
+[caches]
+[caches.images]
+dir = ":resourceDir/_gen"
+maxAge = "720h"
+
+[caches.assets]
+dir = ":resourceDir/_gen"
+maxAge = "720h"
+
+
+############################ Markup ##############################
+[markup]
+[markup.goldmark.renderer]
+unsafe = true
+
+[markup.highlight]
+style = 'monokai' # see https://xyproto.github.io/splash/docs/all.html
+
+[markup.tableOfContents]
+startLevel = 2
+endLevel = 5
+ordered = true
+
+
+########################### Media types ###########################
+[mediaTypes]
+[mediaTypes."application/manifest+json"]
+suffixes = ["webmanifest"]
+
+
+########################### Output Format ##########################
+[outputFormats]
+[outputFormats.WebAppManifest]
+mediaType = "application/manifest+json"
+rel = "manifest"
+
+[outputFormats.SearchIndex]
+mediaType = "application/json"
+baseName = "searchindex"
+isPlainText = true
+notAlternative = true
 
 
 ############################# Plugins ##############################
@@ -54,12 +122,8 @@ link = "plugins/font-awesome/v6/brands.css"
 link = "plugins/font-awesome/v6/solid.css"
 [[params.plugins.css]]
 link = "plugins/font-awesome/v6/icons.css"
-# [[params.plugins.css]]
-# link = "plugins/themify-icons/icons.css"
 
 # JS Plugins
-# [[params.plugins.js]]
-# link = "plugins/jquery/jquery.js"
 [[params.plugins.js]]
 link = "js/search.js"
 [[params.plugins.js]]

exampleSite/tailwind.config.js

@@ -1,12 +1,11 @@
-const toml = require("toml");
 const fs = require("fs");
 const path = require("path");
-const configPath = path.join(__dirname, "hugo.toml");
+const themePath = path.join(__dirname, "data/theme.json");
-const getConfig = fs.readFileSync(configPath, "utf8");
+const themeRead = fs.readFileSync(themePath, "utf8");
-const theme = JSON.parse(JSON.stringify(toml.parse(getConfig)));
+const theme = JSON.parse(themeRead);
 
-let font_base = Number(theme.params.fonts.font_size.base.replace("px", ""));
+let font_base = Number(theme.fonts.font_size.base.replace("px", ""));
-let font_scale = Number(theme.params.fonts.font_size.scale);
+let font_scale = Number(theme.fonts.font_size.scale);
 let h6 = font_base / font_base;
 let h5 = h6 * font_scale;
 let h4 = h5 * font_scale;
@@ -14,17 +13,17 @@ let h3 = h4 * font_scale;
 let h2 = h3 * font_scale;
 let h1 = h2 * font_scale;
 let fontPrimary, fontPrimaryType, fontSecondary, fontSecondaryType;
-if (theme.params.fonts.font_family.primary) {
+if (theme.fonts.font_family.primary) {
-  fontPrimary = theme.params.fonts.font_family.primary
+  fontPrimary = theme.fonts.font_family.primary
     .replace(/\+/g, " ")
     .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
-  fontPrimaryType = theme.params.fonts.font_family.primary_type;
+  fontPrimaryType = theme.fonts.font_family.primary_type;
 }
-if (theme.params.fonts.font_family.secondary) {
+if (theme.fonts.font_family.secondary) {
-  fontSecondary = theme.params.fonts.font_family.secondary
+  fontSecondary = theme.fonts.font_family.secondary
     .replace(/\+/g, " ")
     .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
-  fontSecondaryType = theme.params.fonts.font_family.secondary_type;
+  fontSecondaryType = theme.fonts.font_family.secondary_type;
 }
 
 /** @type {import('tailwindcss').Config} */
@@ -46,25 +45,25 @@ module.exports = {
     },
     extend: {
       colors: {
-        text: theme.params.colors.default.text_color.default,
+        text: theme.colors.default.text_color.default,
-        light: theme.params.colors.default.text_color.light,
+        light: theme.colors.default.text_color.light,
-        dark: theme.params.colors.default.text_color.dark,
+        dark: theme.colors.default.text_color.dark,
-        primary: theme.params.colors.default.theme_color.primary,
+        primary: theme.colors.default.theme_color.primary,
-        secondary: theme.params.colors.default.theme_color.secondary,
+        secondary: theme.colors.default.theme_color.secondary,
-        body: theme.params.colors.default.theme_color.body,
+        body: theme.colors.default.theme_color.body,
-        border: theme.params.colors.default.theme_color.border,
+        border: theme.colors.default.theme_color.border,
-        "theme-light": theme.params.colors.default.theme_color.theme_light,
+        "theme-light": theme.colors.default.theme_color.theme_light,
-        "theme-dark": theme.params.colors.default.theme_color.theme_dark,
+        "theme-dark": theme.colors.default.theme_color.theme_dark,
         darkmode: {
-          text: theme.params.colors.darkmode.text_color.default,
+          text: theme.colors.darkmode.text_color.default,
-          light: theme.params.colors.darkmode.text_color.light,
+          light: theme.colors.darkmode.text_color.light,
-          dark: theme.params.colors.darkmode.text_color.dark,
+          dark: theme.colors.darkmode.text_color.dark,
-          primary: theme.params.colors.darkmode.theme_color.primary,
+          primary: theme.colors.darkmode.theme_color.primary,
-          secondary: theme.params.colors.darkmode.theme_color.secondary,
+          secondary: theme.colors.darkmode.theme_color.secondary,
-          body: theme.params.colors.darkmode.theme_color.body,
+          body: theme.colors.darkmode.theme_color.body,
-          border: theme.params.colors.darkmode.theme_color.border,
+          border: theme.colors.darkmode.theme_color.border,
-          "theme-light": theme.params.colors.darkmode.theme_color.theme_light,
+          "theme-light": theme.colors.darkmode.theme_color.theme_light,
-          "theme-dark": theme.params.colors.darkmode.theme_color.theme_dark,
+          "theme-dark": theme.colors.darkmode.theme_color.theme_dark,
         },
       },
       fontSize: {

layouts/partials/essentials/footer.html

@@ -32,7 +32,7 @@
       </div>
       <div class="lg:col-3 mb-8 text-center lg:mb-0 lg:mt-0 lg:text-right">
         <ul class="social-icons">
-          {{ range site.Params.social }}
+          {{ range site.Data.social.main }}
             <li>
               <a
                 target="_blank"

layouts/partials/essentials/style.html

@@ -15,8 +15,8 @@
 <link rel="dns-prefetch" href="//platform.twitter.com" />
 
 <!-- google fonts -->
-{{ $pf:= site.Params.fonts.font_family.primary }}
+{{ $pf:= site.Data.theme.fonts.font_family.primary }}
-{{ $sf:= site.Params.fonts.font_family.secondary }}
+{{ $sf:= site.Data.theme.fonts.font_family.secondary }}
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hugoplate",
   "description": "hugo tailwindcss boilerplate",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "license": "MIT",
   "author": "zeon.studio",
   "scripts": {
@@ -28,7 +28,6 @@
     "prettier-plugin-go-template": "0.0.13",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwind-bootstrap-grid": "^5.0.1",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.2"
-    "toml": "^3.0.0"
   }
 }