Video Tutorial

[abwildan]

Hi, mnjm!

I really like your kayal hugo's theme. But, I was a bit confused about the use of the theme for my hugo site. I've followed your insrtuctions, both from this repo and the demo site, but still doesn't work really well to me. Could you please make a step by step tutorial showing how to set up this theme to hugo site?

Thanks.

[mnjm]

Hi @abwildan,

Thanks for trying out my theme. could you pinpoint exactly where it failed or what didn’t work? I’m can refine the ExampleSite/Docs, which I put together rather quickly copying from different sources.
(or)
You could point me to your repo if its public

[abwildan]

Actually, I just tested this theme out in my localhost, so I didn't published it to public yet and I have some questions here:

1. where does the logo image in config/_default/params.toml refer to? it said it refered to /imgs/logo.png but I can't find it in the static folder (as I usually refer in my prev theme).
   
2. I have cover image in my post content, but I can't find any way to show it to the website trough this theme.
   
3. I frankly don't want to include this "socials" part in the home page. How could I do that without deleting the config file?

Thanks for the help.

[mnjm]

1. Logo(and profile) images should be placed in assets, specifically in yoursite/assets/<path in params>. As per the sample config it should be placed in yoursite/assets/imgs/logo.png. Thanks for pointing this out, I will update the doc and sample config.
2. Cover image is not supported currently. Its in my todo, I might add it in future.
3. I have opened an issue for this. Will push a fix soon.

[mnjm]

Fyi

1. Updated the doc and sample config
2. In TODO, Will add it in future
3. I pushed the fix, it's available in main, update the theme. To not have socials, all you have to do is comment(/remove) socials related lines from params.toml
   • I removed the "Socials" header text as well, If you wanna add it, add it in content/_index.md like here

[abwildan]

Thanks!

I tried it, the "socials" tags is by default now unavailable, I like it!

anw, can you make the background of the codeblock more bright when in dark mode?

Also, I think the font size is a bit small for me. How to increase the size in the codeblock?

[mnjm]

I’m not doing any custom highlights for code blocks, I'm using the default Hugo Chroma syntax highlighter with the "Monokai" theme, which I personally feel looks best. https://xyproto.github.io/splash/docs/longer/all.html

Default style (wth no highlights) I agree looks dull, but it does a nice job with language highlights. Example

[abwildan]

I see.

I also have other questions and suggestions (if you don't mind).

1. The git submodule command, both in your github docs and the demo site don't work fine, at least in my PC. Maybe because the "--depth 1" doesn't belong to "git submodule add"?
   
2. what about adding some gaps between two images files in a row?
   
3. I think it's also cool if you add a pdf shortcode to your theme (kayal/layouts/shortcodes/pdf.html)?

<iframe src="{{ .Get 0 }}" width="100%" height="600px"></iframe>

[mnjm]

1. In hindsight, I should remove the whole --depth 1 shallow clone part, It doesn't work the way I expected it would, with updating submods. It only help with initial add which doesn`t really add any over head without it, All I have to do is maintain a lean repo at main. I will remove it from docs. Thanks again for pointing it out
   And If you're planning to use --depth 1 then it should be before url -> git submodule add -b main --depth 1 git@github.com:mnjm/kayal.git themes/kayal
   I will also test out other commands in docs, this weekend.
2. You can simply add a new line between images.

![img1](./img1-url.png)

![img2](./img2-url.png)

3. I dont really see the need for including pdf viewer as a shortcode in the theme. If you wanna, you can include the html tags in the markdown, AFAIK it should render it. or You can add it as a shortcode in your site yoursite/layouts/shortcodes/pdf.html.

[abwildan]

nice! thanks!

[mnjm]

Regarding the PDF viewer, It got me curious. It does render the pdf viewer

## PDF Viewer

<iframe src="./SimGAN_doc.pdf" width="100%" height="600px"></iframe>

[abwildan]

I told you :)

[abwildan]

how do I change the icon at the title site here?

[mnjm]

https://mnjm.github.io/kayal/docs/configuration/#favicons

[abwildan]

nice!

[mnjm]

@abwildan FYI, Added cover image support with v0.2.0. You can add it with coverImg in front matter with url.

[abwildan]

thanks for the info! just read it.
i just tried it tho, but, why does it not work to me? the picture didn't show. am I missing something?

[mnjm]

Hey, I am loading cover images as page resource. If you modify the file paths like shown below, it will work.

content/
└── perkenalan/
    ├── catty.jpg
    └── index.md

[mnjm]

https://mnjm.github.io/kayal/page-bundles/