mulesoft-dx/scripts/portal_generator/templates/homepage.html at 608d61a0b435690b811eb69dbeb4c011d733130d · mulesoft/mulesoft-dx · 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
{% extends "base.html" %}

{% block title %}Anypoint Platform APIs{% endblock %}

{% block head_scripts %}
<script src="assets/jsonpath-plus.min.js" defer></script>
<script src="assets/portal.js" defer></script>
{% endblock %}

{% block content %}
<main id="main-content">
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">MuleSoft Platform Developer Portal</h1>
            <p class="hero-subtitle">Discover, explore and integrate with MuleSoft Anypoint Platform</p>

            <div class="hero-tabs">
                <button class="hero-tab active" data-filter="all">All</button>
                <button class="hero-tab" data-filter="api">
                    <img src="assets/icons/api-filter-icon.svg" width="16" height="16" style="margin-right: 6px;" alt="">
                    APIs
                </button>
                <button class="hero-tab" data-filter="skill">
                    <img src="assets/icons/skill-filter-icon.svg" width="16" height="16" style="margin-right: 6px;" alt="">
                    Skills
                </button>
            </div>
        </div>
    </section>

    <div class="catalog-main-content">
        <div class="catalog-controls-wrapper">
            <div class="catalog-results-header">
                <div class="catalog-search-and-results">
                    <div class="tag-search-wrapper">
                        <svg class="search-icon-catalog" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
                            <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-8 6a8 8 0 1 1 14.32 4.906l4.387 4.387a1 1 0 0 1-1.414 1.414l-4.387-4.387A8 8 0 0 1 2 10Z"></path>
                        </svg>
                        <div class="tag-search-input-container" id="tagSearchInputContainer">
                            <div class="selected-tags" id="selectedTags"></div>
                            <input type="text"
                                   id="tagSearchInput"
                                   class="tag-search-input"
                                   placeholder="Search by tags"
                                   aria-label="Search by tags"
                                   autocomplete="off">
                        </div>
                        <div class="tag-suggestions" id="tagSuggestions" style="display: none;"></div>
                    </div>
                    <h2 class="results-count"><span id="resultsType">All</span> (<span id="resultsCount">{{ apis|length + (all_skills|length if all_skills else 0) }}</span> Results)</h2>
                </div>
                <div class="catalog-controls-right">
                    <button class="sort-btn" aria-label="Sort options">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="14" height="14" class="block shrink-0 text-current" aria-hidden="true" focusable="false" style="margin-right: 6px;">
                            <path d="M7.293 4.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414L9 7.414V19a1 1 0 1 1-2 0V7.414L5.707 8.707a1 1 0 0 1-1.414-1.414l3-3ZM16 4a1 1 0 0 1 1 1v11.586l1.293-1.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414L15 16.586V5a1 1 0 0 1 1-1Z"></path>
                        </svg>
                        Sort
                    </button>
                    <!-- Sort Modal -->
                    <div id="sortModal" class="sort-modal" style="display: none;">
                        <div class="sort-modal-content">
                            <h3 class="sort-modal-title">Sort</h3>

                            <div class="sort-modal-field">
                                <label for="sortBy" class="sort-modal-label">Sort by</label>
                                <select id="sortBy" class="sort-modal-select">
                                    <option value="name">Name</option>
                                    <option value="endpoints">Endpoints</option>
                                </select>
                            </div>

                            <div class="sort-modal-field">
                                <label for="sortDirection" class="sort-modal-label">Direction</label>
                                <select id="sortDirection" class="sort-modal-select">
                                    <option value="asc">Ascending</option>
                                    <option value="desc">Descending</option>
                                </select>
                            </div>

                            <button id="applySortBtn" class="apply-sort-btn">Apply Sort</button>
                        </div>
                    </div>
                    <div class="view-toggle" role="group" aria-label="View mode">
                        <button class="view-toggle-btn active" data-view="grid" aria-label="Grid view" title="Grid view">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <rect x="1" y="1" width="6" height="6" rx="1"/>
                                <rect x="9" y="1" width="6" height="6" rx="1"/>
                                <rect x="1" y="9" width="6" height="6" rx="1"/>
                                <rect x="9" y="9" width="6" height="6" rx="1"/>
                            </svg>
                        </button>
                        <button class="view-toggle-btn" data-view="list" aria-label="List view" title="List view">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <rect x="1" y="2" width="14" height="2" rx="1"/>
                                <rect x="1" y="7" width="14" height="2" rx="1"/>
                                <rect x="1" y="12" width="14" height="2" rx="1"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <section id="catalog" class="unified-catalog">
            <div class="catalog-grid" id="catalogGrid">
                <div class="catalog-table-header">
                    <div class="catalog-header-name">NAME</div>
                    <div class="catalog-header-description">DESCRIPTION</div>
                    <div class="catalog-header-version">VERSION</div>
                </div>
                {% for api in apis %}
                {% include "homepage/api_card.html" %}
                {% endfor %}
                {% if all_skills %}
                {% for skill in all_skills %}
                {% include "homepage/skill_card.html" %}
                {% endfor %}
                {% endif %}
            </div>
        </section>
    </div>

</main>
{% endblock %}

{% block footer %}
<footer class="footer">
    <div class="container">
        <p>Generated from OpenAPI 3.0 specifications</p>
    </div>
</footer>
{% endblock %}

{% block scripts %}
<script>
window.__PROXY_CONFIG__ = { url: {{ proxy_url|tojson }} };
</script>
{% endblock %}