only beautifying remains
This commit is contained in:
parent
943ff969f3
commit
4df460d25f
15 changed files with 1254 additions and 42 deletions
|
|
@ -1,8 +1,26 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkMath from 'remark-math';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://osbm.dev',
|
||||
trailingSlash: 'never',
|
||||
output: 'static',
|
||||
// i18n: {
|
||||
// defaultLocale: "en",
|
||||
// locales: ["en", "tr", "ja"],
|
||||
// },
|
||||
integrations: [
|
||||
mdx(
|
||||
{
|
||||
remarkPlugins: [remarkMath],
|
||||
rehypePlugins: [rehypeKatex],
|
||||
}
|
||||
),
|
||||
sitemap(),
|
||||
],
|
||||
});
|
||||
|
|
|
|||
974
package-lock.json
generated
974
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,6 +10,10 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^4.16.7"
|
||||
"@astrojs/mdx": "^3.1.8",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"astro": "^4.16.7",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"remark-math": "^6.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
src/components/Footer.astro
Normal file
7
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<footer>
|
||||
<p> people are looking at this page right now, be cool</p>
|
||||
</footer>
|
||||
17
src/components/FormattedDate.astro
Normal file
17
src/components/FormattedDate.astro
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
interface Props {
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const { date } = Astro.props;
|
||||
---
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
</time>
|
||||
9
src/components/Header.astro
Normal file
9
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/" class="header-osbm">OSBM</a>
|
||||
<a href="/about" class="header-about">About</a>
|
||||
<a href="/blog" class="header-blog">Blog</a>
|
||||
</nav>
|
||||
</header>
|
||||
6
src/components/Metadata.astro
Normal file
6
src/components/Metadata.astro
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="osbm personal development and research website" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content='Astro' />
|
||||
17
src/content/blog/blog-number-one.mdx
Normal file
17
src/content/blog/blog-number-one.mdx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: 'First post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
heroImage: '/blog-placeholder-3.jpg'
|
||||
---
|
||||
|
||||
# Header
|
||||
|
||||
some text
|
||||
|
||||
|
||||
Some math
|
||||
|
||||
$$
|
||||
\frac{1}{2}
|
||||
$$
|
||||
16
src/content/config.ts
Normal file
16
src/content/config.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
// Type-check frontmatter using a schema
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
||||
52
src/layouts/BlogPost.astro
Normal file
52
src/layouts/BlogPost.astro
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
|
||||
import "../styles/global.css";
|
||||
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Metadata from "../components/Metadata.astro";
|
||||
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
|
||||
type Props = CollectionEntry<'blog'>['data'];
|
||||
|
||||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Metadata />
|
||||
<title>Blog Post</title>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<h1>Blog Post</h1>
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
|
||||
</div>
|
||||
<div class="prose">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<hr />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
20
src/pages/blog/[...slug].astro
Normal file
20
src/pages/blog/[...slug].astro
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content';
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
type Props = CollectionEntry<'blog'>;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<BlogPost {...post.data}>
|
||||
<Content />
|
||||
</BlogPost>
|
||||
54
src/pages/blog/index.astro
Normal file
54
src/pages/blog/index.astro
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
import "../../styles/global.css";
|
||||
|
||||
import Header from "../../components/Header.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import Metadata from "../../components/Metadata.astro";
|
||||
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Metadata />
|
||||
<title>Blogs</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<h1>Blog Overview</h1>
|
||||
<p>Here are some of my blog posts:</p>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<img
|
||||
width={720}
|
||||
height={360}
|
||||
src={post.data.heroImage}
|
||||
alt=""
|
||||
/>
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate
|
||||
date={post.data.pubDate}
|
||||
/>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +1,32 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import "../styles/global.css";
|
||||
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Metadata from "../components/Metadata.astro";
|
||||
---
|
||||
|
||||
<Layout title="osbm index">
|
||||
<h1>Welcome to my site</h1>
|
||||
<p>This is a simple site built with Astro</p>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Metadata />
|
||||
<title>osbm</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<h1>About myself</h1>
|
||||
|
||||
I am building this site.
|
||||
AI researcher, programmer, open-source enthusiast.
|
||||
<br />
|
||||
Github: <a href="https://github.com/osbm">osbm</a>
|
||||
Hugging Face: <a href="https://huggingface.co/osbm">osbm</a>
|
||||
|
||||
please see <a href="https://osmanbayram.com">osmanbayram.com</a> my current main page
|
||||
|
||||
</Layout>
|
||||
<p>
|
||||
Please forgive me for the design of this website. I am very new at this.
|
||||
I will learn CSS and make it look better soon. I promise
|
||||
</p>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,25 +3,48 @@ html {
|
|||
/* nerd font */
|
||||
font-family: 'nerd-font';
|
||||
color: white;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 80ch;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 90ch;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
}
|
||||
|
||||
/* there are special classes in a tags in hearder */
|
||||
header a {
|
||||
color: rgb(255, 255, 255);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
/* slighly purple but mostly white title */
|
||||
color: rgb(200, 200, 255);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue