Git Product home page Git Product logo

jekyller's Introduction

Shower Presentation Template

Test status

Shower logo

Shower ['ʃəuə] noun. A person or thing that shows.

  1. Built on HTML, CSS and vanilla JavaScript.
  2. Works in all modern browsers.
  3. Themes are separated from engine.
  4. Fully keyboard accessible.
  5. Printable to PDF.

See it in action. Includes Ribbon and Material themes, and core with plugins.

Follow @shower_me for support and updates, file an issue if you have any.

Quick Start

  1. Download and unzip shower.zip template archive.
  2. Open index.html in any text editor and start creating your presentation.

Quick Start via CLI

You’ll need Node.js installed on your computer.

  1. Install Shower CLI utility: npm install -g @shower/cli.
  2. Create your presentation: shower create.

Read more on shower/cli page.

Quick Start with Hosting

You’ll need Node.js installed on your computer.

  1. Copy this repository to your account via GitHub.
    1. Open import page.
    2. Use https://github.com/shower/shower for the repository URL
    3. Use your presentation name.
    4. Clone the resulted repository to your computer.
  2. Install dependencies npm install and start a local server npm start.
  3. Start editing your slides with live-reload.

Once you’re done you can build a clean copy of your slides:

npm run bundle

You’ll find your presentation in bundled folder. You can also run npm run archive to get the same files in presentation.zip.

Publish your presentation online by running:

npm run publish

You’ll have your slides published to https://USER.github.io/REPO/.

Deploy to Netlify

By clicking the button below you can fork this repo and deploy it to Netlify.

Deploy to Netlify

By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a Shower rebuild and deploy to Netlify servers, which allows for an easy way to create and share Shower presentation without the need to install anything locally.

Browser Support

Latest stable versions of Chrome, Edge, Firefox, and Safari are supported.

Contributing

You’re always welcome to contribute. Fork project, make changes and send it as pull request. But it’s better to file an issue with your idea first. Read contributing rules for more details.

Main contributors in historical order: pepelsbey, jahson, miripiruni, kizu, artpolikarpov, tonyganch, zloylos, zloylos, shvaikalesh.


Licensed under MIT License.

jekyller's People

Contributors

agonzalezro avatar ai avatar dm4 avatar dmitrybaranovskiy avatar jahson avatar kizu avatar markelog avatar miripiruni avatar nv avatar philippbosch avatar tonyganch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jekyller's Issues

Placings shortcuts

Shower have a nice feature: place class for images, with optional trbl modifiers. It would be nice to have the shortcuts in Jekyller for those stuff.

The easiest and most readable solution would be to use arrows for placement (either ->, ^ or ones). The only thing to think on: how to define a placement without sides?

Deprecated Jekyll integration

It seams that Jekyll is no longer supporting functions Jekller needs or doing it in different manner. I think that because of warning I get after trying to run jekyll build I am additional information apart form build folder which looks like this:

←[33m       Deprecation: Auto-regeneration can no longer be set from your config
uration file(s). Use the --watch/-w command-line option instead.←[0m
←[33m       Deprecation: The 'server' configuration option is no longer accepted
. Use the 'jekyll serve' subcommand to serve your site with WEBrick.←[0m

It does not seams to stop it from building jet if I try to alter some setting in config file I get punished by bunch of ugly errors in my console and no css implementation in final build.

 ___________________________________________________________________________
| Maruku tells you:
+---------------------------------------------------------------------------
| Could not find ref_id = "md_entitylsquo_xcax83xc9x99uxc9x99" for md_link([md_
ntity("lsquo"), "\xCA\x83\xC9\x99u\xC9\x99"],"md_entitylsquo_xcax83xc9x99uxc9x9
")
| Available refs are []

This is the manin part of errors I get.

Generallify defaults

Right now the defaults are mentioning real people and links, those should be replaced to more fishy ones for clarity.

Duplicate /themes and /shower/themes

After doing git clone --recursive git://github.com/shower/jekyller.git, there are duplicate folders /themes and /shower/themes.

Should we remove the /themes and keep /shower/themes?

Thanks!

Merging classes

Right now slides could either get autogenerated classes, or have them set in md. But we always would want to have slide class etc, so it would be nice to merge classes defined in different ways.

Code with line numbers

We could try to make automatic line numbers by Jekyll: splitting by <code>, then replacing newlines inside with <br/>, then replacing them with </code><code>.

Headerless slides

It would be nice to have a way to create header-less slides.

The most proper way would be to use the <hr/>--- etc. to delimit the slides.

Markup for figure with captions

Which syntax to use? Markdown don't have anything for this, so for quotes (with figure-figcaption) we need now to use this kind of syntax:

<figure markdown="1">

> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

<figcaption>Marcus Tullius Cicero</figcaption>
</figure>

And that's not that cool.

Find out the best way to make “shouts”

The best way is when you don't need to write classes in markdown.

So, there could be at least three ways to make creating shouts more convenient:

  1. Use a variable that would convert all h2 to shouts and h3 to articles etc.
  2. Make this automagically by checking if there are h3 used.
  3. Add some way to markup shouts using nested markdown, like ## **shout** — so strong inside header would transform to shout.
  4. When there is a header without content it could become a shout.

Ideally all three ways could be made at the same time.

Incorrect opening `strong` tag generation

Markdown example:

## Header

**strong text**

**other strong text**

Expected result

<section class="slide" id="header"><div><h2>Header</h2>

<p><strong>strong text</strong></p>

<p><strong>other strong text</strong></p>

</div></section>

Actual result

There is no opening strong tag in the first paragraph.

<section class="slide" id="header"><div><h2>Header</h2>

<p>strong text</strong></p>

<p><strong>other strong text</strong></p>

</div></section>

DEMO

Look at different ways of fenced blocks

Could I convert blocks that are not supported right now to proper code?

Right now the version at Pages don't understand ~~~ sql type of fenced blocks :(

And kramdown don't know about ``` also.

Is this repo alive?

Hello!

Currently, this repository depends on the 2-year old version of shower-core and themes. I tried to update to the latest versions, but it looks like now it is not possible to use core packages as git submodules.

Is there any chance to make it working? I really like the simplicity of this project (fork, edit, push and you will have deployed your presentation). Or maybe you have another recommended way instead?

Syntax for `<mark>` tag

This tag mostly should be used inside code blocks, and as the default markdown behavior is to escape everything inside code blocks, it's rather problematic to mark things there.

What we need is to find out how to mark things up inside code in a way it could be then marked with the <mark> tag, with all the classes attached to it if any.

The best way is to find out a syntax that would have assymetric symbols in it, like ~=markedsmth=~ — such constructs are easier to parse. This combinations should be unique enough, so they won't be there in 99.9% of code people would use in their slides.

Alternate way of adding `.next` to lists

Right now you need to manually add {:.next} to the list items in order to enable inner navigation.

There could be some other ways to enable it:

  1. YAML option like iterable-lists: [true, false] (easy). Also, it would be nice to add an option to say should the first item of such lists be visible or not.

  2. Adding a class to the slide/list (hard). In conjunction with previous way this would make it easy to use different kinds of lists on a page.

  3. Syntax extension — adding some special markup that would say “this item is iterable” (well, an easy way to add .next class to something). However, I dunno what to use there. The most obvious would be to use any one or two symbols at the beginning of the block where you'd like to add .next class. Some variants:

    - Hello
    - -> this is next item
    - -> this is another next item
    - Hello
    - ~ this is next item
    - ~ this is another next item
    - Hello
    - + this is next item
    - + this is another next item
    

There is something I don't like in such syntax, but: to make it easy to implement those symbols must be at the start of an item. So, the flexible part is the used symbol.

Create nice index page

The default page shouldn't be an example one, but the one with the list of all available slides.

Also, a nice thing could be done: when there are no new custom slides, there should be links to examples, docs and some introduction/setup-like text, so when you'll clone the project for the first time you'll see all those example/placeholder things.

But if you'll add your custom slides, they would appear there replacing placeholder content (however, there should be some link to those content, like a small “tutorial” link at the bottom or something like this)

Create example pages

There should be a folder with examples, genetared by the jekyll and showing all the possible things you could set up.

So, this should be basically those examples from the shower and its themes.

Alternate way of creating footnotes and footers?

Is there any such way?

I'd say that using <hr/> could fit it, but it would conflict with headerless slides.

So, we could think on which custom markup to use for such purpose.

And/or this could apply to footers also.

Automatic font-size for shouts/headers?

As we know the length of header strings we could try to adjust the font-size automatically on jekyll-side. It won't be that precise, but we could at least sometimes.

Not the perfect solution though, maybe this should be really just a theme.

Syntax for .note paragraphs?

Right now there is a way to use such paragraphs only using attributes like this:

Hello, i'm gray text
{:.note}

It would be nice to have more convenient syntax for this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.