[typhoon] Some questions and problems

[Sogl]

Some issues during the 2nd day of using Typhoon.

1. I want to use multilang text instead of a logo (GRAV logo by default). No place to put text here:

2. I can disable Hero section in Blog but it has no top padding like in other pages:

3. I want to use custom classes for my blog post image. For example, object position (https://tailwindcss.com/docs/object-position). How it looks now:

And what I want (object-position: top;):

Maybe put some img classes here?

Also there are no object-position classes in the whole theme. How to add them?

5. I can disable the whole sidebar in blog:

But can't disable parts of sidebar. For example, I don't need Random post/entry etc

6. No "Open in another tab" option for footer social media:

And also External links plugin doesnt't work in the footer by default (i thought this might be the solution).

No option to add custom logo outside the social list here:

SVG Icons plugin is included to Typhoon, it would be nice option to search the whole list.

7. Blog archive sidebar months and post dates not support translation.

Other items in progress...

I understand that the theme can be inherited, the code can be changed, but it is much faster to already have the necessary functions in the Admin panel.

And how can I create Pull Requests for Premium plugins? For example, to add new strings to the translation.

[rhukster]

Thanks for the questions/feedback. Some responses:

1. Quick caveat, as outlined in the documentation, Typhoon is intended as a 'base' theme to customize and develop on top, and not really a 'mega' theme with millions of options. The logo is a case in point. Generally a logo is an image, if you want to use a text-translatable, or even multiple images based on language, you just need to first, create your own copy of the theme using devtools (process described in docs), then modify the templates/partials/logo.html.twig. Typically i will replace this entire file just the logic I need.
2. That should have some padding if the hero is not enabled. I will look at this.
3. I think this would be a worthy addition, and i'll look at adding that. In the meantime, and for anything like this in the future, I suggest following the steps above to easily modify typhoon to fit your exact needs.
4. you skipped 4 :)
5. This again is something that should be done via customization. The sidebar twig template is located in templates/partials/sidebar.html.twig. You can simply comment out or delete entire sections, or replace this file entirely per your needs.
6. Again the social media icons provided and the options provided are intended as a good starting point for most projects. You can customize this to your needs. I don't mind adding a specific network to the list of available ones in Typhoon itself just let me know what you are looking for. The reason why there is no custom icon allowed is because these SVG icons need to be built in such away that they use current-color for the fill property to allow them to be colorized by Typhoon. A regular PNG, or SVG would not work properly with light/dark handling in Typhoon. I will add an external link option though, I think that's a worthy option to have.
7. I think this might be related to the archives plugin itself. Typhoon does not provide an override for this plugin so it's just using the default partials/archives.html.twig that the plugin provides. As with anything in Grav, you can also copy/modify the plugin's twig in your own theme and add any extra logic you might need.

There is no way currently to provide pull request support as it would require making our private repos public. For translations however, you can just create an issue here and provide an updated lang file, and i'll add it manually.

Thanks!

[Sogl]

3 But how to add/enable Object Position classes to the project? Looks like it's part of Tailwind that missing in Typhoon. 6 I need Telegram: https://fontawesome.com/icons/telegram?s=brands Sometimes I need VK brand logo: https://fontawesome.com/icons/vk?s=brands Also external link (I use Globe): https://fontawesome.com/icons/globe?s=solid

Regarding adding icons, need a small instruction in the Documentation because users may need their own icons. It's all about dark/white mode support.

7_ This line: <h4 class="text-xl font-bold mt-2 mb-3">{{ 'THEME_TYPHOON.SIDEBAR.RANDOM_ARTICLE.HEADLINE'|t }}</h4> It's about missing Polish language in theme, need to add some lines.

Day 3 addition:

8 Footer multilang. Need addition to Docs about modules folder. I couldn't figure out why footer module didn't work until I found this comment: https://github.com/getgrav/grav-premium-issues/issues/98#issuecomment-837498677 9 If you use default template with Hero image and these lines:

header_bar:
    background: transparent
    text: light

Active link becomes "missing":

[Sogl]

Day 4 addition:

10_ FontAwesome calendar icon isn't showing in post demo here: https://demo.getgrav.org/typhoon/blog/blog/page-overrides

[rhukster]

3_ you have to add the class and recompile tailwind. Tailwind only includes classes you are using to keep the CSS size optimized. https://getgrav.org/premium/typhoon/docs#developing-custom-css

6_ i'll look to add these for the next update. There's not really a simple solution to adding your own here with this colorized support as it requires manually editing SVG files and you may need to restructure it. There is an alternative though which is to use one of the existing svg-icons provided sets. These didn't have the needed brand icons at the time, which is why i created my own, but now there are brands in some of them. I will look to see if this is something i can have as a configuration option.

8_ agreed needs documenting

9_ will look at this

10_ fa icon is a holdover from Quark where this twig template originated. I need to just remove it, it's not intended to be there.

[Sogl]

@rhukster On last update I can set image alignment:

But still no css rules for them:

How to add? I think it's conf like this: https://tailwindcss.com/docs/object-position#customizing-your-theme

As a workaround I put line into css\site.css of inherited theme:

@import '../../typhoon/css/site.css';

.object-top {
    object-position: top;
}

[rhukster]

If the class is being set correctly in HTML (looks like it is) but the object-top is not showing up in the CSS styles, then you have not recompiled your CSS correctly.

[Sogl]

npm run watch and then npm run build using instructions: one, two

[Sogl]

11_ In partials/blog/taxonomy.html.twig:

<a href="{{ blog.url|rtrim('/') }}/tag{{ config.system.param_sep }}{{ tag }}#blog_list">

What's the #blog_list hash? I deleted it from inherited theme without any effect.