@paroicms/playground_demo2 0.56.0

package/theme/templates/contact-page.liquid

@@ -0,0 +1,15 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <main class="Container">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    <h1>{{ doc.title }}</h1>
+    <div class="Text">{{ doc.field.htmlContent | raw }}</div>
+    <p>{{ site.field.contactEmail | obfuscate: "asLink" }}&#32;-&#32;{{ site.field.phone | obfuscate: "asLink" }}</p>
+    <div
+      data-effect="contactForm"
+      data-recaptcha-key="{{ site.recaptchaKey }}"
+      data-home-url="{{ site.home.url }}"></div>
+  </main>
+{% endblock %}

package/theme/templates/exhibition.liquid

@@ -0,0 +1,33 @@
+{% layout "layouts/main-layout.liquid"
+  , doc: doc 
+  , site: site %}
+{% block %}
+  {% getPaginatedDocs exhibitions
+    , parentId: doc.id
+    , pageSize: 4 %}
+  <div class="PageContent Container pt0">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    <div class="PageContent-headerPage Container">
+      <h1 class="PageContent-h1 upper">
+        {{ doc.title }}
+      </h1>
+    </div>
+    <div class="Container">
+      <div
+        class="Grid12"
+        data-effect="infiniteLoading"
+        data-parent-id="{{ doc.id }}"
+        data-start="{{ exhibitions.pageSize }}"
+        data-limit="{{ exhibitions.pageSize }}"
+        data-total="{{ exhibitions.total }}"
+        data-template="post">
+        {% for exhibition in exhibitions.items %}
+          {% render "partials/post.public.liquid"
+            , doc: exhibition %}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+{% endblock %}

package/theme/templates/home.liquid

@@ -0,0 +1,218 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <main>
+    {% if doc.featuredImage %}
+      {% useImage smallImg
+        , uid: doc.featuredImage.uid
+        , size: "360x100" %}
+      {% useImage mediumImg
+        , uid: doc.featuredImage.uid
+        , size: "820x150" %}
+      {% useImage largeImg
+        , uid: doc.featuredImage.uid
+        , size: "1920x275" %}
+
+      <picture class="HeroBanner">
+        <source
+          width="{{ smallImg.width }}"
+          height="{{ smallImg.height }}"
+          srcset="{{ smallImg.url }}"
+          media="(max-width: 360px)">
+        <source
+          width="{{ mediumImg.width }}"
+          height="{{ mediumImg.height }}"
+          srcset="{{ mediumImg.url }}"
+          media="(max-width: 1024px)">
+        <source
+          width="{{ largeImg.width }}"
+          height="{{ largeImg.height }}"
+          srcset="{{ largeImg.url }}"
+          media="(min-width: 1920px)">
+
+        <img
+          class="HeroBanner-img"
+          src="{{ largeImg.url }}"
+          width="{{ largeImg.width }}"
+          height="{{ largeImg.height }}"
+          alt=""
+          loading="lazy">
+      </picture>
+    {% endif %}
+
+    {% getDocs posts
+      , parentId: site.home.posts.id
+      , limit: 4
+    %}
+    <section class="TileList Container">
+      <h2>
+        {{ "Latest posts" | t }}
+      </h2>
+      <div class="Grid12">
+        {% for post in posts %}
+          {% render "partials/post.public.liquid"
+            , doc: post %}
+        {% endfor %}
+      </div>
+      {% getDoc postsPage
+        , id: site.home.posts.id %}
+      <a href="{{ postsPage.url }}">
+        {{ "All posts" | t }}
+      </a>
+    </section>
+
+    {% getDocs pages
+      , parentId: site.home.pages.id %}
+    <section class="TileList Container">
+      <h2>{{ "Pages" | t }}</h2>
+      <div class="Grid12">
+        {% for gPage in pages %}
+          <article class="Tile2 Span4">
+            {% if gPage.defaultImage %}
+              {% useImage image
+                , uid: gPage.defaultImage.uid
+                , size: "200x200" %}
+              <img
+                class="Tile2-img"
+                src="{{ image.url }}"
+                width="{{ image.width }}"
+                height="{{ image.height }}"
+                alt=""
+                loading="lazy">
+            {% endif %}
+            <div class="Tile2-text Span3">
+              <h3 class="Tile2-h1">{{ gPage.title }}</h3>
+              <p class="Tile2-excerpt">{{ gPage.excerpt | makeExcerpt: 60 }}
+                <a href="{{ gPage.url }}">
+                  {{ "Read more" | t }}</a>
+              </p>
+            </div>
+          </article>
+        {% endfor %}
+      </div>
+    </section>
+
+    <section class="Container">
+      <h1>Partners</h1>
+      {% for item in doc.list.partners %}
+        <p>RelativeId: #{{ item.relativeId }}</p>
+        {% if item.type == "partner" %}
+          <div class="PartItem partner">
+            {% if item.defaultImage %}
+              {% useImage image
+                , uid: item.defaultImage.uid
+                , size: "200x200" %}
+
+              <img
+                src="{{ image.url }}"
+                width="{{ image.width }}"
+                height="{{ image.height }}"
+                alt=""
+                loading="lazy">
+            {% endif %}
+
+            {% if item.field.url %}
+              <a href="{{ item.field.url }}">{{ item.number }} ({{ item.type }} {{ item.numberOfType }}) - {{ item.field.title }}</a>
+            {% else %}
+              <span>{{ item.number }} ({{ item.type }} {{ item.numberOfType }}) - {{ item.field.title }}</span>
+            {% endif %}
+            {{ item.field.htmlContent | raw }}
+          </div>
+        {% else %}
+          <div class="PartItem sideImage">
+            {% if item.defaultImage %}
+              {% useImage image
+                , uid: item.defaultImage.uid
+                , size: "200x200" %}
+
+              <img
+                src="{{ image.url }}"
+                width="{{ image.width }}"
+                height="{{ image.height }}"
+                alt=""
+                loading="lazy">
+
+            {% endif %}
+            {{ item.number }} ({{ item.type }} {{ item.numberOfType }}) -
+            {{ item.field.htmlContent | raw }}
+          </div>
+        {% endif %}
+        {% if item.parts %}
+          {% for child in item.parts %}
+            {{ child | info }}
+          {% endfor %}
+        {% endif %}
+      {% endfor %}
+    </section>
+
+    <section class="Container">
+      <h1>Sections</h1>
+      {% for item in doc.list.sections %}
+        {% if item.type == "partner" %}
+          <div class="PartItem partner">
+            {% if item.defaultImage %}
+              {% useImage image
+                , uid: item.defaultImage.uid
+                , size: "200x200" %}
+
+              <img
+                src="{{ image.url }}"
+                width="{{ image.width }}"
+                height="{{ image.height }}"
+                alt=""
+                loading="lazy">
+            {% endif %}
+
+            {% if item.field.url %}
+              <a href="{{ item.field.url }}">{{ item.number }} ({{ item.type }} {{ item.numberOfType }}) - {{ item.field.title }}</a>
+            {% else %}
+              <span>{{ item.number }} ({{ item.type }} {{ item.numberOfType }}) - {{ item.field.title }}</span>
+            {% endif %}
+            {{ item.field.htmlContent | raw }}
+          </div>
+        {% else %}
+          <div class="PartItem sideImage">
+            {% if item.defaultImage %}
+              {% useImage image
+                , uid: item.defaultImage.uid
+                , size: "200x200" %}
+
+              <img
+                src="{{ image.url }}"
+                width="{{ image.width }}"
+                height="{{ image.height }}"
+                alt=""
+                loading="lazy">
+
+            {% endif %}
+            {{ item.number }} ({{ item.type }} {{ item.numberOfType }}) -
+            {{ item.field.htmlContent | raw }}
+          </div>
+        {% endif %}
+        {% if item.parts %}
+          {% for child in item.parts %}
+            {{ child | info }}
+          {% endfor %}
+        {% endif %}
+      {% endfor %}
+    </section>
+
+    <section class="Container">
+      <h1>My List</h1>
+      <ul>
+        {% for item in doc.field.myList %}
+          <li>{{ item }}</li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <section class="Container">
+      <h1>Test Video</h1>
+      {% if doc.field.video %}
+        <div class="Deafness-videoPresentate Span4 Mb50">
+          Video featured
+          {{ doc.field.video | video }}
+        </div>
+      {% endif %}
+    </section>
+  </main>
+{% endblock %}

package/theme/templates/index.liquid

@@ -0,0 +1,8 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+<p>
+  {% for translation in doc.translations %}
+    <a href="{{ translation.url }}">{{ translation.languageLabel }}</a>
+  {% endfor %}
+</p>
+{% endblock %}

package/theme/templates/layouts/main-layout.liquid

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="{{ doc.language }}">
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    {{ doc | headTags }}
+    <title>
+      {% if doc.title %}
+        {{ doc.title }} -{% endif %}
+      {{ site.field.title }}</title>
+    <link rel="stylesheet" href="{{ site.assetsUrl }}/css/index.css">
+  </head>
+
+  <body>
+    {% render "partials/header"
+      , doc: doc
+      , site: site %}
+
+    {% block -%}
+    {%- endblock %}
+
+    {% render "partials/footer"
+      , doc: doc
+      , site: site %}
+    <script src="{{ site.assetsUrl }}/js/main.js" defer></script>
+  </body>
+</html>

package/theme/templates/page.liquid

@@ -0,0 +1,109 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <main class="Container">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    {% if doc.featuredImage %}
+      <div class="HeroBanner">
+        {% useImage smallImg
+          , uid: doc.featuredImage.uid size: "324x200" %}
+        {% useImage mediumImg
+          , uid: doc.featuredImage.uid size: "1024x545" %}
+        {% useImage largeImg
+          , uid: doc.featuredImage.uid size: "1200x545" %}
+
+        <picture>
+          <source
+            width="{{ smallImg.width }}"
+            height="{{ smallImg.height }}"
+            srcset="{{ smallImg.url }}"
+            media="(max-width: 360px)">
+          <source
+            width="{{ mediumImg.width }}"
+            height="{{ mediumImg.height }}"
+            srcset="{{ mediumImg.url }}"
+            media="(max-width: 1024px)">
+          <source
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            srcset="{{ largeImg.url }}"
+            media="(min-width: 1920px)">
+
+          <img
+            class="HeroBanner-img"
+            src="{{ largeImg.url }}"
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            alt=""
+            loading="lazy">
+        </picture>
+      </div>
+    {% endif %}
+
+    <h1>{{ doc.title }}</h1>
+
+    {% if doc.field.gallery %}
+      <div class="Gallery ">
+        {% for media in doc.field.gallery %}
+          {% useImage smallImg
+            , uid: media.uid
+            , size: "324x200" %}
+          {% useImage mediumImg
+            , uid: media.uid
+            , size: "1024x545" %}
+          {% useImage largeImg
+            , uid: media.uid
+            , size: "1200x545" %}
+
+          <picture>
+            <source
+              width="{{ smallImg.width }}"
+              height="{{ smallImg.height }}"
+              srcset="{{ smallImg.url }}"
+              media="(max-width: 360px)">
+            <source
+              width="{{ mediumImg.width }}"
+              height="{{ mediumImg.height }}"
+              srcset="{{ mediumImg.url }}"
+              media="(max-width: 1024px)">
+            <source
+              width="{{ largeImg.width }}"
+              height="{{ largeImg.height }}"
+              srcset="{{ largeImg.url }}"
+              media="(min-width: 1920px)">
+
+            <img
+              class="Gallery-item"
+              src="{{ largeImg.url }}"
+              width="{{ largeImg.width }}"
+              height="{{ largeImg.height }}"
+              alt=""
+              loading="lazy">
+          </picture>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    <div class="Container Text selfContained justified">{{ doc.field.htmlContent | raw }}</div>
+    <div class="Paginate Grid12">
+      {% if doc.siblings.previous %}
+        <a href="{{ doc.siblings.previous.url }}" class="Paginate-prev Span6">
+          <span class="Paginate-prevBtn">
+            {{ "Previous" | t }}
+          </span>
+          <h2 class="Paginate-title EllipsisLine2">{{ doc.siblings.previous.title }}</h2>
+        </a>
+      {% endif %}
+
+      {% if doc.siblings.next %}
+        <a href="{{ doc.siblings.next.url }}" class="Paginate-next  Span6">
+          <span class="Paginate-nextBtn ">
+            {{ "Next" | t }}
+          </span>
+          <h2 class="Paginate-title EllipsisLine2">{{ doc.siblings.next.title }}</h2>
+        </a>
+      {% endif %}
+    </div>
+  </main>
+{% endblock %}

package/theme/templates/pages.liquid

@@ -0,0 +1,34 @@
+{% layout "layouts/main-layout.liquid"
+  , doc: doc 
+  , site: site %}
+{% block %}
+  {% getPaginatedDocs pages
+    , parentId: doc.id
+    , pageSize: 4 %}
+  <div class="PageContent Container pt0">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    <div class="PageContent-headerPage Container">
+      <h1 class="PageContent-h1 upper">
+        {{ doc.title }}
+      </h1>
+    </div>
+    <div class="Container">
+      <div
+        class="Grid12"
+        data-effect="infiniteLoading"
+        data-parent-id="{{ doc.id }}"
+        data-start="{{ pages.pageSize }}"
+        data-limit="{{ pages.pageSize }}"
+        data-total="{{ pages.total }}"
+        data-template="post">
+        {% for page in pages.items %}
+          {% render "partials/post.public.liquid"
+            , doc: page
+            , site: site %}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+{% endblock %}

package/theme/templates/partials/breadcrumb.liquid

@@ -0,0 +1,13 @@
+<div class="Breadcrumb">
+  {% for item in doc.breadcrumb %}
+    <a class="Breadcrumb-a HFont" href="{{ item.url }}">{{ item.title }}</a>
+    <img
+      class="Breadcrumb-imgIcon"
+      src="{{ site.assetsUrl }}/icons/arrow-grey.svg"
+      width="32"
+      height="32"
+      loading="lazy"
+      alt="/">
+  {% endfor %}
+  <span class="Breadcrumb-span HFont">{{ doc.title }}</span>
+</div>

package/theme/templates/partials/footer.liquid

@@ -0,0 +1,6 @@
+{% getDoc contactPage
+  , id: site.home.contactPage.id %}
+<footer class="SiteFooter Container">
+  <span>{{ site.field.title }}</span>
+  <a class="BoringBorders" href="{{ contactPage.url }}">{{ contactPage.title }}</a>
+</footer>

package/theme/templates/partials/header.liquid

@@ -0,0 +1,59 @@
+{% getDoc postsPage
+  , id: site.home.posts.id %}
+{% getDoc exhibitionPage
+  , id: site.home.exhibition.id %}
+{% getDoc aboutPage
+  , id: site.home.aboutPage.id %}
+{% getDoc contactPage
+  , id: site.home.contactPage.id %}
+{% getDoc searchPage
+  , id: site.home.searchPage.id %}
+
+<header class="HeaderBar Container">
+  <div data-mobile-menu-part="logoTitle" class="HeaderBar-logoTitle">
+    <a
+      class="HeaderBar-siteLogo"
+      href="{{ site.home.url }}"
+      title="{{ "Aller à l'accueil" | t }}">
+      {% if site.field.logo %}
+        {% useImage logo
+          , uid: site.field.logo.uid
+          , size: "x50" %}
+        <img
+          src="{{ logo.url }}"
+          alt=""
+          width="{{ logo.width }}"
+          height="{{ logo.height }}"
+          loading="lazy">
+      {% endif %}
+    </a>
+    <span class="HeaderBar-siteTitle">{{ site.field.title }}</span>
+  </div>
+  <nav
+    data-activate-menu-items="{{ doc.id | activateMenuItemsData }}"
+    data-mobile-menu-part="content"
+    data-mobile-menu-action="move">
+    <ul>
+      <li><a class="BoringBorders" data-menu-item-id="{{ site.home.id }}" href="{{ site.home.url }}">{{ "Home" | t }}</a></li>
+      <li><a class="BoringBorders" data-menu-item-id="{{ postsPage.id }}" href="{{ postsPage.url }}">{{ postsPage.title }}</a></li>
+      <li><a class="BoringBorders" data-menu-item-id="{{ exhibitionPage.id }}" href="{{ exhibitionPage.url }}">{{ exhibitionPage.title }}</a></li>
+      <li><a class="BoringBorders" data-menu-item-id="{{ aboutPage.id }}" href="{{ aboutPage.url }}">{{ aboutPage.title }}</a></li>
+      <li><a class="BoringBorders" data-menu-item-id="{{ contactPage.id }}" href="{{ contactPage.url }}">{{ contactPage.field.shortTitle }}</a></li>
+    </ul>
+  </nav>
+  <div>
+    <div
+      class="HeaderBar-searchBtn"
+      data-effect="searchOpener"
+      data-icon-color=""
+      data-search-url="{{ searchPage.url }}"></div>
+    <div data-mobile-menu="button"></div>
+  </div>
+</header>
+<div
+  class="_mobileMenu"
+  data-effect="mobileMenu"
+  style="display: none">
+  <div data-inject="logoTitle"></div>
+  <div data-inject="content"></div>
+</div>

package/theme/templates/partials/post.public.liquid

@@ -0,0 +1,32 @@
+<article class="Tile Span6 Grid6">
+  {% if doc.defaultImage %}
+    {% useImage image
+      , uid: doc.defaultImage.uid
+      , size: "345x295" %}
+    <div class="Span3">
+      <img
+        class="Tile-img"
+        data-zoom-src="{{ doc.defaultImage.uid | imageZoomUrl }}"
+        src="{{ image.url }}"
+        width="{{ image.width }}"
+        height="{{ image.height }}"
+        loading="lazy"
+        alt="">
+    </div>
+  {% endif %}
+  <div class="Tile-text Span3">
+    <h3 class="Tile-h1">{{ doc.title }}</h3>
+    <p class="Tile-excerpt">{{ doc.excerpt | makeExcerpt: 60 }}
+      <a href="{{ doc.url }}">
+        {{ "Read more" | t }}
+      </a>
+    </p>
+    {% if doc.labeling.tags %}
+      <div class="Tile-tags">
+        {% for tag in doc.labeling.tags %}
+          <span>{{ tag.title }}</span>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</article>

package/theme/templates/partials/result-item.public.liquid

@@ -0,0 +1,31 @@
+<article class="ResultItem Tile Grid12">
+  {% if doc.defaultImage %}
+    {% useImage image
+      , uid: doc.defaultImage.uid
+      , size: "345x295" %}
+    <div class="Span3">
+      <img
+        class="Tile-img"
+        src="{{ image.url }}"
+        width="{{ image.width }}"
+        height="{{ image.height }}"
+        loading="lazy"
+        alt="">
+    </div>
+  {% endif %}
+  <div class="Tile-text Span3">
+    <h3 class="Tile-h1">{{ doc.title }}</h3>
+    <p class="Tile-excerpt">{{ doc.excerpt | makeExcerpt: 60 }}
+      <a href="{{ doc.url }}">
+        {{ "Read more" | t }}
+      </a>
+    </p>
+    {% if doc.labeling.tags %}
+      <div class="Tile-tags">
+        {% for tag in doc.labeling.tags %}
+          <span>{{ tag.title }}</span>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</article>

package/theme/templates/post.liquid

@@ -0,0 +1,65 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  <div class="Container">
+    {% render "./partials/breadcrumb"
+      , doc: doc
+      , site: site %}
+    <h1>{{ doc.title }}</h1>
+    {% if doc.featuredImage %}
+      <div class="HeroBanner">
+        {% useImage smallImg
+          , uid: doc.featuredImage.uid size: "324x200" %}
+        {% useImage mediumImg
+          , uid: doc.featuredImage.uid size: "1024x545" %}
+        {% useImage largeImg
+          , uid: doc.featuredImage.uid size: "1200x545" %}
+
+        <picture>
+          <source
+            width="{{ smallImg.width }}"
+            height="{{ smallImg.height }}"
+            srcset="{{ smallImg.url }}"
+            media="(max-width: 360px)">
+          <source
+            width="{{ mediumImg.width }}"
+            height="{{ mediumImg.height }}"
+            srcset="{{ mediumImg.url }}"
+            media="(max-width: 1024px)">
+          <source
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            srcset="{{ largeImg.url }}"
+            media="(min-width: 1920px)">
+
+          <img
+            class="HeroBanner-img"
+            src="{{ largeImg.url }}"
+            width="{{ largeImg.width }}"
+            height="{{ largeImg.height }}"
+            loading="lazy"
+            alt="">
+        </picture>
+      </div>
+    {% endif %}
+    <div class="Container Text selfContained justified">{{ doc.field.htmlContent | raw }}</div>
+    <div class="Paginate Grid12">
+      {% if doc.siblings.previous %}
+        <a href="{{ doc.siblings.previous.url }}" class="Paginate-prev Span6">
+          <span class="Paginate-prevBtn">
+            {{ "Previous" | t }}
+          </span>
+          <h2 class="Paginate-title EllipsisLine2">{{ doc.siblings.previous.title }}</h2>
+        </a>
+      {% endif %}
+
+      {% if doc.siblings.next %}
+        <a href="{{ doc.siblings.next.url }}" class="Paginate-next  Span6">
+          <span class="Paginate-nextBtn ">
+            {{ "Next" | t }}
+          </span>
+          <h2 class="Paginate-title EllipsisLine2">{{ doc.siblings.next.title }}</h2>
+        </a>
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}