Skip to content

Commit 9a58952

Browse files
shravanngoswamiisimonsteigerpenelopeysm
authored
New Landing Page + Theming (#119)
* first part of new landing page (#1) * very basic redesign * make buttons interactive * Add code examples (#2) * add dangling code example * add code example section * Add news (#3) * quickfix alignment * add news and clean up scss * better alignment * add resources / "learn more" section * Improved colours (#4) * improve colors * better link hover color * better navbar text contrast * Add SVG header (#5) * paste in svg * responsive svg header * fix "learn more" hover text-deco * style team page for dark mode using the same background colour for the team "cards" as for the non-hoverable cards on the landing page * more relevant links at top of page - added links to discourse and slack to the buttons at the top of the page - moved link to libraries page to "Learn more" section * mirror gaussians and title * add css for code in dark mode * shorten footer for better fit on mobile * underline links in footer * responsive header size * content placeholders on landing page * Apply suggestions from code review Co-authored-by: Penelope Yong <[email protected]> * fix "logo" display by removing h1 * _quarto.yml: comments rewritten * Turned HTML to Quarto Markdown and added _includes to keep the main page clean * moved news to _included & added News section sliding animation * Improve news animation * removed new styles from this PR but added similar new theme in old format * Removed new styles of Simon, Updated tons of CSS to match new theme We will create new PR for Simon's new style * fixed search results color in dark mode * Added citations and commented placeholder text * fix new height & copy button css in dark mode * Updated News section to have fixed height & updated landing page codes * added arrows for moving forward and backward in news * Experiment another approach on news carousel * speeding news carousel * don't highlight tutorials button * update placeholder text * move tutorial button * fix unclosed div * fix buttons properly * polish text * delete whatever i wrote * fix unclosed div etc * refresh news * using quarto listing for news carousel * Updated news carousel * Mouse scroll in news works fine now * Updated lot of things, yet to remove news section * fix urls * Removed news section, added brands, improvded citations and other parts * added brands id * fix team theme in dark mode * trying custom page-layout * added side-space * fix libraries page in dark mode * few more fixes * brands text update * Add Alan Turing Institute Logo * fix ATI url * Add maX width as suggested by @simonsteiger * Add News and Tutorials on Landing Page * remove logo animation, add news and tuturials, add core packages, improve overall responsiveness * Updated logo and Added New Logo in Header * add on hover border on all boxes * fix colors in dark mode * Add custom footer, improve citations, fix responsiveness, update theme a bit * rewrite raw html in quarto markdown, update footer text, core package descriptions and few urls * update citation icons and footer text * Add on hover tooltip for citation icons * improve citations icon * Update header text * commit suggestions * apply suggestions * Minor Styling Fixes * save Cambridge University logo in assets * update .gitignore * dark mode news improvs * update my photo in team page * latest newsletter on landing page * fix search bar bg color in dark mode * drop css for scss + few style changes * add hover color for navbar items * minor design tweaks and fixes for news and libraries page + overall improvements * Add $body-bg for just in case we use it * Add code-block in What is Turing.jl? Section * experiment merging what is turing and header buttons * Add codeblock title * Update index.qmd Co-authored-by: Penelope Yong <[email protected]> * Update index.qmd Co-authored-by: Penelope Yong <[email protected]> * Update _quarto.yml Co-authored-by: Penelope Yong <[email protected]> * add tooltip css for dark mode * Add all social icons in navbar * add image for SEO * Enable Open Graph and Twitter Cards * Update _quarto.yml * add png, jpg logo and test open graph image * test open graph image * open graph test * open graph test * Open Graph ready! * CLEANUP * Remove hover effect from codeblock * Remove emojis from Start Your Journey Section --------- Co-authored-by: Simon Steiger <[email protected]> Co-authored-by: simonsteiger <[email protected]> Co-authored-by: Penelope Yong <[email protected]>
1 parent 3c30dca commit 9a58952

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2229
-343
lines changed

.gitignore

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1-
1+
*.tmp
2+
*.aux
3+
*.log
4+
*.out
5+
*.tex
6+
Testing/
7+
/*/*/jl_*/
8+
.vscode
9+
_freeze
10+
_site
11+
.quarto
212
/.quarto/
3-
_site/
13+
.venv
14+
venv
15+
16+
404.html
17+
site_libs
18+
.DS_Store
19+
index_files
20+
digest.txt

_includes/card-listing.ejs

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
```{=html}
2+
<div class="unified-card-grid">
3+
<% for (const item of items) { %>
4+
<a href="<%- item.href ? item.href : item.path %>" class="unified-card box">
5+
<div class="unified-card-body">
6+
<h5 class="unified-card-title"><%- item.title %></h5>
7+
<p class="unified-card-text"><%- item.description %></p>
8+
9+
<% if (item.category) { %>
10+
<div class="unified-card-categories">
11+
<% if (Array.isArray(item.category)) { %>
12+
<% item.category.forEach(function(cat) { %>
13+
<span class="category-tag"><%- cat %></span>
14+
<% }); %>
15+
<% } else { %>
16+
<span class="category-tag"><%- item.category %></span>
17+
<% } %>
18+
</div>
19+
<% } %>
20+
</div>
21+
22+
<% if (item.author || item.date || item['reading-time']) { %>
23+
<div class="unified-card-footer">
24+
<div class="unified-card-meta">
25+
<% if (item.author) { %>
26+
<span class="unified-card-author">
27+
<% if (Array.isArray(item.author)) { %>
28+
<%= item.author.map(a => a.name || a).join(', ') %>
29+
<% } else { %>
30+
<%= item.author %>
31+
<% } %>
32+
</span>
33+
<% } %>
34+
<% if (item.date) { %>
35+
<span class="unified-card-date">
36+
<%= new Date(item.date).toLocaleDateString('en-US', {
37+
year: 'numeric',
38+
month: 'short',
39+
day: 'numeric'
40+
}) %>
41+
</span>
42+
<% } %>
43+
</div>
44+
<% if (item['reading-time']) { %>
45+
<span class="unified-card-reading-time"><%- item['reading-time'] %></span>
46+
<% } %>
47+
</div>
48+
<% } %>
49+
</a>
50+
<% } %>
51+
</div>
52+
```

_includes/citation/cite.qmd

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!-- TODO: Add a better citations (maybe publication system) to list research work of all Turing ecosystem packages ) -->
2+
3+
```{=html}
4+
<div class="citation-container">
5+
<h3 id="cite" class="pb-1 text-center">Turing.jl is an <a href="https://github.com/TuringLang/Turing.jl/blob/main/LICENCE" class="turing-license-link"><code>MIT</code></a> Licensed Open Source Project</h3>
6+
<p class="text-center">If you use Turing.jl in your research, please consider citing our papers.</p>
7+
8+
<ul id="citation-list" class="citation-list">
9+
<!-- Citations will be dynamically injected here -->
10+
</ul>
11+
</div>
12+
13+
<style>
14+
.citation-icon-btn[data-tooltip]:hover::after {
15+
content: attr(data-tooltip);
16+
position: absolute;
17+
bottom: 108%;
18+
left: 50%;
19+
transform: translateX(-50%);
20+
background-color: rgba(0, 0, 0, 0.85);
21+
color: #fff;
22+
padding: 6px 12px;
23+
border-radius: 4px;
24+
font-size: 13px;
25+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
26+
white-space: nowrap;
27+
z-index: 9999;
28+
opacity: 0;
29+
visibility: hidden;
30+
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
31+
transform: translateX(-50%) translateY(5px);
32+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
33+
}
34+
35+
.citation-icon-btn[data-tooltip]:hover::after {
36+
opacity: 1;
37+
visibility: visible;
38+
transform: translateX(-50%) translateY(0);
39+
}
40+
41+
.citation-icon-btn {
42+
position: relative;
43+
}
44+
</style>
45+
46+
<script>
47+
// DATA: Add new BibTeX entries here
48+
const bibtexData = [
49+
`@article{10.1145/3711897,
50+
author = {Fjelde, Tor Erlend and Xu, Kai and Widmann, David and Tarek, Mohamed and Pfiffer, Cameron and Trapp, Martin and Axen, Seth D. and Sun, Xianda and Hauru, Markus and Yong, Penelope and Tebbutt, Will and Ghahramani, Zoubin and Ge, Hong},
51+
title = {Turing.jl: a general-purpose probabilistic programming language},
52+
year = {2025},
53+
publisher = {Association for Computing Machinery},
54+
address = {New York, NY, USA},
55+
url = {https://doi.org/10.1145/3711897},
56+
doi = {10.1145/3711897},
57+
abstract = {Probabilistic programming languages (PPLs) are becoming increasingly important in many scientific disciplines, such as economics, epidemiology, and biology, to extract meaning from sources of data while accounting for one's uncertainty. The key idea of probabilistic programming is to decouple inference and model specification, thus allowing the practitioner to approach their task at hand using Bayesian inference, without requiring extensive knowledge in programming or computational statistics. At the same time, the complexity of problem settings in which PPLs are employed is steadily increasing, both in terms of project size and model complexity, calling for more flexible and efficient systems. In this work, we describe Turing.jl, a general-purpose PPL, which is designed to be flexible, efficient, and easy to use. Turing.jl is built on top of the Julia programming language, which is known for its high performance and ease-of-use. We describe the design of Turing.jl, contextualizing it within different types of users and use cases, its key features, and how it can be used to solve a wide range of problems. We also provide a brief overview of the ecosystem around Turing.jl, including the different libraries and tools that can be used in conjunction with it. Finally, we provide a few examples of how Turing.jl can be used in practice.},
58+
note = {Just Accepted},
59+
journal = {ACM Trans. Probab. Mach. Learn.},
60+
month = feb,
61+
keywords = {Probabilistic Programming, Probabilistic Programming Languages, Probabilistic Inference, Bayesian Inference, Markov Chain Monte Carlo, Variational Inference, Sequential Monte Carlo, Uncertainty Quantification, Modeling Methodologies, Latent Variable Models, Maximum a Posteriori Modeling, Software Libraries and Repositories, Bayesian Computation, Variational Methods, Sequential Monte Carlo Methods}
62+
}`,
63+
`@InProceedings{pmlr-v84-ge18b,
64+
title = {Turing: A Language for Flexible Probabilistic Inference},
65+
author = {Ge, Hong and Xu, Kai and Ghahramani, Zoubin},
66+
booktitle = {Proceedings of the Twenty-First International Conference on Artificial Intelligence and Statistics},
67+
pages = {1682--1690},
68+
year = {2018},
69+
editor = {Storkey, Amos and Perez-Cruz, Fernando},
70+
volume = {84},
71+
series = {Proceedings of Machine Learning Research},
72+
month = {09--11 Apr},
73+
publisher = {PMLR},
74+
pdf = {http://proceedings.mlr.press/v84/ge18b/ge18b.pdf},
75+
url = {https://proceedings.mlr.press/v84/ge18b.html},
76+
abstract = {Probabilistic programming promises to simplify and democratize probabilistic machine learning, but successful probabilistic programming systems require flexible, generic and efficient inference engines. In this work, we present a system called Turing for building MCMC algorithms for probabilistic programming inference. Turing has a very simple syntax and makes full use of the numerical capabilities in the Julia programming language, including all implemented probability distributions, and automatic differentiation. Turing supports a wide range of popular Monte Carlo algorithms, including Hamiltonian Monte Carlo (HMC), HMC with No-U-Turns (NUTS), Gibbs sampling, sequential Monte Carlo (SMC), and several particle MCMC (PMCMC) samplers. Most importantly, Turing inference is composable: it combines MCMC operations on subsets of variables, for example using a combination of an HMC engine and a particle Gibbs (PG) engine. We explore several combinations of inference methods with the aim of finding approaches that are both efficient and universal, i.e. applicable to arbitrary probabilistic models. NUTS—a popular variant of HMC that adapts Hamiltonian simulation path length automatically, although quite powerful for exploring differentiable target distributions, is however not universal. We identify some failure modes for the NUTS engine, and demonstrate that composition of PG (for discrete variables) and NUTS (for continuous variables) can be useful when the NUTS engine is either not applicable, or simply does not work well. Our aim is to present Turing and its composable inference engines to the world and encourage other researchers to build on this system to help advance the field of probabilistic machine learning.}
77+
}`
78+
];
79+
80+
/**
81+
* A BibTeX parser.
82+
* Extracts key-value pairs from a BibTeX string.
83+
* @param {string} bibtex - The raw BibTeX string.
84+
* @returns {object} - An object with parsed data.
85+
*/
86+
function parseBibtex(bibtex) {
87+
const data = { raw: bibtex };
88+
const regex = /(\w+)\s*=\s*[\{"']([^"'}]+)[\}"']/g;
89+
let match;
90+
while ((match = regex.exec(bibtex)) !== null) {
91+
data[match[1].toLowerCase()] = match[2];
92+
}
93+
return data;
94+
}
95+
96+
/**
97+
* Creates an HTML string for a single citation entry.
98+
* @param {object} bibData - The parsed BibTeX data.
99+
* @returns {string} - The HTML string for the list item.
100+
*/
101+
function generateCitationHTML(bibData) {
102+
const { author, title, journal, booktitle, year, note, url, doi, raw } = bibData;
103+
104+
let publicationInfo = '';
105+
if (journal) {
106+
publicationInfo += `<em>${journal}</em>.`;
107+
} else if (booktitle) {
108+
publicationInfo += `In <em>${booktitle}</em>.`;
109+
}
110+
if (note) {
111+
publicationInfo += ` ${note}.`;
112+
}
113+
114+
const viewUrl = url || (doi ? `https://doi.org/${doi}` : '#');
115+
116+
// The author string is now used directly from the bibtex data without formatting.
117+
const authorsFormatted = author || 'N/A';
118+
119+
return `
120+
<li class="citation-entry box">
121+
<div class="citation-content">
122+
<p class="citation-text">
123+
${authorsFormatted} (${year}). <span class="citation-title">${title}.</span> ${publicationInfo}
124+
</p>
125+
</div>
126+
<div class="citation-actions">
127+
<a href="${viewUrl}" target="_blank" rel="noopener noreferrer" class="citation-icon-btn" aria-label="View Paper: ${title}" title="View Paper" data-tooltip="View Paper">
128+
<i class="bi bi-box-arrow-up-right"></i>
129+
</a>
130+
<button class="citation-icon-btn copy-bibtex-btn" aria-label="Copy BibTeX for ${title}" title="Copy BibTeX" data-tooltip="Copy BibTeX">
131+
<!-- Custom SVG for citation icon -->
132+
<svg fill="currentColor" height="135px" width="135px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 191.029 191.029" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M44.33,88.474v15.377h38.417v82.745H0v-82.745h0.002V88.474c0-31.225,8.984-54.411,26.704-68.918 C38.964,9.521,54.48,4.433,72.824,4.433v44.326C62.866,48.759,44.33,48.759,44.33,88.474z M181.107,48.759V4.433 c-18.343,0-33.859,5.088-46.117,15.123c-17.72,14.507-26.705,37.694-26.705,68.918v15.377h0v82.745h82.744v-82.745h-38.417V88.474 C152.613,48.759,171.149,48.759,181.107,48.759z"></path> </g></svg>
133+
</button>
134+
</div>
135+
<pre class="citation-bibtex-data" style="display:none;">${raw}</pre>
136+
</li>
137+
`;
138+
}
139+
140+
function copyBibtex(buttonElement) {
141+
const citationEntry = buttonElement.closest('.citation-entry');
142+
if (!citationEntry) return;
143+
144+
const bibtexPreElement = citationEntry.querySelector('.citation-bibtex-data');
145+
if (!bibtexPreElement) return;
146+
147+
const bibtexText = bibtexPreElement.textContent.trim();
148+
149+
if (navigator.clipboard && window.isSecureContext) {
150+
navigator.clipboard.writeText(bibtexText)
151+
.then(() => showSuccess(buttonElement))
152+
.catch(err => {
153+
console.error('Async copy failed, falling back:', err);
154+
fallbackCopy(bibtexText, buttonElement);
155+
});
156+
} else {
157+
fallbackCopy(bibtexText, buttonElement);
158+
}
159+
}
160+
161+
function fallbackCopy(text, buttonElement) {
162+
const textArea = document.createElement('textarea');
163+
textArea.value = text;
164+
textArea.style.position = 'fixed';
165+
textArea.style.top = '-9999px';
166+
textArea.style.left = '-9999px';
167+
document.body.appendChild(textArea);
168+
textArea.focus();
169+
textArea.select();
170+
try {
171+
const successful = document.execCommand('copy');
172+
if (successful) {
173+
showSuccess(buttonElement);
174+
} else {
175+
showError(buttonElement);
176+
}
177+
} catch (err) {
178+
console.error('Fallback copy failed:', err);
179+
showError(buttonElement);
180+
}
181+
document.body.removeChild(textArea);
182+
}
183+
184+
function showSuccess(buttonElement) {
185+
const originalIcon = buttonElement.innerHTML;
186+
buttonElement.innerHTML = '✓';
187+
buttonElement.classList.add('citation-copied');
188+
buttonElement.disabled = true;
189+
190+
setTimeout(() => {
191+
buttonElement.innerHTML = originalIcon;
192+
buttonElement.classList.remove('citation-copied');
193+
buttonElement.disabled = false;
194+
}, 2000);
195+
}
196+
197+
function showError(buttonElement) {
198+
const originalIcon = buttonElement.innerHTML;
199+
buttonElement.innerHTML = 'X';
200+
buttonElement.disabled = true;
201+
setTimeout(() => {
202+
buttonElement.innerHTML = originalIcon;
203+
buttonElement.disabled = false;
204+
}, 2000);
205+
}
206+
207+
document.addEventListener('DOMContentLoaded', () => {
208+
const container = document.getElementById('citation-list');
209+
if (!container) return;
210+
211+
// Generate and inject HTML
212+
const allCitationsHTML = bibtexData.map(bib => generateCitationHTML(parseBibtex(bib))).join('');
213+
container.innerHTML = allCitationsHTML;
214+
215+
container.addEventListener('click', function(event) {
216+
const button = event.target.closest('.copy-bibtex-btn');
217+
if (button) {
218+
copyBibtex(button);
219+
}
220+
});
221+
});
222+
</script>
223+
```

_includes/featured-tutorials.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
- title: "Get Started with Turing.jl"
2+
href: "https://turinglang.org/docs/getting-started/"
3+
description: "Our step-by-step tutorials will guide you from installation to your first probabilistic models."
4+
category:
5+
- "Basics"
6+
- "Getting Started"
7+
8+
- title: "Introduction: Coin Flipping"
9+
href: "https://turinglang.org/docs/tutorials/coin-flipping/"
10+
description: "Learn the basic concepts of Bayesian modeling by working through a simple coin-flipping example."
11+
category:
12+
- "Basics"
13+
- "Modeling"
14+
15+
- title: "Core Functionality"
16+
href: "https://turinglang.org/docs/core-functionality/"
17+
description: "This article provides an overview of the core functionality in Turing.jl, which are likely to be used across a wide range of models."
18+
category:
19+
- "Basics"
20+
- "Features"

_includes/header.qmd

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```{=html}
2+
<div class="hero-section">
3+
<div class="hero-content text-center">
4+
<img src="./assets/logo/turing-logo-light.svg" alt="Turing Logo" class="hero-logo hero-logo-light">
5+
<img src="./assets/logo/turing-logo-dark.svg" alt="Turing Logo" class="hero-logo hero-logo-dark">
6+
<p class="hero-subtitle">Bayesian inference with probabilistic programming</p>
7+
</div>
8+
</div>
9+
```

0 commit comments

Comments
 (0)