### Jekyll/Liquid Template for FinOps Persona Display

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--adopting-finops-guide.md

This Jekyll/Liquid snippet dynamically generates HTML content for each FinOps executive persona. It iterates through a 'personas' data collection, displaying details such as primary goals, objectives, frustrations, key metrics, and FinOps benefits in a structured, responsive layout.

```Jekyll
{% for persona in site.data.personas %}

<div id="{{ persona.identifier }}">

  <h2>{{ persona.name }}</h2>
  <p><b>Primary Goal</b> {{ persona.primary-goal }}</p>


  <div class="flex flex-col md:flex-row flex-wrap items-stretch">
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col rounded-lg p-2">
        <h4 class="text-center my-4">Objectives</h4>
        <ul>
          {% for item in persona.objectives %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">Frustrations</h4>
        <ul>
          {% for item in persona.frustrations %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">Key Metrics</h4>
        <ul>
          {% for item in persona.key-metrics %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">FinOps Benefits</h4>
        <ul>
          {% for item in persona.finops-benefits %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

</div>

{% endfor %}
```

--------------------------------

### Jekyll/Liquid Template for Dynamic Container Labeling Cards

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--container-cost-allocation.md

This Jekyll/Liquid template dynamically generates HTML cards for a container cost allocation dictionary. It iterates over `site.data.container-cost-allocation` to display details like label name, definition, maturity, FinOps personas, context, resources, aliases, and examples. The template also applies CSS classes for filtering and includes conditional links to external resources.

```Liquid/HTML
<div class="flex flex-col md:flex-row flex-wrap items-stretch mt-4 js-waste" id="js-waste">
{% for item in site.data.container-cost-allocation %}
  <div class="md:w-1/2 p-3 flex items-stretch mix {% if item.label-name %}{% for label in item.label-name %}{{ label | downcase }} {% endfor %}{% endif %} {% if item.maturity == 'crawl' %} crawl {% elsif item.maturity == 'walk' %} walk {% elsif item.maturity == 'run' %} run {% endif %} {% if item.personas contains 'executive' %} executive {% endif %} {% if item.personas contains 'business' %} business {% endif %} {% if item.personas contains 'engineering' %} engineering {% endif %} {% if item.personas contains 'finance' %} finance {% endif %}">
    <div class="w-full bg-gray-100 rounded-lg px-6 py-8 border-solid border-gray-100 border hover:border-green-500 transition-colors duration-200 shadow-sm cursor-pointer">
      <h3 class="text-xl font-bold text-gray-700 mb-2 mt-0 leading-6">{{ item.label-name }}</h3>
      <h4 class="my-4 mt-0 text-base font-normal text-gray-700 tracking-tight">{{ item.label-definition }}</h4>
      <div class="my-2">
        {% if item.label-name %}
          {% for maturity in item.maturity %}
            <div class="text-xs font-semibold text-gray-700 tracking-wider uppercase inline-block pr-4 py-px">{{ maturity }}</div>
          {% endfor %}<br>
          {% for personas in item.personas %}
            <div class="text-xs font-semibold text-gray-700 tracking-wider uppercase inline-block pr-4 py-px">{{ personas }}</div>
          {% endfor %}
        {% endif %}
      </div>
      <p><strong>Context:</strong> {{ item.context }}</p>
      <p><strong>Common Resources:</strong> {{ item.common-resources }}</p>
      <p><strong>Aliases:</strong> <em>{{ item.label-alias }}</em></p>
      <p><strong>Example:</strong> <code>{{ item.example }}</code></p>
      <div>
      {% if item.story-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.story-url }}">Read the story</a>
      {% endif %}
      {% if item.related-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.related-url }}">Related material</a>
      {% endif %}
      {% if item.code-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.code-url }}">On GitHub</a>
      {% endif %}
      </div>
    </div>
  </div>
{% endfor %}
</div>
```

--------------------------------

### Dynamically Render Cloud Waste Opportunities with HTML/Liquid

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--reducing-waste.md

This HTML/Liquid template iterates through a data source (`site.data.reducing-waste`) to generate a responsive grid of cards. Each card displays details about a cloud cost waste opportunity, including service name, product, type, associated cloud providers, and estimated savings potential. It also includes conditional links to external resources such as stories, related materials, or code examples, and applies CSS classes for filtering based on provider and savings.

```HTML/Liquid
{% for item in site.data.reducing-waste %}
  <div class="md:w-1/2 p-3 flex items-stretch mix {% if item.cloud-provider %}{% for cloud in item.cloud-provider %}{{ cloud | downcase }} {% endfor %}{% endif %} {% if item.savings-potential == '$' %}saving-1 {% elsif item.savings-potential == '$$' %} saving-2 {% elsif item.savings-potential == '$$$' %} saving-3 {% endif %}">
    <div class="w-full bg-gray-100 rounded-lg px-6 py-8 border-solid border-gray-100 border hover:border-green-500 transition-colors duration-200 shadow-sm cursor-pointer">
      <h3 class="text-xl font-bold text-gray-700 mb-2 mt-0 leading-6">{{ item.cloud-service-name }}</h3>
      <h4 class="my-4 mt-0 text-base font-normal text-gray-700 tracking-tight">{{ item.cloud-product }} - {{ item.type | capitalize }}</h4>
      <div class="my-2">
        {% if item.cloud-provider %} 
          {% for cloud in item.cloud-provider %}
            <div class="text-sm font-semibold text-gray-700 tracking-wider uppercase inline-block pr-4 py-px">{{ cloud }}</div>
          {% endfor %}
        {% endif %}
        <div class="text-sm font-semibold text-gray-700 tracking-wider uppercase inline-block px-2 py-px">{{ item.savings-potential }}</div>
      </div>
      <p>{{ item.description }}</p>
      {% if item.story-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.story-url }}">Read the story</a>
      {% endif %}
      {% if item.related-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.related-url }}">Related material</a>
      {% endif %}
      {% if item.code-url %}
        <a class="py-1 px-2 shadow-sm text-sm rounded-md text-white bg-green-500 hover:bg-green-600 transition-colors duration-200 mb-1 inline-block" href="{{ item.code-url }}">Code example</a>
      {% endif %}
    </div>
  </div>
{% endfor %}
```

--------------------------------

### Displaying Podcast Resources with Liquid Templating

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/community/finops-podcast.html

This Liquid snippet sorts all site resources in reverse order. It then iterates through the sorted resources, and for each item identified as a 'Podcast' type, it generates a clickable image link. The link includes the podcast's title and description, directing users to the podcast's external URL.

```Liquid
{% assign sorted_resources = site.resources | reverse %}

{% for item in sorted_resources %} {% if item.type == 'Podcast' %} [![{{ item.title }}](/img/search-icons/{{ item.type }}.png)

{{ item.title }}
----------------

{{ item.description }}



]({{ item.link }}){% endif %} {% endfor %}
```

--------------------------------

### Include FinOps Resources Loop

Source: https://github.com/finopsfoundation/framework/blob/main/_capabilities/decision-accountability-structure.md

This Jekyll include directive dynamically inserts a loop of resources, projects, playbooks, guides, and stories related to FinOps, typically used for generating documentation pages within a Jekyll-powered static site.

```Jekyll
{% include resources-loop.md %}
```

--------------------------------

### Jekyll/Liquid Loop for Dynamic FinOps Capability Display

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/framework/capabilities.md

This Liquid templating code iterates through a sorted collection of FinOps capabilities (`site.capabilities`). For each capability, it generates a responsive `div` element acting as a card, displaying the capability's title, a 'Help define' tag if its description contains 'coming soon', a brief description, and a link to its dedicated page.

```Liquid
<div class="flex flex-col md:flex-row flex-wrap items-stretch bg-gray-200 p-4 rounded-md my-8">
{% assign sorted_capabilities = site.capabilities | sort:"order" %}
{% for capability in sorted_capabilities %}
<div class="md:w-1/2 flex items-stretch">
    <div class="m-2 p-6 w-full bg-white border-solid border-gray-200 border rounded-lg shadow-sm hover:border-green-500 cursor-pointer transition duration-200" data-url="{{ capability.url }}">
      <h2 class="text-lg font-medium mt-0">{{ capability.framework-capability-title }}</h2>
      {% if capability.framework-capability-desc contains 'coming soon' %}
        <span class="text-white font-medium bg-green-500 rounded-md py-1 px-2 inline-block uppercase text-xs leading-tight">Help define</span>
      {% endif %}
      <p class="text-gray-600 text-sm leading-relaxed">{{ capability.framework-capability-desc }}</p>
      <a class="text-gray-600 hover:text-green-500 text-sm leading-relaxed underline" href="{{ capability.url }}">Read more</a>
  </div>
</div>
{% endfor %}
</div>
```

--------------------------------

### Preemptible Instances/VMs

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/resources/terminology.md

Preemptible Instances/VMs

```APIDOC
Preemptible Instances/VMs:
  Description: Preemptible Instances/VMs
```

--------------------------------

### Display FinOps Capabilities using Jekyll Liquid

Source: https://github.com/finopsfoundation/framework/blob/main/_includes/capabilities-loop.md

This Liquid template dynamically renders a list of FinOps capabilities. It sorts `site.capabilities` by 'order' and then iterates through `page.framework-capabilities` to match and display the corresponding capability titles and URLs. The output is a responsive grid of clickable capability links.

```Liquid
{% assign sorted_capabilities = site.capabilities | sort:"order" %}
{% for tag in page.framework-capabilities %}
  {% for capability in sorted_capabilities %}
    {% if tag == capability.page-identifier %}
    <div class="md:w-1/2 flex items-stretch">
      <div class="m-2 w-full bg-white flex space-x-6 border-solid border-gray-200 border rounded-lg shadow-sm hover:border-green-500  transition transform duration-200">
        <a class="text-base font-medium p-2 pl-4 block w-full text-gray-800" href="{{ capability.url }}">{{ capability.framework-capability-title }}</a>
      </div>
    </div>
  {% endif %}
{% endfor %}
{% endfor %}
```

--------------------------------

### FinOps Data Efficiency Framework: Crawl Stage

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/pc-project--managing-data-efficiency-playbook.md

Describes the initial 'Crawl' stage of data efficiency, characterized by basic tracking of $/GB rates, limited visibility into inefficiency, ad hoc prioritization, and no formal KPI reporting.

```APIDOC
- Tracks current $/GB rates to store and transfer data.
- Has some visibility into latent data inefficiency (and by extension the savings potential for data) using one or more sources such as cloud billing data, infrastructure monitoring tools, data efficiency tools, cloud provider insights/tools.
- Centrally performs some ad hoc prioritization of data for rightsizing.
- Does not report on data efficiency KPIs.
```

--------------------------------

### Displaying FinOps Foundation Project Contributors with Jinja2/Liquid

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--multi-cloud.md

This HTML snippet uses a templating language (Jinja2/Liquid) to dynamically display a list of project contributors. It iterates through `site.data.people` and renders a card for each person belonging to the 'multi-cloud' group, including their name, company, image, and a LinkedIn link. This pattern is common in static site generators or web frameworks for rendering dynamic content.

```Jinja2
<div class="flex md:flex-row flex-wrap items-stretch p-4 rounded-md mt-4">
{% for person in site.data.people %}
  {% if person.groups contains 'multi-cloud' %}
     <div class="w-1/2 md:w-1/3 p-2 flex">
      <a href="{{ person.linkedin-url }}" class="flex bg-gray-100 w-full items-stretch p-4 rounded-lg shadow-sm border-solid border-gray-200 border hover:-translate-y-1 hover:shadow-lg transition transform duration-500 hover:border-green-500">
          <div>
            <img src="/img/people/{{ person.image }}" alt="{{ person.name }}" width="50" class="rounded-full inline-block" />
          </div>
          <div class="flex-grow pl-4">
            <h5 class="mt-2 mb-1 leading-tight font-bold">{{ person.name }}</h5>
            <p class="m-0 leading-tight text-sm">{{ person.company }}</p>
          </div>
          <div>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path class="st0" d="M21.8,0H2.2C1,0,0,1,0,2.2v19.7C0,23,1,24,2.2,24h19.7c1.2,0,2.2-1,2.2-2.2V2.2C24,1,23,0,21.8,0z M7.4,20.7
                c0,0.3-0.3,0.6-0.6,0.6H4.1c-0.3,0-0.6-0.3-0.6-0.6V9.4c0-0.3,0.3-0.6,0.6-0.6h2.7c0.3,0,0.6,0.3,0.6,0.6V20.7z M5.5,7.8
                C4,7.8,2.9,6.6,2.9,5.2S4,2.6,5.5,2.6S8,3.8,8,5.2S6.9,7.8,5.5,7.8z M21.5,20.8c0,0.3-0.3,0.6-0.6,0.6H18c-0.3,0-0.6-0.3-0.6-0.6
                v-5.3c0-0.8,0.2-3.5-2.1-3.5c-1.8,0-2.1,1.8-2.2,2.6v6.1c0,0.3-0.3,0.6-0.6,0.6H9.8c-0.3,0-0.6-0.3-0.6-0.6V9.4
                c0-0.3,0.3-0.6,0.6-0.6h2.8c0.3,0,0.6,0.3,0.6,0.6v1c0.7-1,1.6-1.8,3.7-1.8c4.6,0,4.6,4.3,4.6,6.7L21.5,20.8L21.5,20.8z"/>
            </svg>
          </div>
      </a>
    </div>
  {% endif %}
{% endfor %}
</div>
```

--------------------------------

### Displaying FinOps Domains and Capabilities in a Grid

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/framework/domains.md

This Jekyll/Liquid snippet dynamically generates a responsive grid layout for FinOps domains and their associated capabilities. It sorts domains by 'order' and then iterates through each domain, displaying its image, title, description, and a list of linked capabilities. This provides a structured and navigable overview of the FinOps framework.

```HTML
<div class="flex flex-col md:flex-row flex-wrap items-stretch bg-gray-200 p-4 rounded-md">
  {% assign sorted_domains = site.domains | sort:"order" %}
  {% for domain in sorted_domains %}
  <div class="md:w-1/2">
    <div class="m-2 p-6 bg-white border-solid border-gray-200 border rounded-lg shadow-sm">
      <div class="flex flex-col">
        <div class="text-center mb-2">
          <img src="{{ domain.image }}" alt="{{ domain.framework-domain-title }} icon" width="300px;" class="inline-block" />
        </div>
        <h3 class="text-xl font-bold mb-4 mt-0 leading-6">{{ domain.framework-domain-title }}</h3>
        <p class="text-gray-600 text-sm leading-relaxed">{{ domain.framework-domain-desc }} <a class="text-sm text-gray-600 font-normal hover:text-green-500 transition-colors duration-200" href="{{ domain.url }}">Read more</a></p>
        <ul class="mt-4">
          {% assign sorted_capabilities = site.capabilities | sort:"order" %}
          {% for tag in domain.framework-capabilities %}
            {% for capability in sorted_capabilities %}
              {% if tag == capability.page-identifier %}
              <li><a class="text-gray-700 hover:text-green-500" href="{{ capability.url }}">{{ capability.framework-capability-title }}</a></li>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
```

--------------------------------

### Render Executive Persona Details with Liquid Template

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/framework/personas.md

This Liquid template iterates through a collection of executive persona data (`site.data.personas`) to dynamically generate HTML sections for each persona. It displays their primary goal, objectives, frustrations, key metrics, and FinOps benefits in a structured, responsive layout, facilitating the presentation of tailored FinOps value propositions.

```Liquid
{% for persona in site.data.personas %}

<div id="{{ persona.identifier }}">

  <h2>{{ persona.name }}</h2>
  <p><b>Primary Goal</b> {{ persona.primary-goal }}</p>


  <div class="flex flex-col md:flex-row flex-wrap items-stretch">
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col rounded-lg p-2">
        <h4 class="text-center my-4">Objectives</h4>
        <ul>
          {% for item in persona.objectives %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">Frustrations</h4>
        <ul>
          {% for item in persona.frustrations %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">Key Metrics</h4>
        <ul>
          {% for item in persona.key-metrics %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="md:w-1/4 p-1 flex items-stretch">
      <div class="w-full bg-gray-100 flex flex-col items-stretch rounded-lg p-2">
        <h4 class="text-center my-4">FinOps Benefits</h4>
        <ul>
          {% for item in persona.finops-benefits %}
          <li>{{ item.item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

</div>

{% endfor %}
```

--------------------------------

### Liquid Template for Displaying Filtered FinOps Resources

Source: https://github.com/finopsfoundation/framework/blob/main/_includes/resources-loop.md

This Liquid template is used within a Jekyll site to display a curated list of FinOps resources. It sorts resources by 'weight', filters them based on the current page's `page-identifier` tag, and limits the display to the first six matching items. Each resource is rendered as a clickable card with an image, title, type, and description. A 'View All' link is provided, and a message is shown if no resources are found for the given filter.

```Liquid
<!-- Assign variable to help identify if there are no stories -->
{% assign is_resources = false %}
{% assign count = 0 %}
<!-- Make variable with sorted oder -->
{% assign sorted_resources = site.resources | sort:"weight" reversed %}
<!-- Loop over all stories -->
{% for resource in sorted_resources %}
{% if forloop.first == true %}
<div class="flex mt-10">
  <div class="flex-grow">
    <h2 class="mt-0">Resources and Projects</h2>
  </div>
  <div>
    <a href="/resources/" class="badge-dgrey inline-flex items-center mr-0"><span>View All</span> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-px" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></a>
  </div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
{% endif %}
{% for tag in resource.framework-capabilities  %}
{% if tag == page.page-identifier %}
{% if count < 6 %}
{% assign is_resources = true %}
{% assign count = count | plus: 1 %}
<a class="block text-centre m-0 bg-white border-solid border-gray-200 border rounded-sm shadow-sm hover:border-green-500 cursor-pointer transition duration-200" href="{% if resource.link %}{{ resource.link }}{% elsif resource.permalink %}{{ resource.permalink }}{% endif %}" data-ga-category="links" data-ga-action="internal link clicks" data-ga-label="reource - {{ resource.title }} {{ resource.type }}">
  <img src="/img/search-icons/{{ resource.type }}.png" alt="{{ resource.title }}" />
  <div class="p-4">
    <h2 class="text-base font-medium mt-0 mb-2 leading-tight flex-grow">{{ resource.title }}</h2>
    <p class="text-xs leading-tight m-0 mb-1 uppercase font-semibold">{{ resource.label }} {{ resource.type }}</p>
    <p class="text-sm m-0 md:pr-8">{{ resource.description }}</p>
  </div>
</a>
{% endif %}
{% endif %}
{% endfor %}
{% if forloop.last == true %}
</div>
{% endif %}
{% endfor %} <!-- End loop of stories -->
<!-- Output if no stories -->
{% if is_resources == false %}
* Willing to contribute your real world stories, videos, a how-to guide, or a FinOps Capability playbook? <br> [Suggest resources here](/resources/)
{% endif %}

<hr class="basic" />
```

--------------------------------

### FinOps Data Efficiency Framework: Walk Stage

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/pc-project--managing-data-efficiency-playbook.md

Outlines the 'Walk' stage, where organizations estimate savings potential, track latencies, semi-regularly prioritize data, take manual actions, and track specific data efficiency KPIs like savings coverage and resource costs.

```APIDOC
- Able to estimate the net savings potential and effective $/GB rates for various data sets.
  - Able to estimate gross savings potential that can be avoided by rightsizing inefficient data and architectures. This potential will be unique across different data sets.
  - Able to estimate the required costs to rightsize the data, summing costs across people, infrastructure, and paid solutions. E.g. “it will cost 50 man hours to make this change at an hourly rate of xyz”, or “it will cost $0.01/GB for a data efficiency platform to realize the savings potential of the data”.
- Tracks the latencies to access and use data, and can estimate the performance impact of applying data efficiency approaches.
- Centrally prioritizes data for rightsizing in a semi-regular cadence with input from both Tech and Finance.
- Takes manual action to review recommendations and takes appropriate action(s) to increase data efficiency and generate net savings.
- Tracks the data efficiency savings coverage KPI, and achieves up to 50% coverage.
- Tracks the data efficiency-specific resource cost KPIs, with costs consuming between 20% and 50% of gross savings.
- Tracks the average data efficiency read/write latency KPI and thus the impact of data efficiency approaches on performance, and achieves increases of no greater than 5X latency relative to the cloud object storage baseline.
- Applies data efficiency to most data except frequently accessed data.
- Integrates data efficiency inline with applications on an-adhoc basis.
- Implements ad hoc reporting on other relevant data efficiency KPIs.
```

--------------------------------

### HTML Structure for Capability Search UI

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/framework/capabilities.md

This HTML snippet defines the basic layout for a search interface, including a container for an instant search component, a search input field, a results display area, and pagination controls. It is commented out in the provided source.

```HTML
<div class="ais-InstantSearch">
  <div class="bg-gray-200 p-4 rounded-md my-8">
    <h3 class="mt-2">Search Capabilities</h3>
    <div id="capability-search"></div>
    <div id="capability-hits"></div>
  </div>
  <div id="pagination"></div>
</div>
```

--------------------------------

### Jekyll Liquid: Dynamic Footer Navigation from Data

Source: https://github.com/finopsfoundation/framework/blob/main/_includes/footer.html

These Liquid snippets demonstrate how to iterate over `site.data.navigation_footer` to generate structured navigation links for different sections of a website footer. Each block targets a specific top-level navigation item ('FinOps Foundation', 'Resources', 'Certification') and creates a list of its children, if available.

```Liquid
{% for item in site.data.navigation_footer %} {% if item.name == 'FinOps Foundation' %} {% if item.children != null %} {% for child in item.children %}*   [{{ child.name }}]({{ child.url }})
{% endfor %} {% endif %} {% endif %} {% endfor %}
```

```Liquid
{% for item in site.data.navigation_footer %} {% if item.name == 'Resources' %} {% if item.children != null %} {% for child in item.children %}*   [{{ child.name }}]({{ child.url }})
{% endfor %} {% endif %} {% endif %} {% endfor %}
```

```Liquid
{% for item in site.data.navigation_footer %} {% if item.name == 'Certification' %} {% if item.children != null %} {% for child in item.children %}*   [{{ child.name }}]({{ child.url }})
{% endfor %} {% endif %} {% endif %} {% endfor %}
```

--------------------------------

### Persisting PostgreSQL Data with Docker Host Volume

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--container-costs.md

This Docker command demonstrates how to run a PostgreSQL container while persisting its data on the host machine using a host volume. This ensures data durability for stateful applications like databases, allowing the database engine to be containerized while its data remains on the host filesystem.

```docker
docker run -dit -v /var/myapp/data:/var/lib/postgresql/data postgres.
```

--------------------------------

### SoftwareONE FinOps Vendor Page Configuration

Source: https://github.com/finopsfoundation/framework/blob/main/_tools-services/softwareone.md

YAML configuration defining SoftwareONE's vendor profile, including company details, product overview, FinOps capabilities, and related resources for a member page.

```YAML
---
# Please do not alter layout as it will break the vendor page
layout: member

# Vendor details
name: SoftwareONE
logo-url: "https://www.softwareone.com/-/media/settings/softwareone-logo-4c.svg"
linkedin-url: "https://www.linkedin.com/company/softwareone"
website-url: "https://www.softwareone.com/en/"

# Maximum character count is 350 the rest will be truncated and hidden automatically on your page
company-description: SoftwareONE is a leading global platform, solutions and services provider with 30 years of experience in software and technology. Our offering spans from software licensing and procurement to software lifecycle management and every aspect of cloud-first advisory, delivery and managed solutions. We have the expertise to support our clients throughout their technology roadmap in today’s digital world.

# Membership level, type and vendor certifications
member-level: premier
member-order: 10

type: 
- Platform Provider
- Service Provider

certified-status:
- FinOps Certified Service Provider
- FinOps Certified Platform

# Product(s) or service overview maximum character count is 1000 the rest will be truncated and hidden automatically on your page
product-overview: SoftwareONE is a leading global provider of end-to-end software and cloud technology solutions, headquartered in Switzerland. With an IP and technology-driven services portfolio, it enables companies to holistically develop and implement their commercial, technology and digital transformation strategies. This is achieved by modernizing applications and migrating critical workloads to public clouds, while simultaneously managing and optimizing the related software and cloud assets and licenses. SoftwareONE’s offerings are connected by PyraCloud, its proprietary digital platform, which provides customers with data-driven, actionable intelligence. With around 7,700 employees and sales and service delivery capabilities in 90 countries, SoftwareONE provides around 65,000 business customers with software and cloud solutions from over 7,500 publishers.

product-video-url: "https://player.vimeo.com/video/470940196?color=D21034&title=0&byline=0&portrait=0"

# Related product or service resources, the titles will have associated URLs, e.g. product -->
product-resources:
- title: Cloud Financial Management
  url: "https://www.softwareone.com/en/cloud-financial-management"
- title: Cloud FinOps Diagnostic
  url: "https://www.softwareone.com/en/solutions/software-lifecycle-management/the-diagnostic/cloud-finops-diagnostic"
- title: Cloud Cost Optimization
  url: "https://www.softwareone.com/en/solutions/software-lifecycle-management/cloud-cost-optimization"

# Supported capabilities in the framework by the product(s) or services. Match the page-identifier per capability in order for the capability to show up on the vendor page.
capabilities:
- capability_allocation
- capability_shared-cost
- capability_anomalies
- capability_commitment-discounts
- capability_rightsizing
- capability_workload-automation
- capability_normalization
- capability_budget-management
- capability_asset-management
- capability_policy-governance
- capability_showback

# Edit as appropriate to display supported clouds
clouds-supported:
- AWS
- Azure

# FinOps Foundation Member since 
date: 2020-11-01

# Show recent related FinOps activity, it can be content, webinars, thought leadership and include external links
recent-finops-activity:
- title: Going the Distance with FinOps Webinar
  url: "https://www.softwareone.com/en/webinars/2021/04/06/going-the-distance-with-finops"
- title: PyraCloud Powers FinOps
  url: "https://www.softwareone.com/-/media/global/insights/free-content/flyer-swo-pyracloud-finops-en.pdf?rev=d939313175554130ae881bd180b49fe0&sc_lang=en"
- title: "FinOps - Inform: Gain Visibility to Take Control of Your Cloud Spend Video"
  url: "https://vimeo.com/492368380"

# Dedicated slack channel
slack:
- title:
  url:

# The total number of FinOps Certified Practitioners at the vendor 
number-of-focp: 150

# List the key contribution areas in the FinOps Foundation, examples listed
contribution-areas:

---
```

--------------------------------

### FinOps Maturity Model Guidelines and Characteristics

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/framework/maturity-model.md

Defines the characteristics and sample Key Performance Indicators (KPIs) for each FinOps maturity level: Crawl, Walk, and Run. These guidelines help organizations assess their current state and identify areas for improvement based on business value.

```APIDOC
FinOps Maturity Levels:
  Crawl:
    Characteristics:
      - very little reporting and tooling
      - measurements only provide insight into the benefits of maturing the capability
      - basic KPIs set for the measurement of success
      - basic processes and policies are defined around the capability
      - Capability is understood but not followed by all the major teams within the organization
      - plans to address "low hanging fruit"
    Sample Goals/KPIs:
      - should be able to allocate at least 50%
      - resource-based commitments discount target coverage of approximately 60%
      - forecast spend to actual spend accuracy variance is 20%

  Walk:
    Characteristics:
      - Capability is understood and followed within the organization
      - difficult edge cases are identified but decision to not address them is adopted
      - automation and/or processes cover most of the Capability requirements
      - most difficult edge cases are identified and effort to resolve has been estimated
      - medium to high goals/KPIs set on the measurement of success
    Sample Goals/KPIs:
      - should be able to allocate at least 80%
      - resource-based commitments discount target coverage is approximately 70%
      - forecast spend to actual spend accuracy variance is 15%

  Run:
    Characteristics:
      - Capability is understood and followed by all teams within the organization
      - Difficult edge cases are being addressed
      - very high goals/KPIs set on the measurement of success
      - Automation is the preferred approach
    Sample Goals/KPIs:
      - greater than 90% of spend can be allocated
      - resource-based commitments discount target coverage is approximately 80%
      - forecast spend to actual spend accuracy variance is 12%
```

--------------------------------

### AURI, PURI, NURI (AWS mostly)

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/resources/terminology.md

All Upfront Reserved Instance, Partial Upfront Reserved Instance and No Upfront Reserved Instance. Some people use these acronyms when referring to reserved instances, in case you hear them.

```APIDOC
AURI, PURI, NURI (AWS mostly):
  Description: All Upfront Reserved Instance, Partial Upfront Reserved Instance and No Upfront Reserved Instance. Some people use these acronyms when referring to reserved instances, in case you hear them.
```

--------------------------------

### Jekyll/Liquid Template for FinOps Pages

Source: https://github.com/finopsfoundation/framework/blob/main/_layouts/wide.html

This snippet illustrates the use of Jekyll and Liquid templating to construct dynamic web pages. It includes conditional rendering based on `page.identifier`, integration of external links, inclusion of shared HTML components (`nav.html`, `modals/contribute.html`), and basic variable assignment (`assign url`, `assign size`). It also shows a `javascript:void(0)` link.

```Liquid
--- layout: basic --- {% if page.identifier == 'introduction' %}

[

FinOps X 2023 - Super Early Bird Registration Now Open



](https://x.finops.org)

{% endif %} {% if page.identifier == 'framework' %}

[

Take part in the State of FinOps Survey 2023



](https://www.surveymonkey.co.uk/r/2FF538F)

{% endif %}

{% include nav.html %}

### Ready to Get FinOps Certified?

[Learn More](https://learn.finops.org/)

{% if page.identifier == 'framework' or page.identifier == 'projects' %}

[Make Suggestion](javascript:void\(0\);)

{% assign url = page.url %} {% assign size = url | size | minus: 1 %} {% endif %}

{{ content }}

{% include modals/contribute.html %}
```

--------------------------------

### Comparative Cloud Cost Management Tools and Services

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--multi-cloud.md

A comparison of various cloud cost management tools and services across Google Cloud Platform (GCP), Amazon Web Services (AWS), Microsoft Azure, and Oracle Cloud Infrastructure (OCI), categorized by function such as alerts, template deployment, controls, recommendations, and insights. This section helps FinOps practitioners identify equivalent services across different cloud providers.

```APIDOC
Alerts and Notifications:
  GCP: Budget Alerts
  AWS: Budgets
  Azure: Budgets
  OCI: Budget Alerts

Template Driven Deployment:
  GCP: Terraform, Cloud Deployment Manager
  AWS: CloudFormation
  Azure: Resource Manager
  OCI: Terraform

Controls:
  GCP: Quotas and Rate Limit APIs
  AWS: Service Quotas, Instance Scheduler, Amazon Data Lifecycle Manager
  OCI: Quotas, Enforcing Budgets using Functions and Quotas

Recommendations:
  GCP: Recommender, Active Assist, Google Cloud's operations suite, Commitment Analysis Report
  AWS: Cost Explorer, Trusted Advisor
  Azure: Advisor
  OCI: Cloud Advisor

Insights:
  GCP: Billing Health Checks
  AWS: CloudWatch, CloudTrail
  Azure: Azure Monitor
```

--------------------------------

### Cloud Resource Tagging and Governance Tools across CSPs

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--multi-cloud.md

Tools for applying and managing tags on cloud resources to enable better cost allocation, governance, and reporting.

```APIDOC
GCP:
  Resource Hierarchy: https://cloud.google.com/resource-manager/docs/cloud-platform-resource-hierarchy
```

```APIDOC
AWS:
  AWS Tag Editor: https://docs.aws.amazon.com/ARG/latest/userguide/tag-editor.html
```

```APIDOC
Azure:
  Azure Policy (Tag Governance): https://docs.microsoft.com/azure/governance/policy/tutorials/govern-tags
```

```APIDOC
OCI:
  OCI Tags: https://docs.oracle.com/en-us/iaas/Content/Tagging/home.htm
```

--------------------------------

### Generate JSON Array of Site Capabilities with Associated Domains

Source: https://github.com/finopsfoundation/framework/blob/main/json/capabilities.html

This Liquid template processes `site.capabilities` and `site.domains` collections to construct a JSON array. Each entry in the array represents a capability, including its metadata, content, and a list of associated framework domains. The `content` field is stripped of HTML and newlines, and escaped for JSON compatibility. The output is a valid JSON array of objects.

```Liquid
\--- search-title: nosearch permalink: json/capabilities.json sitemap: false ---\n{% assign list_pages = \"\" %}\n{% for item in site.capabilities %}\n{% if item.search %}\n{% assign domain-titles = \"\" | split: ',' %}\n{% for domain in site.domains %}\n{% for tag in domain.framework-capabilities %}\n{% if tag == item.page-identifier %}\n{% assign domain-titles = domain-titles | push: domain.framework-domain-title %}\n{% endif %}\n{% endfor %}\n{% endfor %}\n{% capture list_item %} {\"objectID\": \"{{ forloop.index }}\", \"meta_title\": \"{{ item.framework-capability-title }}\", \"meta_desc\": \"{{ item.framework-capability-desc }}\", \"label\": \"{{ item.label }}\", \"keywords\": \"{{ item.search-keywords }}\", \"content\": \"{{ item.content | strip_html | strip_newlines | escape }}\", \"domains\": \[{% for domain in domain-titles %} \"{{ domain }}\"{% unless forloop.last %},{% endunless %}{% endfor %}\\] , \"url\": \"{{ item.url }}\", \"order\": {{ item.order }}} {% endcapture %}\n{% capture list_pages %}{% unless list_pages == \"\" %}{{ list_pages }},{% endunless %}{{ list_item }}{% endcapture %}\n{% endif %}\n{% endfor %}\n{% unless list_pages == blank %}\n \[{{ list_pages }}\]\n{% endunless %}
```

--------------------------------

### FinOps Data Efficiency Framework: Run Stage

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/pc-project--managing-data-efficiency-playbook.md

Details the advanced 'Run' stage, characterized by frequent and central prioritization, automatic application of data efficiency, high savings coverage, low resource costs, minimal latency impact, and pervasive integration.

```APIDOC
- Frequently and centrally prioritizes data for rightsizing with input from both Tech and Finance.
- Automatically applies data efficiency, except where application changes are required.
- Achieves data efficiency savings coverage of >50%.
- Data efficiency-specific resource costs consume <20% of gross savings.
- Data efficiency increases average read/write latency by <2X relative to object storage baseline
- Applies data efficiency without regard to access frequency.
- Integrates data efficiency inline and by default for all existing and new applications.
- Uses data efficiency to reduce effective $/GB intra-cloud transfer rates as well as inter-cloud transfer rates.
- Implements regular reporting and notifications for data efficiency KPIs.
```

--------------------------------

### Liquid Template for Displaying FinOps Certified Solutions

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/members/finops-certified-solution.html

This Liquid template iterates through a sorted list of vendors from `site.tools-services`. It filters for vendors with 'FinOps Certified Solution' status and displays their logo as a clickable link. The link destination varies based on whether the vendor is marked as 'temporary'.

```Liquid
{% assign sorted_vendor = site.tools-services | sort: 'name' %}
{% for vendor in sorted_vendor %}
{% if vendor.certified-status contains 'FinOps Certified Solution' %}

{% if vendor.temporary %} [![{{ vendor.name }}]({{ vendor.logo-url }}) ]({{ vendor.website-url }}){% else %} [![{{ vendor.name }}]({{ vendor.logo-url }}) ]({{ vendor.url }}){% endif %}

{% endif %}
{% endfor %}
```

--------------------------------

### Cloud Cost Planning Tools across CSPs

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/project--multi-cloud.md

Tools provided by Cloud Service Providers to help FinOps practitioners plan potential cloud costs in advance of consumption.

```APIDOC
GCP Pricing Calculator: https://cloud.google.com/products/calculator
```

```APIDOC
AWS Pricing Calculator: https://calculator.aws/
```

```APIDOC
Azure Pricing Calculator: https://azure.microsoft.com/pricing/calculator/
```

```APIDOC
OCI Cost Estimator: https://www.oracle.com/cloud/costestimator.html
```

--------------------------------

### FinOps Data Efficiency: Business/Product Role Activities

Source: https://github.com/finopsfoundation/framework/blob/main/_resources/pc-project--managing-data-efficiency-playbook.md

Outlines the responsibilities of Business/Product roles in the FinOps data efficiency framework, focusing on KPI definition, demand forecasting, and establishing business goals.

```APIDOC
- Clearly define KPIs so that engineering are able to design and/or purchase appropriate data efficiency services within the defined boundaries.
- Provide demand forecasts and information on the demand pattern profiles (daily/weekly/monthly/cyclic).
- Establish the business goals for the objective - i.e. reduce the effective storage rate by >20%, release to customers as quickly as possible, release to customers w/ an availability of 99.99%, etc. (aka Business Value Creation!)
```

--------------------------------

### Enrollment (Azure)

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/resources/terminology.md

When a customer has an Enterprise Agreement (EA) with Microsoft, they use an enrollment level portal to access all of their Microsoft licenses and high-level billing information, including for Azure use. Companies with an Enrollment manage this for themselves, and create Subscriptions, an analog to AWS Accounts or GCP Projects, underneath the Enrollment. Companies who buy Azure through a CSP Reseller receive their Subscriptions, but the reseller owns and controls the Enrollment level portal and information.

```APIDOC
Enrollment (Azure):
  Description: When a customer has an Enterprise Agreement (EA) with Microsoft, they use an enrollment level portal to access all of their Microsoft licenses and high-level billing information, including for Azure use. Companies with an Enrollment manage this for themselves, and create Subscriptions, an analog to AWS Accounts or GCP Projects, underneath the Enrollment. Companies who buy Azure through a CSP Reseller receive their Subscriptions, but the reseller owns and controls the Enrollment level portal and information.
```

--------------------------------

### Displaying FinOps Certified Platforms with Liquid

Source: https://github.com/finopsfoundation/framework/blob/main/_pages/members/finops-certified-platform.html

This Liquid template snippet dynamically generates a list of FinOps Certified Platforms. It sorts vendor data, filters for certified platforms, and creates clickable image links for each, using vendor name, logo URL, and external URL from the `site.tools-services` collection.

```Liquid
{% assign sorted_vendor = site.tools-services | sort: 'name' %} {% for vendor in sorted_vendor %} {% if vendor.certified-status contains 'FinOps Certified Platform' %}

[![{{ vendor.name }}]({{ vendor.logo-url }})]({{ vendor.url }})

{% endif %} {% endfor %}
```