feat: typography, toc
This commit is contained in:
enscribe
parent
ea68d4f02f
commit
8fe228e243
16 changed files with 194 additions and 311 deletions
|
|
@ -4,7 +4,7 @@ import SocialIcons from './SocialIcons.astro'
|
|||
import { ModeToggle } from '@components/ui/mode-toggle'
|
||||
---
|
||||
|
||||
<footer class="py-8">
|
||||
<footer class="py-4">
|
||||
<Container>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
import '../styles/global.css'
|
||||
import '../styles/katex.css'
|
||||
import '../styles/typography.css'
|
||||
|
||||
import '@fontsource/geist-sans'
|
||||
import '@fontsource/geist-mono'
|
||||
|
|
|
|||
|
|
@ -11,21 +11,23 @@ const items = [
|
|||
]
|
||||
---
|
||||
|
||||
<header class="sticky top-0 z-10" transition:persist>
|
||||
<header class="sticky top-0 z-10 bg-background/50 backdrop-blur-md" transition:persist>
|
||||
<Container>
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<Link href="/" underline={false}>
|
||||
{SITE.TITLE}<span class="ml-1">🍄</span>
|
||||
<Link href="/" class="text-xl font-semibold hover:text-primary transition-colors duration-300">
|
||||
{SITE.TITLE}
|
||||
</Link>
|
||||
<nav class="flex items-center space-x-1 text-sm">
|
||||
{
|
||||
items.map((item, index) => (
|
||||
<>
|
||||
<Link href={item.href}>{item.label}</Link>
|
||||
{index < items.length - 1 && <span class="text-gray-400">/</span>}
|
||||
</>
|
||||
))
|
||||
}
|
||||
<nav class="flex items-center gap-4 md:gap-6 text-sm">
|
||||
{items.map((item, index) => (
|
||||
<Fragment key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
class="transition-colors hover:text-foreground/80 text-foreground/60 capitalize"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ import { cn } from '@lib/utils'
|
|||
type Props = {
|
||||
href: string
|
||||
external?: boolean
|
||||
underline?: boolean
|
||||
group?: boolean
|
||||
class?: string
|
||||
'data-heading'?: string
|
||||
}
|
||||
|
||||
const { href, external, underline = true, group = false, ...rest } = Astro.props
|
||||
const { href, external, class: className, 'data-heading': dataHeading, ...rest } = Astro.props
|
||||
---
|
||||
|
||||
<a
|
||||
href={href}
|
||||
target={external ? '_blank' : '_self'}
|
||||
class={cn(
|
||||
'inline-block transition-colors duration-300 ease-in-out',
|
||||
underline && 'underline underline-offset-[3px]',
|
||||
group && 'group',
|
||||
'inline-block transition-colors duration-300 ease-in-out hover:underline underline-offset-[3px]',
|
||||
className
|
||||
)}
|
||||
data-heading={dataHeading}
|
||||
{...rest}
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
</a>
|
||||
|
|
@ -27,17 +27,17 @@ function buildToc(headings: Heading[]) {
|
|||
}
|
||||
---
|
||||
|
||||
<details open class="rounded-lg border">
|
||||
<summary>Table of Contents</summary>
|
||||
<details open class="block xl:hidden rounded-lg border p-3 mb-8">
|
||||
<summary class="text-xl font-semibold">Table of Contents</summary>
|
||||
<nav>
|
||||
<ul class="py-3">
|
||||
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
||||
</ul>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
summary {
|
||||
@apply cursor-pointer rounded-t-lg px-3 py-1.5 font-medium transition-colors;
|
||||
}
|
||||
</style>
|
||||
<nav class="sticky top-16 hidden xl:block h-0 w-[calc(50vw-50%-4rem)] overflow-wrap-break-word text-xs leading-4 translate-x-[calc(-100%-2em)]">
|
||||
<h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
|
||||
<ul class="space-y-2">
|
||||
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,16 @@
|
|||
import type { Heading } from './TableOfContents.astro'
|
||||
import Link from './Link.astro'
|
||||
|
||||
// https://kld.dev/building-table-of-contents/
|
||||
|
||||
const { heading } = Astro.props
|
||||
---
|
||||
|
||||
<li class="list-inside list-disc px-6 py-1.5 text-sm">
|
||||
<Link href={'#' + heading.slug} underline>
|
||||
<li class="list-inside list-disc px-6 py-1.5 xl:list-none xl:p-0 text-sm">
|
||||
<Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}>
|
||||
{heading.text}
|
||||
</Link>
|
||||
{
|
||||
heading.subheadings.length > 0 && (
|
||||
<ul class="translate-x-3">
|
||||
<ul class="translate-x-3 xl:translate-x-0 xl:ml-4 xl:mt-2 xl:space-y-2">
|
||||
{heading.subheadings.map((subheading: Heading) => (
|
||||
<Astro.self heading={subheading} />
|
||||
))}
|
||||
|
|
@ -21,3 +19,31 @@ const { heading } = Astro.props
|
|||
)
|
||||
}
|
||||
</li>
|
||||
|
||||
<script>
|
||||
function updateActiveHeading() {
|
||||
const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
|
||||
const tocLinks = document.querySelectorAll('.toc-link');
|
||||
|
||||
let currentHeading = '';
|
||||
|
||||
headings.forEach(heading => {
|
||||
const top = heading.getBoundingClientRect().top;
|
||||
if (top < 100) {
|
||||
currentHeading = heading.id;
|
||||
}
|
||||
});
|
||||
|
||||
tocLinks.forEach(link => {
|
||||
const headingSlug = link.getAttribute('data-heading');
|
||||
if (headingSlug === currentHeading) {
|
||||
link.classList.add('underline');
|
||||
} else {
|
||||
link.classList.remove('underline');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateActiveHeading);
|
||||
window.addEventListener('load', updateActiveHeading);
|
||||
</script>
|
||||
|
|
@ -28,7 +28,7 @@ export function ModeToggle() {
|
|||
}, [theme])
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
import type { Site } from '@types'
|
||||
export type Site = {
|
||||
TITLE: string
|
||||
DESCRIPTION: string
|
||||
EMAIL: string
|
||||
NUM_POSTS_ON_HOMEPAGE: number
|
||||
SITEURL: string
|
||||
}
|
||||
|
||||
export const SITE: Site = {
|
||||
TITLE: 'Astro Micro Academics',
|
||||
DESCRIPTION: 'Astro Micro Academics is for academic user.',
|
||||
EMAIL: 'youremial@gmail.com',
|
||||
TITLE: 'astro-erudite',
|
||||
DESCRIPTION: 'astro-erudite is a opinionated, no-frills blogging template. Built with Astro.',
|
||||
EMAIL: 'youremail@gmail.com',
|
||||
NUM_POSTS_ON_HOMEPAGE: 2,
|
||||
SITEURL: 'https://astro-micro-academic.vercel.app', // Update here to link the RSS icon to your website rss
|
||||
SITEURL: 'https://astro-erudite.vercel.app',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,48 +5,108 @@ date: '2024-07-25'
|
|||
tags: ['log', 'rss-feed']
|
||||
---
|
||||
|
||||
:exclamation: Also refer to [Old] posts to see examples and changes. Some changes are removed in this version, which are marked.
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
|
||||
## What is New
|
||||
## Emphasis
|
||||
|
||||
- Add Math support to the blog
|
||||
- Add News, Research, Publication, CV sections
|
||||
- add icon to connect section
|
||||
- Add tag function to the blog
|
||||
- add RSS Feed icon
|
||||
- add tags to post slug and enable tag based search
|
||||
- add function to RSS feed only posts with rss-feed tags
|
||||
- Change SOCIALS
|
||||
- add highlight author
|
||||
- redo the news section height
|
||||
- support markdown emoji :blush: :exclamation:
|
||||
- Clear and rearrange all the posts
|
||||
- [x] rewrite astro-micro-academics
|
||||
- [x] astro micro
|
||||
- [x] get started with astro micro
|
||||
- [x] blog collection example
|
||||
**This is bold text**
|
||||
|
||||
---
|
||||
__This is bold text__
|
||||
|
||||
## TODO
|
||||
*This is italic text*
|
||||
|
||||
- Add Group Page
|
||||
- Add Opening Section
|
||||
- Add Award Page
|
||||
- Write a complete personal website setup guide
|
||||
- screenshot and submit theme to astro
|
||||
- add progress bar on the top
|
||||
- show tags on allowcard
|
||||
- fix news section scroll bar
|
||||
_This is italic text_
|
||||
|
||||
## Math test
|
||||
~~Strikethrough~~
|
||||
|
||||
This is an inline formula: $a = b+1$, $a = \frac{1}{x_1}$
|
||||
|
||||
$$
|
||||
a = \sum_{n=1}^{22} \sqrt{a+b_n}
|
||||
$$
|
||||
## Blockquotes
|
||||
|
||||
## 中文测试
|
||||
|
||||
这里是中文测试
|
||||
> Blockquotes can also be nested...
|
||||
>> ...by using additional greater-than signs right next to each other...
|
||||
> > > ...or with spaces between arrows.
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered
|
||||
|
||||
+ Create a list by starting a line with `+`, `-`, or `*`
|
||||
+ Sub-lists are made by indenting 2 spaces:
|
||||
- Marker character change forces new list start:
|
||||
* Ac tristique libero volutpat at
|
||||
+ Facilisis in pretium nisl aliquet
|
||||
- Nulla volutpat aliquam velit
|
||||
+ Very easy!
|
||||
|
||||
Ordered
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
|
||||
1. You can use sequential numbers...
|
||||
1. ...or keep all the numbers as `1.`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
|
||||
## Code
|
||||
|
||||
Inline `code`
|
||||
|
||||
Indented code
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
|
||||
Block code "fences"
|
||||
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
|
||||
Syntax highlighting
|
||||
|
||||
``` js
|
||||
var foo = function (bar) {
|
||||
return bar++;
|
||||
};
|
||||
|
||||
console.log(foo(5));
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
Right aligned columns
|
||||
|
||||
| Option | Description |
|
||||
| ------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
[link text](http://dev.nodeca.com)
|
||||
|
||||
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import Head from '@components/Head.astro'
|
|||
import Header from '@components/Header.astro'
|
||||
import Footer from '@components/Footer.astro'
|
||||
import { SITE } from '@consts'
|
||||
import '../styles/katex.css'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
|
|
@ -19,7 +18,7 @@ const { title, description } = Astro.props
|
|||
<Head title={`${title} | ${SITE.TITLE}`} description={description} />
|
||||
</head>
|
||||
<body
|
||||
class="box-border flex h-fit min-h-screen flex-col px-4 font-sans bg-background text-foreground antialiased"
|
||||
class="box-border flex h-fit min-h-screen flex-col px-4 font-sans bg-background text-foreground antialiased gap-y-4"
|
||||
>
|
||||
<Header />
|
||||
<main class="flex-grow">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@ import { SITE } from '@consts'
|
|||
import ArrowCard from '@components/ArrowCard.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
import type { CollectionEntry } from 'astro:content'
|
||||
import SocialIcons from '@components/SocialIcons.astro'
|
||||
import { ModeToggle } from '@components/ui/mode-toggle'
|
||||
|
||||
const blog = (await getCollection('blog'))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -18,7 +15,6 @@ const blog = (await getCollection('blog'))
|
|||
<Layout title="Home" description="Home">
|
||||
<Container>
|
||||
<section class="space-y-6">
|
||||
<ModeToggle client:load />
|
||||
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
||||
<h2 class="font-semibold">Latest posts</h2>
|
||||
<Link href="/blog"> See all posts </Link>
|
||||
|
|
|
|||
|
|
@ -84,24 +84,19 @@
|
|||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@apply !border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.disable-transitions * {
|
||||
@apply !transition-none;
|
||||
}
|
||||
}
|
||||
16
src/styles/typography.css
Normal file
16
src/styles/typography.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
article {
|
||||
@apply prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl;
|
||||
@apply prose-h2:mt-10 prose-h2:scroll-m-20 prose-h2:border-b prose-h2:pb-2 prose-h2:text-3xl prose-h2:font-semibold prose-h2:tracking-tight prose-h2:transition-colors prose-h2:first:mt-0;
|
||||
@apply prose-h3:mt-8 prose-h3:scroll-m-20 prose-h3:text-2xl prose-h3:font-semibold prose-h3:tracking-tight;
|
||||
@apply prose-p:leading-7 prose-p:[&:not(:first-child)]:mt-6;
|
||||
@apply prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4;
|
||||
@apply prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic;
|
||||
@apply prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ul:[&>li]:mt-2;
|
||||
@apply prose-pre:border prose-pre:border-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export type Site = {
|
||||
TITLE: string
|
||||
DESCRIPTION: string
|
||||
EMAIL: string
|
||||
NUM_POSTS_ON_HOMEPAGE: number
|
||||
SITEURL: string
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue