hugogranstrom / nimislides Goto Github PK

I need to able to escape a text sequence like this:

nbText: hlMd """ <font size=2px>openssl req new -days 365 -subj C/=BR/ST=MN/L=Minnesota/O=SKC/OU=/skc.eagan.lab -key client-1.key -out client-1.csr</font>"""

I'm pretty its the = sign it doesn't like.

How can I make sure every slide starts at the top?

Allow the user to provide a path to a local Reveal.js installation.

Currently the documentation consists of the README and the example slides in docs/. This could be improved, both by having a compiler-generated API docs and more specific example slides in the style of NimConf, where a piece of code is shown next to what it renders. Ideas for what these small tutorials should cover are welcomed.

This was brought up by @srozb .

• Compiler-generated docs
  • Add doc-comments to all important procs/templates.
  • Add a short introduction at the top.
• Landing page for documentation that links to the docs and all available tutorials.
  • Rename index.nim to something else. Or should I just remove it? It is quite messy and showcase.nim already covers everything it does.
  • Move content from README to here instead to de-clutter the README.
• Make a nimiBook for the tutorials instead! Then it will be easier to find stuff!
• Embedded slideshows like Reveal.js has in their docs

Ideas thus far:

• Basics (nbText, nbCode, nbImage, columns)

maybe it is time now... (before announcing). every time I look for nimislides I have to remember it is spelled the other way around

Two new blocks that add a typewriter effect so it looks like someone is typing them. Example: https://www.w3schools.com/howto/howto_js_typewriter.asp

• typeText: takes text and pace as inputs. Implemented in #5
• typeCode: needs to take the static highlighting into account or else random HTML tags will pop up out of nowhere.

Problems:

• How to make it start when the slide is visible, or even when a fragment is showing it? By default it will start when the page loads I guess nbCodeToJs to the rescue!
• Reveal rewrites the code blocks so we might have to parse their code to start with.

This is an idea by @srozb.

Now that nimib has support for highlighting all kinds of languages in markdown, it would be nice if we could animate them as well like animateCode. The API would be the same but accept a language and a string instead of a code block:

animateMdCode("css", 1..2, 3, 4..5): """
.reveal img {
  max-height: 95vh;
}
"""

This should share the same internal machinery as animateCode, with the only exception being that the code is given directly instead of read from source.

I am yet again making a new set of slides with nimislides (public soon) and as usual I try to innovate a bit my workflow.

For this feature request it is harder to make a title for this feature (and even harder to understand the title) than an example:

import nimib, nimislides

template slide(ident: untyped, body: untyped) =
  template `slide ident` =
    slide:
      body

# I use this idiom currently
template slideTitleAlt =
  slide:
    nbText: "## My title slide"

# and this is sugar for this idiom
slide(Title):
  nbText: "## My title slide (but using a template)"

when isMainModule:
  nbInit(theme = revealTheme)
  setSlidesTheme(Serif)
  # having slides called here makes it easier to add them and remove them while creating a presentation
  slideTitle
  slideTitleAlt
  nbSave

the proposal is to introduce the template slide(ident: untyped, body: untyped) as above to allow the isMainModule workflow with reduced indentation. Ah in the example above I did not use it but I would probably export the template by default (since it can be used from different sets of slides).

How does columns: work ? Can you actually use the block as a table?

I am not able to install 0.2.5 unless I specify the commit manually.

I think this is because the nimble file has still 0.2.4

• Revert dracula list style fix
• Support scroll view

was looking for prezi open source alternatives and found this which looks pretty cool! https://github.com/impress/impress.js

Right now we have a impl with varargs but that is a bit messy and buggy to work with. Would an openarray/seq-based approach be viable instead?
Examples:

# current approach:
fragment(@[fadeIn], @[highlightRed], @[fadeOut])

# seq-based approach:
fragment(@[@[fadeIn], @[highlightRed], @[fadeOut]])

The second approach is considerably uglier to me but easier to work with. Most importantly it would allow us to pass in more parameters to fragment, like end-animations that are applied at the end of a block.

I think using an all-seq implementation internally is needed, but then we can add sugary varargs functions for ease of use for common usecases. How should the distinction between them be API-wise then? Should the sugar or the low-level functions have the fragment name? (Both can't have it as varags and seq functions will clash with each other). So either we have fragmentSugar + fragment or fragment + fragmentLowLevel.

A third option would be to write a macro, but I'd rather not...

@pietroppeter had the idea for animateCode, that instead of specifying the lines of code to highlight using numbers (eg. 1..3, 4, 5..7), the lines in the code are marked using comments instead. This would remove the need for updating all the line numbers if you change the code. The general idea is this:

animateCode:
  echo 1 # 1 $$$
  echo 2
  echo 1 # 1 $$$
  echo 2 # 2 $$$$

The number specifies the order of highlighting and the $$$ (or something else), is a marker for our parser to find the lines. A number of questions are still unanswered, like what symbols to use and how to implement it in a simple way.

Having the ability to add for example an Author: Hugo Granström in the lower right corner that is visible on all slides.

when using current #head with nimislides, if I use columns I always have a double definition error.

I suspect it might be something subtle in https://github.com/HugoGranstrom/nimiSlides/pull/36/files cannot see why.

reverting to previous commit does not reproduce the issue

Is it possible to have color font before using a fragment to highlight?

So the nbText already has a color first , then use a fragment to fade in , fade out.

API has a broken link ... I really need the API lol please

https://hugogranstrom.com/nimiSlides/docs

There is a newline after the list marker.

I think this is because the dracula theme uses the ::before while all the other themes use ::marker.

The idea is to add a piece of CSS that is included when Dracula is chosen as the theme.

Potential solution: https://stackoverflow.com/questions/45462642/handling-paragraphs-inside-list-items-with-a-custom-css-content

while using a more recent nimislides with a nim 1.6.10 I have a compiler issue with:

import ./[conversions]

(workaround: manually edit nimislides 🥷 )

• Build all slides
• Generate documentation (#14)
• PR Preview?
• Check all PRs

pull_request:
    branches:
      - main

Right now you can only highlight lines that are next to each other at the same time. But you could want to highlight line 1 & 3 but not line 2. To allow this, the primitive type for animateCode should be a set of lines instead of a range of lines. Both single int and ranges will be automatically convertible to sets so it shouldn't affect any existing code.

Reveal.js has a wide range of configuration and supporting them all in nimiSlides is tedious work. Instead we will have a Table[string, string] which will represent the key-value pairs in the object. Then custom templates like disableVerticalCentering can modify this table instead of having to hard-code it into the main partial. It would then be implemented something like this:

template disableVerticalCentering() =
  nb.setConfig("center", "false")

A setConfig, getConfig should be the main API used to not make the code dependent on the current mustache backend.

With this, users can modify all the settings themselves without having to extend nimiSlides with all the options manually.

Thank you for very interesting library. I was trying to make a small page with it and found a problem:

Example:

slide:
  nbText: "Init"
  fragment @[grows], @[shrinks]:
    nbText: "11"
  fragment @[grows], @[shrinks]:
    nbText: "22"

The thing I do not like here - too many arrow-downs: one to grow "11", next to shrink "11", next to grow "22"
Is it possible to make it with just one arrow-down? like we have for fadeInThenOut but growInShrink ?

Also, looks like it needs a lot of other pairs, that is why - is it possible to make the then condition without the built-in animations with "Then" ?

As it stands, I have 3 candidates for the name of the library:

• nimiSlides (@Clonkk) - Descriptive of what it is, a nimib theme for making slideshows, but doesn't really catch the fact it is based on Reveal. It is similar to nimiBook in naming.
• neveal (@pietroppeter) - Pietro's original idea of a name with the added bonus that the Italian word for snow (neve) makes for a pretty obvious emoji: ⛄. The con is that it isn't obvious that is associated with either nimib nor Reveal.
• nimib-reveal: The "temporary" name I have used thus far. It will most likely continue to be the name of the repo at least as it catches the fact that it is a nimib theme for Reveal. But it is a bit boring.

I'm honestly leaning towards keeping it as obvious as possible and just naming it nimibReveal. But I'm also considering stealing the snowman emoji for it and adding a "Why the snowman ⛄" to the readme stating @pietroppeter's original name and idea.

Any input on this?

Right now auto-animation is quite verbose and repetitive. For example this simple example:

slide(slideOptions(autoAnimate=true)):
  nbText: """
# Only title first    
"""

slide(slideOptions(autoAnimate=true)):
  nbText: """
# Only title first
Then both title and text! 
"""

We had to repeat the # Only title first twice and if we ever need to update it in the future, we will have to remember to change it in both places! Let's try to DRY this down as much as we can! Here's a proposed API:

autoAnimateSlides(nSlides=2):
  showOn({0, 1}):
    nbText: "# Only title first"
  showOn({1}):
    nbText: "Then both title and text!

This will internally loop through the body nSlides times and only generate the showOns that match the current index.

This has its drawbacks though:

1. All blocks will need to be recognized by Reveal.js as auto-animatable. You can't just wrap everything in a <div> as I remember it.
2. This also means all blocks must insert a data-id in the correct place, which means each block's partials must be modified!
3. It won't work well with text in nbText split over multiple calls. For example nbText: "Hello world" is not splitable to nbText: "Hello"; nbText: "world". So a separate mechanism would have to be implemented for text in nbText. Ideally, it should work with the autoAnimateSlides above. Here we will probably have to use <span>.

I will probably start out with the nbText version, but I'm not sure how to do it yet. Either through some kind of templating, e.g. #%[0, 1][Hello] #%[1][world]. Where the indices and text is supplied. It is quite ugly, though.
The other option is a more programmatic approach:

nbTextAnimate(({0, 1}, "Hello"), ({1}, " world"))

This is arguably even uglier and less readable :/

If someone has any other idea for possible APIs I'm very happen to see hear about them :D

Reveal.js by default likes to center everything but when for example making lists it can cause trouble if each list element is created separately as they aren't aligned horizontally. In that case, one could left-align them for example. So the idea is to introduce align which just wraps it's content in a div with align properties:

slide:
  align("left"):
    nbText: "First"
    nbText: "Second"

The top three elements are without any alignment and the bottom three are left-aligned.

A simple implementation would be:

template align*(text: string, body: untyped) =
  nbRawOutput: """
<div style="text-align: $1;">
""" % text
  body
  nbRawOutput: "</div>"

It only aligns text but I think that is enough to support out of the box for now. In the future a convenient flexbox API (in nimib?) would allow for more customization of layout.

Is there a way to decrease line spacing of an image and nbText? For instance the picture

I would like to start ENVIRONMENT up more by the picture.

here is my code:

slide:
  align("left"):
          nbText: hlMd"""<font size=5px>
KPS is a multi purpose system that allows SKC personnel to generate cryptographic assets, code signing (platform and application), Load smart cards (Blackbox), User provisioning, and much more.  KPS uses a web GUI frontend and a  Python web framework called Django for the backend.</font>"""
          nbImage("./images/kps_login_small.png")
slide:
  fragmentEnd(@[fadeOut,shrinks]):
    nbText: hlMd """<font size=6px>Task menu on KPS</font>"""
    nbText: hlMd """<font size=5px>The KPS Menu Bar provides access to the following</font>"""
    nbImage("./images/kps_menu_1241x60.png")
    #fragmentEnd(@[fadeIn, shrinks]):
    fragmentList(@[
      "<font size=3px>ENVIROMENT - Customer Enviroment</font>",
      "<font size=3px>START TASK - Start of operational tasks</font>",
      "<font size=3px>MONITOR - View progress of tasks</font>",
      "<font size=3px>HISTORY - View task history</font>",
      "<font size=3px>REPORTS - Generate reports</font>",
      "<font size=3px>CONFIGURE - Configure models, profiles, and SoC plants, manage keys and certificates</font>"
      ], fadeIn)

All templates should use the built-in partials feature of nimib as much as possible and not use nbRawHtml unless it has to. This way users can customize the partials if they'd like.