An academic theme for High Energy Physics (HEP) for Slidev.

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: hep
---

Learn more about how to use a theme.

This theme provides the following layouts:

The authors and the corresponding affiliation can be configured as below:

authors:  # First author should be the presenter
  - First Author: ["Institution 1", "Institution 2"] 
  - Second Author: ["Institution 3"]
  - Third Author: ["Institution 1", "Institution 3"] 

Note that the first author should be the presenter.

This is the layout with a bottom bar and a decorative box left to the title, trying to give a structured approach to displaying slide information consistently across the presentation.. The key parts of this layout are:

• Title Bar at Bottom: At the bottom of the slide, there's a horizontal bar (a component named BarBottom) that contains the following information:
  • A title (title), which displays the title of the presentation pulled from the configuration.
  • An author name (author), which suggests that it is showing the first author's name from a list of authors defined in the configuration.
  • A meeting or event name (meeting), which is also taken from the configuration settings.
• Page Number:
  • In the bottom-right corner, there is an automatic slide number indicator.

This theme provides the following components:

The Text Box component is a flexible Vue component designed to display text content within a styled container. The component is absolutely positioned within its parent and can be customized with various styles and labels such as 'info' and 'warning'. The text content supports automatic conversion of newline characters to HTML line breaks for better readability.

The component accepts the following props:

The component has scoped CSS with the following predefined classes:

The customStyles prop allows for further customization beyond these preset classes. Users can pass an object with any CSS properties they wish to apply to the .text-box-container.

Example usage:

<Text-Box
  text="This is an info message with\nmultiple lines."
  :position="{ top: '20px', left: '20px' }"
  label="info"
/>
<Text-Box
  text="This is a warning message!"
  :customStyles="{ fontSize: '1em', fontWeight: 'bold' }"
  label="warning"
/>

The PlotlyGraph component is a Vue wrapper for Plotly.js, allowing for easy embedding and manipulation of Plotly graphs within your Vue application. The component accepts various props to customize the graph's dimensions and font sizes.

The component accepts the following props for configuration:

To use the PlotlyGraph component, you must provide the filePath prop with a valid URL or path to a Plotly configuration file. Other props are optional and allow you to customize the appearance of the graph.

It's highly recommended to produce the JSON file for plotting by Plotly in Python.

<PlotlyGraph
  filePath="path/to/plotly/config.json"
  graphWidth="600"
  graphHeight="400"
  xTitleFontSize="14"
  yTitleFontSize="14"
  tickFontSize="12"
  annotationFontSizeScale="1.5"
/>

• npm install
• npm run dev to start theme preview of example.md
• Edit the example.md and style to see the changes
• npm run export to generate the preview PDF
• npm run screenshot to generate the preview PNG