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

feat: add links page

Browse Source 
Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
2022-07-30 11:04:52 +08:00
parent ba9816e4c1
commit 0a950731d9
10 changed files with 267 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+5
View File
@@ -16,6 +16,11 @@ const { title } = Astro.props as Props;
</head> </head>
<body> <body>
<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>
<slot /> <slot />
</body> </body>
src/pages/index.astro
+1 -1
View File
@@ -37,7 +37,7 @@ import PostCard from "../components/PostCard.vue"
main { main {
margin: auto; margin: auto;
padding: 1em; padding: 1em;
max-width: 60ch; max-width: 70ch;
} }
.text-gradient { .text-gradient {
src/pages/links.astro
+73
View File
@@ -0,0 +1,73 @@
---
import Layout from "../layouts/Layout.astro";
const links = [
{
"id": 1,
"name": "Ryan Wang's Blog",
"url": "https://ryanc.cc/",
"logo": "https://ryanc.cc/avatar",
"description": "Hello Halo",
"team": "",
"priority": 0
},
{
"id": 40,
"name": "guqing's blog",
"url": "https://www.guqing.xyz/",
"logo": "https://www.guqing.xyz/avatar",
"description": "毕生所求无它，爱与自由而已",
"team": "",
"priority": 0
},
{
"id": 104,
"name": "JohnNiang's Blog",
"url": "https://johnniang.me",
"logo": "https://johnniang.me/avatar",
"description": "Core contributor of Halo organization.",
"team": "",
"priority": 0
},
{
"id": 152,
"name": "烟霞志",
"url": "https://simplestark.com",
"logo": "https://simplestark.com/avatar",
"description": "空有烟霞之志，叹无水云之身。",
"team": "",
"priority": 0
},
]
---
<Layout title="Links">
<main>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
{links.map((data) => <a href={data.url} th:href="#{data.url}" target="_blank">
<div
class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" th:src="#{data.logo}" th:alt="#{data.name}" src={data.logo}
alt={data.name}>
</div>
<div class="flex-1 min-w-0">
<div>
<p class="text-sm font-medium text-gray-900 truncate" th:text="#{data.name}">{data.name}</p>
<p class="text-sm text-gray-500 truncate" th:text="#{data.description}">{data.description}</p>
</div>
</div>
</div>
</a>)}
</div>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1em;
max-width: 70ch;
}
</style>
templates/assets/4669d51c.dbc606a6.css → templates/assets/1a866341.8e0feb74.css
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/assets/7181965e.5e24488a.css
+1
View File
@@ -0,0 +1 @@
main:where(.astro-SLXJX4NQ){margin:auto;padding:1em;max-width:70ch}
templates/assets/PostCard.42ac9187.js → templates/assets/PostCard.d1fd8841.js
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/assets/c3308dde.eb1eaf30.css → templates/assets/c3308dde.c4369cc0.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: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)} :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)}
templates/index.html
+20 -106
View File
@@ -1,23 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><head>
<html class="astro-3BZDFDD4" lang="en">
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width" name="viewport"> <meta name="viewport" content="width=device-width">
<title>Welcome to Astro.</title> <title>Welcome to Astro.</title>
<link href="/assets/c3308dde.eb1eaf30.css" rel="stylesheet" th:href="@{/assets/c3308dde.eb1eaf30.css}"> <link rel="stylesheet" href="/assets/c3308dde.c4369cc0.css" th:href="@{/assets/c3308dde.c4369cc0.css}">
<link href="/assets/4669d51c.dbc606a6.css" rel="stylesheet" th:href="@{/assets/4669d51c.dbc606a6.css}"> <link rel="stylesheet" href="/assets/1a866341.8e0feb74.css" th:href="@{/assets/1a866341.8e0feb74.css}"></head>
</head>
<body class="astro-3BZDFDD4"> <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>
</nav>
<main class="astro-SJCY3QFU"> <main class="astro-SJCY3QFU">
<h1 class="astro-SJCY3QFU">Welcome to <span class="text-gradient astro-SJCY3QFU">Astro</span></h1> <h1 class="astro-SJCY3QFU">Welcome to <span class="text-gradient astro-SJCY3QFU">Astro</span></h1>
<p class="instructions astro-SJCY3QFU"> <p class="instructions astro-SJCY3QFU">
Check out the <code class="astro-SJCY3QFU">src/pages</code> directory to get started.<br class="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. <strong class="astro-SJCY3QFU">Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p> </p>
<ul class="link-card-grid astro-SJCY3QFU" role="list"> <ul role="list" class="link-card-grid astro-SJCY3QFU">
<li class="link-card astro-DYDDWWYO"> <li class="link-card astro-DYDDWWYO">
<a class="astro-DYDDWWYO" href="https://docs.astro.build/"> <a href="https://docs.astro.build/" class="astro-DYDDWWYO">
<h2 class="astro-DYDDWWYO"> <h2 class="astro-DYDDWWYO">
Documentation Documentation
<span class="astro-DYDDWWYO">→</span> <span class="astro-DYDDWWYO">→</span>
@@ -28,7 +30,7 @@
</a> </a>
</li> </li>
<li class="link-card astro-DYDDWWYO"> <li class="link-card astro-DYDDWWYO">
<a class="astro-DYDDWWYO" href="https://astro.build/integrations/"> <a href="https://astro.build/integrations/" class="astro-DYDDWWYO">
<h2 class="astro-DYDDWWYO"> <h2 class="astro-DYDDWWYO">
Integrations Integrations
<span class="astro-DYDDWWYO">→</span> <span class="astro-DYDDWWYO">→</span>
@@ -39,7 +41,7 @@
</a> </a>
</li> </li>
<li class="link-card astro-DYDDWWYO"> <li class="link-card astro-DYDDWWYO">
<a class="astro-DYDDWWYO" href="https://astro.build/themes/"> <a href="https://astro.build/themes/" class="astro-DYDDWWYO">
<h2 class="astro-DYDDWWYO"> <h2 class="astro-DYDDWWYO">
Themes Themes
<span class="astro-DYDDWWYO">→</span> <span class="astro-DYDDWWYO">→</span>
@@ -50,7 +52,7 @@
</a> </a>
</li> </li>
<li class="link-card astro-DYDDWWYO"> <li class="link-card astro-DYDDWWYO">
<a class="astro-DYDDWWYO" href="https://astro.build/chat/"> <a href="https://astro.build/chat/" class="astro-DYDDWWYO">
<h2 class="astro-DYDDWWYO"> <h2 class="astro-DYDDWWYO">
Chat Chat
<span class="astro-DYDDWWYO">→</span> <span class="astro-DYDDWWYO">→</span>
@@ -61,97 +63,9 @@
</a> </a>
</li> </li>
</ul> </ul>
<style>astro-island, astro-slot { <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>
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 await-children="" before-hydration-url="data:text/javascript;charset=utf-8,//[no before-hydration script]" client="visible"
component-export="default" component-url="/assets/PostCard.42ac9187.js"
opts="{&quot;name&quot;:&quot;PostCard&quot;,&quot;value&quot;:true}" props="{&quot;class&quot;:[0,&quot;astro-SJCY3QFU&quot;]}"
renderer-url="/assets/client.e67fc49c.js"
ssr="" th:component-url="@{/assets/PostCard.42ac9187.js}"
th:renderer-url="@{/assets/client.e67fc49c.js}" uid="s8rrH">
<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 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> </main>
</body>
</html>
</body></html>
templates/links.html
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><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>
<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>
</nav>
<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">
<a href="https://ryanc.cc/" th:href="#{data.url}" target="_blank" class="astro-SLXJX4NQ">
<div class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400 astro-SLXJX4NQ">
<div class="flex-shrink-0 astro-SLXJX4NQ">
<img class="h-12 w-12 rounded-full astro-SLXJX4NQ" th:src="#{data.logo}" th:alt="#{data.name}" src="https://ryanc.cc/avatar" alt="Ryan Wang's Blog">
</div>
<div class="flex-1 min-w-0 astro-SLXJX4NQ">
<div class="astro-SLXJX4NQ">
<p class="text-sm font-medium text-gray-900 truncate astro-SLXJX4NQ" th:text="#{data.name}">Ryan Wang's Blog</p>
<p class="text-sm text-gray-500 truncate astro-SLXJX4NQ" th:text="#{data.description}">Hello Halo</p>
</div>
</div>
</div>
</a><a href="https://www.guqing.xyz/" th:href="#{data.url}" target="_blank" class="astro-SLXJX4NQ">
<div class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400 astro-SLXJX4NQ">
<div class="flex-shrink-0 astro-SLXJX4NQ">
<img class="h-12 w-12 rounded-full astro-SLXJX4NQ" th:src="#{data.logo}" th:alt="#{data.name}" src="https://www.guqing.xyz/avatar" alt="guqing's blog">
</div>
<div class="flex-1 min-w-0 astro-SLXJX4NQ">
<div class="astro-SLXJX4NQ">
<p class="text-sm font-medium text-gray-900 truncate astro-SLXJX4NQ" th:text="#{data.name}">guqing's blog</p>
<p class="text-sm text-gray-500 truncate astro-SLXJX4NQ" th:text="#{data.description}">毕生所求无它，爱与自由而已</p>
</div>
</div>
</div>
</a><a href="https://johnniang.me" th:href="#{data.url}" target="_blank" class="astro-SLXJX4NQ">
<div class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400 astro-SLXJX4NQ">
<div class="flex-shrink-0 astro-SLXJX4NQ">
<img class="h-12 w-12 rounded-full astro-SLXJX4NQ" th:src="#{data.logo}" th:alt="#{data.name}" src="https://johnniang.me/avatar" alt="JohnNiang's Blog">
</div>
<div class="flex-1 min-w-0 astro-SLXJX4NQ">
<div class="astro-SLXJX4NQ">
<p class="text-sm font-medium text-gray-900 truncate astro-SLXJX4NQ" th:text="#{data.name}">JohnNiang's Blog</p>
<p class="text-sm text-gray-500 truncate astro-SLXJX4NQ" th:text="#{data.description}">Core contributor of Halo organization.</p>
</div>
</div>
</div>
</a><a href="https://simplestark.com" th:href="#{data.url}" target="_blank" class="astro-SLXJX4NQ">
<div class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400 astro-SLXJX4NQ">
<div class="flex-shrink-0 astro-SLXJX4NQ">
<img class="h-12 w-12 rounded-full astro-SLXJX4NQ" th:src="#{data.logo}" th:alt="#{data.name}" src="https://simplestark.com/avatar" alt="烟霞志">
</div>
<div class="flex-1 min-w-0 astro-SLXJX4NQ">
<div class="astro-SLXJX4NQ">
<p class="text-sm font-medium text-gray-900 truncate astro-SLXJX4NQ" th:text="#{data.name}">烟霞志</p>
<p class="text-sm text-gray-500 truncate astro-SLXJX4NQ" th:text="#{data.description}">空有烟霞之志，叹无水云之身。</p>
</div>
</div>
</div>
</a>
</div>
</main>
</body></html>
templates/post.html
+11 -5
View File
@@ -1,11 +1,17 @@
<!DOCTYPE html><html lang="en" class="astro-3BZDFDD4"><head> <!DOCTYPE html><html lang="en" class="astro-OLJ52OFC"><head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Welcome to Post Page.</title> <title>Welcome to Post Page.</title>
<link rel="stylesheet" href="/assets/4669d51c.dbc606a6.css" th:href="@{/assets/4669d51c.dbc606a6.css}"></head> <link rel="stylesheet" href="/assets/1a866341.8e0feb74.css" th:href="@{/assets/1a866341.8e0feb74.css}"></head>
<body class="astro-3BZDFDD4"> <body class="astro-OLJ52OFC">
<time>1659089180862</time><main> <nav class="flex gap-3 astro-OLJ52OFC">
<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="Z4txv0" component-url="/assets/PostCard.42ac9187.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.42ac9187.js}" th:renderer-url="@{/assets/client.e67fc49c.js}"><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> <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>
</nav>
<time>1659150282813</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> </main>
</body></html> </body></html>