fsprojects / fsreveal Goto Github PK

I converted my "literate programming" talk to use the latest version. Looks pretty good! There are still a few things I changed - and I think some of those could be incorporated into FsReveal.

Also, this commit shows how to use FsLab with FsReveal (#1)

As for the changes, I did some tweaks in the template and in the CSS files. See this commit for details.

• I changed some font sizes (the defaults were a bit too big). See custom.css. I also removed some borders around code (which look weird and unintentional)

I had to specify my own template:

• We should have an optional parameter for this!!
• I needed this so that I can include Google Charts. I think having to provide custom template for this is reasonable.
• I commented out the call to hljs.initHighlightingOnLoad(). This highlights random stuff (Like "Hello" in "Hello world") and I think we should disable this by default as we have better colorization.

Providing code like:

[lang=sql]
select * from pubs where author = 'King';

Renders as:

select * from pubs where author = 'King';

(but it does highlight correctly)

On my notebook at 1366x768 resolution tooltips of all example presentation are displayed at the bootom edge of the screen and sometimes even off the screen. The problem is present in both IE11 and FF38 at normal zoom level.
I fixed the issue for mysef by replacing the following call of getPos:

    var pos = findPos(owner ? owner : (evt.srcElement ? evt.srcElement : evt.target));
    var posx = pos[0];
    var posy = pos[1];

To:

    var posx = evt.clientX;
    var posy = evt.clientY;

I don't know how the findPos code should be better than just getting the coordinates directly from the event args.

If you change the code, get a reload, then speaker's notes' 'next slide' doesn't work any longer. Need to close/open speakers notes again.

1. Open speakers notes
2. Change code/text
3. Press N in speaker's notes',
4. Watch 'next slide' not updating.

First up. Thanks for FSReveal.
I did my first talk using it last night and everything went perfectly.
http://kijanawoodard.github.io/Talk-Missing-Model-Mysteries/#/

As you see, I was able to get my slides to gh-pages. I followed the instructions, but was surprised to see errors. Seeing what the build script was trying to clone, it was obvious that it was trying to pull the wrong repo. I opened the build fsx and found the things to headed by searching for ReleaseSlides and following my nose.

It's a bit clunky for new users.
The easiest "fix" would be to update the docs.
Perhaps it would be possible to pick up the values from the git repo.

Thoughts?

I tried pulling 0.2.0 and 0.2.1 from NuGet, and the install fails while trying to resolve FSharp.Formatting >= 2.5.0.

@tpetricek, is this a known issue with FSharp.Formatting, by chance? When I tried adding FSharp.Formatting directly, I received a similar issue that FSharp.Compiler.Service >= 0.0.81 could not be resolved.

In Generate.fsx and FsReveal.fsx, currently, they have to load libraries from packages folder created by FsLab Journal. Otherwise, deedle frame and FSharp.Charting won't produce output.

It'd be similar to ReleaseDocs target in ProjectScaffold.

Test with version 29.0:

• F# code messes up all pages
• Code are not syntax highlighted
• No F# tooltips

Trying to install 0.7.2 with VS 2015 I see an error about what appears to be an invalid nupkg in FsFormatting.

My version of VS:

Microsoft Visual Studio Ultimate 2015 Preview
Version 14.0.22310.1 DP
Microsoft .NET Framework
Version 4.6.00042

Installed Version: Ultimate

Screenshot of the actual error:

With the FsReveal 0.7.6(unlisted on NuGet) I get

<h4>C#</h4> 

<table class="pre"><tr><td class="lines"><pre class="fssnip">
<span class="l">1: </span>
<span class="l">2: </span>
<span class="l">3: </span>
<span class="l">4: </span>
<span class="l">5: </span>
<span class="l">6: </span>
<span class="l">7: </span>
<span class="l">8: </span>
<span class="l">9: </span>
</pre>
</td>
<td class="snippet"><pre lang="cs"><span class="k">using</span> System;

<span class="k">class</span> Program
{
    <span class="k">static</span> <span class="k">void</span> Main()
    {
        Console.WriteLine(<span class="s">"Hello, world!"</span>);
    }
}
</pre></td></tr></table>

/cc @tpetricek

Providing lang=PowerShell, posh, ps, &c doesn't syntax highlight PowerShell code.

Had this idea the other day when prepping for a talk that has some live coding and some presentations. Switching between presentation and code is always a pain and is a great time to loose the audience. Thought it would be a cool idea to allow the presenter to code inside the presentation. Would also solve the live code presentation issue of messing up; you could 'magically' move to the next slide that was prepped with working code. Is this something that would be seen as a good idea within FsReveal?

The following set of speaker notes results in only the first one showing:

' This is a note

' This is a second note

Is this by design? It would be good if both were shown in the notes area!

http://fsreveal.azurewebsites.net/index-md.html
http://fsreveal.azurewebsites.net/

Appear to be down right now.

They both show:

Error 403 - This site is stopped.

The web site you have attempted to reach is currently stopped and does not accept any requests. Please try to reload the page or visit it again soon.

If you are the Administrator of this web site, please visit the Azure Portal to check why the site is stopped.

When cloning the master branch and running build.cmd the build process downloads Reveal.js 2.6.1 (commit id 9da952fea30906090446d038430186b11dba7f13).

The develop branch grabs a much newer commit (id 20d858deb888fe0ec0ba92a919c8a0526ac52a2e).

Would it make sense to extract the "keep alive" functionality from FsReveal, so that it can be easily used in other projects? I just need exactly the same thing in FsLab Journal...

@forki Do you think FAKE could somehow handle this? (Like, create a target that runs other target whenever a contents of a directory changes?)

It would be cool to have the ability to include a custom stylesheet in the build process.

I honestly don't know where exactly this breaks, but here's a demo of the problem:

#I "../packages/FsReveal.0.0.5-beta/fsreveal"
#I "../packages/FSharp.Formatting.2.4.20/lib/net40"
#I "../packages/RazorEngine.3.3.0/lib/net40"
#I "../packages/FSharp.Compiler.Service.0.0.57/lib/net40"
#load @"../packages/FsReveal.0.0.5-beta/fsreveal/fsreveal.fsx"

open FsReveal
open FSharp.Literate

let presentation =
    FsReveal.FsReveal.GetPresentationFromScriptString """
(**
- title : Apostropocalypse Now

***
Look ma', I'm good.

    [lang=js]
    var but = 'I\'m not so good...';
*)"""

let literate = Literate.FormatLiterateNodes presentation.Document
Literate.WriteHtml literate

(*
<section>

<p>Look ma', I'm good.</p>

<table class="pre"><tr><td><pre lang="js"><span class="k">var</span> but <span class="o">=</span> <span class="o">&amp;</span>#39;I\<span class="o">&amp;</span>#39;m not so good...<span class="o">&amp;</span>#39;;</pre></td></tr></table>

</section>
*)

Apostrophes in code blocks are turned into <span>&amp;</span>#39;.

<img style="border-style: none" src="images/Logo.jpg">

works but can we use it in markdown?

Other language file will be something like fsx.

comment (markdown) + js -> markdown w/ [lang=js] -> reveal.js

Here is an error:

Unhandled Exception: System.Exception: Error creating evaluation session at Microsoft.FSharp.Compiler.Interactive.Shell.FsiEvaluationSession..ctor(FsiEvaluationSessionHostConfig fsiConfig, S tring[] argv, TextReader inReader, TextWriter outWriter, TextWriter errorWriter) in C:\GitHub\fsharp\FSharp.Compiler.Ser vice\src\fsharp\fsi\fsi.fs:line 2401 at FSharp.Literate.FsiEvaluator..ctor(FSharpOption'1 options) in c:\Tomas\Public\FSharp.Formatting\src\FSharp.Literat e\Evaluator.fs:line 117 at FsReveal.FsReveal.GetPresentationFromScriptString(String fsx) in C:\Users\Karlkim Suwanmongkol\Documents\GitHub\Fs Reveal\src\FsReveal\FsReveal.fs:line 119 at FsReveal.FsReveal.GenerateOutputFromScriptFile(String outDir, String outFile, String fsxFile) in C:\Users\Karlkim Suwanmongkol\Documents\GitHub\FsReveal\src\FsReveal\FsReveal.fs:line 153 at Program.main(String[] argv) in C:\Users\Karlkim Suwanmongkol\Documents\GitHub\TryFsReveal\FsReveal\FsRevealConsole \Program.fs:line 39

So we can use Charting, Deedle, and so on.

It would be cool to be able to patch dependencies to speed up the process of adding new features into FsReveal.

Specifically, one use case is adding syntax highlight for a new language. This will be an upgrade of the highlight.js library that reveal.js uses for syntax highlight.

The ability to replace the highlight.js project in the build process would allow us to upgrade before reveal.js releases a new version.

Currently, to add speaker notes using markdown, the <aside> HTML tag decorated with notes class has to be used. For example:

<aside class="notes">Oh hey, these are some notes.</aside>

Defining speaker nodes in a more concise way would be useful.

For example:
/// Oh hey, these are some notes.
Or markdown-compliant way, where the note is not included in HTML view (based on SO question):
[//]: # (Oh hey, these are some notes.)

• Create your slides using markdown syntax
• Syntax highlighting for many programming languages
• LaTeX
• F# Type inference
  • Don't need to specify type (most of the time)
  • Less verbose and easy to write
  • Can be hard to read without help from an IDE
• F# code is evaluated
• Display values
• Charting and so on

The FAKE script watching for changes crashes as soon as you save a new image into the images folder.

Is there a smart way, in md, to specify that you want half of the screen to show a code block in 1/2 of the screen?

Specifically, I'm interested in showing C# next to F#. With reveal.js directly, I've been just manually doing some width:50% and float:left/right magic, but not sure how to represent this in md to submit a PR.
I'm willing to work on this idea, but wanted some input as to how this might be done, if it's a common case (and if not, how I can do it locally without a PR!)

In edit mode we start suave to host our slides.
Whenever we save a file in the slides folder FAKE / FsReveals rebuilds our slide deck.
With hitting F5 we can refresh the browser. That's already super nice.

Now how can we use suave / reveal.js to update the slides without hitting refresh?
This is somehow already working with vanilla reveal.js and (I think ?!) node.js.

So how would this work for us?

//cc @haf @troykershaw @kimsk

When trying to write slides on the train without an internet connection, I'd like to have some dependencies copied locally.
To do that, I use an other html template than the default one, and I've tweaked the fake script to copy additional js files to the output directory.
However, I think that this could be part of FsReveal itself... Any thoughts?

@kimsk see also FSharp.Formatting.CommandTool. this is part of the project and could also be used. @thinkb4coding @mavnn @pirrmann

— Steffen Forkmann (@sforkmann) July 3, 2014

I was trying to add a few vertical slides as asides and found that FsReveal blew up on them. Is the --- no longer supported?

Finished Target: GenerateSlides
Starting Target: KeepRunning (==> GenerateSlides)
dirs to watch: ["/Users/trondd/Development/FsReveal/slides"]
watching dir: /Users/trondd/Development/FsReveal/slides
Running build failed.
Error:
System.NotImplementedException: The requested feature is not implemented.
  at System.Net.NetworkInformation.UnixIPGlobalProperties.GetActiveTcpListeners () [0x00000] in <filename unknown>:0 
  at FSI_0001.Build.findPort@97 (Int32 port) [0x00000] in <filename unknown>:0 
  at FSI_0001.Build.startWebServer () [0x00000] in <filename unknown>:0 
  at [email protected] (Microsoft.FSharp.Core.Unit _arg2) [0x00000] in <filename unknown>:0 
  at Fake.TargetHelper+targetFromTemplate@195[Microsoft.FSharp.Core.Unit].Invoke (Microsoft.FSharp.Core.Unit unitVar0) [0x00000] in <filename unknown>:0 
  at Fake.TargetHelper.runSingleTarget (Fake.TargetTemplate`1 target) [0x00000] in <filename unknown>:0 

Git commit:d318c23376e9dbbc0bca13e3517145fc961cec45

I have tried from the master branch and 0.0.5 and I still get errors on fsx files

Swiping on FsReveal slides works on IE desktop and Chrome but not on IE metro. Reveal.js slides do work with all browsers.

Using Paket and FAKE makes generating slides much more streamlined (#16 via @forki). The document should be updated.

Not sure if this is a bug or an idea but it would be useful to support the PDF export of the slides. This is something that Reveal.js does and would be a nice addition to FsReveal for those times where you just need a PDF.

There is an unfortunate recursivity to the namespaces of this project, which is not represented under Git source control.

Among the nuget packages is "FsReveal", which is not this project, but appears to be some version of reveal.js together with an FsReveal.dll (where is the source for this?) and F#.Formatting, all packaged up.

There are multiple levels of interest in FsReveal.

1. A quick way to clone a skeleton slide presentation, with limited capability of changing the default presentation parameters (and also track those changes in Git). FsProjects/FsReveal meets this need.

2. Tweaking the presentation parameters. This means changing css and javascript. Since this is delivered through a nuget package, it is not under source control and there is no way to track local changes back to the community project.

3. Changes to the FsReveal executable. Whatever witchcraft is going on here is opaque.

I'm not sure what is the best way to represent these different needs. Minimally I would like to track my changes to reveal.css/reveal.min.css and reveal.js/reveal.min.js back to the community project. Perhaps taking these files out of the nuget package, putting them in the "display only" github project, and altering build.fsx to copy them into the proper place in the file system. (And on a side issue, can Fake launch a minifier, so the reveal.min.* files are not required in the distribution?)

I'm sure opening the FsReveal executable source to community involvement would result in some good contributions.

I have no suggestions for names, but only one of these configurations should be named "FsReveal".

Using a markdown file, typing the line

let add x y = x + y

Generates a pretty printed output in the reveal presentation, but doesn't create the onmouseover parts of the tags needed to display the tooltips. The div's containing the tooltips seem to exist.

I'm basically just editing the slides/index.md and running build.cmd. Anything else needed to make this work?

I forked FsReveal so that I may add a custom CSS style/theme for my organization. Initially, I was making edits in the master branch to index.md and custom.css. However, I started digging deeper to better understand how FsReveal operated. Doing so I noticed that the FsReveal code is on the develop branch and not in the master branch.

How should I use the two two branches? For instance, if I were to simply add a custom style should I do this in the master branch or the develop branch. If I instead were to contribute back would I branch a feature branch from develop and issue a PR?

Is there a contributing page that answers these questions?

I would like to add a simple colored banner to the top of the all the slides. My current solution requires that I add the following markdown to each slide section.

- data-background: images/top-nav-bg.png
- data-background-repeat: repeat-x
- data-background-size: 10px 38px
- data-background-position: left top

It works but I would like to be able to write this once at the top of index.md so I needn't repeat it on each slide. In Reveal.js, I would probably add the banner by adding a div with an appropriate css class defined into the index.html (outside of the slides definitions).

Is there a way to write this configuration once and have it applied to all slides?

It seems sometimes the default port is occupied by another webserver.
We should discover the next free port and us that one.

/cc @jayp33 @haf

Instead of http://some.cdn.net/some/dependency.css, use //some.cdn.net/some/dependency.css so that the slides can be hosted under SSL. I found this while trying to host F# on the Web on GitHub. For now I manually edit the generated index.html file to fix these references.

Also, I couldn't find the template in order to make this change. Is it embedded? Is there a way to change the template to make these changes myself?

See https://github.com/panesofglass/history-of-owin. When I run the build, I see only the original FsReveal slide deck.

Suggested by @forki as its code is totally for different purpose.

I have been unable to generate slides for my domain-modeling talk with the latest version of FsReveal:

Could not generate slides for: /Users/admin/Code/domain-modeling/slides/index.fsx
Method 'FSharpChecker.set_ImplicitlyStartBackgroundWork' not found.

Any ideas?

Currently this codes copies the images:

!! (slidesDir @@ "images/*.*")
|> CopyFiles (outDir @@ "images")

Basicly it says: take all files in the direct root of images and copy them, ignoring subfolders.

I propose to copy the entire images directory:

CopyDir (outDir @@ "images") (slidesDir @@ "images") (fun f -> true)

This allows people to either keep using it as it is now, directly in the root. But also allows you to organise your images.

I can send a PR if this proposal makes sense.