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 { 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
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'https://osbm.dev',
|
site: 'https://osbm.dev',
|
||||||
trailingSlash: 'never',
|
trailingSlash: 'never',
|
||||||
output: 'static',
|
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"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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">
|
<!doctype html>
|
||||||
<h1>Welcome to my site</h1>
|
<html lang="en">
|
||||||
<p>This is a simple site built with Astro</p>
|
<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
|
<p>
|
||||||
|
Please forgive me for the design of this website. I am very new at this.
|
||||||
</Layout>
|
I will learn CSS and make it look better soon. I promise
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -3,25 +3,48 @@ html {
|
||||||
/* nerd font */
|
/* nerd font */
|
||||||
font-family: 'nerd-font';
|
font-family: 'nerd-font';
|
||||||
color: white;
|
color: white;
|
||||||
|
height: 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 80ch;
|
|
||||||
padding: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
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 {
|
h1 {
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
/* slighly purple but mostly white title */
|
|
||||||
color: rgb(200, 200, 255);
|
color: rgb(200, 200, 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue