generated from layer5io/layer5-repo-template
-
Notifications
You must be signed in to change notification settings - Fork 86
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
carousel #435
Draft
vishalvivekm
wants to merge
1
commit into
layer5io:master
Choose a base branch
from
vishalvivekm:carousel
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
carousel #435
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| title: "Design Reviews: Adding Comments" | ||
| description: > | ||
| Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews. | ||
| video_id: "bb6J--aApk8" | ||
| videoType: youtube # or "local" | ||
| muted: true # optional | ||
| autoplay: true # optional | ||
| loop: true #optional | ||
| categories: [Designer] | ||
| formats: [video] | ||
| tags: [review, collaboration, comments] | ||
| --- | ||
|
|
||
| {{< youtube bb6J--aApk8 >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| title: "Design Reviews: Adding Comments" | ||
| description: > | ||
| Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews. | ||
| video_id: "bb6J--aApk8" | ||
| videoType: youtube # or "local" | ||
| muted: true # optional | ||
| autoplay: true # optional | ||
| loop: true #optional | ||
| categories: [Designer] | ||
| formats: [video] | ||
| tags: [review, collaboration, comments] | ||
| --- | ||
|
|
||
| {{< youtube bb6J--aApk8 >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| title: "Design Reviews: Adding Comments" | ||
| description: > | ||
| Add comments to your designs in Kanvas's Designer Mode to enhance collaboration and streamline design reviews. | ||
| video_id: "bb6J--aApk8" | ||
| videoType: youtube # or "local" | ||
| muted: true # optional | ||
| autoplay: true # optional | ||
| loop: true #optional | ||
| categories: [Designer] | ||
| formats: [video] | ||
| tags: [review, collaboration, comments] | ||
| --- | ||
|
|
||
| {{< youtube bb6J--aApk8 >}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,97 @@ | ||
| <div class="section-index"> | ||
| {{ $page := .Page -}} | ||
|
|
||
| {{ $pages := (where .Site.Pages ".Params.video_id" "!=" nil) -}} | ||
|
|
||
| {{ if or $page.Params.no_list (eq (len $pages) 0) -}} | ||
|
|
||
| <hr class="panel-line"> | ||
| {{ range $pages -}} | ||
| {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) -}} | ||
| <div class="entry"> | ||
| <h5> | ||
| <a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{- .Title -}}</a> | ||
| </h5> | ||
| <p>{{ .Description | markdownify -}}</p> | ||
| {{ $currentPage := .Page }} | ||
| {{ $currentTags := .Params.tags }} | ||
| {{ $currentCategories := .Params.categories }} | ||
|
|
||
| {{ $videoPages := (where .Site.Pages ".Params.video_id" "!=" nil) }} | ||
|
|
||
| {{ $matchingVideos := slice }} | ||
|
|
||
| {{ range $videoPages }} | ||
| {{ $page := . }} | ||
| {{ $matchScore := 0 }} | ||
|
|
||
| {{ range $currentTags }} | ||
| {{ if in $page.Params.tags . }} | ||
| {{ $matchScore = add $matchScore 1 }} | ||
| {{ end }} | ||
| {{ end }} | ||
|
|
||
| {{ range $currentCategories }} | ||
| {{ if in $page.Params.categories . }} | ||
| {{ $matchScore = add $matchScore 2 }} | ||
| {{ end }} | ||
| {{ end }} | ||
|
|
||
| {{ if gt $matchScore 0 }} | ||
| {{ $matchingVideos = $matchingVideos | append (dict "page" $page "score" $matchScore) }} | ||
| {{ end }} | ||
|
|
||
| {{ end }} | ||
|
|
||
| {{ $sortedVideos := sort $matchingVideos "score" "desc" }} | ||
|
|
||
|
|
||
| {{ if gt (len $sortedVideos) 0 }} | ||
| <div class="related-videos"> | ||
| <h2>Related Videos</h2> | ||
| <div id="videoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000"> | ||
| <div class="carousel-indicators"> | ||
| {{ range $index, $_ := $sortedVideos }} | ||
| <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="{{ $index }}" {{ if eq $index 0 | ||
| }}class="active" aria-current="true" {{ end }} aria-label="Slide {{ add $index 1 }}"> | ||
| </button> | ||
| {{ end }} | ||
| </div> | ||
|
|
||
| <div class="carousel-inner"> | ||
| {{ range $index, $video := $sortedVideos }} | ||
| <div class="carousel-item {{ if eq $index 0 }}active{{ end }}"> | ||
| <div class="row justify-content-center"> | ||
| <div class="col-12 col-md-8 col-lg-6"> | ||
| <a href="{{ .page.RelPermalink }}" class="video-link text-decoration-none"> | ||
| <div class="video card h-100 bg-dark text-white border border-secondary shadow-lg p-1"> | ||
| <div class="video-container position-relative" | ||
| style="height: max-content; overflow: hidden;"> | ||
| <div class="ratio ratio-16x9 h-100"> | ||
| <img src="https://i.ytimg.com/vi/{{ .page.Params.video_id }}/maxresdefault.jpg" | ||
| alt="{{ .page.Title }}" class="img-fluid" /> | ||
| </div> | ||
| <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-overlay"> | ||
| <div | ||
| class="video-btn-wrapper position-absolute top-50 start-50 translate-middle"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 60"> | ||
| <path class="play-icon-path" | ||
| d="M39.5298 29.028L21.7045 39.395C21.6471 39.4284 21.5893 39.4603 21.5311 39.4908C20.9134 39.8161 20.2107 40 19.4654 40C16.9992 40 15 37.9861 15 35.5018V14.5102C15 13.6377 15.2466 12.8233 15.6734 12.1337C16.9369 10.0722 19.6075 9.38388 21.7044 10.6034L39.5291 20.97C40.2869 21.3504 40.9459 21.9517 41.401 22.7457C41.811 23.4611 42.0038 24.2428 41.9999 25.0133C41.999 25.7747 41.806 26.5461 41.4009 27.2527C40.9461 28.0464 40.2873 28.6476 39.5298 29.028Z" /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="card-body"> | ||
| <h4 class="video-title text-white mb-0">{{ .page.Title }}</h4> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
| </div> | ||
| {{ end -}} | ||
| {{ end -}} | ||
|
|
||
| <button class="carousel-control-prev" type="button" data-bs-target="#videoCarousel" data-bs-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Previous</span> | ||
| </button> | ||
| <button class="carousel-control-next" type="button" data-bs-target="#videoCarousel" data-bs-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Next</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| {{ end }} | ||
| </div> | ||
|
|
||
|
|
||
| <style> | ||
|
|
||
| </style> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Between
srcandvideo_id, while both are valid frontmatter details, one can be considered optional, so that as the other one is provided. A video page must have one of the two; can use either one of the two.The only time that video_id or src is necessary is when you want to embed a video on a docs page inline with the reading. In that case, we can use a shortcode to display the video inline, right? For YouTube, it's the current shortcode and for video on the file system that would be a different shortcode? (
{{< youtubeand{{local-video).Otherwise, the src field and video_id field are unnecessary considering that videos are generally to be displayed based on their assigned categories and tags.