Workshops

This repo contains a set of open source talks and workshops to introduce and demo Pieces, as well as concepts such as how AI can help you become a 10x developer.

All the slides for these workshops are built using Slidev, a Vue.js based presentation framework, allowing you to create slides in markdown.

Workshop contents

All these workshops are self contained, with a core set of styles and other components. Each workshop slide deck is implemented as a markdown file in the root folder, linking to core content in a folder with the same name.

You can find more details about setting up and running each workshop in the respective folders.

Run the slides

Each workshop has pre-requisites, defined in the README in the relevant folder. This list what you need, such as a specific development tool, or downloaded LLMs. Make sure you work through these before running the slides.

To run the slides, you need to have Node.js installed. Then do the following:

1. From your terminal, navigate to the workshop folder you want to run.

2. Install the dependencies:

   pnpm install

3. Start the slides using the command provided in the workshop list. Run this from the root folder.

4. Open the slides in your browser at http://localhost:3030.

5. Open the presenter mode in your browser at http://localhost:3030/presenter.

The presenter mode includes the following:

• Current slide, and a preview of the next slide
• Speaker notes
• Easy navigation controls if you need to jump around between slides
• Annotation tools
• A timer

Workshop list

Workshop	Folder	Command to run	Status	Description
10x Your Developer Productivity with AI-Enabled Tools	10x-developer-productivity	pnpm 10x	Complete ✅	A workshop to show how AI can help you become a 10x developer
Hands on with Pieces for Developers	hands-on-with-pieces	pnpm hands-on	In development	A hands-on workshop to introduce Pieces
Use an LLM anywhere with offline AI	use-llm-anywhere	pnpm use-llm-anywhere	Awaiting Train the Trainer video	A talk to show how to use an LLM model offline

Customizing the slides

These slides should be customized for you, to include details about you and links to your web site and social handle. The values to customize are:

Value	Location	Description
logoHeader	First slide front matter	A link to an image to use as a logo in the top left corner
website	First slide front matter	The URL of your web site
handle	First slide front matter	Your social handle
introImage	First slide front matter	A link to an image of you for the first slide
Presenter	First slide	You name
Presenter title	First slide	Your title

Add a new workshop

To add a workshop, do the following:

1. Create a new folder in the root with the name of the workshop.

2. Create a slides.md file in the new folder, and add your slide content, as well as any other assets you need.

3. Create a README.md file in the new folder, and add details about the workshop, how to run it, and any other information you need.

4. Create a markdown file in the root of this repo named the same as the folder with an .md extension.

5. In this new markdown file, copy the contents of one of the other workshop markdown files, and update the location of the slides.md file to point to the new folder.

   ---
   theme: unicorn
   logoHeader: '/img/white-pieces-for-developers.svg'
   website: 'pieces.app'
   handle: 'getpieces'
   colorSchema: 'dark'
   
   fonts:
   # basically the text
   sans: Figtree
   # use with `font-serif` css class from UnoCSS
   serif: Figtree
   # for code blocks, inline code, etc.
   mono: Fira Code
   
   addons:
       - slidev-addon-qrcode
   
   src: ./<new folder>/slides.md
   ---

6. Add a new entry in the package.json file in the scripts section to run the new workshop from your new markdown file in the root of the repo.

   {
       "scripts": {
           "dev10x": "slidev --config 10x-developer-productivity.md",
           "hands-on": "slidev --config hands-on-with-pieces.md",
           "new-workshop": "slidev --config <new workshop>.md"
       }
   }