feat: post header link
This commit is contained in:
@@ -5,6 +5,8 @@ import astroIcon from "astro-icon"
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkMath from 'remark-math';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import rehypeSlug from "rehype-slug";
|
||||
import rehypeAutolinkHeadings from "rehype-autolink-headings";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
@@ -16,7 +18,17 @@ export default defineConfig({
|
||||
base: "/",
|
||||
markdown: {
|
||||
remarkPlugins: [remarkMath],
|
||||
rehypePlugins: [rehypeKatex],
|
||||
rehypePlugins: [rehypeKatex, rehypeSlug,
|
||||
[
|
||||
rehypeAutolinkHeadings,
|
||||
{
|
||||
behavior: "wrap",
|
||||
properties: {
|
||||
class: "heading-anchor", // optional for styling
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
shikiConfig: {
|
||||
theme: "vesper",
|
||||
}
|
||||
|
||||
63
package-lock.json
generated
63
package-lock.json
generated
@@ -16,7 +16,9 @@
|
||||
"katex": "^0.16.22",
|
||||
"lucide-astro": "^0.536.0",
|
||||
"lucide-react": "^0.536.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-math": "^6.0.0",
|
||||
"serve": "^14.2.4",
|
||||
"tailwindcss": "^4.1.11"
|
||||
@@ -4398,6 +4400,19 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/hast-util-heading-rank": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
|
||||
"integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/hast": "^3.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/hast-util-is-element": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
|
||||
@@ -4556,6 +4571,19 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/hast-util-to-string": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
|
||||
"integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/hast": "^3.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/hast-util-to-text": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
|
||||
@@ -7203,6 +7231,24 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/rehype-autolink-headings": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
|
||||
"integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/hast": "^3.0.0",
|
||||
"@ungap/structured-clone": "^1.0.0",
|
||||
"hast-util-heading-rank": "^3.0.0",
|
||||
"hast-util-is-element": "^3.0.0",
|
||||
"unified": "^11.0.0",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/rehype-katex": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
|
||||
@@ -7267,6 +7313,23 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/rehype-slug": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
|
||||
"integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/hast": "^3.0.0",
|
||||
"github-slugger": "^2.0.0",
|
||||
"hast-util-heading-rank": "^3.0.0",
|
||||
"hast-util-to-string": "^3.0.0",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/rehype-stringify": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
|
||||
|
||||
@@ -13,15 +13,17 @@
|
||||
"start": "node ./dist/server/entry.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^4.3.4",
|
||||
"@astrojs/cloudflare": "^12.6.6",
|
||||
"@astrojs/mdx": "^4.3.4",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"astro": "^5.13.4",
|
||||
"astro-icon": "^1.1.5",
|
||||
"katex": "^0.16.22",
|
||||
"lucide-astro": "^0.536.0",
|
||||
"lucide-react": "^0.536.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-math": "^6.0.0",
|
||||
"serve": "^14.2.4",
|
||||
"tailwindcss": "^4.1.11"
|
||||
|
||||
@@ -10,7 +10,8 @@ const workshop = defineCollection({
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: image().optional(),
|
||||
tags: z.array(z.string()).optional()
|
||||
tags: z.array(z.string()).optional(),
|
||||
private: z.boolean().optional()
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
---
|
||||
title: 'Writing an HTTP server in C'
|
||||
description: 'Lorem ipsum dolor sit amet really long descriptionbla bla bka la bla'
|
||||
pubDate: '2025-08-03'
|
||||
tags: ['c', 'programming', 'socket']
|
||||
heroImage: "../images/OIP.sWCvltMZF_s3mjA5sL-RdgHaE8.jpg"
|
||||
---
|
||||
|
||||
|
||||
# Lorem Ipsum: A Comprehensive Guide
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. **Ut enim ad minim veniam**, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
## The Origins of Lorem Ipsum
|
||||
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
||||
### Historical Context
|
||||
|
||||
*Sed ut perspiciatis unde omnis* iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
|
||||
> "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentibus voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."
|
||||
>
|
||||
> — Marcus Tullius Cicero
|
||||
|
||||
#### Key Features
|
||||
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt:
|
||||
|
||||
- **Primary advantage**: Lorem ipsum has been the industry's standard dummy text
|
||||
- **Secondary benefit**: It uses a Latin-like language which is more natural
|
||||
- **Tertiary aspect**: The distribution of letters approximates English
|
||||
- **Additional feature**: Available in multiple variations and lengths
|
||||
|
||||
##### Numbered List Example
|
||||
|
||||
Here's how you might implement lorem ipsum in your workflow:
|
||||
|
||||
1. Choose your desired length (short, medium, or long)
|
||||
2. Select the starting phrase (**Lorem ipsum dolor sit amet**)
|
||||
3. Generate additional paragraphs as needed
|
||||
4. Apply formatting using standard markdown syntax
|
||||
5. Review and adjust for your specific use case
|
||||
|
||||
###### Technical Specifications
|
||||
|
||||
The standard Lorem Ipsum passage includes these characteristics:
|
||||
|
||||
- Contains approximately 500 words
|
||||
- Uses pseudo-Latin derived from Cicero's work
|
||||
- Maintains readable character distribution
|
||||
- Includes both common and uncommon letter combinations
|
||||
|
||||
## Code Examples
|
||||
|
||||
Here's a simple function to generate lorem ipsum text:
|
||||
|
||||
```javascript
|
||||
function generateLoremIpsum(wordCount = 50) {
|
||||
const words = [
|
||||
'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur',
|
||||
'adipiscing', 'elit', 'sed', 'do', 'eiusmod', 'tempor'
|
||||
];
|
||||
|
||||
let result = '';
|
||||
for (let i = 0; i < wordCount; i++) {
|
||||
result += words[Math.floor(Math.random() * words.length)];
|
||||
if (i < wordCount - 1) result += ' ';
|
||||
}
|
||||
|
||||
return result.charAt(0).toUpperCase() + result.slice(1) + '.';
|
||||
}
|
||||
```
|
||||
|
||||
You can also use inline code like `generateLoremIpsum(25)` within your paragraphs.
|
||||
|
||||
## Data Tables
|
||||
|
||||
Here's a comparison of different lorem ipsum generators:
|
||||
|
||||
| Generator | Word Count | Languages | Custom Options |
|
||||
|-----------|------------|-----------|----------------|
|
||||
| Lorem Ipsum Generator | 50-500 | Latin | ✅ |
|
||||
| Hipster Ipsum | 25-200 | English | ✅ |
|
||||
| Bacon Ipsum | 100-300 | English | ❌ |
|
||||
| Cat Ipsum | 75-250 | Mixed | ✅ |
|
||||
|
||||
## Advanced Formatting
|
||||
|
||||
### Text Styling Examples
|
||||
|
||||
This text contains **bold formatting** and *italic emphasis*. You can also combine them for ***bold and italic*** text. For technical documentation, you might need to show ~~deleted text~~ or <u>underlined content</u>.
|
||||
|
||||
Sometimes you need to highlight important information with ==marked text== or show keyboard shortcuts like <kbd>Ctrl</kbd> + <kbd>C</kbd>.
|
||||
|
||||
### Definition Lists
|
||||
|
||||
Lorem Ipsum
|
||||
: Placeholder text commonly used in the printing and typesetting industry
|
||||
|
||||
Dolor Sit Amet
|
||||
: The second phrase in the standard Lorem Ipsum passage
|
||||
|
||||
Consectetur Adipiscing
|
||||
: Latin words meaning "to pursue" and "to obtain"
|
||||
|
||||
### Details and Summary
|
||||
|
||||
<details>
|
||||
<summary>Click to expand: More about Lorem Ipsum</summary>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
This hidden content demonstrates how collapsible sections work within the styling system.
|
||||
</details>
|
||||
|
||||
## Mathematical and Scientific Notation
|
||||
|
||||
The quadratic formula is expressed as $$ax² + bx + c = 0$$, where the solutions are found using $$x = (-b ± √(b²-4ac))/2a$$.
|
||||
|
||||
Chemical formulas like H₂O and CO₂ use subscript notation, while mathematical expressions might use superscript like $$E = mc²$$.
|
||||
|
||||
## Links and References
|
||||
|
||||
For more information about lorem ipsum, you can visit [Lorem Ipsum Generator](https://www.lipsum.com/) or check out the [Wikipedia article on Lorem Ipsum](https://en.wikipedia.org/wiki/Lorem_ipsum).
|
||||
|
||||
You might also find these internal links helpful:
|
||||
- [Section on Origins](#the-origins-of-lorem-ipsum)
|
||||
- [Code Examples](#code-examples)
|
||||
- [Data Tables](#data-tables)
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. The versatility of Lorem Ipsum makes it an invaluable tool for designers, developers, and content creators worldwide.
|
||||
|
||||
<small>*This document was created as a comprehensive test of markdown styling capabilities. All Lorem Ipsum text is used for demonstration purposes only.*</small>
|
||||
|
||||
### Footnotes and Citations
|
||||
|
||||
According to recent studies¹, Lorem Ipsum remains the most widely used placeholder text in the design industry. Various alternatives² have emerged, but none have achieved the same level of adoption.
|
||||
|
||||
---
|
||||
|
||||
*¹ Design Industry Survey 2023*
|
||||
*² Alternative includes Hipster Ipsum, Bacon Ipsum, and Cat Ipsum*
|
||||
57
src/pages/background.astro
Normal file
57
src/pages/background.astro
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
import "../styles/global.css"
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
import NavigationCard from '../components/NavigationCard.astro';
|
||||
import { Fingerprint, PencilRuler, LibraryBig, NotepadText } from 'lucide-astro';
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
href: "/about",
|
||||
icon: Fingerprint,
|
||||
heading: "About",
|
||||
content: "Who am I, my academic and professional background, what drives this work."
|
||||
},
|
||||
{
|
||||
href: "/workshop",
|
||||
icon: PencilRuler,
|
||||
heading: "Workshop",
|
||||
content: "From the theory to the implementation. What I build to understand."
|
||||
},
|
||||
{
|
||||
href: "/library",
|
||||
icon: LibraryBig,
|
||||
heading: "Library",
|
||||
content: "Books and papers and resources I use to learn. What I read, and why it matters."
|
||||
},
|
||||
{
|
||||
href: "/notes",
|
||||
icon: NotepadText,
|
||||
heading: "Notes",
|
||||
content: "My explorations into the fundamental nature of everything."
|
||||
}
|
||||
];
|
||||
---
|
||||
<Layout>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<section class="max-w-4xl mb-20 sm:mb-28 ml-[35rem]">
|
||||
<blockquote class="border-l-4 border-neutral-300 dark:border-neutral-700 pl-6">
|
||||
<p class="text-2xl sm:text-3xl font-semibold text-neutral-900 dark:text-neutral-100 font-serif leading-relaxed">
|
||||
"May the <i> git --force </i> be with you"
|
||||
</p>
|
||||
<footer class="mt-4 text-neutral-600 dark:text-neutral-400 text-lg italic">
|
||||
— Ben K., probably.
|
||||
</footer>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
@@ -1,19 +1,21 @@
|
||||
<!-- ---
|
||||
<!-----
|
||||
import "../../styles/global.css"
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
const posts = (await getCollection('workshop')).sort(
|
||||
const posts = (await getCollection('workshop'))
|
||||
.filter(post => !post.data.private)
|
||||
.sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
);
|
||||
);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<section class="max-w-7xl mb-10 sm:mb-14">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
|
||||
<p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify max-w-3xl">
|
||||
I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...
|
||||
I like to experiment, investigate and make mistakes. Here I archive my projects, ideas and failures.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -276,3 +276,29 @@ h1, h2, h3 {
|
||||
@apply bg-gray-100 text-black border-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-anchor {
|
||||
position: relative;
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.heading-anchor::after {
|
||||
content: "#";
|
||||
opacity: 0;
|
||||
margin-left: 0.4em;
|
||||
font-size: 0.9em;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.heading-anchor:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.heading-anchor:focus,
|
||||
.heading-anchor:focus-visible,
|
||||
.heading-anchor:focus-within {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user