mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-24 23:15:46 -05:00
Pull-Request [ariasae-1-30-2024] from Obsidian (#53)
This commit is contained in:
Miguel Pimentel
GitHub
parent
63c1f708d0
commit
f80da80a47
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: About
|
||||
compartir: true
|
||||
updated: 2023-12-12
|
||||
updated: 2024-01-30
|
||||
tags:
|
||||
- meta
|
||||
---
|
||||
@ -12,11 +12,11 @@ I am a problem solver, hobby developer, music enjoyer, and public infrastructure
|
||||
|
||||
I think a lot, work a lot, have existential crises, and know just enough about making websites to make me dangerous. I enjoy writing, reading, coding, listening to music, and love having a problem to solve.
|
||||
|
||||
If you are aching for more, check out what [[./Tools|tools]] I use daily, or read my [[./Public Journal|public journal]].
|
||||
If you are aching for more, check out what [[Tools|tools]] I use daily, or read my [[Public Journal|public journal]].
|
||||
|
||||
### As of December 2023, I am…
|
||||
### As of January 2024, I am…
|
||||
|
||||
… learning about web dev with [[./Zola|Zola]].
|
||||
… learning about web dev with [[Zola|Zola]].
|
||||
… making simple browser [extensions](https://addons.mozilla.org/en-US/firefox/user/17772574/).
|
||||
… collecting bookmarks with [Raindrop](https://raindrop.io/SemanticData).
|
||||
… compiling [configuration files](https://github.com/semanticdata/dotfiles) in [GitHub](https://github.com/).
|
||||
|
||||
@ -7,6 +7,6 @@ updated: 2023-12-04
|
||||
---
|
||||
|
||||
|
||||
An arpeggio is a type of [[./Chords|broken chord]] in which the notes that compose a chord are individually sounded in a progressive rising or descending order. Arpeggios on keyboard instruments may be called rolled chords.
|
||||
An arpeggio is a type of [[Chords|broken chord]] in which the notes that compose a chord are individually sounded in a progressive rising or descending order. Arpeggios on keyboard instruments may be called rolled chords.
|
||||
|
||||
Arpeggios indicate a chord in which the notes are sounded individually. The word "arpeggio" comes from the Italian word "arpeggiare," which means to play on a harp.
|
||||
|
||||
@ -5,7 +5,7 @@ updated: 2023-12-15
|
||||
---
|
||||
|
||||
|
||||
Free, open source [[./CSS#CSS Frameworks|CSS framework]] that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. It provides a collection of pre-designed CSS classes to help build responsive and modern websites. Very versatile because it does no require any JavaScript.
|
||||
Free, open source [[CSS#CSS Frameworks|CSS framework]] that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. It provides a collection of pre-designed CSS classes to help build responsive and modern websites. Very versatile because it does no require any JavaScript.
|
||||
|
||||
With Bulma, developers can easily create responsive layouts by leveraging the grid system and making use of the various predefined classes. It offers a wide range of components and elements like buttons, forms, navbar, cards, and more, which can be customized and combined to create a visually appealing website.
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: CSS
|
||||
compartir: true
|
||||
aliases:
|
||||
- Cascading Style Sheets
|
||||
updated: 2023-12-15
|
||||
updated: 2024-01-30
|
||||
---
|
||||
|
||||
## Introduction
|
||||
@ -14,9 +14,63 @@ CSS (Cascading Style Sheets) is a language used to describe the visual appearanc
|
||||
|
||||
CSS frameworks are pre-prepared collections of CSS stylesheets that help developers create visually appealing and responsive websites. These frameworks provide a set of standardized and reusable CSS components, layout systems, and pre-designed templates, making it easier to build attractive and consistent web pages.
|
||||
|
||||
One popular CSS framework that deserves special mention is [[./Bulma|Bulma]]. Why does it deserve especial attention? Because I like it. 😅
|
||||
One popular CSS framework that deserves special mention is [[Bulma|Bulma]]. Why does it deserve especial attention? Because I like it. 😅
|
||||
|
||||
Known for its simplicity and flexibility, [[./Bulma|Bulma]] has gained significant traction among web developers. Here's a closer look at why it has become a go-to choice for many.
|
||||
Known for its simplicity and flexibility, [[Bulma|Bulma]] has gained significant traction among web developers. Here's a closer look at why it has become a go-to choice for many.
|
||||
|
||||
> [!Note]
|
||||
> Check out [[./Notes on CSS|Notes on CSS]] to explore the topic a little more.
|
||||
## Common Breakpoints
|
||||
|
||||
Based on Bootstrap: 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px.
|
||||
|
||||
You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent.
|
||||
|
||||
## Mixins
|
||||
|
||||
All _mobile-first-designs_ media queries and 1 _desktop-first-design_ media query per given CSS class.
|
||||
|
||||
### Anything Above a Certain Screen Width (_mobile-first-design_)
|
||||
|
||||
```scss
|
||||
@mixin screen-min($min) {
|
||||
@media (min-width: $min) {
|
||||
@content
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Anything Below a Certain Screen Width (_desktop-first-design_)
|
||||
|
||||
```scss
|
||||
@mixin screen-max($max) {
|
||||
@media (max-width: $max - 1) {
|
||||
@content
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Anything In-between Two Values (_hybrid_)
|
||||
|
||||
```scss
|
||||
@mixin screen-minmax($min, $max){
|
||||
@media (min-width: $min) and (max-width: $max - 1){
|
||||
@content
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```scss
|
||||
------------------------------------------------------------------
|
||||
// USING THE MIXINS
|
||||
// Example - Writing a custom bootstrap-like container from scratch
|
||||
------------------------------------------------------------------
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
@include screen-min(768px){max-width: 750px;}
|
||||
@include screen-min(992px){max-width: 970px;}
|
||||
@include screen-min(1200px){max-width: 1170px;}
|
||||
@include screen-min(1400px){max-width: 1370px;}
|
||||
@include screen-min(1600px){max-width: 1570px;}
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,6 +7,6 @@ updated: 2023-12-04
|
||||
---
|
||||
|
||||
|
||||
Be the watchful caretaker of your ever growing plants and flowers. Grow your knowledge by forming new branches and connecting the dots. Write short structured notes articulating specific ideas and share them. Avoid creating or nourishing orphan notes. Anything not connected eventually needs to go. We must: refine our ideas, thread our thoughts, and keep notes [[./Atomic Notes|atomic]].
|
||||
Be the watchful caretaker of your ever growing plants and flowers. Grow your knowledge by forming new branches and connecting the dots. Write short structured notes articulating specific ideas and share them. Avoid creating or nourishing orphan notes. Anything not connected eventually needs to go. We must: refine our ideas, thread our thoughts, and keep notes [[Atomic Notes|atomic]].
|
||||
|
||||
Taking raw notes is _useless_. Seed your garden with quality content and cultivate your curiosity. Plant seeds in your mind garden by taking smart personal notes. These don't need to be written in a publishable form.
|
||||
|
||||
@ -8,13 +8,13 @@ updated: 2023-12-04
|
||||
|
||||
## What is a Digital Garden
|
||||
|
||||
A digital garden is a combination of an **online notebook** and a **personal wiki**, where digital gardeners write in small, unfinished pieces, also known as [[./Atomic Notes|atomic notes]], and share these seeds of thought to be cultivated in public. Digital gardens are curated and evolve over time, sometimes growing wildly and sometimes getting pruned.
|
||||
A digital garden is a combination of an **online notebook** and a **personal wiki**, where digital gardeners write in small, unfinished pieces, also known as [[Atomic Notes|atomic notes]], and share these seeds of thought to be cultivated in public. Digital gardens are curated and evolve over time, sometimes growing wildly and sometimes getting pruned.
|
||||
|
||||
The phrase _"digital garden"_ comes up often while browsing these notes. Surely I overuse it. That said, I still like it. It more closely describes what I envision this website to be: a carefully curated garden of digital notes. Having a reliable system on which to dump raw information is extremely useful. The idea of [[./Sweep Your Mind|sweeping]] one's mind is helpful to rid yourself of distractions from incorrectly prioritized tasks.
|
||||
The phrase _"digital garden"_ comes up often while browsing these notes. Surely I overuse it. That said, I still like it. It more closely describes what I envision this website to be: a carefully curated garden of digital notes. Having a reliable system on which to dump raw information is extremely useful. The idea of [[Sweep Your Mind|sweeping]] one's mind is helpful to rid yourself of distractions from incorrectly prioritized tasks.
|
||||
|
||||
## How is Content Curated
|
||||
|
||||
Digital Gardens are explorable rather than structured as a strictly linear stream of posts. They grow slowly over time, rather than created as _"finished"_ work that is to never be touched again. A place where little changes accumulate and transform thoughts and ideas. As you [[./Continuous Care|continuously care]] for your garden, you **revise**, **update**, and **change** your ideas as they develop.
|
||||
Digital Gardens are explorable rather than structured as a strictly linear stream of posts. They grow slowly over time, rather than created as _"finished"_ work that is to never be touched again. A place where little changes accumulate and transform thoughts and ideas. As you [[Continuous Care|continuously care]] for your garden, you **revise**, **update**, and **change** your ideas as they develop.
|
||||
|
||||
## Kinds of Notes
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ When you are looking at a tab, you will see six horizontal lines. These lines re
|
||||
|
||||
### Arpeggio
|
||||
|
||||
An [[./Arpeggio|arpeggio]] is a type of [[./Chords|broken chord]] in which the notes that compose a chord are individually sounded in a progressive rising or descending order. Arpeggios on keyboard instruments may be called _rolled chords_.
|
||||
An [[Arpeggio|arpeggio]] is a type of [[Chords|broken chord]] in which the notes that compose a chord are individually sounded in a progressive rising or descending order. Arpeggios on keyboard instruments may be called _rolled chords_.
|
||||
|
||||
```md
|
||||
e|--------2-----------------|
|
||||
|
||||
@ -13,4 +13,4 @@ updated: 2023-12-15
|
||||
|
||||
## JavaScript Frameworks
|
||||
|
||||
JavaScript frameworks are pre-written and reusable code libraries that simplify and speed up web development. They provide tools, functions, and structure to build dynamic and interactive websites or applications. Frameworks like React, Vue, [[./Svelte|Svelte]], and Angular make it easier to handle complex logic and create engaging user interfaces.
|
||||
JavaScript frameworks are pre-written and reusable code libraries that simplify and speed up web development. They provide tools, functions, and structure to build dynamic and interactive websites or applications. Frameworks like React, Vue, [[Svelte|Svelte]], and Angular make it easier to handle complex logic and create engaging user interfaces.
|
||||
|
||||
@ -8,7 +8,7 @@ tags:
|
||||
|
||||
## Introduction
|
||||
|
||||
Markdown is a lightweight [[./Markup Language|Markup Language]] that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.
|
||||
Markdown is a lightweight [[Markup Language|Markup Language]] that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.
|
||||
|
||||
> [!Note]
|
||||
> This website's content is exclusively written in Markdown.
|
||||
@ -27,4 +27,4 @@ GitHub Flavored Markdown, also known as GFM, is a Markdown flavor used by GitHub
|
||||
|
||||
## Markdown Showcase
|
||||
|
||||
Check out the [[./Markdown Showcase|Markdown Showcase]] to see what Markdown can do.
|
||||
Check out the [[markdown-showcase|markdown-showcase]] to see what Markdown can do.
|
||||
|
||||
@ -14,13 +14,13 @@ tags:
|
||||
|
||||
## Background
|
||||
|
||||
Forgetful Notes has gone through many changes. I have not been shy about moving from technology to technology as I learn new things. Coming across the world of [[./Static Site Generators|Static Site Generators]] was a game changer. I have ran my notes through [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/), [MkDocs](https://squidfunk.github.io/mkdocs-material/), and most recently [Zola](https://www.getzola.org/).
|
||||
Forgetful Notes has gone through many changes. I have not been shy about moving from technology to technology as I learn new things. Coming across the world of [[Static Site Generators|Static Site Generators]] was a game changer. I have ran my notes through [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/), [MkDocs](https://squidfunk.github.io/mkdocs-material/), and most recently [Zola](https://www.getzola.org/).
|
||||
|
||||
However, this site is not specifically built with any of the aforementioned. Instead I have opted to follow in the footsteps of [Jacky Zhao](https://github.com/jackyzha0) and created my [[./Digital Garden|Digital Garden]] using the new fully rewritten [Quartz](https://github.com/jackyzha0/quartz)—a set of tools that helps you publish your digital garden and notes as a website for free.
|
||||
However, this site is not specifically built with any of the aforementioned. Instead I have opted to follow in the footsteps of [Jacky Zhao](https://github.com/jackyzha0) and created my [[Digital Garden|Digital Garden]] using the new fully rewritten [Quartz](https://github.com/jackyzha0/quartz)—a set of tools that helps you publish your digital garden and notes as a website for free.
|
||||
|
||||
## Technology
|
||||
|
||||
All content for the site is written in [[./Markdown|Markdown]] within [Obsidian](https://obsidian.md/)—an extensible, flexible note-taking app. To export the notes from Obsidian, I rely on the [GitHub Publisher](https://github.com/ObsidianPublisher) plugin.
|
||||
All content for the site is written in [[Markdown|Markdown]] within [Obsidian](https://obsidian.md/)—an extensible, flexible note-taking app. To export the notes from Obsidian, I rely on the [GitHub Publisher](https://github.com/ObsidianPublisher) plugin.
|
||||
|
||||
The [source code](https://github.com/semanticdata/forgetful-notes) is hosted in [GitHub](https://github.com/). From here we use [GitHub Actions](https://github.com/features/actions) to build and deploy the site to [GitHub Pages](https://pages.github.com/).
|
||||
|
||||
|
||||
@ -14,4 +14,4 @@ Move your body every day. Benefits include:
|
||||
- Increased productivity.
|
||||
- Reduced anxiety.
|
||||
|
||||
The "every day" part is important, because [[./Consistency|Consistency]] is key to most things worth doing.
|
||||
The "every day" part is important, because [[Consistency|Consistency]] is key to most things worth doing.
|
||||
|
||||
@ -3,11 +3,13 @@ title: Quotes Collection
|
||||
tags:
|
||||
- collection
|
||||
compartir: true
|
||||
updated: 2023-12-15
|
||||
updated: 2024-01-24
|
||||
---
|
||||
|
||||
## Random
|
||||
|
||||
>"Always demand a deadline. A deadline weeds out the extraneous and the ordinary. It prevents you from trying to make it perfect, so you have to make it different. Different is better."
|
||||
|
||||
> [!quote]
|
||||
>
|
||||
> "Always demand a deadline. A deadline weeds out the extraneous and the ordinary. It prevents you from trying to make it perfect, so you have to make it different. Different is better."
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: SSD / NVMe Comparison
|
||||
description: This page was originally published on July 28, 2023 to aid in selecting SSD, NVMe drives to take advantage of an current Micro Center sale.
|
||||
compartir: true
|
||||
updated: 2023-12-12
|
||||
updated: 2024-01-30
|
||||
tags:
|
||||
- archived
|
||||
---
|
||||
@ -100,7 +100,7 @@ Selected $0.10 as the baseline after averaging some calculations.
|
||||
|
||||
### NVMe
|
||||
|
||||
| NVMe | $ / GB | 1pt per $0.01 | 1 per GB | Coefficient | Score |
|
||||
| Description | $ / GB | per $0.01 | per GB | Coef | Score |
|
||||
| ------------------------ |:------:|:-------------:|:--------:|:-----------:|:-----:|
|
||||
| 970 500 GB $35 MLC | 0.070 | 3.00 | 500 | 1.25 | 629 |
|
||||
| 970 2 TB $100 MLC | 0.050 | 5.00 | 2000 | 1.25 | 2506 |
|
||||
@ -116,11 +116,11 @@ Selected $0.10 as the baseline after averaging some calculations.
|
||||
| Performance 1 TB $55 TLC | 0.055 | 4.50 | 1000 | 1 | 1005 |
|
||||
| Prime 500 GB $30 TLC | 0.060 | 4.00 | 500 | 1 | 504 |
|
||||
| Prime 1 TB $50 TLC | 0.050 | 5.00 | 1000 | 1 | 1005 |
|
||||
_Higher is better._
|
||||
\*_Higher is better._
|
||||
|
||||
### SSD
|
||||
|
||||
| SSD | $ / GB | 1 per cent | 1 per GB | Coefficient | Score |
|
||||
| Description | $ / GB | 1 per cent | 1 per GB | Coefficient | Score |
|
||||
| ------------------------- |:------:|:----------:|:--------:|:-----------:|:-----:|
|
||||
| Inland 1TB $50 TLC | 0.050 | 5 | 1000 | 1 | 1005 |
|
||||
| Inland 512GB $25 TLC | 0.049 | 5.1 | 512 | 1 | 517 |
|
||||
@ -132,7 +132,7 @@ _Higher is better._
|
||||
| 870 EVO 4TB $220 MLC | 0.055 | 4.5 | 4000 | 1.25 | 5006 |
|
||||
| 870 EVO 500GB $40 MLC | 0.020 | 8 | 500 | 1.25 | 635 |
|
||||
| 870 QVO 1TB $70 QLC | 0.070 | 3 | 1000 | 0.75 | 753 |
|
||||
_Higher is better._
|
||||
\*_Higher is better._
|
||||
|
||||
## Conclusions
|
||||
|
||||
|
||||
@ -7,10 +7,10 @@ compartir: true
|
||||
---
|
||||
|
||||
|
||||
Static site generators (SSGs) are engines that use text input files (such as [[./Markdown|Markdown]], [reStructuredText](https://docutils.sourceforge.io/rst.html), and [AsciiDoc](https://asciidoc.org/)) to generate static web pages. SSGs are typically for rarely-changing, informative content, such as product pages, news websites, (software) documentation, manuals, and blogs.
|
||||
Static site generators (SSGs) are engines that use text input files (such as [[Markdown|Markdown]], [reStructuredText](https://docutils.sourceforge.io/rst.html), and [AsciiDoc](https://asciidoc.org/)) to generate static web pages. SSGs are typically for rarely-changing, informative content, such as product pages, news websites, (software) documentation, manuals, and blogs.
|
||||
|
||||
Popular choices in SSGs include:
|
||||
|
||||
- [Jekyll](https://jekyllrb.com/)
|
||||
- [Hugo](https://gohugo.io/)
|
||||
- [[./Zola|Zola]]
|
||||
- [[Zola|Zola]]
|
||||
|
||||
@ -6,7 +6,7 @@ updated: 2023-12-15
|
||||
|
||||
## Introduction
|
||||
|
||||
[Svelte](https://svelte.dev/) is a modern [[./JavaScript#JavaScript Frameworks|JavaScript Framework]] for building web applications. It compiles components into efficient, framework-free [[./JavaScript|JavaScript]] code, resulting in fast and lightweight applications. With its reactive approach and declarative syntax, Svelte simplifies development and delivers impressive performance.
|
||||
[Svelte](https://svelte.dev/) is a modern [[JavaScript#JavaScript Frameworks|JavaScript Framework]] for building web applications. It compiles components into efficient, framework-free [[JavaScript|JavaScript]] code, resulting in fast and lightweight applications. With its reactive approach and declarative syntax, Svelte simplifies development and delivers impressive performance.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
---
|
||||
title: Tools I Use
|
||||
alias:
|
||||
- Uses
|
||||
tags:
|
||||
- list
|
||||
updated: 2024-01-30
|
||||
compartir: true
|
||||
updated: 2023-12-04
|
||||
---
|
||||
|
||||
|
||||
@ -17,9 +19,13 @@ A non-comprehensive list of the hardware and software I use on a day-to-day basi
|
||||
|
||||
## Software
|
||||
|
||||
### Daily Drivers
|
||||
|
||||
- [Obsidian](https://obsidian.md/) – Markdown Text Editor
|
||||
- [Visual Studio Code](https://code.visualstudio.com/) – Code Editor
|
||||
- [Raindrop](https://raindrop.io/) – Bookmarks Manager
|
||||
- [Syncthing](https://github.com/syncthing/syncthing) – Open source continuous file synchronization.
|
||||
- [Espanso](https://github.com/espanso/espanso) – Cross-platform text expander written in Rust.
|
||||
|
||||
### Notable Visual Studio Code Extensions
|
||||
|
||||
@ -49,4 +55,5 @@ A non-comprehensive list of the hardware and software I use on a day-to-day basi
|
||||
- [QuickLook](https://github.com/QL-Win/QuickLook) – Bring macOS "Quick Look" feature to Windows.
|
||||
- [PowerToys](https://github.com/microsoft/PowerToys) – Windows system utilities to maximize productivity.
|
||||
- [EarTrumpet](https://github.com/File-New-Project/EarTrumpet) – Volume control, multi-channel discovery, default playback device management.
|
||||
- [PDFsam](https://github.com/torakiki/pdfsam) – PDFsam, a desktop application to split, merge, mix, rotate PDF files and extract pages.
|
||||
- [PDFsam](https://github.com/torakiki/pdfsam) – Desktop application to split, merge, mix, rotate PDF files and extract pages.
|
||||
- [TaskbarX](https://github.com/ChrisAnd1998/TaskbarX) – Center Windows taskbar icons with a variety of animations and options.
|
||||
|
||||
@ -7,9 +7,9 @@ compartir: true
|
||||
|
||||
## Introduction
|
||||
|
||||
[Zola](https:) is a fast [[./Static Site Generators|static site generator]] (SSG) contained in a single binary with everything built-in, it has no other dependencies. It is _by far_ my preferred way to build static websites.
|
||||
[Zola](https:) is a fast [[Static Site Generators|static site generator]] (SSG) contained in a single binary with everything built-in, it has no other dependencies. It is _by far_ my preferred way to build static websites.
|
||||
|
||||
SSGs use dynamic templates to transform content into static HTML pages. Static sites are thus very fast and require no databases, making them easy to host. Content is written in [[./Markdown|Markdown]].
|
||||
SSGs use dynamic templates to transform content into static HTML pages. Static sites are thus very fast and require no databases, making them easy to host. Content is written in [[Markdown|Markdown]].
|
||||
|
||||
## Useful Commands
|
||||
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
---
|
||||
title: "Forgetful Notes"
|
||||
description: Forgotten Notes—A digital garden of knowledge. A platform for my learning and creative endeavours. A space for thinking through, building upon, and coming back to.
|
||||
title: Forgetful Notes
|
||||
description: Forgetful Notes—A digital garden of knowledge. A platform for my learning and creative endeavours. A space for thinking through, building upon, and coming back to.
|
||||
compartir: true
|
||||
updated: 2024-01-30
|
||||
---
|
||||
|
||||
You've come across **Forgotten Notes**—a [[Digital Garden|digital garden]] of knowledge. Come in and make yourself comfortable.
|
||||
|
||||
You've come across **Forgetful Notes**—a [[Digital Garden|digital garden]] of knowledge. Come in and make yourself comfortable.
|
||||
|
||||
This website serves as a platform for my learning and creative endeavours. A space for thinking through, building upon, and coming back to. It is part of my effort to organize my own theories, concepts, and ideas in a more public setting.
|
||||
|
||||
@ -12,13 +15,13 @@ You will find within a wide range of topics, expanding and exploring ideas acros
|
||||
Like me, all notes contained within should be considered work-in-progress. Expect changes at all content levels. That said, I try not to let perfectionism get in the way. That means what you read here is not authoritative or complete, and is not representative of my best work. Please keep that in mind as you navigate around the garden. I'm glad you are here. Enjoy your visit!
|
||||
|
||||
- Want to learn more _about me_?
|
||||
Check out the [About](/about) page.
|
||||
Check out the [[About|About]] page.
|
||||
- Want to read more of my material?
|
||||
Visit my [Blog](https://miguelpimentel.do/).
|
||||
- Want to learn more _about the site_?
|
||||
Review the site's [[Meta]] page.
|
||||
Review the site's [[Meta|Meta]] page.
|
||||
|
||||
I leave you with some fun quotes. Feel free to stop by the [[Quotes Collection]].
|
||||
I leave you with some fun quotes. Feel free to stop by the [[Quotes Collection|Quotes Collection]].
|
||||
|
||||
> _"The problem with your sink is that I have no idea how to fix it."_
|
||||
|
||||
|
||||
255
content/markdown-showcase.md
Normal file
255
content/markdown-showcase.md
Normal file
@ -0,0 +1,255 @@
|
||||
---
|
||||
title: Markdown Showcase
|
||||
description: This is intended as a quick reference and showcase of Markdown's synthax.
|
||||
tags:
|
||||
- markdown
|
||||
- reference
|
||||
compartir: true
|
||||
date: 2022-12-31
|
||||
updated: 2023-10-11
|
||||
---
|
||||
|
||||
|
||||
This is intended as a quick reference and showcase of Markdown's synthax.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# Heading Level 1
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
|
||||
|
||||
## Heading Level 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
|
||||
|
||||
### Heading Level 3
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
|
||||
|
||||
#### Heading Level 4
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
|
||||
|
||||
##### Heading Level 5
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
|
||||
|
||||
###### Heading Level 6
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
||||
## Text Formatting
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
**Bold**, _Italic_, _**Both**_.
|
||||
**Bold**, _Italic_, ~~Strikethrough~~, ~~_**ALL OF THEM**_~~.
|
||||
|
||||
## Links
|
||||
|
||||
You can [link](https://example.dom/) to external pages. and other internal [[Markdown|links]].
|
||||
|
||||
## Blockquotes
|
||||
|
||||
### Simple Example
|
||||
|
||||
> This is a blockquote
|
||||
> with several lines
|
||||
|
||||
### Formatted Example
|
||||
|
||||
> **Blockquote Embedded List**
|
||||
> 1. This is the first list item.
|
||||
> 2. This is the second list item.
|
||||
>
|
||||
> Here's some example code:
|
||||
> `Markdown.generate();`
|
||||
|
||||
## Lists
|
||||
|
||||
### Ordered List
|
||||
|
||||
In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
### Nested List
|
||||
|
||||
In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
|
||||
|
||||
* Item
|
||||
1. First Sub-item
|
||||
2. Second Sub-item
|
||||
1. Numbered Item
|
||||
2. Another one
|
||||
1. Sub-item
|
||||
* Unordered again
|
||||
|
||||
## Code
|
||||
|
||||
### Inline Code
|
||||
|
||||
Let us use some `inline code` and check out how it `looks`. Here's some `more`.
|
||||
|
||||
### Code Blocks
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<div style="background-color: #333;">
|
||||
<a href="https://example.com/">Example</a>
|
||||
</div>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.niceClass {
|
||||
color: blue;
|
||||
background-color: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
|
||||
|
||||
|head one|head two|head three|
|
||||
|---|:---:|---:|
|
||||
|ok|good swedish fish|nice|
|
||||
|out of stock|good and plenty|nice|
|
||||
|ok|good `oreos`|hmm|
|
||||
|ok|good `zoute` drop|yumm|
|
||||
|
||||
### Simple Example
|
||||
|
||||
Title 1 | Title 2 | Title 3 | Title 4
|
||||
--------------------- | --------------------- | --------------------- | ---------------------
|
||||
lorem | lorem ipsum | lorem ipsum dolor | lorem ipsum dolor sit
|
||||
lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit
|
||||
lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit
|
||||
lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit
|
||||
|
||||
### Longer Example
|
||||
|
||||
Title 1 | Title 2 | Title 3 | Title 4
|
||||
--- | --- | --- | ---
|
||||
lorem | lorem ipsum | lorem ipsum dolor | lorem ipsum dolor sit
|
||||
lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur | lorem ipsum dolor sit amet | lorem ipsum dolor sit
|
||||
lorem ipsum dolor | lorem ipsum | lorem | lorem ipsum
|
||||
lorem ipsum dolor | lorem ipsum dolor sit | lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur
|
||||
|
||||
### Inline Markdown Within Tables
|
||||
|
||||
| Inline | Markdown | In | Table |
|
||||
| ---------- | --------- | ----------------- | ---------- |
|
||||
| _italics_ | **bold** | ~~strikethrough~~ | `code` |
|
||||
|
||||
## Horizontal Rule
|
||||
|
||||
---
|
||||
|
||||
## Tasks and Custom Todos
|
||||
|
||||
- [ ] Pending Task
|
||||
- [x] Completed Task
|
||||
* [-] Won't Do Task
|
||||
* [/] In Progress Task
|
||||
* [*] You are a star.
|
||||
* [!] Exclamation Mark!
|
||||
* [?] Question Mark?
|
||||
* [<] Scheduled Task
|
||||
* [>] Forwarded Task
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
## Other Elements — Abbr, Sub, Sup, Kbd, Mark
|
||||
|
||||
### Description
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
### Subscript
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
### Superscript
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
### Keys Representation
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
|
||||
### Highlighting
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
|
||||
## Callouts
|
||||
|
||||
> [!EXAMPLE] Examples
|
||||
>
|
||||
> Aliases: example
|
||||
|
||||
> [!note] Notes
|
||||
>
|
||||
> Aliases: note
|
||||
|
||||
> [!abstract] Summaries
|
||||
>
|
||||
> Aliases: abstract, summary, tldr
|
||||
|
||||
> [!info] Info
|
||||
>
|
||||
> Aliases: info, todo
|
||||
|
||||
> [!tip] Hint
|
||||
>
|
||||
> Aliases: tip, hint, important
|
||||
|
||||
> [!success] Success
|
||||
>
|
||||
> Aliases: success, check, done
|
||||
|
||||
> [!question] Question
|
||||
>
|
||||
> Aliases: question, help, faq
|
||||
|
||||
> [!warning] Warning
|
||||
>
|
||||
> Aliases: warning, caution, attention
|
||||
|
||||
> [!failure] Failure
|
||||
>
|
||||
> Aliases: failure, fail, missing
|
||||
|
||||
> [!danger] Error
|
||||
>
|
||||
> Aliases: danger, error
|
||||
|
||||
> [!bug] Bug
|
||||
>
|
||||
> Aliases: bug
|
||||
|
||||
> [!quote] Quote
|
||||
>
|
||||
> Aliases: quote, cite
|
||||
Loading…
Reference in New Issue
Block a user