Files
profile/src/components/home/writings.astro
2026-02-18 20:30:16 +08:00

86 lines
3.4 KiB
Plaintext

---
import Button from "../button.astro";
const feed = "https://feed.miantiao.me/";
---
<section class="max-w-4xl mx-auto px-7 lg:px-0">
<h2
class="text-2xl font-bold leading-10 tracking-tight text-neutral-900 dark:text-neutral-100"
>
My Writings
</h2>
<p class="mb-6 text-base text-neutral-600 dark:text-neutral-400">
Along with coding I also like to write about life and technology. Here are
some of my recent posts.
</p>
<div class="w-full max-w-4xl mx-auto my-7 xl:px-0">
<div
class="flex flex-col items-start justify-start md:flex-row md:space-x-7"
>
<div class="w-full md:w-2/3 space-y-7">
<div class="flex items-center justify-center w-full py-5">
<Button text="View All My Writing" link="/posts" />
</div>
</div>
<div class="w-full mt-10 md:w-1/3 md:mt-0">
<form
method="get"
action={feed}
class="p-6 border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600"
>
<div class="relative flex items-center space-x-2">
<svg
class="flex-none w-6 h-6 text-neutral-700 dark:text-neutral-200"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
></path></svg
>
<h2
class="flex text-sm font-semibold text-neutral-900 dark:text-neutral-100"
>
Subscribe my blog
</h2>
</div>
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
Get my blog updates via <a
class="font-bold"
href={`https://feedly.com/i/subscription/feed%2F${encodeURIComponent(feed)}`}
>Feedly</a
>, <a
class="font-bold"
href={`https://www.inoreader.com/feed/${encodeURIComponent(feed)}`}
>Inoreader</a
> or <a class="font-bold" href={feed}>RSS</a>.
</p>
<div class="flex flex-col items-center w-full mt-4 space-y-3">
<input
type="url"
readonly
placeholder="Email address"
aria-label="Email address"
required=""
value={feed}
class="w-full h-10 px-3 text-sm border border-dashed rounded-md focus:ring-0 focus:outline-black border-neutral-400 dark:border-neutral-600 dark:bg-neutral-800 dark:placeholder-neutral-400 dark:text-white"
/>
<button
type="submit"
class="block w-full px-4 py-2 mt-5 text-xs font-semibold text-center duration-300 ease-out border rounded bg-neutral-900 dark:bg-neutral-100 dark:hover:border-neutral-300 dark:text-neutral-800 dark:hover:bg-neutral-950 dark:hover:text-neutral-100 text-neutral-100 border-neutral-900 hover:bg-white hover:text-neutral-900"
>Subscribe</button
>
</div>
</form>
</div>
</div>
</div>
</section>