├── .gitignore
├── .npmrc
├── .stackblitzrc
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
    ├── assets
    │   └── logo.svg
    └── favicon.ico
├── sandbox.config.json
├── src
    ├── components
    │   ├── ReactCounter.jsx
    │   ├── SvelteCounter.svelte
    │   ├── Tour.astro
    │   └── VueCounter.vue
    ├── pages
    │   └── index.astro
    └── styles
    │   ├── global.css
    │   └── home.css
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist
 3 | 
 4 | # dependencies
 5 | node_modules/
 6 | 
 7 | # logs
 8 | npm-debug.log*
 9 | yarn-debug.log*
10 | yarn-error.log*
11 | 
12 | # environment variables
13 | .env
14 | .env.production
15 | 
16 | # macOS-specific files
17 | .DS_Store
18 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # Expose Astro dependencies for `pnpm` users
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "startCommand": "npm start",
3 |   "env": {
4 |     "ENABLE_CJS_IMPORTS": true
5 |   }
6 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AstroAgnosticUIStarter
 2 | 
 3 | Experiment leveraging the [Astro](https://astro.build/) starter + [AgnosticUI](https://agnosticui.com/). Renders React, Vue 3, and Svelte components.
 4 | 
 5 | ![image](https://user-images.githubusercontent.com/142403/160301080-1a7be334-3064-4045-9a0a-7a349eba399b.png)
 6 | 
 7 | ## 🧞 Commands
 8 | 
 9 | All commands are run from the root of the project, from a terminal:
10 | 
11 | | Command           | Action                                       |
12 | |:----------------  |:-------------------------------------------- |
13 | | `npm install`     | Installs dependencies                        |
14 | | `npm run dev`     | Starts local dev server at `localhost:3000`  |
15 | | `npm run build`   | Build your production site to `./dist/`      |
16 | | `npm run preview` | Preview your build locally, before deploying |
17 | 
18 | ## 👀 Want to learn more?
19 | 
20 | Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).
21 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import vue from '@astrojs/vue';
 3 | import svelte from '@astrojs/svelte';
 4 | import react from '@astrojs/react';
 5 | 
 6 | export default defineConfig({
 7 | 	integrations: [vue(), react(), svelte()],
 8 |   server: {
 9 |     port: 3012,
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@example/starter",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview"
10 |   },
11 |   "devDependencies": {
12 |     "@astrojs/react": "^0.1.0",
13 |     "@astrojs/svelte": "^0.0.2",
14 |     "@astrojs/vue": "^0.0.2",
15 |     "astro": "^1.0.0-beta.0"
16 |   },
17 |   "dependencies": {
18 |     "agnostic-react": "^0.1.23",
19 |     "agnostic-svelte": "^1.1.15",
20 |     "agnostic-vue": "^1.0.24",
21 |     "react": "^17.0.2",
22 |     "react-dom": "^17.0.2",
23 |     "svelte": "^3.46.6",
24 |     "uuid": "^8.3.2",
25 |     "vue": "^3.2.31"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/public/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <style>
 3 |         #flame { fill: #FF5D01; }
 4 |         #a { fill: #000014; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             #a { fill: #fff; }
 7 |         }
 8 |     </style>
 9 |     
10 |     <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/>
11 |     <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
1 | https://rawcdn.githack.com/withastro/astro/main/examples/starter/public/favicon.ico


--------------------------------------------------------------------------------
/sandbox.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "infiniteLoopProtection": true,
 3 |   "hardReloadOnChange": false,
 4 |   "view": "browser",
 5 |   "template": "node",
 6 |   "container": {
 7 |     "port": 3000,
 8 |     "startScript": "start",
 9 |     "node": "14"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/ReactCounter.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import "agnostic-react/dist/common.min.css";
 3 | import "agnostic-react/dist/esm/index.css";
 4 | import { Alert, Button } from "agnostic-react";
 5 | 
 6 | export default function ReactCounter() {
 7 |   const [count, setCount] = useState(0);
 8 |   const add = () => setCount((i) => i + 1);
 9 |   const subtract = () => setCount((i) => i - 1);
10 | 
11 |   return (
12 |     <>
13 |       <Alert type="info"><span className="mie12">🔥</span>AgnosticUI — React</Alert>
14 |       <div id="react" className="counter">
15 |         <Button mode="secondary" isRounded onClick={subtract}>-</Button>
16 |         <pre>{count}</pre>
17 |         <Button mode="primary" isRounded onClick={add}>+</Button>
18 |       </div>
19 |     </>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/SvelteCounter.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import 'agnostic-svelte/css/common.min.css';
 3 |   import { Alert, Button } from 'agnostic-svelte';
 4 | 
 5 |   let count = 0;
 6 | 
 7 |   function add() {
 8 |     count += 1;
 9 |   }
10 | 
11 |   function subtract() {
12 |     count -= 1;
13 |   }
14 | </script>
15 | 
16 | <Alert type="info"><span class="mie12">🙌</span>AgnosticUI — Svelte</Alert>
17 | <div id="svelte" class="counter">
18 |   <Button mode="secondary" isRounded on:click={subtract}>-</Button>
19 |   <pre>{ count }</pre>
20 |   <Button mode="primary" isRounded on:click={add}>+</Button>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/components/Tour.astro:
--------------------------------------------------------------------------------
 1 | <article>
 2 | 	<section class="mbe40">
 3 | 		<h2>👀 Astro + AgnosticUI == 🚀</h2>
 4 |     <p>AgnosticUI lets you create one theme that works across all your frameworks 🎉 👊 </p>
 5 | 	</section>
 6 | </article>
 7 | <style>
 8 | 	section {
 9 | 		margin-top: var(--fluid-56);
10 | 	}
11 | </style>
12 | 


--------------------------------------------------------------------------------
/src/components/VueCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Alert type="info"><span class="mie12">👌🏽</span>AgnosticUI — Vue 3</Alert>
 3 |   <div id="vue" class="counter">
 4 |     <Button mode="secondary" isRounded @click="subtract()">-</Button>
 5 |     <pre>{{ count }}</pre>
 6 |     <Button mode="primary" isRounded @click="add()">+</Button>
 7 |   </div>
 8 | </template>
 9 | <script setup>
10 | import { ref, onMounted, useCssModule } from "vue";
11 | import "agnostic-vue/dist/common.properties.min.css";
12 | import "agnostic-vue/dist/common.resets.min.css";
13 | import "agnostic-vue/dist/common.utilities.min.css";
14 | import "agnostic-vue/dist/opinions.min.css";
15 | // Components CSS
16 | import "agnostic-vue/dist/index.css";
17 | import {
18 |   Alert,
19 |   Button,
20 | } from "agnostic-vue";
21 | 
22 | const count = ref(0);
23 | const add = () => (count.value = count.value + 1);
24 | const subtract = () => (count.value = count.value - 1);
25 | </script>


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // Style Imports
 3 | import '../styles/global.css';
 4 | import '../styles/home.css';
 5 | // Component Imports
 6 | import Tour from '../components/Tour.astro';
 7 | // You can import components from any supported Framework here!
 8 | import ReactCounter from '../components/ReactCounter.jsx';
 9 | import SvelteCounter from '../components/SvelteCounter.svelte';
10 | import VueCounter from '../components/VueCounter.vue';
11 | 
12 | // Component Script:
13 | // You can write any JavaScript/TypeScript that you'd like here.
14 | // It will run during the build, but never in the browser.
15 | // All variables are available to use in the HTML template below.
16 | let title = 'My Astro Site';
17 | 
18 | // Full Astro Component Syntax:
19 | // https://docs.astro.build/core-concepts/astro-components/
20 | ---
21 | <html lang="en">
22 | <head>
23 | 	<meta charset="UTF-8">
24 | 	<meta name="viewport" content="width=device-width">
25 | 	<title>{title}</title>
26 | 
27 | 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
28 | 
29 | 	<style>
30 | 		header {
31 | 			display: flex;
32 | 			flex-direction: column;
33 | 			gap: 1em;
34 | 			max-width: min(100%, 68ch);
35 | 		}
36 | 	</style>
37 | </head>
38 | <body>
39 | 	<main>
40 | 		<Tour />
41 | 
42 | 		<ReactCounter client:visible />
43 | 
44 | 		<SvelteCounter client:visible />
45 | 
46 | 		<VueCounter client:visible />
47 | 	</main>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | 	margin: 0;
 4 | }
 5 | 
 6 | :root {
 7 | 	font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
 8 | }
 9 | 
10 | body {
11 | 	padding: 4rem 2rem;
12 | 	width: 100%;
13 | 	min-height: 100vh;
14 | 	display: grid;
15 | 	justify-content: center;
16 | 	background: #f9fafb;
17 | 	color: #0c2c43;;
18 | }
19 | 
20 | @media (prefers-color-scheme: dark) {
21 | 	body {
22 | 		background: #0c2c43;
23 | 		color: #fff;
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/src/styles/home.css:
--------------------------------------------------------------------------------
 1 | .counter {
 2 | 	display: grid;
 3 | 	grid-auto-flow: column;
 4 | 	gap: 1em;
 5 | 	font-size: 2rem;
 6 | 	justify-content: center;
 7 | 	padding: 2rem 1rem;
 8 | }
 9 | 
10 | .counter > pre {
11 | 	text-align: center;
12 | 	min-width: 3ch;
13 | }
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "moduleResolution": "node"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------