website/main.py at main · perses/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
"""
MkDocs macros for Perses website
"""

def define_env(env):
    """
    This is the hook for defining variables, macros and filters
    """

    @env.macro
    def feature(title, description, media, learn_more=None, reverse=False):
        """
        Create a feature section with title, description, and media (image/video)

        Args:
            title: The feature title (e.g., "Observability Display")
            description: The feature description
            media: Path to the media file (e.g., "assets/images/feature1.png", "assets/videos/demo.mp4"..)
            learn_more: Optional URL for "Learn more" link
            reverse: Boolean, if True creates reverse layout (text-media instead of media-text)

        Returns:
            HTML string for the feature section
        """
        reverse_class = " reverse" if reverse else ""

        learn_more_link = ""
        if learn_more:
            learn_more_link = f'[→ Learn more]({learn_more})'

        # Check if the media is a video file
        if media.lower().endswith(('.mp4', '.webm', '.mov')):
            media_element = f'<video autoplay muted loop playsinline onclick="this.paused ? this.play() : this.pause()"><source src="{media}" type="video/mp4"></video>'
        else:
            media_element = f'<img alt="{title}" src="{media}"/>'

        return f'''<div class="feature-section{reverse_class}" markdown>
<div class="feature-content" markdown>
<div class="feature-title" markdown>
## {title}
</div>
<div class="feature-text" markdown>
{description}

{learn_more_link}
</div>
</div>
<div class="feature-image">
{media_element}
</div>
</div>'''