feat: add embed shortcode
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: 📈 Communicate your results effectively with the best data visualizations
|
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
|
date: 2023-10-25
|
||||||
authors:
|
authors:
|
||||||
- admin
|
- 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.
|
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
|
## 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!
|
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" >}}
|
{{< 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
|
||||||
|
{{</* button url="/" */>}}Contact Us{{</* /button */>}}
|
||||||
|
|
||||||
|
{{</* button url="https://plotly.com/python/" new_tab="true" style="secondary" */>}}Learn Plotly{{</* /button */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
{{</* 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 */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
{{</* 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 */>}}
|
||||||
|
```
|
||||||
|
|
||||||
## Did you find this page helpful? Consider sharing it 🙌
|
## Did you find this page helpful? Consider sharing it 🙌
|
||||||
|
|||||||
@@ -18,9 +18,6 @@ tags:
|
|||||||
- Markdown
|
- Markdown
|
||||||
|
|
||||||
content_meta:
|
content_meta:
|
||||||
# content_type: 'Tutorial'
|
|
||||||
# difficulty: 'Beginner'
|
|
||||||
prerequisites: ['Markdown']
|
|
||||||
trending: true
|
trending: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,11 @@ tags:
|
|||||||
- JavaScript
|
- JavaScript
|
||||||
image:
|
image:
|
||||||
caption: 'Embed rich media such as videos and LaTeX math'
|
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.
|
[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.
|
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
|
```python
|
||||||
import pandas as pd
|
import pandas as pd
|
||||||
data = pd.read_csv("data.csv")
|
data = pd.read_csv("data.csv")
|
||||||
|
|||||||
@@ -8,6 +8,11 @@ tags:
|
|||||||
- Python
|
- Python
|
||||||
image:
|
image:
|
||||||
caption: 'Embed rich media such as videos and LaTeX math'
|
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.
|
[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.
|
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
|
```python
|
||||||
import pandas as pd
|
import pandas as pd
|
||||||
data = pd.read_csv("data.csv")
|
data = pd.read_csv("data.csv")
|
||||||
|
|||||||
Reference in New Issue
Block a user