TA Gallery

A light-weight (4.6kB), responsive and mobile first plugin to show the next food truck and street food dates in your area based on Tailwind CSS and Alpine JS.

TA-Foodtrucks based on data from the Craftplaces Api to show the next food truck and street food dates in your area. You can customize the endpoints to get all dates for a specific vendor, for a specific city or just for a location you are interested in.

Many thanks to Tailwind CSS TA-Foodtrucks is 100% customizable and has endless animation options. You can use TA-Foodtrucks as a stand-alone version as well as a part of your Alpine JS and Tailwind CSS project. TA-Foodtrucks is designed to fit in every project, in every grid and in every flexbox so please try it out and if you have some feedback - leave me a message.

Some realworld examples: Example for city, Example for location

Links: Craftplaces Api, GitHub Repo, CodePen, Download, Author, Feedback

CDN

TA-Foodtrucks

<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-foodtrucks@latest/dist/scripts/ta-foodtrucks.min.js"></script>

Alpine JS + TA-Foodtrucks

<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-foodtrucks@latest/dist/scripts/alpine-ta-foodtrucks.min.js" defer></script>

How to use TA-Foodtrucks

An easiest way to play around with TA-Foodtrucks is in CodePen. I prepared a Pen with TA-Foodtrucks so you can play around with the layout or change the structure. The fastest way to implement is using Tailwind CSS and Alpine JS from a CDN. I strongly recommend using Tailwind CSS as part of your build process to control the file size.

  1. Put it in your head section of your html source code. Please be sure you use the “defer” attribute in your script tag.
  2. The next step is to add the TA-Foodtrucks javascript to your page.
  3. At least you should add TA-Foodtrucks HTML to your page

Scripts and styles

<link href="https://unpkg.com/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-foodtrucks@latest/dist/scripts/ta-foodtrucks.min.js"></script>

HTML

You can find the complete HTML code I use for this example on GitHub.

<div
    class="border-t-2 border-b-2 border-dashed border-gray-500 exept py-8 my-8 -mx-7"
    x-data="taFoodtrucks()"
    x-init="init('https://api.craftplaces.com/api/v1/dip/location/twodays')"
    x-cloak
>
    <div class="relative w-full lg:w-3/4 mx-auto text-left min-h-64 px-12">
        <template x-if="!is_initialized">
            <!-- Loading Animation -->
        </template>
        <div class="absolute flex-center inset-0 w-full h-full z-5" x-show="is_initialized && is_empty">
            <!-- if error -->
        </div>
        <template x-for="(item, index) in dates" :key="item.id" x-if="is_initialized && !is_empty">
            <div class="grid gap-4 grid-col-1 sm:grid-cols-4 items-center py-8">
                <div class="relative rounded-full w-32 h-32 overflow-hidden border-2 border-gray-200 mx-auto">
                    <img :src="item.logo.url.local" alt="asdas" class="absolute inset-0 h-full w-full object-cover" />
                </div>
                <div class="sm:col-span-3 leading-tight">
                    <div
                        class="text-md text-blue-800 font-bold border-b border-dashed border-gray-500 -ml-2 pl-2 pb-2 mb-1"
                    >
                        <span x-text="getWeekday(index, true)"></span>,
                        <span x-text="getDay(index)"></span>
                    </div>
                    <div class="text-4xl font-light -ml-1">
                        <span x-text="getTime(index, ' - ', 'Uhr')"></span>
                    </div>
                    <div class="text-base font-light mb-2">
                        <span x-text="item.name"></span>
                        : <span x-text="item.location.address.street"></span>
                        <span x-text="item.location.address.number"></span>,
                        <span x-text="item.location.address.city"></span>
                    </div>
                    <div class="text-base font-light mb-4">
                        <span class="font-normal" x-text="item.vendor.name.long"></span>:
                        <span x-text="item.vendor.offer"></span>
                    </div>
                    <div class="w-full flex flex-wrap justify-between font-normal text-sm">
                        <div class="flex flex-wrap items-center my-2">
                            <a
                                :href="getWhat3WordsLink(index)"
                                class="inline-flex text-sm text-pink-800 font-bold items-center"
                                target="_blank"
                            >
                                <svg class="fill-current h-4" viewBox="0 0 576 512">
                                    <path
                                        d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"
                                    />
                                </svg>
                                <span class="ml-1"> What3Words </span></a
                            >
                            <span class="ml-2"> (<span x-text="item.location.position.what3words"></span>) </span>
                        </div>
                        <a
                            :href="getGoogleMapsLink(index)"
                            class="inline-flex text-sm text-pink-800 font-bold items-center my-2"
                            target="_blank"
                        >
                            <svg class="fill-current h-4" viewBox="0 0 384 512">
                                <path
                                    d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
                                />
                            </svg>
                            <span class="ml-1"> Google Maps </span>
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

Options - init function

// endpoint url - based on Craftplaces Api service
init('https://api.craftplaces.com/api/v1/dip/location/twodays', {
    // define a translation for the relative date
    today: 'Today',

    // define a translation for the relative date
    tomorrow: 'Tomorrow',

    // define a locale for the visitor - shows the right dates and numbers
    locale: 'en-US',

    // seperator between start and end time
    seperator: ' - ',

    // suffix after end time
    suffix: '',
})

Functions and data


{
    // if plugin is initialized
    is_initialized: false, // Boolean

    // if there are no dates available
    is_empty: false, // Boolean
}

// get the start time for the index - dates[index]
getStartTime(index) // returns String

// get the end time for the index - dates[index]
getEndTime(index) // returns String

// get the start and end time for the index - dates[index] - seperator and suffix
// will be default if there is no definition in the function call
getTime(index, seperator = null, suffix = null) // returns String

// get the timezone for this index - dates[index]
getTimezone(index) // returns String

// get the weekday and define if relative or not
getWeekday(index, relative = false) // returns String

// get locale day for the index - dates[index]
getDay(index) // returns String

// get street, number // returns String and city for the index - dates[index]
getAddress(index) // returns String

// get what3words link for the index - dates[index]
getWhat3WordsLink(index) // returns String

// get google maps link for the index - dates[index]
getGoogleMapsLink(index) // returns String

Logo TA StyledPLUGINS

TA StyledPLUGINS stands for light-weight, responsive and mobile first. All plugins are based on Tailwind CSS and Alpine JS. All are 100% customizable with lots of animation options.

TA-Pagination - A content pagination solution.

TA-Gallery - An image gallery with endless animation options.

TA-YouTube - A YouTube video wrapper with auto playback, aspect ratio and privacy settings.

TA-Analytics - An easy and customizable Google Analytics “blocker”.

TA-Foodtrucks - An easy way to show the next food truck and street food dates in your area.

Copyright © 2019-2020 Markus A. Wolf - www.markusantonwolf.com

IMPRINT | PRIVACY

TA-Foodtrucks is licensed under the MIT license, see LICENSE for details.

Brought to life thanks to Alpine JS, Tailwind CSS and HUGO