Compoundify the templates

frontend/src/routing/Router.tsx

@@ -13,9 +13,18 @@
 // limitations under the License.
 
 import { useAtom, useAtomValue } from "jotai";
-import { lazy, useEffect } from "react";
+import { useEffect } from "react";
 
 import LoadingSpinner from "../components/LoadingSpinner";
+import BrowserSession from "../pages/BrowserSession";
+import BrowserSessionList from "../pages/BrowserSessionList";
+import CompatSessionList from "../pages/CompatSessionList";
+import OAuth2Client from "../pages/OAuth2Client";
+import OAuth2SessionList from "../pages/OAuth2SessionList";
+import Profile from "../pages/Profile";
+import SessionDetail from "../pages/SessionDetail";
+import SessionsOverview from "../pages/SessionsOverview";
+import VerifyEmail from "../pages/VerifyEmail";
 
 import { getRouteActionRedirection } from "./actions";
 import { locationAtom, routeAtom } from "./atoms";
@@ -42,16 +51,6 @@ const useRouteWithRedirect = (): [Route, boolean] => {
   return [route, redirecting];
 };
 
-const SessionsOverview = lazy(() => import("../pages/SessionsOverview"));
-const SessionDetail = lazy(() => import("../pages/SessionDetail"));
-const Profile = lazy(() => import("../pages/Profile"));
-const OAuth2Client = lazy(() => import("../pages/OAuth2Client"));
-const BrowserSession = lazy(() => import("../pages/BrowserSession"));
-const BrowserSessionList = lazy(() => import("../pages/BrowserSessionList"));
-const CompatSessionList = lazy(() => import("../pages/CompatSessionList"));
-const OAuth2SessionList = lazy(() => import("../pages/OAuth2SessionList"));
-const VerifyEmail = lazy(() => import("../pages/VerifyEmail"));
-
 const Router: React.FC = () => {
   const [route, redirecting] = useRouteWithRedirect();
 

frontend/src/styles/cpd-button.css

@@ -0,0 +1,127 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * 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.
+ */
+
+.cpd-button {
+  display: block;
+  text-align: center;
+  border-radius: var(--cpd-radius-pill-effect);
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+.cpd-button[disabled] {
+  cursor: not-allowed;
+  pointer-events: all !important;
+}
+
+/**
+ * SIZES
+ */
+
+.cpd-button[data-size="lg"] {
+  font: var(--cpd-font-body-lg-semibold);
+  padding: var(--cpd-space-3x) var(--cpd-space-10x);
+}
+
+.cpd-button[data-size="sm"] {
+  font: var(--cpd-font-body-md-semibold);
+  padding: var(--cpd-space-1x) var(--cpd-space-6x);
+}
+
+/**
+ * KINDS
+ */
+
+.cpd-button[data-kind="primary"] {
+  color: var(--cpd-color-text-on-solid-primary);
+  background: var(--cpd-color-bg-action-primary-rest);
+  border-width: 0;
+}
+
+.cpd-button[data-kind="primary"]:hover {
+  background: var(--cpd-color-bg-action-primary-hovered);
+}
+
+.cpd-button[data-kind="primary"]:active {
+  background: var(--cpd-color-bg-action-primary-pressed);
+}
+
+.cpd-button[data-kind="primary"][disabled] {
+  color: var(--cpd-color-text-disabled);
+  background: var(--cpd-color-bg-subtle-primary);
+}
+
+.cpd-button[data-kind="secondary"] {
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  color: var(--cpd-color-text-primary);
+  background: var(--cpd-color-bg-canvas-default);
+}
+
+.cpd-button[data-kind="secondary"]:hover {
+  border-color: var(--cpd-color-border-interactive-hovered);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.cpd-button[data-kind="secondary"]:active {
+  border-color: var(--cpd-color-border-interactive-hovered);
+  background: var(--cpd-color-bg-subtle-primary);
+}
+
+.cpd-button[data-kind="secondary"][disabled] {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  color: var(--cpd-color-text-disabled);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.cpd-button[data-kind="tertiary"] {
+  border: none;
+  color: var(--cpd-color-text-primary);
+  text-decoration: underline;
+  background: transparent;
+}
+
+.cpd-button[data-kind="tertiary"]:hover {
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.cpd-button[data-kind="tertiary"]:active {
+  background: var(--cpd-color-bg-subtle-primary);
+}
+
+.cpd-button[data-kind="tertiary"][disabled] {
+  color: var(--cpd-color-text-disabled);
+}
+
+.cpd-button[data-kind="destructive"] {
+  border: 1px solid var(--cpd-color-border-critical-primary);
+  color: var(--cpd-color-text-critical-primary);
+  background: var(--cpd-color-bg-canvas-default);
+}
+
+.cpd-button[data-kind="destructive"]:hover {
+  border-color: var(--cpd-color-border-critical-hovered);
+  background: var(--cpd-color-bg-critical-subtle);
+}
+
+.cpd-button[data-kind="destructive"]:active {
+  border-color: var(--cpd-color-border-critical-hovered);
+  background: var(--cpd-color-bg-critical-subtle-hovered);
+}
+
+.cpd-button[data-kind="destructive"][disabled] {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  color: var(--cpd-color-text-disabled);
+  background: var(--cpd-color-bg-subtle-secondary);
+}

frontend/src/styles/cpd-link.css

@@ -0,0 +1,51 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * 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.
+ */
+
+.cpd-link {
+  display: inline-block;
+  text-decoration: underline;
+  color: var(--cpd-color-text-primary);
+  font-weight: var(--cpd-font-weight-medium);
+  border-radius: var(--cpd-radius-pill-effect);
+  padding-inline: 0.25rem;
+}
+
+.cpd-link[data-kind="primary"] {
+  color: var(--cpd-color-text-primary);
+}
+
+.cpd-link[data-kind="critical"] {
+  color: var(--cpd-color-text-critical-primary);
+}
+
+.cpd-link[data-kind="primary"]:hover {
+  background: var(--cpd-color-gray-300);
+}
+
+.cpd-link[data-kind="critical"]:hover {
+  background: var(--cpd-color-red-300);
+}
+
+.cpd-link:active {
+  color: var(--cpd-color-text-on-solid-primary);
+}
+
+.cpd-link[data-kind="primary"]:active {
+  background: var(--cpd-color-text-primary);
+}
+
+.cpd-link[data-kind="critical"]:active {
+  background: var(--cpd-color-text-critical-primary);
+}

frontend/src/templates.css

@@ -19,9 +19,20 @@
 @import "@fontsource/inter/700.css";
 @import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 @import "@vector-im/compound-web/dist/style.css";
+@import "./styles/cpd-button.css";
+@import "./styles/cpd-link.css";
 
 @config "../tailwind.templates.config.cjs";
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+    /* XXX: I'm unsure why this is not part of the tokens */
+    --cpd-radius-pill-effect: 9999px;
+
+    font: var(--cpd-font-body-md-regular);
+    background: var(--cpd-color-bg-canvas-default);
+    color: var(--cpd-color-text-primary);
+}

frontend/vite.config.ts

@@ -36,9 +36,10 @@ export default defineConfig((env) => ({
     assetsInlineLimit: 0,
     sourcemap: true,
     modulePreload: false,
-    // We don't handle CSS code splitting well yet, so we disable it for now
+
-    // This means we have to load all the CSS through the `style.css` virtual entrypoint
+    // We don't exactly handle CSS code splitting well if we're lazy loading components.
-    cssCodeSplit: false,
+    // We disabled lazy loading for now, but we should fix this at some point.
+    cssCodeSplit: true,
 
     rollupOptions: {
       input: [

templates/app.html

@@ -28,9 +28,9 @@ limitations under the License.
         const query = window.matchMedia("(prefers-color-scheme: dark)");
         function handleChange(list) {
           if (list.matches) {
-            document.documentElement.classList.add("dark");
+            document.documentElement.classList.add("cpd-theme-dark");
           } else {
-            document.documentElement.classList.remove("dark");
+            document.documentElement.classList.remove("cpd-theme-dark");
           }
         }
 
@@ -38,7 +38,6 @@ limitations under the License.
         handleChange(query);
       })();
     </script>
-    {{ include_asset(path='style.css') | indent(prefix="    ") | safe }}
     {{ include_asset(path='src/main.tsx') | indent(prefix="    ") | safe }}
   </head>
 

templates/base.html

@@ -28,10 +28,9 @@ limitations under the License.
     <meta charset="utf-8">
     <title>{% block title %}matrix-authentication-service{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    {{ include_asset(path='style.css') | indent(prefix="    ") | safe }}
     {{ include_asset(path='src/templates.css') | indent(prefix="    ") | safe }}
   </head>
-  <body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
+  <body class="flex flex-col min-h-screen">
     {% block content %}{% endblock content %}
   </body>
 </html>

templates/components/back_to_client.html

@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 #}
 
-{% macro link(text, class="", uri, mode, params) %}
+{% macro link(text, uri, mode, params, kind="primary") %}
   {% if mode == "form_post" %}
     <form method="post" action="{{ uri }}">
       {% for key, value in params %}
         <input type="hidden" name="{{ key }}" value="{{ value }}" />
       {% endfor %}
-      <button class="{{ class }}" type="submit">{{ text }}</button>
+      <button class="cpd-button" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
     </form>
   {% elif mode == "fragment" or mode == "query" %}
-    <a class="{{ class }}" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
+    <a class="cpd-button" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
   {% else %}
     {{ throw(message="Invalid mode") }}
   {% endif %}

templates/components/button.html

@@ -1,5 +1,5 @@
 {#
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,40 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 #}
 
-{% macro common_class() -%}
-  px-4 py-2 border-2 rounded-lg font-medium text-center focus:ring-0 focus:outline-0 focus:border-black dark:focus:border-white
-{%- endmacro %}
-
-{% macro plain_error_class() -%}
-  {{ self::common_class() }} border-alert bg-alert text-white hover:opacity-75
-{%- endmacro %}
-
-{% macro outline_error_class() -%}
-  {{ self::common_class() }} border-alert text-alert hover:bg-alert/10
-{%- endmacro %}
-
-{% macro plain_class() -%}
-  {{ self::common_class() }} border-accent bg-accent text-white hover:opacity-75
-{%- endmacro %}
-
-{% macro outline_class() -%}
-  {{ self::common_class() }} border-accent hover:bg-accent/10 text-accent
-{%- endmacro %}
-
-{% macro text_class() -%}
-  {{ self::common_class() }} border-transparent hover:text-accent/70 text-accent
-{%- endmacro %}
-
 {% macro link(text, href="#", class="") %}
-  <a class="{{ self::plain_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+  <a class="cpd-button {{ class }}" data-kind="primary" data-size="lg" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
 
 {% macro link_text(text, href="#", class="") %}
-  <a class="{{ self::text_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+  <a class="cpd-link {{ class }}" data-kind="primary" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
 
 {% macro link_outline(text, href="#", class="") %}
-  <a class="{{ self::outline_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+  <a class="cpd-button {{ class }}" data-kind="secondary" data-size="lg" href="{{ href }}">{{ text }}</a>
 {% endmacro %}
 
 {% macro button(
@@ -65,7 +41,9 @@ limitations under the License.
     value="{{ value }}"
     type="{{ type }}"
     {% if disabled %}disabled{% endif %}
-    class="{{ self::plain_class() }} {{ class }}"
+    class="cpd-button {{ class }}"
+    data-kind="primary"
+    data-size="lg"
     {% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
     {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
     {% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
@@ -87,7 +65,8 @@ limitations under the License.
     value="{{ value }}"
     type="{{ type }}"
     {% if disabled %}disabled{% endif %}
-    class="{{ self::text_class() }} {{ class }}"
+    data-kind="primary"
+    class="cpd-link {{ class }}"
     {% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
     {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
     {% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
@@ -108,10 +87,12 @@ limitations under the License.
     name="{{ name }}"
     value="{{ value }}"
     type="{{ type }}"
+    class="cpd-button {{ class }}"
+    data-kind="secondary"
+    data-size="lg"
     {% if disabled %}disabled{% endif %}
     {% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
     {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
     {% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
-    class="{{ self::outline_class() }} {{ class }}"
   >{{ text }}</button>
 {% endmacro %}

templates/components/logout.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 #}
 
-{% macro button(text, class="", csrf_token, post_logout_action=false) %}
+{% macro button(text, csrf_token, as_link=false, post_logout_action=false) %}
   <form method="POST" action="/logout" class="inline">
     <input type="hidden" name="csrf" value="{{ csrf_token }}" />
     {% if post_logout_action %}
@@ -22,7 +22,7 @@ limitations under the License.
         <input type="hidden" name="{{ key }}" value="{{ value }}" />
       {% endfor %}
     {% endif %}
-    <button class="{{ class }}" type="submit">{{ text }}</button>
+    <button class="{% if as_link %}cpd-link{% else %}cpd-button{% endif %}" data-kind="critical" type="submit">{{ text }}</button>
   </form>
 {% endmacro %}
 

templates/components/navbar.html

@@ -25,7 +25,7 @@ limitations under the License.
         </div>
 
         {{ button::link(text="My account", href="/account/") }}
-        {{ logout::button(text="Sign out", class=button::outline_class(), csrf_token=csrf_token) }}
+        {{ logout::button(text="Sign out", csrf_token=csrf_token) }}
       {% else %}
         {{ button::link(text="Sign in", href="/login") }}
         {{ button::link_outline(text="Create an account", href="/register") }}

templates/pages/consent.html

@@ -27,13 +27,13 @@ limitations under the License.
               <img class="w-16 h-16" src="{{ client.logo_uri }}" />
               {% endif %}
             </div>
-            <h1 class="text-center font-medium"><a target="_blank" href="{{ client.client_uri }}" class="text-accent">{{ client.client_name | default(value=client.client_id) }}</a></h1>
+            <h1 class="text-center font-medium"><a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a></h1>
             <h1>at {{ grant.redirect_uri | simplify_url }}</h1>
             <h1>wants to access your account</h1>
           </div>
           <div class="flex items-center m-2">
             <div class="px-4 flex-1">
-              <p>This will allow <a target="_blank" href="{{ client.client_uri }}" class="text-accent">{{ client.client_name | default(value=client.client_id) }}</a> to:</p>
+              <p>This will allow <a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a> to:</p>
 
               <p class="my-2">
                 {{ scope::list(scopes=grant.scope) }}
@@ -44,13 +44,13 @@ limitations under the License.
                 {% if client.policy_uri or client.tos_uri %}
                   Find out how {{ client.client_name }} will handle your data by reviewing it's
                   {% if client.policy_uri %}
-                    <a target="_blank" href="{{ client.policy_uri }}" class="text-accent">privacy policy</a>{% if not client.tos_uri %}.{% endif %}
+                    <a target="_blank" href="{{ client.policy_uri }}" class="cpd-link" data-kind="primary">privacy policy</a>{% if not client.tos_uri %}.{% endif %}
                   {% endif %}
                   {% if client.policy_uri and client.tos_uri%}
                     and
                   {% endif %}
                   {% if client.tos_uri %}
-                    <a target="_blank" href="{{ client.tos_uri }}" class="text-accent">terms of service</a>.
+                    <a target="_blank" href="{{ client.tos_uri }}" class="cpd-link" data-kind="primary">terms of service</a>.
                   {% endif %}
                 {% endif %}
               </p>
@@ -63,7 +63,7 @@ limitations under the License.
         <div class="grid grid-cols-2 gap-4">
           {{ back_to_client::link(
             text="Cancel",
-            class=button::outline_error_class(),
+            kind="destructive",
             uri=grant.redirect_uri,
             mode=grant.response_mode,
             params=dict(error="access_denied", state=grant.state)
@@ -73,7 +73,7 @@ limitations under the License.
       </form>
       <div class="text-center mt-4">
         Not {{ current_session.user.username }}?
-        {{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=action) }}
+        {{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
       </div>
     </div>
   </section>

templates/pages/login.html

@@ -47,7 +47,7 @@ limitations under the License.
           <div class="grid grid-cols-2 gap-4">
             {{ back_to_client::link(
               text="Cancel",
-              class=button::outline_error_class(),
+              kind="destructive",
               uri=next.grant.redirect_uri,
               mode=next.grant.response_mode,
               params=dict(error="access_denied", state=next.grant.state)

templates/pages/policy_violation.html

@@ -25,10 +25,10 @@ limitations under the License.
         <div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex items-center">
           <div class="bg-white rounded w-16 h-16 overflow-hidden mx-auto">
             {% if client.logo_uri %}
-            <img class="w-16 h-16" src="{{ client.logo_uri }}" />
+            <img crossorigin="anonymous" class="w-16 h-16" src="{{ client.logo_uri }}" />
             {% endif %}
           </div>
-          <h1 class="text-lg text-center font-medium flex-1"><a target="_blank" href="{{ client.client_uri }}" class="text-accent">{{ client.client_name | default(value=client.client_id) }}</a></h1>
+          <h1 class="text-lg text-center font-medium flex-1"><a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a></h1>
         </div>
 
         <div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex items-center">
@@ -36,12 +36,12 @@ limitations under the License.
             Logged as <span class="font-semibold">{{ current_session.user.username }}</span>
           </div>
 
-          {{ logout::button(text="Sign out", class=button::plain_error_class(), csrf_token=csrf_token, post_logout_action=action) }}
+          {{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action) }}
         </div>
 
         {{ back_to_client::link(
           text="Cancel",
-          class=button::outline_error_class(),
+          kind="destructive",
           uri=grant.redirect_uri,
           mode=grant.response_mode,
           params=dict(error="access_denied", state=grant.state)

templates/pages/reauth.html

@@ -31,7 +31,7 @@ limitations under the License.
           <div class="grid grid-cols-2 gap-4">
             {{ back_to_client::link(
               text="Cancel",
-              class=button::outline_error_class(),
+              kind="destructive",
               uri=next.grant.redirect_uri,
               mode=next.grant.response_mode,
               params=dict(error="access_denied", state=next.grant.state)
@@ -47,7 +47,7 @@ limitations under the License.
       <div class="text-center mt-4">
         Not {{ current_session.user.username }}?
         {% set post_logout_action = next | safe_get(key="params") %}
-        {{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=post_logout_action) }}
+        {{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=post_logout_action, as_link=true) }}
       </div>
     </div>
   </section>

templates/pages/register.html

@@ -41,7 +41,7 @@ limitations under the License.
         <div class="grid grid-cols-2 gap-4">
           {{ back_to_client::link(
             text="Cancel",
-            class=button::outline_error_class(),
+            kind="destructive",
             uri=next.grant.redirect_uri,
             mode=next.grant.response_mode,
             params=dict(error="access_denied", state=next.grant.state)

templates/pages/sso.html

@@ -44,7 +44,7 @@ limitations under the License.
       </form>
       <div class="text-center mt-4">
         Not {{ current_session.user.username }}?
-        {{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=action) }}
+        {{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
       </div>
     </div>
   </section>

templates/pages/upstream_oauth2/link_mismatch.html

@@ -24,7 +24,7 @@ limitations under the License.
         This upstream account is already linked to another account.
       </h1>
 
-      <div>{{ logout::button(text="Logout", class=button::outline_class(), csrf_token=csrf_token) }}</div>
+      <div>{{ logout::button(text="Logout", csrf_token=csrf_token) }}</div>
     </div>
   </section>
 {% endblock content %}

templates/pages/upstream_oauth2/suggest_link.html

@@ -31,7 +31,7 @@ limitations under the License.
         {{ button::button(text="Link", class="flex-1") }}
       </form>
 
-      <div>Or {{ logout::button(text="Logout", class=button::outline_class(), csrf_token=csrf_token, post_logout_action=post_logout_action) }}</div>
+      <div>Or {{ logout::button(text="Logout", csrf_token=csrf_token, post_logout_action=post_logout_action, as_link=true) }}</div>
     </div>
   </section>
 {% endblock content %}