diff --git a/content/posts/analytics/index.md b/content/posts/analytics/index.md index 7c9dfd8f..2d5fd879 100644 --- a/content/posts/analytics/index.md +++ b/content/posts/analytics/index.md @@ -18,6 +18,8 @@ This theme has built in support for various analytic tools. Currently, it suppor - [Google Analytics](https://analytics.google.com) - [Matomo](https://matomo.org/) +For a complete list of supported analytics, please refer the sample [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml) file. + {{< alert type="warning" >}} Warning: When adding analytics, you should consider local legislation to see if a privacy banner is required to inform users of the tracking in personal data. In general (not legal advice), privacy-friendly, anonymous methods such as [counter.dev](https://counter.dev) and [GoatCounter](https://www.goatcounter.com/) don't need a banner, since they do not collect personally identifiable data. {{< /alert >}} @@ -29,28 +31,27 @@ Warning: When adding analytics, you should consider local legislation to see if To enable GoatCounter analytics in your site, you have two options: one is to sign in at [goatcounter.com](https://www.goatcounter.com) and obtain a code for your site, the second is to self-hosted an instance of GoatCounter. Then, you have to add `analytics` section under `params.features` section of your `config.yaml` file as below: ```yaml -params: - features: - analytics: - enabled: true - goatCounter: - code: # Not self-hosted - instance: # For self-hosted you should use only one of the two methods +analytics: + enable: true + services: + # GoatCounter + goatCounter: + code: # Not self-hosted + instance: # For self-hosted you should use only one of the two methods ``` ### counter.dev [counter.dev](https://counter.dev) is a simple, privacy friendly and open source analytics website which enables you to track the total user count, first visited page and some other metrics on your website. Unfortunately, to keep things simple (and free) they don't show a ranking of the most visited pages, but rather the ones that are accessed the first. -You can enable it by adding the email you registered with at counter.dev's page in your `config.yaml` as below: +You can enable it by adding the email you registered with at counter.dev's page under `params.features` section in your `config.yaml` as below: ```yaml -params: - features: - analytics: - enabled: true - counterDev: - id: +analytics: + enable: true + services: + counterDev: + id: ``` The tracking code will be automatically added to your site. @@ -63,15 +64,15 @@ Note: On some sites, [an error has been detected](https://github.com/ihucos/coun Beware that [according to recent case law](https://www.euractiv.com/section/politics/short_news/use-of-google-analytics-violates-eu-law-austrian-authority-rules/), Google Analytics might be illegal in the European Union {{< /alert >}} -You can enable Google Analytics in your site by adding your tracking id in your `config.yaml` file as below: +You can enable Google Analytics in your site by adding your tracking id under `params.features` section in your `config.yaml` file as below: ```yaml -params: - features: - analytics: - enabled: true - google: - id: UA-122321624-2 +analytics: + enable: true + services: + # Google Analytics + google: + id: ``` You can use both V3 or V4 tracking ID. The theme will automatically detect the tracking code version and add the respective tracking scripts accordingly to your site. @@ -80,14 +81,14 @@ For additional privacy settings regarding Google Analytics, you can provide `pri ### Matomo -You can enable Matomo (formerly Piwik) by modifying the `config.yaml` file as shown in the following example: +You can enable Matomo (formerly Piwik) by adding the matomo configuration under `params.features` section in the `config.yaml` file as shown below: ```yaml -params: - features: - analytics: - enabled: true - matomo: - instance: matomo.example.com - siteId: 1 # The number generated after adding a site in your instance +analytics: + enable: true + services: + # Matomo / Piwik + matomo: + instance: matomo.example.com + siteId: 1 # The number generated after adding a site in your instance ``` diff --git a/content/posts/comments/index.md b/content/posts/comments/index.md index 5ed67fcd..ae4d6341 100644 --- a/content/posts/comments/index.md +++ b/content/posts/comments/index.md @@ -17,75 +17,71 @@ This theme has built-in support for comment on the posts. Currently, it support - [Utterances](https://utteranc.es/) - [Giscus](https://giscus.app/) +For a complete list of supported comments, please refer the sample [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml) file. + ### Disqus -Disqus is a popular comment plug-in. After signing up to [Disqus](https://disqus.com/) you will need to provide your shortname under `params.features.comment` section of your `config.yaml` file as below: +Disqus is a popular comment plug-in. After signing up to [Disqus](https://disqus.com/) you will need to provide your shortname under `params.features` section of your `config.yaml` file as below: ```yaml -params: - features: - comment: - enable: true - disqus: - shortName: +comment: + enable: true + services: + disqus: + shortName: toha-example-site ``` ### Valine -[Valine](https://valine.js.org/) appears to be a Chinese comments comments plugin. You can enable valine comment plugin by adding `valine` section under `params.features.comments` section as below: +[Valine](https://valine.js.org/) appears to be a Chinese comments comments plugin. You can enable valine comment plugin by adding `valine` section under `params.features` section as shown below: ```yaml -params: - features: - comment: - enable: true - valine: - appId: app-id - appKey: app-key - avatar: avatar - placeholder: placeholder - lang: lang - recordIP: recordIP - enableQQ: enableQQ +comment: + enable: true + services: + valine: + appId: app-id + appKey: app-key + avatar: retro + placeholder: Share your thought. + lang: en + recordIP: true + enableQQ: true ``` ### Utterances -Utterances uses [GitHub Issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues) to store the comments for your posts. This requires you to allow have a public repository, and the Utterances app to use your repository. Setup instructions can be found at the [Utterances home page](https://utteranc.es/). +To enable Utterances comment plugin, at first go to [utteranc.es](https://utteranc.es/). On the `Configuration` section, provide the necessary information. It will give you a script to include to your site. You just need to extract the respective information from the script and provide it under `params.features` section as below: ```yaml -params: - features: - comment: - enable: true - utteranc: - repo: your-repo/name - issueTerm: url - theme: light +comment: + enable: true + services: + utteranc: + repo: your-repo/name + issueTerm: title + theme: github-light ``` ### Giscus Giscus is based off Utterances, but uses [GitHub Discussions](https://docs.github.com/en/discussions) as the backend. This requires you to allow have a public repository, and the Giscus app to use your repository. Setup instructions can be found at the [Giscus home page](https://giscus.app/). -To enable Giscus comment plugin, at first go to [giscus.app](https://giscus.app/). On the `Configuration` section, provide the necessary information. It will give you a script to include to your site. You just need to extract the respective information from the script and provide it under `params.features.comment.giscus` section as below: +To enable Giscus comment plugin, at first go to [giscus.app](https://giscus.app/). On the `Configuration` section, provide the necessary information. It will give you a script to include to your site. You just need to extract the respective information from the script and provide it under `params.features` section as below: ```yaml -params: - features: - comment: - enable: true - giscus: - repo: your-repo/name - repoID: your-repo-id - category: your-category - categoryID: your-category-id - # theme: light - # map: url - # reaction: 1 - # metadata: 0 - # inputPosition: bottom - # crossOrigin: anonymous +comment: + enable: true + services: + giscus: + repo: your-repo/name + repoID: your-repo-id + category: your-category + categoryID: your-category-id + theme: light + map: url + reaction: 1 + metadata: 0 + inputPosition: bottom + crossOrigin: anonymous ``` - -The commented out options are optional. You can use them to further customize your comment experience. diff --git a/content/posts/shortcodes/index.md b/content/posts/shortcodes/index.md index fae7bd5a..942b6ef2 100644 --- a/content/posts/shortcodes/index.md +++ b/content/posts/shortcodes/index.md @@ -19,56 +19,124 @@ This is a sample post intended to test the followings: The following alerts are available in this theme. +#### Success + +**Code:** + +```markdown +{{}} +This is sample alert with `type="success"`. +{{}} +``` + +**Result:** + {{< alert type="success" >}} This is sample alert with `type="success"`. {{< /alert >}} +#### Danger + +**Code:** + +```markdown +{{}} +This is sample alert with `type="danger"`. +{{}} +``` + +**Result:** + {{< alert type="danger" >}} This is sample alert with `type="danger"`. {{< /alert >}} +#### Warning + +**Code:** + +```markdown +{{}} +This is sample alert with `type="warning"`. +{{}} +``` + +**Result:** + {{< alert type="warning" >}} This is sample alert with `type="warning"`. {{< /alert >}} -{{< alert type="info" >}} -This is sample alert with `type="info"`. -{{< /alert >}} +#### Info -{{< alert type="dark" >}} -This is sample alert with `type="dark"`. -{{< /alert >}} +**Code:** -{{< alert type="primary" >}} -This is sample alert with `type="primary"`. -{{< /alert >}} +```markdown +{{}} +This is sample alert with `type="info"`. +{{}} +``` + +**Result:** -{{< alert type="secondary" >}} -This is sample alert with `type="secondary"`. +{{< alert type="info" >}} +This is sample alert with `type="info"`. {{< /alert >}} ## Image #### A sample image without any attribute. +**Code:** + +```markdown +{{}} +``` + +**Result:** + {{< img src="/posts/shortcodes/boat.jpg" title="A boat at the sea" >}} {{< vs 3 >}} #### A sample image with `height` and `width` attributes. +**Code:** + +```markdown +{{}} +``` + +**Result:** + {{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="A boat at the sea" >}} {{< vs 3 >}} #### A center aligned image with `height` and `width` attributes. +**Code:** + +```markdown +{{}} +``` + +**Result:** + {{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="A boat at the sea" >}} {{< vs 3 >}} #### A image with `float` attribute. +**Code:** + +```markdown +{{}} +``` + +**Result:** + {{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="A boat at the sea" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis. @@ -81,6 +149,25 @@ This theme support splitting the page into as many columns as you wish. #### Two column split +**Code:** + +```markdown +{{}} +##### Left Column + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Right Column + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Result:** + {{< split 6 6>}} ##### Left Column @@ -97,6 +184,31 @@ Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida tu #### Three column split +**Code:** + +```markdown +{{}} +##### Left Column + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Middle Column + +Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum. + +--- + +##### Right Column + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Result:** + {{< split 4 4 4 >}} ##### Left Column @@ -121,14 +233,31 @@ Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida tu Give vertical space between two lines. +**Code:** + +```markdown +This is line one. +{{}} +This is line two. It should have `4rem` vertical space with previous line. +``` + +**Result:** + This is line one. {{< vs 4>}} This is line two. It should have `4rem` vertical space with previous line. ## Video +**Code:** + +```markdown +{{}} +``` + +**Result:** + {{< video src="/videos/sample.mp4" >}} Video by [Rahul Sharma](https://www.pexels.com/@rahul-sharma-493988) from [Pexels](https://www.pexels.com). - diff --git a/content/posts/supports/index.md b/content/posts/supports/index.md index fe465304..c43b97c9 100644 --- a/content/posts/supports/index.md +++ b/content/posts/supports/index.md @@ -14,20 +14,21 @@ This theme supports adding various support/donation links in your site. Currentl - [Ko-fi](https://ko-fi.com/) - [Buy Me a Coffee](https://www.buymeacoffee.com/zicklam) +For a complete list of supported support links, please refer the sample [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml) file. + ## Ko-fi You can add your Ko-fi floating button in your website. To add the floating button, add the `support` section under `params.features` section of your sites `config.yaml` file: ```yaml -params: - features: - support: - enabled: true - kofi: - user: - text: Tip Me - textColor: '#f9fafc' - backgroundColor: '#248aaa' +support: + enable: true + services: + kofi: + user: + text: Tip Me + textColor: '#f9fafc' + backgroundColor: '#248aaa' ``` ## Buy Me a Coffee @@ -38,13 +39,12 @@ You can add your "Buy Me a Coffee" floating button in your website. To add the f ![bmacwidget](https://git-doc-files.s3.eu-central-1.amazonaws.com/github.com/hugo-toha/guides/buymeacoffe-widget.png) ```yaml -params: - features: - support: - enabled: true - buymeacoffee: - user: - text: Support me on Buy me a coffee! - info: Buy me a coffee! - color: '#FFDD00' -``` \ No newline at end of file +support: + enable: true + services: + buymeacoffee: + user: + text: Support me on Buy me a coffee! + info: Buy me a coffee! + color: '#FFDD00' +```