mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
Merge 3dbfa50613 into b0ea250339
This commit is contained in:
monocanas
GitHub
commit
2acfbfe1e4
|
|
@ -0,0 +1,306 @@
|
|||
@import 'variables';
|
||||
@import 'mixin';
|
||||
|
||||
$selected-div: 1, 3, 6, 8, 9, 11;
|
||||
|
||||
.section-1 {
|
||||
position: relative;
|
||||
padding-top: 138px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
.title-div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 12px auto 0;
|
||||
letter-spacing: -0.04px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
|
||||
&>div {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section-3 {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
background-color: #F5F8F9;
|
||||
|
||||
|
||||
.contributor-list {
|
||||
margin-top: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media only screen and (max-width:$mobile-max-width) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contributor-list-item {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #E3E9EF;
|
||||
width: 373px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 16px 0px #072A4429;
|
||||
|
||||
span {
|
||||
color: #00A971;
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-link {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&>div {
|
||||
padding-left: 24px;
|
||||
|
||||
padding-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: Roboto;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-4 {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
|
||||
&>div {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-family: Roboto;
|
||||
color: #919AA3;
|
||||
padding: 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: calc(213px * 4 + 60px);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.member-grid.scroll {
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
/* Internet Explorer 10+ */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
|
||||
}
|
||||
|
||||
.member-grid.noscroll {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.member-grid::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.member-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 216px);
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// height: calc(216px * 4 + 60px);
|
||||
|
||||
// @media only screen and (max-width:$mobile-max-width) {
|
||||
// grid-template-columns: repeat(2, 216px);
|
||||
// }
|
||||
|
||||
|
||||
@media only screen and (max-width:$mobile-max-width) {
|
||||
grid-template-columns: repeat(1, 200px);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
// treat a as block elem
|
||||
.member-profile-link {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.member-grid-item {
|
||||
position: relative;
|
||||
// width: 216px;
|
||||
height: 212px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--borderColor-subtler, #E3E9EF);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.member-info-ctn {
|
||||
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 168px;
|
||||
height: 164px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.member-name-ctn {
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-family: Roboto;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.member-nickname {
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #8F94A1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
|
||||
// hover bg
|
||||
&:hover {
|
||||
|
||||
box-shadow: 0px 4px 16px 0px #072A4429;
|
||||
|
||||
.member-name {
|
||||
color: #00A971;
|
||||
}
|
||||
|
||||
.member-bg-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.member-bg-hover {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
grid-template-columns: repeat(4, 63px);
|
||||
grid-template-rows: 54px 54px 39px;
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
&>div {
|
||||
border-top: 1px solid #E3E9EF;
|
||||
border-right: 1px solid #E3E9EF;
|
||||
}
|
||||
|
||||
@each $d in $selected-div {
|
||||
&>div:nth-child(#{$d}) {
|
||||
@if $d < 5 {
|
||||
background: linear-gradient(172.48deg, rgba(0, 169, 113, 0.06) 35.12%, rgba(0, 169, 113, 0.06) 94.04%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@else if $d < 9 {
|
||||
background: linear-gradient(172.48deg, rgba(0, 169, 113, 0.06) 35.12%, rgba(0, 169, 113, 0.06) 94.04%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@else {
|
||||
background: linear-gradient(172.48deg, rgba(0, 169, 113, 0.06) 35.12%, rgba(0, 169, 113, 0) 94.04%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -196,35 +196,41 @@ name = "Community"
|
|||
URL = "contribution/"
|
||||
weight = 1
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "Team"
|
||||
URL = "team/"
|
||||
weight = 2
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "Case Studies"
|
||||
URL = "case/"
|
||||
weight = 2
|
||||
weight = 3
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "Partner"
|
||||
URL = "partner/"
|
||||
weight = 3
|
||||
weight = 4
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "News"
|
||||
URL = "news/"
|
||||
weight = 4
|
||||
weight = 5
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "RoadMap"
|
||||
URL = "https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md"
|
||||
weight = 5
|
||||
weight = 6
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
parent = "Community"
|
||||
name = "OSPP 2024"
|
||||
URL = "https://github.com/kubesphere/community/tree/master/sig-advocacy-and-outreach/ospp-2024"
|
||||
weight = 6
|
||||
weight = 7
|
||||
|
||||
|
||||
[languages.zh]
|
||||
|
|
@ -345,53 +351,59 @@ name = "开源社区"
|
|||
URL = "contribution/"
|
||||
weight = 1
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "团队"
|
||||
URL = "team/"
|
||||
weight = 2
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "社区活动"
|
||||
URL = "live/"
|
||||
weight = 2
|
||||
weight = 3
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "案例学习"
|
||||
URL = "case/"
|
||||
weight = 3
|
||||
weight = 4
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "合作伙伴"
|
||||
URL = "partner/"
|
||||
weight = 4
|
||||
weight = 5
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "用户委员会"
|
||||
URL = "user-group/"
|
||||
weight = 5
|
||||
weight = 6
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "动态"
|
||||
URL = "news/"
|
||||
weight = 6
|
||||
weight = 7
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "版本计划"
|
||||
URL = "https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md"
|
||||
weight = 7
|
||||
weight = 8
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "中国站"
|
||||
URL = "https://www.kubesphere.io/zh/"
|
||||
weight = 8
|
||||
weight = 9
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
parent = "开源社区"
|
||||
name = "开源之夏 2024"
|
||||
URL = "https://github.com/kubesphere/community/tree/master/sig-advocacy-and-outreach/ospp-2024"
|
||||
weight = 9
|
||||
weight = 10
|
||||
|
||||
[[languages.zh.menu.main]]
|
||||
weight = 6
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: "team"
|
||||
|
||||
css: "scss/team.scss"
|
||||
|
||||
section1:
|
||||
title: 'Team Members'
|
||||
content: 'We ❤️ Open Source.'
|
||||
topImage: "/images/team/team-top.jpg"
|
||||
|
||||
section2:
|
||||
title: 'KubeSphere Member'
|
||||
|
||||
section3:
|
||||
title: 'KubeSphere Contributor'
|
||||
description: "You can check out the list of all contributors to KubeSphere in Github Insight"
|
||||
icon: "/images/team/github.svg"
|
||||
contributors:
|
||||
- name: "kubesphere"
|
||||
link: "https://github.com/kubesphere/kubesphere/graphs/contributors"
|
||||
- name: "kubekey"
|
||||
link: "https://github.com/kubesphere/kubekey/graphs/contributors"
|
||||
- name: "console"
|
||||
link: "https://github.com/kubesphere/console/graphs/contributors"
|
||||
- name: "ks-installer"
|
||||
link: "https://github.com/kubesphere/ks-installer/graphs/contributors"
|
||||
- name: "kubeeye"
|
||||
link: "https://github.com/kubesphere/kubeeye/graphs/contributors"
|
||||
- name: "community"
|
||||
link: "https://github.com/kubesphere/community/graphs/contributors"
|
||||
|
||||
section4:
|
||||
title: "KubeSphere Ambassador"
|
||||
description: "Time : xx Month xx, 2023 - xx Month xx, 2024"
|
||||
ambassadors:
|
||||
- name: "Calvin Yu"
|
||||
nickname: "calvinyv"
|
||||
avater: "https://avatars.githubusercontent.com/u/28883416?v=4"
|
||||
link: "https://github.com/calvinyv/"
|
||||
- name: "fawei zhao"
|
||||
nickname: "faweizhao26"
|
||||
avater: "https://avatars.githubusercontent.com/u/78190874?v=4"
|
||||
link: "https://github.com/faweizhao26/"
|
||||
- name: "Halil Bugol"
|
||||
nickname: "halil-bugol"
|
||||
avater: "https://avatars.githubusercontent.com/u/60687576?v=4"
|
||||
link: "https://github.com/halil-bugol/"
|
||||
---
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: "team"
|
||||
|
||||
css: "scss/team.scss"
|
||||
|
||||
section1:
|
||||
title: '团队介绍'
|
||||
content: 'We ❤️ Open Source.'
|
||||
topImage: "/images/team/team-top.jpg"
|
||||
|
||||
section2:
|
||||
title: 'KubeSphere Member'
|
||||
|
||||
section3:
|
||||
title: 'KubeSphere Contributor'
|
||||
description: "你可以从 Github 的贡献记录中查看所有 KubeSphere 的贡献者列表"
|
||||
icon: "/images/team/github.svg"
|
||||
contributors:
|
||||
- name: "kubesphere"
|
||||
link: "https://github.com/kubesphere/kubesphere/graphs/contributors"
|
||||
- name: "kubekey"
|
||||
link: "https://github.com/kubesphere/kubekey/graphs/contributors"
|
||||
- name: "console"
|
||||
link: "https://github.com/kubesphere/console/graphs/contributors"
|
||||
- name: "ks-installer"
|
||||
link: "https://github.com/kubesphere/ks-installer/graphs/contributors"
|
||||
- name: "kubeeye"
|
||||
link: "https://github.com/kubesphere/kubeeye/graphs/contributors"
|
||||
- name: "community"
|
||||
link: "https://github.com/kubesphere/community/graphs/contributors"
|
||||
|
||||
section4:
|
||||
title: "KubeSphere Ambassador"
|
||||
description: "时间 : 2023 年 xx 月 xx 日-2024 年 xx 月 xx 日"
|
||||
ambassadors:
|
||||
- name: "Calvin Yu"
|
||||
nickname: "calvinyv"
|
||||
avater: "https://avatars.githubusercontent.com/u/28883416?v=4"
|
||||
link: "https://github.com/calvinyv/"
|
||||
- name: "fawei zhao"
|
||||
nickname: "faweizhao26"
|
||||
avater: "https://avatars.githubusercontent.com/u/78190874?v=4"
|
||||
link: "https://github.com/faweizhao26/"
|
||||
- name: "Halil Bugol"
|
||||
nickname: "halil-bugol"
|
||||
avater: "https://avatars.githubusercontent.com/u/60687576?v=4"
|
||||
link: "https://github.com/halil-bugol/"
|
||||
---
|
||||
|
|
@ -53,4 +53,5 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
{{- partial "buildTeamResource" . -}}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
{{- if .IsHome -}}
|
||||
{{ $url := "https://api.github.com/orgs/kubesphere/members?per_page=100&page=2" }}
|
||||
{{ $token := getenv "HUGO_GITHUB_TOKEN" }}
|
||||
|
||||
{{ $memberList := slice }}
|
||||
|
||||
{{ $opts := dict
|
||||
"method" "get"
|
||||
"headers" (dict
|
||||
"Authorization" (printf "Bearer %s" $token)
|
||||
"Accept" "application/vnd.github+json"
|
||||
"X-GitHub-Api-Version" "2022-11-28")
|
||||
}}
|
||||
|
||||
{{ $limit := 10}}
|
||||
|
||||
{{ $error := false }}
|
||||
|
||||
<!-- todo maybe we can remove errorf and use default json data -->
|
||||
{{ range seq 1 $limit }}
|
||||
{{ $get_page_url := (printf "https://api.github.com/orgs/kubesphere/members?per_page=100&page=%d" .)}}
|
||||
|
||||
{{ with resources.GetRemote $get_page_url $opts}}
|
||||
{{ with .Err }}
|
||||
{{/* {{ errorf "%s" . }} */}}
|
||||
{{ warnf "%s" . }}
|
||||
{{ $error = true }}
|
||||
{{ break }}
|
||||
|
||||
{{ else }}
|
||||
<!-- get member list -->
|
||||
{{ with .}}
|
||||
{{ $member_page_data := . | transform.Unmarshal }}
|
||||
{{ $l := len $member_page_data}}
|
||||
{{ if lt $l 1}}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
|
||||
<!-- range get member info -->
|
||||
{{ range $member_page_data }}
|
||||
{{ $member_url := .url}}
|
||||
{{ with resources.GetRemote $member_url $opts }}
|
||||
{{ with .Err }}
|
||||
{{/* {{ errorf "%s" . }} */}}
|
||||
{{ warnf "%s" . }}
|
||||
{{ $error = true }}
|
||||
{{ break }}
|
||||
{{ else }}
|
||||
{{ with .}}
|
||||
{{ $member_data := . | transform.Unmarshal }}
|
||||
<!-- append member list -->
|
||||
{{ $name := "" }}
|
||||
{{ if $member_data.name }}
|
||||
{{ $name = $member_data.name }}
|
||||
{{ else }}
|
||||
{{ $name = $member_data.login }}
|
||||
{{ end }}
|
||||
{{ $member_info := dict
|
||||
"name" $name
|
||||
"nickname" $member_data.login
|
||||
"avater" $member_data.avatar_url
|
||||
"link" $member_data.html_url
|
||||
}}
|
||||
{{ $memberList = $memberList | append $member_info }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{/* {{ errorf "Unable to get remote resource %q" $url }} */}}
|
||||
{{ warnf "%s" . }}
|
||||
{{ $error = true }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- range get member info -->
|
||||
|
||||
{{ end }}
|
||||
<!-- get member list -->
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{/* {{ errorf "Unable to get remote resource %q" $url }} */}}
|
||||
{{ warnf "%s" . }}
|
||||
{{ $error = true }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if not $error}}
|
||||
{{ $json := jsonify $memberList}}
|
||||
{{ $r := resources.FromString "/json/members.json" $json }}
|
||||
{{ $r.Publish }}
|
||||
{{ else }}
|
||||
{{ warnf "get from github api error,try to use default member data"}}
|
||||
|
||||
{{ if not (fileExists "static/json/default_members.json") }}
|
||||
{{ errorf "get memeber data error" }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{{ if eq . ""}}
|
||||
<div class="member-grid-item placeholder">
|
||||
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="member-grid-item">
|
||||
<a class="member-profile-link" href="{{ .link }}" target="_blank">
|
||||
<div class="member-info-ctn">
|
||||
<div class="member-avater-ctn">
|
||||
<img src="{{ .avater }}" alt="{{ .nickname }}">
|
||||
</div>
|
||||
<div class="member-name-ctn">
|
||||
<span class="member-name"> {{ .name }}</span>
|
||||
<span class="member-nickname">@{{ .nickname }} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-bg-hover">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ $memberList := "" }}
|
||||
|
||||
{{ if fileExists "public/json/members.json"}}
|
||||
{{ $memberList = getJSON "public/json/members.json"}}
|
||||
|
||||
{{ if eq (len $memberList) 0 }}
|
||||
{{ if fileExists "public/json/default_members.json"}}
|
||||
{{ $memberList = getJSON "public/json/default_members.json"}}
|
||||
{{ else }}
|
||||
{{ errorf "cannot get member data" }}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ if fileExists "public/json/default_members.json"}}
|
||||
{{ $memberList = getJSON "public/json/default_members.json"}}
|
||||
{{ else }}
|
||||
{{ errorf "cannot get member data" }}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
|
||||
{{/* todo !!! currently only support 5 colmuns */}}
|
||||
{{ $l := len $memberList }}
|
||||
{{ $addNum := sub 5 (mod $l 5) }}
|
||||
|
||||
{{ with .Params.section1 }}
|
||||
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
|
||||
<div class="title-div common-layout">
|
||||
<h1 class="title-center-h1">{{ .title }}</h1>
|
||||
<p class="common-p">{{ .content }}</p>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.section2 }}
|
||||
<section class="section-2">
|
||||
<div class="common-layout">
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<div class="scroll-container">
|
||||
<div class="member-grid scroll">
|
||||
{{ range $memberList }}
|
||||
{{ partial "memberList" .}}
|
||||
{{ end }}
|
||||
{{ range seq $addNum}}
|
||||
{{ partial "memberList" ""}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<script>
|
||||
|
||||
function loaded() {
|
||||
|
||||
const mediaQuery = window.matchMedia("(max-width: 768px)")
|
||||
|
||||
const scrollContext = document.querySelector(".member-grid.scroll");
|
||||
if (!scrollContext) return;
|
||||
if (mediaQuery.matches) {
|
||||
|
||||
const children = Array.from(scrollContext.children);
|
||||
children.forEach(child => {
|
||||
if (child.classList.contains('placeholder')) {
|
||||
scrollContext.removeChild(child);
|
||||
}
|
||||
});
|
||||
|
||||
const l = scrollContext.children.length;
|
||||
if (l <= 4) return;
|
||||
|
||||
for (let i = 0; i < 4; ++i) {
|
||||
const child = scrollContext.children[i].cloneNode(true);
|
||||
scrollContext.append(child);
|
||||
}
|
||||
} else {
|
||||
const l = scrollContext.children.length;
|
||||
if (l <= 20) return;
|
||||
|
||||
for (let i = 0; i < 20; ++i) {
|
||||
const child = scrollContext.children[i].cloneNode(true);
|
||||
scrollContext.append(child);
|
||||
}
|
||||
}
|
||||
|
||||
let disableScroll = false;
|
||||
const dpr = window.devicePixelRatio;
|
||||
const step = 1 / dpr;
|
||||
const placeholderHeight = scrollContext.children[0].offsetHeight * 4 + 60;
|
||||
const scrollHeight = scrollContext.scrollHeight;
|
||||
const clientHeight = scrollContext.clientHeight;
|
||||
|
||||
function setScrollPos(pos) {
|
||||
scrollContext.scrollTop = pos;
|
||||
}
|
||||
|
||||
function getScrollPos() {
|
||||
return scrollContext.scrollTop;
|
||||
}
|
||||
|
||||
scrollContext.addEventListener('scroll', function () {
|
||||
window.requestAnimationFrame(scrollUpdate);
|
||||
}, false);
|
||||
|
||||
|
||||
setScrollPos(step);
|
||||
|
||||
{{/* console.log(window.devicePixelRatio);
|
||||
console.log("client:", clientHeight, " scrollHeight", scrollHeight, "placeholder:", placeholderHeight); */}}
|
||||
|
||||
function scrollUpdate() {
|
||||
let curHeight = getScrollPos();
|
||||
if (!disableScroll) {
|
||||
if (curHeight + placeholderHeight + 1 >= scrollHeight) {
|
||||
setScrollPos(step);
|
||||
disableScroll = true;
|
||||
} else if (curHeight <= 0) {
|
||||
setScrollPos(scrollHeight - placeholderHeight);
|
||||
disableScroll = true;
|
||||
}
|
||||
}
|
||||
if (disableScroll) {
|
||||
window.setTimeout(function () {
|
||||
disableScroll = false;
|
||||
}, 40);
|
||||
}
|
||||
}
|
||||
|
||||
var fps, fpsInterval, startTime, now, then, elapsed;
|
||||
function autoScroll() {
|
||||
requestAnimationFrame(autoScroll);
|
||||
now = Date.now();
|
||||
elapsed = now - then;
|
||||
if (elapsed > fpsInterval) {
|
||||
then = now - (elapsed % fpsInterval);
|
||||
// todo !!! here we need change scroll step when screen resize
|
||||
// still don't know the propriate step
|
||||
setScrollPos(getScrollPos() + dpr + step + 1);
|
||||
scrollUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
function startAnimating(fps) {
|
||||
fpsInterval = 1000 / fps;
|
||||
then = Date.now();
|
||||
startTime = then;
|
||||
autoScroll();
|
||||
}
|
||||
|
||||
startAnimating(30);
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", loaded)
|
||||
|
||||
</script>
|
||||
|
||||
{{ with .Params.section3 }}
|
||||
<section class="section-3">
|
||||
<div class="common-layout">
|
||||
<div class="section-title">
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<div class="section-description">
|
||||
{{ .description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contributor-list">
|
||||
{{ range .contributors }}
|
||||
|
||||
<div class="contributor-list-item">
|
||||
<a class="contributor-link" href="{{ .link }}" target="_blank">
|
||||
<div>
|
||||
<img src="{{ $.Params.section3.icon }}">
|
||||
</div>
|
||||
<span>kubesphere/{{ .name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.section4 }}
|
||||
<section class="section-4">
|
||||
<div class="common-layout">
|
||||
<div class="section-title">
|
||||
<h2 class="title-black-h2">{{ .title }}</h2>
|
||||
<div class="section-description">
|
||||
{{ .description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-wrapper">
|
||||
<div class="member-grid noscroll">
|
||||
{{ range .ambassadors }}
|
||||
{{ partial "memberList" .}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{/* <section class="section-5">
|
||||
<div class="common-layout">
|
||||
</div>
|
||||
</section> */}}
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3351_248)">
|
||||
<path d="M12.9999 0.75C6.64594 0.75 1.49994 5.896 1.49994 12.25C1.49994 17.339 4.79194 21.637 9.36294 23.16C9.93794 23.261 10.1529 22.916 10.1529 22.614C10.1529 22.341 10.1389 21.436 10.1389 20.472C7.24994 21.004 6.50294 19.768 6.27294 19.122C6.14294 18.791 5.58294 17.77 5.09294 17.497C4.69094 17.281 4.11594 16.749 5.07894 16.735C5.98494 16.721 6.63194 17.569 6.84794 17.914C7.88294 19.654 9.53594 19.164 10.1969 18.862C10.2969 18.115 10.5989 17.612 10.9299 17.324C8.37094 17.037 5.69794 16.045 5.69794 11.646C5.69794 10.396 6.14294 9.361 6.87594 8.556C6.76094 8.268 6.35894 7.089 6.99094 5.508C6.99094 5.508 7.95394 5.206 10.1539 6.687C11.0739 6.428 12.0509 6.299 13.0289 6.299C14.0059 6.299 14.9839 6.429 15.9039 6.687C18.1039 5.192 19.0659 5.508 19.0659 5.508C19.6989 7.089 19.2959 8.268 19.1809 8.556C19.9139 9.361 20.3599 10.381 20.3599 11.646C20.3599 16.059 17.6719 17.036 15.1129 17.324C15.5299 17.684 15.8889 18.374 15.8889 19.452C15.8889 20.99 15.8749 22.226 15.8749 22.614C15.8749 22.916 16.0909 23.276 16.6649 23.161C21.2089 21.637 24.4999 17.324 24.4999 12.25C24.4999 5.896 19.3539 0.75 12.9999 0.75Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3351_248">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue