diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index e358059a79..7933271624 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -522,38 +522,42 @@ table tfoot { margin-bottom: 0; } } - -.td-content .code-container { - .code-copy-button { - position: absolute; - top: 0; - right: 0; - background-color: rgba(#2b1a5c, 0.8); - padding: 4px 10px; - color: #fff !important; - border: none; - border-radius: 3px; - cursor: pointer; - display: flex; - align-items: center; - font-size: 14px; - opacity: 0; - &:hover, - &:active { - transition: 0.3s ease; - background-color: rgba(#2b1a5c, 1); - } - &:active { - transform: none; - } - i { - margin-right: 5px; - } - } - &:hover { +.td-content, body{ + .code-container { + position: relative; .code-copy-button { - transition: 0.3s ease; - opacity: 1; + position: absolute; + top: 0; + right: 0; + background-color: rgba(#2b1a5c, 0.8); + padding: 4px 10px; + color: #fff !important; + border: none; + border-radius: 3px; + cursor: pointer; + display: flex; + align-items: center; + font-size: 14px; + opacity: 0; + &:hover, + &:active { + transition: 0.3s ease; + background-color: rgba(#2b1a5c, 1); + } + &:active { + transform: none; + } + i { + margin-right: 5px; + } + } + &:hover { + .code-copy-button { + transition: 0.3s ease; + opacity: 1; + } } } } + +@import "modules/academy-styles.scss"; diff --git a/assets/scss/modules/_academy-styles.scss b/assets/scss/modules/_academy-styles.scss new file mode 100644 index 0000000000..909e3c7fdc --- /dev/null +++ b/assets/scss/modules/_academy-styles.scss @@ -0,0 +1,235 @@ +.page-content { + h1 { + font-weight: 700; + margin-bottom: 0.5rem; + } + .lead { + margin-bottom: 2rem; + } +} +.hover-link { + color: inherit; + text-decoration: none !important; + transition: 0.3s ease-in; + font-weight: inherit; + &:hover { + color: $dark-purple; + } +} +.course-item { + padding: 59px 36px; + border-radius: 12px; + border: 1px solid #1d2d3520; + &:not(:last-child) { + margin-bottom: 36px; + } + // resetting styles START + p, + h2, + ul, + ul li { + margin: 0; + } + // resetting styles END + .content { + padding-right: 24px; + } + .inner { + h2 { + font-weight: 700; + } + p { + margin-top: 11px; + } + } + img { + border-radius: 6px; + } + .main-cta{ + padding: 5px 17px 4px 17px; + background: #4D29B4; + color: $white; + margin-top: 20px; + span{ + &:first-child{ + margin-right: 8px; + } + } + i{ + font-size: 16px; + } + } +} +.lessons-list-container { + margin-top: 25px; + margin: 9px 0; + small { + font-size: 12px; + } + .lesson-list-item { + border-top: 1px solid $gray-600; + padding: 4px 0; + &:last-child { + border-bottom: 1px solid $gray-600; + } + a { + font-weight: 600; + } + } +} + +.lessons-list { + .lessons-item { + &:not(:last-child) { + margin-bottom: 36px; + } + } +} + +.lessons-item { + .content { + padding-top: 5px; + padding-left: 24px; + // resetting styles START + p, + h2, + ul, + ul li { + margin: 0; + } + // resetting styles END + h2 { + font-size: 20px; + } + .content-text { + margin-top: 14px; + } + .btn-with-icon { + margin-top: 17px; + } + } + img { + border-radius: 6px; + } + &.compact{ + .content{ + .up-next-text{ + margin-bottom: 5px; + display: block; + color: $dark-purple; + } + .content-text{ + margin-top: 7px; + } + .btn-with-icon { + margin-top: 11px; + text-decoration: none; + } + } + } +} + +.btn-with-icon { + display: inline-flex; + align-items: center; + border: 1px solid rgba($black, 0.13); + border-radius: 6px; + text-transform: uppercase; + font-weight: 700; + font-size: 14px; + color: $body-color; + padding: 5px 18px 4px 18px; + transition: .3s ease; + &:hover{ + background: $dark-purple; + color: $white; + } + span:first-child { + margin-right: 6px; + } +} + +.img-light-shadow{ + box-shadow: 0px 0px 15px #dfdfdf; +} + +.video-thumbnail{ + position: relative; + border-radius: 5px; + width: 100%; + cursor: pointer; + iframe{ + aspect-ratio: 16/9; + } + .play-btn{ + display: flex; + align-items: center; + justify-content: center; + border-radius: 1000px; + border: 2px solid $white; + height: 60px; + width: 60px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + i { + font-size: 25px; + color: $white; + opacity: 0.7; + transition: opacity 0.3s; + position: relative; + left: 1px; + } + &:hover{ + i{ + opacity: 1; + } + } + } + + &.played{ + img{ + display: none; + } + .play-btn{ + display: none; + } + } +} + +@media (max-width: 992px) { + .course-item { + padding: 36px; + .content { + padding: 0; + } + } + +} + +@media (max-width: 768px) { + .course-item { + padding: 36px 18px; + .inner { + h2 { + font-size: 22px; + } + } + .main-cta{ + margin-top: 0; + } + } + .lessons-item{ + .content{ + padding: 0; + padding-top: 18px; + .content-text { + margin-top: 10px; + } + .btn-with-icon { + margin-top: 10px; + } + } + } +} diff --git a/content/en/academy/_index.md b/content/en/academy/_index.md new file mode 100644 index 0000000000..150382fb5c --- /dev/null +++ b/content/en/academy/_index.md @@ -0,0 +1,15 @@ +--- +title: "LocalStack Academy" +linkTitle: "LocalStack Academy" +weight: 30 +description: > + Welcome to our comprehensive LocalStack e-course! Whether you're a seasoned developer or just starting + your cloud journey, this course is tailored to equip you with the essential knowledge to harness the power of LocalStack. + Dive into the world of LocalStack, where you'll not only expedite your development process but also enhance your efficiency + in building and testing cloud applications. +cascade: + type: docs +slug: academy +dev_hub: true +type: academy +--- \ No newline at end of file diff --git a/content/en/academy/localstack-101/_index.md b/content/en/academy/localstack-101/_index.md new file mode 100644 index 0000000000..f8f9fd4161 --- /dev/null +++ b/content/en/academy/localstack-101/_index.md @@ -0,0 +1,11 @@ +--- +title: "LocalStack 101" +linkTitle: "LocalStack 101" +weight: 6 +description: > + This LocalStack course will walk you through everything you need to know to get started using LocalStack + and on your way to becoming a more efficient and productive Cloud developer. Have fun exploring! +type: academy +thumbnail: localstack101.png +layout: single +--- \ No newline at end of file diff --git a/content/en/academy/localstack-101/lesson-1/index.md b/content/en/academy/localstack-101/lesson-1/index.md new file mode 100644 index 0000000000..31797b1f3b --- /dev/null +++ b/content/en/academy/localstack-101/lesson-1/index.md @@ -0,0 +1,14 @@ +--- +title: "Course Overview" +linkTitle: "Course Overview" +weight: 1 +description: > + In this first video, we will explore the diverse sections covered in this e-course, providing + an overview of the exciting topics to be discussed. Discover the course's main themes and gain insight + into specific sections through a concise overview, allowing you to easily navigate to your preferred content. +length: 01:47 +leadimage: overview.png +videoUrl: https://www.youtube.com/embed/VLL-BI1AWcc +type: lessons +url: /academy/localstack-101/course-overview/ +--- diff --git a/content/en/academy/localstack-101/lesson-1/overview.png b/content/en/academy/localstack-101/lesson-1/overview.png new file mode 100644 index 0000000000..b00c6fe342 Binary files /dev/null and b/content/en/academy/localstack-101/lesson-1/overview.png differ diff --git a/content/en/academy/localstack-101/lesson-2/index.md b/content/en/academy/localstack-101/lesson-2/index.md new file mode 100644 index 0000000000..ea93f24cd7 --- /dev/null +++ b/content/en/academy/localstack-101/lesson-2/index.md @@ -0,0 +1,37 @@ +--- +title: "What is LocalStack" +linkTitle: "What is LocalStack" +weight: 2 +description: > + Discover the power of LocalStack, a game-changing platform enabling Cloud Development Teams to test and + develop Cloud applications locally. Replacing AWS in most use cases, LocalStack ships as a + Docker image, and supports APIs for over 70 AWS services, along with advanced collaboration features and CI integrations. +length: 01:58 +leadimage: what-is-ls.png +videoUrl: https://www.youtube.com/embed/B2EML5L3-tw +type: lessons +url: "/academy/localstack-101/what-is-localstack/" +--- + +In this lesson, we'll talk about LocalStack: + +- The revolutionary platform that brings cloud testing to your local machine, simplifying the development process. +- A drop-in replacement for AWS, ships as a user-friendly Docker image, ensuring effortless installation and setup. +- Supports over 70 AWS services and capable of a diverse range of functionalities, including compute (Lambda, ECS, EKS), various database (DynamoDB, RDS, DocumentDB), and messaging services (SQS, Kinesis, MSK). +- Tackles sophisticated and exotic APIs (QLDB, Athena, Glue) and helps enhance your skill set. +- Contains advanced collaboration features and seamless CI integrations that foster team productivity. +- Our mission is to empower developers with control over their environments, eliminating time-consuming cloud dev and test loops. +- You can focus on developing exceptional products to solve real-world challenges with LocalStack as your game-changing companion. + +Embrace the future of cloud development and have fun exploring! + +Further reading: + +- [An overview of LocalStack](https://localstack.cloud/) +- [LocalStack Documentation](https://docs.localstack.cloud/overview) +- [LocalStack Service Coverage](https://docs.localstack.cloud/user-guide/aws/feature-coverage/) +- [Learning Resources for Everything AWS](https://aws.amazon.com/developer/learning/) +- [Documentation for AWS Services](https://docs.aws.amazon.com/) + + + diff --git a/content/en/academy/localstack-101/lesson-2/what-is-ls.png b/content/en/academy/localstack-101/lesson-2/what-is-ls.png new file mode 100644 index 0000000000..348a482641 Binary files /dev/null and b/content/en/academy/localstack-101/lesson-2/what-is-ls.png differ diff --git a/content/en/academy/localstack-101/lesson-3/index.md b/content/en/academy/localstack-101/lesson-3/index.md new file mode 100644 index 0000000000..3af0c3da0c --- /dev/null +++ b/content/en/academy/localstack-101/lesson-3/index.md @@ -0,0 +1,45 @@ +--- +title: "Why LocalStack" +linkTitle: "Why LocalStack" +weight: 3 +description: > + LocalStack is a game-changing platform for cloud developers, offering enhanced productivity, cost savings, and simplified maintenance. + With faster deployment and reduced dependency on infrastructure teams, developers can unleash their full + potential and streamline cloud workflows. +length: 03:39 +leadimage: why-ls.png +videoUrl: https://www.youtube.com/embed/EDGIBpUpYWU +type: lessons +url: "/academy/localstack-101/why-localstack/" +--- + +Let's imagine this scenario: Alice, a software developer, takes on the task of creating a serverless +Web application on AWS Cloud. However, she faces slow and tedious development due to cloud dependencies (DBs, VMs, MQs, etc.). +Every local change needs to be packaged and uploaded to the cloud for testing. +The solution for her trouble is LocalStack — a revolutionary platform that brings cloud resources to her +local machine, enabling efficient development and testing. + +LocalStack is the ultimate platform for cloud developers, offering a wide array of benefits to enhance productivity, reduce costs, and simplify maintenance. +This comprehensive course will equip you with the knowledge and skills to harness LocalStack's power and revolutionize your cloud development workflow. + +Key Takeaways: + +- Developer Productivity: +Witness significant time savings as LocalStack eliminates deployment bottlenecks. +Learn from real-world examples, where developers can save hours in a day by deploying changes faster. +Experience LocalStack's incredible performance, as benchmarked against managed streams for Kafka, delivering up to 60x faster. +Say goodbye to dependencies on infrastructure teams for resource access. +- Cost Efficiency: +Discover how LocalStack cuts down maintenance expenses by streamlining multiple environments (staging, development, testing). +- Simplified Maintenance: +Embrace a hassle-free cloud development experience as DevOps teams experience less overhead managing cloud infrastructure and services for developers. +Unleash your cloud development potential with LocalStack and join our course to become a cloud development master. + +Further reading: + +- [The Importance of End-to-End Testing](https://circleci.com/blog/what-is-end-to-end-testing/#c-consent-modal) +- [Testing Serverless Applications](https://aws.amazon.com/blogs/compute/getting-started-with-testing-serverless-applications/) +- [How Understanding Billing is Complicated and Risky](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-what-is.html) +- [LocalStack in CI](https://docs.localstack.cloud/user-guide/ci/) +- [Third Party Integrations](https://docs.localstack.cloud/user-guide/integrations/) + diff --git a/content/en/academy/localstack-101/lesson-3/why-ls.png b/content/en/academy/localstack-101/lesson-3/why-ls.png new file mode 100644 index 0000000000..a52b496687 Binary files /dev/null and b/content/en/academy/localstack-101/lesson-3/why-ls.png differ diff --git a/content/en/academy/localstack-101/lesson-4/getting-started.png b/content/en/academy/localstack-101/lesson-4/getting-started.png new file mode 100644 index 0000000000..6552aa1ff3 Binary files /dev/null and b/content/en/academy/localstack-101/lesson-4/getting-started.png differ diff --git a/content/en/academy/localstack-101/lesson-4/index.md b/content/en/academy/localstack-101/lesson-4/index.md new file mode 100644 index 0000000000..ccd1beb1bb --- /dev/null +++ b/content/en/academy/localstack-101/lesson-4/index.md @@ -0,0 +1,38 @@ +--- +title: "Getting started" +linkTitle: "Getting started" +weight: 4 +description: > + Discover multiple ways to dive into LocalStack's world of cloud development. Learn the easiest + method, using the LocalStack CLI, or alternatively, you can pull the Docker image, run it or include it in + Docker Compose, and start using AWS services. +length: 03:43 +leadimage: getting-started.png +videoUrl: https://www.youtube.com/embed/CzX4mfiS058 +type: lessons +url: "/academy/localstack-101/getting-started/" +--- + +There are several LocalStack installation methods to kickstart your cloud development journey. +Discover multiple pathways to initiate your LocalStack experience: + +You'll understand the diverse approaches to LocalStack installation: + +1. Quickstart with LocalStack CLI: +- Install `awscli-local` and `localstack` via `pip install`. On macOS you can use `brew install`. +- Start LocalStack using `localstack start`. +- Create a bucket and list buckets using `awslocal s3 mb s3://test` and `awslocal s3 ls`. +2. Alternative - Docker: Dive into an alternate installation method using Docker: pull the image and run it, it's that easy. +3. Docker Compose: Explore yet another approach via Docker Compose. + +Further reading: + +- [Getting Started with LocalStack](https://docs.localstack.cloud/overview/) +- [Better Understanding the Concepts of Image, Container, and Quickly Getting Started with Docker](https://docs.docker.com/get-started/) +- [What is AWS CLI](https://aws.amazon.com/cli/) +- [What is AWS CLI local](https://docs.localstack.cloud/user-guide/integrations/aws-cli/) +- [Pip Documentation](https://pypi.org/project/pip/) +- [Docker Compose Docs](https://docs.docker.com/get-started/08_using_compose/) + + + diff --git a/content/en/academy/localstack-101/lesson-5/index.md b/content/en/academy/localstack-101/lesson-5/index.md new file mode 100644 index 0000000000..68032b35cd --- /dev/null +++ b/content/en/academy/localstack-101/lesson-5/index.md @@ -0,0 +1,26 @@ +--- +title: "Web App and Resource Browser" +linkTitle: "Web App and Resource Browser" +weight: 5 +description: > + LocalStack Web Application lets you view and manage all aspects of the LocalStack platform. + In this guide you will learn about Resource Browser, that allows you to view, manage, and + deploy AWS resources locally while building & testing cloud applications locally. +length: 03:29 +leadimage: web-app.png +videoUrl: https://www.youtube.com/embed/SoXtngYp-8k +type: lessons +url: "/academy/localstack-101/web-app-resource-browser/" +--- + +In this informative video we guide you through the essential steps of the LocalStack platform: + +- Witness the seamless login flow and discover how to configure the web app. +- Learn how to effortlessly connect your LocalStack Account to enable a smooth integration experience. +- Explore the Resource Browser as we demonstrate how to list and create fundamental resources. +- To create an account for LocalStack, visit [app.localstack.cloud/sign-up](https://app.localstack.cloud/sign-up). You can sign up with your email address or one of our supported social identity providers (such as GitHub). + +Further reading: + +- [Web App Documentation](https://docs.localstack.cloud/user-guide/web-application/) +- [Resource Browser](https://docs.localstack.cloud/user-guide/web-application/resource-browser/) \ No newline at end of file diff --git a/content/en/academy/localstack-101/lesson-5/web-app.png b/content/en/academy/localstack-101/lesson-5/web-app.png new file mode 100644 index 0000000000..9088ef507d Binary files /dev/null and b/content/en/academy/localstack-101/lesson-5/web-app.png differ diff --git a/content/en/academy/localstack-101/lesson-6/full-demo.png b/content/en/academy/localstack-101/lesson-6/full-demo.png new file mode 100644 index 0000000000..a6636e6e71 Binary files /dev/null and b/content/en/academy/localstack-101/lesson-6/full-demo.png differ diff --git a/content/en/academy/localstack-101/lesson-6/index.md b/content/en/academy/localstack-101/lesson-6/index.md new file mode 100644 index 0000000000..1f62704b59 --- /dev/null +++ b/content/en/academy/localstack-101/lesson-6/index.md @@ -0,0 +1,23 @@ +--- +title: "Full Project Demo" +linkTitle: "Full Project Demo" +weight: 6 +description: > + This video explores one of our many Developer Hub sample applications, a note-taking application. We'll take you + through the full process, from checking out the GitHub project, to running the functioning app on LocalStack. +length: 03:56 +leadimage: full-demo.png +videoUrl: https://www.youtube.com/embed/cQxg3Dnteyc +type: lessons +url: "/academy/localstack-101/full-project-demo/" +--- + +Discover the ins and outs of one of our Developer Hub's practical sample applications—a note-taking platform. +This video tutorial offers a comprehensive walk-through, beginning with the checkout of the GitHub project and +culminating in deploying the operational application on LocalStack. Covering the essentials, we'll guide you +through dependency installation, backend and frontend build, and a detailed exploration of the application's service +diagram to unveil the integral components at play. + +Further exploring: + +- [LocalStack Developer Hub Applications](https://docs.localstack.cloud/applications) \ No newline at end of file diff --git a/content/en/academy/localstack-101/lesson-7/cloud-pod.png b/content/en/academy/localstack-101/lesson-7/cloud-pod.png new file mode 100644 index 0000000000..427c39e19d Binary files /dev/null and b/content/en/academy/localstack-101/lesson-7/cloud-pod.png differ diff --git a/content/en/academy/localstack-101/lesson-7/index.md b/content/en/academy/localstack-101/lesson-7/index.md new file mode 100644 index 0000000000..277a22ceeb --- /dev/null +++ b/content/en/academy/localstack-101/lesson-7/index.md @@ -0,0 +1,38 @@ +--- +title: "Cloud Pods and Collaborative Work" +linkTitle: "Cloud Pods and Collaborative Work" +weight: 7 +description: > + Discover Cloud Pods: a mechanism offering persistent snapshots of LocalStack's application state. + Uncover their significance in enabling reproducible applications, collaborative sandboxing, and + consistent AWS API parity. Engage in a brief and enlightening demo showcasing their practicality. +length: 03:29 +leadimage: cloud-pod.png +videoUrl: https://www.youtube.com/embed/InqTdSvxuag +type: lessons +url: "/academy/localstack-101/cloud-pods/" +--- + +This video will cover: + +What are Cloud Pods ? + +- Unveil the concept of Cloud Pods, designed to capture a persistent snapshot of LocalStack's application state. +Deviate from the default ephemeral state by leveraging Cloud Pods' capability to preserve data across restarts. + +How are cloud pods useful ? + +- Gain insight into the advantages they offer, including the creation of shareable local cloud sandboxes. +Learn about the collaborative potential of distributing and sharing pods among team members and discover +how Cloud Pods contribute to reproducibility in applications and pre-seeding test environments. + +Demo + +- Dive into a concise yet impactful demo that brings Cloud Pods to life. +Witness firsthand how they empower developers in various scenarios, especially for collaboration. + +
+Further reading: + +- [Cloud Pods Documentation](https://docs.localstack.cloud/user-guide/tools/cloud-pods/) +- [Cloud Pods Browser](https://docs.localstack.cloud/user-guide/web-application/cloud-pods-browser/) \ No newline at end of file diff --git a/content/en/academy/localstack-101/localstack101.png b/content/en/academy/localstack-101/localstack101.png new file mode 100644 index 0000000000..81633ebb41 Binary files /dev/null and b/content/en/academy/localstack-101/localstack101.png differ diff --git a/layouts/academy/list.html b/layouts/academy/list.html new file mode 100644 index 0000000000..9f7b152278 --- /dev/null +++ b/layouts/academy/list.html @@ -0,0 +1,107 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+
+
+
+ + +
+ {{ partial "version-banner.html" . }} +
+

{{ .Title }}

+ {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} + {{ .Content }} + +
+ {{ $parent := .Page }} + {{ $pages := (where .Site.Pages "Section" .Section).ByWeight }} + {{ $pages = (where $pages "Type" "!=" "search") }} + {{ $pages = (where $pages ".Params.hide_summary" "!=" true) }} + {{ $pages = (where $pages ".Parent" "!=" nil) }} + {{ $pages = (where $pages "Parent.File.UniqueID" "==" $parent.File.UniqueID) }} + {{ if or $parent.Params.no_list (eq (len $pages) 0) }} + {{/* If no_list is true or we don't have subpages we don't show a list of subpages */}} + {{ else }} + {{/* Otherwise we show a nice formatted list of subpages with page descriptions */}} + {{ range $pages }} +
+
+
+
+
+

{{.Title}}

+

{{.Description}}

+
+ {{ $lessons := .Pages }} + {{ $maxLessonsLen := 5 }} + +
+ {{ $visibleLessons := first $maxLessonsLen $lessons }} + {{ len $lessons }} lessons +
    + {{ range $visibleLessons }} +
  • +

    {{ .Title }}

    +

    {{.Params.length}}

    +
    • + {{ end }} +
+ {{ if gt (len $lessons) $maxLessonsLen }} + {{ sub (len $lessons) $maxLessonsLen }} more lessons + {{ end }} +
+ +
+
+
+ + {{ $image := .Resources.GetMatch (printf "*%s*" (.Params.thumbnail)) }} + {{ with $image }} + + {{end}} + +
+
+ + Start the Course + + +
+ {{ end }} + {{ end }} +
+ + {{ if (.Site.DisqusShortname) }} +
+ {{ partial "disqus-comment.html" . }} + {{ end }} + {{ partial "page-meta-lastmod.html" . }} +
+
+
+
+ {{ partial "footer.html" . }} +
+ {{ partial "scripts.html" . }} + + + diff --git a/layouts/academy/single.html b/layouts/academy/single.html new file mode 100644 index 0000000000..8aef58a14d --- /dev/null +++ b/layouts/academy/single.html @@ -0,0 +1,78 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+
+
+
+ + +
+ {{ partial "version-banner.html" . }} + {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }} +
+

{{ .Title }}

+ {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} +
+ {{ range .Data.Pages }} +
+
+
+ + {{ $image := .Resources.GetMatch (printf "*%s*" (.Params.leadimage)) }} + {{ $image := $image.Resize "556x" }} + {{ with $image }} + + {{end}} + +
+
+
+

{{.Title}}

+

{{.Description}}

+ + Learn More + + +
+
+
+
+ {{ end }} +
+ {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }} + {{ partial "feedback.html" .Site.Params.ui.feedback }} +
+ {{ end }} + {{ if (.Site.Params.DisqusShortname) }} +
+ {{ partial "disqus-comment.html" . }} + {{ end }} + {{ partial "page-meta-lastmod.html" . }} +
+
+
+
+ {{ partial "footer.html" . }} +
+ {{ partial "scripts.html" . }} + + + diff --git a/layouts/lessons/single.html b/layouts/lessons/single.html new file mode 100644 index 0000000000..64199ce9a3 --- /dev/null +++ b/layouts/lessons/single.html @@ -0,0 +1,89 @@ + + + + {{ partial "head.html" . }} + + +
+ {{ partial "navbar.html" . }} +
+
+
+
+ + +
+ {{ partial "version-banner.html" . }} + {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }} +
+

{{ .Title }}

+ {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} + {{ $image := .Resources.GetMatch (printf "*%s*" (.Params.leadimage)) }} + {{ $videoUrl := .Params.videoUrl }} + {{ with $image }} + {{if $videoUrl}} +
+ +
+
+ {{end}} + {{end}} + {{.Content}} + {{ $nextLesson := .PrevInSection }} + {{ with $nextLesson }} +
+
+
+ + {{ $image := .Resources.GetMatch (printf "*%s*" (.Params.leadimage)) }} + {{ $image := $image.Resize "556x" }} + {{ with $image }} + + {{end}} + +
+
+
+ Up Next +

{{.Title}}

+

{{.Description}}

+ + Next + + +
+
+
+
+ {{ end }} + {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }} + {{ partial "feedback.html" .Site.Params.ui.feedback }} +
+ {{ end }} + {{ if (.Site.Params.DisqusShortname) }} +
+ {{ partial "disqus-comment.html" . }} + {{ end }} + {{ partial "page-meta-lastmod.html" . }} +
+
+
+
+ {{ partial "footer.html" . }} +
+ {{ partial "scripts.html" . }} + + + diff --git a/layouts/partials/feedback-academy.html b/layouts/partials/feedback-academy.html new file mode 100644 index 0000000000..51dfe41232 --- /dev/null +++ b/layouts/partials/feedback-academy.html @@ -0,0 +1,61 @@ + +
+

Feedback

+

Was this page helpful?

+ + +

+ {{ .yes | safeHTML }} +

+

+ {{ .no | safeHTML }} +

+
+

For feedback and queries join our Community Slack

+
+ diff --git a/layouts/partials/page-meta-links-academy.html b/layouts/partials/page-meta-links-academy.html new file mode 100644 index 0000000000..e6e0921c0a --- /dev/null +++ b/layouts/partials/page-meta-links-academy.html @@ -0,0 +1,50 @@ +{{ if .File }} +{{ $pathFormatted := replace .File.Path "\\" "/" -}} +{{ $gh_repo := ($.Param "github_repo") -}} +{{ $gh_url := ($.Param "github_url") -}} +{{ $gh_subdir := ($.Param "github_subdir") -}} +{{ $gh_project_repo := ($.Param "github_project_repo") -}} +{{ $gh_branch := (default "main" ($.Param "github_branch")) -}} +
+{{ if $gh_url -}} + {{ warnf "Warning: use of `github_url` is deprecated. For details see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}} + {{ T "post_edit_this" }} +{{ else if $gh_repo -}} + {{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted -}} + {{ if and ($gh_subdir) (.Site.Language.Lang) -}} + {{ $gh_repo_path = printf "%s/%s/content/%s/%s" $gh_branch $gh_subdir ($.Site.Language.Lang) $pathFormatted -}} + {{ else if .Site.Language.Lang -}} + {{ $gh_repo_path = printf "%s/content/%s/%s" $gh_branch ($.Site.Language.Lang) $pathFormatted -}} + {{ else if $gh_subdir -}} + {{ $gh_repo_path = printf "%s/%s/content/%s" $gh_branch $gh_subdir $pathFormatted -}} + {{ end -}} + + {{/* Adjust $gh_repo_path based on path_base_for_github_subdir */ -}} + {{ $ghs_base := $.Param "path_base_for_github_subdir" -}} + {{ $ghs_rename := "" -}} + {{ if reflect.IsMap $ghs_base -}} + {{ $ghs_rename = $ghs_base.to -}} + {{ $ghs_base = $ghs_base.from -}} + {{ end -}} + {{ with $ghs_base -}} + {{ $gh_repo_path = replaceRE . $ghs_rename $gh_repo_path -}} + {{ end -}} + + {{ $viewURL := printf "%s/tree/%s" $gh_repo $gh_repo_path -}} + {{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path -}} + {{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (safeURL $.Title ) -}} + {{ $newPageStub := resources.Get "stubs/new-page-template.md" -}} + {{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL -}} + {{ $newPageURL := printf "%s/new/%s?%s" $gh_repo $gh_repo_path $newPageQS -}} + + {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }} + {{ partial "feedback-academy.html" .Site.Params.ui.feedback }} + {{ end }} + + +{{ end -}} +{{ with .CurrentSection.AlternativeOutputFormats.Get "print" -}} + {{ T "print_entire_section" }} +{{ end }} +
+{{ end -}} diff --git a/layouts/tutorials/single.html b/layouts/tutorials/single.html index f218d54010..468385f63c 100644 --- a/layouts/tutorials/single.html +++ b/layouts/tutorials/single.html @@ -55,7 +55,7 @@

{{ .Title }}

{{ partial "disqus-comment.html" . }} {{ end }} {{ partial "page-meta-lastmod.html" . }} - + diff --git a/static/js/global-script.js b/static/js/global-script.js index af3e892f10..3ef12d9900 100644 --- a/static/js/global-script.js +++ b/static/js/global-script.js @@ -1,10 +1,10 @@ -function setupCodeBlockCopyButton(){ - $('.highlight pre').each(function(_i,item){ +function setupCodeBlockCopyButton() { + $('.highlight pre').each(function (_i, item) { $(item).addClass('code-container'); $(item).append('') }) - $('.code-copy-button').on('click',function(e){ + $('.code-copy-button').on('click', function (e) { e.preventDefault(); const elem = $(this).closest('.code-container').find('code').clone(); elem.find('.command-prefix').remove(); // removing prefix @@ -16,4 +16,14 @@ function setupCodeBlockCopyButton(){ }) } +function playYoutubeVideo() { + $('.video-thumbnail').on('click', function () { + var url = $(this).attr('data-url'); + var iframeHtml = '' + $(this).append(iframeHtml) + $(this).addClass('played'); + }) +} + setupCodeBlockCopyButton(); +playYoutubeVideo();