forked from github/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
product-landing.html
140 lines (123 loc) · 5.89 KB
/
product-landing.html
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
139
140
<!doctype html>
<html lang="{{currentLanguage}}">
{% include head %}
<body class="d-lg-flex">
{% include sidebar %}
<main class="width-full">
{% include header %}
<div class="container-xl px-3 px-md-6 pt-3 pb-2">
<header class="d-lg-flex gutter-lg mb-6">
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<span class="text-mono text-gray">Product</span>
<h1 class="mb-3 font-mktg">
{{ page.shortTitle }}
{% if page.beta_product %}
<span class="Label Label--green v-align-middle">Beta</span>
{% endif %}
</h1>
<div class="lead-mktg text-gray">{{ page.intro }}</div>
<a href="{{ page.introLinks.quickstart }}" class="btn-mktg btn-large f4 mt-3 mr-3">
{% data ui.product_landing.quick_start %}
</a>
{% if page.introLinks.reference %}
<a href="{{ page.introLinks.reference }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
{% data ui.product_landing.reference_guides %}
</a>
{% endif %}
{% if page.introLinks.overview %}
<a href="{{ page.introLinks.overview }}" class="btn-mktg btn-outline-mktg btn-large f4 mt-3 mr-3">
{% data ui.product_landing.overview %}
</a>
{% endif %}
</div>
{% if page.product_video %}
<div class="col-12 col-lg-6">
<div class="position-relative" style="padding-bottom:56.25%;">
<iframe
title="{{ page.shortTitle }} Video"
class="top-0 left-0 position-absolute box-shadow-large rounded-1 width-full height-full"
src="{{ page.product_video }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>
</div>
</div>
{% endif %}
</header>
<!-- Article links -->
<div class="d-lg-flex gutter my-6 py-6">
<div class="col-12 col-lg-{% if page.changelog %}4{% else %}6{% endif %} mb-4 mb-lg-0">
<div class="featured-links-heading mb-4 d-flex flex-items-baseline">
<h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.guides %}</h3>
<a href="{{ currentPath }}/guides" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
</div>
<ul class="list-style-none">
{% for link in featuredLinks.guides %}
<li class="border-top">
<a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
<h4 class="link-with-intro-title mb-1">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
<p class="link-with-intro-intro color-gray-5 mb-0">{{ link.intro | truncatewords: 12 }}</p>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="col-12 col-lg-{% if page.changelog %}4{% else %}6{% endif %} mb-4 mb-lg-0">
<div class="featured-links-heading mb-4 d-flex flex-items-baseline">
<h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.popular_articles %}</h3>
</div>
<ul class="list-style-none">
{% for link in featuredLinks.popular %}
<li class="border-top">
<a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
<h2 class="link-with-intro-title f5">{{ link.title }}<span class="Bump-link-symbol">→</span></h2>
</a>
</li>
{% endfor %}
</ul>
</div>
{% if page.changelog %}
<div class="col-12 col-lg-4 mb-4 mb-lg-0">
<div class="featured-links-heading mb-4 d-flex flex-items-baseline">
<h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.whats_new %}</h3>
<a href="https://github.blog/changelog/" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
</div>
<ul class="list-style-none">
{% for link in page.changelog %}
<li class="border-top">
<a href="{{ link.href }}" class="d-block text-gray-dark Bump-link--hover py-3 no-underline">
<h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
<time
class="tooltipped tooltipped-n text-gray-light text-mono mt-1"
aria-label="{{ link.date | date: '%B %d, %Y' }}"
>{{ link.date | date: "%B %d" }}</time>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{{ renderedPage }}
</div>
{% if featuredLinks.guideCards %}
<div class="bg-guides-gradient py-6">
<div class="container-xl px-3 px-md-6 my-6">
<h2 class="font-mktg h1 mb-2">Guides</h2>
<div class="d-lg-flex gutter-lg flex-items-stretch">
{% assign guideCards = featuredLinks.guideCards %}
{% render "guide-card" for guideCards as guide %}
</div>
<a href="{{ currentPath }}/guides" class="btn btn-outline float-right">Explore guides {% octicon "arrow-right" %}</a>
</div>
</div>
{% endif %}
<div class="container-xl px-3 px-md-6 mt-6">
{% include all-articles %}
</div>
<div class="border-top">
{% include small-footer %}
</div>
</main>
</body>
</html>