Skip to content

S
shower-presentation
Commit faf34eec authored by Шардт Максим Александрович's avatar Шардт Максим Александрович
Browse files
Options

init

parent 6d9d59f6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6691 additions and 869 deletions
.github/workflows/test.yml deleted 100644 → 0
View file @ 6d9d59f6
name: Test
on:
pull_request:
push:
branches:
- main
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm ci
- run: npm test
CONTRIBUTING.md deleted 100644 → 0
View file @ 6d9d59f6
# Contributing to Shower
You’re always welcome to contribute! Before contributing to Shower, please read through unified [issues list](https://github.com/shower/shower/issues) to see open bugs and feature requests. If you have any feature to add to Shower or found a bug and want to fix it, please make sure you [file an issue](https://github.com/shower/shower/issues/new) first.
## Process
Fork needed repository, create a branch for each feature or issue you’re dealing with and start making changes. Make sure you code doesn’t break tests if there are any. Once you’re finished, send pull request back to original repository: one feature or bug fix — one pull request, please don’t combine non-relevant changes into one pull request. Supply clear description of your changes and a link to existing issue.
## Code style
Please preserve existing code style while contributing to Shower and be ready for code review by Shower maintainers. It’s strongly recommended to install [EditorConfig](http://editorconfig.org) extension to your editor and validate your JavaScript changes using [JSHint](http://jshint.com/).
## Language
English is the main language for Shower project. All discussions and commit messages should be in English, no matter if it’s good or bad. The second language of Shower is Russian. Official Shower themes are always compatible with Cyrillic and Russian typography. All documentation to Shower is always localized to Russian.
---
Licensed under [MIT License](LICENSE.md).
LICENSE.md deleted 100644 → 0
View file @ 6d9d59f6
# The MIT License
Copyright © 2010–2021 Vadim Makeev, http://pepelsbey.net/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
---
# Лицензия MIT
Copyright © 2010–2021 Вадим Макеев, http://pepelsbey.net/
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
README.md deleted 100644 → 0
View file @ 6d9d59f6
# Shower Presentation Template
[![Test status](https://github.com/shower/shower/workflows/Test/badge.svg)](https://github.com/shower/shower/actions/workflows/test.yml)
<img src="pictures/logo.png" width="250" alt="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](https://shwr.me/). Includes [Ribbon](https://github.com/shower/ribbon/) and [Material](https://github.com/shower/material/) themes, and [core](https://github.com/shower/core/) with plugins.
Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
## Quick Start
1. Download and unzip [shower.zip](http://shwr.me/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](https://nodejs.org/) 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](https://github.com/shower/cli/) page.
## Quick Start with Hosting
You’ll need [Node.js](https://nodejs.org/) installed on your computer.
1. Copy this repository to your account via GitHub.
1. Open [import page](https://github.com/new/import).
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](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/shower/shower)
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](https://github.com/shower/shower/issues) with your idea first. Read [contributing rules](CONTRIBUTING.md) for more details.
Main contributors in historical order: [pepelsbey](https://github.com/pepelsbey), [jahson](https://github.com/jahson), [miripiruni](https://github.com/miripiruni), [kizu](https://github.com/kizu), [artpolikarpov](https://github.com/artpolikarpov), [tonyganch](https://github.com/tonyganch), [zloylos](https://github.com/zloylos), [zloylos](https://github.com/zloylos), [shvaikalesh](https://github.com/shvaikalesh).
---
Licensed under [MIT License](LICENSE.md).
docs/features.md deleted 100644 → 0
View file @ 6d9d59f6
This diff is collapsed.
docs/logitech.md deleted 100644 → 0
View file @ 6d9d59f6
# Logitech Spotlight
There’s a brand new [Logitech Spotlight](http://www.logitech.com/en-us/product/spotlight-presentation-remote) presentation remote, which is already fully compatible with Shower: you can switch between slides, hover and click your presentation. But you can make the most of it by enabling two additional shortcuts in Logitech Presentation application, available for macOS and Windows.
1. [Download](http://support.logitech.com/en_us/software/logi-presentation) and install an app.
2. Go to the main menu and locate additional shortcuts options.
3. Change _Hold Next Button_ to `Cmd Enter` for macOS or `Shift F5` for Windows (just press it).
4. Change _Hold Back Button_ to `Esc` (just press it).
<img src="images/logitech.png" width="300" alt="Logitech Presenter application">
You might have to enable accessibility access on macOS in order to use this features. App will ask you once it’s needed.
Now when all is set you can:
- Start your presentation by holding next button: from the first slide (if none selected) or from the current slide (if there’s one).
- Exit full screen mode by holding back button. It might be useful when you need to find a certain slide and navigate the list.
docs/pdf.md deleted 100644 → 0
View file @ 6d9d59f6
# Export to PDF
Though publishing your HTML slides as they are is always a better idea, you can export your presentation to PDF to upload it to a service like [SlideShare](https://www.slideshare.net/) or [Notist](https://noti.st/).
There are two ways of doing this: via browser print dialog or via console. Exporting via browser seems like the most convenient option, but in some cases it might take too much time or even freeze your browser if your slides are too heavy or there are too many of them.
## Browser
To export your slides to PDF using a browser, you’ll need a browser that’s capable of reading page size from `@page` CSS rule. Chromium-based browsers such as Chrome, Opera, Yandex work the best.
Open you presentation in a browser and send it to print:
1. Press <kbd>Cmd P</kbd> or <kbd>Ctrl P</kbd>.
2. Select PDF as a target instead of printer.
3. Save resulted file.
![Printing dialog](images/ribbon-printing.png)
## Console
To export your slides to PDF via console, you’ll need [Node.js](https://nodejs.org/) with npm installed. Once you have it, you can install Shower CLI package that’ll take care of export:
```sh
npm install -g @shower/cli
```
Once it’s installed, it becomes globally available as `shower` command. Run it in your presentation’s folder like this to get your PDF:
```sh
shower pdf
```
Run `shower --help` for more options. But if it’s a one-time thing and you don’t want to install it globally, you can use built-in command coming with Shower main repository:
```sh
npm install
npm run pdf
```
You’ll find `index.pdf` next to your slides.
docs/shortcuts.md deleted 100644 → 0
View file @ 6d9d59f6
# Keyboard Shortcuts
You can navigate between slides, start and stop presentation using keyboard shortcuts.
- [Start and Stop](#start-and-stop)
- [Forward](#forward)
- [Backward](#backward)
- [First and Last](#first-and-last)
## Start and Stop
- Start from the current slide: `Cmd Enter`, `Shift F5`, `Cmd Option P`
- Start from the first slide `Cmd Shift Enter`
- Stop: `Esc` key
## Forward
- `Right` and `Down` arrows
- `Page Down` key or `Fn Down` on Mac
- `N` for “next”, `J` or `L` keys
- `Enter` key
- `Space` key during presentation
## Backward
- `Left` and `Up` arrows
- `Page Up` key or `Fn Up` on Mac
- `P` for “previous”, `K` or `H` keys, like in vim
- `Shift Enter` key
- `Shift Space` key during presentation
## First and Last
- First slide: `Home` key or `Fn Left` on Mac
- Last slide: `End` key or `Fn Right` on Mac
index.html
View file @ faf34eec
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shower Presentation Engine</title>
<title>Максим Шардт ИВТ-1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="node_modules/@shower/ribbon/styles/styles.css">
......@@ -14,31 +14,33 @@
<body class="shower list">
<header class="caption">
<h1>Shower Presentation Engine</h1>
<p>Yours Truly, Famous Inc.</p>
<h1>Резюме</h1>
<p>Максим Шардт ИВТ-1</p>
</header>
<section class="slide" id="cover">
<h2>Shower Presentation Engine</h2>
<p>Brought to you by <a href="https://pepelsbey.net">Vadim Makeev</a></p>
<h2>Full-stack разработчик</h2>
<p>Front-end на React, Back-end на node.js</p>
<figure>
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
<figcaption class="copyright right white">
<a href="https://fiftyfootshadows.net">© John Carey</a>
</figcaption>
<img class="logo" src="pictures/logo.ico" alt="Simple cat logo">
</figure>
<style>
#cover h2 {
margin: 30px 0 0;
color: white;
color: black;
text-align: center;
font-size: 70px;
}
#cover img {
display: flex;
margin: 0 auto;
}
#cover p {
margin: 10px 0 0;
text-align: center;
color: white;
color: black;
font-style: italic;
font-size: 20px;
}
......@@ -50,161 +52,55 @@
</section>
<section class="slide">
<h2>Shower key features</h2>
<h2>Основные навыки</h2>
<ol>
<li>Built on HTML, CSS and JavaScript</li>
<li>Works in all modern browsers</li>
<li>Themes are separated from engine</li>
<li>Fully keyboard accessible</li>
<li>Printable to PDF</li>
<li>HTML, CSS, JS/TS</li>
<li>React.js и Next.js</li>
<li>Node.js + express, Nest.js</li>
<li>Postgresql и MySQL</li>
<li>Умею в Linux, не боюсь командной строки</li>
</ol>
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
</section>
<section class="slide">
<h2>Plain text on your slides</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="slide">
<h2>Two columns if you like</h2>
<div class="columns two">
<p>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.</p>
<p>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.</p>
</div>
</section>
<section class="slide">
<h2>All kind of lists</h2>
<ol>
<li>Simple lists are marked with bullets</li>
<li>Ordered lists begin with a number</li>
<li>You can even nest lists one inside another
<ul>
<li>Or mix their types</li>
<li>But do not go too far</li>
<li>Otherwise audience will be bored</li>
</ul>
</li>
<li>Look, seven rows exactly!</li>
</ol>
<h2>Чем я занимаюсь</h2>
<p>Все мои проекты можно посмотреть <a href="http://mxschardt.vercel.app/" target="_blank">тут</a></p>
</section>
<section class="slide">
<h2>Serious citations</h2>
<h2>Цитаты кумиров</h2>
<figure>
<blockquote>
<p>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.</p>
<p>You’ll learn a lot from taking a single project you actively use, “watching” it on GitHub and reading every issue and PR.</p>
</blockquote>
<figcaption>Marcus Tullius Cicero</figcaption>
<img class="mug-shot" src="/pictures/gaearon.jpeg">
<figcaption>— <a href="https:/twitter/gaearon/" target="_blank">Dan Abramov</a> on joining projects</figcaption>
</figure>
<style>
.mug-shot {
border-radius: 50%;
}
</style>
</section>
<section class="slide">
<h2>Code samples</h2>
<pre>
<code>&lt;!DOCTYPE html&gt;</code>
<code class="mark">&lt;html lang="en"&gt;</code>
<code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</section>
<section class="slide">
<h2>Even tables</h2>
<table>
<tr>
<th scope="col">Locavore</th>
<th>Umami</th>
<th>Helvetica</th>
<th>Vegan</th>
</tr>
<tr>
<th scope="row">Fingerstache</th>
<td>Kale</td>
<td>Chips</td>
<td>Keytar</td>
</tr>
<tr>
<th scope="row">Sriracha</th>
<td>Gluten-free</td>
<td>Ennui</td>
<td>Keffiyeh</td>
</tr>
<tr>
<th scope="row">Thundercats</th>
<td>Jean</td>
<td>Shorts</td>
<td>Biodiesel</td>
</tr>
<tr>
<th scope="row">Terry</th>
<td>Richardson</td>
<td>Swag</td>
<td>Blog</td>
</tr>
</table>
<p>It’s good to have information organized.</p>
</section>
<section class="slide" id="picture">
<h2>Pictures</h2>
<h2>Прикольная собака</h2>
<figure>
<img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
<figcaption class="copyright right white">
<a href="https://fiftyfootshadows.net">© John Carey</a>
</figcaption>
<img class="cover" src="pictures/picture.jpg" alt="Old photo of a white dog">
</figure>
<style>
#picture h2 {
color: white;
}
</style>
</section>
<section class="slide">
<h2 class="shout shrink">You can even shout this way</h2>
</section>
<section class="slide">
<h2>Inner navigation</h2>
<ol>
<li>Lets you reveal list items one by one</li>
<li class="next">To keep some key points</li>
<li class="next">In secret from audience</li>
<li class="next">But it will work only once</li>
<li class="next">Nobody wants to see the same joke twice</li>
</ol>
</section>
<section class="slide" id="see-more">
<h2 class="shout">
<img src="pictures/logo.svg" alt="Shower logo">
<a href="https://github.com/shower/shower">See more on GitHub</a>
</h2>
<style>
#see-more h2 {
font-size: 100px
margin: 30px 0 0;
color: black;
text-align: center;
font-size: 70px;
}
#see-more img {
width: 0.72em;
height: 0.72em;
#picture img {
margin-top: 8%;
width: 350px;
height: 350px;
}
</style>
</section>
<footer class="badge">
<a href="https://github.com/shower/shower">Fork me on GitHub</a>
</footer>
<div class="progress"></div>
<script src="node_modules/@shower/core/dist/shower.js"></script>
<!-- Copyright © 3000 Yours Truly, Famous Inc. -->
</body>
</html>
netlify.toml deleted 100644 → 0
View file @ 6d9d59f6
[build]
publish = "bundled"
command = "npm run bundle"
package-lock.json
View file @ faf34eec
This diff is collapsed.
pictures/logo.svg deleted 100644 → 0
View file @ 6d9d59f6
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#4b86c2" d="M327.5 273.5l17.7-17.7L500 410.7v-35.4L362.8 238.1l17.7-17.7L500 339.9v-35.4L398.2 202.8l17.7-17.7 84.1 84.1V50c0-27.6-22.4-50-50-50H50C22.4 0 0 22.4 0 50v400c0 27.6 22.4 50 50 50h214.3c4.9-20.5-.7-42.9-16.7-58.9L186 379.5 124.5 318c-53.9-53.9-54.1-141.1-.4-194.8 53.7-53.7 140.9-53.6 194.8.3l8.5 8.5h106.1L274 291.1v-106l-8.3-8.5c-24.5-24.5-64-24.6-88.4-.2s-24.3 64.1.2 88.5l61.5 61.5 61.5 61.5c30.6 30.6 43.9 72.1 39.8 112H450c27.6 0 50-22.4 50-50v-4L327.5 273.5z"/></svg>
\ No newline at end of file
pictures/picture.jpg
View replaced file @ 6d9d59f6 View file @ faf34eec
pictures/picture.jpg

41.3 KB | W: | H:

pictures/picture.jpg

39.7 KB | W: | H:

pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment