add intro image and link to demo: https://dwyl.github.io/learn-alpine.js

#1
dwyl · Jun 14, 2022 · 7f66a7e · 7f66a7e
1 parent 44bbd48
commit 7f66a7e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,28 +1,75 @@
-
 <div align="center">
 
-# Learn `Alpine.js`
+![learn-alpinejs-logo](https://user-images.githubusercontent.com/194400/173522456-81ef8a00-7dcf-4300-8e87-281ab251878e.png)
+
+Learn how to use **`Alpine.js`** to build **declarative + responsive UI _fast_**!
 
 </div>
 
-Learn how to use `Alpine.js` to build declarative + responsive UI _fast_!
+## Why? 🤷
+
+We heard a lot about **`Alpine.js`** 
+[online](https://github.com/dwyl/technology-stack/issues/87).
+We wanted to know what the fuss was about. 
+We weren't dissapointed.
+You won't be either.
+
+## What? 💡
+
+**`Alpine.js`** lets you add 
+[progressive enhancements](https://en.wikipedia.org/wiki/Progressive_enhancement)
+to any **HTML** page
+with _minimal_ in-line declarative code. 
+This makes it easy to add attractive/useful UI elements 
+such as toggle, fade-in/out, transitions and other effects.
+
+If you've been building websites since the 
+[**`jQuery`**](https://jquery.com/) 
+days ... ⏳
+We consider this a good _declarative_ "successor" to **`jQuery`**.
+
+> **Note**: **`Alpine.js`** not _quite_ as elegant as 
+[**`svelte`**](https://svelte.dev/)
+But **`svelte`** want's to "_own_" the DOM
+which means it doesn't play nicely with **`LiveView`** ...
+So this is our only option for now.
+
 
-## _How?_
+## Who? 👤
+
++ [x] Anyone building a Static website that needs good UI enhancements.
++ [x] People in the **`@dwyl`** team that want to understand how we're building our Web App(s).
+
+<br />
+
+## _How?_ 💻
 
 Clone:
 
 ```sh
 git clone [email protected]:dwyl/learn-alpine.js.git && cd learn-alpine.js
 ```
 
-Run:
+### Install ⬇️
+
+Run the following command in your terminal:
 
 ```sh
 npm i
 ```
 
-That will install the `live-server` dependency, start it and open your default web browser:
+> **Note**: assumes you have **`node.js`** installed. 
+
+
+That will install the `live-server` dependency, 
+start the server 
+and open your default web browser:
 
 <img width="784" alt="image" src="https://user-images.githubusercontent.com/194400/173512514-b32d0dec-8568-4518-b493-f18ce3f82e94.png">
 
-Then you can follow the tutorial: https://youtu.be/r5iWCtfltso
+Then you can follow the tutorial: 
+https://alpinejs.dev/start-here
+
+Or if you have a decent internet connection
+this video is a good intro: 
+https://youtu.be/r5iWCtfltso
diff --git a/index.html b/index.html
@@ -6,8 +6,10 @@
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <title>Alpine.js Tutorial</title>
   <!-- <link rel="shortcut icon" href="lib/favicon.ico" type="image/x-icon"> -->
-  <script src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.js"></script>
+
+  <!-- see: https://alpinejs.dev/plugins/mask -->
+  <script src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
 </head>
 <body>
   <script src="https://cdn.tailwindcss.com"></script>