1 | # greenwood-starter-presentation
|
2 |
|
3 | Greenwood plugin and kick-starter repo for creating and authoring a slide deck from markdown, powered by [**GreenwoodJS**](https://www.greenwoodjs.io/)! ♻️
|
4 |
|
5 | 
|
6 |
|
7 | [](https://app.netlify.com/sites/awesome-bhaskara-b7d76c/deploys)
|
8 |
|
9 | ## Installation
|
10 |
|
11 | There are a couple options available for how you can use this project to kickstart your next presentation.
|
12 |
|
13 | ### Greenwood Plugin (recommended)
|
14 | This 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 |
|
19 | To add this plugin to an _existing_ Greenwood project (where `@greenwood/cli` has already been installed), please do the following:
|
20 |
|
21 | 1. Install the plugin as a dev dependency
|
22 | ```sh
|
23 | $ npm i greenwood-starter-presentation --save-dev --legacy-peer-deps
|
24 | ```
|
25 | 1. 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 | ```
|
40 | 1. Make sure to add `type: "module"` to uour _package.json_
|
41 | 1. 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 |
|
53 | You can also just fork and / or clone this repo from GitHub using `git`.
|
54 |
|
55 | 1. 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 | ```
|
63 | 1. Change into the project directory and install dependencies
|
64 | ```sh
|
65 | $ cd greenwood-starter-presentation
|
66 | $ npm install
|
67 | ```
|
68 |
|
69 | ## Usage
|
70 |
|
71 | For 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 |
|
79 | To start developing, simply run the `start` script
|
80 |
|
81 | ```sh
|
82 | $ npm start
|
83 | ```
|
84 |
|
85 | This will open a local development server for you at `localhost:1984`.
|
86 |
|
87 | ----
|
88 |
|
89 | You can preview a production build by using the `serve` script
|
90 |
|
91 | ```sh
|
92 | $ npm run serve
|
93 | ```
|
94 |
|
95 | You 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 |
|
101 | When 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 |
|
110 | To organize your slide content, this plugin provides the following template that can be specified in markdown file's frontmatter.
|
111 |
|
112 | ex.
|
113 | ```md
|
114 | ---
|
115 | template: theme-statement
|
116 | ---
|
117 |
|
118 | Lorum Ipsum all my content....
|
119 | ```
|
120 |
|
121 | 1. `theme-center-content` - All content is positioned in the center both vertically and horizontally.
|
122 | 1. `theme-outline` - Centers a list in the middle of the page with a heading tag at the top/
|
123 | 1. `theme-statement` - A slide with content positioned in the bottom left hand corner to help emphasize a point.
|
124 | 1. `theme-title` - Provides an opening slide to highlight the talk title and author prominently in the center using heading tags.
|
125 | 1. `theme-top-title-image-left` - Positions an image in the lower left hand corner with content flowing to the right.
|
126 | 1. `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.
|
127 | 1. `page` - (the default if no `template` is specified) - Will just display a slide with the `--color-primary` variable to the background color.
|
128 |
|
129 | The supported structure for the above slides looks like this
|
130 |
|
131 | #### Center Content
|
132 | ```md
|
133 | ---
|
134 | template: theme-center-content
|
135 | ---
|
136 |
|
137 | # What's the Deal...?
|
138 |
|
139 | Lorum 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 | ---
|
147 | template: theme-outline
|
148 | ---
|
149 |
|
150 | # My Talk Agenda
|
151 |
|
152 | 1. Intro
|
153 | 1. Topic 1
|
154 | 1. Topic 2
|
155 | 1. Topic 3
|
156 | 1. 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 | ---
|
164 | template: theme-statement
|
165 | ---
|
166 |
|
167 | Spicy 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 | ---
|
175 | template: 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 | ---
|
189 | template: theme-top-title-image-left
|
190 | ---
|
191 |
|
192 | # Thank You!
|
193 |
|
194 | @twitter_name
|
195 |
|
196 | 
|
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 | ---
|
205 | template: theme-top-title
|
206 | ---
|
207 |
|
208 | # Welcome To My Talk
|
209 |
|
210 | Empty 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
|
220 | The 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 |
|
250 | There 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 |
|
254 | To stay up to date with this repo depends on how you initialized your project or repo.
|
255 |
|
256 | #### Plugin
|
257 |
|
258 | If 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 |
|
270 | If you cloned this repo, then you should just be able to pull
|
271 | ```sh
|
272 | $ git pull origin master
|
273 | ```
|
274 |
|
275 | If 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 |