expose environment variables from Vite in the .md file

[gureckis]

I'd like to define some constant variables in my Vite config and have them replaced in all my slides. for instance

export default defineConfig({
  define: {
    __AUTHOR__: 'Mr. Presentation Wiz",
    __SEMESTER__: 'Spring 2024',
  },
})

Is there a good way to refer to those variables in either a component/theme or a slides.md file so they will be shared across many slides?

[gureckis]

For anyone interested, I found a good solution to this.

I installed the vite-plugin-data package for Vite. This lets you define *.data.js files which run at build time and create a static object that can be used in the front end.

In setup/main.ts I made a new plugin called courseInfoPlugin:

import { defineAppSetup } from '@slidev/types'
import courseInfoPlugin from '../plugins/courseInfoPlugin'

import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

export default defineAppSetup(({ app, router }) => {
  // Vue App
  app.use(courseInfoPlugin)
})

In plugins/courseInfoPlugin.js:

import coursevars from '../../course.data.js'

// file: courseInfoPlugin.js
export default {
  install(app, options) {
    // options should be the object we want to register globally
    // e.g., options: { name: "Vue.js Basics", instructor: "Jane Doe", level: "Beginner" }

    // Register the courseInfo object as a global property
    app.config.globalProperties.$courseInfo = coursevars.load()
    console.log('installed coursevar')
  },
}

Then whatever data you want to include in your app in course.data.js:

export default {
  load() {
    return {
      semester: 'Fall',
      year: '2024',
      timestamp: Date.now(),
   }
}

Then in your slides.md you can refer to the courseInfo directly with {{ $courseInfo }} or a specify field like {{ $courseInfo.year }}.