Built on Reveal.js A framework for easily creating beautiful presentations using HTML.
There's a projector in our office that we occasionally use for critiques, or team viewings—but 90% of the time it sits unused. Teams in other parts of the office use their projectors to share dashboards and other status things, we thought it could be a great spot to surface some info about what we're doing!
A couple of us got together on a Friday afternoon, and threw some ideas on a Freehand and over the course of a long weekend we got a pretty simple couple of slides, some Twitter feeds, and random images from Unsplash.
The text is input in the index.html file, read the reveal.js docs for more info on editing slides.
Currently, we're just pulling a random photo from the Coastal View collection using source.unsplash, but would be really great to put together a custom collection, or use the Unsplash API to be able to display the photographer, and maybe some keywords in case a really great photo pops up so we can find it.
Dyanmic tweets are displayed in the slides, currently they are just from lists using the embedding tools from publish.twitter—we do have a developer account so would be really great to have tweets pulled in this way so more display customization can be made. Reach out to Paul for API keys etc.
Currently, there are four lists:
- Liferay - employees, offices, projects, basically anything officially associated with Liferay. This helps us keep our collective finger on the proverbial pulse.
- Such Frontend - developers, designers, pretty much people who are tweeting tasty treats that can take us to the next level in our development.
- Much Design Wow - designers, philosophers, people from all walks, anyone who provides #thoughtleadership or hot tips for designers so we can stay current in Design.
- Liferay.Design - designers at Liferay! If you should be on this list, @me.
The Tweets are the last posts from @Liferay_UX, @Liferay, and a list comprised of all the Designers at Liferay.
The clock / calendar below the slides is to remind us that life is short, and also tell us the day, date (in YYYY-MM-DD format—per our DAM guidelines 😬), and current time.
This is all assuming you have Node.js and Git installed on your computer, The Boss has written a great guide on setting up your machine, so if you don't have those things, start here.
(modified from reveal.js docs) Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
-
Make sure you have Node.js 4.0.0 or later installed—to check, open up your terminal and enter:
node -v
-
Clone this repository
git clone https://github.com/liferay-design/dashboard.git
-
Navigate to the reveal.js folder
cd dashboard -
Install dependencies
npm install
-
Serve the presentation and monitor source files for changes
npm start
-
Open http://localhost:8000 to view your presentation
You can change the port by using
npm start -- --port=8001.
- css/ Core styles without which the project does not function
- js/ Like above but for JavaScript
- plugin/ Components that have been developed as extensions to reveal.js
- lib/ All other third party assets (JavaScript, CSS, fonts)
To push your changes live to the web, you need to be added to the Liferay.Design WeDeploy team, (reach out to Paul) once you have set that up, simply type: we deploy -p liferaydotdesign. Please be careful when deploying as it will instantly update the live site (currently available at http://dashboard.liferay.design).
As always, creating issues is a great way to help! You can also join the Dashboard Trello to add ideas there, or clone this repo, add some sick stuff and submit a pull request!
GNU GPLv3
Copyright (C) 2018 Liferay Design, https://liferay.design