Idk, tryin' to make i18n compatible. Doesn't rly work.
This commit is contained in:
@@ -1,61 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
import Social from './Social.astro';
|
||||
---
|
||||
|
||||
<footer class="flex mt-4 gap-4">
|
||||
<Social platform="github" tld="com" username="blboun3"/>
|
||||
<Social platform="git.cyrilsebek" tld="cz" username="blboun3" />
|
||||
</footer>
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
---
|
||||
<div class="hamburger pr-[20px] cursor-pointer" >
|
||||
<span class="line block w-[40px] h-[5px] mb-10 bg-[#ff9776]"></span>
|
||||
<span class="line block w-[40px] h-[5px] mb-10 bg-[#ff9776]"></span>
|
||||
<span class="line block w-[40px] h-[5px] mb-10 bg-[#ff9776]"></span>
|
||||
</div>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
<div id="navigation" class="w-full bg-[#ff9776] hidden m-0 left-12 top-20">
|
||||
<a href="/" class="block text-center no-underline text-[1.2rem] font-[bold] uppercase px-0 py-2.5">Home</a>
|
||||
<a href="/blog/" class="block text-center no-underline text-[1.2rem] font-[bold] uppercase px-0 py-2.5">Blog</a>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
const { platform, tld, username } = Astro.props;
|
||||
---
|
||||
<a href={`https://${platform}.${tld}/${username}`} class="py-2 px-4 text-white bg-[#4c1d95]">{platform}</a>
|
||||
2
src/consts.js
Normal file
2
src/consts.js
Normal file
@@ -0,0 +1,2 @@
|
||||
export const SITE_TITLE = 'Astro Blog';
|
||||
export const SITE_DESCRIPTION = 'Welcome to my website!';
|
||||
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
@@ -1 +1,2 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Hamburger from '../components/Hamburger.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
lang: string;
|
||||
}
|
||||
|
||||
const { title, lang } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Hamburger />
|
||||
<Navigation />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
15
src/layouts/MainLayout.astro
Normal file
15
src/layouts/MainLayout.astro
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
const { title, description, lang } = Astro.props;
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content={description}>
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot/>
|
||||
</body>
|
||||
</html>
|
||||
0
src/pages/404.astro
Normal file
0
src/pages/404.astro
Normal file
19
src/pages/[lang]/index.astro
Normal file
19
src/pages/[lang]/index.astro
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
import { getLocaleByPath } from "astro:i18n";
|
||||
import MainLayout from "../../layouts/MainLayout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return ["en", "fr", "cs", "de"].map((lang) => {
|
||||
return { params: { lang } };
|
||||
});
|
||||
}
|
||||
---
|
||||
|
||||
<MainLayout title="sitetitle" description="sitedescription" lang={Astro.currentLocale}>
|
||||
<h1>Welcome</h1>
|
||||
<p>
|
||||
"homeP1"
|
||||
{Astro.url.toString()}
|
||||
{getLocaleByPath(Astro.currentLocale)}
|
||||
</p>
|
||||
</MainLayout>
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
<a href="/posts/post-1">Post 01</a>
|
||||
@@ -1,5 +1,13 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
import { getLocaleByPath } from "astro:i18n";
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
---
|
||||
<Layout title='Welcome!' lang='en'>
|
||||
</Layout>
|
||||
|
||||
<MainLayout title="sitetitle" description="sitedescription" lang="en">
|
||||
<h1>Welcome</h1>
|
||||
<p>
|
||||
"homeP1"
|
||||
{Astro.url.toString()}
|
||||
{getLocaleByPath("en")}
|
||||
</p>
|
||||
</MainLayout>
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: 'My First Blog Post'
|
||||
pubDate: 2022-07-01
|
||||
description: 'This is the first post of my new Astro blog.'
|
||||
author: 'Astro Learner'
|
||||
image:
|
||||
url: 'https://docs.astro.build/assets/full-logo-light.png'
|
||||
alt: 'The full Astro logo.'
|
||||
tags: ["astro", "blogging", "learning in public"]
|
||||
---
|
||||
# My First Blog Post
|
||||
|
||||
Published on: 2022-07-01
|
||||
|
||||
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
|
||||
|
||||
## What I've accomplished
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
16
src/rss.xml.js
Normal file
16
src/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('blog');
|
||||
return rss({
|
||||
title: SITE_TITLE,
|
||||
description: SITE_DESCRIPTION,
|
||||
site: context.site,
|
||||
items: posts.map((post) => ({
|
||||
...post.data,
|
||||
link: `/blog/${post.slug}/`,
|
||||
})),
|
||||
});
|
||||
}
|
||||
42
src/style/index.css
Normal file
42
src/style/index.css
Normal file
@@ -0,0 +1,42 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
/*
|
||||
Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins
|
||||
Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-000224-ffe500&fonts=Poppins-Poppins
|
||||
*/
|
||||
@layer base {
|
||||
:root {
|
||||
--color-bkg: 0deg, 0%, 94%;
|
||||
--color-content: 240deg, 4%, 9%;
|
||||
--color-primary: 54deg, 100%, 50%;
|
||||
--color-secondary: 237deg, 100%, 93%;
|
||||
--color-accent: 262deg, 73%, 47%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bkg: 0deg, 0%, 6%;
|
||||
--color-content: 240deg, 4%, 91%;
|
||||
--color-primary: 262deg, 77%, 44%;
|
||||
--color-secondary: 237deg, 100%, 7ˇ;
|
||||
--color-accent: 54deg, 100%, 50%;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--color-bkg: 0deg, 0%, 6%;
|
||||
--color-content: 240deg, 4%, 91%;
|
||||
--color-primary: 262deg, 77%, 44%;
|
||||
--color-secondary: 237deg, 100%, 7ˇ;
|
||||
--color-accent: 54deg, 100%, 50%;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--color-bkg: 0deg, 0%, 94%;
|
||||
--color-content: 240deg, 4%, 9%;
|
||||
--color-primary: 54deg, 100%, 50%;
|
||||
--color-secondary: 237deg, 100%, 93%;
|
||||
--color-accent: 262deg, 73%, 47%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user