Adapt to new design

[krlmlr]

@talpitoo: Incoming work.

Rendered: https://cynkratemplate.cynkra.com/

Larger example: https://dm.cynkra.com/

[talpitoo]

@christophsax i haven't used the above repositories yet, do you think we can adapt them to the new design? If they use Quarto or similar, then it does not allow customizations (just like the old blog).

[talpitoo]

After an initial investigation, similarly to Quarto, https://pkgdown.r-lib.org/ relies on Bootstrap. It will be challenging if not impossible to style it with TailwindCSS apart from updating the logo.

[krlmlr]

Can we make it look like the new website?

[talpitoo]

@krlmlr https://pkgdown.r-lib.org/ doesn't allow it in a clean way. I would say we can make it to 'remind to the new website' (with CSS overrides, new logo, colors, fonts) but not to 'look like the new website'. I have to investigate it further.

[maelle]

Here's the current customization

cynkratemplate/inst/pkgdown/_pkgdown.yml

Lines 5 to 15 in cddfebe

	bslib:
	bg: "white"
	fg: "black"
	primary: "#6366f1"
	link-color: "#184FA9"
	input-focus-border-color: "#005f7e"
	input-btn-focus-box-shadow: "#005f7e"
	base_font: "frutiger,sans-serif"
	code_font: {google: "Fira Mono"}
	dropdown-link-hover-bg: "#e0e0fc"
	dropdown-link-active-bg: "#e0e0fc"

and

https://github.com/cynkra/cynkratemplate/blob/main/inst/pkgdown/extra.scss

[talpitoo]

@maelle thank you, but it assumes Bootstrap, so 'our CSS hands are tied'. The new website uses 100% custom markup and TailwindCSS v4, so we won't be able to reuse it 'as is', rather to recreate a similar enough look with Bootstrap and the available customizations.

My plan is to try first injecting both custom markup and CSS, if that attempt fails, i am going to fall back to Bootstrap and make cynkratemplate similar enough to the new website.

@christophsax do you see it that way as well?

[maelle]

Thanks @talpitoo!

Just adding my two cents: to me, just having the right colors and font goes a long way. 😇

[christophsax]

I see it similarly - personally, I am not sure if we really need a proprietary font in an OSS package but that's a detail.

We can start with current cynkratemplate or a the standard pkgdown template, and add the new logo and a few cute litte ASCII sparkles and we are good. Perhaps we have a look at it with Jonas?

We have similar situations elsewhere. E.g., when customizing the LinkedIn Page, it is not about having the same layout as on our website, but just add some cynkra finish to an otherwise predetermined layout.

[maelle]

personally, I am not sure if we really need a proprietary font in an OSS package but that's a detail.

It'd be even better to use a free font, much easier to set up 😸

[maelle]

The few cute little ASCII things could go to the footer/navbar.

https://github.com/ropensci-org/rotemplate is an example of pkgdown template where the footer and navbar are customized to look a bit like an external website.

[talpitoo]

@maelle thank you for the examples, @christophsax thank you for the input. The only remaining thing is that i have never used R (just like you have had problems with installing Ruby/Jekyll) but i hope with the help of AI i can manage to set it up on my localhost and begin the styling customizations.

[maelle]

If not, happy to help.