mirror of
https://github.com/CompeyDev/blog.devcomp.xyz.git
synced 2024-12-12 12:50:41 +00:00
Initial configuration & draft luau blog post
This commit is contained in:
parent
8544829c88
commit
b458b93b11
10 changed files with 232 additions and 381 deletions
BIN
src/assets/images/CompeyDev.png
Normal file
BIN
src/assets/images/CompeyDev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -7,61 +7,46 @@ import type {
|
||||||
import { LinkPreset } from './types/config'
|
import { LinkPreset } from './types/config'
|
||||||
|
|
||||||
export const siteConfig: SiteConfig = {
|
export const siteConfig: SiteConfig = {
|
||||||
title: 'Fuwari',
|
title: "compey's blog",
|
||||||
subtitle: 'Demo Site',
|
subtitle: 'Demo Site',
|
||||||
lang: 'en', // 'en', 'zh_CN', 'zh_TW', 'ja'
|
lang: 'en',
|
||||||
themeColor: {
|
themeColor: {
|
||||||
hue: 250, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
|
hue: 295,
|
||||||
fixed: false, // Hide the theme color picker for visitors
|
fixed: true,
|
||||||
},
|
},
|
||||||
banner: {
|
banner: {
|
||||||
enable: false,
|
enable: true,
|
||||||
src: 'assets/images/demo-banner.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
|
src: 'assets/images/demo-banner.png', // TODO: yes
|
||||||
position: 'center', // Equivalent to object-position, defaults center
|
position: 'center',
|
||||||
},
|
},
|
||||||
favicon: [ // Leave this array empty to use the default favicon
|
favicon: [
|
||||||
|
// Leave this array empty to use the default favicon
|
||||||
// {
|
// {
|
||||||
// src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory
|
// src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory
|
||||||
// theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
|
// theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
|
||||||
// sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
|
// sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
|
||||||
// }
|
// }
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
export const navBarConfig: NavBarConfig = {
|
|
||||||
links: [
|
|
||||||
LinkPreset.Home,
|
|
||||||
LinkPreset.Archive,
|
|
||||||
LinkPreset.About,
|
|
||||||
{
|
|
||||||
name: 'GitHub',
|
|
||||||
url: 'https://github.com/saicaca/fuwari', // Internal links should not include the base path, as it is automatically added
|
|
||||||
external: true, // Show an external link icon and will open in a new tab
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const navBarConfig: NavBarConfig = {
|
||||||
|
links: [LinkPreset.Home, LinkPreset.Archive, LinkPreset.About],
|
||||||
|
}
|
||||||
|
|
||||||
export const profileConfig: ProfileConfig = {
|
export const profileConfig: ProfileConfig = {
|
||||||
avatar: 'assets/images/demo-avatar.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
|
avatar: 'assets/images/CompeyDev.png', // Relative to the /src directory. Relative to the /public directory if it starts with '/'
|
||||||
name: 'Lorem Ipsum',
|
name: 'compey',
|
||||||
bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
bio: 'ur local developer | 8 bit enthusiast | rust <3',
|
||||||
links: [
|
links: [
|
||||||
{
|
|
||||||
name: 'Twitter',
|
|
||||||
icon: 'fa6-brands:twitter', // Visit https://icones.js.org/ for icon codes
|
|
||||||
// You will need to install the corresponding icon set if it's not already included
|
|
||||||
// `pnpm add @iconify-json/<icon-set-name>`
|
|
||||||
url: 'https://twitter.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Steam',
|
|
||||||
icon: 'fa6-brands:steam',
|
|
||||||
url: 'https://store.steampowered.com',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'GitHub',
|
name: 'GitHub',
|
||||||
icon: 'fa6-brands:github',
|
icon: 'fa6-brands:github',
|
||||||
url: 'https://github.com/saicaca/fuwari',
|
url: 'https://github.com/CompeyDeve',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Twitter',
|
||||||
|
icon: 'fa6-brands:twitter',
|
||||||
|
url: 'https://twitter.com/DevComp_',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
---
|
|
||||||
title: Draft Example
|
|
||||||
published: 2022-07-01
|
|
||||||
tags: [Markdown, Blogging, Demo]
|
|
||||||
category: Examples
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# This Article is a Draft
|
|
||||||
|
|
||||||
This article is currently in a draft state and is not published. Therefore, it will not be visible to the general audience. The content is still a work in progress and may require further editing and review.
|
|
||||||
|
|
||||||
When the article is ready for publication, you can update the "draft" field to "false" in the Frontmatter:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
---
|
|
||||||
title: Draft Example
|
|
||||||
published: 2024-01-11T04:40:26.381Z
|
|
||||||
tags: [Markdown, Blogging, Demo]
|
|
||||||
category: Examples
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB |
|
|
@ -1,51 +0,0 @@
|
||||||
---
|
|
||||||
title: Simple Guides for Fuwari
|
|
||||||
published: 2024-04-01
|
|
||||||
description: "How to use this blog template."
|
|
||||||
image: "./cover.jpeg"
|
|
||||||
tags: ["Fuwari", "Blogging", "Customization"]
|
|
||||||
category: Guides
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
|
|
||||||
> Cover image source: [Source](https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/208fc754-890d-4adb-9753-2c963332675d/width=2048/01651-1456859105-(colour_1.5),girl,_Blue,yellow,green,cyan,purple,red,pink,_best,8k,UHD,masterpiece,male%20focus,%201boy,gloves,%20ponytail,%20long%20hair,.jpeg)
|
|
||||||
|
|
||||||
This blog template is built with [Astro](https://astro.build/). For the things that are not mentioned in this guide, you may find the answers in the [Astro Docs](https://docs.astro.build/).
|
|
||||||
|
|
||||||
## Front-matter of Posts
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: My First Blog Post
|
|
||||||
published: 2023-09-09
|
|
||||||
description: This is the first post of my new Astro blog.
|
|
||||||
image: ./cover.jpg
|
|
||||||
tags: [Foo, Bar]
|
|
||||||
category: Front-end
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
| Attribute | Description |
|
|
||||||
|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| `title` | The title of the post. |
|
|
||||||
| `published` | The date the post was published. |
|
|
||||||
| `description` | A short description of the post. Displayed on index page. |
|
|
||||||
| `image` | The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file |
|
|
||||||
| `tags` | The tags of the post. |
|
|
||||||
| `category` | The category of the post. |
|
|
||||||
| `draft` | If this post is still a draft, which won't be displayed. |
|
|
||||||
|
|
||||||
## Where to Place the Post Files
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Your post files should be placed in `src/content/posts/` directory. You can also create sub-directories to better organize your posts and assets.
|
|
||||||
|
|
||||||
```
|
|
||||||
src/content/posts/
|
|
||||||
├── post-1.md
|
|
||||||
└── post-2/
|
|
||||||
├── cover.png
|
|
||||||
└── index.md
|
|
||||||
```
|
|
||||||
210
src/content/posts/luau-for-js-devs/index.md
Normal file
210
src/content/posts/luau-for-js-devs/index.md
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
---
|
||||||
|
title: Luau for JS Devs
|
||||||
|
published: 2024-07-05
|
||||||
|
description: 'An introduction to a superior alternative to JavaScript: Luau'
|
||||||
|
image: 'https://github.com/luau-lang.png'
|
||||||
|
tags: ['tooling', 'languages', 'web-development', 'luau', 'javascript']
|
||||||
|
category: 'Languages'
|
||||||
|
draft: true
|
||||||
|
---
|
||||||
|
|
||||||
|
Have you ever felt that you live in a loop? That’s how I feel - every time I open tech twitter (no, I am not going to call it X). There are several “programming meme” accounts which seem to regurgitate the same few jokes on a regular basis, to the point that I’m convinced they’re all AI. One of these overused meme formats is related to JavaScript, criticising its poor design choices which lead to various pitfalls a developer can face. I’ve never seen people offer solutions to these, so this blog post attempts to do so with a promising alternative to JavaScript: [Luau]([https://luau-lang.org](https://luau-lang.org)).
|
||||||
|
|
||||||
|
## What is Luau?
|
||||||
|
|
||||||
|
Luau is a Lua derivative, which is fast, small and gradually typed, as described on their website. Luau was created at Roblox as a scalable alternative to Lua to run millions of times a day, on both the client and server. Luau has generally been pushed aside as a “lego game language”, simply due to the notoriety of inexperienced programmers within the Roblox community. Luau’s potential as a well-designed scripting language often goes unnoticed. In this blog post, I will attempt to compare Luau with JavaScript on the server (Node/Bun/Deno).
|
||||||
|
|
||||||
|
Luau has significantly diverged from Lua, with many performance improvements (including a separate bytecode format and compiler), type support, standard APIs like buffers, require aliases, and a lot more. Furthermore, Lua generally follows the ideology of “if it can be implemented in pure-lua, it should be, and doesn’t belong within the standard library”, which Luau does not follow much.
|
||||||
|
|
||||||
|
Compared to JavaScript, Luau does not face most of its well-documented pitfalls – see [wtfjs](https://github.com/denysdovhan/wtfjs). This is mainly because Luau inherits a lot of Lua’s good design decisions such as:
|
||||||
|
|
||||||
|
* No two types can be equal
|
||||||
|
* Type coercion isn’t a thing, types must be converted explicitly
|
||||||
|
* Arithmetic and non-arithmetic operators aren’t of the same syntax
|
||||||
|
* Practically only one data type: the table, which can be used to implement virtually anything
|
||||||
|
|
||||||
|
### Types
|
||||||
|
|
||||||
|
A common flaw in JavaScript is the lack of types, which can prevent many developer mistakes before manual code review. Popular supersets of JavaScript with types include: TypeScript by Microsoft and Flow by Meta.
|
||||||
|
|
||||||
|
I will mostly be speaking about TypeScript, since I have more experience with it than the latter. Mainly, there are two glaring problems:
|
||||||
|
|
||||||
|
1. Types present a learning curve which aren’t present in other statically typed languages.
|
||||||
|
2. Types often overshadow the underlying business logic, since they present a large amount of logic on their own.
|
||||||
|
|
||||||
|
Both of these problems aren’t existent in Luau. In Luau, types are simple, while also providing sweet autocomplete and strong typechecking - adhering to the Lua philosophy of power with simplicity. Community-made tooling also tries to stick to this philosophy, leading to a killer alternative to JavaScript’s simplicity, which many prefer the language for.
|
||||||
|
|
||||||
|
A good example of simplicity in Luau types is this following generic type for excluding a type from a list of compatible ones:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type ExcludeTypes<T, U> = T extends U ? never : T;
|
||||||
|
```
|
||||||
|
|
||||||
|
```lua
|
||||||
|
type ExcludeTypes<T> = ~T
|
||||||
|
```
|
||||||
|
|
||||||
|
**NOTE**: The above type example isn’t available in stable Luau yet, and is a part of the revamped type solver, which is currently in development. It is expected to have a beta release soon.
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
|
||||||
|
There’s been a lot of talk about [Bun](https://bun.sh), a fast and modern JavaScript runtime for the serverside. Luau can often outperform Bun. I’m not one of believe in benchmarks, but a naive one would look like this:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
For the Luau script, I’m using [Lune](https://github.com/lune-org/lune) as the runtime (Lune is similar to what Node accomplishes for JavaScript, it’s a script runtime with a well-designed standard library of APIs and other features) and [luau-hashing](https://github.com/dekkonot/luau-hashing) for the SHA-256 implementation. For Bun, I’m using their native crypto APIs. Lune is faster than Bun by **5 orders of magnitude**, and the benchmark is rigged against Lune, since we’re comparing a pure Luau implementation to a native zig API.
|
||||||
|
|
||||||
|
The [Lynx](https://lynx.land) web framework for Lune is nearly **3 times faster** than Express on Node.
|
||||||
|
|
||||||
|
[Insert Screenshot Here]
|
||||||
|
|
||||||
|
### Libraries and Ecosystem
|
||||||
|
|
||||||
|
Luau has a rapidly evolving community of developers, many of them creating awesome libraries and tools. This section expands on some Luau tooling and library equivalents for JavaScript developers.
|
||||||
|
|
||||||
|
### Tooling
|
||||||
|
|
||||||
|
1. ::github{repo="lune-org/lune"}
|
||||||
|
2. ::github{repo="seaofvoices/darklua"}
|
||||||
|
3. ::github{repo="kampfkarren/selene"}
|
||||||
|
4. ::github{repo="johnnymorganz/luau-lsp"}
|
||||||
|
5. ::github{repo="evaera/moonwave"}
|
||||||
|
6. ::github{repo="johnnymorganz/stylua"}
|
||||||
|
|
||||||
|
### Libraries
|
||||||
|
|
||||||
|
The Luau community has developed many libraries to make JavaScript developers feel at home! These include everything from Promise recreations, to entire ports of popular JavaScript libraries. To make the transition easier, there’s also a [set of polyfills for common JS APIs](https://github.com/jsdotlua/luau-polyfill). Following are some libraries to try out in Luau:
|
||||||
|
|
||||||
|
1. ::github{repo="jsdotlua/jest-lua"}
|
||||||
|
2. ::github{repo="jsdotlua/react-lua"}
|
||||||
|
3. ::github{repo="DiscordLuau/discord-luau"}
|
||||||
|
4. ::github{repo="seaofvoices/luau-path"}
|
||||||
|
5. ::github{repo="nicell/lynx"}
|
||||||
|
|
||||||
|
…And many more which I haven't listed here!
|
||||||
|
|
||||||
|
:::note
|
||||||
|
It isn't currently possible for create websites using react-lua, it is mainly used for
|
||||||
|
Roblox game development; but a port to Lune is being worked on.
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Lune
|
||||||
|
|
||||||
|
As previously mentioned, Lune is a standalone Luau runtime, similar to Node (or more closely to Deno, since they share similarities). Although Luau is an embeddable language similar to Lua, Lune tries to create a fully-fledged, batteries-included scripting language. Lune provides world-class standard library APIs (referred to as builtins), with a low learning curve. Lune builtins attempt to be obvious, while also being powerful and performant.
|
||||||
|
|
||||||
|
Lune has a special focus on async I/O (anything which can be async, should be!) - so that you can leverage the performance of async computation without needing to worry about complex data types like promises. Lune accomplishes this by utilising a custom scheduler powered by [Tokio](https://tokio.rs), which handles parallel Luau and I/O API execution. Unlike in regular Lua, spawning async computation in a coroutine (or a task using the `@lune/stdio` builtin) will not block the main thread from executing, ever.
|
||||||
|
|
||||||
|
Lune also includes nice-to-have features, such as a cross-compilation compatible build command to package Lune scripts into executables which can be run without having Lune installed, an interactive REPL, executable scripts, and more to come.
|
||||||
|
|
||||||
|
> To get started with Lune, [check out the docs](https://lune-org.github.io/docs)!
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
## Conclusion
|
||||||
|
|
||||||
|
I highly recommend trying out Luau as an alternative to Bash, Python and JS scripts. I have converted many of my scripts to Luau, and it has given me a much nicer developer experience in the long run.
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
Here's a little Lune script I often use to package Rust projects as an example of what can be done with Lune, and its bash equivalent!
|
||||||
|
:::
|
||||||
|
<details>
|
||||||
|
<summary>Luau</summary>
|
||||||
|
|
||||||
|
```lua
|
||||||
|
local process = require("@lune/process")
|
||||||
|
local serde = require("@lune/serde")
|
||||||
|
local fs = require("@lune/fs")
|
||||||
|
|
||||||
|
type CargoDependencies = { [string]: (number | {}) }
|
||||||
|
type CargoToml = {
|
||||||
|
package: {
|
||||||
|
build: string,
|
||||||
|
version: string,
|
||||||
|
name: string,
|
||||||
|
edition: string,
|
||||||
|
},
|
||||||
|
["build-dependencies"]: CargoDependencies,
|
||||||
|
dependencies: CargoDependencies,
|
||||||
|
}
|
||||||
|
|
||||||
|
local function execute(dir: string, command: string, ...): ()
|
||||||
|
local args = {...}
|
||||||
|
print(`--------> {command} {table.concat(args, " ")}`)
|
||||||
|
|
||||||
|
local child = process.spawn(command, args, {
|
||||||
|
shell = true,
|
||||||
|
stdio = "forward",
|
||||||
|
cwd = dir
|
||||||
|
})
|
||||||
|
|
||||||
|
print()
|
||||||
|
|
||||||
|
if not child.ok then
|
||||||
|
process.exit(child.code)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
function main(): number
|
||||||
|
execute(process.cwd, "just", "build", "--release")
|
||||||
|
|
||||||
|
local cargoToml: CargoToml = serde.decode("toml", fs.readFile("Cargo.toml"))
|
||||||
|
local fileExt: ".exe" | "" = if process.os == "windows" then ".exe" else ""
|
||||||
|
local zipName = `{cargoToml.package.name}-{cargoToml.package.version}-{process.arch}-{process.os}.zip`
|
||||||
|
local fileName = `fox32asm{fileExt}`
|
||||||
|
local command = {}
|
||||||
|
|
||||||
|
if process.os == "windows" then
|
||||||
|
command = {
|
||||||
|
"7z.exe",
|
||||||
|
"a",
|
||||||
|
"-tzip",
|
||||||
|
zipName,
|
||||||
|
fileName
|
||||||
|
}
|
||||||
|
elseif process.os == "linux" then
|
||||||
|
command = {
|
||||||
|
"zip",
|
||||||
|
zipName,
|
||||||
|
fileName
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
|
execute(
|
||||||
|
`{process.cwd}/target/release`,
|
||||||
|
table.unpack(command)
|
||||||
|
)
|
||||||
|
|
||||||
|
return 0
|
||||||
|
end
|
||||||
|
|
||||||
|
return process.exit(main())
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Bash</summary>
|
||||||
|
|
||||||
|
```bash
|
||||||
|
#!/usr/bin/env bash
|
||||||
|
set -euo pipefail
|
||||||
|
rm -rf staging
|
||||||
|
rm -rf release.zip
|
||||||
|
mkdir -p staging
|
||||||
|
cp "target/{{TARGET_TRIPLE}}/release/{{BIN_NAME}}{{EXT}}" staging/
|
||||||
|
cd staging
|
||||||
|
if [ "{{os_family()}}" = "windows" ]; then
|
||||||
|
7z a ../release.zip *
|
||||||
|
else
|
||||||
|
chmod +x {{BIN_NAME}}
|
||||||
|
zip ../release.zip *
|
||||||
|
fi
|
||||||
|
cd "{{CWD}}"
|
||||||
|
rm -rf staging
|
||||||
|
```
|
||||||
|
|
||||||
|
Not only is the Lune version cross-platform and much easier to read and write, it is also convenient to use, since the bash script requires the user to manually input information.
|
||||||
|
|
||||||
|
**All I ask you is to try something a little different the next time you start a new side-project, something a little bit more Hawaiian!** :)
|
||||||
|
|
||||||
|
<sub>*The name “Luau” is inherited from a Hawaiian word meaning “An elaborate Hawaiian feast featuring traditional foods and entertainment”*</sub>
|
||||||
BIN
src/content/posts/luau-for-js-devs/lune_bench.png
Normal file
BIN
src/content/posts/luau-for-js-devs/lune_bench.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
|
|
@ -1,77 +0,0 @@
|
||||||
---
|
|
||||||
title: Markdown Extended Features
|
|
||||||
published: 2024-05-01
|
|
||||||
description: 'Read more about Markdown features in Fuwari'
|
|
||||||
image: ''
|
|
||||||
tags: [Demo, Example, Markdown, Fuwari]
|
|
||||||
category: 'Examples'
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
|
|
||||||
## GitHub repository cards
|
|
||||||
You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.
|
|
||||||
|
|
||||||
::github{repo="Fabrizz/MMM-OnSpotify"}
|
|
||||||
|
|
||||||
Create a GitHub repository card with the code `::github{repo="<owner>/<repo>"}`.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
::github{repo="saicaca/fuwari"}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Admonitions
|
|
||||||
|
|
||||||
Following types of admonitions are supported: `note` `tip` `important` `warning` `caution`
|
|
||||||
|
|
||||||
:::note
|
|
||||||
Highlights information that users should take into account, even when skimming.
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
Optional information to help a user be more successful.
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::important
|
|
||||||
Crucial information necessary for users to succeed.
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::warning
|
|
||||||
Critical content demanding immediate user attention due to potential risks.
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::caution
|
|
||||||
Negative potential consequences of an action.
|
|
||||||
:::
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
:::note
|
|
||||||
Highlights information that users should take into account, even when skimming.
|
|
||||||
:::
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
Optional information to help a user be more successful.
|
|
||||||
:::
|
|
||||||
```
|
|
||||||
|
|
||||||
The title of the admonition can be customized.
|
|
||||||
|
|
||||||
:::note[MY CUSTOM TITLE]
|
|
||||||
This is a note with a custom title.
|
|
||||||
:::
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
:::note[MY CUSTOM TITLE]
|
|
||||||
This is a note with a custom title.
|
|
||||||
:::
|
|
||||||
```
|
|
||||||
|
|
||||||
> [!TIP]
|
|
||||||
> [The GitHub syntax](https://github.com/orgs/community/discussions/16925) is also supported.
|
|
||||||
|
|
||||||
```
|
|
||||||
> [!NOTE]
|
|
||||||
> The GitHub syntax is also supported.
|
|
||||||
|
|
||||||
> [!TIP]
|
|
||||||
> The GitHub syntax is also supported.
|
|
||||||
```
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
---
|
|
||||||
title: Markdown Example
|
|
||||||
published: 2023-10-01
|
|
||||||
description: A simple example of a Markdown blog post.
|
|
||||||
tags: [Markdown, Blogging, Demo]
|
|
||||||
category: Examples
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
|
|
||||||
# An h1 header
|
|
||||||
|
|
||||||
Paragraphs are separated by a blank line.
|
|
||||||
|
|
||||||
2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
|
|
||||||
look like:
|
|
||||||
|
|
||||||
- this one
|
|
||||||
- that one
|
|
||||||
- the other one
|
|
||||||
|
|
||||||
Note that --- not considering the asterisk --- the actual text
|
|
||||||
content starts at 4-columns in.
|
|
||||||
|
|
||||||
> Block quotes are
|
|
||||||
> written like so.
|
|
||||||
>
|
|
||||||
> They can span multiple paragraphs,
|
|
||||||
> if you like.
|
|
||||||
|
|
||||||
Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
|
|
||||||
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
|
|
||||||
Unicode is supported. ☺
|
|
||||||
|
|
||||||
## An h2 header
|
|
||||||
|
|
||||||
Here's a numbered list:
|
|
||||||
|
|
||||||
1. first item
|
|
||||||
2. second item
|
|
||||||
3. third item
|
|
||||||
|
|
||||||
Note again how the actual text starts at 4 columns in (4 characters
|
|
||||||
from the left side). Here's a code sample:
|
|
||||||
|
|
||||||
# Let me re-iterate ...
|
|
||||||
for i in 1 .. 10 { do-something(i) }
|
|
||||||
|
|
||||||
As you probably guessed, indented 4 spaces. By the way, instead of
|
|
||||||
indenting the block, you can use delimited blocks, if you like:
|
|
||||||
|
|
||||||
```
|
|
||||||
define foobar() {
|
|
||||||
print "Welcome to flavor country!";
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
(which makes copying & pasting easier). You can optionally mark the
|
|
||||||
delimited block for Pandoc to syntax highlight it:
|
|
||||||
|
|
||||||
```python
|
|
||||||
import time
|
|
||||||
# Quick, count to ten!
|
|
||||||
for i in range(10):
|
|
||||||
# (but not *too* quick)
|
|
||||||
time.sleep(0.5)
|
|
||||||
print i
|
|
||||||
```
|
|
||||||
|
|
||||||
### An h3 header
|
|
||||||
|
|
||||||
Now a nested list:
|
|
||||||
|
|
||||||
1. First, get these ingredients:
|
|
||||||
|
|
||||||
- carrots
|
|
||||||
- celery
|
|
||||||
- lentils
|
|
||||||
|
|
||||||
2. Boil some water.
|
|
||||||
|
|
||||||
3. Dump everything in the pot and follow
|
|
||||||
this algorithm:
|
|
||||||
|
|
||||||
find wooden spoon
|
|
||||||
uncover pot
|
|
||||||
stir
|
|
||||||
cover pot
|
|
||||||
balance wooden spoon precariously on pot handle
|
|
||||||
wait 10 minutes
|
|
||||||
goto first step (or shut off burner when done)
|
|
||||||
|
|
||||||
Do not bump wooden spoon or it will fall.
|
|
||||||
|
|
||||||
Notice again how text always lines up on 4-space indents (including
|
|
||||||
that last line which continues item 3 above).
|
|
||||||
|
|
||||||
Here's a link to [a website](http://foo.bar), to a [local
|
|
||||||
doc](local-doc.html), and to a [section heading in the current
|
|
||||||
doc](#an-h2-header). Here's a footnote [^1].
|
|
||||||
|
|
||||||
[^1]: Footnote text goes here.
|
|
||||||
|
|
||||||
Tables can look like this:
|
|
||||||
|
|
||||||
size material color
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
9 leather brown
|
|
||||||
10 hemp canvas natural
|
|
||||||
11 glass transparent
|
|
||||||
|
|
||||||
Table: Shoes, their sizes, and what they're made of
|
|
||||||
|
|
||||||
(The above is the caption for the table.) Pandoc also supports
|
|
||||||
multi-line tables:
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
keyword text
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
red Sunsets, apples, and
|
|
||||||
other red or reddish
|
|
||||||
things.
|
|
||||||
|
|
||||||
green Leaves, grass, frogs
|
|
||||||
and other things it's
|
|
||||||
not easy being.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
A horizontal rule follows.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Here's a definition list:
|
|
||||||
|
|
||||||
apples
|
|
||||||
: Good for making applesauce.
|
|
||||||
oranges
|
|
||||||
: Citrus!
|
|
||||||
tomatoes
|
|
||||||
: There's no "e" in tomatoe.
|
|
||||||
|
|
||||||
Again, text is indented 4 spaces. (Put a blank line between each
|
|
||||||
term/definition pair to spread things out more.)
|
|
||||||
|
|
||||||
Here's a "line block":
|
|
||||||
|
|
||||||
| Line one
|
|
||||||
| Line too
|
|
||||||
| Line tree
|
|
||||||
|
|
||||||
and images can be specified like so:
|
|
||||||
|
|
||||||
[//]: # ()
|
|
||||||
|
|
||||||
Inline math equations go in like so: $\omega = d\phi / dt$. Display
|
|
||||||
math should get its own line and be put in in double-dollarsigns:
|
|
||||||
|
|
||||||
$$I = \int \rho R^{2} dV$$
|
|
||||||
|
|
||||||
And note that you can backslash-escape any punctuation characters
|
|
||||||
which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
---
|
|
||||||
title: Include Video in the Posts
|
|
||||||
published: 2023-08-01
|
|
||||||
description: This post demonstrates how to include embedded video in a blog post.
|
|
||||||
tags: [Example, Video]
|
|
||||||
category: Examples
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
|
|
||||||
Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: Include Video in the Post
|
|
||||||
published: 2023-10-19
|
|
||||||
// ...
|
|
||||||
---
|
|
||||||
|
|
||||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
|
|
||||||
```
|
|
||||||
|
|
||||||
## YouTube
|
|
||||||
|
|
||||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
||||||
|
|
||||||
## Bilibili
|
|
||||||
|
|
||||||
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
|
||||||
Loading…
Reference in a new issue