From d8cafa99a4b2f7ac914815d7ee98c1db54e23fd4 Mon Sep 17 00:00:00 2001 From: Splitter Date: Sun, 7 Sep 2025 22:04:59 +0000 Subject: [PATCH] feat: add `embed` shortcode --- content/post/data-visualization/index.md | 82 +++++++++++++++++++++++- content/post/get-started/index.md | 3 - content/teaching/js/index.md | 6 +- content/teaching/python/index.md | 6 +- 4 files changed, 91 insertions(+), 6 deletions(-) diff --git a/content/post/data-visualization/index.md b/content/post/data-visualization/index.md index 2a584e3..3584db0 100644 --- a/content/post/data-visualization/index.md +++ b/content/post/data-visualization/index.md @@ -1,6 +1,6 @@ --- title: 📈 Communicate your results effectively with the best data visualizations -summary: Use popular tools such as Plotly, Mermaid, and data frames. +summary: Use popular tools such as HuggingFace, Plotly, Mermaid, and data frames. date: 2023-10-25 authors: - admin @@ -16,6 +16,34 @@ Hugo Blox is designed to give technical content creators a seamless experience. Use popular tools such as Plotly, Mermaid, and data frames. +## Embed Rich Content + +HuggingFace Model + +{{< embed platform="huggingface" resource="google/embeddinggemma-300m" type="model" >}} + +HuggingFace Dataset + +{{< embed platform="huggingface" resource="fka/awesome-chatgpt-prompts" type="dataset" >}} + +GitHub Repository + +{{< embed platform="github" resource="HugoBlox/hugo-blox-builder" type="repo" >}} + +Custom embed with manual data + +{{< embed url="https://example.com" title="My Custom Resource" description="A great resource for learning" >}} + +### Custom Images + +Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.): + +{{< embed url="https://example.com" title="Data Visualization Guide" description="Beautiful data visualization workspace" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=800&h=600&auto=format&fit=crop" width="800" height="600" quality="90" >}} + +You can also add images to any platform embed: + +{{< embed platform="github" resource="plotly/plotly.py" type="repo" image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&auto=format&fit=crop" width="600" height="400" >}} + ## Charts Hugo Blox supports the popular [Plotly](https://plot.ly/) format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine! @@ -154,4 +182,56 @@ renders as {{< table path="results.csv" header="true" caption="Table 1: My results" >}} +## Interactive Buttons + +Add engaging call-to-action buttons to your data visualization posts: + +### Basic Buttons + +{{< button url="/" >}}Contact Us{{< /button >}} + +  + +{{< button url="https://plotly.com/python/" new_tab="true" style="secondary" >}}Learn Plotly{{< /button >}} + +```go-html-template +{{}}Contact Us{{}} + +{{}}Learn Plotly{{}} +``` + +### Styled Buttons for Data Actions + +{{< button url="#" style="primary" size="lg" align="center" icon="chart-bar" >}}View Dashboard{{< /button >}} + +  + +{{< button url="/data/results.csv" style="outline" icon="document-arrow-down" >}}Download Data{{< /button >}} + +  + +{{< button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" >}}View Source Code{{< /button >}} + +```go-html-template +{{}}View Dashboard{{}} + +{{}}Download Data{{}} + +{{}}View Source Code{{}} +``` + +### Multiple Aligned Buttons + +{{< button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" >}}Try Jupyter{{< /button >}} + +  + +{{< button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" >}}Open in Colab{{< /button >}} + +```go-html-template +{{}}Try Jupyter{{}} + +{{}}Open in Colab{{}} +``` + ## Did you find this page helpful? Consider sharing it 🙌 diff --git a/content/post/get-started/index.md b/content/post/get-started/index.md index acf8071..4dd445c 100644 --- a/content/post/get-started/index.md +++ b/content/post/get-started/index.md @@ -18,9 +18,6 @@ tags: - Markdown content_meta: - # content_type: 'Tutorial' - # difficulty: 'Beginner' - prerequisites: ['Markdown'] trending: true --- diff --git a/content/teaching/js/index.md b/content/teaching/js/index.md index de12d09..7b01e45 100644 --- a/content/teaching/js/index.md +++ b/content/teaching/js/index.md @@ -8,6 +8,11 @@ tags: - JavaScript image: caption: 'Embed rich media such as videos and LaTeX math' +content_meta: + content_type: 'Tutorial' + difficulty: 'Beginner' + prerequisites: ['HTML'] + trending: true --- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest. @@ -112,7 +117,6 @@ $$ Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file. - ```python import pandas as pd data = pd.read_csv("data.csv") diff --git a/content/teaching/python/index.md b/content/teaching/python/index.md index 60a0b42..afe8b20 100644 --- a/content/teaching/python/index.md +++ b/content/teaching/python/index.md @@ -8,6 +8,11 @@ tags: - Python image: caption: 'Embed rich media such as videos and LaTeX math' +content_meta: + content_type: 'Course' + difficulty: 'Intermediate' + prerequisites: ['SQL'] + trending: false --- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest. @@ -112,7 +117,6 @@ $$ Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file. - ```python import pandas as pd data = pd.read_csv("data.csv")