neil/silverbullet
1
0
Fork 0
Code Activity

Major directive refactor (#195)

Browse Source 
Fixes #188 #144 #76: major refactor of directive parsing, rendering, styling
This commit is contained in:
Zef Hemel
2022-12-14 20:04:20 +01:00
committed by GitHub
parent 79e1151ee6
commit aaebea5e54
44 changed files with 656 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/CHANGELOG.md
+6 -2
View File
@@ -3,7 +3,7 @@ release.
---
## Next
## 0.2.3
> **Note** Admonition support
> is now here
@@ -14,10 +14,14 @@ release.
* Markdown enhancements:
* Added support for ~~strikethrough~~ syntax.
* Added support for [admonitions](https://github.com/community/community/discussions/16925) using Github syntax (`note` and `warning`) by [Christian Schulze](https://github.com/silverbulletmd/silverbullet/pull/186)
* Directives are now hidden unless the cursor is placed inside them for an even cleaner look
* Directives have been heavily reworked, and are now "properly" parsed. This is visible in two ways:
* There's now syntax highlighting for queries
* Once the cursor is placed within a directive, it shows the whole block as a "capsule" enclosed in the opening and close tag, when the cursor is outside, it just subtly highlights what parts of a page are directive generated.
* New logo! Contributed by [Peter Coyne](https://github.com/silverbulletmd/silverbullet/pull/177)
* New button icons, from [feather](https://feathericons.com/) (suggested by Peter Coyne)
* UI font tweaks
* Fix for the {[Page: Rename]} command by [Chris Zarate](https://github.com/silverbulletmd/silverbullet/pull/190)
* Empty query result set rendered as a table now shows “No results” instead of an empty markdown table — fix by [ItzNesbro](https://github.com/silverbulletmd/silverbullet/pull/192).
---
website/Silver Bullet.md
+3 -1
View File
@@ -1,6 +1,8 @@
Silver Bullet is an extensible, [open source](https://github.com/silverbulletmd/silverbullet), **personal
knowledge management** application. Indeed, fundamentally that’s fancy talk for “a note-taking app with links.” However, Silver Bullet goes a bit beyond just that.
You thought there was no such thing as a [silver bullet](https://en.wikipedia.org/wiki/Silver_bullet). You were wrong.
Let’s have a look at some of its features.
## Features
@@ -69,7 +71,7 @@ rating: 5
There are a few features you don’t get to fully experience in this environment, because they rely on a working back-end, such as:
* Any edits you make and pages you add aren’t saved (kind of useful).
* [[🔌 Directive|Directives]] are disabled, although you will see them being used across this site (look for those `<!-- #query ... -->` and `<!-- /query -->` comments), they just don’t update their content dynamically.
* [[🔌 Directive|Directives]] are disabled, although you will see them being used across this site (look for sections with subtle curved lines around them, if you move your cursor inside you’ll see where their content is generated from), they just don’t update their content dynamically.
* **Full-text search**.
* **Extending** and updating SB’s functionality by installing additional [[🔌 Plugs]] (SB parlance for plug-ins) and writing your own.
website/🔌 Directive.md
+3 -2
View File
@@ -33,11 +33,10 @@ which renders as follows:
<!-- #use [[template/plug]] {"name": "🔌 Directive", "repo": "https://google.com", "author": "Pete"} -->
* [[🔌 Directive]] by **Pete** ([repo](https://google.com))
<!-- /use -->
* [ ] #test This is a test task
Note that a string is also a valid JSON value:
* [ ] #test This is a test task
So, a template can take, for instance a tag name as an argument:
<!-- #use [[template/tagged-tasks]] "test" -->
@@ -48,6 +47,8 @@ So, a template can take, for instance a tag name as an argument:
$eval
The `#eval` directive can be used to evaluate arbitrary JavaScript expressions. It’s also possible to invoke arbitrary plug functions this way.
**Note:** This feature is experimental and will likely evolve.
A simple example is multiplying numbers:
<!-- #eval 10 * 10 -->
website/🔌 Directive/Query.md
+19 -20
View File
@@ -2,7 +2,6 @@
The `#query` is the most widely used directive. It can be used to query various data sources and render results in various ways.
### Syntax
1. _start with_: `<!-- #query [QUERY GOES HERE] -->`
2. _end with_: `<!-- /query -->`
3. _write your query_: replace `[QUERY GOES HERE]` with any query you want using the options below.
@@ -166,13 +165,13 @@ For the sake of simplicity, we will use the `page` data source and limit the res
**Result:** Okay, this is what we wanted but there is also information such as `perm`, `type` and `lastModified` that we don't need.
<!-- #query page where type = "plug" order by lastModified desc limit 5 -->
|name |lastModified |contentType |size|perm|type|repo |share-support|
|--|--|--|--|--|--|--|--|
|🔌 Collab |1669545776517|text/markdown|2926|rw|plug|https://github.com/silverbulletmd/silverbullet|true|
|🔌 Tasks |1669536555227|text/markdown|1231|rw|plug|https://github.com/silverbulletmd/silverbullet| |
|🔌 Share |1669536545411|text/markdown|672 |rw|plug|https://github.com/silverbulletmd/silverbullet| |
|🔌 Markdown|1669536539800|text/markdown|268 |rw|plug|https://github.com/silverbulletmd/silverbullet|true|
|🔌 Emoji |1669536531680|text/markdown|155 |rw|plug|https://github.com/silverbulletmd/silverbullet| |
|name |lastModified |contentType |size|perm|type|repo |uri |author |share-support|
|--|--|--|--|--|--|--|--|--|--|
|🔌 Directive|1671044429696|text/markdown|2605|rw|plug|https://github.com/silverbulletmd/silverbullet | | | |
|🔌 Backlinks|1670833065065|text/markdown|960 |rw|plug|https://github.com/Willyfrog/silverbullet-backlinks|ghr:Willyfrog/silverbullet-backlinks|Guillermo Vayá| |
|🔌 Collab |1670435068917|text/markdown|2923|rw|plug|https://github.com/silverbulletmd/silverbullet | | |true|
|🔌 Tasks |1669536555227|text/markdown|1231|rw|plug|https://github.com/silverbulletmd/silverbullet | | | |
|🔌 Share |1669536545411|text/markdown|672 |rw|plug|https://github.com/silverbulletmd/silverbullet | | | |
<!-- /query -->
#### 6.3 Query to select only certain fields
@@ -183,14 +182,14 @@ and `repo` columns and then sort by last modified time.
**Result:** Okay, this is much better. However, I believe this needs a touch
from a visual perspective.
<!-- #query page select name author repo uri where type = "plug" order by lastModified desc limit 5 -->
|name |author|repo |ri|
|-----------||----------------------------------------------||
|🔌 Collab ||https://github.com/silverbulletmd/silverbullet||
|🔌 Tasks ||https://github.com/silverbulletmd/silverbullet||
|🔌 Share ||https://github.com/silverbulletmd/silverbullet||
|🔌 Markdown||https://github.com/silverbulletmd/silverbullet||
|🔌 Emoji ||https://github.com/silverbulletmd/silverbullet||
<!-- #query page select name author repo uririri where type = "plug" order by lastModified desc limit 5 -->
|name |author |repo |ri|
|--|--|--|--|
|🔌 Directive| |https://github.com/silverbulletmd/silverbullet ||
|🔌 Backlinks|Guillermo Vayá|https://github.com/Willyfrog/silverbullet-backlinks||
|🔌 Collab | |https://github.com/silverbulletmd/silverbullet ||
|🔌 Tasks | |https://github.com/silverbulletmd/silverbullet ||
|🔌 Share | |https://github.com/silverbulletmd/silverbullet ||
<!-- /query -->
#### 6.4 Display the data in a format defined by a template
@@ -199,12 +198,12 @@ from a visual perspective.
**Result:** Here you go. This is the result we would like to achieve 🎉. Did you see how I used `render` and `template/plug` in a query? 🚀
<!-- #query page select name author repo uri where type = "plug" order by lastModified desc limit 5 render [[template/plug]] -->
<!-- #query page select name author repo uririri where type = "plug" order by lastModified desc limit 5 render [[template/plug]] -->
* [[🔌 Directive]]
* [[🔌 Backlinks]] by **Guillermo Vayá** ([repo](https://github.com/Willyfrog/silverbullet-backlinks))
* [[🔌 Collab]]
* [[🔌 Tasks]]
* [[🔌 Share]]
* [[🔌 Markdown]]
* [[🔌 Emoji]]
* [[🔌 Share]]
<!-- /query -->
PS: You don't need to select only certain fields to use templates. Templates are
website/🔌 Plugs.md
-3
View File
@@ -25,10 +25,8 @@ These plugs are distributed with Silver Bullet and are automatically enabled:
* [[🔌 Share]]
* [[🔌 Tasks]]
<!-- /query -->
## Third-party plugs
These plugs are written either by third parties or distributed separately from the main SB distribution:
<!-- #query page where type = "plug" and uri != null order by name render [[template/plug]] -->
* [[🔌 Backlinks]] by **Guillermo Vayá** ([repo](https://github.com/Willyfrog/silverbullet-backlinks))
* [[🔌 Ghost]] by **Zef Hemel** ([repo](https://github.com/silverbulletmd/silverbullet-ghost))
@@ -39,7 +37,6 @@ These plugs are written either by third parties or distributed separately from t
* [[🔌 Serendipity]] by **Pantelis Vratsalis** ([repo](https://github.com/m1lt0n/silverbullet-serendipity))
* [[🔌 Twitter]] by **Silver Bullet Authors** ([repo](https://github.com/silverbulletmd/silverbullet-twitter))
<!-- /query -->
## How to develop your own plug
The easiest way to get started is to click the “Use this template” on the [silverbullet-plug-template](https://github.com/silverbulletmd/silverbullet-plug-template) repo.