Initial commit
This commit is contained in:
tiff
GitHub
commit
f78314dc2e
35 changed files with 9898 additions and 0 deletions
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
* text=auto eol=lf
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 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
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
4
.vscode/settings.json
vendored
Normal file
4
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
}
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 Nicholas Ly
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
84
README.md
Normal file
84
README.md
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
# Miniblog
|
||||||
|
|
||||||
|
**Miniblog** is an opinionated and extremely minimal blogging template built with [Astro](https://astro.build/) and [Tailwind CSS](https://tailwindcss.com/), whose design is heavily inspired by [jrmyphlmn.com](https://jrmyphlmn.com/). Incredibly easy to use and customize, you can use **Miniblog** as is, or add as much as you want to it.
|
||||||
|
|
||||||
|
- Blog post authoring using [Markdown](https://www.markdownguide.org/) and [MDX](https://mdxjs.com/) for component-style content
|
||||||
|
- Code block syntax highlighting with [Shiki](https://github.com/shikijs/shiki)
|
||||||
|
- [RSS](https://en.wikipedia.org/wiki/RSS) feed and sitemap generation
|
||||||
|
- SEO optimization, with customizable OpenGraph image support
|
||||||
|
- Code formatting with [Prettier](https://prettier.io/)
|
||||||
|
- Accessible view transitions
|
||||||
|
- Dark mode
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
1. Click "Use this template", the big green button on the top right, to create a new repository with this template.
|
||||||
|
|
||||||
|
2. Clone the repository:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
|
||||||
|
cd [YOUR_REPO_NAME]
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Start the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Optionally, format your code after making changes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run format
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
**Miniblog** purposely keeps itself minimal, relying on no other web framework than Astro, and keeping styling simple through Tailwind and traditional CSS.
|
||||||
|
|
||||||
|
### Site Configuration
|
||||||
|
|
||||||
|
Edit the `src/consts.ts` file to update your information and site's metadata:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export const SITE_URL = "https://miniblog.nicholasly.com";
|
||||||
|
export const SITE_TITLE = "Miniblog";
|
||||||
|
export const SITE_DESCRIPTION = "Welcome to my website!";
|
||||||
|
|
||||||
|
export const EMAIL = "hello@nicholasly.com";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Blog Posts
|
||||||
|
|
||||||
|
Add new blog posts as Markdown or MDX files in the `src/content/posts/` directory. Use the following frontmatter structure:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "Lorem Ipsum"
|
||||||
|
description: "Lorem ipsum dolor sit amet."
|
||||||
|
date: "Nov 06 2024"
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### Markdown Styling
|
||||||
|
|
||||||
|
All Markdown-specific CSS styling is customizable in `src/styles/global.css`:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@layer components {
|
||||||
|
article {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is open source and available under the [MIT License](LICENSE).
|
||||||
22
astro.config.mjs
Normal file
22
astro.config.mjs
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
import mdx from "@astrojs/mdx";
|
||||||
|
|
||||||
|
import sitemap from "@astrojs/sitemap";
|
||||||
|
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
import { SITE_URL } from "./src/consts";
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: SITE_URL,
|
||||||
|
integrations: [mdx(), sitemap(), tailwind()],
|
||||||
|
markdown: {
|
||||||
|
shikiConfig: {
|
||||||
|
themes: {
|
||||||
|
light: "catppuccin-latte",
|
||||||
|
dark: "catppuccin-mocha",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
9051
package-lock.json
generated
Normal file
9051
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
46
package.json
Normal file
46
package.json
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "miniblog",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.2",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro check && astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"format:check": "prettier --check ."
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/check": "^0.9.4",
|
||||||
|
"@astrojs/mdx": "^4.0.2",
|
||||||
|
"@astrojs/rss": "^4.0.9",
|
||||||
|
"@astrojs/sitemap": "^3.2.1",
|
||||||
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
|
"astro": "^5.1.0",
|
||||||
|
"tailwind-merge": "^2.5.4",
|
||||||
|
"tailwindcss": "^3.4.14",
|
||||||
|
"typescript": "^5.6.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"prettier": "^3.3.3",
|
||||||
|
"prettier-plugin-astro": "^0.14.1",
|
||||||
|
"prettier-plugin-astro-organize-imports": "^0.4.11",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.6.8"
|
||||||
|
},
|
||||||
|
"prettier": {
|
||||||
|
"plugins": [
|
||||||
|
"prettier-plugin-astro",
|
||||||
|
"prettier-plugin-tailwindcss",
|
||||||
|
"prettier-plugin-astro-organize-imports"
|
||||||
|
],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.astro",
|
||||||
|
"options": {
|
||||||
|
"parser": "astro"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
BIN
public/fonts/geist-mono-variable.woff2
Normal file
BIN
public/fonts/geist-mono-variable.woff2
Normal file
Binary file not shown.
BIN
public/fonts/geist-variable.woff2
Normal file
BIN
public/fonts/geist-variable.woff2
Normal file
Binary file not shown.
BIN
public/static/blog-placeholder.png
Normal file
BIN
public/static/blog-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
1
public/static/blog-placeholder.svg
Normal file
1
public/static/blog-placeholder.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/static/dynamic-island-animation.mp4
Normal file
BIN
public/static/dynamic-island-animation.mp4
Normal file
Binary file not shown.
19
src/components/Header.astro
Normal file
19
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
import { EMAIL } from "../consts";
|
||||||
|
import ThemeToggle from "./ThemeToggle.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<header class="mb-6 flex items-center justify-between" transition:name="header">
|
||||||
|
<nav class="flex items-center gap-4">
|
||||||
|
<a href="/"> home </a>
|
||||||
|
<a href="/posts"> posts </a>
|
||||||
|
<a href={`mailto:${EMAIL}`}>email</a>
|
||||||
|
</nav>
|
||||||
|
<ThemeToggle />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
@apply font-medium text-zinc-500 hover:text-zinc-900 hover:underline dark:hover:text-zinc-100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/components/ThemeToggle.astro
Normal file
43
src/components/ThemeToggle.astro
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<button
|
||||||
|
id="theme-toggle"
|
||||||
|
class="inline-flex items-center rounded-md border p-1 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800 [&_svg]:text-zinc-500 [&_svg]:hover:text-zinc-900 [&_svg]:dark:hover:text-zinc-100"
|
||||||
|
aria-label="Toggle theme"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Toggle theme</span>
|
||||||
|
<svg
|
||||||
|
id="sun"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="hidden size-4 dark:block"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8 1a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 1ZM10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM12.95 4.11a.75.75 0 1 0-1.06-1.06l-1.062 1.06a.75.75 0 0 0 1.061 1.062l1.06-1.061ZM15 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 15 8ZM11.89 12.95a.75.75 0 0 0 1.06-1.06l-1.06-1.062a.75.75 0 0 0-1.062 1.061l1.061 1.06ZM8 12a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 12ZM5.172 11.89a.75.75 0 0 0-1.061-1.062L3.05 11.89a.75.75 0 1 0 1.06 1.06l1.06-1.06ZM4 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 4 8ZM4.11 5.172A.75.75 0 0 0 5.173 4.11L4.11 3.05a.75.75 0 1 0-1.06 1.06l1.06 1.06Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
id="moon"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="size-4 dark:hidden"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M14.438 10.148c.19-.425-.321-.787-.748-.601A5.5 5.5 0 0 1 6.453 2.31c.186-.427-.176-.938-.6-.748a6.501 6.501 0 1 0 8.585 8.586Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const setListener = () => {
|
||||||
|
const button = document.getElementById("theme-toggle");
|
||||||
|
|
||||||
|
button?.addEventListener("click", () => {
|
||||||
|
document.documentElement.classList.toggle("dark");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
setListener();
|
||||||
|
|
||||||
|
document.addEventListener("astro:after-swap", setListener);
|
||||||
|
</script>
|
||||||
9
src/consts.ts
Normal file
9
src/consts.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Place any global data in this file.
|
||||||
|
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||||
|
|
||||||
|
export const SITE_URL = "https://miniblog.nicholasly.com";
|
||||||
|
export const SITE_TITLE = "Miniblog";
|
||||||
|
export const SITE_DESCRIPTION =
|
||||||
|
"Miniblog is an opinionated and extremely minimal blogging template built with Astro and Tailwind CSS.";
|
||||||
|
|
||||||
|
export const EMAIL = "hello@nicholasly.com";
|
||||||
13
src/content/config.ts
Normal file
13
src/content/config.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { defineCollection, z } from "astro:content";
|
||||||
|
|
||||||
|
const posts = defineCollection({
|
||||||
|
type: "content",
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
date: z.coerce.date(),
|
||||||
|
image: z.string().default("/static/blog-placeholder.png"),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { posts };
|
||||||
40
src/content/posts/customizing-miniblog.md
Normal file
40
src/content/posts/customizing-miniblog.md
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
---
|
||||||
|
title: "Customizing Miniblog"
|
||||||
|
description: "How to customize the Miniblog blog theme."
|
||||||
|
date: "Nov 26 2024"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Blog Posts
|
||||||
|
|
||||||
|
All blog posts should be saved as [Markdown](https://www.markdownguide.org/) or [MDX](https://mdxjs.com/) files within the `src/content/posts/` directory, and have valid frontmatter as defined by the `posts` content collection in the `src/content/config.ts` file. Here's an example of what valid frontmatter would look like:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Customizing Miniblog"
|
||||||
|
description: "How to customize the Miniblog blog theme."
|
||||||
|
date: "Nov 26 2024"
|
||||||
|
image: "/static/blog-placeholder.png"
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note that the `image` frontmatter property is optional, and will by default use `/static/blog-placeholder.png`. You may update this by replacing the `/static/blog-placeholder.png` file in the `public/static/` directory with a file of your choice with the same name.
|
||||||
|
|
||||||
|
## Codeblock Syntax Highlighting
|
||||||
|
|
||||||
|
Astro has Markdown codeblock syntax highlighting out of the box by using [Shiki](https://shiki.style/) under the hood. To customize the themes used by Shiki, modify the `markdown.shikiConfig.themes` property of the `astro.config.mjs` file to one of the [themes](https://shiki.style/themes) provided by Shiki.
|
||||||
|
|
||||||
|
## OpenGraph Image Support
|
||||||
|
|
||||||
|
As mentioned in the [Blog Posts](#blog-posts) section above, a default OpenGraph image is provided for all pages of the site.
|
||||||
|
|
||||||
|
To update the site-wide, default OpenGraph image, replace the `/static/blog-placeholder.png` file in the `public/static/` directory with a file of your choice with the same name.
|
||||||
|
|
||||||
|
To add a unique OpenGraph image for a specific blog post, add the new image to the `public/static/` directory, and update the `image` frontmatter property for the respective blog post to use the new image.
|
||||||
|
|
||||||
|
## View Transitions
|
||||||
|
|
||||||
|
View transitions, or page-to-page navigation animations, also come out of the box with Astro. Please review the Astro [View Transitions](https://docs.astro.build/en/guides/view-transitions/) documentation if you would like to modify the animations of the site.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
Miniblog uses [Tailwind CSS](https://tailwindcss.com/) for its styling, and therefore uses Tailwind's native color variables throughout the site. By default, Miniblog uses `neutral` for the majority of its colors, with the exception of links that use `blue` and codeblocks that utilize syntax highlighting.
|
||||||
15
src/content/posts/lorem-ipsum.md
Normal file
15
src/content/posts/lorem-ipsum.md
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
title: "Lorem Ipsum"
|
||||||
|
description: "Lorem ipsum dolor sit amet."
|
||||||
|
date: "Nov 06 2024"
|
||||||
|
---
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
||||||
|
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
|
||||||
|
|
||||||
|
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
|
||||||
|
|
||||||
|
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
|
||||||
|
|
||||||
|
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
|
||||||
39
src/content/posts/making-miniblog.md
Normal file
39
src/content/posts/making-miniblog.md
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
title: "Making Miniblog"
|
||||||
|
description: "For those that appreciate simplicity."
|
||||||
|
date: "Nov 08 2024"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
Hi there! My name is Nicholas Ly, and I'm a fullstack web developer. I started a blog at [nicholasly.com](https://nicholasly.com/), and actively contribute to and build open source projects outside of my day job.
|
||||||
|
|
||||||
|
I've visited my fair share of blogs and have tried a variety of templates. Over time, I've developed some pretty clear preferences and opinions, which I bring to you through [Miniblog](https://miniblog.nicholasly.com/).
|
||||||
|
|
||||||
|
Miniblog is written in Astro, a framework which specializes in static content such as blogs. Both aethetically and functionally, it is designed to be extremely minimal. Enough to get the job done for most people, and canvas for others.
|
||||||
|
|
||||||
|
To be frank, not many people care for your blog. It doesn't need a lot of bells and whistles. Everytime I've ever visited a blog, it was to learn something. I don't think anything should distract from that.
|
||||||
|
|
||||||
|
## Opinionated, but not restrictive.
|
||||||
|
|
||||||
|
My favorite blogs are the simple ones. The blogs that have zero distraction, and just have the information I want to read and the data I need. You don't need a lot to accomplish this. With that said, let's go over some of the decisions I've made for this template.
|
||||||
|
|
||||||
|
It's true that this template could literally be done with pure HTML, but [Astro](https://astro.build/) is a great framework with so many quality-of-life features built-in that makes building a blog dead simple.
|
||||||
|
|
||||||
|
I could have very much stuck with vanilla CSS, but I prefer to use [Tailwind CSS](https://tailwindcss.com/). It's a pleasure to work with, extremely lightweight, and its theming system is fantastic.
|
||||||
|
|
||||||
|
You don't need [ESLint](https://eslint.org/) for a small application like a blog. ESLint is a fantastic tool, especially for larger projects with equally large teams, but it simply isn't necessary for a blog in which you're most likely the only developer. Save yourself the headache.
|
||||||
|
|
||||||
|
I do have [Prettier](https://prettier.io/), which is arguably just as unnecessary as ESLint if you're the only contributor, but since this template is open source, a code formatter is pretty useful. You may also be writing and sharing code in your blog posts, so Prettier just makes it easier for the majority to read your code.
|
||||||
|
|
||||||
|
You don't need analytics. Again, analytic tools like [Umami](https://umami.is/) are fantastic, but aren't really necessary for a simple blog. You probably won't get that many visitors, and what significant value do you get from tracking them?
|
||||||
|
|
||||||
|
You don't need a comments system. Out of the already few visitors of your blog, most of them won't care to leave a comment. You also would need to be extremely cautious of spam and abuse.
|
||||||
|
|
||||||
|
You don't need a <abbr title="Content Management System">CMS</abbr>, unless you have a crazy amount of posts. And I'm talking like a _crazy_ amount.
|
||||||
|
|
||||||
|
Other than that, everything is purposely kept simple on purpose. You don't need a lot of development experience to get started with this template. And if you want to change something, please do.
|
||||||
|
|
||||||
|
## Final note
|
||||||
|
|
||||||
|
Feel free to disagree with my opinions. It's open source for a reason—do whatever you want with it.
|
||||||
73
src/content/posts/markdown-style-guide.md
Normal file
73
src/content/posts/markdown-style-guide.md
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
---
|
||||||
|
title: "Markdown Style Guide"
|
||||||
|
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
|
||||||
|
date: "Nov 07 2024"
|
||||||
|
---
|
||||||
|
|
||||||
|
# H1
|
||||||
|
|
||||||
|
## H2
|
||||||
|
|
||||||
|
### H3
|
||||||
|
|
||||||
|
#### H4
|
||||||
|
|
||||||
|
##### H5
|
||||||
|
|
||||||
|
###### H6
|
||||||
|
|
||||||
|
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||||
|
|
||||||
|
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<video controls>
|
||||||
|
<source src="/static/dynamic-island-animation.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||||
|
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||||
|
|
||||||
|
| Italics | Bold | Code |
|
||||||
|
| --------- | -------- | ------ |
|
||||||
|
| _italics_ | **bold** | `code` |
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Example HTML5 Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
1. First item
|
||||||
|
2. Second item
|
||||||
|
3. Third item
|
||||||
|
|
||||||
|
Hello world!
|
||||||
|
|
||||||
|
- List item
|
||||||
|
- Another item
|
||||||
|
- List item
|
||||||
|
- Another item
|
||||||
|
- And another item
|
||||||
|
- And another item
|
||||||
|
- List item
|
||||||
|
- Another item
|
||||||
|
- And another item
|
||||||
|
|
||||||
|
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||||
|
|
||||||
|
H<sub>2</sub>O
|
||||||
|
|
||||||
|
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||||
|
|
||||||
|
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
|
||||||
|
|
||||||
|
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference path="../.astro/types.d.ts" />
|
||||||
111
src/layouts/Layout.astro
Normal file
111
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
---
|
||||||
|
import { ViewTransitions } from "astro:transitions";
|
||||||
|
import Header from "../components/Header.astro";
|
||||||
|
import { cn } from "../lib/utils";
|
||||||
|
import "../styles/global.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
|
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
image = "/static/blog-placeholder.png",
|
||||||
|
className,
|
||||||
|
} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Global Metadata -->
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
|
||||||
|
<!-- Font preloads -->
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/fonts/geist-variable.woff2"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/fonts/geist-mono-variable.woff2"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="title" content={title} />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content={Astro.url} />
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:url" content={Astro.url} />
|
||||||
|
<meta property="twitter:title" content={title} />
|
||||||
|
<meta property="twitter:description" content={description} />
|
||||||
|
<meta property="twitter:image" content={new URL(image, Astro.url)} />
|
||||||
|
|
||||||
|
<ViewTransitions />
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="font-sans text-zinc-900 antialiased transition-colors dark:bg-zinc-900 dark:text-zinc-200"
|
||||||
|
>
|
||||||
|
<div class={cn("max-w-xl mx-auto p-4", className)}>
|
||||||
|
<Header />
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
const setTheme = () => {
|
||||||
|
let theme;
|
||||||
|
|
||||||
|
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
|
||||||
|
theme = localStorage.getItem("theme");
|
||||||
|
} else {
|
||||||
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.classList[theme ? "add" : "remove"](theme);
|
||||||
|
|
||||||
|
if (typeof localStorage !== "undefined") {
|
||||||
|
const observer = new MutationObserver(() => {
|
||||||
|
const isDark = document.documentElement.classList.contains("dark");
|
||||||
|
localStorage.setItem("theme", isDark ? "dark" : "light");
|
||||||
|
});
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ["class"],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
setTheme();
|
||||||
|
|
||||||
|
document.addEventListener("astro:after-swap", setTheme);
|
||||||
|
</script>
|
||||||
14
src/lib/utils.ts
Normal file
14
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { type ClassValue, clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(date: Date) {
|
||||||
|
return Intl.DateTimeFormat("en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
}).format(date);
|
||||||
|
}
|
||||||
39
src/pages/index.astro
Normal file
39
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
title={SITE_TITLE}
|
||||||
|
description={SITE_DESCRIPTION}
|
||||||
|
className="flex h-svh max-w-sm flex-col justify-center"
|
||||||
|
>
|
||||||
|
<main class="space-y-4">
|
||||||
|
<p>
|
||||||
|
Miniblog is an opinionated and extremely minimal blogging template built
|
||||||
|
with <a
|
||||||
|
href="https://astro.build/"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-500 underline">Astro</a
|
||||||
|
> and <a
|
||||||
|
href="https://tailwindcss.com/"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-500 underline">Tailwind</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Design heavily inspired by <a
|
||||||
|
href="https://jrmyphlmn.com/"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-500 underline">jrmyphlmn.com</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To use this template, check out the <a
|
||||||
|
href="https://github.com/nicholasdly/miniblog?tab=readme-ov-file"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-500 underline">GitHub repository</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
35
src/pages/posts/[...slug].astro
Normal file
35
src/pages/posts/[...slug].astro
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
import { type CollectionEntry, getCollection } from "astro:content";
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
import { formatDate } from "../../lib/utils";
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection("posts");
|
||||||
|
return posts.map((post) => ({
|
||||||
|
params: { slug: post.slug },
|
||||||
|
props: post,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
type Props = CollectionEntry<"posts">;
|
||||||
|
|
||||||
|
const post = Astro.props;
|
||||||
|
const { Content } = await post.render();
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout
|
||||||
|
title={post.data.title}
|
||||||
|
description={post.data.description}
|
||||||
|
image={post.data.image}
|
||||||
|
>
|
||||||
|
<main>
|
||||||
|
<h1 class="mb-5 text-xl font-medium">
|
||||||
|
{post.data.title}
|
||||||
|
</h1>
|
||||||
|
<p class="mb-1 font-medium text-zinc-500">
|
||||||
|
{formatDate(post.data.date)}
|
||||||
|
</p>
|
||||||
|
<article>
|
||||||
|
<Content />
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
33
src/pages/posts/index.astro
Normal file
33
src/pages/posts/index.astro
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
---
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from "../../consts";
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
import { formatDate } from "../../lib/utils";
|
||||||
|
|
||||||
|
const collection = await getCollection("posts");
|
||||||
|
const posts = collection.sort(
|
||||||
|
(a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
|
||||||
|
);
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
|
||||||
|
<main>
|
||||||
|
<ul class="flex flex-col gap-1.5">
|
||||||
|
{
|
||||||
|
posts.map((post) => (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={`/posts/${post.slug}`}
|
||||||
|
class="group flex justify-between gap-3"
|
||||||
|
>
|
||||||
|
<span class="group-hover:underline">{post.data.title}</span>
|
||||||
|
<span class="text-nowrap text-zinc-500">
|
||||||
|
{formatDate(post.data.date)}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
13
src/pages/robots.txt.ts
Normal file
13
src/pages/robots.txt.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import type { APIRoute } from "astro";
|
||||||
|
|
||||||
|
const getRobotsTxt = (sitemapURL: URL) => `
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: ${sitemapURL.href}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const GET: APIRoute = ({ site }) => {
|
||||||
|
const sitemapURL = new URL("sitemap-index.xml", site);
|
||||||
|
return new Response(getRobotsTxt(sitemapURL));
|
||||||
|
};
|
||||||
16
src/pages/rss.xml.js
Normal file
16
src/pages/rss.xml.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import rss from "@astrojs/rss";
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
|
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||||
|
|
||||||
|
export async function GET(context) {
|
||||||
|
const posts = await getCollection("posts");
|
||||||
|
return rss({
|
||||||
|
title: SITE_TITLE,
|
||||||
|
description: SITE_DESCRIPTION,
|
||||||
|
site: context.site,
|
||||||
|
items: posts.map((post) => ({
|
||||||
|
...post.data,
|
||||||
|
link: `/posts/${post.slug}/`,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
}
|
||||||
83
src/styles/global.css
Normal file
83
src/styles/global.css
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
@font-face {
|
||||||
|
font-family: "Geist";
|
||||||
|
src: url("/fonts/geist-variable.woff2") format("woff2");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Geist Mono";
|
||||||
|
src: url("/fonts/geist-mono-variable.woff2") format("woff2");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
html.dark .astro-code,
|
||||||
|
html.dark .astro-code span {
|
||||||
|
color: var(--shiki-dark) !important;
|
||||||
|
background-color: var(--shiki-dark-bg) !important;
|
||||||
|
font-style: var(--shiki-dark-font-style) !important;
|
||||||
|
font-weight: var(--shiki-dark-font-weight) !important;
|
||||||
|
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
article {
|
||||||
|
p {
|
||||||
|
@apply my-4 leading-relaxed;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
@apply my-4 text-xl font-medium dark:text-white;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply my-4 text-lg font-medium dark:text-white;
|
||||||
|
}
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
@apply my-4 font-medium dark:text-white;
|
||||||
|
}
|
||||||
|
:not(pre) > code {
|
||||||
|
@apply whitespace-nowrap rounded border bg-zinc-200/50 px-1 py-0.5 font-mono text-sm font-medium text-black dark:border-zinc-700 dark:bg-zinc-800/50 dark:text-white;
|
||||||
|
}
|
||||||
|
pre:has(code) {
|
||||||
|
@apply my-4 max-h-[600px] overflow-auto rounded-lg border p-4 font-mono text-sm font-medium dark:border-zinc-700;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@apply my-4 rounded-lg border dark:border-zinc-700;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
@apply my-4 rounded-lg border dark:border-zinc-700;
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
@apply my-4 border-l-2 pl-4;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
@apply text-blue-500 underline;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
@apply my-4 w-full table-auto border-collapse text-sm;
|
||||||
|
th {
|
||||||
|
@apply border-b p-4 text-left font-medium dark:border-zinc-700;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
@apply border-b bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
@apply my-1 list-inside list-decimal space-y-1 [&_ol]:pl-5 [&_ul]:pl-5;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
@apply my-1 list-inside list-disc space-y-1 [&_ol]:pl-5 [&_ul]:pl-5;
|
||||||
|
}
|
||||||
|
kbd {
|
||||||
|
@apply rounded border border-b-2 bg-zinc-100 px-1 py-0.5 font-mono text-xs font-medium text-black dark:border-zinc-700 dark:bg-zinc-800 dark:text-white;
|
||||||
|
}
|
||||||
|
mark {
|
||||||
|
@apply dark:bg-yellow-500/50 dark:text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
tailwind.config.ts
Normal file
18
tailwind.config.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import defaultTheme from "tailwindcss/defaultTheme";
|
||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Geist", ...defaultTheme.fontFamily.sans],
|
||||||
|
mono: ["'Geist Mono'", ...defaultTheme.fontFamily.mono],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
6
tsconfig.json
Normal file
6
tsconfig.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue