New landing page design #105
Conversation
* very basic redesign * make buttons interactive
* add dangling code example * add code example section
* quickfix alignment * add news and clean up scss
|
Preview the changes: https://turinglang.org/pr-previews/105 |
|
Just a suggestion, IMO text color of nav-bar in dark mode is not quite visible properly, it should have more light, and normal text is too much bright for dark mode... maybe it's just my eyesight delusion😅! |
|
@simonsteiger Can we try to add something like this SVG, we created this rough sketch, it's a bit unclean, but I think it worth a shot! Adding @Govindggupta to this conversation as he created this SVG a while back! TuringLogo-Animated.mp4
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Animation</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.line-graph {
/* height: 85vh; */
width: 100%;
padding-top: 5%;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.line {
fill: none;
stroke-width: 7;
stroke-dasharray: 3900;
stroke-dashoffset: 3900;
animation: draw 6s forwards ease-in-out;
stroke-opacity: 1;
}
.line1 {
stroke: #b352cc;
animation-delay: 0s;
}
.line2 {
stroke: #cc3333;
animation-delay: 0.5s;
}
.line3 {
stroke: #218921;
animation-delay: 1s;
}
.upperContent {
width: 90%;
text-align: end;
padding-right: 10%;
position: absolute;
z-index: 5;
opacity: 0;
animation: fadeInText 2s forwards ease-in-out;
animation-delay: 3s;
}
.upperContent>h1 {
font-size: 80px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.upperContent>p {
font-size: 25px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-top: 5%;
}
.upperContent>h1,
.upperContent>p {
margin: 0;
padding: 0;
}
@keyframes fadeInText {
to {
opacity: 1;
transform: translateY(0);
}
}
nav {
width: 100%;
height: 60px;
background-color: #073c44;
text-align: center;
color: whitesmoke;
font-size: 50px;
}
</style>
</head>
<body>
<nav>
NAVBAR
</nav>
<div class="line-graph">
<div class="upperContent">
<h1>Turing.jl</h1>
<p>Bayesian inference with probabilistic programming</p>
</div>
<div class="Animation">
<svg width="2300" height="498" viewBox="0 0 2300 498" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="line line1"
d="M0 487C428.737 486.5 424.61 478.535 493.575 389C523.23 350.5 595.105 213 654.414 213C713.724 213 748.907 290 790.625 344.5C832.343 399 846.416 425.5 908.239 461.5C979.498 502.995 1144.47 487 2300 487" />
<path class="line line2"
d="M0 485.5C212.654 485.5 378.977 486 565.45 486C751.923 486 763.644 514.469 852.448 292.5C881.709 219.36 911.829 96 950.052 96C988.276 96 1016.27 197.222 1050.19 287.031C1116.15 461.682 1136.64 484.016 1322.06 484.016C1416.28 484.016 2076.04 486.5 2300 486.5" />
<path class="line line3"
d="M0 486.499C101.007 486.499 207.547 486.499 308.554 486.499C409.56 486.499 483.491 486.499 577.149 486.499C668.492 486.499 699.329 489.286 731.197 460.973C773.165 423.687 790.94 330.837 809.112 262.111C827.285 193.386 858.089 8 890.182 8C922.275 8 944 162.661 971.155 262.111C988.985 327.407 1006.43 426.95 1058.05 469.982C1081.26 489.327 1164.7 486.499 1248.64 486.499C1356.96 486.499 1406.25 486.499 1516.74 486.499C1627.23 486.499 2191.68 487 2300 487" />
</svg>
</div>
</div>
</body>
</html> |
Thanks for the feedback, those are good points. I'll have a look at the colours again. The SVG looks awesome! I'll try to integrate it into the current design in the coming days. I might also experiment with moving the "Turing.jl" header and subheader around a bit to align it better with the current content layout. |
Feel free to experiment anything! Let us know if you need any help! Thanks for all the efforts! |
* improve colors * better link hover color
* paste in svg * responsive svg header
|
I tried to make the SVG header work as well as possible on mobile screens. Do you have other ideas for the layout on mobile screens? I played with a few versions but preferred one where "Turing.jl" is the most prominent (instead of smaller and to the right of the distributions): 
|
Thank you, @simonsteiger!
It's looking good, I will let you if I get any other ideas! |
using the same background colour for the team "cards" as for the non-hoverable cards on the landing page
|
Let's wrap this up! Things to consider:
Suggest more if you have! |
|
@yebai @penelopeysm Please let us know if you have any suggestions to complete this PR! |
|
Hello @simonsteiger! I think the layout is very beautiful and elegant, and having done a bit of web design myself I know that tweaking CSS to make something look sleek is not trivial so I wanted to say that this is really, really good work :) Thank you! Some small comments:
I'm happy to continue discussing what other, additional, information is worth including. However, I strongly believe that that should be part of a separate PR, not this one. I try to avoid situations where the scope of an issue or a PR gets wider and wider, as it means that there's more to discuss, and it becomes harder to merge parts of it that everybody already agrees on. Unrelated to this PR. but my moonshot dream for the front page is to have a 'playground' - people can edit a model definition, select a sampler from a dropdown, then click a button and have it sample and display plots. I know this is not really possible (this would require either Julia -> WASM compilation, or a dedicated server machine) but just putting it out there. 😄 |
There was a problem hiding this comment.
Finally, given the amount of custom HTML code that is in this, I wonder whether it is still worth sticking with Quarto?
In my opinion, something like Astro would be better as this will still allow you to have page content in Markdown files, but it also allows you to build components and therefore make the HTML code more composable and reusable. Of course we could go the full distance and use a proper JS framework like React or (my favourite) Svelte.
It also makes it easier to add new features in the future (not just new content) as we'd be using tools meant for web design instead of trying to shoehorn web design into Quarto.
Quarto is pretty much irreplaceable for the docs repo because that involves running Julia code in notebooks, but I don't think we have any code execution in this repo.
As per my previous comment, I don't really think that this is something that should be changed now, but IMO it's something worth thinking about going forward, and I probably wouldn't mind taking that on.
Maybe these can help, just putting them here if we take this on in future! |
|
Hi @penelopeysm! I was really happy to read your comment – working on the design was a lot of fun, and it's of course great to hear that you think it looks beautiful and elegant.
Definitely! I'll change that.
I think that would work perfectly together with your other suggestion of making "Turing.jl" appear more quickly! (I guess that left-to-right flow is what you had in mind when you wrote the comment 🥲)
Great! I believe I just looked at some other docs and what they put there, but most of the content was really just intended to be placeholders. Slack and / or discourse sound like great choices.
I'll move it there!
I was probably taking inspiration from other docs and pages that were linked as potential inspiration by @shravanngoswamii in #101. So at the time of implementing that, I probably didn't give it much thought. 😄 |
Sure, that makes sense :) I wonder if you think this layout might be better? (it's just an Inkscape mockup) Happy to stick with the original too. It could just be that my brain is addicted to symmetry 😅 
|
Do you know what the location and scale parameters of the "Turing Gaussians" are? I feel like it'll be easier for me to just redraw them than to manually attempt to modify the SVG paths. Other suggestions for how to adjust these curves are of course very welcome – I have no experience here and would have just plotted them in Makie, exported to SVG, and added those paths to
I can relate to the lack of symmetry in that version! My attempts so far haven't worked well. Flexbox (or at least my knowledge of it) does not seem to easily accommodate this layout. Grid might be better for that, I guess? Apart from the obvious centering issue in the current version, I still feel like the extra row creates too much space. I'll keep trying though! 
|
|
Eek, I can see what you mean with the alignment, and I guess it's because 'Slack' and 'GitHub' have different widths? That's super annoying haha. You could make it work with grid but I'm not sure if that makes the responsive design more painful too. I'm totally fine with sticking to a single line! As for the SVG, I dug a little around the organisation and I think this is the script that's used to generate them: https://github.com/TuringLang/turing-logo-graphics/blob/master/src/logo.jl I ran it and it tells me that
|
- added links to discourse and slack to the buttons at the top of the page - moved link to libraries page to "Learn more" section
|
I guess we could remedy the "different lengths" problem of GitHub and Slack by setting a minimum width to all buttons, but that doesn't feel very elegant, and a short word like "Slack" might then look lost in a very wide button. Thank you for pointing me to the script with the Gaussians! I'll work on the footer next and continue iterating a bit with colours, in particular for the links since I agree that those aren't great. @shravanngoswamii also mentioned the dark mode in general – let me know what you think should be adapted. I would really like the header to be centered, too. I have some ideas I'd like to try, but I feel that quarto's defaults are getting in my way here, and I'm not super keen on wrangling my way past those. As @penelopeysm said earlier, a framework like Astro would be a great way to create (and reuse) components like a custom header. |
|
Please feel free to be more creative with the "logo" (Turing.jl text + Gaussian curves). You don't need to stick with three Gaussian curves if that helps. |
|
I'd be happy to help brainstorm ideas for the "logo" on the landing page but I don't know enough about, e.g., Javis.jl to help with creating the animation in the near future. Might it be an option to make the new animation a target for another PR? |
|
In the last changes, I have
I can add the talks, the workflow diagram, the MCMC table, and more inofficial tutorials if you post the info. If someone would briefly outline what information should be included in the texts for each of the subsections (e.g., next to the model examples), I can do my best to turn those points into proper texts (not a native speaker here though!). EDIT: Looking at the preview, I just realized that this update broke the "Turing.jl" text. I've had this happen on my local machine, too, after I updated to Quarto 1.6. After returning back to 1.5, all was well again. Not sure if I can fix this on my end. 🙄 |
|
@willtebbutt Could we trouble you to write the text for the GP model? (For your convenience, the preview for this PR is at https://turinglang.org/pr-previews/105/) |
Co-authored-by: Penelope Yong <[email protected]>
|
Sorry -- this slipped through the cracks somehow. What exactly is it that you would like me to do @penelopeysm ? |
|
@willtebbutt There's this placeholder text "Goodbye, World in Turing" next to a GP model. I thought you'd be the right person to ask about filling that in with real text 😄 |
|
"Goodbye, World in Turing" reads a bit informal to me. I'd suggest that we remove it. It's okay to have a GP model on the page to demonstrate Turing's interoperability with JuliaGPs. |
| Some text about how easy it is to interface with external packages like AbstractGPs. Learn more about modelling [Gaussian Processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/) with Turing.jl. | ||
| </div> | ||
| <div class="example-code"> | ||
| ```julia | ||
| @model function putting_model(d, n; jitter=1e-4) | ||
| v ~ Gamma(2, 1) | ||
| l ~ Gamma(4, 1) | ||
| f = GP(v * with_lengthscale(SEKernel(), l)) | ||
| f_latent ~ f(d, jitter) | ||
| binomials = Binomial.(n, logistic.(f_latent)) | ||
| y ~ product_distribution(binomials) | ||
| return (fx=f(d, jitter), f_latent=f_latent, y=y) | ||
| end | ||
| ``` |
There was a problem hiding this comment.
If I'm being totally honest, I'd be inclined to remove this example, and just have the link to the GPs page. Having the code here, and not making it something which gets run every time that the docs are built, is just asking for it to become outdated at some point.
In terms of the text, I'd really just say something along the lines of anything which behaves like a Distributions.jl distribution plays nicely with Turing.jl, e.g. [Gaussian processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/)
There was a problem hiding this comment.
That makes sense. We could just add the text as a new paragraph under "Hello, World in Turing" and use the space that the GP example took up for something else – maybe presenting the samplers? I recall that the old turing.ml website had something similar.
It seems that quarto 1.6.39 treats the first raw html I have now replaced |
Related to #101.
This PR contains a draft for a new landing page and the related styling changes.
Still missing in this draft are:
I'm happy to continue iterating on this, but thought that it might be a good time to discuss what I've currently got.