slidev-theme-hep

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

❤️‍🔥 Demo

link

🛠 Install

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.

💼 Layouts

This theme provides the following layouts:

Cover

Parameter	Type	Default	Notes
background	string	'ATLAS/ATLAS-Detector.png'
authors	[authorName: string]: string[];	{}	See examples below
meeting	string	'' (empty string)	Meeting of this presentation
preTitle	string	'An Example Title'	Title of the presentation
preDate	string	new Date().toLocaleDateString()	Automatically generated as the current localized date.

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.

---

pageBar

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.

---

🗿 Components

This theme provides the following components:

TextBox

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.

Props

The component accepts the following props:

Prop	Type	Default	Description
text	String	None	The text content to be displayed within the text box.
position	Object	{ top: '0px', left: '0px', right: '0px', bottom: '0px' }	The absolute position of the text box within its parent.
customStyles	Object	None	Additional custom CSS styles for the text box container.
label	String	'info'	A label that determines the styling of the text content.

Styling

The component has scoped CSS with the following predefined classes:

Class Name	Description	Style Properties
text-box-container	The container of the text box, centered and flex-aligned.	display: flex; flex-direction: column; justify-content: center; align-items: center;
text-content	The actual content of the text box.	padding: 0.5rem;
warning	Style for warning label.	background-color: #ffcc00; color: red;
info	Style for info label.	background-color: transparent; color: #0FA3B1; font-weight: 550; font-size: 1.5em;

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"
/>

PlotlyGraph

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.

Props

The component accepts the following props for configuration:

Prop	Type	Description
filePath	String	The URL or path to the configuration file for the Plotly graph.
graphWidth	Number	The width of the graph in pixels.
graphHeight	Number	The height of the graph in pixels.
xTitleFontSize	Number	The font size for the x-axis title.
yTitleFontSize	Number	The font size for the y-axis title.
tickFontSize	Number	The font size for the tick labels on both axes.
annotationFontSizeScale	Number	A scale factor to adjust the font size of annotations.

Usage

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.

Example

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

---

Contributing

• 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