init project

Signed-off-by: Ryan Wang <i@ryanc.cc>

.gitignore

@@ -0,0 +1,20 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,5 @@
+# theme-astro-starter(Experimental)
+
+Halo 2.0 Theme base on Astro and Thymeleaf
+
+- <https://astro.build>

astro.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from "astro/config";
+import vue from "@astrojs/vue";
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [vue(), tailwind()],
+  outDir: "./templates",
+  output: "static",
+  build: {
+    format: "file",
+  },
+  server: {
+    port: 4000,
+  },
+});

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@halo-dev/theme-astro-starter",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "@astrojs/tailwind": "^0.2.5",
+    "@astrojs/vue": "^0.5.0",
+    "astro": "^1.0.0-rc.2",
+    "vue": "^3.2.37"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.6.7"
+  }
+}

src/components/Card.astro

@@ -0,0 +1,74 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card>a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	p {
+		margin-top: 0.75rem;
+		margin-bottom: 0;
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4f39fa;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		transform: translateX(2px);
+	}
+</style>

src/components/PostCard.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { TransitionRoot } from "@headlessui/vue";
+import { ref } from "vue";
+
+const isShowing = ref(true);
+
+function resetIsShowing() {
+  isShowing.value = false;
+
+  setTimeout(() => {
+    isShowing.value = true;
+  }, 500);
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <span class="font-bold text-xl" th:text="@{post.title}">Hello Halo</span>
+
+    <div class="flex flex-col items-center py-16">
+      <div class="h-32 w-32">
+        <TransitionRoot
+          appear
+          :show="isShowing"
+          as="template"
+          enter="transform transition duration-[400ms]"
+          enter-from="opacity-0 rotate-[-120deg] scale-50"
+          enter-to="opacity-100 rotate-0 scale-100"
+          leave="transform duration-200 transition ease-in-out"
+          leave-from="opacity-100 rotate-0 scale-100 "
+          leave-to="opacity-0 scale-95 "
+        >
+          <div class="h-full w-full rounded-md bg-white shadow-lg" />
+        </TransitionRoot>
+      </div>
+      <button
+        @click="resetIsShowing"
+        class="mt-8 flex transform items-center rounded-full bg-black bg-opacity-20 px-3 py-2 text-sm font-medium text-white transition hover:scale-105 hover:bg-opacity-30 focus:outline-none active:bg-opacity-40"
+      >
+        <svg viewBox="0 0 20 20" fill="none" class="h-5 w-5 opacity-70">
+          <path
+            d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7"
+            stroke="currentColor"
+            stroke-width="1.5"
+          />
+        </svg>
+
+        <span class="ml-3">Click to transition</span>
+      </button>
+    </div>
+  </div>
+</template>

src/layouts/Layout.astro

@@ -0,0 +1,58 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	<title>{title}</title>
+</head>
+
+<body>
+	<slot />
+</body>
+
+</html>
+<style>
+	:root {
+		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+		--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+		--color-text: hsl(12, 5%, 4%);
+		--color-bg: hsl(10, 21%, 95%);
+		--color-border: hsl(17, 24%, 90%);
+	}
+
+	html {
+		font-family: system-ui, sans-serif;
+		font-size: var(--font-size-base);
+		color: var(--color-text);
+		background-color: var(--color-bg);
+	}
+
+	body {
+		margin: 0;
+	}
+
+	:global(h1) {
+		font-size: var(--font-size-xl);
+	}
+
+	:global(h2) {
+		font-size: var(--font-size-lg);
+	}
+
+	:global(code) {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+</style>

src/pages/index.astro

@@ -0,0 +1,88 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+import PostCard from "../components/PostCard.vue"
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<p class="instructions">
+			Check out the <code>src/pages</code> directory to get started.<br />
+			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+		</p>
+		<ul role="list" class="link-card-grid">
+			<Card href="https://docs.astro.build/" title="Documentation"
+				body="Learn how Astro works and explore the official API docs." />
+			<Card href="https://astro.build/integrations/" title="Integrations"
+				body="Supercharge your project with new frameworks and libraries." />
+			<Card href="https://astro.build/themes/" title="Themes"
+				body="Explore a galaxy of community-built starter themes." />
+			<Card href="https://astro.build/chat/" title="Chat"
+				body="Come say hi to our amazing Discord community. ❤️" />
+		</ul>
+		<PostCard client:visible />
+	</main>
+</Layout>
+
+<style>
+	:root {
+		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
+	}
+
+	h1 {
+		margin: 2rem 0;
+	}
+
+	main {
+		margin: auto;
+		padding: 1em;
+		max-width: 60ch;
+	}
+
+	.text-gradient {
+		font-weight: 900;
+		background-image: var(--astro-gradient);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-size: 100% 200%;
+		background-position-y: 100%;
+		border-radius: 0.4rem;
+		animation: pulse 4s ease-in-out infinite;
+	}
+
+	@keyframes pulse {
+
+		0%,
+		100% {
+			background-position-y: 0%;
+		}
+
+		50% {
+			background-position-y: 80%;
+		}
+	}
+
+	.instructions {
+		line-height: 1.6;
+		margin: 1rem 0;
+		background: #4f39fa;
+		padding: 1rem;
+		border-radius: 0.4rem;
+		color: var(--color-bg);
+	}
+
+	.instructions code {
+		font-size: 0.875em;
+		border: 0.1em solid var(--color-border);
+		border-radius: 4px;
+		padding: 0.15em 0.25em;
+	}
+
+	.link-card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+		gap: 1rem;
+		padding: 0;
+	}
+</style>

src/pages/post.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+import PostCard from "../components/PostCard.vue"
+---
+
+<Layout title="Welcome to Post Page.">
+	<main>
+		<PostCard client:visible />
+	</main>
+</Layout>

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

templates/assets/04b34e77.eb1eaf30.css

@@ -0,0 +1 @@
+:root{--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4)}h1:where(.astro-SJCY3QFU){margin:2rem 0}main:where(.astro-SJCY3QFU){margin:auto;padding:1em;max-width:60ch}.text-gradient:where(.astro-SJCY3QFU){font-weight:900;background-image:var(--astro-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:100% 200%;background-position-y:100%;border-radius:.4rem;-webkit-animation:pulse 4s ease-in-out infinite;animation:pulse 4s ease-in-out infinite}@-webkit-keyframes pulse{0%,to{background-position-y:0%}50%{background-position-y:80%}}@keyframes pulse{0%,to{background-position-y:0%}50%{background-position-y:80%}}.instructions:where(.astro-SJCY3QFU){line-height:1.6;margin:1rem 0;background:#4f39fa;padding:1rem;border-radius:.4rem;color:var(--color-bg)}.instructions:where(.astro-SJCY3QFU) code:where(.astro-SJCY3QFU){font-size:.875em;border:.1em solid var(--color-border);border-radius:4px;padding:.15em .25em}.link-card-grid:where(.astro-SJCY3QFU){display:grid;grid-template-columns:repeat(auto-fit,minmax(24ch,1fr));gap:1rem;padding:0}:root{--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%)}.link-card:where(.astro-DYDDWWYO){list-style:none;display:flex;padding:.15rem;background-image:var(--link-gradient);background-size:400%;border-radius:.5rem;background-position:100%;transition:background-position .6s cubic-bezier(.22,1,.36,1)}.link-card:where(.astro-DYDDWWYO)>a:where(.astro-DYDDWWYO){width:100%;text-decoration:none;line-height:1.4;padding:1em 1.3em;border-radius:.35rem;color:var(--text-color);background-color:#fff;opacity:.8}h2:where(.astro-DYDDWWYO){margin:0;transition:color .6s cubic-bezier(.22,1,.36,1)}p:where(.astro-DYDDWWYO){margin-top:.75rem;margin-bottom:0}h2:where(.astro-DYDDWWYO) span:where(.astro-DYDDWWYO){display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}.link-card:where(.astro-DYDDWWYO):is(:hover,:focus-within){background-position:0}.link-card:where(.astro-DYDDWWYO):is(:hover,:focus-within) h2:where(.astro-DYDDWWYO){color:#4f39fa}.link-card:where(.astro-DYDDWWYO):is(:hover,:focus-within) h2:where(.astro-DYDDWWYO) span:where(.astro-DYDDWWYO){transform:translate(2px)}

templates/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!DOCTYPE html><html lang="en" class="astro-MXGA4QHU">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width">
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
+	<title>Welcome to Astro.</title>
+<link rel="stylesheet" href="/assets/81b427f6.dbc606a6.css" />
+<link rel="stylesheet" href="/assets/04b34e77.eb1eaf30.css" /></head>
+
+<body class="astro-MXGA4QHU">
+	<main class="astro-SJCY3QFU">
+		<h1 class="astro-SJCY3QFU">Welcome to <span class="text-gradient astro-SJCY3QFU">Astro</span></h1>
+		<p class="instructions astro-SJCY3QFU">
+			Check out the <code class="astro-SJCY3QFU">src/pages</code> directory to get started.<br class="astro-SJCY3QFU">
+			<strong class="astro-SJCY3QFU">Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+		</p>
+		<ul role="list" class="link-card-grid astro-SJCY3QFU">
+			<li class="link-card astro-DYDDWWYO">
+	<a href="https://docs.astro.build/" class="astro-DYDDWWYO">
+		<h2 class="astro-DYDDWWYO">
+			Documentation
+			<span class="astro-DYDDWWYO">&rarr;</span>
+		</h2>
+		<p class="astro-DYDDWWYO">
+			Learn how Astro works and explore the official API docs.
+		</p>
+	</a>
+</li>
+			<li class="link-card astro-DYDDWWYO">
+	<a href="https://astro.build/integrations/" class="astro-DYDDWWYO">
+		<h2 class="astro-DYDDWWYO">
+			Integrations
+			<span class="astro-DYDDWWYO">&rarr;</span>
+		</h2>
+		<p class="astro-DYDDWWYO">
+			Supercharge your project with new frameworks and libraries.
+		</p>
+	</a>
+</li>
+			<li class="link-card astro-DYDDWWYO">
+	<a href="https://astro.build/themes/" class="astro-DYDDWWYO">
+		<h2 class="astro-DYDDWWYO">
+			Themes
+			<span class="astro-DYDDWWYO">&rarr;</span>
+		</h2>
+		<p class="astro-DYDDWWYO">
+			Explore a galaxy of community-built starter themes.
+		</p>
+	</a>
+</li>
+			<li class="link-card astro-DYDDWWYO">
+	<a href="https://astro.build/chat/" class="astro-DYDDWWYO">
+		<h2 class="astro-DYDDWWYO">
+			Chat
+			<span class="astro-DYDDWWYO">&rarr;</span>
+		</h2>
+		<p class="astro-DYDDWWYO">
+			Come say hi to our amazing Discord community. ❤️
+		</p>
+	</a>
+</li>
+		</ul>
+		<style>astro-island,astro-slot{display:contents}</style><script>(self.Astro=self.Astro||{}).visible=(i,c,n)=>{const r=async()=>{await(await i())()};let s=new IntersectionObserver(e=>{for(const t of e)if(!!t.isIntersecting){s.disconnect(),r();break}});for(let e=0;e<n.children.length;e++){const t=n.children[e];s.observe(t)}};var a;{const l={0:t=>t,1:t=>JSON.parse(t,n),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,n)),5:t=>new Set(JSON.parse(t,n)),6:t=>BigInt(t),7:t=>new URL(t)},n=(t,r)=>{if(t===""||!Array.isArray(r))return r;const[e,i]=r;return e in l?l[e](i):void 0};customElements.get("astro-island")||customElements.define("astro-island",(a=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement?.closest("astro-island[ssr]"))return;const r=this.querySelectorAll("astro-slot"),e={},i=this.querySelectorAll("template[data-astro-template]");for(const s of i)!s.closest(this.tagName)?.isSameNode(this)||(e[s.getAttribute("data-astro-template")||"default"]=s.innerHTML,s.remove());for(const s of r)!s.closest(this.tagName)?.isSameNode(this)||(e[s.getAttribute("name")||"default"]=s.innerHTML);const o=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),n):{};this.hydrator(this)(this.Component,o,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((r,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate),await import(this.getAttribute("before-hydration-url"));const r=JSON.parse(this.getAttribute("opts"));Astro[this.getAttribute("client")](async()=>{const e=this.getAttribute("renderer-url"),[i,{default:o}]=await Promise.all([import(this.getAttribute("component-url")),e?import(e):()=>()=>{}]);return this.Component=i[this.getAttribute("component-export")||"default"],this.hydrator=o,this.hydrate},r,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},a.observedAttributes=["props"],a))}</script><astro-island uid="kvGpf" component-url="/PostCard.66b292e1.js" component-export="default" renderer-url="/client.6e2af5c0.js" props="{&quot;class&quot;:[0,&quot;astro-SJCY3QFU&quot;]}" ssr="" client="visible" before-hydration-url="data:text/javascript;charset=utf-8,//[no before-hydration script]" opts="{&quot;name&quot;:&quot;PostCard&quot;,&quot;value&quot;:true}" await-children=""><div class="p-4 astro-SJCY3QFU"><span class="font-bold text-xl" th:text="@{post.title}">Hello Halo</span><div class="flex flex-col items-center py-16"><div class="h-32 w-32"><div class="h-full w-full rounded-md bg-white shadow-lg"></div></div><button class="mt-8 flex transform items-center rounded-full bg-black bg-opacity-20 px-3 py-2 text-sm font-medium text-white transition hover:scale-105 hover:bg-opacity-30 focus:outline-none active:bg-opacity-40"><svg viewBox="0 0 20 20" fill="none" class="h-5 w-5 opacity-70"><path d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7" stroke="currentColor" stroke-width="1.5"></path></svg><span class="ml-3">Click to transition</span></button></div></div></astro-island>
+	</main>
+</body></html>

templates/post.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!DOCTYPE html><html lang="en" class="astro-MXGA4QHU">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width">
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
+	<title>Welcome to Post Page.</title>
+<link rel="stylesheet" href="/assets/81b427f6.dbc606a6.css" /></head>
+
+<body class="astro-MXGA4QHU">
+	<main>
+		<style>astro-island,astro-slot{display:contents}</style><script>(self.Astro=self.Astro||{}).visible=(i,c,n)=>{const r=async()=>{await(await i())()};let s=new IntersectionObserver(e=>{for(const t of e)if(!!t.isIntersecting){s.disconnect(),r();break}});for(let e=0;e<n.children.length;e++){const t=n.children[e];s.observe(t)}};var a;{const l={0:t=>t,1:t=>JSON.parse(t,n),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,n)),5:t=>new Set(JSON.parse(t,n)),6:t=>BigInt(t),7:t=>new URL(t)},n=(t,r)=>{if(t===""||!Array.isArray(r))return r;const[e,i]=r;return e in l?l[e](i):void 0};customElements.get("astro-island")||customElements.define("astro-island",(a=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement?.closest("astro-island[ssr]"))return;const r=this.querySelectorAll("astro-slot"),e={},i=this.querySelectorAll("template[data-astro-template]");for(const s of i)!s.closest(this.tagName)?.isSameNode(this)||(e[s.getAttribute("data-astro-template")||"default"]=s.innerHTML,s.remove());for(const s of r)!s.closest(this.tagName)?.isSameNode(this)||(e[s.getAttribute("name")||"default"]=s.innerHTML);const o=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),n):{};this.hydrator(this)(this.Component,o,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((r,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate),await import(this.getAttribute("before-hydration-url"));const r=JSON.parse(this.getAttribute("opts"));Astro[this.getAttribute("client")](async()=>{const e=this.getAttribute("renderer-url"),[i,{default:o}]=await Promise.all([import(this.getAttribute("component-url")),e?import(e):()=>()=>{}]);return this.Component=i[this.getAttribute("component-export")||"default"],this.hydrator=o,this.hydrate},r,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},a.observedAttributes=["props"],a))}</script><astro-island uid="Z1naNWI" component-url="/PostCard.66b292e1.js" component-export="default" renderer-url="/client.6e2af5c0.js" props="{}" ssr="" client="visible" before-hydration-url="data:text/javascript;charset=utf-8,//[no before-hydration script]" opts="{&quot;name&quot;:&quot;PostCard&quot;,&quot;value&quot;:true}" await-children=""><div class="p-4"><span class="font-bold text-xl" th:text="@{post.title}">Hello Halo</span><div class="flex flex-col items-center py-16"><div class="h-32 w-32"><div class="h-full w-full rounded-md bg-white shadow-lg"></div></div><button class="mt-8 flex transform items-center rounded-full bg-black bg-opacity-20 px-3 py-2 text-sm font-medium text-white transition hover:scale-105 hover:bg-opacity-30 focus:outline-none active:bg-opacity-40"><svg viewBox="0 0 20 20" fill="none" class="h-5 w-5 opacity-70"><path d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7" stroke="currentColor" stroke-width="1.5"></path></svg><span class="ml-3">Click to transition</span></button></div></div></astro-island>
+	</main>
+</body></html>

theme.yaml

@@ -0,0 +1,15 @@
+apiVersion: theme.halo.run/v1alpha1
+kind: Theme
+spec:
+  displayName: Astro Starter
+  author:
+    name: ryanwang
+    website: 'https://ryanc.cc'
+  description: Halo 2.0 Theme base on Astro and Thymeleaf
+  logo: 'https://ryanc.cc/avatar'
+  website: 'https://ryanc.cc'
+  repo: 'https://github.com/ruibaby/theme-astro-starter'
+  version: '1.0'
+  require: '*'
+metadata:
+  name: theme-astro-starter

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Add type definitions for our Astro runtime.
+    "types": ["astro/client"]
+  }
+}