nxxy335/halo-theme-WarmIsland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add i18n files

Browse Source 
Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
2022-08-01 12:29:02 +08:00
parent 3e2f28b4ff
commit 39df649b96
10 changed files with 161 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
i18n/default.properties
+3
View File
@@ -0,0 +1,3 @@
foo=这是一段测试文本
bar=这是另外一段测试文本
hello=你好，{0}
i18n/en.properties
+3
View File
@@ -0,0 +1,3 @@
foo=foo
bar=bar
hello=Hello, {0}
i18n/zh.properties
+3
View File
@@ -0,0 +1,3 @@
foo=这是一段测试文本
bar=这是另外一段测试文本
hello=你好，{0}
src/layouts/Layout.astro
+7
View File
@@ -16,11 +16,18 @@ const { title } = Astro.props as Props;
</head>
<body>
<div class="flex justify-between">
<nav class="flex gap-3">
<a href="/" th:href="@{/}">Home</a>
<a href="/post" th:href="@{/post}">Post</a>
<a href="/links" th:href="@{/links}">Links</a>
</nav>
<div>
<a href="/">默认</a>
<a href="/?language=zh">中文</a>
<a href="/?language=en">英文</a>
</div>
</div>
<slot />
</body>
src/pages/index.astro
+6 -2
View File
@@ -18,8 +18,12 @@ import PostCard from "../components/PostCard.vue"
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. ❤️" />
<Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
</ul>
<ul class="list-decimal list-inside">
<li th:text="#{foo}"></li>
<li th:text="#{bar}"></li>
<li th:text="#{hello('Ryan Wang')}"></li>
</ul>
<PostCard client:visible />
</main>
templates/assets/1a866341.8e0feb74.css → templates/assets/1a866341.2d6bfba8.css
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/assets/c3308dde.c4369cc0.css → templates/assets/c3308dde.0e9da593.css
+1 -1
View File
@@ -1 +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:70ch}.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)}
:root{--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4)}h1:where(.astro-K34SY24P){margin:2rem 0}main:where(.astro-K34SY24P){margin:auto;padding:1em;max-width:70ch}.text-gradient:where(.astro-K34SY24P){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-K34SY24P){line-height:1.6;margin:1rem 0;background:#4f39fa;padding:1rem;border-radius:.4rem;color:var(--color-bg)}.instructions:where(.astro-K34SY24P) code:where(.astro-K34SY24P){font-size:.875em;border:.1em solid var(--color-border);border-radius:4px;padding:.15em .25em}.link-card-grid:where(.astro-K34SY24P){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
+27 -15
View File
@@ -1,23 +1,30 @@
<!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><head>
<!DOCTYPE html><html lang="en" class="astro-TFKA5VKL"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Welcome to Astro.</title>
<link rel="stylesheet" href="/assets/c3308dde.c4369cc0.css" th:href="@{/assets/c3308dde.c4369cc0.css}">
<link rel="stylesheet" href="/assets/1a866341.8e0feb74.css" th:href="@{/assets/1a866341.8e0feb74.css}"></head>
<link rel="stylesheet" href="/assets/c3308dde.0e9da593.css" th:href="@{/assets/c3308dde.0e9da593.css}">
<link rel="stylesheet" href="/assets/1a866341.2d6bfba8.css" th:href="@{/assets/1a866341.2d6bfba8.css}"></head>
<body class="astro-OLJ52OFC">
<nav class="flex gap-3 astro-OLJ52OFC">
<a href="/" th:href="@{/}" class="astro-OLJ52OFC">Home</a>
<a href="/post" th:href="@{/post}" class="astro-OLJ52OFC">Post</a>
<a href="/links" th:href="@{/links}" class="astro-OLJ52OFC">Links</a>
<body class="astro-TFKA5VKL">
<div class="flex justify-between astro-TFKA5VKL">
<nav class="flex gap-3 astro-TFKA5VKL">
<a href="/" th:href="@{/}" class="astro-TFKA5VKL">Home</a>
<a href="/post" th:href="@{/post}" class="astro-TFKA5VKL">Post</a>
<a href="/links" th:href="@{/links}" class="astro-TFKA5VKL">Links</a>
</nav>
<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.
<div class="astro-TFKA5VKL">
<a href="/" class="astro-TFKA5VKL">默认</a>
<a href="/?language=zh" class="astro-TFKA5VKL">中文</a>
<a href="/?language=en" class="astro-TFKA5VKL">英文</a>
</div>
</div>
<main class="astro-K34SY24P">
<h1 class="astro-K34SY24P">Welcome to <span class="text-gradient astro-K34SY24P">Astro</span></h1>
<p class="instructions astro-K34SY24P">
Check out the <code class="astro-K34SY24P">src/pages</code> directory to get started.<br class="astro-K34SY24P">
<strong class="astro-K34SY24P">Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid astro-SJCY3QFU">
<ul role="list" class="link-card-grid astro-K34SY24P">
<li class="link-card astro-DYDDWWYO">
<a href="https://docs.astro.build/" class="astro-DYDDWWYO">
<h2 class="astro-DYDDWWYO">
@@ -63,7 +70,12 @@
</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="Z2lpugP" component-url="/assets/PostCard.d1fd8841.js" component-export="default" renderer-url="/assets/client.e67fc49c.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="" th:component-url="@{/assets/PostCard.d1fd8841.js}" th:renderer-url="@{/assets/client.e67fc49c.js}"><div class="p-4 astro-SJCY3QFU"><span class="text-xl font-bold" 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 class="h-5 w-5 opacity-70" fill="none" viewBox="0 0 20 20"><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>
<ul class="list-decimal list-inside astro-K34SY24P">
<li th:text="#{foo}" class="astro-K34SY24P"></li>
<li th:text="#{bar}" class="astro-K34SY24P"></li>
<li th:text="#{hello('Ryan Wang')}" class="astro-K34SY24P"></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="uiqsB" component-url="/assets/PostCard.d1fd8841.js" component-export="default" renderer-url="/assets/client.e67fc49c.js" props="{&quot;class&quot;:[0,&quot;astro-K34SY24P&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="" th:component-url="@{/assets/PostCard.d1fd8841.js}" th:renderer-url="@{/assets/client.e67fc49c.js}"><div class="p-4 astro-K34SY24P"><span class="text-xl font-bold" 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 class="h-5 w-5 opacity-70" fill="none" viewBox="0 0 20 20"><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>
templates/links.html
+14 -7
View File
@@ -1,16 +1,23 @@
<!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><head>
<!DOCTYPE html><html lang="en" class="astro-TFKA5VKL"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Links</title>
<link rel="stylesheet" href="/assets/7181965e.5e24488a.css" th:href="@{/assets/7181965e.5e24488a.css}">
<link rel="stylesheet" href="/assets/1a866341.8e0feb74.css" th:href="@{/assets/1a866341.8e0feb74.css}"></head>
<link rel="stylesheet" href="/assets/1a866341.2d6bfba8.css" th:href="@{/assets/1a866341.2d6bfba8.css}"></head>
<body class="astro-OLJ52OFC">
<nav class="flex gap-3 astro-OLJ52OFC">
<a href="/" th:href="@{/}" class="astro-OLJ52OFC">Home</a>
<a href="/post" th:href="@{/post}" class="astro-OLJ52OFC">Post</a>
<a href="/links" th:href="@{/links}" class="astro-OLJ52OFC">Links</a>
<body class="astro-TFKA5VKL">
<div class="flex justify-between astro-TFKA5VKL">
<nav class="flex gap-3 astro-TFKA5VKL">
<a href="/" th:href="@{/}" class="astro-TFKA5VKL">Home</a>
<a href="/post" th:href="@{/post}" class="astro-TFKA5VKL">Post</a>
<a href="/links" th:href="@{/links}" class="astro-TFKA5VKL">Links</a>
</nav>
<div class="astro-TFKA5VKL">
<a href="/" class="astro-TFKA5VKL">默认</a>
<a href="/?language=zh" class="astro-TFKA5VKL">中文</a>
<a href="/?language=en" class="astro-TFKA5VKL">英文</a>
</div>
</div>
<main class="astro-SLXJX4NQ">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 astro-SLXJX4NQ">
templates/post.html
+15 -8
View File
@@ -1,16 +1,23 @@
<!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><head>
<!DOCTYPE html><html lang="en" class="astro-TFKA5VKL"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Welcome to Post Page.</title>
<link rel="stylesheet" href="/assets/1a866341.8e0feb74.css" th:href="@{/assets/1a866341.8e0feb74.css}"></head>
<link rel="stylesheet" href="/assets/1a866341.2d6bfba8.css" th:href="@{/assets/1a866341.2d6bfba8.css}"></head>
<body class="astro-OLJ52OFC">
<nav class="flex gap-3 astro-OLJ52OFC">
<a href="/" th:href="@{/}" class="astro-OLJ52OFC">Home</a>
<a href="/post" th:href="@{/post}" class="astro-OLJ52OFC">Post</a>
<a href="/links" th:href="@{/links}" class="astro-OLJ52OFC">Links</a>
<body class="astro-TFKA5VKL">
<div class="flex justify-between astro-TFKA5VKL">
<nav class="flex gap-3 astro-TFKA5VKL">
<a href="/" th:href="@{/}" class="astro-TFKA5VKL">Home</a>
<a href="/post" th:href="@{/post}" class="astro-TFKA5VKL">Post</a>
<a href="/links" th:href="@{/links}" class="astro-TFKA5VKL">Links</a>
</nav>
<time>1659261980537</time><main>
<div class="astro-TFKA5VKL">
<a href="/" class="astro-TFKA5VKL">默认</a>
<a href="/?language=zh" class="astro-TFKA5VKL">中文</a>
<a href="/?language=en" class="astro-TFKA5VKL">英文</a>
</div>
</div>
<time>1659328078791</time><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="23Qlud" component-url="/assets/PostCard.d1fd8841.js" component-export="default" renderer-url="/assets/client.e67fc49c.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="" th:component-url="@{/assets/PostCard.d1fd8841.js}" th:renderer-url="@{/assets/client.e67fc49c.js}"><div class="p-4"><span class="text-xl font-bold" 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 class="h-5 w-5 opacity-70" fill="none" viewBox="0 0 20 20"><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>