Skip to content

Commit

Permalink
Merge pull request #5 from simonerlic/blog-setup
Browse files Browse the repository at this point in the history
Add blog
  • Loading branch information
simonerlic authored Jul 21, 2024
2 parents 4f3a3d1 + c0d9e5c commit fd2e2c6
Show file tree
Hide file tree
Showing 17 changed files with 1,750 additions and 1 deletion.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
"dependencies": {
"@astrojs/cloudflare": "^7.5.2",
"@astrojs/mdx": "^1.1.1",
"@astrojs/rss": "^4.0.7",
"@astrojs/sitemap": "^3.0.1",
"@astrojs/tailwind": "^5.0.0",
"@cloudflare/pages-plugin-mailchannels": "^0.1.2",
"astro": "^3.2.2",
"astro": "^4.12.2",
"react": "^18.2.0",
"react-spring": "^9.7.3",
"tailwindcss": "^3.3.3",
Expand Down
2 changes: 2 additions & 0 deletions src/components/BaseHead.astro
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,5 @@ const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 changes: 5 additions & 0 deletions src/components/BlogPost.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
const { title, url } = Astro.props;
---

<li><a href={url}>{title}</a></li>
92 changes: 92 additions & 0 deletions src/components/blog/BlogHeader.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
import "../../styles/blog-content.css";
---

<header class="text-center pt-2 pb-2 flex flex-col items-center">
<a href="/blog" class="flex flex-col items-center">
<canvas id="lil-doodad" style="width: 75px; height: 75px;" class="pb-1"
></canvas>
<script is:inline src="https://unpkg.com/[email protected]/build/three.min.js"
></script>
<script>
// Setup scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
40,
75 / 75, // Use the canvas size
0.1,
1000
);
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.getElementById("lil-doodad"),
});
renderer.setSize(75, 75);
renderer.setClearColor("#d9d9d9"); // Set the background color

// Setup the material and geometry for the line
const colors = [];
const geometry = new THREE.BufferGeometry();
const points = [];
const tailLength = 2000; // Length of the tail in points

// Halvorsen Attractor parameters
let x = 0.1,
y = 0,
z = 0;
const a = 1.89;
const dt = 0.01;

function halvorsenAttractor() {
const dx = -a * x - 4 * y - 4 * z - y * y;
const dy = -a * y - 4 * z - 4 * x - z * z;
const dz = -a * z - 4 * x - 4 * y - x * x;
x += dt * dx;
y += dt * dy;
z += dt * dz;
points.push(new THREE.Vector3(x, y, z));

// Manage colors for fading effect
const newColor = new THREE.Color("#0f0f0f"); // Change color to #0f0f0f
newColor.lerp(
new THREE.Color("#0f0f0f"),
1 - points.length / tailLength
); // Keep the color consistent
colors.push(newColor);

if (points.length > tailLength) {
points.shift();
colors.shift();
}

geometry.setFromPoints(points);
geometry.setAttribute(
"color",
new THREE.BufferAttribute(
new Float32Array(colors.flatMap((c) => c.toArray())),
3
)
);
}

// Create the line with vertex colors enabled
const material = new THREE.LineBasicMaterial({ vertexColors: true });
const line = new THREE.Line(geometry, material);
scene.add(line);

// Camera position
camera.position.z = 50;

// Animation loop with rotation
function animate() {
requestAnimationFrame(animate);
halvorsenAttractor();
line.rotation.y += 0.001; // Slow rotation
renderer.render(scene, camera);
}

animate();
</script>
<h1 class="header-text">Simon's Ramblings</h1>
</a>
</header>
34 changes: 34 additions & 0 deletions src/components/blog/TopEntries.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
import "../../styles/blog-home.css";
const allPosts = await Astro.glob("../../pages/posts/*.mdx");
const sortedPosts = allPosts.sort(
(a, b) =>
Number(new Date(b.frontmatter.pubDate)) -
Number(new Date(a.frontmatter.pubDate))
);
---

<body class="relative min-h-screen">
<div class="recent-box">
<h3 class="text-lg mb-4">$ ls -a blog_entries/*.md</h3>
<ul class="space-y-4 sm:space-y-2">
{
sortedPosts.map((post) => (
<li>
<span class="pr-2">-rw-r--r-- 1 serlic serlic{" "}</span>
<span>
{new Date(post.frontmatter.pubDate).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})}
</span>
<a href={post.url} class="underline pl-2">
{post.frontmatter.filetitle}.md
</a>
</li>
))
}
</ul>
</div>
</body>
Binary file added src/fonts/BerkeleyMono-Regular.woff
Binary file not shown.
20 changes: 20 additions & 0 deletions src/layouts/BlogLayout.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
import Header from "../components/blog/BlogHeader.astro";
import "../styles/global.css";
const { pageTitle } = Astro.props;
---

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<div class="blog-body">
<slot />
</div>
</body>
</html>
19 changes: 19 additions & 0 deletions src/layouts/MarkdownPostLayout.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
import BlogLayout from "./BlogLayout.astro";
import "../styles/blog-content.css";
const { title, pubDate } = Astro.props;
---

<BlogLayout pageTitle={title}>
<div class="post-details pb-4 sm:pb-8">
<h1>{title}</h1>
<p>{pubDate.slice(0, 10)}</p>
</div>

<div class="flex justify-center">
<div class="w-full sm:w-[8.5in]">
<slot />
</div>
</div>
</BlogLayout>
Loading

0 comments on commit fd2e2c6

Please sign in to comment.