<commit_before><!--
 Copyright 2021 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<template>
  <div>
    <Breadcrumbs :links="getBreadcrumbs()" />
    <!-- Header -->
    <div
      class="header-image py-10 lg:py-20 px-std border-b border-gray-100"
      style="
        --header-bg-image-desktop: url('/img/banners/desktop/authors-wide.png');
        --header-bg-image-mobile: url('/img/banners/mobile/authors-wide.png');
      "
    >
      <h1>Authors</h1>
      <p class="mt-1">
        All content on Dev Library is contributed by our incredible authors!
      </p>
    </div>

    <!-- Body -->
    <div id="pagebody" class="mb-4 px-std">
      <!-- Search bar -->
      <div class="frc">
        <div
          class="mt-4 frc rounded-lg max-w-lg border border-gray-200 px-2 w-80"
        >
          <font-awesome-icon
            icon="search"
            size="sm"
            class="text-mgray-700 opacity-70"
          />
          <input
            class="px-2 py-1 flex-grow"
            type="text"
            id="authorSearchBar"
            @input="setTempAuthorFilter"
            :value="authorFilter"
            placeholder="Search for authors"
          />
          <font-awesome-icon
            v-if="authorFilter.length > 0"
            @click="authorFilter = ''"
            icon="times-circle"
            class="text-mgray-700 cursor-pointer opacity-70"
          />
        </div>
        <MaterialButton
          @click.native="authorFilter = tempAuthorFilter"
          type="primary"
          class="ml-2 mt-4"
          id="authorSearchButton"
        >
          <font-awesome-icon icon="search" class="ml-1" />
          Search
        </MaterialButton>
      </div>
      <div
        v-if="showNoMatchesMessage"
        class="text-mgray-700 opacity-70 py-8 px-1"
      >
        <font-awesome-icon :icon="['fas', 'exclamation-circle']" class="mr-1" />
        No authors matching your search.
      </div>

      <!-- Author Cards -->
      <div
        class="py-4 grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
      >
        <!-- Author Card -->
        <div
          v-for="author in displayedAuthors"
          v-show="showAuthor(author)"
          :key="author.id"
          class="card card-clickable px-5 py-4 flex flex-col items-center text-center"
        >
          <CircleImage
            v-if="authorImageLoaded[author.id]"
            :src="author.metadata.photoURL"
            :lazy="true"
            class="flex-shrink-0 avatar border-none"
            size="small"
          />
          <div v-else v-html="getDynamicAuthorImage(author)"></div>
          <div>
            <div class="mt-2 wrap-lines-1 font-medium font-display">
              {{ author.metadata.name }}
            </div>

            <!-- Icons -->
            <div class="mt-2 flex flex-row justify-center gap-2 text-sm">
              <a
                v-if="author.metadata.githubURL"
                :href="author.metadata.githubURL"
                target="_blank"
                class="icon-link"
              ><commit_msg>Improves author image load time (#487)<commit_after><!--
 Copyright 2021 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<template>
  <div>
    <Breadcrumbs :links="getBreadcrumbs()" />
    <!-- Header -->
    <div
      class="header-image py-10 lg:py-20 px-std border-b border-gray-100"
      style="
        --header-bg-image-desktop: url('/img/banners/desktop/authors-wide.png');
        --header-bg-image-mobile: url('/img/banners/mobile/authors-wide.png');
      "
    >
      <h1>Authors</h1>
      <p class="mt-1">
        All content on Dev Library is contributed by our incredible authors!
      </p>
    </div>

    <!-- Body -->
    <div id="pagebody" class="mb-4 px-std">
      <!-- Search bar -->
      <div class="frc">
        <div
          class="mt-4 frc rounded-lg max-w-lg border border-gray-200 px-2 w-80"
        >
          <font-awesome-icon
            icon="search"
            size="sm"
            class="text-mgray-700 opacity-70"
          />
          <input
            class="px-2 py-1 flex-grow"
            type="text"
            id="authorSearchBar"
            @input="setTempAuthorFilter"
            :value="authorFilter"
            placeholder="Search for authors"
          />
          <font-awesome-icon
            v-if="authorFilter.length > 0"
            @click="authorFilter = ''"
            icon="times-circle"
            class="text-mgray-700 cursor-pointer opacity-70"
          />
        </div>
        <MaterialButton
          @click.native="authorFilter = tempAuthorFilter"
          type="primary"
          class="ml-2 mt-4"
          id="authorSearchButton"
        >
          <font-awesome-icon icon="search" class="ml-1" />
          Search
        </MaterialButton>
      </div>
      <div
        v-if="showNoMatchesMessage"
        class="text-mgray-700 opacity-70 py-8 px-1"
      >
        <font-awesome-icon :icon="['fas', 'exclamation-circle']" class="mr-1" />
        No authors matching your search.
      </div>

      <!-- Author Cards -->
      <div
        class="py-4 grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
      >
        <!-- Author Card -->
        <div
          v-for="author in displayedAuthors"
          v-show="showAuthor(author)"
          :key="author.id"
          class="card card-clickable px-5 py-4 flex flex-col items-center text-center"
        >
          <CircleImage
            v-if="authorImageLoaded[author.id] ||
              authorImageLoaded[author.id] == undefined"
            :src="author.metadata.photoURL"
            :lazy="true"
            class="flex-shrink-0 avatar border-none"
            size="small"
          />
          <div v-else v-html="getDynamicAuthorImage(author)"></div>
          <div>
            <div class="mt-2 wrap-lines-1 font-medium font-display">
              {{ author.metadata.name }}
            </div>

            <!-- Icons -->
            <div class="mt-2 flex flex-row justify-center gap-2 text-sm">
              <a
                v-if="author.metadata.githubURL"
                :href="author.metadata.githubURL"
                target="_blank"
                class="icon-link"
              >
{'fraction_non_alphanumeric': 0.131390874106652, 'fraction_numerical': 0.017729521715228146, 'mean_word_length': 1.7450018860807242, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5798709', 'n_tokens_mistral': 2168, 'n_tokens_neox': 2091, 'n_words': 499}