8000 replace html-inline with shortcodes in the tutorial · kubernetes/website@c4d31da · GitHub
[go: up one dir, main page]

Skip to content

Commit c4d31da

Browse files
committed
replace html-inline with shortcodes in the tutorial
1 parent 4c26fe5 commit c4d31da

File tree

8 files changed

+98
-76
lines changed
  • update
  • layouts/shortcodes/tutorials
  • static/css
  • 8 files changed

    +98
    -76
    lines changed

    content/en/docs/tutorials/kubernetes-basics/_index.md

    Lines changed: 38 additions & 42 deletions
    Original file line numberDiff line numberDiff line change
    @@ -35,49 +35,45 @@ container orchestration, combined with best-of-breed ideas from the community.
    3535

    3636
    ## Kubernetes Basics Modules
    3737

    38-
    <!-- css code to preserve original format -->
    39-
    <link rel="stylesheet" href="/css/style_tutorials.css">
    38+
    <!-- For translators, translate only the values of the ‘alt’ and ‘title’ keys -->
    39+
    {{< tutorials/modules >}}
    40+
    {{< tutorials/module
    41+
    path="/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/"
    42+
    image="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347"
    43+
    alt="Module 1"
    44+
    title="1. Create a Kubernetes cluster" >}}
    4045

    41-
    <div class="tutorials-modules">
    42-
    <div class="module">
    43-
    <a href="/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/">
    44-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" alt="Module 1">
    45-
    <h5>1. Create a Kubernetes cluster</h5>
    46-
    </a>
    47-
    </div>
    48-
    <div class="module">
    49-
    <a href="/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/">
    50-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" alt="Module 2">
    51-
    <h5>2. Deploy an app</h5>
    52-
    </a>
    53-
    </div>
    54-
    <div class="module">
    55-
    <a href="/docs/tutorials/kubernetes-basics/explore/explore-intro/">
    56-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" alt="Module 3">
    57-
    <h5>3. Explore your app</h5>
    58-
    </a>
    59-
    </div>
    60-
    <div class="module">
    61-
    <a href="/docs/tutorials/kubernetes-basics/expose/expose-intro/">
    62-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" alt="Module 4">
    63-
    <h5>4. Expose your app publicly</h5>
    64-
    </a>
    65-
    </div>
    66-
    <div class="module">
    67-
    <a href="/docs/tutorials/kubernetes-basics/scale/scale-intro/">
    68-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" alt="Module 5">
    69-
    <h5>5. Scale up your app</h5>
    70-
    </a>
    71-
    </div>
    72-
    <div class="module">
    73-
    <a href="/docs/tutorials/kubernetes-basics/update/update-intro/">
    74-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" alt="Module 6">
    75-
    <h5>6. Update your app</h5>
    76-
    </a>
    77-
    </div>
    78-
    </div>
    46+
    {{< tutorials/module
    47+
    path="/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/"
    48+
    image="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347"
    49+
    alt="Module 2"
    50+
    title="2. Deploy an app" >}}
    51+
    52+
    {{< tutorials/module
    53+
    path="/docs/tutorials/kubernetes-basics/explore/explore-intro/"
    54+
    image="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347"
    55+
    alt="Module 3"
    56+
    title="3. Explore your app" >}}
    57+
    58+
    {{< tutorials/module
    59+
    path="/docs/tutorials/kubernetes-basics/expose/expose-intro/"
    60+
    image="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347"
    61+
    alt="Module 4"
    62+
    title="4. Expose your app publicly" >}}
    63+
    64+
    {{< tutorials/module
    65+
    path="/docs/tutorials/kubernetes-basics/scale/scale-intro/"
    66+
    image="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347"
    67+
    alt="Module 5"
    68+
    title="5. Scale up your app" >}}
    69+
    70+
    {{< tutorials/module
    71+
    path="/docs/tutorials/kubernetes-basics/update/update-intro/"
    72+
    image="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347"
    73+
    alt="Module 6"
    74+
    title="6. Update your app" >}}
    75+
    {{< /tutorials/modules >}}
    7976

    8077
    ## {{% heading "whatsnext" %}}
    8178

    82-
    * Tutorial [Using Minikube to Create a
    83-
    Cluster](/docs/tutorials/kubernetes-basics/create-cluster/)
    79+
    * Tutorial [Using Minikube to Create a Cluster](/docs/tutorials/kubernetes-basics/create-cluster/)

    content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md

    Lines changed: 9 additions & 13 deletions
    Original file line numberDiff line numberDiff line change
    @@ -44,18 +44,14 @@ kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080
    4444
    ## Scaling overview
    4545

    4646
    <!-- animation -->
    47-
    <div class="col-md-8">
    48-
    <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
    49-
    <div class="carousel-inner" role="listbox">
    50-
    <div class="item carousel-item active">
    51-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
    52-
    </div>
    53-
    <div class="item carousel-item">
    54-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
    55-
    </div>
    56-
    </div>
    57-
    </div>
    58-
    </div>
    47+
    {{< tutorials/carousel id="myCarousel" interval="3000" >}}
    48+
    {{< tutorials/carousel-item
    49+
    image="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg"
    50+
    active="true" >}}
    51+
    52+
    {{< tutorials/carousel-item
    53+
    image="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg" >}}
    54+
    {{< /tutorials/carousel >}}
    5955

    6056
    {{% alert %}}
    6157
    _Scaling is accomplished by changing the number of replicas in a Deployment._
    @@ -229,4 +225,4 @@ This confirms that 2 Pods were terminated.
    229225
    * Tutorial
    230226
    [Performing a Rolling Update](/docs/tutorials/kubernetes-basics/update/update-intro/).
    231227
    * Learn more about [ReplicaSet](/docs/concepts/workloads/controllers/replicaset/).
    232-
    * Learn more about [Autoscaling](/docs/concepts/workloads/autoscaling/).
    228+
    * Learn more about [Autoscaling](/docs/concepts/workloads/autoscaling/).

    content/en/docs/tutorials/kubernetes-basics/update/update-intro.md

    Lines changed: 15 additions & 19 deletions
    Original file line numberDiff line numberDiff line change
    @@ -31,24 +31,20 @@ versioned and any Deployment update can be reverted to a previous (stable) versi
    3131
    ## Rolling updates overview
    3232

    3333
    <!-- animation -->
    34-
    <div class="col-md-8">
    35-
    <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
    36-
    <div class="carousel-inner" role="listbox">
    37-
    <div class="item carousel-item active">
    38-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg">
    39-
    </div>
    40-
    <div class="item carousel-item">
    41-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg">
    42-
    </div>
    43-
    <div class="item carousel-item">
    44-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg">
    45-
    </div>
    46-
    <div class="item carousel-item">
    47-
    <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
    48-
    </div>
    49-
    </div>
    50-
    </div>
    51-
    </div>
    34+
    {{< tutorials/carousel id="myCarousel" interval="3000" >}}
    35+
    {{< tutorials/carousel-item
    36+
    image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg"
    37+
    active="true" >}}
    38+
    39+
    {{< tutorials/carousel-item
    40+
    image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg" >}}
    41+
    42+
    {{< tutorials/carousel-item
    43+
    image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg" >}}
    44+
    45+
    {{< tutorials/carousel-item
    46+
    image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg" >}}
    47+
    {{< /tutorials/carousel >}}
    5248

    5349
    {{% alert %}}
    5450
    _If a Deployment is exposed publicly, the Service will load-balance the traffic
    @@ -212,4 +208,4 @@ kubectl delete deployments/kubernetes-bootcamp services/kubernetes-bootcamp
    212208

    213209
    ## {{% heading "whatsnext" %}}
    214210

    215-
    * Learn more about [Deployments](/docs/concepts/workloads/controllers/deployment/).
    211+
    * Learn more about [Deployments](/docs/concepts/workloads/controllers/deployment/).
    Lines changed: 3 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,3 @@
    1+
    <div class="item carousel-item {{ if .Get "active" }}active{{ end }}">
    2+
    <img src="{{ .Get "image" }}">
    3+
    </div>
    Lines changed: 7 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,7 @@
    1+
    <div class="col-md-8">
    2+
    <div id="{{ .Get "id" | default "myCarousel" }}" class="carousel" data-ride="carousel" data-interval="{{ .Get "interval" | default "3000" }}">
    3+
    <div class="carousel-inner" role="listbox">
    4+
    {{ .Inner }}
    5+
    </div>
    6+
    </div>
    7+
    </div>
    Lines changed: 12 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,12 @@
    1+
    {{ $path := .Get "path" }}
    2+
    {{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }}
    3+
    {{ $url := $path }}
    4+
    {{ if ne .Page.Lang $defaultLang }}
    5+
    {{ $url = printf "/%s%s" .Page.Lang $path }}
    6+
    {{ end }}
    7+
    <div class="module">
    8+
    <a href="{{ $url }}">
    9+
    <img src="{{ .Get "image" }}" alt="{{ .Get "alt" }}">
    10+
    <h5>{{ .Get "title" }}</h5>
    11+
    </a>
    12+
    </div>
    Lines changed: 5 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,5 @@
    1+
    <link rel="stylesheet" href="/css/style_tutorials.css">
    2+
    3+
    <div class="tutorials-modules">
    4+
    {{ .Inner }}
    5+
    </div>

    static/css/style_tutorials.css

    Lines changed: 9 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -3,7 +3,7 @@
    33
    display: flex;
    44
    flex-wrap: wrap;
    55
    gap: 20px;
    6-
    justify-content: space-between;
    6+
    justify-content: space-evenly;
    77
    }
    88

    99
    .module {
    @@ -17,4 +17,11 @@
    1717

    1818
    .module h5 {
    1919
    margin: 10px 0 0;
    20-
    }
    20+
    }
    21+
    22+
    @media screen and (max-width: 768px) {
    23+
    .module {
    24+
    width: 45%;
    25+
    text-align: center;
    26+
    }
    27+
    }

    0 commit comments

    Comments
     (0)
    0