diff --git a/_quarto.yml b/_quarto.yml index 66222198d..c3910ddc4 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -17,8 +17,6 @@ website: navbar: logo: "assets/images/turing-logo.svg" logo-href: https://turinglang.org/ - background: "#073c44" - foreground: "#ffffff" left: - text: Get Started href: https://turinglang.org/docs/tutorials/docs-00-getting-started/ @@ -39,7 +37,7 @@ website: href: https://github.com/TuringLang/Turing.jl page-footer: - background: "#073c44" + #background: "#073c44" left: | Turing is created by Hong Ge, and lovingly maintained by the core team of volunteers.
The contents of this website are © 2024 under the terms of the MIT License. @@ -61,9 +59,9 @@ website: format: html: theme: - light: cosmo - dark: [cosmo, theming/theme-dark.scss] - css: theming/styles.css + light: [cosmo, theming/light.scss] + dark: [cosmo, theming/dark.scss] + highlight-style: github toc: true smooth-scroll: true code-overflow: wrap diff --git a/index.qmd b/index.qmd index d2bf8a679..502cd0d99 100644 --- a/index.qmd +++ b/index.qmd @@ -1,55 +1,176 @@ --- # pagetitle: "Turing" toc: false -page-layout: custom +page-layout: full section-divs: false hide-description: true +listing: +- id: news + contents: + - "news/posts/*/index.qmd" + sort: date desc + type: grid + grid-columns: 3 + categories: false + sort-ui: false + filter-ui: false + fields: [title, description, date] + max-items: 3 + image-height: "200" description: | Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language. --- -::: {.hero-banner} -::: {.grid} -::: {.g-col-1} -::: -::: {.g-col-8} - -# Turing.jl: Bayesian inference with probabilistic programming. - -### Intuitive -Turing models are easy to write and communicate — syntax is close to mathematical notations. - -### General-purpose -Turing supports models with discrete parameters and stochastic control flow. +```{=html} +
+ Three normal probability distributions + + Turing.jl + + + Bayesian inference with probabilistic programming + +
+ + Tutorials + + + Ecosystem + + + View on GitHub + +
+
+
+
+
+ Intuitive +
+ Turing models are easy to write and communicate — syntax is close to mathematical notations. +
+
+
+ General-purpose +
+ Turing supports models with discrete parameters and stochastic control flow. +
+
+
+ Modular & composable +
+ Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. +
+
+``` -### Modular and composable -Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. +
+
+
+ Hello, World in Turing +
+ Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/). +
+
+```julia +@model function coinflip(; N::Int) + # Prior belief about the probability of heads + p ~ Beta(1, 1) + # Heads or tails of a coin are drawn from `N` + # Bernoulli distributions with success rate `p` + y ~ filldist(Bernoulli(p), N) -::: {.hero-buttons style="position: relative; display: flex; justify-content: center;"} -[Get Started]({{< meta get-started >}}){.btn-action-primary .btn-action .btn .btn-lg role="button" style="background-color: #073c44; color: white"} -::: - -::: {.g-col-3} -::: -::: -::: + return y +end; +``` +
+
+
+
+
+ Goodbye, World in Turing +
+ 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. +
+
+```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 +``` +
+
-::: +```{=html} +

+ News +

+``` +::: {#news} -::: {style="position: relative; display: flex; justify-content: center;"} -::: {.grid} -::: {.g-col-1} ::: -::: {.g-col-8} -## Community Resources -The Turing.jl [discourse forum](https://discourse.julialang.org/c/domain/probprog) provides support and discussion for all user levels. -The [Turing.jl documentation]({{< meta get-started >}}) and [official tutorials]({{< meta tutorials-intro >}}) help users learn and use Turing.jl! -There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https://storopoli.io/Bayesian-Julia). +[See all news →](news/) -::: -::: {.g-col-3} -::: -::: -::: +```{=html} +

+ Learn more +

+
+ +
+ Discourse +
+

+ Get support from and discuss with other users. +

+ + +
+ Documentation +
+

+ Familiarize yourself with the Turing.jl API. +

+ + +
+ Official tutorials +
+

+ Learn to tackle specific problems with Turing.jl. +

+ + +
+ Inofficial tutorials +
+

+ A list of inofficial tutorials using Turing.jl. +

+ + +
+ Talks +
+

+ A list of talks on the Turing.jl ecosystem. +

+ + +
+ Workshop +
+

+ Placeholder for Turing-Workshop repo link. +

+ +
+``` diff --git a/resources/content/inofficial_tutorials.qmd b/resources/content/inofficial_tutorials.qmd new file mode 100644 index 000000000..2b2e64772 --- /dev/null +++ b/resources/content/inofficial_tutorials.qmd @@ -0,0 +1,5 @@ +--- +title: Inofficial tutorials +--- + +TODO: Add a list of inofficial tutorials. diff --git a/resources/content/talks.qmd b/resources/content/talks.qmd new file mode 100644 index 000000000..7ebb45317 --- /dev/null +++ b/resources/content/talks.qmd @@ -0,0 +1,5 @@ +--- +title: Talks +--- + +TODO: Add a list of inofficial talks. diff --git a/theming/dark.scss b/theming/dark.scss new file mode 100644 index 000000000..cdaef1065 --- /dev/null +++ b/theming/dark.scss @@ -0,0 +1,21 @@ +/*-- scss:defaults --*/ +// Cosmo 5.3.3 +// Bootswatch + +$theme: "cosmo" !default; +@import "variables/grays"; +@import "variables/colorsdark"; +@import "variables/borders"; +@import "variables/spacers"; + +/*-- scss:rules --*/ + +@import "rules/mixins"; + +@import "rules/layouts"; +@import "rules/hoverables-dark"; +@import "rules/navbar"; +@import "rules/quarto-tweaks"; + +@import "old/old-styles"; + diff --git a/theming/light.scss b/theming/light.scss new file mode 100644 index 000000000..434c7a626 --- /dev/null +++ b/theming/light.scss @@ -0,0 +1,19 @@ +/*-- scss:defaults --*/ + +@import "variables/grays"; +@import "variables/colorslight"; +@import "variables/borders"; +@import "variables/spacers"; + +/*-- scss:rules --*/ + +@import "rules/mixins"; + +@import "rules/layouts"; +@import "rules/hoverables-light"; +@import "rules/navbar"; +@import "rules/quarto-tweaks"; + +@import "old/old-styles"; + +// \ No newline at end of file diff --git a/theming/old/_old-styles.scss b/theming/old/_old-styles.scss new file mode 100644 index 000000000..9f8f2ff79 --- /dev/null +++ b/theming/old/_old-styles.scss @@ -0,0 +1,47 @@ +/* css styles */ +/* .cell-output { + background-color: #f1f3f5; +} */ + +/* .cell-output img { + max-width: 100%; + height: auto; +} */ + +/* .cell-output-display pre { + word-break: break-wor !important; + white-space: pre-wrap !important; +} + */ + +/* now included in _navbar.scss + .navbar a:hover { + text-decoration: none; +} +*/ + +.cell-output { + border: 1px dashed; +} + +.cell-output-stdout code { + word-break: break-wor !important; + white-space: pre-wrap !important; +} + + +.cell-output-display svg { + height: fit-content; + width: fit-content; +} + +.cell-output-display img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.nav-footer-center { + display: flex; + justify-content: center; +} diff --git a/theming/rules/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss new file mode 100644 index 000000000..9076ac941 --- /dev/null +++ b/theming/rules/_hoverables-dark.scss @@ -0,0 +1,33 @@ +.button { + @include button($border-hover); +} + +.card { + @include card($border-hover); + + .card-text { + color: $text-muted; + } +} + +.example-code { + flex: 0 1 45%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.example-text { + flex: 0 1 53%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; +} diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss new file mode 100644 index 000000000..5b5cfc766 --- /dev/null +++ b/theming/rules/_hoverables-light.scss @@ -0,0 +1,29 @@ +.button { + @include button($border-hover) +} + +.card { + @include card($border-hover) +} + +.example-code { + flex: 0 1 45%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.example-text { + flex: 0 1 53%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; +} diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss new file mode 100644 index 000000000..26ca556f1 --- /dev/null +++ b/theming/rules/_layouts.scss @@ -0,0 +1,42 @@ +.content-panel { + padding: 1.5rem; +} + +.section-end-space { + padding-bottom: $large-y-space; +} + +.section-start-space { + padding-top: $large-y-space; +} + +.panel { + border-radius: $border-radius-sm; + padding: 1rem 1.25rem; + min-height: 150px; + min-width: 300px; + max-width: 31%; + + color: $text-muted !important; + background-color: $color-mute-bg !important; + border: solid $color-mute-bg 0px !important; + + .panel-title { + color: $color-fg !important; + font-size: x-large; + font-weight: 700; + } + + &--nopad { + @extend .panel; + padding: 0rem; + } +} + +.panel-wrapper { + justify-content: space-between; + + @media screen and (max-width: 992px) { + justify-content: center; + } +} diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss new file mode 100644 index 000000000..9eb8c54e1 --- /dev/null +++ b/theming/rules/_mixins.scss @@ -0,0 +1,56 @@ +@mixin raw-card { + border-radius: $border-radius-sm; + padding: 1rem; + + --bs-card-spacer-x: 0rem !important; + --bs-card-spacer-y: 0rem !important; + + color: $color-fg !important; + background-color: $color-secondary !important; + border: solid $color-secondary 1px !important; + + transition: background-color 0.3s ease, border-color 0.3s ease !important; +} + +@mixin card($hover-border) { + @include raw-card; + + .card-title { + color: $color-fg !important; + font-weight: 700; + } + + &:hover { + background-color: $color-highlight !important; + border-color: $hover-border !important; + } +} + +@mixin raw-button { + padding: 0.5rem 1rem; + border-radius: 25px; + border: solid $text-muted 1px; + color: $color-fg; + background-color: $body-bg; + + &:hover { + background-color: $color-mute-bg !important; + border-color: $color-mute-bg !important; + text-decoration: none; + } +} + +@mixin button($hover-border) { + @include raw-button; + + &--fill { + @extend .button; + background-color: $color-secondary; + border: solid $color-secondary 1px; + + &:hover { + background-color: $color-highlight !important; + border-color: $hover-border !important; + } + } +} \ No newline at end of file diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss new file mode 100644 index 000000000..f16f5f40f --- /dev/null +++ b/theming/rules/_navbar.scss @@ -0,0 +1,17 @@ +.navbar { + background-color: $body-bg; + color: $text-muted; + + a:hover { + text-decoration: none !important; + } + + .nav-link:hover { + color: $link-color !important; + } + + .navbar-brand:hover { + color: $link-color !important; + transition: color 0.15s ease-in-out !important; + } +} diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss new file mode 100644 index 000000000..f95be0518 --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,36 @@ +.sourceCode { + background-color: $color-mute-bg !important; + border-color: $color-mute-bg !important; + border-radius: $border-radius-sm !important; + + pre { + padding: 0.5rem !important; + } +} + +.quarto-title-banner { + background-color: $body-bg !important; + + .title { + color: $color-fg !important; + } +} + +.listing-description { + .no-external { + color: $text-muted !important; + } +} + +.input-group-text { + background-color: $color-mute-bg !important; +} + +a { + text-decoration: none; + &:hover { + color: $link-color; + text-decoration: underline; + } + +} diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss deleted file mode 100644 index caa2c5b29..000000000 --- a/theming/theme-dark.scss +++ /dev/null @@ -1,139 +0,0 @@ -/*-- scss:defaults --*/ -// Cosmo 5.3.3 -// Bootswatch - -$theme: "cosmo" !default; - -// Manually-added colors - -$background-nav: #192222; -$background-body: #131818; -$foreground: #1bb3ac; -$foreground-dark: #073c44; -$links:#2aa198; -$links-hover: #31dce6; -$code-background-color: #172424; -$li: #bcbcbc; - -// Quarto default colors - -$white: #ffffff !default; -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; -$gray-400: #ced4da !default; -$gray-500: #adb5bd !default; -$gray-600: #868e96 !default; -$gray-700: #495057 !default; -$gray-800: #373a3c !default; -$gray-900: #212529 !default; -$black: #000000 !default; - -$indigo: #6610f2 !default; -$purple: #613d7c !default; -$pink: #e83e8c !default; -$red: #ff0039 !default; -$orange: #f0ad4e !default; -$yellow: #ff7518 !default; -$green: #3fb618 !default; -$teal: #20c997 !default; -$cyan: #9954bb !default; - -$primary: $links-hover !default; -$secondary: $gray-800 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; - -$min-contrast-ratio: 2.6 !default; - -// Options - -$enable-rounded: false !default; - -// Fonts - -// stylelint-disable-next-line value-keyword-case -$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$headings-font-weight: 400 !default; - -// Tables - -$table-color: initial !default; - -// Alerts - -$alert-border-width: 0 !default; - -// Progress bars - -$progress-height: .5rem !default; - - -// Custom tweaks for Quarto-Cosmo - -$navbar-bg: $background-nav; -$navbar-fg: $foreground; -$footer-bg: $background-nav; -$footer-fg: $foreground; -$body-color: $white; -$body-bg: $background-body; - -a { - color: $links !important; -} - -a:hover { - color: $links-hover !important; -} - -code, p code, li code { - background-color: $code-background-color !important; - color: $links; -} - -li { - color: $li !important; -} - -.menu-text:hover { - color: $links-hover !important; -} - -.quarto-title-banner { - background-color: $foreground-dark !important; -} - -.title { - color: $white !important; -} - -.listing-description a { - color: $li !important; -} - -p { - color: $li !important; -} - - -.team-member, .input-group-text { - background-color: $background-nav !important; -} - -.level4, .listing-category { - color: $foreground !important; -} - -::selection { - color: $links-hover; - background: $background-nav; -} - -.tooltip { - --bs-tooltip-color: $black !important; - --bs-tooltip-bg: $white !important; -} diff --git a/theming/variables/_borders.scss b/theming/variables/_borders.scss new file mode 100644 index 000000000..e96ef65f7 --- /dev/null +++ b/theming/variables/_borders.scss @@ -0,0 +1,6 @@ +$border-radius-lg: 1rem; +$border-radius-sm: 0.5rem; +$border-width-lg: 2px; +$border-width: 1px; +$border-width-sm: 0.5px; +$default-border-wide: $border-width solid $light-bg-offset; diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss new file mode 100644 index 000000000..44fc3d24b --- /dev/null +++ b/theming/variables/_colorsdark.scss @@ -0,0 +1,26 @@ +$dark-green: #073c44; +$light-blue: darken(#EDF4F4, 5%); +$red: #f87683; +$medium-grey: #bcbcbc; + +$color-primary: $light-blue; // not sure about this one +$color-secondary: $dark-green; +$color-tertiary: $red; +$color-highlight: darken($color-secondary, 5%); + +$color-mute-bg: $gray-800; + +$body-color: white; +$body-bg: #201F24; +$light-bg-offset: $color-secondary; +$color-fg: white; + +$text-muted: $medium-grey; + +$color-active: lighten($color-secondary, 5%); +$link-color: $color-tertiary; +$border-hover: $color-active; + +p { + color: $text-muted !important; +} diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss new file mode 100644 index 000000000..102715630 --- /dev/null +++ b/theming/variables/_colorslight.scss @@ -0,0 +1,20 @@ +$dark-green: #073c44; +$red: #d73a4a; +$light-blue: #EDF4F4; +$medium-grey: #CCD1D5; +$color-fg: black; + +$color-primary: $dark-green; +$color-secondary: darken($light-blue, 20%); +$color-tertiary: $red; +$color-highlight: lighten($color-secondary, 10%); + +$color-mute-bg: $gray-200; + +$color-active: lighten($color-secondary, 5%); +$link-color: $color-tertiary; +$border-hover: darken($color-secondary, 5%); + +$body-bg: white; +$light-bg-offset: $color-secondary; + diff --git a/theming/variables/_grays.scss b/theming/variables/_grays.scss new file mode 100644 index 000000000..4284ed369 --- /dev/null +++ b/theming/variables/_grays.scss @@ -0,0 +1,11 @@ +$white: #ffffff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #373a3c !default; +$gray-900: #212529 !default; +$black: #000000 !default; diff --git a/theming/variables/_spacers.scss b/theming/variables/_spacers.scss new file mode 100644 index 000000000..f816d9abe --- /dev/null +++ b/theming/variables/_spacers.scss @@ -0,0 +1 @@ +$large-y-space: 6rem; \ No newline at end of file