search

jensjeflensje / websk

Create websites using Skript!
MIT License
9 stars 4 forks source link

Added loop inside loop / Added loop tags #14

Closed ItsTheSky closed 2 years ago

ItsTheSky commented 2 years ago

As the title says, this PR adds two new features:

Example code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        <title>Document</title>
    </head>
    <body>
        <section class="text-gray-600 body-font">
            <div class="container px-5 py-24 mx-auto flex flex-wrap">
                <div class="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
                <div class="object-cover object-center h-full w-full">
                    WebSK test
                </div>
                </div>
                <div class="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
                    {{loop members::* > members}}
                        <div class="flex flex-col mb-10 lg:items-start items-center">
                            <img class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5" src="{{show avatar of loop entity}}">
                            <div class="flex-grow">
                            <h2 class="text-gray-900 text-lg title-font font-medium mb-3">{{show discord name of loop entity}}</h2>
                            {{loop roles of loop entity > roles}}
                                <p class="leading-relaxed text-base">{{show role name of loop entity}}</p>
                            {{/roles}}
                            </div>
                        </div>
                    {{/members}}
                </div>
            </div>
        </section>
    </body>
</html>

Result: image