diff --git a/.gitignore b/.gitignore
index 83130bc..672ef99 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ hugo.darwin
 # Quarto
 /.quarto/
 /_site/
+.venv/
diff --git a/VEGA-LITE-SETUP.md b/VEGA-LITE-SETUP.md
index 47589cb..e8273c0 100644
--- a/VEGA-LITE-SETUP.md
+++ b/VEGA-LITE-SETUP.md
@@ -18,7 +18,7 @@
 ### Basic Usage
 
 ````markdown
-```{vega-lite}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "data": {
@@ -39,18 +39,19 @@
 ### With Options
 
 ````markdown
-```{vega-lite}
-#| echo: false
-#| code-fold: true
+```{.vega-lite echo=false}
 {your vega spec}
 ```
 ````
 
 **Supported options:**
-- `echo: false` - Hide the code, show only the visualization
-- `echo: true` - Show both code and visualization (default)
-- `code-fold: true` - Make code collapsible (collapsed by default)
-- `code-fold: show` - Make code collapsible but open by default
+- `echo=false` - Hide the code, show only the visualization
+- `echo=true` - Show code (default)
+- `code-fold=true` - Make code collapsible and collapsed (default)
+- `code-fold=show` - Make code collapsible but expanded by default
+- `code-fold=false` - Show code expanded, not collapsible
+
+**Default behavior:** Code is shown in a collapsed, expandable section. Click to view the code.
 
 ## 🔧 How the Filter Works
 
@@ -81,7 +82,7 @@ The `vega-lite.lua` filter:
 
 **Quarto with Lua filter (NEW):**
 ````markdown
-```{vega-lite}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "mark": "bar",
@@ -107,7 +108,7 @@ The `vega-lite.lua` filter:
 
 3. **Replace with code fence:**
    ````markdown
-   ```{vega-lite}
+   ```{.vega-lite}
    {your JSON spec here}
    ```
    ````
@@ -140,7 +141,7 @@ categories:
 
 ## Simple Bar Chart
 
-```{vega-lite}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "description": "A simple bar chart",
@@ -178,4 +179,4 @@ categories:
 - Verify Vega-Lite spec schema version matches (v5)
 
 **Code block shown as plain text:**
-- Make sure you're using ````{vega-lite}` not ````{json}` or ````json`
+- Make sure you're using ````{.vega-lite}` not ````{json}` or ````json`
diff --git a/_quarto.yml b/_quarto.yml
index 2016da6..5d262fd 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -57,3 +57,7 @@ format:
 
 execute:
   freeze: auto
+
+echo: true
+code-fold: true
+code-summary: "Click to show code"
\ No newline at end of file
diff --git a/posts/bar-charts-makeover.qmd b/posts/bar-charts-makeover.qmd
index 416d4dc..3c19d50 100644
--- a/posts/bar-charts-makeover.qmd
+++ b/posts/bar-charts-makeover.qmd
@@ -1,17 +1,14 @@
 ---
 title: "Bar Charts: Makeover in Vega-Lite"
 date:  2025-07-07
-draft: false
+image: https://static.olehomelchenko.com/blog/tableau-seven-bar-charts-yoy-growth.png
 
-load_vega: true
 tags:
   - dataviz
   - vega-lite
   - makeover
 ---
 
-## oeuth
-
 Of all tools for data visualization, I mostly enjoy working with Vega-Lite. As I enhance my skills in making the visualizations using it, I become increasingly interesting not just in the "dataviz" part of its capabilities, but also on making it aesthetically compelling, as well as challenging myself to reach the limits of what is possible with Vega-Lite. I am by no means near the limits so far, however I got increasingly interested in replicating the charts I see throughout the internet.
 
 One that caught me attention is Tableau's Viz of the Day: [Seven Bar Charts to Visualise Year-Over-Year Growth](https://public.tableau.com/app/profile/jacob.rothemund/viz/SevenBarChartstoVisualiseYear-Over-YearGrowth/Dashboard)
@@ -75,7 +72,7 @@ After this, we can make the following layers:
 - `text` mark with calculated `text_label`
 - two separate `point` mark layers, each with a different color but more importantly - `triangle-up` and `triangle-down`. We cannot encode the two marks dynamically (or, rather, we cannot make dynamic fill color which is my goal here) so we'll need to do it separately for positive and negative changes.
 
-{{< vega-lite id="chart-bar-in-bar" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -300,13 +297,13 @@ After this, we can make the following layers:
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 
 ## Highlighted Absolute Change
 
 This one largely repeats the bar-in-bar, with the exception that the highlighted changes are achieved by combining `x` and `x2` channels combined with `color`
-{{< vega-lite id="chart-highlighted-absolute-change" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -556,13 +553,13 @@ This one largely repeats the bar-in-bar, with the exception that the highlighted
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 ## Bullet
 
 Key difference in schema here - instead of highlighted bar mark, we use `tick` with exact value for the previous period.
 
-{{< vega-lite id="chart-bullet" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -793,13 +790,13 @@ Key difference in schema here - instead of highlighted bar mark, we use `tick` w
     }
   ]
 }
-{{< /vega-lite >}}
+```
 
 
 ## Direction Arrows
 
 
-{{< vega-lite id="chart-direction-arrows" actions="true">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "width": 400,
@@ -1044,7 +1041,8 @@ Key difference in schema here - instead of highlighted bar mark, we use `tick` w
     }
   ]
 }
-{{< /vega-lite >}}
+```
+
 
 
 ## Error Bars
\ No newline at end of file
diff --git a/posts/dataviz-blogs.qmd b/posts/dataviz-blogs.qmd
index 8369994..460ed21 100644
--- a/posts/dataviz-blogs.qmd
+++ b/posts/dataviz-blogs.qmd
@@ -2,8 +2,10 @@
 title: Блоги та Ресурси з візуалізації даних
 date:  2024-07-20
 draft: false
+lang: uk
 tags:
   - Датавіз
+  - Dataviz
 ---
 
 - https://datatowel.in.ua/ - демографія, економіка, електоральна географія України
diff --git a/posts/dataviz-books-ua.qmd b/posts/dataviz-books-ua.qmd
index 84c0edf..970fa58 100644
--- a/posts/dataviz-books-ua.qmd
+++ b/posts/dataviz-books-ua.qmd
@@ -8,6 +8,7 @@ languages:
   - R
   - Python
 ---
+
 ### Аналіз даних
 - **The Data Journalism Handbook**: 
   - [переклад українською на texty.org.ua (2015)](https://texty.org.ua/archive-books/40161/zhurnalistyka-danykh-posibnyk-40161/), 
@@ -18,20 +19,24 @@ languages:
   - The Quartz guide to bad data - [Оригінал EN (GitHub)](https://github.com/Quartz/bad-data-guide)
 
 ### Візуалізація даних
-- **Visualization Analysis and Design*- by Tamara Munzner: [taylorfrancis.com](https://www.taylorfrancis.com/books/mono/10.1201/b17511/visualization-analysis-design-tamara-munzner)
-- **Fundamentals of Data Visualization*- by Claus O. Wilke: [clauswilke.com/dataviz](https://clauswilke.com/dataviz/)
+- **Visualization Analysis and Design**- by Tamara Munzner: [taylorfrancis.com](https://www.taylorfrancis.com/books/mono/10.1201/b17511/visualization-analysis-design-tamara-munzner)
+- **Fundamentals of Data Visualization**- by Claus O. Wilke: [clauswilke.com/dataviz](https://clauswilke.com/dataviz/)
 - **Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations**
   - EN: [Amazon](https://www.amazon.com/dp/1633690709)
 - **Good Charts Workbook: Tips, Tools, and Exercises for Making Better Data Visualizations**
   - EN: [Amazon](https://www.amazon.com/dp/1633696170)
   - Українською: [ArtHuss](https://www.arthuss.com.ua/shop/khoroshi-diahramy)
-- **ggplot2 book*- by Hadley Wickham: [ggplot2-book.org](https://ggplot2-book.org/)
+- **Storytelling With Data** by Cole N. Knaflic
+  - EN: [Amazon](https://www.amazon.com/Storytelling-Data-Visualization-Business-Professionals/dp/1119002257?linkId=309f73640a0cb64e3b676e26561d07a0&language=en_US)
+  - Українською: [ArtHuss](https://www.arthuss.com.ua/shop/efektyvna-rozpovid-za-dopomohoyu-danykh)
+- **ggplot2 book**- by Hadley Wickham: [ggplot2-book.org](https://ggplot2-book.org/)
 
 ### Курси та навчальні програми
-- **SDS 375 - Data Visualization in R*- - by Claus O. Wilke: https://wilkelab.org/SDS375/
-- **Computing for Information Science*- by Benjamin Soltoff: https://info5940.infosci.cornell.edu/
-
+- **SDS 375 - Data Visualization in R**- - by Claus O. Wilke: https://wilkelab.org/SDS375/
+- **DS 4200 F23: Information Presentation & Visualization** - https://neu-ds-4200-f23.github.io/
+- **Computing for Information Science**- by Benjamin Soltoff: https://info5940.infosci.cornell.edu/
 
 
 ### Інше
-- **A Layered Grammar of Graphics*- by [Hadley Wickham](https://substack.com/@hadleywickham): [PDF](https://static.olehomelchenko.com/wickham_layered-grammar.pdf)
\ No newline at end of file
+- **A Layered Grammar of Graphics**- by [Hadley Wickham](https://substack.com/@hadleywickham): [PDF](https://static.olehomelchenko.com/wickham_layered-grammar.pdf)
+- **Science of Visual Data Communication - What Works** [Online](https://journals.sagepub.com/doi/epub/10.1177/15291006211051956)
diff --git a/posts/entso-e-ukraine-energy-transfer-viz.qmd b/posts/entso-e-ukraine-energy-transfer-viz.qmd
index f5e035a..3d5fa00 100644
--- a/posts/entso-e-ukraine-energy-transfer-viz.qmd
+++ b/posts/entso-e-ukraine-energy-transfer-viz.qmd
@@ -1,14 +1,10 @@
 ---
 title: Візуалізація руху електроенергії з та в Україну за даними ENTSO-E
 date:  2024-07-21T20:20:24+03:00
-draft: true
-
-load_vega: true
+image: https://static.olehomelchenko.com/2026-01-10%2004.45.50.png
 ---
 
-
-
-{{< vega-lite id="entso-e-bar" dataUrl="https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "data": {
@@ -130,11 +126,11 @@ load_vega: true
     }
   }
 }
-{{< /vega-lite >}}
+```
 
 
 
-{{< vega-lite id="entso-e-dynamics" dataUrl="https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json">}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "data": {
@@ -323,4 +319,4 @@ load_vega: true
     }
   ]
 }
-{{< /vega-lite >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/posts/forbes-50-foundations.qmd b/posts/forbes-50-foundations.qmd
index 21f3491..ae98635 100644
--- a/posts/forbes-50-foundations.qmd
+++ b/posts/forbes-50-foundations.qmd
@@ -2,6 +2,8 @@
 title: "Візуалізація: Топ-50 благодійних фондів за версією Forbes"
 date:  2024-09-11
 draft: false
+lang: uk
+image: https://static.olehomelchenko.com/2026-01-08%2005.32.39.png
 tags:
   - Dataviz
   - Showcase
@@ -9,7 +11,6 @@ languages:
   - Vega-Lite
 
 
-load_vega: true
 ---
 
 В нещодавньому випуску український Forbes опублікував список топ-50 благодійних фондів України.
@@ -23,7 +24,7 @@ load_vega: true
 ## Список фондів за структурою надходжень
 
 
-{{< vega-lite id="entso-e-dynamics" width=600 height=1000 >}}
+```{.vega-lite}
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
   "config": {
@@ -51,7 +52,7 @@ load_vega: true
           "anchor": "middle"
         }
       },
-      "orient": "bottom",
+      "orient": "top",
       "gradientLength": 500,
       "labelLimit": 500,
       "columns": 3,
@@ -81,7 +82,7 @@ load_vega: true
   "width": 600,
   "params": [
     {
-      "name": "org",
+      "name": "Джерело",
       "select": {"type": "point", "fields": ["Джерело"]},
       "bind": {
         "input": "select",
@@ -115,7 +116,7 @@ load_vega: true
       "fold": ["Юрособи", "Фізособи", "Нерезиденти", "Інше"],
       "as": ["Джерело", "value"]
     },
-    {"filter": {"param": "org"}}
+    {"filter": {"param": "Джерело"}}
   ],
   "data": {
     "values": [
@@ -922,4 +923,4 @@ load_vega: true
     ]
   }
 }
-{{< /vega-lite >}}
+```
diff --git a/posts/index.qmd b/posts/index.qmd
index 91d7259..d75b137 100644
--- a/posts/index.qmd
+++ b/posts/index.qmd
@@ -3,12 +3,12 @@ title: "Posts"
 page-layout: full
 listing:
   contents: "*.qmd"
-  type: default
+  type: grid
   sort: "date desc"
   categories: true
   sort-ui: true
   filter-ui: true
-  fields: [date, title, reading-time, categories]
+  fields: [image, date, title, reading-time, categories]
   date-format: "D MMMM YYYY"
   page-size: 10
 ---
diff --git a/posts/my-first-post.qmd b/posts/my-first-post.qmd
deleted file mode 100644
index 81b192f..0000000
--- a/posts/my-first-post.qmd
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Рушій блогу для цього сайту
-date:  2024-07-21T20:20:24+03:00
-draft: false
----
-
-Для створення цього сайту я надихався декількома блогами.
-
-В першу чергу я зупинився на генераторах статичних сайтів, з міркувань простоти.
-
-З-поміж багатьох існуючих фреймворків обрав один з найбільш популярних (бо по ньому має бути багато напрацювань спільноти) та не закинутий опенсорс проєкт. 
-
-В результаті отримав одним з перших кандидатів [Hugo](https://gohugo.io/). Одна з його переваг - широкий вибір тем які можна кастомізувати. Як прихильник мінімальної кількості ганяти лишні байти туди-сюди, обрав тему [PaperMod](https://adityatelange.github.io/hugo-PaperMod/tags/papermod/)
-
-- [Installation](https://github.com/adityatelange/hugo-PaperMod/wiki/Installation) 
\ No newline at end of file
diff --git a/posts/vega-altair-hugo-shortcodes.qmd b/posts/vega-altair-hugo-shortcodes.qmd
deleted file mode 100644
index 8843a9b..0000000
--- a/posts/vega-altair-hugo-shortcodes.qmd
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Додавання Vega-Lite візуалізацій в Hugo за допомогою Shortcodes
-date:  2024-07-23
-draft: false
-tags:
-  - Dataviz
-  - Hugo
-languages:
-  - Altair
-  - Vega-Lite
-  - Hugo
-
-load_vega: true
----
-
-
-Код специфікації vega-lite, що треба додати: 
-```json
-
-{
-  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "description": "A simple bar chart with embedded data.",
-  "data": {
-    "values": [
-      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
-      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
-      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
-    ]
-  },
-  "mark": "bar",
-  "encoding": {
-    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
-    "y": {"field": "b", "type": "quantitative"}
-  }
-}
-
-
-```
-
-
-Замість ручного додавання скриптів та ембеддингу як в [туторіалі](https://vega.github.io/vega-lite/usage/embed.html), є можливість підійти трохи гнучкіше і завантажувати vega-lite бібліотеки лише на тих сторінках на яких вони потрібні, а також параметризувати деякі із штук за замовчуванням:
-
-
-```html
-<!-- Create a unique ID for the div where the Vega-Lite visualization will be rendered -->
-<div class="vegaVis" id="{{ .Get "id" | default "vega-lite-vis" }}"></div>
-<script>
-  const spec = {{ .Inner | safeJS }};
-  spec['width'] =  spec['width']? spec['width'] : {{ .Get "width" | default 700}};
-  spec['height'] = spec['height']? spec['height'] : {{ .Get "height" | default 300}};
-  vegaEmbed('#{{ .Get "id" | default "vega-lite-vis" }}', spec, {"actions": false}).catch(console.error);
-
-</script>
-
-```
-
-
-
-Використання (прибрати пробіл до/після `< >`, які я додав щоб воно не рендерилось): 
-
-
-```
-{{ < vega-lite id="unique-vis-id-1" actions="true"> }}
-{
-  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "description": "A simple bar chart with embedded data.",
-  "data": {
-    "values": [
-      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
-      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
-      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
-    ]
-  },
-  "mark": "bar",
-  "width": 300,
-  "encoding": {
-    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
-    "y": {"field": "b", "type": "quantitative"}
-  }
-}
-{{ < /vega-lite > }}
-```
-
-Результат: 
-{{< vega-lite id="unique-vis-id-1" >}}
-{
-  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "description": "A simple bar chart with embedded data.",
-  "data": {
-    "values": [
-      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
-      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
-      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
-    ]
-  },
-  "mark": "bar",
-  "width": 300,
-  "encoding": {
-    "x": {"field": "a", "title": "aoesuthaosth", "type": "nominal", "axis": {"labelAngle": 0}},
-    "y": {"field": "b", "type": "quantitative"}
-  }
-}
-{{< /vega-lite >}}
-
-
-{{< vega-lite id="entso-e" dataUrl="https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json">}}
-{
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "description": "Daily import and export visualization",
-    "data": {
-        "url": "https://github.com/olehomelchenko/ua-entso-e-transfers/raw/main/output.json"
-    },
-    "transform": [
-        { "calculate": "0-datum.Export_from_UA", "as": "Export" },
-        { "calculate": "datum.Import_to_UA", "as": "Import" }
-    ],
-    "width": 800,
-    "layer": [
-        {
-            "mark": "bar",
-            "encoding": {
-                "x": { "field": "Date", "type": "temporal", "title": "Date", "timeUnit": "yearmonthdate" },
-                "y": { "field": "Import", "type": "quantitative", "title": "MW", "aggregate": "sum" },
-                "color": { "value": "blue" },
-                "tooltip": [
-                    { "field": "Date", "type": "temporal", "title": "Date",  "timeUnit": "yearmonthdate" },
-                    { "field": "Import", "type": "quantitative", "title": "Import to UA (MW)", "aggregate": "sum" }
-                ]
-            }
-        },
-        {
-            "mark": "bar",
-            "encoding": {
-                "x": { "field": "Date", "type": "temporal" ,  "timeUnit": "yearmonthdate"},
-                "y": { "field": "Export", "type": "quantitative", "aggregate": "sum" },
-                "color": { "value": "red" },
-                "tooltip": [
-                    { "field": "Date", "type": "temporal", "title": "Date",  "timeUnit": "yearmonthdate" },
-                    { "field": "Export", "type": "quantitative", "title": "Export from UA (MW)", "aggregate": "sum" }
-                ]
-            }
-        }
-    ]
-}
-{{< /vega-lite >}}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 2fc473c..791fa6d 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,18 @@
 /* Minimal custom styling for olehomelchenko.com */
 
+/* Vega-Lite visualization container */
+.vega-viz-container {
+    margin: 20px 0;
+}
+
+/* Reverse order to put filters on top of canvas */
+.chart-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    gap: 20px;
+}
+
 /* Vega-Lite visualization styling - center and add subtle shadow */
 .vega-embed {
     justify-content: center;
@@ -10,3 +23,52 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     margin: 10px;
 }
+
+/* Style the interactive parameter filters */
+/* Hide when empty, style only when it has content */
+.vega-bindings:empty {
+    display: none;
+}
+
+.vega-bindings:not(:empty) {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 15px 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    width: fit-content;
+}
+
+.vega-bindings label {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-right: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 14px;
+    color: #495057;
+    font-weight: 500;
+}
+
+.vega-bindings input,
+.vega-bindings select {
+    padding: 6px 12px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    background: white;
+    font-size: 14px;
+    color: #495057;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.vega-bindings input:focus,
+.vega-bindings select:focus {
+    border-color: #80bdff;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.vega-bindings select {
+    cursor: pointer;
+    min-width: 150px;
+}
diff --git a/til/index.qmd b/til/index.qmd
index 6a602d0..eee4b95 100644
--- a/til/index.qmd
+++ b/til/index.qmd
@@ -3,12 +3,12 @@ title: "TILs - Today I Learned"
 page-layout: full
 listing:
   contents: "*.qmd"
-  type: table
+  type: default
   sort: "date desc"
   fields: [date, title, categories]
   date-format: "YYYY-MM-DD"
-  table-striped: true
-  filter-ui: true
+  # table-striped: true
+  # filter-ui: true
 ---
 
 Quick tips, discoveries, and learnings. Short-form content about interesting things I've discovered.
diff --git a/til/obsidian-paperless.qmd b/til/obsidian-paperless.qmd
index 36dcccc..b5c355c 100644
--- a/til/obsidian-paperless.qmd
+++ b/til/obsidian-paperless.qmd
@@ -6,7 +6,7 @@ draft: false
 
 Серія блогів 
 
-https://jamierubin.net/blog-series/practically-paperless-with-obsidian/ 
+[https://jamierubin.net/blog-series/practically-paperless-with-obsidian/](https://jamierubin.net/blog-series/practically-paperless-with-obsidian/ )
 
 
-Obsidian для воркфлоу наукових досліджень: https://medium.com/@alexandraphelan/an-updated-academic-workflow-zotero-obsidian-cffef080addd
\ No newline at end of file
+Obsidian для воркфлоу наукових досліджень: [https://medium.com/@alexandraphelan/an-updated-academic-workflow-zotero-obsidian-cffef080addd](https://medium.com/@alexandraphelan/an-updated-academic-workflow-zotero-obsidian-cffef080addd)
diff --git a/til/ojs-in-quarto.qmd b/til/ojs-in-quarto.qmd
new file mode 100644
index 0000000..0aa9405
--- /dev/null
+++ b/til/ojs-in-quarto.qmd
@@ -0,0 +1,28 @@
+---
+title: ObservableJS in Quarto
+date: 2025-01-10
+draft: false
+---
+
+
+```{ojs}
+vegalite = require("@observablehq/vega-lite")
+
+vegalite({
+  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
+  "description": "A simple bar chart with embedded data.",
+  "data": {
+    "values": [
+      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
+      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
+      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
+    ]
+  },
+  "mark": "bar",
+  "encoding": {
+    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+})
+```
+
diff --git a/vega-lite.lua b/vega-lite.lua
index 82bebfb..1510c9d 100644
--- a/vega-lite.lua
+++ b/vega-lite.lua
@@ -30,8 +30,9 @@ function CodeBlock(block)
     local echo = block.attributes['echo']
     local codeFold = block.attributes['code-fold']
 
-    -- Default to showing code
+    -- Default to showing code collapsed
     if echo == nil then echo = "true" end
+    if codeFold == nil then codeFold = "true" end
 
     local result = {}
 
@@ -62,7 +63,9 @@ function CodeBlock(block)
 
     -- Create the HTML output for the visualization
     local html = string.format([[
-<div id="%s"></div>
+<div class="vega-viz-container">
+  <div id="%s"></div>
+</div>
 <script type="text/javascript">
   vegaEmbed('#%s', %s, {"actions": true});
 </script>