Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to render the local version [boilerplate-local.html] #222

Closed
maxhaz opened this issue Apr 30, 2015 · 16 comments
Closed

How to render the local version [boilerplate-local.html] #222

maxhaz opened this issue Apr 30, 2015 · 16 comments
Labels

Comments

@maxhaz
Copy link

maxhaz commented Apr 30, 2015

remark is quite amazing. Also because it can be used locally (and offline). The single version [boilerplate-single.html] is working like a charm out of the box, but I have an issue to render the local version.

Does it require a local webserver (even if the markdown in included in the html file) ?

@gnab
Copy link
Owner

gnab commented Apr 30, 2015

The only difference between the single and local one is that the former has remark embedded into the file while the latter expects remark to be present in an external file, by default out/remark.js, which is where the build process puts remark.

If the single one is working fine you can just as well stick with that one.

@maxhaz
Copy link
Author

maxhaz commented May 1, 2015

Yes, so it makes the single-version self-sufficient (which is great) but also heavier.

If I put the boilerplate-local.html in a folder along with an ./out/ folder containing remark.js (and other files and subfolders), it should work ?
(I tested on Win7 with Firefox without success)

@gnab
Copy link
Owner

gnab commented May 8, 2015

Leaving boilerplate-local.html the way it is, and adding a out folder in the same folder containing remark.js should work. Where are you getting the remark.js file from?

@gnab gnab added the question label May 8, 2015
@maxhaz
Copy link
Author

maxhaz commented May 11, 2015

I am using the file remark.js from the \remark-develop2\remark-develop\src folder (obtained via the remark-develop.zip file from the project page on github).

The file remark.js is quite small so I suppose that I also need to copy the remark folder in the out folder. I also tried to copy the whole content of the src folder in my out folder.

Just to make it clear, the bottom of my boilerplate-local.html file is:

    </textarea>
    <script src="./out/remark.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create();
    </script>
  </body>
</html>

[PS: thanks a lot for checking this/my issue.]

@gnab
Copy link
Owner

gnab commented May 11, 2015

Aha, that explains it.

The easiest option it to simply download http://remarkjs.com/downloads/remark-latest.min.js and rename it to remark.js (or update the HTML to use remark-latest.min.js).

It is also possible to go to the releases section at https://github.com/gnab/remark/releases and download a specific version's zip file in which you'll find the correct remark.js inside the out folder.

@maxhaz
Copy link
Author

maxhaz commented May 11, 2015

Issue solved. Now it works perfectly. Thanks a lot!
Just to I understand my mistake, what is the remark.js in the src folder ?

@gnab
Copy link
Owner

gnab commented May 11, 2015

Great.

remark.js in the src folder is just part of the final remark.js. It is referencing all the other files in the src folder, and all those files are bundled up in the final remark.js.

@utdrmac
Copy link

utdrmac commented May 18, 2015

So we need to download remark-latest-min.js, rename it to remark.js and put in ./out/ but leave src/remark.js alone cause that's a completely different file? That's too many "remark.js" same-named files with different purposes. confused I've been banging head against wall trying to use src/remark.js in my local.html and getting 'require is not defined'

Can you provide a sample/minimal on-disk layout tree for multiple presentations?

EDIT: Ok. So, one does NOT need to clone the repo in order to use/make remark presentations. You only need to download the remark-latest-min.js. The 'Getting Started' docs are a little confusing on this. Maybe you'll want to update and explain this?

@gnab
Copy link
Owner

gnab commented May 23, 2015

I agree this can be a bit confusing.

Typically, stuff inside the src folder in most projects you'll find on GitHub is not something you can use directly - it has to be compiled into a bundle, which is what the remark.js and (.min version) inside the out folder is. Also, it is (by some people) considered bad practice to include this bundled file in the source repository. This is why the out folder is empty.

The boilerplate templates were created before the bundled file was removed, so now, the local template won't work until you either build remark yourself (which produced the bundled file in the out folder) or download a bundled file like remark-latest.min.js and update the URL in the src attribute of the corresponding <script> tag.

The 'Getting Started' section in the project README and in the wiki both reference the latest version remark:

<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">

To use remark locally/offline, the remark-latest.min.js file has to be downloaded, the the above URL updated correspondingly to only contain the filename.

I guess the boilerplate files are more confusing than helpful, and should probably just be removed, leaving the HTML in the 'Getting Started' section as the single way to do things.

@Dominik-K
Copy link

Hi. I tried to use the boilerplate-local.html offline. I opened it in Chromium 46.0.2456.0 (Developer Build) (32-bit) and only the first slide is shown.

In the developer console, there's the following error:

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': 
A history state object with URL '[...]/remark-0.11.0/boilerplate-local.html#1' cannot be created in a document with origin 'null'. 
File: remark.js:3562

@utdrmac
Copy link

utdrmac commented Aug 12, 2015

@Dominik-K, Did you clone/compile? Be sure to check the source path 'out/remark.js'. I would try using boilerplate-single.html for standalone/local running. Or, what I do, just download remark locally, http://gnab.github.io/remark/downloads/remark-latest.min.js

@Dominik-K
Copy link

@utdrmac I used the v0.11.0 release.
Commenting out the lines 3561-3564 in the out/remark.js

  if (typeof window.history.replaceState === 'function') {
    window.history.replaceState(undefined, undefined, hash);
  }
  else {

and 3566 solved the problem. This lines are introduced with #143.

@utdrmac
Copy link

utdrmac commented Aug 12, 2015

I'm on Google Chrome 44.0.2403.130 (Official Build) (64-bit) but I haven't used/tried the boilerplate pages. No issues here with that new functionality of #143

@jmaslibre
Copy link

I am using chromium version: Version 45.0.2454.85
and I am getting the same error message reported by @Dominik-K

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///home/...' cannot be created in a document with origin 'null'.

The corresponding discussion about this chrome change is in:
https://code.google.com/p/chromium/issues/detail?id=301210

@utdrmac
Copy link

utdrmac commented Sep 9, 2015

Do what @Dominik-K suggested and simply modify the logic within remark.js. Everything started working for me again.

@gnab
Copy link
Owner

gnab commented Sep 9, 2015

I just released version 0.12 which fixes the security error.

@gnab gnab closed this as completed Jan 15, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants