From ccf8d057f85dc3e75f182960f0809d848261ea1f Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 15:36:22 +0100 Subject: [PATCH 01/18] fix deprecated nbRawOutput --- drafts/city_in_a_bottle.html | 4 ++++ drafts/city_in_a_bottle.nim | 16 ++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/drafts/city_in_a_bottle.html b/drafts/city_in_a_bottle.html index 4adbc82..0b1e02d 100644 --- a/drafts/city_in_a_bottle.html +++ b/drafts/city_in_a_bottle.html @@ -26,6 +26,10 @@ section#source { display:none } + +.nb-output { + line-height: 1.15; +} diff --git a/drafts/city_in_a_bottle.nim b/drafts/city_in_a_bottle.nim index 906fbf5..9334a19 100644 --- a/drafts/city_in_a_bottle.nim +++ b/drafts/city_in_a_bottle.nim @@ -3,29 +3,29 @@ import nimib nbInit nbText: """# City in a bottle -> example of usage of `nbRawOutput` +> example of usage of `nbRawHtml` How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib? Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code -and use `nbRawOutput` (see source by clicking "Show Source" button below) +and use `nbRawHtml` (see source by clicking "Show Source" button below) """ -nbRawOutput: """

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
""" +nbRawHtml: """

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
""" -nbText: "And we can use `nbRawOutput` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation." -nbRawOutput: """""" +nbText: "And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation." +nbRawHtml: """""" nbText: """Not sure why, but after you click a big white vertical area is created. Anyhoo, enjoy another tweet that links to a great Observable document that explains the code (I guess that now we should be able to reproduce that observable document in nimib...): """ -nbRawOutput: """

If you'd like to learn how the code works, I recommend checking out this amazing breakdown by @DanielDarabos that reorganizes and comments the code and provides controls to play with it.https://t.co/SVtC0yF0gJ

— Frank Force 🌻 (@KilledByAPixel) May 26, 2022
""" +nbRawHtml: """

If you'd like to learn how the code works, I recommend checking out this amazing breakdown by @DanielDarabos that reorganizes and comments the code and provides controls to play with it.https://t.co/SVtC0yF0gJ

— Frank Force 🌻 (@KilledByAPixel) May 26, 2022
""" nbText: "And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:" -nbRawOutput: """

It has its limits! I tried running @KilledByAPixel's amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\_(ツ)_/¯ https://t.co/n1c4oNEwNC pic.twitter.com/FeYixu7JS6

— Andy Baio (@waxpancake) July 11, 2022
""" +nbRawHtml: """

It has its limits! I tried running @KilledByAPixel's amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\_(ツ)_/¯ https://t.co/n1c4oNEwNC pic.twitter.com/FeYixu7JS6

— Andy Baio (@waxpancake) July 11, 2022
""" nbText: "Do I like Twitter? Oh, boy..." -nbRawOutput: """

Oh, boy! West Coast, #YoungSheldon starts now! pic.twitter.com/bpSn7NySME

— Young Sheldon (@YoungSheldon) January 4, 2019
""" +nbRawHtml: """

Oh, boy! West Coast, #YoungSheldon starts now! pic.twitter.com/bpSn7NySME

— Young Sheldon (@YoungSheldon) January 4, 2019
""" nbSave \ No newline at end of file From 53335812dcce9541ebfdfa97befb9c49245054fa Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 16:53:12 +0100 Subject: [PATCH 02/18] change srcDir to post and homeDir to docs --- .gitignore | 2 ++ docs/.gitkeep | 0 nimib.toml | 4 ++-- posts/city_in_a_bottle.nim | 31 +++++++++++++++++++++++++++++++ 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 docs/.gitkeep create mode 100644 posts/city_in_a_bottle.nim diff --git a/.gitignore b/.gitignore index 723fd9c..2f1f98c 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,8 @@ *.exe +docs/* +!docs/.gitkeep # file prefixed by x_ are ignored x_* diff --git a/docs/.gitkeep b/docs/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/nimib.toml b/nimib.toml index 82681fb..0837b5a 100644 --- a/nimib.toml +++ b/nimib.toml @@ -1,3 +1,3 @@ [nimib] -srcDir = "." -homeDir = "." \ No newline at end of file +srcDir = "posts" +homeDir = "docs" diff --git a/posts/city_in_a_bottle.nim b/posts/city_in_a_bottle.nim new file mode 100644 index 0000000..9334a19 --- /dev/null +++ b/posts/city_in_a_bottle.nim @@ -0,0 +1,31 @@ +import nimib + +nbInit + +nbText: """# City in a bottle +> example of usage of `nbRawHtml` + +How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib? + +Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code +and use `nbRawHtml` (see source by clicking "Show Source" button below) +""" +nbRawHtml: """ """ + +nbText: "And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation." +nbRawHtml: """""" + +nbText: """Not sure why, but after you click a big white vertical area is created. + +Anyhoo, enjoy another tweet that links to a great Observable document that explains the code +(I guess that now we should be able to reproduce that observable document in nimib...): +""" +nbRawHtml: """ """ + +nbText: "And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:" +nbRawHtml: """ """ + +nbText: "Do I like Twitter? Oh, boy..." +nbRawHtml: """ """ + +nbSave \ No newline at end of file From efee761609d2a3023f9b606b291b5b926c386840 Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 17:01:28 +0100 Subject: [PATCH 03/18] folder restructuring + useNblog theme --- dates.md | 2 +- posts/city_in_a_bottle.nim | 3 ++- posts/config.nims | 1 + src/nblog.nim | 6 ++++++ head_other.mustache => templates/head_other.mustache | 0 templates/header.mustache | 11 +++++++++++ 6 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 posts/config.nims create mode 100644 src/nblog.nim rename head_other.mustache => templates/head_other.mustache (100%) create mode 100644 templates/header.mustache diff --git a/dates.md b/dates.md index a46807f..d36e912 100644 --- a/dates.md +++ b/dates.md @@ -6,7 +6,7 @@ noting here for convenience publication dates (taken from git commits, will add - Mar 18: display_multidim_arrays - Mar 24: pixie_chessboard - Mar 24: random_palette -- Apr 13: bernulli_and_beyond +- Apr 13: bernoulli_and_beyond - May 7: mustache_specs - May 15: toc_mustache diff --git a/posts/city_in_a_bottle.nim b/posts/city_in_a_bottle.nim index 9334a19..da93cf1 100644 --- a/posts/city_in_a_bottle.nim +++ b/posts/city_in_a_bottle.nim @@ -1,6 +1,7 @@ import nimib +import nblog -nbInit +nbInit(theme = useNblog) nbText: """# City in a bottle > example of usage of `nbRawHtml` diff --git a/posts/config.nims b/posts/config.nims new file mode 100644 index 0000000..3bb69f8 --- /dev/null +++ b/posts/config.nims @@ -0,0 +1 @@ +switch("path", "$projectDir/../src") \ No newline at end of file diff --git a/src/nblog.nim b/src/nblog.nim new file mode 100644 index 0000000..d4835eb --- /dev/null +++ b/src/nblog.nim @@ -0,0 +1,6 @@ +import nimib / themes +import nimib / types + +proc useNblog*(doc: var NbDoc) = + doc.useDefault + doc.templateDirs = @["../templates"] \ No newline at end of file diff --git a/head_other.mustache b/templates/head_other.mustache similarity index 100% rename from head_other.mustache rename to templates/head_other.mustache diff --git a/templates/header.mustache b/templates/header.mustache new file mode 100644 index 0000000..18d7b39 --- /dev/null +++ b/templates/header.mustache @@ -0,0 +1,11 @@ +
+
+ + {{> header_right }} +
+
+
\ No newline at end of file From 93679db02bba37c9188124752e690cd45504b92a Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 17:01:59 +0100 Subject: [PATCH 04/18] remove draft version of city_in_a_bottle --- drafts/city_in_a_bottle.html | 118 ----------------------------------- drafts/city_in_a_bottle.nim | 31 --------- 2 files changed, 149 deletions(-) delete mode 100644 drafts/city_in_a_bottle.html delete mode 100644 drafts/city_in_a_bottle.nim diff --git a/drafts/city_in_a_bottle.html b/drafts/city_in_a_bottle.html deleted file mode 100644 index 0b1e02d..0000000 --- a/drafts/city_in_a_bottle.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - drafts/city_in_a_bottle.nim - - - - - - - - - - - -
-
- 🏡 - drafts/city_in_a_bottle.nim - -
-
-
-

City in a bottle

-
-

example of usage of nbRawOutput

-
-

How do I embed a tweet like this great tweet in nimib?

-

Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code -and use nbRawOutput (see source by clicking "Show Source" button below)

- -

And we can use nbRawOutput also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation.

- -

Not sure why, but after you click a big white vertical area is created.

-

Anyhoo, enjoy another tweet that links to a great Observable document that explains the code -(I guess that now we should be able to reproduce that observable document in nimib...):

- -

And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:

- -

Do I like Twitter? Oh, boy...

- -
- -
-
import nimib
-
-nbInit
-
-nbText: """# City in a bottle
-> example of usage of `nbRawOutput`
-
-How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib?
-
-Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code
-and use `nbRawOutput` (see source by clicking "Show Source" button below)
-"""
-nbRawOutput: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">A City in a Bottle 🌆<br><br>&lt;canvas style=width:99% id=c onclick=setInterval(&#39;for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z&lt;w&amp;(Y&lt;6-(32&lt;Z&amp;27&lt;X%w&amp;&amp;X/9^Z/8)*8%46||d|(s=(X&amp;Y&amp;Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a&#39;,t=9)&gt; <a href="https://t.co/N3WElPqtMY">pic.twitter.com/N3WElPqtMY</a></p>&mdash; Frank Force 🌻 (@KilledByAPixel) <a href="https://twitter.com/KilledByAPixel/status/1517294627996545024?ref_src=twsrc%5Etfw">April 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""
-
-nbText: "And we can use `nbRawOutput` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation."
-nbRawOutput: """<canvas style="width:99%; border:1px solid #000000;" id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)></canvas>"""
-
-nbText: """Not sure why, but after you click a big white vertical area is created.
-
-Anyhoo, enjoy another tweet that links to a great Observable document that explains the code
-(I guess that now we should be able to reproduce that observable document in nimib...):
-"""
-nbRawOutput: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">If you&#39;d like to learn how the code works, I recommend checking out this amazing breakdown by <a href="https://twitter.com/DanielDarabos?ref_src=twsrc%5Etfw">@DanielDarabos</a> that reorganizes and comments the code and provides controls to play with it.<a href="https://t.co/SVtC0yF0gJ">https://t.co/SVtC0yF0gJ</a></p>&mdash; Frank Force 🌻 (@KilledByAPixel) <a href="https://twitter.com/KilledByAPixel/status/1529838360235220992?ref_src=twsrc%5Etfw">May 26, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""
-
-nbText: "And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:"
-nbRawOutput: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It has its limits! I tried running <a href="https://twitter.com/KilledByAPixel?ref_src=twsrc%5Etfw">@KilledByAPixel</a>&#39;s amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\_(ツ)_/¯ <a href="https://t.co/n1c4oNEwNC">https://t.co/n1c4oNEwNC</a> <a href="https://t.co/FeYixu7JS6">pic.twitter.com/FeYixu7JS6</a></p>&mdash; Andy Baio (@waxpancake) <a href="https://twitter.com/waxpancake/status/1546634381183164416?ref_src=twsrc%5Etfw">July 11, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""
-
-nbText: "Do I like Twitter? Oh, boy..."
-nbRawOutput: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Oh, boy! West Coast, <a href="https://twitter.com/hashtag/YoungSheldon?src=hash&amp;ref_src=twsrc%5Etfw">#YoungSheldon</a> starts now! <a href="https://t.co/bpSn7NySME">pic.twitter.com/bpSn7NySME</a></p>&mdash; Young Sheldon (@YoungSheldon) <a href="https://twitter.com/YoungSheldon/status/1081045053798273024?ref_src=twsrc%5Etfw">January 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""
-
-nbSave
-
- \ No newline at end of file diff --git a/drafts/city_in_a_bottle.nim b/drafts/city_in_a_bottle.nim deleted file mode 100644 index 9334a19..0000000 --- a/drafts/city_in_a_bottle.nim +++ /dev/null @@ -1,31 +0,0 @@ -import nimib - -nbInit - -nbText: """# City in a bottle -> example of usage of `nbRawHtml` - -How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib? - -Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code -and use `nbRawHtml` (see source by clicking "Show Source" button below) -""" -nbRawHtml: """ """ - -nbText: "And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation." -nbRawHtml: """""" - -nbText: """Not sure why, but after you click a big white vertical area is created. - -Anyhoo, enjoy another tweet that links to a great Observable document that explains the code -(I guess that now we should be able to reproduce that observable document in nimib...): -""" -nbRawHtml: """ """ - -nbText: "And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:" -nbRawHtml: """ """ - -nbText: "Do I like Twitter? Oh, boy..." -nbRawHtml: """ """ - -nbSave \ No newline at end of file From e8b0df826a059f3019239bfa94195a06ed68ba38 Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 18:32:30 +0100 Subject: [PATCH 05/18] title, subtitle, pubDate --- posts/city_in_a_bottle.nim | 12 +++++---- src/nblog.nim | 46 ++++++++++++++++++++++++++++++++--- templates/head_other.mustache | 20 +++++++++++++++ templates/header.mustache | 2 +- 4 files changed, 70 insertions(+), 10 deletions(-) diff --git a/posts/city_in_a_bottle.nim b/posts/city_in_a_bottle.nim index da93cf1..21c7846 100644 --- a/posts/city_in_a_bottle.nim +++ b/posts/city_in_a_bottle.nim @@ -2,16 +2,18 @@ import nimib import nblog nbInit(theme = useNblog) +nb.title "City in a bottle" +nb.subtitle "How to embed a tweet in a nimib document" +nb.pubDate 2022, 7, 12 -nbText: """# City in a bottle -> example of usage of `nbRawHtml` - +nbText: """ How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib? Easy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code -and use `nbRawHtml` (see source by clicking "Show Source" button below) +and use `nbRawHtml`: """ -nbRawHtml: """ """ +nimibCode: + nbRawHtml: """ """ nbText: "And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation." nbRawHtml: """""" diff --git a/src/nblog.nim b/src/nblog.nim index d4835eb..a9e18d0 100644 --- a/src/nblog.nim +++ b/src/nblog.nim @@ -1,6 +1,44 @@ import nimib / themes -import nimib / types +import nimib +import mustachepkg / values +import std / strformat -proc useNblog*(doc: var NbDoc) = - doc.useDefault - doc.templateDirs = @["../templates"] \ No newline at end of file +type + Date* = object + year*: int + month*: int + day*: int + +proc useNblog*(nb: var NbDoc) = + nb.useDefault + nb.templateDirs = @["../templates"] + +proc title*(nb: var NbDoc, title: string) = + nb.context["title"] = title + nbText: "# " & title + +proc subtitle*(nb: var NbDoc, subtitle: string) = + nb.context["title"] = nb.context["title"].castStr & " - " & subtitle + nbText: "## " & subtitle + +proc castValue*(date: Date): Value = + let newValue = new(Table[string, Value]) + result = Value(kind: vkTable, vTable: newValue) + newValue["year"] = date.year.castValue + newValue["month"] = date.month.castValue + newValue["day"] = date.day.castValue + +proc castDate*(value: Value): Date = + assert value.kind == vkTable + assert value.vTable["year"].kind == vkInt + result.year = int(value.vTable["year"].vInt) + assert value.vTable["month"].kind == vkInt + result.month = int(value.vTable["month"].vInt) + assert value.vTable["day"].kind == vkInt + result.day = int(value.vTable["day"].vInt) + +proc pubDate*(nb: var NbDoc; year, month, day: int) = + nb.context["pub_date"] = Date(year: year, month: month, day: day) + let datetime = "2023-01-06" + let date = "Jan 06, 2023" + nbRawHtml: &"""

""" \ No newline at end of file diff --git a/templates/head_other.mustache b/templates/head_other.mustache index 4384cea..4ba8b10 100644 --- a/templates/head_other.mustache +++ b/templates/head_other.mustache @@ -1 +1,21 @@ + \ No newline at end of file diff --git a/templates/header.mustache b/templates/header.mustache index 18d7b39..34bcf24 100644 --- a/templates/header.mustache +++ b/templates/header.mustache @@ -1,7 +1,7 @@
From f78e489338e660086b27da6058a685a04493823b Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 18:46:56 +0100 Subject: [PATCH 06/18] fix date --- src/nblog.nim | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/nblog.nim b/src/nblog.nim index a9e18d0..ee794ae 100644 --- a/src/nblog.nim +++ b/src/nblog.nim @@ -2,12 +2,13 @@ import nimib / themes import nimib import mustachepkg / values import std / strformat +import std / times type Date* = object year*: int - month*: int - day*: int + month*: range[1..12] + day*: range[1..31] proc useNblog*(nb: var NbDoc) = nb.useDefault @@ -37,8 +38,11 @@ proc castDate*(value: Value): Date = assert value.vTable["day"].kind == vkInt result.day = int(value.vTable["day"].vInt) +proc toMon(month: range[1..12]): string = + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1] + proc pubDate*(nb: var NbDoc; year, month, day: int) = nb.context["pub_date"] = Date(year: year, month: month, day: day) - let datetime = "2023-01-06" - let date = "Jan 06, 2023" + let datetime = &"{year}-{month}-{day}" + let date = &"{toMon(month)} {day:02}, {year}" nbRawHtml: &"""

""" \ No newline at end of file From 6242a9249025b5cbc3c294be496c40ad766c4cad Mon Sep 17 00:00:00 2001 From: Pietro Peterlongo Date: Sat, 25 Feb 2023 18:56:07 +0100 Subject: [PATCH 07/18] change orangebackground --- templates/head_other.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/head_other.mustache b/templates/head_other.mustache index 4ba8b10..0c29274 100644 --- a/templates/head_other.mustache +++ b/templates/head_other.mustache @@ -2,7 +2,7 @@ ","title":"City in a bottle - How to embed a tweet in a nimib document","source_highlighted":"import nimib\nimport nblog\n\nnbInit(theme = useNblog)\nnb.title "City in a bottle"\nnb.subtitle "How to embed a tweet in a nimib document"\nnb.pubDate 2022, 7, 12\n\nnbText: """\nHow do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib?\n\nEasy! Just go in the top right corner of the tweet (⋮), click on "Embed Tweet", copy the code\nand use `nbRawHtml`:\n"""\nnimibCode:\n nbRawHtml: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">A City in a Bottle 🌆<br><br>&lt;canvas style=width:99% id=c onclick=setInterval(&#39;for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z&lt;w&amp;(Y&lt;6-(32&lt;Z&amp;27&lt;X%w&amp;&amp;X/9^Z/8)*8%46||d|(s=(X&amp;Y&amp;Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a&#39;,t=9)&gt; <a href="https://t.co/N3WElPqtMY">pic.twitter.com/N3WElPqtMY</a></p>&mdash; Frank Force 🌻 (@KilledByAPixel) <a href="https://twitter.com/KilledByAPixel/status/1517294627996545024?ref_src=twsrc%5Etfw">April 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""\n\nnbText: "And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation."\nnbRawHtml: """<canvas style="width:99%; border:1px solid #000000;" id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)></canvas>"""\n\nnbText: """Not sure why, but after you click a big white vertical area is created.\n\nAnyhoo, enjoy another tweet that links to a great Observable document that explains the code\n(I guess that now we should be able to reproduce that observable document in nimib...):\n"""\nnbRawHtml: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">If you&#39;d like to learn how the code works, I recommend checking out this amazing breakdown by <a href="https://twitter.com/DanielDarabos?ref_src=twsrc%5Etfw">@DanielDarabos</a> that reorganizes and comments the code and provides controls to play with it.<a href="https://t.co/SVtC0yF0gJ">https://t.co/SVtC0yF0gJ</a></p>&mdash; Frank Force 🌻 (@KilledByAPixel) <a href="https://twitter.com/KilledByAPixel/status/1529838360235220992?ref_src=twsrc%5Etfw">May 26, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""\n\nnbText: "And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:"\nnbRawHtml: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It has its limits! I tried running <a href="https://twitter.com/KilledByAPixel?ref_src=twsrc%5Etfw">@KilledByAPixel</a>&#39;s amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\\_(ツ)_/¯ <a href="https://t.co/n1c4oNEwNC">https://t.co/n1c4oNEwNC</a> <a href="https://t.co/FeYixu7JS6">pic.twitter.com/FeYixu7JS6</a></p>&mdash; Andy Baio (@waxpancake) <a href="https://twitter.com/waxpancake/status/1546634381183164416?ref_src=twsrc%5Etfw">July 11, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""\n\nnbText: "Do I like Twitter? Oh, boy..."\nnbRawHtml: """<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Oh, boy! West Coast, <a href="https://twitter.com/hashtag/YoungSheldon?src=hash&amp;ref_src=twsrc%5Etfw">#YoungSheldon</a> starts now! <a href="https://t.co/bpSn7NySME">pic.twitter.com/bpSn7NySME</a></p>&mdash; Young Sheldon (@YoungSheldon) <a href="https://twitter.com/YoungSheldon/status/1081045053798273024?ref_src=twsrc%5Etfw">January 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>"""\n\nnbSaveJson"}, + "blocks": [{"command":"nbText","code":"","output":"# City in a bottle","context":{"code":"","output":"# City in a bottle"}},{"command":"nbText","code":"","output":"## How to embed a tweet in a nimib document","context":{"code":"","output":"## How to embed a tweet in a nimib document"}},{"command":"nbRawHtml","code":"","output":"

","context":{"code":"","output":"

"}},{"command":"nbText","code":"","output":"How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib?\n\nEasy! Just go in the top right corner of the tweet (⋮), click on \"Embed Tweet\", copy the code\nand use `nbRawHtml`:\n","context":{"code":"","output":"How do I embed a tweet like [this great tweet](https://twitter.com/killedbyapixel/status/1517294627996545024) in nimib?\n\nEasy! Just go in the top right corner of the tweet (⋮), click on \"Embed Tweet\", copy the code\nand use `nbRawHtml`:"}},{"command":"nimibCode","code":"nbRawHtml: \"\"\"

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
\"\"\"","output":"","context":{"code":"nbRawHtml: \"\"\"

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
\"\"\"","output":""}},{"command":"nbRawHtml","code":"","output":"

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
","context":{"code":"","output":"

A City in a Bottle 🌆

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force 🌻 (@KilledByAPixel) April 22, 2022
"}},{"command":"nbText","code":"","output":"And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation.","context":{"code":"","output":"And we can use `nbRawHtml` also to visualize the canvas code. The only adjustment I made is to add a solid border. Click inside to start the animation."}},{"command":"nbRawHtml","code":"","output":"","context":{"code":"","output":""}},{"command":"nbText","code":"","output":"Not sure why, but after you click a big white vertical area is created.\n\nAnyhoo, enjoy another tweet that links to a great Observable document that explains the code\n(I guess that now we should be able to reproduce that observable document in nimib...):\n","context":{"code":"","output":"Not sure why, but after you click a big white vertical area is created.\n\nAnyhoo, enjoy another tweet that links to a great Observable document that explains the code\n(I guess that now we should be able to reproduce that observable document in nimib...):"}},{"command":"nbRawHtml","code":"","output":"

If you'd like to learn how the code works, I recommend checking out this amazing breakdown by @DanielDarabos that reorganizes and comments the code and provides controls to play with it.https://t.co/SVtC0yF0gJ

— Frank Force 🌻 (@KilledByAPixel) May 26, 2022
","context":{"code":"","output":"

If you'd like to learn how the code works, I recommend checking out this amazing breakdown by @DanielDarabos that reorganizes and comments the code and provides controls to play with it.https://t.co/SVtC0yF0gJ

— Frank Force 🌻 (@KilledByAPixel) May 26, 2022
"}},{"command":"nbText","code":"","output":"And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:","context":{"code":"","output":"And actually this content was inspired by the following tweet exchange that brought back in my timeline the amazing city in a bottle:"}},{"command":"nbRawHtml","code":"","output":"

It has its limits! I tried running @KilledByAPixel's amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\\_(ツ)_/¯ https://t.co/n1c4oNEwNC pic.twitter.com/FeYixu7JS6

— Andy Baio (@waxpancake) July 11, 2022
","context":{"code":"","output":"

It has its limits! I tried running @KilledByAPixel's amazing City in a Bottle tweet-length shader through it, and GPT-3 replied with the equivalent of a ¯\\_(ツ)_/¯ https://t.co/n1c4oNEwNC pic.twitter.com/FeYixu7JS6

— Andy Baio (@waxpancake) July 11, 2022
"}},{"command":"nbText","code":"","output":"Do I like Twitter? Oh, boy...","context":{"code":"","output":"Do I like Twitter? Oh, boy..."}},{"command":"nbRawHtml","code":"","output":"

Oh, boy! West Coast, #YoungSheldon starts now! pic.twitter.com/bpSn7NySME

— Young Sheldon (@YoungSheldon) January 4, 2019
","context":{"code":"","output":"

Oh, boy! West Coast, #YoungSheldon starts now! pic.twitter.com/bpSn7NySME

— Young Sheldon (@YoungSheldon) January 4, 2019
"}}] +} \ No newline at end of file diff --git a/posts/city_in_a_bottle.nim b/posts/city_in_a_bottle.nim index 21c7846..fb69aef 100644 --- a/posts/city_in_a_bottle.nim +++ b/posts/city_in_a_bottle.nim @@ -31,4 +31,4 @@ nbRawHtml: """