feat: initial commit
(cherry picked from commit 44c4d7b9521fe449e61edc614446195861932f8c)
This commit is contained in:
saicaca
parent
02b0a65314
commit
124843848f
|
|
@ -0,0 +1,23 @@
|
|||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# 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
|
||||
|
||||
.vercel
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import yaml from '@rollup/plugin-yaml';
|
||||
import icon from "astro-icon";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import {remarkReadingTime} from "./src/plugins/remark-reading-time.mjs";
|
||||
|
||||
import Color from 'colorjs.io';
|
||||
|
||||
// https://astro.build/config
|
||||
|
||||
|
||||
const oklchToHex = function (str) {
|
||||
const DEFAULT_HUE = 250;
|
||||
const regex = /-?\d+(\.\d+)?/g;
|
||||
const matches = str.string.match(regex);
|
||||
const lch = [matches[0], matches[1], DEFAULT_HUE];
|
||||
return new Color("oklch", lch).to("srgb").toString({format: "hex"});
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
tailwind(),
|
||||
icon({
|
||||
include: {
|
||||
'material-symbols': ['*'],
|
||||
'fa6-brands': ['*']
|
||||
}
|
||||
})
|
||||
],
|
||||
markdown: {
|
||||
remarkPlugins: [remarkReadingTime],
|
||||
},
|
||||
redirects: {
|
||||
'/': '/page/1',
|
||||
},
|
||||
vite: {
|
||||
plugins: [yaml()],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
stylus: {
|
||||
define: {
|
||||
oklchToHex: oklchToHex
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.2.0",
|
||||
"@astrojs/tailwind": "^4.0.0",
|
||||
"@astrojs/ts-plugin": "^1.1.3",
|
||||
"@fontsource/roboto": "^5.0.8",
|
||||
"astro": "^3.0.10",
|
||||
"astro-icon": "^1.0.0-next.2",
|
||||
"colorjs.io": "^0.4.5",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"reading-time": "^1.5.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/fa6-brands": "^1.1.13",
|
||||
"@iconify-json/material-symbols": "^1.1.57",
|
||||
"@rollup/plugin-yaml": "^4.1.1",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"stylus": "^0.59.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
Binary file not shown.
|
|
@ -0,0 +1,121 @@
|
|||
---
|
||||
interface Props {
|
||||
keyword: string;
|
||||
tags: string[];
|
||||
categories: string[];
|
||||
}
|
||||
const { keyword, tags, categories} = Astro.props;
|
||||
|
||||
import Button from "./control/Button.astro";
|
||||
import {getPostUrlBySlug, getSortedPosts} from "../utils/content-utils";
|
||||
|
||||
let posts = await getSortedPosts()
|
||||
|
||||
if (Array.isArray(tags) && tags.length > 0) {
|
||||
posts = posts.filter(post =>
|
||||
Array.isArray(post.data.tags) && post.data.tags.some(tag => tags.includes(tag))
|
||||
);
|
||||
}
|
||||
|
||||
if (Array.isArray(categories) && categories.length > 0) {
|
||||
posts = posts.filter(post =>
|
||||
Array.isArray(post.data.categories) && post.data.categories.some(category => categories.includes(category))
|
||||
);
|
||||
}
|
||||
|
||||
const groups = function () {
|
||||
const groupedPosts = posts.reduce((grouped, post) => {
|
||||
const year = post.data.pubDate.getFullYear()
|
||||
if (!grouped[year]) {
|
||||
grouped[year] = []
|
||||
}
|
||||
grouped[year].push(post)
|
||||
return grouped
|
||||
}, {})
|
||||
|
||||
// convert the object to an array
|
||||
const groupedPostsArray = Object.keys(groupedPosts).map(key => ({
|
||||
year: key,
|
||||
posts: groupedPosts[key]
|
||||
}))
|
||||
|
||||
// sort years by latest first
|
||||
groupedPostsArray.sort((a, b) => b.year - a.year)
|
||||
return groupedPostsArray;
|
||||
}();
|
||||
|
||||
function formatDate(date: Date) {
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
return `${month}-${day}`;
|
||||
}
|
||||
|
||||
|
||||
// console.log(groups)
|
||||
|
||||
|
||||
---
|
||||
|
||||
<div class="card-base px-8 py-6">
|
||||
{
|
||||
groups.map(group => (
|
||||
<div>
|
||||
<div class="flex flex-row w-full items-center h-[60px]">
|
||||
<div class="w-[10%] transition text-2xl font-bold text-right text-black/75 dark:text-white/75">{group.year}</div>
|
||||
<div class="w-[10%]">
|
||||
<div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
|
||||
</div>
|
||||
<div class="w-[80%] transition text-left text-black/50 dark:text-white/50">{group.posts.length} Articles</div>
|
||||
</div>
|
||||
{group.posts.map(post => (
|
||||
<a href={getPostUrlBySlug(post.slug)} class="group">
|
||||
<Button light height="40px" class="w-full hover:text-[initial]">
|
||||
<div class="flex flex-row justify-start items-center h-full">
|
||||
<!-- date -->
|
||||
<div class="w-[10%] transition text-sm text-right text-black/50 dark:text-white/50">{formatDate(post.data.pubDate)}</div>
|
||||
<!-- dot and line -->
|
||||
<div class="w-[10%] relative dash-line h-full flex items-center">
|
||||
<div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
|
||||
bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
|
||||
outline outline-4 z-50
|
||||
outline-[var(--card-bg)]
|
||||
group-hover:outline-[var(--btn-plain-bg-hover)]
|
||||
group-active:outline-[var(--btn-plain-bg-active)]
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<!-- post title -->
|
||||
<div class="max-w-[65%] w-[65%] transition text-left font-bold">
|
||||
<div class="group-hover:ml-1 transition-all group-hover:text-[var(--primary)]
|
||||
text-black/80 dark:text-white/80 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden">
|
||||
{post.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<!-- tag list -->
|
||||
<div class="w-[15%] text-left text-sm transition
|
||||
whitespace-nowrap overflow-ellipsis overflow-hidden
|
||||
text-black/30 dark:text-white/30"
|
||||
>#Test #Markdown</div>
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.dash-line {
|
||||
}
|
||||
.dash-line::before {
|
||||
content: "";
|
||||
@apply w-[10%] h-full absolute -top-1/2 left-[calc(50%_-_1px)] -top-[50%] border-l-[2px]
|
||||
border-dashed pointer-events-none border-[var(--line-color)] transition
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
|
||||
---
|
||||
<div class="rounded-2xl drop-shadow-2xl bg-white">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import ButtonLight from "./control/Button.astro";
|
||||
---
|
||||
<ButtonLight class="fill-black">
|
||||
<Icon name="material-symbols:nightlight-badge-outline" class="w-6 h-6"/>
|
||||
</ButtonLight>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span class="">→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<div>
|
||||
<slot/>
|
||||
</div>
|
||||
|
||||
<style is:global lang="stylus">
|
||||
|
||||
/* utils */
|
||||
white(a)
|
||||
rgba(255, 255, 255, a)
|
||||
|
||||
black(a)
|
||||
rgba(0, 0, 0, a)
|
||||
|
||||
isOklch(c)
|
||||
return substr(c, 0, 5) == 'oklch'
|
||||
|
||||
oklch_fallback(c)
|
||||
str = '' + c // convert color value to string
|
||||
if isOklch(str)
|
||||
return convert(oklchToHex(str))
|
||||
return c
|
||||
|
||||
color_set(colors)
|
||||
@supports (color: oklch(0 0 0))
|
||||
:root
|
||||
for key, value in colors
|
||||
{key}: value[0]
|
||||
:root.dark
|
||||
for key, value in colors
|
||||
if length(value) > 1
|
||||
{key}: value[1]
|
||||
/* provide fallback color for oklch */
|
||||
@supports not (color: oklch(0 0 0))
|
||||
:root
|
||||
for key, value in colors
|
||||
{key}: oklch_fallback(value[0])
|
||||
:root.dark
|
||||
for key, value in colors
|
||||
if length(value) > 1
|
||||
{key}: oklch_fallback(value[1])
|
||||
|
||||
:root
|
||||
--radius-large 16px
|
||||
|
||||
--banner-height-home 60vh
|
||||
--banner-height 50vh
|
||||
|
||||
color_set({
|
||||
--primary: oklch(0.70 0.14 var(--hue))
|
||||
--card-bg: white oklch(0.25 0.02 var(--hue))
|
||||
|
||||
--btn-content: oklch(0.55 0.12 var(--hue))
|
||||
|
||||
--btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.38 0.04 var(--hue))
|
||||
|
||||
--btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.2 0.02 var(--hue))
|
||||
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.17 0.017 var(--hue))
|
||||
|
||||
--btn-card-bg-hover: oklch(0.96 0.015 var(--hue)) oklch(0.3 0.03 var(--hue))
|
||||
--btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))
|
||||
|
||||
--deep-text: oklch(0.25 0.02 var(--hue))
|
||||
|
||||
--line-color: black(0.1) white(0.1)
|
||||
--meta-divider: black(0.2) white(0.2)
|
||||
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
|
||||
})
|
||||
|
||||
|
||||
/* some global styles */
|
||||
::selection
|
||||
background-color: var(--selection-bg)
|
||||
|
||||
</style>
|
||||
<style is:global>
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.card-base {
|
||||
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
||||
@apply transition;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
import Button from "./control/Button.astro";
|
||||
import { Icon } from 'astro-icon/components';
|
||||
const className = Astro.props.class;
|
||||
---
|
||||
<div class:list={[
|
||||
className,
|
||||
"card-base max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
|
||||
<a href="/"><Button height="52px" class="px-5 font-bold" light>
|
||||
<div class="flex flex-row text-[var(--primary)] items-center text-md">
|
||||
<Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
|
||||
<div class="top-2"></div>Vivia Preview
|
||||
</div>
|
||||
</Button></a>
|
||||
<div>
|
||||
<a href="/"><Button light class="font-bold px-5">Home</Button></a>
|
||||
<a href="/archive"><Button light class="font-bold px-5">Archive</Button></a>
|
||||
<Button light class="font-bold px-5">About</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="stylus">
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
function switchTheme() {
|
||||
if (localStorage.theme === 'dark') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
}
|
||||
}
|
||||
|
||||
function loadThemeSwitchScript() {
|
||||
let switchBtn = document.getElementById("scheme-switch");
|
||||
if (switchBtn === null) {
|
||||
console.log("test")
|
||||
}
|
||||
switchBtn.addEventListener("click", function () {
|
||||
console.log("test")
|
||||
switchTheme()
|
||||
});
|
||||
}
|
||||
|
||||
loadThemeSwitchScript();
|
||||
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
loadThemeSwitchScript();
|
||||
}, { once: false });
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
import {formatDateToYYYYMMDD} from "../utils/date-utils";
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
class: string;
|
||||
pubDate: Date;
|
||||
tags: string[];
|
||||
categories: string[];
|
||||
}
|
||||
const {pubDate, tags, categories} = Astro.props;
|
||||
const className = Astro.props.class;
|
||||
---
|
||||
|
||||
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-3", className]}>
|
||||
<!-- publish date -->
|
||||
<div class="flex items-center">
|
||||
<div class="meta-icon"
|
||||
>
|
||||
<Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
|
||||
</div>
|
||||
<span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(pubDate)}</span>
|
||||
</div>
|
||||
|
||||
<!-- categories -->
|
||||
<div class="flex items-center">
|
||||
<div class="meta-icon"
|
||||
>
|
||||
<Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
{categories && categories.map(category => <div
|
||||
class="with-divider"
|
||||
>
|
||||
<a href=`/archive/category/${category}`
|
||||
class="transition text-black/50 dark:text-white/50 text-sm font-medium
|
||||
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
|
||||
{category}
|
||||
</a>
|
||||
</div>)}
|
||||
{!categories && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">Uncategorized</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tags -->
|
||||
<div class="flex items-center">
|
||||
<div class="meta-icon"
|
||||
>
|
||||
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
{tags.map(tag => <div
|
||||
class="with-divider"
|
||||
>
|
||||
<a href=`/archive/tag/${tag}`
|
||||
class="transition text-black/50 dark:text-white/50 text-sm font-medium
|
||||
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
|
||||
{tag}
|
||||
</a>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
.meta-icon {
|
||||
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
|
||||
text-[var(--btn-content)] dark:text-[var(--primary)] mr-2
|
||||
}
|
||||
.with-divider {
|
||||
@apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm
|
||||
before:font-medium before:first-of-type:hidden before:transition
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
import {formatDateToYYYYMMDD} from "../utils/date-utils";
|
||||
interface Props {
|
||||
title: string;
|
||||
url: string;
|
||||
pubDate: Date;
|
||||
tags: string[];
|
||||
cover: string;
|
||||
description: string;
|
||||
words: number;
|
||||
}
|
||||
const { title, url, pubDate, tags, cover, description, words } = Astro.props;
|
||||
// console.log(Astro.props);
|
||||
import ImageBox from "./misc/ImageBox.astro";
|
||||
import ButtonTag from "./control/ButtonTag.astro";
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
// tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
|
||||
|
||||
// const cover = 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg';
|
||||
// cover = null;
|
||||
const hasCover = cover !== undefined && cover !== null && cover !== '';
|
||||
|
||||
|
||||
---
|
||||
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative">
|
||||
<div class:list={["card-base z-30 px-8 py-6 relative ",
|
||||
{
|
||||
'w-[calc(70%_+_var(--radius-large))]': hasCover,
|
||||
'w-[calc(100%_-_76px_+_var(--radius-large))]': !hasCover,
|
||||
}
|
||||
]}>
|
||||
<a href={url}
|
||||
class="transition w-full block font-bold mb-1 text-3xl
|
||||
text-neutral-900 dark:text-neutral-100
|
||||
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:top-8 before:left-4
|
||||
">
|
||||
This is a very long title
|
||||
</a>
|
||||
<div class="flex text-neutral-500 dark:text-neutral-400 items-center mb-1">
|
||||
<div>{formatDateToYYYYMMDD(pubDate)}</div>
|
||||
<div class="transition h-1 w-1 rounded-sm bg-neutral-400 dark:bg-neutral-600 mx-3"></div>
|
||||
<div>Uncategorized</div>
|
||||
<div class="transition h-1 w-1 rounded-sm bg-neutral-400 dark:bg-neutral-600 mx-3"></div>
|
||||
<div>{words} words</div>
|
||||
</div>
|
||||
<div class="flex gap-2 mb-4">
|
||||
{tags.map(t => (
|
||||
<ButtonTag dot>{t}</ButtonTag>
|
||||
))}
|
||||
</div>
|
||||
<div class="transition text-neutral-700 dark:text-neutral-300">This is the description of the article</div>
|
||||
|
||||
</div>
|
||||
{!hasCover && <a href={url}
|
||||
class="transition w-[72px]
|
||||
bg-[var(--btn-enter-bg)] dark:bg-[var(--btn-enter-bg-dark)]
|
||||
hover:bg-[var(--btn-card-bg-hover)] active:bg-[var(--btn-card-bg-active)]
|
||||
absolute top-0 bottom-0 right-0 flex items-center">
|
||||
<Icon name="material-symbols:chevron-right-rounded"
|
||||
class="transition text-4xl text-[var(--primary)] ml-[22px]"></Icon>
|
||||
</a>}
|
||||
|
||||
{hasCover && <a href={url}
|
||||
class="group w-[30%] absolute top-0 bottom-0 right-0">
|
||||
<div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
||||
<div class="absolute z-20 w-full h-full flex items-center justify-center ">
|
||||
<Icon name="material-symbols:chevron-right-rounded"
|
||||
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl"></Icon>
|
||||
</div>
|
||||
<ImageBox src="https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg"
|
||||
class="w-full h-full">
|
||||
</ImageBox>
|
||||
</a>}
|
||||
</div>
|
||||
|
||||
<style lang="stylus">
|
||||
:root
|
||||
--btn-enter-bg oklch(0.98 0.005 var(--hue))
|
||||
--btn-enter-bg-dark oklch(0.2 0.02 var(--hue))
|
||||
</style>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
import PostMetadata from "./PostMetadata.astro";
|
||||
interface Props {
|
||||
class: string;
|
||||
entry: any;
|
||||
title: string;
|
||||
url: string;
|
||||
pubDate: Date;
|
||||
tags: string[];
|
||||
categories: string[];
|
||||
cover: string;
|
||||
description: string;
|
||||
words: number;
|
||||
}
|
||||
const { entry, title, url, pubDate, tags, categories, cover, description, words } = Astro.props;
|
||||
const className = Astro.props.class;
|
||||
// console.log(Astro.props);
|
||||
import ImageBox from "./misc/ImageBox.astro";
|
||||
import ButtonTag from "./control/ButtonTag.astro";
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
// tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
|
||||
|
||||
// const cover = 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg';
|
||||
// cover = null;
|
||||
const hasCover = cover !== undefined && cover !== null && cover !== '';
|
||||
|
||||
const coverWidth = "30%";
|
||||
|
||||
const { remarkPluginFrontmatter } = await entry.render();
|
||||
|
||||
---
|
||||
<div class:list={["card-base flex w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
|
||||
<div class:list={[" px-10 pt-7 pb-6 relative", {'w-full': !hasCover, "w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
|
||||
<a href={url}
|
||||
class="transition w-full block font-bold mb-3 text-4xl
|
||||
text-black/90 dark:text-white/90
|
||||
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
||||
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:top-[38px] before:left-5
|
||||
">
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<!-- metadata -->
|
||||
<PostMetadata pubDate={pubDate} tags={tags} categories={categories} class="mb-4"></PostMetadata>
|
||||
|
||||
<div class="transition text-black/75 dark:text-white/75 mb-4">
|
||||
{ description }
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
|
||||
<div>{remarkPluginFrontmatter.words} words</div>
|
||||
<div>|</div>
|
||||
<div>{remarkPluginFrontmatter.minutes} minutes</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{hasCover && <a href={url}
|
||||
class=`group w-[var(--coverWidth)] absolute top-3 bottom-3 right-3 rounded-xl overflow-hidden`>
|
||||
<div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
||||
<div class="absolute z-20 w-full h-full flex items-center justify-center ">
|
||||
<Icon name="material-symbols:chevron-right-rounded"
|
||||
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl"></Icon>
|
||||
</div>
|
||||
<ImageBox src="https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg"
|
||||
class="w-full h-full">
|
||||
</ImageBox>
|
||||
</a>}
|
||||
</div>
|
||||
|
||||
<style lang="stylus" define:vars={{coverWidth}}>
|
||||
:root
|
||||
--btn-enter-bg oklch(0.98 0.005 var(--hue))
|
||||
--btn-enter-bg-dark oklch(0.2 0.02 var(--hue))
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
interface Props {
|
||||
name: string;
|
||||
}
|
||||
|
||||
const {name} = Astro.props;
|
||||
|
||||
import BasicCard from "./BasicCard.astro";
|
||||
|
||||
---
|
||||
|
||||
<BasicCard >
|
||||
<div class="p-4">
|
||||
<div>{name}</div>
|
||||
</div>
|
||||
</BasicCard>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
interface Props {
|
||||
id?: string;
|
||||
isIcon?: boolean;
|
||||
iconName?: string;
|
||||
width?: string;
|
||||
height?: string;
|
||||
regular?: boolean;
|
||||
light?: boolean
|
||||
card?: boolean;
|
||||
iconSize?: number,
|
||||
class?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
const props = Astro.props;
|
||||
const {
|
||||
id,
|
||||
isIcon = false,
|
||||
iconName,
|
||||
width,
|
||||
height = '44px',
|
||||
regular,
|
||||
light,
|
||||
iconSize = 24,
|
||||
card,
|
||||
disabled = false,
|
||||
} = Astro.props;
|
||||
const className = Astro.props.class;
|
||||
import { Icon } from 'astro-icon/components';
|
||||
---
|
||||
|
||||
<button id={id}
|
||||
disabled={disabled}
|
||||
class:list={[
|
||||
className,
|
||||
`
|
||||
rounded-lg
|
||||
transition
|
||||
h-[var(--height)]
|
||||
`,
|
||||
{
|
||||
'w-[var(--width)]': width,
|
||||
'w-[var(--height)]': isIcon,
|
||||
|
||||
'bg-none': light,
|
||||
'hover:bg-[var(--btn-plain-bg-hover)]': light,
|
||||
'active:bg-[var(--btn-plain-bg-active)]': light,
|
||||
'text-neutral-900': light,
|
||||
'hover:text-[var(--primary)]': light,
|
||||
|
||||
'dark:text-neutral-300': light || regular,
|
||||
'dark:hover:text-[var(--primary)]': light,
|
||||
|
||||
'bg-[var(--btn-regular-bg)]': regular,
|
||||
'hover:bg-[oklch(0.9_0.05_var(--hue))]': regular,
|
||||
'active:bg-[oklch(0.85_0.08_var(--hue))]': regular,
|
||||
'text-[var(--btn-content)]': regular,
|
||||
|
||||
'dark:bg-[oklch(0.38_0.04_var(--hue))]': regular,
|
||||
'dark:hover:bg-[oklch(0.45_0.045_var(--hue))]': regular,
|
||||
'dark:active:bg-[oklch(0.5_0.05_var(--hue))]': regular,
|
||||
|
||||
'card-base': card,
|
||||
'enabled:hover:bg-[var(--btn-card-bg-hover)]': card,
|
||||
'enabled:active:bg-[var(--btn-card-bg-active)]': card,
|
||||
'disabled:text-black/10': card,
|
||||
'disabled:dark:text-white/10': card,
|
||||
}
|
||||
]}
|
||||
>
|
||||
{props.isIcon && <Icon class="mx-auto" name={props.iconName} size={iconSize}></Icon> }
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style define:vars={{ height, width, iconSize }}>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
interface Props {
|
||||
badge?: string
|
||||
url?: string
|
||||
}
|
||||
const { badge, url } = Astro.props
|
||||
---
|
||||
<a href={url}>
|
||||
<button
|
||||
class:list={`
|
||||
w-full
|
||||
h-10
|
||||
rounded-lg
|
||||
bg-none
|
||||
hover:bg-[var(--btn-plain-bg-hover)]
|
||||
active:bg-[var(--btn-plain-bg-active)]
|
||||
transition-all
|
||||
pl-2
|
||||
hover:pl-3
|
||||
|
||||
text-neutral-700
|
||||
hover:text-[var(--primary)]
|
||||
dark:text-neutral-300
|
||||
dark:hover:text-[var(--primary)]
|
||||
`
|
||||
}
|
||||
>
|
||||
<div class="flex items-center justify-between relative mr-2">
|
||||
<div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis ">
|
||||
<slot></slot>
|
||||
</div>
|
||||
{ badge !== undefined && badge !== null && badge !== '' &&
|
||||
<div class="transition h-[28px] ml-4 min-w-[32px] rounded-lg text-sm font-bold
|
||||
text-[var(--btn-content)] dark:text-[var(--deep-text)]
|
||||
bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)]
|
||||
flex items-center justify-center">
|
||||
{ badge }
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import Button from "./Button.astro";
|
||||
interface Props {
|
||||
size?: string;
|
||||
dot?: boolean;
|
||||
href?: string;
|
||||
}
|
||||
const { size, dot, href }: Props = Astro.props;
|
||||
---
|
||||
<a href={href}>
|
||||
<Button regular height="32px" class="text-[15px] px-3 flex flex-row items-center">
|
||||
{dot && <div class="h-1 w-1 bg-[var(--btn-content)] dark:bg-[var(--card-bg)] transition rounded-md mr-2"></div>}
|
||||
<slot></slot>
|
||||
</Button>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
import type { Page } from "astro";
|
||||
import { Icon } from 'astro-icon/components';
|
||||
interface Props {
|
||||
page: Page;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {page} = Astro.props;
|
||||
|
||||
const HIDDEN = -1;
|
||||
|
||||
const className = Astro.props.class;
|
||||
import Button from "./Button.astro";
|
||||
|
||||
const ADJ_DIST = 2;
|
||||
const VISIBLE = ADJ_DIST * 2 + 1;
|
||||
|
||||
// for test
|
||||
let count = 1;
|
||||
let l = page.currentPage, r = page.currentPage;
|
||||
while (0 < l - 1 && r + 1 <= page.lastPage && count + 2 <= VISIBLE) {
|
||||
count += 2;
|
||||
l--;
|
||||
r++;
|
||||
}
|
||||
while (0 < l - 1 && count < VISIBLE) {
|
||||
count++;
|
||||
l--;
|
||||
}
|
||||
while (r + 1 <= page.lastPage && count < VISIBLE) {
|
||||
count++;
|
||||
r++;
|
||||
}
|
||||
|
||||
let pages: number[] = [];
|
||||
if (l > 1)
|
||||
pages.push(1);
|
||||
if (l == 3)
|
||||
pages.push(2);
|
||||
if (l > 3)
|
||||
pages.push(HIDDEN);
|
||||
for (let i = l; i <= r; i++)
|
||||
pages.push(i);
|
||||
if (r < page.lastPage - 2)
|
||||
pages.push(HIDDEN);
|
||||
if (r == page.lastPage - 2)
|
||||
pages.push(page.lastPage - 1);
|
||||
if (r < page.lastPage)
|
||||
pages.push(page.lastPage);
|
||||
|
||||
const parts: string[] = page.url.current.split('/');
|
||||
const commonUrl: string = parts.slice(0, -1).join('/') + '/';
|
||||
---
|
||||
|
||||
<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
|
||||
<a href={page.url.prev}>
|
||||
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)]" iconSize={28}
|
||||
disabled = {page.url.prev == undefined}
|
||||
></Button>
|
||||
</a>
|
||||
<div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold">
|
||||
{pages.map((p) => {
|
||||
if (p == HIDDEN)
|
||||
return <Icon name="material-symbols:more-horiz" class="mx-1"/>;
|
||||
if (p == page.currentPage)
|
||||
return <div class="h-[44px] w-[44px] rounded-lg bg-[var(--primary)] flex items-center justify-center
|
||||
font-bold text-white dark:text-black/70"
|
||||
>
|
||||
{p}
|
||||
</div>
|
||||
return <a href={commonUrl + p}>
|
||||
<Button card iconName="material-symbols:chevron-left-rounded" height="44px" width="44px">
|
||||
{p}
|
||||
</Button>
|
||||
</a>
|
||||
})}
|
||||
</div>
|
||||
<a href={page.url.next}>
|
||||
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)]" iconSize={28}
|
||||
disabled = {page.url.next == undefined}
|
||||
></Button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
interface Props {
|
||||
id?: string
|
||||
src: string;
|
||||
class?: string;
|
||||
alt?: string
|
||||
}
|
||||
const {id, src, alt} = Astro.props;
|
||||
const className = Astro.props.class;
|
||||
---
|
||||
<div class:list={[className, 'overflow-hidden relative']}>
|
||||
<div class="transition absolute top-0 bottom-0 left-0 right-0 dark:bg-black/10 bg-opacity-50"></div>
|
||||
<img src={src} alt={alt} class="w-full h-full object-center object-cover">
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
import ImageBox from "../misc/ImageBox.astro";
|
||||
import ButtonLight from "../control/Button.astro";
|
||||
import {getConfig} from "../../utils/config-utils";
|
||||
interface props {
|
||||
|
||||
}
|
||||
const className = Astro.props
|
||||
|
||||
const vConf = getConfig();
|
||||
|
||||
---
|
||||
<div class="card-base" transition:persist>
|
||||
<ImageBox src={vConf.profile.avatar} class="w-full rounded-2xl mb-3"></ImageBox>
|
||||
<div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
|
||||
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
|
||||
<div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
|
||||
<div class="flex gap-2 mx-2 justify-center mb-4">
|
||||
{vConf.profile.links.map(item =>
|
||||
<a href={item.url} target="_blank">
|
||||
<ButtonLight isIcon iconName={item.icon} regular height="40px"></ButtonLight>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
import WidgetLayout from "./WidgetLayout.astro";
|
||||
import ButtonLink from "../control/ButtonLink.astro";
|
||||
import {getPostUrlBySlug, getSortedPosts} from "../../utils/content-utils";
|
||||
|
||||
let posts = await getSortedPosts()
|
||||
|
||||
const LIMIT = 5;
|
||||
|
||||
posts = posts.slice(0, LIMIT)
|
||||
|
||||
// console.log(posts)
|
||||
---
|
||||
<WidgetLayout name="Recent Posts">
|
||||
{posts.map(post =>
|
||||
<ButtonLink url={getPostUrlBySlug(post.slug)}>{post.data.title}</ButtonLink>
|
||||
)}
|
||||
</WidgetLayout>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
import Profile from "./Profile.astro";
|
||||
import RecentPost from "./RecentPost.astro";
|
||||
import Tag from "./Tag.astro";
|
||||
|
||||
const className = Astro.props.class;
|
||||
---
|
||||
<div id="sidebar" class:list={[className, "flex flex-col w-full gap-4"]} transition:persist>
|
||||
<Profile></Profile>
|
||||
<RecentPost></RecentPost>
|
||||
<Tag></Tag>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
view-transition-name: ssss;
|
||||
}
|
||||
/* TODO temporarily */
|
||||
html::view-transition-old(ssss) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
}
|
||||
html::view-transition-new(ssss) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
|
||||
import WidgetLayout from "./WidgetLayout.astro";
|
||||
import ButtonTag from "../control/ButtonTag.astro";
|
||||
import {getTagList} from "../../utils/content-utils";
|
||||
|
||||
const tags = await getTagList();
|
||||
|
||||
---
|
||||
<WidgetLayout name="Tags">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
{tags.map(t => (
|
||||
<ButtonTag href={`/archive/tag/${t.name}`}>
|
||||
{t.name}
|
||||
</ButtonTag>
|
||||
))}
|
||||
</div>
|
||||
</WidgetLayout>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
interface Props {
|
||||
name?: string;
|
||||
}
|
||||
const props = Astro.props;
|
||||
const {
|
||||
name,
|
||||
} = Astro.props
|
||||
|
||||
---
|
||||
<div class="pb-4 card-base">
|
||||
<div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-8 mt-4 mb-2
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>
|
||||
<div class="px-4">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { z, defineCollection } from "astro:content";
|
||||
|
||||
const blogCollection = defineCollection({
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
tags: z.array(z.string()),
|
||||
cover: z.string().optional(),
|
||||
})
|
||||
})
|
||||
export const collections = {
|
||||
'blog': blogCollection,
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: 'My First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog Post'
|
||||
pubDate: 2022-10-01
|
||||
description: 'This is the first post of my new Astro blog.'
|
||||
author: 'Astro Learner'
|
||||
image:
|
||||
url: 'https://docs.astro.build/assets/full-logo-light.png'
|
||||
alt: 'The full Astro logo.'
|
||||
tags: ["astro", "blogging", "learning in public"]
|
||||
categories: ['Foo', 'Bar']
|
||||
---
|
||||
# My First Blog Post
|
||||
|
||||
Published on: 2022-07-01
|
||||
|
||||
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||
|
||||
## What I've accomplished
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: 'My Second Blog Post'
|
||||
pubDate: 2021-07-01
|
||||
description: 'This is the first post of my new Astro blog.'
|
||||
author: 'Astro Learner'
|
||||
image:
|
||||
url: 'https://docs.astro.build/assets/full-logo-light.png'
|
||||
alt: 'The full Astro logo.'
|
||||
tags: ["astro", "blogging", "learning in public"]
|
||||
cover: 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg'
|
||||
---
|
||||
# My First Blog Post
|
||||
|
||||
Published on: 2022-07-01
|
||||
|
||||
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||
|
||||
## What I've accomplished
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: 'My Third Blog Post'
|
||||
pubDate: 2020-07-01
|
||||
description: 'This is the first post of my new Astro blog.'
|
||||
author: 'Astro Learner'
|
||||
image:
|
||||
url: 'https://docs.astro.build/assets/full-logo-light.png'
|
||||
alt: 'The full Astro logo.'
|
||||
tags: ["astro", "blogging", "learning in public"]
|
||||
---
|
||||
# My First Blog Post
|
||||
|
||||
Published on: 2022-07-01
|
||||
|
||||
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||
|
||||
## What I've accomplished
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: 'My Fourth Blog Post'
|
||||
pubDate: 2022-07-01
|
||||
description: 'This is the first post of my new Astro blog.'
|
||||
author: 'Astro Learner'
|
||||
image:
|
||||
url: 'https://docs.astro.build/assets/full-logo-light.png'
|
||||
alt: 'The full Astro logo.'
|
||||
tags: ["astro", "blogging", "learning in public"]
|
||||
---
|
||||
# My First Blog Post
|
||||
|
||||
Published on: 2022-07-01
|
||||
|
||||
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||
|
||||
## What I've accomplished
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
declare module "*.yml" {
|
||||
const value: any;
|
||||
export default value;
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
---
|
||||
import GlobalStyles from "../components/GlobalStyles.astro";
|
||||
import '@fontsource/roboto/400.css';
|
||||
import '@fontsource/roboto/500.css';
|
||||
import '@fontsource/roboto/700.css';
|
||||
import { ViewTransitions } from 'astro:transitions';
|
||||
import ImageBox from "../components/misc/ImageBox.astro";
|
||||
|
||||
import { fade } from 'astro:transitions';
|
||||
import {getConfig} from "../utils/config-utils";
|
||||
import {pathsEqual} from "../utils/url-utils";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
banner: string;
|
||||
}
|
||||
|
||||
let { title, banner } = Astro.props;
|
||||
|
||||
const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
|
||||
|
||||
const testPathName = Astro.url.pathname;
|
||||
|
||||
const anim = {
|
||||
old: {
|
||||
name: 'fadeIn',
|
||||
duration: '4s',
|
||||
easing: 'linear',
|
||||
fillMode: 'forwards',
|
||||
mixBlendMode: 'normal',
|
||||
},
|
||||
new: {
|
||||
name: 'fadeOut',
|
||||
duration: '4s',
|
||||
easing: 'linear',
|
||||
fillMode: 'backwards',
|
||||
mixBlendMode: 'normal',
|
||||
}
|
||||
};
|
||||
|
||||
const myFade = {
|
||||
forwards: anim,
|
||||
backwards: anim,
|
||||
};
|
||||
|
||||
// defines global css variables
|
||||
// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
|
||||
const viConf = getConfig();
|
||||
const hue = viConf.appearance.hue;
|
||||
if (!banner || typeof banner !== 'string' || banner.trim() === '') {
|
||||
banner = viConf.banner.url;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" isHome={isHomePage} pathname={testPathName}>
|
||||
<head>
|
||||
<ViewTransitions />
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-32.png" sizes="32x32">
|
||||
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-128.png" sizes="128x128">
|
||||
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-180.png" sizes="180x180">
|
||||
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-192.png" sizes="192x192">
|
||||
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-32.png" sizes="32x32">
|
||||
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-128.png" sizes="128x128">
|
||||
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-180.png" sizes="180x180">
|
||||
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-192.png" sizes="192x192">
|
||||
|
||||
<style define:vars={{ hue }}></style> <!-- defines global css variables -->
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition">
|
||||
<GlobalStyles>
|
||||
<div class="absolute w-full"
|
||||
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
|
||||
id="banner-wrapper"
|
||||
>
|
||||
<!-- TODO the transition here is not correct -->
|
||||
<ImageBox id="boxtest" class="object-center object-cover h-full"
|
||||
src={banner} transition:animate="fade"
|
||||
>
|
||||
</ImageBox>
|
||||
</div>
|
||||
<slot />
|
||||
</GlobalStyles>
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
|
||||
|
||||
--page-width: 1200px;
|
||||
}
|
||||
html {
|
||||
background: #13151A;
|
||||
background-size: 224px;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.banner-home {
|
||||
@apply h-[var(--banner-height-home)]
|
||||
}
|
||||
.banner-else {
|
||||
@apply h-[var(--banner-height)]
|
||||
}
|
||||
}
|
||||
|
||||
#banner-wrapper {
|
||||
view-transition-name: banner-ani;
|
||||
}
|
||||
/* i don't know how this work*/
|
||||
html::view-transition-old(banner-ani) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
height: 100%;
|
||||
overflow: clip;
|
||||
object-fit: none;
|
||||
}
|
||||
html::view-transition-new(banner-ani) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
height: 100%;
|
||||
overflow: clip;
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner-home {
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* Preload fonts */
|
||||
// (async function() {
|
||||
// try {
|
||||
// await Promise.all([
|
||||
// document.fonts.load("400 1em Roboto"),
|
||||
// document.fonts.load("700 1em Roboto"),
|
||||
// ]);
|
||||
// document.body.classList.remove("hidden");
|
||||
// } catch (error) {
|
||||
// console.log("Failed to load fonts:", error);
|
||||
// }
|
||||
// })();
|
||||
|
||||
function loadTheme() {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
loadTheme();
|
||||
|
||||
function setBannerHeight() {
|
||||
const banner = document.getElementById('banner-wrapper');
|
||||
if (document.documentElement.hasAttribute('isHome')) {
|
||||
banner.classList.remove('banner-else');
|
||||
banner.classList.add('banner-home');
|
||||
} else {
|
||||
banner.classList.remove('banner-home');
|
||||
banner.classList.add('banner-else');
|
||||
}
|
||||
}
|
||||
|
||||
/* Load light/dark mode setting */
|
||||
/* astro:after-swap event happened before swap animation */
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
setBannerHeight();
|
||||
loadTheme();
|
||||
}, { once: false });
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
import Layout from "./Layout.astro";
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import SideBar from "../components/widget/SideBar.astro";
|
||||
import {pathsEqual} from "../utils/url-utils";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
banner: string;
|
||||
}
|
||||
|
||||
const { title, banner } = Astro.props;
|
||||
|
||||
const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
|
||||
|
||||
const pageWidth = "1200px";
|
||||
const sidebarWidth = "280px";
|
||||
|
||||
---
|
||||
<Layout title={title} banner={banner}>
|
||||
<div class=`max-w-[1200px] grid grid-cols-[280px_auto] grid-auto-rows-[auto] mx-auto gap-4 relative`
|
||||
transition:animate="none"
|
||||
>
|
||||
<div id="top-row" class="col-span-2 grid-rows-1" class:list={{
|
||||
'min-h-[calc(var(--banner-height-home)_-_72px)]': isHomePage,
|
||||
'min-h-[calc(var(--banner-height)_-_72px)]': !isHomePage}}
|
||||
>
|
||||
<Navbar transition:animate="fade" transition:persist></Navbar>
|
||||
</div>
|
||||
<SideBar class="max-w-[280px] col-span-1 grid-rows-2" transition:persist></SideBar>
|
||||
|
||||
<div class="grid-rows-2 grid-cols-2 overflow-hidden" transition:animate="slide">
|
||||
<!-- the overflow-hidden here prevent long text break the layout-->
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
#top-row {
|
||||
view-transition-name: rrrr;
|
||||
}
|
||||
/* i don't know how this work*/
|
||||
html::view-transition-old(rrrr) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
height: auto;
|
||||
overflow: clip;
|
||||
object-fit: none;
|
||||
}
|
||||
html::view-transition-new(rrrr) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
height: auto;
|
||||
overflow: clip;
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
|
||||
import {getSortedPosts} from "../../../utils/content-utils";
|
||||
import MainGridLayout from "../../../layouts/MainGridLayout.astro";
|
||||
import ArchivePanel from "../../../components/ArchivePanel.astro";
|
||||
|
||||
|
||||
export async function getStaticPaths() {
|
||||
let posts = await getSortedPosts()
|
||||
|
||||
const allCategories = posts.reduce((acc, post) => {
|
||||
if (!Array.isArray(post.data.categories))
|
||||
return acc;
|
||||
post.data.categories.forEach(category => acc.add(category));
|
||||
return acc;
|
||||
}, new Set());
|
||||
|
||||
const allCategoriesArray = Array.from(allCategories);
|
||||
|
||||
return allCategoriesArray.map(category => {
|
||||
return {
|
||||
params: {
|
||||
category: category
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const { category } = Astro.params;
|
||||
|
||||
---
|
||||
|
||||
<MainGridLayout>
|
||||
<ArchivePanel categories={[category]}></ArchivePanel>
|
||||
</MainGridLayout>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import { getCollection, getEntry } from "astro:content";
|
||||
import MainGridLayout from "../../layouts/MainGridLayout.astro";
|
||||
import ArchivePanel from "../../components/ArchivePanel.astro";
|
||||
---
|
||||
|
||||
<MainGridLayout>
|
||||
<ArchivePanel></ArchivePanel>
|
||||
</MainGridLayout>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
|
||||
import {getSortedPosts} from "../../../utils/content-utils";
|
||||
import MainGridLayout from "../../../layouts/MainGridLayout.astro";
|
||||
import ArchivePanel from "../../../components/ArchivePanel.astro";
|
||||
|
||||
|
||||
|
||||
export async function getStaticPaths() {
|
||||
let posts = await getSortedPosts()
|
||||
|
||||
const allTags = posts.reduce((acc, post) => {
|
||||
post.data.tags.forEach(tag => acc.add(tag));
|
||||
return acc;
|
||||
}, new Set());
|
||||
|
||||
const allTagsArray = Array.from(allTags);
|
||||
|
||||
return allTagsArray.map(tag => {
|
||||
return {
|
||||
params: {
|
||||
tag: tag
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
|
||||
---
|
||||
|
||||
<MainGridLayout>
|
||||
<ArchivePanel tags={[tag]}></ArchivePanel>
|
||||
</MainGridLayout>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
import { getCollection, getEntry } from "astro:content";
|
||||
import MainGridLayout from "../../layouts/MainGridLayout.astro";
|
||||
import TitleCard from "../../components/TitleCardNew.astro";
|
||||
import Pagination from "../../components/control/Pagination.astro";
|
||||
import {getPostUrlBySlug, getSortedPosts} from "../../utils/content-utils";
|
||||
import {getConfig} from "../../utils/config-utils";
|
||||
|
||||
export async function getStaticPaths({ paginate }) {
|
||||
// const allBlogPosts = await getCollection("posts");
|
||||
const allBlogPosts = await getSortedPosts();
|
||||
return paginate(allBlogPosts, { pageSize: 6 });
|
||||
}
|
||||
|
||||
const {page} = Astro.props;
|
||||
|
||||
// page.data.map(entry => console.log(entry));
|
||||
// console.log(page)
|
||||
|
||||
// console.log(getConfig());
|
||||
|
||||
---
|
||||
|
||||
<!-- 显示当前页面。也可以使用 Astro.params.page -->
|
||||
<MainGridLayout>
|
||||
<div class="flex flex-col gap-4 mb-4">
|
||||
{page.data.map(entry =>
|
||||
<TitleCard
|
||||
entry={entry}
|
||||
title={entry.data.title}
|
||||
tags={entry.data.tags}
|
||||
categories={entry.data.categories}
|
||||
pubDate={entry.data.pubDate}
|
||||
url={getPostUrlBySlug(entry.slug)}
|
||||
cover={entry.data.cover}
|
||||
description={entry.data.description}
|
||||
></TitleCard>
|
||||
)}
|
||||
</div>
|
||||
<Pagination class="mx-auto" page={page}></Pagination>
|
||||
</MainGridLayout>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import MainGridLayout from "../../layouts/MainGridLayout.astro";
|
||||
import ButtonTag from "../../components/control/ButtonTag.astro";
|
||||
import ImageBox from "../../components/misc/ImageBox.astro";
|
||||
import {Icon} from "astro-icon/components";
|
||||
import {formatDateToYYYYMMDD} from "../../utils/date-utils";
|
||||
import PostMetadata from "../../components/PostMetadata.astro";
|
||||
// 1. 为每个集合条目生成一个新路径
|
||||
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const blogEntries = await getCollection('posts');
|
||||
return blogEntries.map(entry => ({
|
||||
params: { slug: entry.slug }, props: { entry },
|
||||
}));
|
||||
}
|
||||
// 2. 当渲染的时候，你可以直接从属性中得到条目
|
||||
const { entry } = Astro.props;
|
||||
const { Content } = await entry.render();
|
||||
|
||||
const { remarkPluginFrontmatter } = await entry.render();
|
||||
|
||||
|
||||
---
|
||||
<MainGridLayout banner={entry.data.cover}>
|
||||
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative">
|
||||
<div class:list={["card-base z-10 px-9 py-6 relative w-full ",
|
||||
{}
|
||||
]}>
|
||||
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/5 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
|
||||
<Icon name="material-symbols:notes-rounded"></Icon>
|
||||
</div>
|
||||
<div class="text-sm">{remarkPluginFrontmatter.words} words</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/5 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
|
||||
<Icon name="material-symbols:schedule-outline-rounded"></Icon>
|
||||
</div>
|
||||
<div class="text-sm">{remarkPluginFrontmatter.minutes} minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="transition w-full block font-bold mb-3 text-4xl
|
||||
text-black/90 dark:text-white/90
|
||||
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:top-[10px] before:left-[-18px]
|
||||
">
|
||||
{entry.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<PostMetadata
|
||||
class="mb-5"
|
||||
pubDate={entry.data.pubDate}
|
||||
tags={entry.data.tags}
|
||||
categories={entry.data.categories}
|
||||
></PostMetadata>
|
||||
|
||||
<div class="border-b-black/8 dark:border-b-white/8 border-dashed border-b-[1px] mb-5"></div>
|
||||
|
||||
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</MainGridLayout>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import getReadingTime from 'reading-time';
|
||||
import { toString } from 'mdast-util-to-string';
|
||||
|
||||
export function remarkReadingTime() {
|
||||
return function (tree, { data }) {
|
||||
const textOnPage = toString(tree);
|
||||
const readingTime = getReadingTime(textOnPage);
|
||||
data.astro.frontmatter.minutes = Math.max(1, Math.round(readingTime.minutes));
|
||||
data.astro.frontmatter.words = readingTime.words;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import _config from '../../vivia.config.yml';
|
||||
|
||||
interface ViviaConfig {
|
||||
menu: {
|
||||
[key: string]: string;
|
||||
};
|
||||
appearance: {
|
||||
hue: number;
|
||||
};
|
||||
favicon: string;
|
||||
banner: {
|
||||
enable: boolean;
|
||||
url: string;
|
||||
position: string;
|
||||
onAllPages: boolean;
|
||||
};
|
||||
sidebar: {
|
||||
widgets: {
|
||||
normal: string | string[];
|
||||
sticky: string | string[];
|
||||
};
|
||||
};
|
||||
profile: {
|
||||
avatar: string;
|
||||
author: string;
|
||||
subtitle: string;
|
||||
links: {
|
||||
name: string;
|
||||
icon: string;
|
||||
url: string;
|
||||
}[];
|
||||
}
|
||||
}
|
||||
|
||||
const config: ViviaConfig = _config;
|
||||
|
||||
export const getConfig = () => config;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import {getCollection} from "astro:content";
|
||||
|
||||
export async function getSortedPosts() {
|
||||
const allBlogPosts = await getCollection("posts");
|
||||
return allBlogPosts.sort((a, b) => {
|
||||
const dateA = new Date(a.data.pubDate);
|
||||
const dateB = new Date(b.data.pubDate);
|
||||
return dateA > dateB ? -1 : 1;
|
||||
});
|
||||
}
|
||||
|
||||
export function getPostUrlBySlug(slug: string): string {
|
||||
return `/posts/${slug}`;
|
||||
}
|
||||
|
||||
export async function getTagList(): Promise<{ name: string; count: number }[]> {
|
||||
const allBlogPosts = await getCollection("posts");
|
||||
|
||||
const countMap: { [key: string]: number } = {};
|
||||
allBlogPosts.map((post) => {
|
||||
post.data.tags.map((tag: string) => {
|
||||
if (!countMap[tag]) countMap[tag] = 0;
|
||||
countMap[tag]++;
|
||||
})
|
||||
});
|
||||
|
||||
// 获取对象的所有键并按字典顺序排序
|
||||
const keys: string[] = Object.keys(countMap).sort();
|
||||
|
||||
// 使用排序后的键构建包含 key 和 value 的数组
|
||||
return keys.map((key) => ({name: key, count: countMap[key]}));
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export function formatDateToYYYYMMDD(date: Date): string {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export function pathsEqual(path1: string, path2: string) {
|
||||
const normalizedPath1 = path1.replace(/^\/|\/$/g, '').toLowerCase();
|
||||
const normalizedPath2 = path2.replace(/^\/|\/$/g, '').toLowerCase();
|
||||
return normalizedPath1 === normalizedPath2;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
darkMode: 'class', // allows toggling dark mode manually
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Roboto', 'sans-serif', ...defaultTheme.fontFamily.sans],
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true,
|
||||
"allowJs": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "@astrojs/ts-plugin"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"redirects": [
|
||||
{
|
||||
"source": "/",
|
||||
"destination": "/page/1",
|
||||
"statusCode": 307
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
appearance:
|
||||
hue: 290
|
||||
|
||||
banner:
|
||||
url: https://saicaca.github.io/vivia-preview/assets/banner.jpg
|
||||
|
||||
profile:
|
||||
avatar: https://saicaca.github.io/vivia-preview/assets/avatar.jpg
|
||||
author: Your Name
|
||||
subtitle: This is the subtitle
|
||||
links:
|
||||
- name: Twitter
|
||||
icon: fa6-brands:twitter
|
||||
url: https://twitter.com
|
||||
- name: Steam
|
||||
icon: fa6-brands:steam
|
||||
url: https://store.steampowered.com
|
||||
- name: GitHub
|
||||
icon: fa6-brands:github
|
||||
url: https://github.com
|
||||
Loading…
Reference in New Issue