starters(blog): add content & upgrade

This commit is contained in:
George Cushen 2023-10-27 20:32:16 +01:00
commit f1c8e66988
17 changed files with 602 additions and 37 deletions

File diff suppressed because one or more lines are too long

View file

@ -3,7 +3,7 @@
# Hugo Documentation: https://gohugo.io/getting-started/configuration/#all-configuration-settings
# This file is formatted using YAML syntax - learn more at https://learnxinyminutes.com/docs/yaml/
title: Minimal Hugo Blog Theme # Website name
title: Scientific Blog (Hugo Theme) # Website name
baseURL: 'https://example.com/' # Website URL
############################
@ -15,7 +15,7 @@ cascade:
- _target:
path: /post/**
pager: true
editable: true
editable: false
reading_time: true
commentable: true
show_related: true

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 KiB

View file

@ -0,0 +1,155 @@
---
title: 📈 Communicate your results effectively with the best data visualizations
summary: Use popular tools such as Plotly, Mermaid, and data frames.
date: 2023-10-25
tags:
- Hugo
- Wowchemy
- Markdown
image:
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
---
Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
Use popular tools such as Plotly, Mermaid, and data frames.
## Charts
Wowchemy 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!
Save your Plotly JSON in your page folder, for example `line-chart.json`, and then add the `{{</* chart data="line-chart" */>}}` shortcode where you would like the chart to appear.
Demo:
{{< chart data="line-chart" >}}
You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) useful.
## Diagrams
Wowchemy supports a Markdown extension for diagrams. You can enable this feature by toggling the `diagram` option in your `config/_default/params.toml` file or by adding `diagram: true` to your page front matter.
An example **flowchart**:
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
renders as
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
An example **sequence diagram**:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
renders as
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
An example **class diagram**:
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
renders as
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
An example **state diagram**:
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
renders as
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
## Data Frames
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
```go
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
```
renders as
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
## Did you find this page helpful? Consider sharing it 🙌

View file

@ -0,0 +1,71 @@
{
"data": [
{
"uid": "babced",
"fill": "tonexty",
"mode": "none",
"name": "Col2",
"type": "scatter",
"x": [
"2000-01-01",
"2001-01-01",
"2002-01-01",
"2003-01-01",
"2004-01-01",
"2005-01-01",
"2006-01-01",
"2007-01-01",
"2008-01-01",
"2009-01-01",
"2010-01-01",
"2011-01-01",
"2012-01-01",
"2013-01-01",
"2014-01-01",
"2015-01-01",
"2016-01-01"
],
"y": [
"17087182",
"29354370",
"38760373",
"40912332",
"51611646",
"64780617",
"85507314",
"121892559",
"172338726",
"238027855",
"206956723",
"346004403",
"697089489",
"672985183",
"968882453",
"863105652",
"1068513050"
],
"fillcolor": "rgb(224, 102, 102)"
}
],
"layout": {
"title": "Total Number of Websites",
"width": 800,
"xaxis": {
"type": "date",
"range": [946702800000, 1451624400000],
"title": "Source: <a href=\"http://www.scribblrs.com/\">Scribblrs</a><br>Source: <a href=\"http://www.internetlivestats.com/total-number-of-websites/\">Internet Live Stats</a>",
"showgrid": false,
"autorange": true,
"tickformat": "%Y"
},
"yaxis": {
"type": "linear",
"range": [0, 1124750578.9473684],
"title": "",
"autorange": true
},
"height": 500,
"autosize": false
},
"frames": []
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 KiB

View file

@ -0,0 +1,83 @@
---
title: 🎉 Easily create your own simple yet highly customizable blog
summary: Take full control of your personal brand and privacy by migrating away from the big tech platforms!
date: 2023-10-27
# Featured image
# Place an image named `featured.jpg/png` in this page's folder and customize its options here.
image:
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
authors:
- admin
tags:
- Academic
- Wowchemy
- Markdown
---
Welcome 👋
## Overview
1. The Wowchemy website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
2. The template can be modified and customised to suit your needs. It's a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a **no-code solution (write in Markdown and customize with YAML parameters)** and having **flexibility to later add even deeper personalization with HTML and CSS**
3. You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more
[![The template is mobile first with a responsive design to ensure that your site looks stunning on every device.](https://raw.githubusercontent.com/wowchemy/wowchemy-hugo-modules/main/starters/academic/preview.png)](https://wowchemy.com)
## Get Started
- 👉 [**Create a new site**](https://wowchemy.com/templates/)
- 📚 [**Personalize your site**](https://university.wowchemy.com/)
- 💬 [Chat with the **Wowchemy community**](https://discord.gg/z8wNYzb) or [**Hugo community**](https://discourse.gohugo.io)
- 🐦 Twitter: [@wowchemy](https://twitter.com/wowchemy) [@GeorgeCushen](https://twitter.com/GeorgeCushen) [#MadeWithWowchemy](https://twitter.com/search?q=%23MadeWithWowchemy&src=typed_query)
- 💡 [Request a **feature** or report a **bug** for _Wowchemy_](https://github.com/wowchemy/wowchemy-hugo-themes/issues)
- ⬆️ **Updating Wowchemy?** View the [Update Guide](https://university.wowchemy.com/reference/update/) and [Release Notes](https://github.com/wowchemy/wowchemy-hugo-themes/releases)
## Crowd-funded open-source software
To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.
### [❤️ Click here to become a sponsor and help support Wowchemy's future ❤️](https://wowchemy.com/sponsor/)
As a token of appreciation for sponsoring, you can **unlock [these](https://wowchemy.com/sponsor/) awesome rewards and extra features 🦄✨**
## Ecosystem
- **[Bibtex To Markdown](https://github.com/wowchemy/bibtex-to-markdown):** Automatically import publications from BibTeX
## Inspiration
[Learn what other **creators**](https://wowchemy.com/creators/) are building with this template.
## Features
- **Page builder** - Create _anything_ with no-code [**blocks**](https://wowchemy.com/blocks/) and [**elements**](https://university.wowchemy.com/reference/markdown/)
- **Edit any type of content** - Blog posts, publications, talks, slides, projects, and more!
- **Create content** in [**Markdown**](https://university.wowchemy.com/reference/markdown/), [**Jupyter**](https://university.wowchemy.com/getting-started/cms/), or [**RStudio**](https://university.wowchemy.com/getting-started/cms/)
- **Plugin System** - Fully customizable [**color** and **font themes**](https://university.wowchemy.com/getting-started/customize/)
- **Display Code and Math** - Code syntax highlighting and LaTeX math supported
- **Integrations** - [Google Analytics](https://analytics.google.com), [Disqus commenting](https://disqus.com), Maps, Contact Forms, and more!
- **Beautiful Site** - Simple and refreshing one-page design
- **Industry-Leading SEO** - Help get your website found on search engines and social media
- **Media Galleries** - Display your images and videos with captions in a customizable gallery
- **Mobile Friendly** - Look amazing on every screen with a mobile friendly version of your site
- **Multi-language** - 35+ language packs including English, 中文, and Português
- **Multi-user** - Each author gets their own profile page
- **Privacy Pack** - Assists with GDPR
- **Stand Out** - Bring your site to life with animation, parallax backgrounds, and scroll effects
- **One-Click Deployment** - No servers. No databases. Only files.
## Themes
Wowchemy and its templates come with **automatic day (light) and night (dark) mode** built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.
[Choose a stunning **theme** and **font**](https://university.wowchemy.com/getting-started/customize/) for your site. Themes are fully customizable.
## License
Copyright 2016-present [George Cushen](https://georgecushen.com).
Released under the [MIT](https://github.com/wowchemy/wowchemy-hugo-themes/blob/main/LICENSE.md) license.

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

View file

@ -0,0 +1,92 @@
---
title: ✅ Manage your projects
summary: Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
date: 2023-10-23
tags:
- Wowchemy
- Markdown
image:
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
---
Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
## Ideation
Wowchemy supports a Markdown extension for mindmaps.
Simply insert a Markdown `markmap` code block and optionally set the height of the mindmap as shown in the example below.
A simple mindmap defined as a Markdown list:
<div class="highlight">
<pre class="chroma">
<code>
```markmap {height="200px"}
- Hugo Modules
- wowchemy
- wowchemy-plugins-netlify
- wowchemy-plugins-netlify-cms
- wowchemy-plugins-reveal
```
</code>
</pre>
</div>
renders as
```markmap {height="200px"}
- Hugo Modules
- wowchemy
- wowchemy-plugins-netlify
- wowchemy-plugins-netlify-cms
- wowchemy-plugins-reveal
```
## Diagrams
Wowchemy supports a Markdown extension for diagrams. You can enable this feature by toggling the `diagram` option in your `config/_default/params.toml` file or by adding `diagram: true` to your page front matter.
An example **Gantt diagram**:
```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
renders as
```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
## Todo lists
You can even write your todo lists in Markdown too:
```markdown
- [x] Write math example
- [x] Write diagram example
- [ ] Do something else
```
renders as
- [x] Write math example
- [x] Write diagram example
- [ ] Do something else
## Did you find this page helpful? Consider sharing it 🙌

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

View file

@ -0,0 +1,136 @@
---
title: 🧠 Sharpen your thinking with a second brain
summary: Create a personal knowledge base and share your knowledge with your peers.
date: 2023-10-26
tags:
- Second Brain
- Markdown
image:
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
---
Create a personal knowledge base and share your knowledge with your peers.
Wowchemy web framework empowers you with one of the most flexible note-taking capabilities out there.
Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.
Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.
## Mindmaps
Wowchemy supports the _markmap_ Markdown extension for mindmaps.
With this open format, can even edit your mindmaps in other popular tools such as Obsidian.
Simply insert a Markdown `markmap` code block and optionally set the height of the mindmap as shown in the example below.
A simple mindmap defined as a Markdown list:
<div class="highlight">
<pre class="chroma">
<code>
```markmap {height="200px"}
- Hugo Modules
- wowchemy
- wowchemy-plugins-netlify
- wowchemy-plugins-netlify-cms
- wowchemy-plugins-reveal
```
</code>
</pre>
</div>
renders as
```markmap {height="200px"}
- Hugo Modules
- wowchemy
- wowchemy-plugins-netlify
- wowchemy-plugins-netlify-cms
- wowchemy-plugins-reveal
```
A more advanced mindmap with formatting, code blocks, and math:
<div class="highlight">
<pre class="chroma">
<code>
```markmap
- Mindmaps
- Links
- [Wowchemy Docs](https://wowchemy.com/docs/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
</code>
</pre>
</div>
renders as
```markmap
- Mindmaps
- Links
- [Wowchemy Docs](https://wowchemy.com/docs/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
## Highlighting
<mark>Highlight</mark> important text with `mark`:
```html
<mark>Highlighted text</mark>
```
## Callouts
Use [callouts](https://university.wowchemy.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings.
By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside.
```markdown
{{%/* callout note */%}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{%/* /callout */%}}
```
renders as
{{% callout note %}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}
Or use the `warning` callout type so your readers don't miss critical details:
{{% callout warning %}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}
## Did you find this page helpful? Consider sharing it 🙌

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

View file

@ -1,6 +1,6 @@
---
title: 🤩 Easily write any kind of content with Wowchemy
summary: Highlight code snippets, take notes on math classes, and draw diagrams from textual representation.
title: 👩🏼‍🏫 Teach academic courses
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
date: 2023-10-24
math: true
tags:
@ -8,22 +8,68 @@ tags:
- Wowchemy
- Markdown
image:
caption: 'Even author content with $\LaTeX$'
caption: 'Embed rich media such as videos and LaTeX math'
---
Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
[Wowchemy](https://wowchemy.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Wowchemy web framework which this template is built upon handles the rest.
**Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation.**
**Embed videos, podcasts, code, LaTeX math, and even test students!**
On this page, you'll find some examples of the types of technical content that can be rendered with Wowchemy.
## Examples
## Video
### Math
Teach your course by sharing videos with your students. Choose from one of the following approaches:
{{< youtube D2vj0WcvH5c >}}
**Youtube**:
{{</* youtube w7Ft2ymGmfc */>}}
**Bilibili**:
{{</* bilibili id="BV1WV4y1r7DF" */>}}
**Video file**
Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode:
{{</* video src="my_video.mp4" controls="yes" */>}}
## Podcast
You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode:
{{</* audio src="ambient-piano.mp3" */>}}
Try it out:
{{< audio src="ambient-piano.mp3" >}}
## Test students
Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
```markdown
{{</* spoiler text="👉 Click to view the solution" */>}}
You found me!
{{</* /spoiler */>}}
```
renders as
{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}
## Math
Wowchemy supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively. (We wrap the LaTeX math in the Wowchemy _math_ shortcode to prevent Hugo rendering our math as Markdown.)
To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively.
{{% callout note %}}
We wrap the LaTeX math in the Wowchemy _math_ shortcode to prevent Hugo rendering our math as Markdown.
{{% /callout %}}
Example **math block**:
@ -63,19 +109,7 @@ $$
{{< /math >}}
### Data Frames
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
```go
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
```
renders as
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
### Code
## Code
Wowchemy utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file.
@ -94,20 +128,14 @@ data = pd.read_csv("data.csv")
data.head()
```
### Todo lists
## Inline Images
You can even write your todo lists in Markdown too:
```markdown
- [x] Write math example
- [x] Write diagram example
- [ ] Do something else
```go
{{</* icon name="python" */>}} Python
```
renders as
- [x] Write math example
- [x] Write diagram example
- [ ] Do something else
{{< icon name="python" >}} Python
### Did you find this page helpful? Consider sharing it 🙌
## Did you find this page helpful? Consider sharing it 🙌

View file

@ -4,4 +4,4 @@ go 1.19
require github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify v1.0.1-0.20231024173257-66e3c7e27eb0
require github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-tailwind v0.0.0-20231024214156-c2b66cf131f3
require github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-tailwind main