boilerplate/index.html at master · LumberJaxolotl/boilerplate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Index 🌎</title>
    <!-- Basic seo details -->
    <meta name="description" content="">
    <meta name="keywords" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="images/icons/apple-touch-icon.svg">
    <link rel="favicon" href="favicon.svg">

    <!-- OpenGraph Properties -->
    <meta property="og:site_name" content="IMBD" />
    <meta property="og:title" content="The Rock" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
    <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />


    <meta property="og:locale" content="en_US" />
    <meta property="og:locale:alternate" content="fr_CA" />
    <!-- OG object types: website, music, video, articule, book, payment, profile   -->
    <!-- OpenGraph Properties END -->

    <link rel="manifest" href="site.webmanifest">

    <meta name="theme-color" content="#fafafa">

    <link rel="stylesheet" href="css/index.css">

    <!-- choice of Twind or Tailwind + DaisyUI -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> -->
    <!-- Twind is a more-performant version of the tailwind play CDN - https://twind.dev/ -->
    <script src="https://cdn.twind.style" crossorigin></script>

    <!-- alpine.js + alpine.js persistence plugin -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- alpine.js app boilerplate -->
    <script defer>
        document.addEventListener('alpine:init', () => {
            Alpine.data('PageData', function(){return({
                // reactive values
                pageViews: 0,
                // sync reactive value with local storage
                // idk if this actually works tho. See https://alpinejs.dev/plugins/persist#using-persist-with-alpine-data.
                clicksCounted: this.$persist(0),
                // Computed Properties
                get valuesPlusOne(){
                  return this.pageViews + 1
                },
                // methods
                onButtonClick(){
                  alert("Button clicked!")
                }
            })})
        });
    </script>


</head>

<!-- For flow from top of page -->
<!-- <body class="grid justify-center min-h-screen px-5" x-data="PageData"> -->

<body class="grid place-items-center min-h-screen px-5" x-data="PageData">

    <!-- Add your site or application content here -->
    <main class="max-w-fit md:max-w-96 h-fit grid grid-cols-1">
        <h1 class="font-bold text-5xl mb-3" x-text="'Hello World!'"></h1>
        <p>This is HTML5 + Alpine.js + Tailwindcss Boilerplate speaking.</p>
    </main>

    <!-- js if required -->
    <script src="js/index.js"></script>
</body>

</html>