index.html

---
layout: default
additional_css: homepage
searchExamples:
  - quotient familial
  - revenu fiscal de référence
  - cadastre
featuredApis:
  - FranceConnect
  - Base Adresse Nationale
  - le.Taxi
featuredServices:
  - La Bonne Boîte
  - Mes aides
  - Simulateur de coût d'embauche
---

<section id="mission-statement">
  <div class="header-with-image">
    <img class="ui small image" src="/img/Apigouv_visual.svg" alt="Une API connecte des services à la puissance d'internet" />
    <div>
      <h1 class="ui header">
        {{ site.description }}
      </h1>
      <div class="ui search">
        <div class="ui fluid left icon input">
          <input class="prompt"
                placeholder="{{ page.searchExamples | join: ', '}}…"
                type="search">
          <i class="search icon"></i>
        </div>
        <div class="results transition hidden">
        </div>
      </div>
    </div>
  </div>
</section>

<section id="apis">
  <div class="ui container">
    <h2>Les API à la une</h2>

    <div class="ui three stackable cards">
      {% for api in site.api %}
        {% if page.featuredApis contains api.title %}
          {% include api-card.html description=api %}
        {% endif %}
      {% endfor %}
    </div>

    <p class="buttonContainer">
       <a class="ui big button moreButton" href="/apis">Découvrez les {{ site.api | size }} API&nbsp;&nbsp;➤</a>
    </p>
  </div>
</section>

<section id="services" class="ui container">
  <h2>Services utilisant les API</h2>

  <div class="ui three stackable cards">
    {% for service in site.service %}
      {% if page.featuredServices contains service.title %}
        {% include service-card.html service=service %}
      {% endif %}
    {% endfor %}
  </div>

  <p class="buttonContainer">
    <a class="ui big button moreButton" href="/services">Découvrez les {{ site.service | size }} services&nbsp;&nbsp;➤</a>
  </p>
</section>

<div id="description" class="ui container">
  <div class="ui floating message">
    <div class="header">
      Pourquoi api.gouv.fr ?
    </div>
    <p>
      Vous êtes une administration, une collectivité, un éditeur de solutions pour les particuliers ou les entreprises et souhaitez simplifier radicalement la relation des usagers à l’administration.
    </p>
    <p>Une <abbr title="Application Programming Interface">API</abbr> permet la communication entre des systèmes informatiques qui n'ont pas forcément été conçus ensemble à l'origine. Dans api.gouv.fr, nous ne référençons que des API accessibles par internet. Curieux ? Découvrez en détails <a href="/qu-est-ce-qu-une-api">ce qu'est une API</a>.</p>
    <p>
      Les API proposées vous permettent de&nbsp;:
    </p>
    <ul>
      <li>simplifier les démarches ;</li>
      <li>guider l'usager dans la saisie d'informations ;</li>
      <li>récupérer des informations connues de l'administration ;</li>
      <li>à vous d'inventer la suite !</li>
    </ul>

    <a class="ui button moreButton" href="/apropos">En savoir plus</a>

    <div class="header padded">
      Notions importantes
    </div>

    <div class="ui stackable grid container">
      {% for notion in site.data.notions %}
      <div class="item eight wide column">
        <h3 class="ui top attached header">
          {% if notion.link %}
            <a href="{{ notion.link }}">{{ notion.name }}</a>
          {% else %}
            {{ notion.name }}
          {% endif %}
        </h3>
        <div class="ui attached segment">
          {{ notion.definition }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

</div>


<script>
var minChar = 1;
var htmlFooter = '<a href="/apis" class="action">Explorez les {{ site.api | size }} API déjà disponibles</a>';
function escapeRegExChars(value) {
  return value.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
}
function spanHighlight(val) {
  return '<span class="result-highlight">'+val+'</span>';
}

function highlight(value, term) {
    var term = term.unidecode().toLowerCase();
    var valueUnidecoded = value.unidecode().toLowerCase();
    var pos_occurences = [];
    var pos = valueUnidecoded.indexOf(term);
    while(pos != -1) {
        pos_occurences.push(pos);
        pos = valueUnidecoded.indexOf(term, pos+1);
    }
    $.each(pos_occurences.reverse(), function() {
        value = value.substring(0, this)
              + spanHighlight(value.substr(this, term.length))
              + value.substring(this + term.length);
    });
    return value;
}

function getHighLightFromArray(array, label, searchTerm) {
  var termHighlighted = []
  $.each(array, function(){
    var val = this.innerHTML;
    if (val.search(searchTerm) != -1) {
      termHighlighted.push(spanHighlight(val));
    }
  });
  if(termHighlighted.length > 0) {
    return '<br>' + label + '&nbsp;: ' + termHighlighted.slice(0, 3).join(', ');
  } else {
    return ''
  }
}

function onSearchQuery(searchTerm) {
  //this part higlights results
  var module = $(this);
  $.each(module.find('.content'), function() {
    var content = $(this);
    $.each(content.find('.description'), function() {
      var description = $(this);
      description.html(highlight($(this).html(), searchTerm));
      $.each([['keywords', 'tags'],
            ['partners', 'partenaires'],
            ['clients', 'clients']], function() {
        var HighLightFromArray = getHighLightFromArray(
                                   content.find('.'+this[0]+ ' ul li'),
                                   this[1],
                                   searchTerm
        );
        if (HighLightFromArray) {
          description.append(HighLightFromArray);
          return false;
        }
      });
    });
  });
}

function customTemplate(response, fields) {
  var html = '';
  $.each(response[fields.results], function(index, value) {
    html += '<a class="result" href="'+ value.url +'">'
         +  '<div class="image"> <img src="/img/'+ value.image +'"></div>'
         +  '<div class="content">'
         +  '<div class="title">' + value.title + '</div>'
         +  '<div class="description">' + value.description + '</div>';
    $.each(['keywords', 'clients', 'partners'], function(i, key) {
      html += '<div class="' + key + '" hidden="true"><ul>';
        $.each(value[key], function(i, v) {
          html += '<li>' + v + '</li>';
        });
      html += '</ul></div>';
    });
    html += '</div>'
    html += '</a>'
  });
  html += htmlFooter;
  return html;
}

$(document).ready(function() {
    $.getJSON('/api/v1/api.json', function(toSearch) {
        searchFields = ['title', 'description', 'keywords'];
        for(var i=0; i<toSearch.length; i++) {
            toSearch[i]['unidecoded'] = searchFields.map(
                        function(v){return toSearch[i][v];})
                     .join()
                     .unidecode()
            ;
        }
        searchFields.push('unidecoded');
    $('.ui.search').search({
       type: 'custom',
       source: toSearch,
       searchFields: searchFields,
       searchFullText: false,
       showNoResults: true,
       regExp: {
         escape     : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
         beginsWith : ''
       },
       onSearchQuery: onSearchQuery,
       templates: {
         custom: customTemplate
       }
    });
  })
});
</script>