abelljs · timscodebase · Oct 7, 2023 · Oct 7, 2023 · Oct 7, 2023 · Oct 7, 2023
diff --git a/playground/abell-with-tailwind/.gitignore b/playground/abell-with-tailwind/.gitignore
@@ -0,0 +1,6 @@
+/dist/
+/node_modules/
+
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/playground/abell-with-tailwind/.prettierrc b/playground/abell-with-tailwind/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true
+}
diff --git a/playground/abell-with-tailwind/README.md b/playground/abell-with-tailwind/README.md
@@ -0,0 +1,12 @@
+# Abell Default TailwindCSS Template
+
+## An Abell template with TailwindCSS
+
+### Set up
+
+```bash
+git clone https://github.com/timscodebase/abell-demo.git
+cd abell-demo
+pnpm i
+pnpm dev
+```
diff --git a/playground/abell-with-tailwind/_components/counter.abell b/playground/abell-with-tailwind/_components/counter.abell
@@ -0,0 +1,9 @@
+{{
+  import globalMeta from './_components/global.meta.abell'
+}}
+
+<div class="container mx-auto gridplace-items-center">
+  <button class="button secondary" id="counter-button">
+    Counter <span id="count">0</span>
+  </button>
+</div>
diff --git a/playground/abell-with-tailwind/_components/global.meta.abell b/playground/abell-with-tailwind/_components/global.meta.abell
@@ -0,0 +1,8 @@
+{{
+  import config from '../config';
+}}
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{ props.title || config.title }}</title>
+<meta name="description" content="{{ props.description || config.description }}">
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="./client-assets/global.css" />
diff --git a/playground/abell-with-tailwind/_components/h.abell b/playground/abell-with-tailwind/_components/h.abell
@@ -0,0 +1,3 @@
+<h{{ props.level }} class="{{ props.classes }}">
+  {{ props.text }}
+</h{{ props.level }}>
diff --git a/playground/abell-with-tailwind/_components/logo.abell b/playground/abell-with-tailwind/_components/logo.abell
@@ -0,0 +1,4 @@
+<div class="grid place-items-center p-16">
+  <img class="brand" src="/abell-logo.svg" alt="abell logo" width="200" height="200" />
+</div>
+
diff --git a/playground/abell-with-tailwind/_components/navbar.abell b/playground/abell-with-tailwind/_components/navbar.abell
@@ -0,0 +1,42 @@
+<nav>
+  <ul>
+    <li>
+      {{ console.log("Props: ", props) }}
+      <a class="{{ props.activeRoute === '/' ? 'active' : '' }}" href="/">
+        Home
+      </a>
+    </li>
+    <li>
+      <a class="{{ props.activeRoute === '/about' ? 'active' : '' }}" href="/about">
+        About
+      </a>
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    padding: 24px 0px 48px;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0px 12px;
+  }
+
+  a {
+    color: var(--text);
+    text-decoration: none;
+    font-size: 1.1rem;
+  }
+  a.active {
+    color: var(--primary-hover);
+    font-weight: bold;
+  }
+</style>
diff --git a/playground/abell-with-tailwind/_components/types.ts b/playground/abell-with-tailwind/_components/types.ts
@@ -0,0 +1,2 @@
+export type LevelType = 1 | 2 | 3 | 4 | 5 | 6
+export type TextType = string
diff --git a/playground/abell-with-tailwind/about.abell b/playground/abell-with-tailwind/about.abell
@@ -0,0 +1,13 @@
+{{
+  import navbar from './_components/navbar.abell';
+  import globalMeta from './_components/global.meta.abell';
+}}
+<html>
+<head>
+  {{ globalMeta({ title: 'About Page' }) }}
+</head>
+<body>
+  {{ navbar({ activeRoute: '/about' }) }}
+  <div class="container">Welcome to About Page 📚</div>
+</body>
+</html>
diff --git a/playground/abell-with-tailwind/client-assets/global.css b/playground/abell-with-tailwind/client-assets/global.css
@@ -0,0 +1,63 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary: #0a30e0;
+  --primary-hover: #1c3ee7;
+  --logo-shadow: #002bf6cc;
+  --text: #111;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  color: var(--text);
+  font-family: Verdana, Helvetica, sans-serif;
+  text-align: center;
+}
+
+.container {
+  padding: 24px 0px;
+}
+
+button {
+  cursor: pointer;
+}
+
+.subtext {
+  font-size: 1.2rem;
+  margin-bottom: 24px;
+}
+
+img.brand {
+  filter: drop-shadow(2px 2px 6px var(--logo-shadow));
+}
+
+.button {
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  border: none;
+  background-color: var(--primary);
+  color: #fff;
+  border-radius: 4px;
+  padding: 10px 24px;
+  font-size: inherit;
+}
+
+.primary:hover {
+  background-color: var(--primary-hover);
+}
+
+.button.secondary {
+  background-color: #fff;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+}
+
+.button.secondary:hover {
+  background-color: #11f1;
+}
diff --git a/playground/abell-with-tailwind/client-assets/index-client.js b/playground/abell-with-tailwind/client-assets/index-client.js
@@ -0,0 +1,4 @@
+document.querySelector('#counter-button').addEventListener('click', () => {
+  const countEl = document.querySelector('#count');
+  countEl.innerText = Number(countEl.innerText) + 1;
+});
diff --git a/playground/abell-with-tailwind/config.js b/playground/abell-with-tailwind/config.js
@@ -0,0 +1,10 @@
+const config = {
+  title: 'Abell Template with TailwindCSS',
+  description: 'An Abell template with TailwindCSS',
+  keywords: ['abell', 'tailwind', 'tailwindcss'],
+  author: 'Tim Smith',
+  github: 'https://github.com/timscodebase',
+  linkedin: 'https://www.linkedin.com/in/timsmith25/',
+}
+
+export default config
diff --git a/playground/abell-with-tailwind/index.abell b/playground/abell-with-tailwind/index.abell
@@ -0,0 +1,24 @@
+{{
+  import config from './config';
+  import counter from './_components/counter.abell'
+  import h from './_components/h.abell'
+  import logo from './_components/logo.abell'
+  import navbar from './_components/navbar.abell'
+  import globalMeta from './_components/global.meta.abell'
+}}
+<html>
+<head>
+  {{ globalMeta }}
+</head>
+<body>
+  <main class="container">
+    {{ navbar({ activeRoute: '/' }) }}
+      {{ logo() }}
+      {{ h({ level: 2, text: config.title, classes: "font-bold m-8 text-3xl" }) }}
+      <p class="subtext">Welcome to Abell's Default TailwindCSS Template 🚀</p>
+      <a class="button primary" href="https://abelljs.org/" target="_blank">View Documentation</a>
+    {{ counter() }}
+  </main>
+  <script src="./client-assets/index-client.js" type="module"></script>
+</body>
+</html>
diff --git a/playground/abell-with-tailwind/package.json b/playground/abell-with-tailwind/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "abell-demo",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "abell dev",
+    "generate": "abell generate"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "abell": "1.0.0-beta.2",
+    "tailwindcss": "^3.3.3"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export type LevelType = 1 \| 2 \| 3 \| 4 \| 5 \| 6
		export type TextType = string