Skip to content

Latest commit

 

History

History
182 lines (137 loc) · 3.95 KB

example.md

File metadata and controls

182 lines (137 loc) · 3.95 KB
Raw
theme
./

Renuo Presentation Theme

Presentation slides for engineers

layout: cover showContactText: false showAddressText: false

Note

This cover slide is configured without displaying contact and address information

layout: intro

Primary Heading

Introduction Slide

Secondary Heading

What is Slidev?

Slidev is a slides maker and presenter designed for developers, consist of the following features

  • 📝 Text-based - focus on the content with Markdown, and then style them later
  • 🎨 Themable - theme can be shared and used with npm packages
  • 🧑‍💻 Developer Friendly - code highlighting, live coding with autocompletion
  • 🤹 Interactive - embedding Vue components to enhance your expressions
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a hostable SPA
  • 🛠 Hackable - anything possible on a webpage

Read more about Why Slidev?

showLogo: false

Navigation

This particular slide is configured to hide the logo

Keyboard Shortcuts
space / tab / right next animation or slide
left / shiftspace previous animation or slide
up previous slide
down next slide

layout: image-right image: https://cover.sli.dev

Code

Use code snippets and get the highlighting directly!

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

layout: full

<script setup>
import SlideBackground from "../components/slideBackground.vue";
import ContactInfo from "../components/renuoContactInfo.vue";
import AddressCard from "../components/renuoContactCard.vue";

const props = defineProps({
  showContactText: {
    type: Boolean,
    default: true
  },
  showAddressText: {
    type: Boolean,
    default: true
  }
});
</script>
<template>
  <div class="absolute p-5 h-full">
    <SlideBackground class="top-0" />
  </div>
  <div id="cover-slide" class="slidev-layout cover bg-primary">
    <div class="relative w-full text-white">
      <AddressCard :show-address-text="props.showAddressText" />
      <ContactInfo :show-contact-text="props.showContactText" />
      <div class="slot">
        <slot />
      </div>
    </div>
  </div>
</template>

showLogo: false

Mermaid Diagram Example

sequenceDiagram
    Consumer-->API: Book something
    API-->BookingService: Start booking process
    break when the booking process fails
        API-->Consumer: show failure
    end
    API-->BillingService: Start billing process

layout: quote

Ruby on Rails (simplified as Rails) is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer and HTML, CSS and JavaScript for user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.

https://en.wikipedia.org/wiki/Ruby_on_Rails

layout: two-cols

Left

The content displayed on the left

::right::

Right

The content displayed on the right

layout: two-cols-header

Main Header

::left::

Left Column

This is some content for the left column

::right::

Right Column

This is some content for the right column

layout: center class: "text-center"

Additional Referernces

Documentations / GitHub Repo