andrewfairlie

{% header "Permission-Policy: interest-cohort=()" %}

andrewfairlie

import * as React from 'react'
import { useRouter } from 'next/router'

type HtmlOutputType = {
  content: string
}

const HtmlOutput: React.FunctionComponent<HtmlOutputType> = ({ content }) => {
  const router = useRouter()

andrewfairlie

{# s-trigger is listening for our custom event from index.twig #}
<div sprig s-trigger="entered-viewport">
    {% if sprig.request %}
        {% set randomProduct = craft.entries.section('products').order('RAND()').one() %}
        <div class="w-4/12 bg-white p-8">
            {{ randomProduct.title }}
        </div>
    {% else %}
        <div class="w-4/12 bg-pink-300 p-8">
            Loading...

andrewfairlie

{% set randomFact = craft.entries.section('fact').order('RAND()').one() %}
{
	"fulfillmentText": "{{ randomFact.fact }}"
}

andrewfairlie

{% for randomFact in craft.entries.section('fact').order('RAND()').one() %}
{
	"speech": "{{ randomFact.fact }}",
	"displayText": "{{ randomFact.fact }}"
}

andrewfairlie

{# Define our macro #}
{% macro card(attributes) %}
  {% set defaults = {
    scheme: 'light',
    size: 'standard'
  } %}
  
  {# Merge our two arrays together #}
  {% set attributes = defaults|merge(attributes) %}
  

andrewfairlie

{# Define our macro #}
{% macro card(attributes) %}
    {% if attributes.url %}<a href="{{ attributes.url }}">{% endif %}
      <div class="card">
        {% if attributes.img %}<img src="{{ attributes.img }}">{% endif %}
        <h2>{{ attributes.title }}</h2>
        {{ attributes.content }}
      </div>
    {% if attributes.url %}</a>{% endif %}

andrewfairlie

{{ ui.card('Card Title','Hello World',null,null) }}

andrewfairlie

{# Define our macro #}
{% macro card(title,content,img,url) %}
    {% if url %}<a href="{{ url }}">{% endif %}
      <div class="card">
        {% if img %}<img src="{{ img }}">{% endif %}
        <h2>{{ title }}</h2>
        {{ content }}
      </div>
    {% if url %}</a>{% endif %}

andrewfairlie

{# Define our macro #}
{% macro card(title,content) %}
    <div class="card">
      <h2>{{ title }}</h2>
      {{ content }}
    </div>
{% endmacro %}

{# Import the macro, here we use _self but usually it'll be a separate file #}
{% import _self as ui %}