[{"content":"This article offers a sample of basic Markdown formatting that can be used in Kayal, also it shows how some basic HTML elements are decorated.\nHeadings The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 H2 H3 H4 H5 H6 Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code Code Blocks Code block with backticks \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode 1 2 3 4 5 6 7 8 9 10 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; List Types Ordered List First item Second item Third item Unordered List List item Another item And another item Nested list Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk about nothing during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"July 20, 2024","permalink":"/examples/markdown/","summary":"This article offers a sample of basic Markdown formatting that can be used in Kayal, also it shows how some basic HTML elements are decorated.\n","title":"Markdown","type":"examples"},{"content":" Install Hugo First Install Hugo, Simply follow the standard Hugo Quick Start procedure to get setup and running quickly. The theme is tested with Hugo v0.125 but may work with lower versions. Installation instructions for the theme are provided below, Instructions for updating are provided too. Getting Started Create a new Hugo site Run the following command to create a new Hugo site in a directory named mywebsite.\nhugo new site mywebsite Note:\nYou can name the project directory whatever you choose, but the instructions below assume it’s named mywebsite. If you use a different name, be sure to substitute it accordingly. Read more here about Hugo Docs\u0026rsquo;s - hugo new site command Once you\u0026rsquo;ve created a new site, follow the steps below to add the Kayal theme.\nDownload Kayal There several different ways to install the Kayal theme into your Hugo website. From easiest to most difficult to install and maintain, they are:\nGit submodule (Recommended) Hugo module Manual file copy If unsure, choose the Git submodule method.\nInstall as Git submodule This method is the quickest and easiest for keeping the theme up-to-date. Besides Hugo and Go, you\u0026rsquo;ll also need to ensure you have Git installed on your local machine.\nChange into the directory for your Hugo website (that you created above), initialise a new git repository and add Kayal as a submodule.\ncd mywebsite git init git submodule add -b main https://github.com/mnjm/kayal.git themes/kayal Then continue to set up the theme configuration files .\nInstall as Hugo Module For this method, use Hugo to manage your themes. Make sure you have Go installed before proceeding.\nDownload and install Go. Verify with go version (requires Go version 1.12 or later).\nFrom your Hugo project directory (that you created above), initialise modules for your website:\n# If you\u0026#39;re managing your project on GitHub hugo mod init github.com/\u0026lt;username\u0026gt;/\u0026lt;repo-name\u0026gt; # If you\u0026#39;re managing your project locally hugo mod init my-project Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:\n[[imports]] path = \u0026#34;github.com/mnjm/kayal/\u0026#34; Start your server using hugo server and the theme will be downloaded automatically.\nContinue to set up the theme configuration files .\nInstall manually Download the latest release of the theme source code. Download link Extract the archive, rename the folder to kayal and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder. Continue to set up the theme configuration files . Set up theme configuration files In the root folder of your website, delete the hugo.toml file that was generated by Hugo. Copy the toml config files from the theme into your config/_default/ folder. This will ensure you have all the correct theme settings and will enable you to easily customize the theme to your needs.\nNote: You should not overwrite the module.toml file if one already exists in your project! Depending on how you installed the theme you will find the theme config files in different places:\nHugo Modules: In the Hugo cache directory, or download a copy from GitHub. Git submodule or Manual install: themes/kayal/config/_default/ Once you\u0026rsquo;ve copied the files, your config folder should look like this:\n_default ├── hugo.toml ├── markup.toml ├── menus.toml └── params.toml Important: If you didn\u0026rsquo;t use Hugo Modules to install Kayal, you must add the line theme = \u0026quot;kayal\u0026quot; to the top of your hugo.toml file. Next steps The basic Kayal installation is now complete. Continue to the Configuration section to learn more about configuring the theme.\nInstalling updates Periodically, new releases may include fixes and new features. Update theme files on your website based on your initial installation method.\nUpdate using git Git submodules can be updated using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:\ngit submodule update --remote --merge Once the submodule has been updated, rebuild your site and check everything works as expected.\nUpdate using Hugo Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:\nhugo mod get -u Hugo will automatically update any modules that are required for your project. It does this by inspecting your module.toml and go.mod files. If you have any issues with the update, check to ensure these files are still configured correctly.\nThen simply rebuild your site and check everything works as expected.\nUpdate manually Updating Kayal manually requires you to download the latest copy of the theme and replace the old version in your project.\nNote: Any local customisations you have made to the theme files will be lost during this process.\nDownload the latest theme release here . Extract and move kayal to themes/ in your Hugo project. Rebuild your site and check everything works as expected. ","date":"July 20, 2024","permalink":"/docs/getting-started/","summary":"This page contains installation instructions for both Hugo and Kayal, as well as instructions for future updates.","title":"Getting Started 🚀","type":"docs"},{"content":"The config files that included with Kayal contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific configuration.\nThe configuration files are provided in TOML format, which is the default syntax used by Hugo. Feel free to convert to YAML or JSON if you wish.\nAs outlined in the installation instructions, you should adjust your theme configuration by modifying the files in the config/_default/ folder of your Hugo project and delete the hugo.toml file in your project root. Basic Site Configuration The site configuration is managed through the config/_default/hugo.toml file. The following outlines all of the settings that Kayal expects to function properly.\nNote: the variable names provided in this table use dot notation to simplify the TOML data structure ie. outputs.home refers to\n[outputs] home = ... Name Default Description theme \u0026quot;kayal\u0026quot; The theme to use. Should be set to \u0026quot;kayal\u0026quot; for the theme to work. Required if you didn\u0026rsquo;t use Hugo Modules to install Kayal. baseURL Not Set Required The URL to the root of the website. languageCode en-us Language ISO 639 code for your site. title Not Set Required: The site’s title. pagination.pagerSize 5 The number of articles listed on each page of the article listing. enableEmoji true Enables emoji processing in markdown. enableRobotsTXT true Enables the creation of a robots.txt file, which allows search engines to crawl your site. summaryLength 0 Number of words for auto-generating an article summary if not provided in the front matter. A value of 0 uses the first sentence. buildDrafts true Includes pages with draft status while building the site. buildFuture true Includes pages with future dates while building the site. services.googleAnalytics Not Set Used to enable Google Analytics service. Check here for more details. outputs.home [\u0026quot;HTML\u0026quot;, \u0026quot;RSS\u0026quot;, \u0026quot;JSON\u0026quot;] The types of outputs to generate for the homepage. RSS is required to create RSS feeds, and JSON is needed for the search functionality. Kayal requires all 3 to be enabled. You can find the hugo.toml config file for this site here for reference.\nMenus Menus appear at the top of the header on your page. Menu configuration is managed through config/_default/menus.toml file as a toml list.\nEach menu entry in the toml list includes:\nName Description name Unique Identifier title Displayed text url Link destination for the menu item. pre (Optional) Icon name to be used. All available icons are listed here . weight Determines the position within the menu. Items with lighter weights appear higher or first Here\u0026rsquo;s menu config file for this site. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 [[main]] name = \u0026#34;Docs\u0026#34; title = \u0026#34;Docs\u0026#34; url = \u0026#34;/docs/\u0026#34; weight = 1 [[main]] name = \u0026#34;Examples\u0026#34; title = \u0026#34;Examples\u0026#34; url = \u0026#34;/examples/\u0026#34; weight = 2 [[main]] name = \u0026#34;Shortcodes\u0026#34; title = \u0026#34;Shortcodes\u0026#34; url = \u0026#34;/docs/shortcodes/\u0026#34; weight = 3 [[main]] name = \u0026#34;GitHub\u0026#34; title = \u0026#34;\u0026#34; pre = \u0026#34;github\u0026#34; url = \u0026#34;https://github.com/mnjm/kayal\u0026#34; weight = 4 Add a trailing / to local URLs. For example /posts/ (not /posts). This is required for highlightCurrentMenu to work. Also new icons can be added, Check Icons Section in Advanced Customization\nTheme Parameters Kayal provides large number of configuration options to fit and suite your needs. These configurations are managed through config/_default/params.toml.\nYou can find the params.toml config file for this site here for reference.\nGlobal Name Default Description logo Not set Optional: Path to the site logo image located in the assets/ folder in your site\u0026rsquo;s root. Displayed before the Site Title in the header. Minimum size: 64x64px. description \u0026quot;A Hugo Theme\u0026quot; Site\u0026rsquo;s description. This will be used by search engines when listing your site. copyright Not set Optional: Copyright owner\u0026rsquo;s name. optimizeImg true Whether to optimize images per view port scales. enableCodeCopy true Whether to enable the copy button in code blocks. showThemeSwitcher true Show the icon that switches between dark and light themes when clicked. defaultTheme \u0026quot;auto\u0026quot; Default theme to start from. Valid options: \u0026quot;light\u0026quot;, \u0026quot;dark\u0026quot;, \u0026quot;auto\u0026quot;. If \u0026quot;auto\u0026quot;, Kayal will detect the previous preference. If no previous preference is found, Kayal will use the browser\u0026rsquo;s preference. highlightCurrentMenu true When enabled, highlights the current menu item in the menu bar. mainSections [\u0026quot;posts\u0026quot;] The sections to display in the recent articles list. If not provided, the section with the most articles is used. removeAttribution false Whether to remove Hugo and theme attribution in the footer. lastUpdate false Add the last build date (i.e., the last updated date) to the footer. showHeadingAnchors true Whether to show anchor links in headings. Can be overridden by Page-specific showHeadingAnchors in its front matter. enableSearch true Whether to enable search functionality. JSON homepage output is required for this to function. Check site config . Homepage Name Default Description showRecent true Whether to display recent items on the homepage. showRecentLabel \u0026quot;Featured\u0026quot; Label for the heading of recent items. showRecentItems 4 Number of recent items to display. showMore true Whether to show a \u0026ldquo;Show more\u0026rdquo; link at the end of the recent items section. showMoreDest \u0026quot;/posts\u0026quot; Destination URL for the \u0026ldquo;Show more\u0026rdquo; link. The content for the homepage page is read from content/_index.md. By default Kayal uses a profile layout for homepage. You can override this by providing a layout html file in your site\u0026rsquo;s layout/partials/homepage.html. Check here for more info.\nProfile settings Name Default Description headline Not set Optional: A brief, one-line intro displayed at the top of your profile. image Not set Optional: Path to the profile image located in the assets/ folder in your site\u0026rsquo;s root. Minimum size: 200x200px. where \u0026quot;right\u0026quot; Position of the image. Valid options: \u0026quot;right\u0026quot;, \u0026quot;left\u0026quot;, \u0026quot;top\u0026quot;. Article Settings Name Default Description showDate true Whether to display the published date in the article. showModDate true Whether to display the modified date in the article. showReadingTime true Whether to display the estimated reading time in the article. showTags true Whether to display tags mentioned in the front matter. showPagination true Whether to display next/previous article links in the article footer. invertPagination true Whether to reverse the direction of next/previous article links. showToC true Whether to display the table of contents on article pages. openToC false Whether to automatically open the Table of Contents when the page is loaded. showComments false Whether to display comments. Check Comments for more details. showBreadcrumbs false Whether to display breadcrumbs in the article. These settings can be overridden by the page\u0026rsquo;s front matter using the same names. For example, if you don\u0026rsquo;t want to display the ToC on a specific page, you can add showToC: false to its front matter, as shown below:\n--- title: \u0026#39;Example\u0026#39; date: 2024-07-21T21:28:49+05:30 showToC: false --- \u0026lt;!-- Markdown content --\u0026gt; Additionally, a few extra front matter parameters are available:\nName Description coverImg The cover image for the article. This will be displayed at the top of the article page. This should be served as page resouce. Refer here hidden When set to true, this hides the page from appearing in the recent homepage section. externalURL Links to third-party published pages as list entries. Specifying a URL prevents generating a content page and directly links to the third-party website. List template settings Name Default Description groupByYear false Whether to group articles by year. showBreadcrumbs false Whether to display breadcrumbs. cardView true Whether to display pages in a card view. showRSS false Whether to display RSS link. showThumbnail false Whether to display thumbnail in list card view. These settings can be overridden by page\u0026rsquo;s front matter (in _index.md files for lists) with the same name.\nTaxonomy and Term Settings Taxonomy settings Name Default Description showCount true Whether to display counts for each taxonomy term. cardView true Whether to display taxonomies as a grid of cards. Term settings Name Default Description groupByYear false Whether to group articles by year. showBreadcrumbs false Whether to display breadcrumbs. cardView true Whether to display pages in a card view. showRSS false Whether to display RSS link. Social Links Social links are configured as a TOML list, with each entry containing:\nName Default Description name Unique Identifier The unique identifier for the social link. icon Icon name The icon name. All available icons are listed here . url Link destination The URL for the social media link. Example:\n1 2 3 4 5 6 7 8 9 [[social]] name = \u0026#34;LinkedIn\u0026#34; icon = \u0026#34;linkedin\u0026#34; url = \u0026#34;https://linkedin.com\u0026#34; [[social]] name = \u0026#34;Email\u0026#34; icon = \u0026#34;email\u0026#34; url = \u0026#34;mailto:name@example.com\u0026#34; Also, New icons can be added. Check the Icons Section in the Advanced Customization documentation.\nFavicons Place favicon assets in the static folder of your site (mywebsite/static). Use the filenames listed below. If you use favicon.io , it will automatically generate these filenames for you.\nstatic/ ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico └── site.webmanifest To override the default favicon inclusion, see Overriding Favicons .\n","date":"July 21, 2024","permalink":"/docs/configuration/","summary":"This page contains configuration instructions for customizing Kayal according to your specific needs.","title":"Configuration 🔩","type":"docs"},{"content":"Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.\nYouTube Below is an example using the built-in youtube shortcode.\n{{\u0026lt; youtube ErMSHiQRnc8 \u0026gt;}} Twitter This example uses the X shortcode to output a Tweet. It requires two named parameters user and id.\n{{\u0026lt; x user=\u0026#34;HugoConf\u0026#34; id=\u0026#34;1684306258533441540\u0026#34; \u0026gt;}} We love this video! And if you can learn that much in just 100 seconds, imagine how much you’ll learn, for free, from HugoConf 2023 — a whole day of free @GoHugoIO talks and workshops on September 21. Register now at https://t.co/4af2jnNMyUhttps://t.co/mSfqzEGGbR\n\u0026mdash; Hugo Conf (@hugoconf) July 26, 2023 Vimeo The vimeo shortcode will embed a Vimeo video.\n{{\u0026lt; vimeo 64575379 \u0026gt;}} Highlight Code block can be highlighted with Hugo\u0026rsquo;s internal highlight shortcode. Available options .\n{{\u0026lt; highlight html \u0026gt;}} \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; {{\u0026lt; /highlight \u0026gt;}} Instagram This example embeds a Instagram post. More info here {{\u0026lt; instagram CxOWiQNP2MO \u0026gt;}} View this post on Instagram QR Code This example inserts QR code\n{{\u0026lt; qr text=\u0026#34;https://mnjm.github.io/kayal/\u0026#34; \u0026gt;}} ","date":"July 20, 2024","permalink":"/examples/rich-content/","summary":"Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.\n","title":"Rich Content and Hugo Shortcodes","type":"examples"},{"content":"This page provides examples on how to include code blocks with syntax highlighting.\nInline Code To include inline code, use single backticks:\nThis is `Inline code`. Rendered as:\nThis is Inline Code.\nCode block with no highlights For a basic code block without syntax highlighting, use the following: ``` // ... code ```\nRendered as:\n#include \u0026lt;stdio.h\u0026gt; int main(void) { printf(\u0026#34;Hello World\\n\u0026#34;); return 0; } Code block with highlights Mention the language for syntax highlighting, right next to the opening code fence:\n```c // ... code ``` Rendered as:\n#include \u0026lt;stdio.h\u0026gt; int main(void) { printf(\u0026#34;Hello World\\n\u0026#34;); return 0; } Code block with highlights and line numbers ```c {linenos=true} // ... code ``` Rendered as:\n1 2 3 4 5 6 #include \u0026lt;stdio.h\u0026gt; int main(void) { printf(\u0026#34;Hello World\\n\u0026#34;); return 0; } linenos=inline is not supported. Code with highlighted lines. ```c {linenos=true, hl_lines=[1,4]} // ... code ``` Rendered as:\n1 2 3 4 5 6 #include \u0026lt;stdio.h\u0026gt; int main(void) { printf(\u0026#34;Hello World\\n\u0026#34;); return 0; } ","date":"July 29, 2024","permalink":"/examples/code/","summary":"This page provides examples on how to include code blocks with syntax highlighting.\n","title":"Code Blocks Highlights","type":"examples"},{"content":"There are many ways you can make advanced changes to Kayal. Read below to learn more about what can be customized and the best way to achieve your desired result.\nHugo\u0026rsquo;s Lookup Order TLDR: Never directly edit theme files; instead, copy the file/template that you want to edit to your project root and make edits there. If you don\u0026rsquo;t like or want to modify something in the theme, it\u0026rsquo;s best to follow Hugo\u0026rsquo;s practice. Never modify the files in the themes/kayal directory; rather, copy the file that you want to modify to your site\u0026rsquo;s directory and make modifications there. Hugo\u0026rsquo;s file lookup order will prioritize your site\u0026rsquo;s files over the theme\u0026rsquo;s.\nFor example, if you want to modify the single.html template for articles, you can copy the file from mywebsite/themes/kayal/layouts/_default/single.html to mywebsite/layouts/_default/single.html and make modifications there.\nKayal also includes some placeholder partial templates that you can use to extend its capabilities. More details below.\nCustom Homepage If you want to modify and provide a custom homepage, you can create a mywebsite/layouts/partials/homepage.html partial template to override the default. This will override the theme\u0026rsquo;s profile partial located in themes/kayal/partials/home/profile.html.\nAnalytics Google Analytics Kayal supports Google Analytics using Hugo\u0026rsquo;s Google Analytics embedded template . To enable it, provide your Google Analytics ID in the hugo.toml config file.\n[services] [services.googleAnalytics] ID = \u0026#39;G-MEASUREMENT_ID\u0026#39; # \u0026lt;--- YOUR ID HERE Other Analytics If you prefer to use a different analytics provider, you can override the analytics partial and provide your own script. Create mywebsite/layouts/partials/analytics/custom.html file with the code provided by your analytics provider.\nComments If you want to add comments to your site, Kayal can be extended to support any comments provider. Create a mywebsite/layouts/partials/comments.html partial template file containing the code needed to display comments from your chosen provider.\nYou can use either the built-in Hugo Disqus template or provide your own custom code. Refer to the Hugo documentation for more details.\nAfter adding comments to your site, enable them in params.toml by setting showComments: true. Note that page front matter settings override those in params.toml, so to disable comments on a specific page, set showComments: false in its front matter.\nOverriding the stylesheet If you wish to modify the site\u0026rsquo;s theme, copy the mywebsite/themes/kayal/assets/css/theme.css file to mywebsite/assets/css/theme.css. Modify the stylesheet properties in the copied file.\nPsst\u0026hellip;, you can include a custom stylesheet by creating mywebsite/assets/css/custom.css and adding your styles there.\nCustom Head The theme allows inserting additional code directly into the \u0026lt;head\u0026gt; section. Create mywebsite/layouts/partials/extend-head.html file the additional code, this will added at the end of \u0026lt;head\u0026gt; section.\nIcons If you can\u0026rsquo;t find the icons you need in this list , you can add your own by including the icon\u0026rsquo;s SVG file in mywebsite/assets/icons/. Kayal will recognize these icons for configurations in socials and menu .\nModify the SVG file by changing the fill color attributes to fill=\u0026quot;currentColor\u0026quot; to match Kayal\u0026rsquo;s theme color. You can also include these icons in your article content using the Icon shortcode Overriding Favicons You can override the default favicon inclusion. Create mywebsite/layouts/partials/favicons.html file with favicon HTML tags and assets. This will be injected into the site in place of the default inclusion.\n","date":"July 22, 2024","permalink":"/docs/advanced-customization/","summary":"This page contains all advanced changes that Kayal supports.","title":"Advanced Customization 🧰","type":"docs"},{"content":"KaTeX can be used to render mathematical notation within articles.\nKayal will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the katex shortcode within the article. Example below:\n{{\u0026lt; katex \u0026gt;}} Any KaTeX syntax on that page will then be automatically rendered. Use the online reference of supported TeX functions for the available syntax.\nInline notation Inline notation can be generated by wrapping the expression in \\\\( and \\\\) delimiters.\nExample:\n% KaTeX inline notation Inline notation: \\\\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\\\) Inline notation: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\)\nBlock notation Alternatively, block notation can be generated using $$ delimiters. This will output the expression in its own HTML block.\nExample:\n% KaTeX block notation $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$","date":"July 20, 2024","permalink":"/examples/math/","summary":"KaTeX can be used to render mathematical notation within articles.\n","title":"Math using KateX","type":"examples"},{"content":"Kayal supports Mermaid diagrams using the mermaid shortcode . Wrap your diagram markup within this shortcode.\nCurrently, Kayal displays Mermaid diagrams in dark mode, but this may be updated to support dark-light mode switching in later releases.\nThe examples below are taken from the official Mermaid docs .\nFlowchart graph TD; A--\u003eB; A--\u003eC; B--\u003eD; C--\u003eD; Sequence diagram sequenceDiagram participant Alice participant Bob Alice-\u003e\u003eJohn: Hello John, how are you? loop HealthCheck John-\u003e\u003eJohn: Fight against hypochondria end Note right of John: Rational thoughts prevail! John--\u003e\u003eAlice: Great! John-\u003e\u003eBob: How about you? Bob--\u003e\u003eJohn: Jolly goo Ghatt diagram gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d Class diagram classDiagram Class01 \u003c|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --\u003e C2 : Where am i? Class09 --* C3 Class09 --|\u003e Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 \u003c--\u003e C2: Cool label Git Graph gitGraph commit commit branch develop commit commit commit checkout main commit commit Entity relationship diagram erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses User Journey Diagram journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me Quadrant Chart quadrantChart title Reach and engagement of campaigns x-axis Low Reach --\u003e High Reach y-axis Low Engagement --\u003e High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] XY Chart xychart-beta title \"Sales Revenue\" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis \"Revenue (in $)\" 4000 --\u003e 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] ","date":"July 30, 2024","permalink":"/examples/diagram/","summary":"Kayal supports Mermaid diagrams using the mermaid shortcode . Wrap your diagram markup within this shortcode.\n","title":"Diagram using Mermaid","type":"examples"},{"content":"Emoji is supported throughout Kayal by default. Emoji can be used in titles, menu items and article content.\nenableEmoji should be set to true in hugo.toml. Note: The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.\nEmoji replacements are automatic throughout Kayal, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.\nExample: :see_no_evil: :see_no_evil:, :hear_no_evil: :hear_no_evil:, :speak_no_evil: :speak_no_evil:.\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\n","date":"July 20, 2024","permalink":"/examples/emoji/","summary":"Emoji is supported throughout Kayal by default. Emoji can be used in titles, menu items and article content.\n","title":"Emoji","type":"examples"},{"content":"Kayal makes use of Page bundles to serve page resources such as images, videos, and audio files.\nFolder Structure Suppose you have a markdown content file (posts/awesome-post.md) what to include a cover image, a (in-content) image, and a video,\nSteps\nCreate a directory with the same name as your article\u0026rsquo;s markdown file. Inside this directory, create an index.md file with your markdown content. Place all assets used by the markdown file in this folder. Now your folder structure should look like this,\ncontent └── posts └── awesome-post ├── index.md ├── cover-image.jpg ├── img.png ├── video.mp4 └── .... Adding assets to article You can refer to these assets in your markdown using relative paths.\nTo add a cover image, include this line in your markdown frontmatter:\ncoverImg: \u0026#34;cover-image.jpg\u0026#34; To include images and videos in your content, use the following markdown syntax:\n![Image](img.png) ![Video](video.mp4) ","date":"August 16, 2024","permalink":"/page-bundles/","summary":"Kayal makes use of Page bundles to serve page resources such as images, videos, and audio files.\nFolder Structure Suppose you have a markdown content file (posts/awesome-post.md) what to include a cover image, a (in-content) image, and a video,\n","title":"Article / Page Folder Structure","type":"page"},{"content":"Kayal supports a wide range of FontAwesome 6 Icons . These icons can be used throughout your site, including in menus, social links, and content. To include icons in your content, you can use the Icon shortcode.\nAlso, you can add custom icons. Check here for more details.\nList of all available Icons.\nIcon Name amazon apple arrow-right bars bell blogger bluesky bomb bug \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e calender check chevron-down circle-info clone-solid code \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e codeberg codepen comment copy-regular copy-solid dev discord discourse docker download dribbble edit email envelope expand eye facebook fire flickr fork foursquare ghost github gitlab globe goodreads google graduation-cap hackernews hashnode heart-empty heart home image instagram itch-io keybase kickstarter \u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e ko-fi language lastfm lightbulb link linkedin list location-dot lock mastodon medium microsoft moon mug-hot music orcid patreon paypal pencil pgpkey phone pinterest poo reddit researchgate rss-square rss scale-balanced search shield skull-crossbones slack snapchat soundcloud square-check-solid stack-overflow star steam stripe substack sun \u003c!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"\u003e tag-horizontal tag telegram threads tiktok \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\rtime triangle-exclamation tumblr twitch twitter wand-magic-sparkles whatsapp x-twitter Xing xing xmark youtube ","date":"August 8, 2024","permalink":"/examples/icons/","summary":"Kayal supports a wide range of FontAwesome 6 Icons . These icons can be used throughout your site, including in menus, social links, and content. To include icons in your content, you can use the Icon shortcode.\n","title":"Icons","type":"examples"},{"content":" Jpg as page resource Got it from Pexels Webp as site resource SVG External Img ","date":"August 6, 2024","permalink":"/test/img-test/","summary":"","title":"Img Test","type":"test"},{"content":" Example monospace in a header Just monospace\nMonospace with hyperlink Monospace and non-monospace in hyperlink Something Else A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nA wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet.\nExample hyperlink in a header I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary\nNormal text 1\nClick to see Collapsible text [^footnote] Footnote\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"August 6, 2024","permalink":"/test/monospace-formating/","summary":" Example monospace in a header Just monospace\n","title":"Monospaced","type":"test"},{"content":"In addition to all the default Hugo shortcodes, Kayals adds a few extras for additional functionality.\nCallout callout outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.\nParameter Description icon Optional. the icon to display on the left side.\nDefault: triangle-exclamation (Check out the icon shortcode for more details on using icons.) iconColor Optional. the color for the icon in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme. cardColor Optional. the color for the card background in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme. textColor Optional. the color for the text in basic CSS style.\nCan be either hex values (#FFFFFF) or color names (white)\nBy default chosen based on the current color theme. Example 1\n{{\u0026lt; callout \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum diam in lectus efficitur, in consequat purus ultricies. {{\u0026lt; /callout \u0026gt;}} Rendered as: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum diam in lectus efficitur, in consequat purus ultricies. Example 2\n{{\u0026lt; callout github \u0026gt;}} Feel free to show your support by giving a star 🌟 on [GitHub](https://github.com/mnjm/kayal) {{\u0026lt; /callout \u0026gt;}} Rendered as: Feel free to show your support by giving a star 🌟 on GitHub Code Importer codeimport can be used for importing code from external sources easily without copying and pasting.\nParameter Description url Required URL to an externally hosted code file. type Code type used for syntax highlighting. startLine Optional The line number to start the import from. endLine Optional The line number to end the import at. showLineNos Optional Whether to show line numbers Default: false Example 1\n{{\u0026lt; codeimport url=\u0026#34;https://raw.githubusercontent.com/mnjm/kayal/main/layouts/shortcodes/mdimport.html\u0026#34; type=\u0026#34;go\u0026#34; \u0026gt;}} Rendered as: {{ $url := .Get \u0026#34;url\u0026#34;}} {{ with resources.GetRemote (urls.Parse $url) }} {{ .Content | markdownify }} {{ else }} {{ errorf \u0026#34;Mardown Importer Shortcode - Unable to get remote resource\u0026#34; . }} {{ end }} Example 2\n{{\u0026lt; codeimport url=\u0026#34;https://raw.githubusercontent.com/mnjm/kayal/main/config/_default/params.toml\u0026#34; startLine=95 type=\u0026#34;toml\u0026#34; showLineNos=true \u0026gt;}} Rendered as: 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 # Taxonomy settings [taxonomy] # Whether to show counts of each taxonomy term. showCount = true # Whether to display taxonomies as a grid of cards. cardView = true # Term settings [term] # Whether to group articles by year. groupByYear = false # Whether to display breadcrumbs showBreadcrumbs = false # Whether to display pages as a card cardView = true # Whether to display RSS link showRSS = false # Social links # [[social]] # name = \u0026#34;GitHub\u0026#34; # icon = \u0026#34;github\u0026#34; # url = \u0026#34;https://github.com/mnjm/kayal\u0026#34; # # [[social]] # name = \u0026#34;Email\u0026#34; # icon = \u0026#34;email\u0026#34; # url = \u0026#34;mailto:name@example.com\u0026#34; # # [[social]] # name = \u0026#34;Twitter / X\u0026#34; # icon = \u0026#34;x-twitter\u0026#34; # url = \u0026#34;https://x.com/sample\u0026#34; Collapse collapse shortcode generates an HTML \u0026lt;details\u0026gt; element. It allows for collapsible content sections on your Hugo site.\nParameter Description summary The summary text displayed as the clickable title of the collapsible section. open Optional boolean parameter. If set to true, the \u0026lt;details\u0026gt; element will be initially expanded/open. Default false Inner The inner content of the shortcode. This can include any additional text or Markdown content that should be displayed within the collapsible section. Example\n{{\u0026lt; collapse summary=\u0026#34;Click to expand\u0026#34; open=true \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum diam in lectus efficitur, in consequat purus ultricies. {{\u0026lt; /collapse \u0026gt;}} Rendered as: Click to expand Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum diam in lectus efficitur, in consequat purus ultricies. Icon icon outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size. Here you can find all available icons.\nAlso new icons can be added, Check Icons Section in Advanced Customization\nExample\nGitHub Icon {{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} Rendered as:\nGitHub Icon KaTeX katex shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer here for more info.\nExample 1\n{{\u0026lt; katex \u0026gt;}} \\\\(f(a,b,c) = (a^2+b^2+c^2)^3\\\\) Rendered as:\n\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\nExample 2\n{{\u0026lt; katex \u0026gt;}} $$ \\det(A) = a_{11} \\begin{vmatrix} a_{22} \u0026amp; a_{23} \\\\ a_{32} \u0026amp; a_{33} \\end{vmatrix} - a_{12} \\begin{vmatrix} a_{21} \u0026amp; a_{23} \\\\ a_{31} \u0026amp; a_{33} \\end{vmatrix} + a_{13} \\begin{vmatrix} a_{21} \u0026amp; a_{22} \\\\ a_{31} \u0026amp; a_{32} \\end{vmatrix} $$ Rendered as: $$ \\det(A) = a_{11} \\begin{vmatrix} a_{22} \u0026 a_{23} \\\\ a_{32} \u0026 a_{33} \\end{vmatrix} - a_{12} \\begin{vmatrix} a_{21} \u0026 a_{23} \\\\ a_{31} \u0026 a_{33} \\end{vmatrix} + a_{13} \\begin{vmatrix} a_{21} \u0026 a_{22} \\\\ a_{31} \u0026 a_{32} \\end{vmatrix} $$ Markdown Importer mdimport allows you to import markdown files from external sources. This is useful for including content from other repositories or websites without having to copy and paste the content.\nParameter Description url Required URL to an externally hosted markdown file. \u0026lt;hr\u0026gt; {{\u0026lt; mdimport url=\u0026#34;https://raw.githubusercontent.com/mnjm/mnjm/master/README.md\u0026#34; \u0026gt;}} \u0026lt;hr\u0026gt; Rendered as:\nHi 👋, I'm Manjunath I’m an engineer specializing in Computer Vision and (🤏) NLP. Email: manjunat.mohan@gmail.com j Mermaid mermaid can be used for create diagrams and visualizations using text and code. It uses Mermaid.js which is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams.\nRefer here for more examples.\nExample\n{{\u0026lt; mermaid \u0026gt;}} graph TD B[Boil Water] --\u0026gt; C[Add Tea Powder] C --\u0026gt; D[Add Milk] D --\u0026gt; E[Add Sugar] E --\u0026gt; F[Strain] F --\u0026gt; G[Drink] G --\u0026gt; |Repeat|B {{\u0026lt; /mermaid \u0026gt;}} Rendered as: graph TD B[Boil Water] --\u003e C[Add Tea Powder] C --\u003e D[Add Milk] D --\u003e E[Add Sugar] E --\u003e F[Strain] F --\u003e G[Drink] G --\u003e |Repeat|B ","date":"July 20, 2024","permalink":"/docs/shortcodes/","summary":"in addition to all the default hugo shortcodes, kayals adds a few extras for additional functionality.","title":"Shortcodes","type":"docs"}]