feat: TailwindCSS 2

alpas · Mar 31, 2021 · bad8107 · bad8107
1 parent 9d638ca
commit bad8107
Show file tree

Hide file tree

Showing 9 changed files with 153,589 additions and 37,297 deletions.
diff --git a/package.json b/package.json
@@ -11,18 +11,18 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "axios": "^0.19",
+    "autoprefixer": "^10.2",
+    "axios": "^0.21",
     "browser-sync": "^2.26",
-    "browser-sync-webpack-plugin": "2.2",
-    "concurrently": "^5.2",
-    "cross-env": "^6.0",
-    "jquery": "^3.5",
+    "browser-sync-webpack-plugin": "^2.3",
+    "concurrently": "^6.0",
+    "cross-env": "^7.0",
+    "jquery": "^3.6",
     "laravel-mix": "^5.0",
-    "less": "^3.12.2",
-    "less-loader": "^6.2.0",
+    "postcss": "^8.2",
     "resolve-url-loader": "^3.1",
-    "tailwindcss": "^1.6",
-    "vue": "^2.5.17",
-    "vue-template-compiler": "^2.6.10"
+    "tailwindcss": "^2.0",
+    "vue": "^2.6",
+    "vue-template-compiler": "^2.6"
   }
-}
+}
diff --git a/src/main/resources/css/app.less → src/main/resources/css/app.css b/src/main/resources/css/app.less → src/main/resources/css/app.css
diff --git a/src/main/resources/js/components/Welcome.vue b/src/main/resources/js/components/Welcome.vue
@@ -1,13 +1,16 @@
 <template>
-    <div>Hello, __APP__NAME!</div>
+  <div>{{ greetings }}</div>
 </template>
 
 <script>
-    export default {
-        name: "Welcome"
-    }
+export default {
+  name: "Welcome",
+  data() {
+    return {
+      greetings: "The Rapid and Delightful Kotlin Web Framework ",
+    };
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/main/resources/templates/welcome.peb b/src/main/resources/templates/welcome.peb
@@ -12,8 +12,8 @@
 
 <body>
 
-<div id="app" class="flex h-screen m-auto flex-col">
-    <div class="py-6 px-10 text-right text-lg uppercase font-semibold">
+<div id="app" class="flex flex-col h-screen m-auto">
+    <div class="px-10 py-6 text-lg font-semibold text-right uppercase">
     {% if hasRoute('login') %}
     {% auth %}
         <a class="hover:text-red-500" href="/home">Home</a>
@@ -25,7 +25,7 @@
     {% endauth %}
     {% endif %}
     </div>
-    <div class="pb-16 flex flex-col justify-center w-full max-w-4xl mx-auto flex-grow">
+    <div class="flex flex-col justify-center flex-grow w-full max-w-4xl pb-16 mx-auto">
         <div class="mx-auto">
             <a href="https://alpas.dev">
                 <svg width="260px" viewBox="0 0 222 49" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -44,9 +44,12 @@
                 </svg>
             </a>
         </div>
-        <div class="mt-20 flex flex-col md:flex-row self-center md:self-stretch md:justify-between text-lg uppercase text-gray-900 font-semibold">
-            <a href="https://alpas.dev/docs" target="_docs" class="hover:text-red-600 flex mt-4 align-middle">
-                <svg class="mr-2 text-gray-700 h-5 self-center" aria-hidden="true" focusable="false" role="img"
+        <div class="mt-6 text-2xl text-center">
+            <welcome></welcome>
+        </div>
+        <div class="flex flex-col self-center mt-20 text-lg font-semibold text-gray-900 uppercase md:flex-row md:self-stretch md:justify-between">
+            <a href="https://alpas.dev/docs" target="_docs" class="flex mt-4 align-middle hover:text-red-600">
+                <svg class="self-center h-5 mr-2 text-gray-700" aria-hidden="true" focusable="false" role="img"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                     <g class="fa-group">
                         <path class="fa-secondary" fill="currentColor"
@@ -58,38 +61,40 @@
                 </svg>
                 Documentation
             </a>
-            <a href="https://twitter.com/alpasdev" target="_twitter" class="hover:text-red-600 flex mt-4">
-                <svg class="mr-2 text-gray-700 h-6 self-center" aria-hidden="true" focusable="false" role="img"
+            <a href="https://twitter.com/alpasdev" target="_twitter" class="flex mt-4 hover:text-red-600">
+                <svg class="self-center h-6 mr-2 text-gray-700" aria-hidden="true" focusable="false" role="img"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                     <path fill="currentColor"
                           d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                 </svg>
                 alpasdev
             </a>
             <a href="https://www.youtube.com/channel/UCGCGb-vvmff3csy8dePBJJQ" target="_alpascasts"
-               class="hover:text-red-600 flex mt-4">
-                <svg class="mr-2 text-gray-700 h-6 self-center" aria-hidden="true" focusable="false" role="img"
+               class="flex mt-4 hover:text-red-600">
+                <svg class="self-center h-6 mr-2 text-gray-700" aria-hidden="true" focusable="false" role="img"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                     <path fill="currentColor"
                           d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
                 </svg>
                 Alpascasts</a>
             <a href="https://join.slack.com/t/alpasdev/shared_invite/enQtODcwMjE1MzMxODQ3LTJjZWMzOWE5MzBlYzIzMWQ2MTcxN2M2YjU3MTQ5ZDE4NjBmYjY1YTljOGIwYmJmYWFlYjc4YTcwMDFmZDIzNDE"
-               target="_slack" class="hover:text-red-600 flex mt-4">
-                <svg class="mr-2 text-gray-700 h-6 self-center" aria-hidden="true" focusable="false" role="img"
+               target="_slack" class="flex mt-4 hover:text-red-600">
+                <svg class="self-center h-6 mr-2 text-gray-700" aria-hidden="true" focusable="false" role="img"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                     <path fill="currentColor"
                           d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"></path>
                 </svg>
                 Slack </a>
-            <a href="https://github.com/alpas" target="_github" class="hover:text-red-600 flex mt-4">
-                <svg class="mr-2 text-gray-700 h-6 self-center" aria-hidden="true" focusable="false"
+            <a href="https://github.com/alpas" target="_github" class="flex mt-4 hover:text-red-600">
+                <svg class="self-center h-6 mr-2 text-gray-700" aria-hidden="true" focusable="false"
                      role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                     <path fill="currentColor"
                           d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
                 </svg>
                 GitHub </a>
         </div>
+      <div>
+      </div>
     </div>
 </div>
 </body>