Raycast slideshow

index.md

My awesome presentation

With subtitle

first pokemon

second pokemon

My list

• first
• second
• third
  • forth

My numbered list

1. first
2. second
3. third

TODO

• Important feature

Image

local images works too.

index.tsx

// Raycast extension to create slides from a markdown file.
// Place `index.md` under `~/slides`.

import { Action, ActionPanel, Detail } from "@raycast/api";
import { useState } from "react";
import fs from 'fs';

function Slide({ slide, nextSlide, prevSlide }) {
  return (
    <Detail
      markdown={slide}
      actions={
        <ActionPanel>
         <ActionPanel.Section title="bbbb">
          <Action title="Next" shortcut={{ modifiers: [], key: "arrowRight" }} onAction={() => nextSlide()} />
         </ActionPanel.Section>
         <ActionPanel.Section title="aaaa">
          <Action title="Prev" shortcut={{ modifiers: [], key: "arrowLeft" }} onAction={() => prevSlide()} />
         </ActionPanel.Section>
        </ActionPanel>
      }
    />
  );
}

export default function Command() {
  const markdown = fs.readFileSync(`${process.env.HOME}/slides/index.md`, "utf-8");
  const slides = markdown.split("\n\n\n");
  const [currentSlide, setCurrentSlide] = useState(0);

  const nextSlide = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide(currentSlide + 1);
    }
  };

  const prevSlide = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1);
    }
  };

  return <Slide slide={slides[currentSlide]} nextSlide={nextSlide} prevSlide={prevSlide} />;
}