UNPKG

9.58 kBMarkdownView Raw
1# greenwood-starter-presentation
2
3Greenwood plugin and kick-starter repo for creating and authoring a slide deck from markdown, powered by [**GreenwoodJS**](https://www.greenwoodjs.io/)! ♻️
4
5![greenwood-starter-presentation](./.github/images/greenwood-starter-presentation.png)
6
7[![Netlify Status](https://api.netlify.com/api/v1/badges/f1bd02db-7f54-44d1-a3f2-b88b75db8167/deploy-status)](https://app.netlify.com/sites/awesome-bhaskara-b7d76c/deploys)
8
9## Installation
10
11There are a couple options available for how you can use this project to kickstart your next presentation.
12
13### Greenwood Plugin (recommended)
14This project is principally intended to be consumed by a Greenwood project as a ["theme pack" plugin](https://www.greenwoodjs.io/guides/theme-packs/) installed from npm. The advantage being that as enhancements and improvements are made to the project, you can pull those in just by updating a version number in your _package.json_.
15
16
17> Check out these links to learn more [about Greenwood](https://www.greenwoodjs.io/about/) as well as the [Quick start guide](https://www.greenwoodjs.io/getting-started/).
18
19To add this plugin to an _existing_ Greenwood project (where `@greenwood/cli` has already been installed), please do the following:
20
211. Install the plugin as a dev dependency
22 ```sh
23 $ npm i greenwood-starter-presentation --save-dev --legacy-peer-deps
24 ```
251. Add this and Greenwood's Import CSS plugin to your _greenwood.config.js_
26 ```js
27 import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
28 import { greenwoodThemeStarterPresentation } from 'greenwood-starter-presentation';
29
30 export default {
31 // ...
32
33 plugins: [
34 greenwoodPluginImportCss(),
35 greenwoodThemeStarterPresentation()
36 ]
37
38 };
39 ```
401. Make sure to add `type: "module"` to uour _package.json_
411. Create a markdown file in your _src/pages_ directory called _index.md_ with these contents
42 ```md
43 ---
44 template: index
45 ---
46 ```
47
48> _You can see an example of this project in use as a Greenwood plugin in [this repo](https://github.com/thescientist13/knowing-your-tco). Feel free to clone or fork that or do whatever you want from there as well._
49
50
51### Git (Fork / Clone)
52
53You can also just fork and / or clone this repo from GitHub using `git`.
54
551. Clone the repo
56 ```sh
57 # Using SSH (recommended)
58 $ git clone git@github.com:thescientist13/greenwood-starter-presentation.git
59
60 # Using HTTP / GitHub Credentials
61 $ git clone https://github.com/thescientist13/greenwood-starter-presentation.git
62 ```
631. Change into the project directory and install dependencies
64 ```sh
65 $ cd greenwood-starter-presentation
66 $ npm install
67 ```
68
69## Usage
70
71For those unfamiliar, [CSS Zen Garden](http://www.csszengarden.com/) is a site the shares examples of designers and developers using the same HTML, but making completely unique looking layouts using just CSS. The concept of a theme pack is an homage to this philosophy. Just like you would have in Google Slides or Powerpoint, this project provides not only templates and styles to pre-theme and layout all your context, but also a complete UI to develop and present the slides with!
72
73
74> _As this repo and plugin are both based on Greenwood, you are able to use all of Greenwood's [APIs](https://www.greenwoodjs.io/docs/) and [plugins](https://www.greenwoodjs.io/plugins/) in your own project too._
75
76
77### Development
78
79To start developing, simply run the `start` script
80
81```sh
82$ npm start
83```
84
85This will open a local development server for you at `localhost:1984`.
86
87----
88
89You can preview a production build by using the `serve` script
90
91```sh
92$ npm run serve
93```
94
95You can preview the final site at `localhost:8080`.
96
97> If you are using Windows, run `npm run serve:win`
98
99### User Interface
100
101When you are running the app, the following controls and behaviors are available:
102- Updating in any content will live reload the browser for you, preserving the focused slide.
103- Scrolling and clicking any slide in the _Preview List_ on the left will make that slide appear in the _Current Slide) view.
104- Clicking the _Presenter Mode_ button will enable Full Screen mode:
105 - Navigate left and right using the left and right arrow keys
106 - To exit presenter mode, hit the ESC key
107
108### Slide Templates and Layouts
109
110To organize your slide content, this plugin provides the following template that can be specified in markdown file's frontmatter.
111
112ex.
113```md
114---
115template: theme-statement
116---
117
118Lorum Ipsum all my content....
119```
120
1211. `theme-center-content` - All content is positioned in the center both vertically and horizontally.
1221. `theme-outline` - Centers a list in the middle of the page with a heading tag at the top/
1231. `theme-statement` - A slide with content positioned in the bottom left hand corner to help emphasize a point.
1241. `theme-title` - Provides an opening slide to highlight the talk title and author prominently in the center using heading tags.
1251. `theme-top-title-image-left` - Positions an image in the lower left hand corner with content flowing to the right.
1261. `theme-top-title` - Positions an `<h1>` at the top behind a page width banner using `--color-tertiary`, with any extra content positioned to the right of the page.
1271. `page` - (the default if no `template` is specified) - Will just display a slide with the `--color-primary` variable to the background color.
128
129The supported structure for the above slides looks like this
130
131#### Center Content
132```md
133---
134template: theme-center-content
135---
136
137# What's the Deal...?
138
139Lorum Ipsum
140```
141
142> See [_pages/slides/3.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/3.md) for an example.
143
144#### Outline
145```md
146---
147template: theme-outline
148---
149
150# My Talk Agenda
151
1521. Intro
1531. Topic 1
1541. Topic 2
1551. Topic 3
1561. Thank you!
157```
158
159> See [_pages/slides/2.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/3.md) for an example.
160
161#### Statement
162```md
163---
164template: theme-statement
165---
166
167Spicy jalapeno bacon ipsum dolor.
168```
169
170> See [_pages/slides/6.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/1.md) for an example.
171
172#### Title
173```md
174---
175template: theme-title
176---
177
178# My Talk
179
180## By Your Name
181```
182
183> See [_pages/slides/1.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/1.md) for an example.
184
185
186#### Top Title Image Left
187```md
188---
189template: theme-top-title-image-left
190---
191
192# Thank You!
193
194@twitter_name
195
196![kitten](https://chuckanddons.com/media/wysiwyg/kitten_blog.jpg)
197```
198
199> See [_pages/slides/7.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/1.md) for an example.
200
201
202#### Top Title
203```md
204---
205template: theme-top-title
206---
207
208# Welcome To My Talk
209
210Empty page body with an h1 at the top with `--color-secondary` color behind it as a top bar.
211```
212
213> See [_pages/slides/4.md_](https://github.com/thescientist13/greenwood-starter-presentation/blob/master/src/pages/slides/2.md) for an example.
214
215----
216
217> _Remember, you can always add your own HTML and <style> tags right into markdown. Additionally, Greenwood also supports ad-hoc and one off imports of CSS and JS via [frontmatter imports](https://www.greenwoodjs.io/docs/front-matter/#imports) for extra customization!_
218
219### Theming and Design System
220The following global variables are provided to you to customize and override using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
221
222```css
223:root {
224 --color-primary: #135;
225 --color-secondary: #74b238;
226 --color-tertiary: #2b85da;
227 --color-text-light: #efefef;
228 --color-text-dark: #020202;
229 --font-family: 'Optima', sans-serif;
230 --font-size: 1.5rem;
231 --backgroundUrl: url('../assets/background.jpg');
232}
233
234:host {
235 --color-primary: #135;
236 --color-secondary: #74b238;
237 --color-tertiary: #2b85da;
238 --color-text-light: #efefef;
239 --color-text-dark: #020202;
240 --font-family: 'Optima', sans-serif;
241 --font-size: 1.5rem;
242 --backgroundUrl: url('../assets/background.jpg');
243}
244```
245
246## Support and Upgrades
247
248### Known Issues
249
250There a few open items in our issue tracker as we work to an [initial 1.0.0 release](https://github.com/thescientist13/greenwood-starter-presentation/milestone/1). It would also be useful to be familiar with Greenwood's [Theme Pack FAQ](https://www.greenwoodjs.io/guides/theme-packs/#faq) if something isn't working as expected.
251
252### Upgrades
253
254To stay up to date with this repo depends on how you initialized your project or repo.
255
256#### Plugin
257
258If you using the plugin, any upgrades should just be as simple as upgrading the version of this plugin in your _package.json_ using your package manager of choice.
259
260```sh
261# npm
262$ npm install greenwood-starter-presentation
263
264# yarn
265$ yarn upgrade greenwood-starter-presentation --latest
266```
267
268#### Git
269
270If you cloned this repo, then you should just be able to pull
271```sh
272$ git pull origin master
273```
274
275If you forked, make sure to add this repo as an upstream and pull changes in as needed
276```sh
277# use SSH (recommended) or HTTPS depending on your needs
278$ git remote add upstream git@github.com:thescientist13/greenwood-starter-presentation.git
279$ git fetch upstream master
280$ git checkout master
281$ git merge upstream/master
282```
283
284> ⚠️ Note: By using git and this project, be aware that pulling in upstream changes could likely be prone to merge conflicts if you are changing anything other than _src/pages_.
\No newline at end of file