@paroicms/playground_demo1 0.50.0

package/theme/templates/partials/header.liquid

@@ -0,0 +1,96 @@
+{% getDoc postsPage
+  , id: site.home.posts.id %}
+{% getDoc aboutPage
+  , id: site.home.aboutPage.id %}
+{% getDoc contactPage
+  , id: site.home.contactPage.id %}
+{% getDoc searchPage
+  , id: site.home.searchPage.id %}
+{% getDocs pages
+  , parentId: site.home.pages.id %}
+
+<div class="_revertedColors">
+  <header class="Container pad Flex spaceBetween PageHeader">
+    <div data-mobile-menu-part="logoTitle">
+      <span class="Flex gap center">
+        {% if site.field.logo %}
+          <span class="Flex column center">
+            <span class="Annotation">site.field.logo</span>
+            {% useImage im
+              , uid: site.field.logo.uid
+              , size: "x80x" %}
+            <img
+              src="{{ im.url }}"
+              alt=""
+              loading="lazy"
+              width="{{ im.width }}"
+              height="{{ im.height }}">
+          </span>
+        {% endif %}
+        <span class="Flex column">
+          <span class="Annotation">site.field.title</span>
+          <strong>{{ site.field.title }}</strong>
+        </span>
+      </span>
+    </div>
+
+    <nav
+      data-activate-menu-items="{{ doc.id | activateMenuItemsData }}"
+      data-mobile-menu-part="content"
+      data-mobile-menu-action="move">
+      <ul class="Menu">
+        <li>
+          <a
+            class="Btn"
+            data-menu-item-id="{{ site.home.id }}"
+            href="{{ site.home.url }}">Home</a>
+        </li>
+        <li>
+          <span class="Btn disabled">Pages</span>
+          <ul class="Menu sub">
+            {% for page in pages %}
+              <li>
+                <a
+                  class="Btn"
+                  data-menu-item-id="{{ page.id }}"
+                  href="{{ page.url }}">{{ page.title }}</a>
+              </li>
+            {% endfor %}
+          </ul>
+        </li>
+        <li>
+          <a
+            class="Btn"
+            data-menu-item-id="{{ postsPage.id }}"
+            href="{{ postsPage.url }}">{{ postsPage.title }}</a>
+        </li>
+        <li>
+          <a
+            class="Btn"
+            data-menu-item-id="{{ aboutPage.id }}"
+            href="{{ aboutPage.url }}">{{ aboutPage.title }}</a>
+        </li>
+        <li>
+          <a
+            class="Btn"
+            data-menu-item-id="{{ contactPage.id }}"
+            href="{{ contactPage.url }}">{{ contactPage.field.shortTitle }}</a>
+        </li>
+      </ul>
+    </nav>
+    <div>
+      <div
+        data-effect="searchOpener"
+        data-icon-color=""
+        data-search-url="{{ searchPage.url }}"></div>
+      <div data-mobile-menu="button"></div>
+    </div>
+  </header>
+</div>
+<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-tile.public.liquid

@@ -0,0 +1,35 @@
+<a class="Column4 Span6" href="{{ doc.url }}">
+  <article class="Tile">
+    <div class="Tile-text">
+      <h3 class="Tile-h1">{{ doc.title }}</h3>
+      <p class="Tile-excerpt">{{ doc.excerpt | makeExcerpt: 40 }}</p>
+
+      {% if doc.labeling.tags %}
+        <div class="Tile-tags">
+          Tags:
+          {% for tag in doc.labeling.tags %}
+            <span class="Tag">{{ tag.title }}</span>
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <div>
+        Published at {{ doc.publishDate | formatDate: "long" }}
+      </div>
+    </div>
+    <div class="Tile-right">
+      {% if doc.defaultImage %}
+        {% useImage im
+          , uid: doc.defaultImage.uid
+          , size: "x250x" %}
+        <img
+          class="Img"
+          src="{{ im.url }}"
+          width="{{ im.width }}"
+          height="{{ im.height }}"
+          loading="lazy"
+          alt="">
+      {% endif %}
+    </div>
+  </article>
+</a>

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

@@ -0,0 +1,39 @@
+<a class="Block Mb" href="{{ doc.url }}">
+  <article class="Tile">
+    <div class="Tile-text">
+      <h3 class="Tile-h1">{{ doc.title }}
+        <span class="Tag">{{ doc.typeLabel }}</span>
+      </h3>
+      <p class="Tile-excerpt">{{ doc.excerpt | makeExcerpt: 40 }}</p>
+
+      {% if doc.labeling.tags %}
+        <div class="Tile-tags">
+          Tags:
+          {% for tag in doc.labeling.tags %}
+            <span class="Tag">{{ tag.title }}</span>
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      {% if doc.type == "post" %}
+        <div>
+          Published at {{ doc.publishDate | formatDate: "long" }}
+        </div>
+      {% endif %}
+    </div>
+    <div class="Tile-right">
+      {% if doc.defaultImage %}
+        {% useImage im
+          , uid: doc.defaultImage.uid
+          , size: "x250x" %}
+        <img
+          class="Img"
+          src="{{ im.url }}"
+          width="{{ im.width }}"
+          height="{{ im.height }}"
+          loading="lazy"
+          alt="">
+      {% endif %}
+    </div>
+  </article>
+</a>

package/theme/templates/posts.liquid

@@ -0,0 +1,45 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  {% getDocs tags
+    , parentId: site.home.posts.tags.id %}
+  {% getPaginatedDocs posts
+    , parentId: doc.id
+    , pageSize: 4 %}
+
+  {% render "partials/breadcrumb" doc: doc site: site %}
+
+  {% if tags %}
+    <div class="Bg2 Pt Pb">
+      <div class="Container pad">
+        <hr class="Hr">
+        <div class="Annotation">getDocs tags, parentId: site.home.posts.tags.id</div>
+
+        Tags:
+        {% for tag in tags %}
+          <a class="Tag" href="{{ tag.url }}">{{ tag.title }}</a>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% render "partials/doc-header.liquid" doc: doc site: site %}
+
+  <div class="Container pad Mt Mb">
+    <div class="Grid12">
+      <div class="Annotation Column4 Span6">getPaginatedDocs posts, parentId: doc.id, pageSize: 4</div>
+    </div>
+    <div
+      class="Grid12"
+      data-effect="infiniteLoading"
+      data-parent-id="{{ doc.id }}"
+      data-start="{{ posts.pageSize }}"
+      data-limit="{{ posts.pageSize }}"
+      data-total="{{ posts.total }}"
+      data-template="post-tile">
+      {% for post in posts.items %}
+        {% render "partials/post-tile.public.liquid"
+          , doc: post %}
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}

package/theme/templates/search-page.liquid

@@ -0,0 +1,21 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  {% render "partials/breadcrumb" doc: doc site: site %}
+  {% render "partials/doc-header.liquid" doc: doc site: site %}
+
+  <div class="Container pad text Mt Mb">
+    {% if doc.field.htmlContent %}
+      <div class="Text">
+        <div class="Annotation">doc.field.htmlContent</div>
+        <div class="Text selfContained justified">
+          {{ doc.field.htmlContent | raw }}</div>
+      </div>
+    {% endif %}
+  </div>
+
+  <div
+    class="Container text pad"
+    data-effect="searchForm"
+    data-template="result-item"
+    data-limit="4"></div>
+{% endblock %}

package/theme/templates/tag.liquid

@@ -0,0 +1,37 @@
+{% layout "layouts/main-layout.liquid" doc: doc site: site %}
+{% block %}
+  {% getPaginatedDocs posts
+    , parentId: site.home.posts.id
+    , labeledById: doc.id
+    , pageSize: 4 %}
+
+  {% render "partials/breadcrumb" doc: doc site: site %}
+  {% render "partials/doc-header.liquid" doc: doc site: site %}
+
+  {% if doc.field.htmlContent %}
+    <div class="Container text TextPage Bg Mt Mb">
+      <div class="Annotation">doc.field.htmlContent</div>
+      <div class="Text selfContained justified">
+        {{ doc.field.htmlContent | raw }}</div>
+    </div>
+  {% endif %}
+
+  <div class="Container pad Mt Mb">
+    <div class="Grid12">
+      <div class="Annotation Column4 Span6">getPaginatedDocs posts, parentId: site.home.posts.id, labeledById: doc.id, pageSize: 4</div>
+    </div>
+    <div
+      class="Grid12"
+      data-effect="infiniteLoading"
+      data-parent-id="{{ doc.id }}"
+      data-start="{{ posts.pageSize }}"
+      data-limit="{{ posts.pageSize }}"
+      data-total="{{ posts.total }}"
+      data-template="post-tile">
+      {% for post in posts.items %}
+        {% render "partials/post-tile.public.liquid"
+          , doc: post %}
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}

package/theme/theme.json

@@ -0,0 +1,4 @@
+{
+  "fTextImages": ["700x", "x400x", "700x350"],
+  "pixelRatio": 1.5
+}