Awesome Anran Animotion

Awesome presentation slides for local and online use!

• Intro
• Features
  • This Template
  • Animotion package
• Technical details
• Setup, usage, and deployment
  • Setup
  • Usage
  • Deployment
• Troubleshooting

Intro

This is AwesomeAnranAnimotion, built upon Animotion.

A preview of the slides built with this template can be found here.

Features

This Template

Note that this project is still under development, bugs can exist and features can change.

• Automatically calculated total slide number.

  

• Automatically generated navigation bar on top, including separation into chapters.

  

• Highlight current slide in navigation bar.

  

• Hyperlink to corresponding slides.

  

Animotion package

• Automatic animation.
• Better code presentation.
• Multimedia support (audios, videos, scrollable pdf...)
• And so much more...

Technical details

The most important modifications are in the following files:

• src/layout.svelte : define the layout
• src/slides.svelte : includes the scripts that implements the features
• src/config.ts : activate custom layout, etc.

Setup, usage, and deployment

Setup

Install dependencies.

pnpm i

Run the development server at http://localhost:5173/.

pnpm run dev

Usage

Include the layout file at the beginning of slides.svelte.

<script>
    import Layout from './layout.svelte'
</script>

Declare a new chapter with chapter name.

<script>newChapter("Chapter Name")</script>

Use layout inside .

<Layout>
    ...
</Layout>

Use title bars as needed:

<titlebar>
    ...
</titlebar>

Use "mybody" tag for centering layout as needed:

<mybody>
    ...
</mybody>

Deployment

Build and preview deploy.

pnpm run build && pnpm run preview

1. Change configuration for "base" into the name of your repository at the last line of vite.config.ts.
2. Go to repository Settings->Pages->Build and deployment->Source and select GitHub Actions.

Optional: more building options can be found in the YAML file at .github/workflows/deploy.yml.

For more details, see Vite.

Troubleshooting

• Issue: Any.

  • Possible solution: Inspect errors by pressing alt+ctl+i or opt+cmd+i to locate which slide is the problematic one.

• Issue: Empty HTML content with error message like "server returned with status 404"

  • Possible solution: Check that the "base" is set correctly in vite.config.ts.

• Issue: Images not showing despite being in "public/" folder

  • Possible solution: Add or remove the slash in front of the relative path of the image files, depending on whether a slash is present at the end of "base" configuration in vite.config.ts.

• Issue: Circles on top of the slides not showing

  • Possible reason: JavaScript codes at the end of slides.svelte was not executed to the end because of errors due to absent bug catching and assertions that are to be implemented.

• Issue: Layout elements missing and "Uncaught TypeError: slidesInChapter[0] is undefined"

  • Possible reason: This can happen if a chapter is defined but has no slides- just make sure to add some content to each slide-code-block.