chore: install and run prettier

This commit is contained in:
Ruidy 2024-12-31 14:16:29 +01:00
parent 6d488d8307
commit 5c62e71a64
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
15 changed files with 2740 additions and 1298 deletions

12
.prettier.mjs Normal file
View file

@ -0,0 +1,12 @@
/** @type {import("prettier").Config} */
export default {
plugins: ["prettier-plugin-astro"],
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
};

View file

@ -23,9 +23,11 @@ Inside of your Astro project, you'll see the following folders and files:
└── package.json └── package.json
``` ```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page
is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. There's nothing special about `src/components/`, but that's where we like to put
any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory. Any static assets, like images, can be placed in the `public/` directory.
@ -44,4 +46,5 @@ All commands are run from the root of the project, from a terminal:
## 👀 Want to learn more? ## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). Feel free to check [our documentation](https://docs.astro.build) or jump into our
[Discord server](https://astro.build/chat).

View file

@ -1,5 +1,5 @@
// @ts-check // @ts-check
import { defineConfig } from 'astro/config'; import { defineConfig } from "astro/config";
// https://astro.build/config // https://astro.build/config
export default defineConfig({}); export default defineConfig({});

View file

@ -12,5 +12,9 @@
"@astrojs/check": "^0.9.4", "@astrojs/check": "^0.9.4",
"astro": "^5.1.1", "astro": "^5.1.1",
"typescript": "^5.7.2" "typescript": "^5.7.2"
},
"devDependencies": {
"prettier": "^3.4.2",
"prettier-plugin-astro": "^0.14.1"
} }
} }

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,5 @@
--- ---
const { url, title } = Astro.props const { url, title } = Astro.props;
--- ---
<li><a href={url}>{title}</a></li> <li><a href={url}>{title}</a></li>

View file

@ -1,23 +1,27 @@
--- ---
import Social from "./Social.astro" import Social from "./Social.astro";
const platforms = [ const platforms = [
{ {
platform: "GitHub", platform: "GitHub",
username: "rjNemo", username: "rjNemo",
},{ },
platform: "LinkedIn", {
username: "ruidy-nemausat", platform: "LinkedIn",
} username: "ruidy-nemausat",
] },
const url = `https://ruidy.nemausat.com` ];
const url = `https://ruidy.nemausat.com`;
--- ---
<footer> <footer>
<p>© 2023 Ruidy</p> <p>© 2023 Ruidy</p>
{platforms.map(platform => ( {
<Social platform={platform.platform} username={platform.username}/> platforms.map((platform) => (
))} <Social platform={platform.platform} username={platform.username} />
<a href={url}>website</a> ))
}
<a href={url}>website</a>
</footer> </footer>
<style> <style>

View file

@ -1,6 +1,3 @@
---
---
<nav class="nav-links"> <nav class="nav-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/about">About</a> <a href="/about">About</a>

View file

@ -1,5 +1,5 @@
--- ---
const { platform, username } = Astro.props const { platform, username } = Astro.props;
--- ---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a> <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

View file

@ -1,27 +1,27 @@
--- ---
import "../styles/global.css" import "../styles/global.css";
import Footer from "../components/Footer.astro" import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro" import Header from "../components/Header.astro";
const {pageTitle} = Astro.props const { pageTitle } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title> <title>{pageTitle}</title>
</head> </head>
<body> <body>
<Header /> <Header />
<h1>{pageTitle}</h1> <h1>{pageTitle}</h1>
<slot/> <slot />
<Footer/> <Footer />
<script> <script>
import "../scripts/menu.js" import "../scripts/menu.js";
</script> </script>
</body> </body>
</html> </html>

View file

@ -1,11 +1,12 @@
--- ---
import BaseLayout from "./BaseLayout.astro" import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props const { frontmatter } = Astro.props;
--- ---
<BaseLayout pageTitle={frontmatter.title}> <BaseLayout pageTitle={frontmatter.title}>
<p>Published on: {frontmatter.pubDate.toString().slice(0, 10)}</p> <p>Published on: {frontmatter.pubDate.toString().slice(0, 10)}</p>
<p><em>{frontmatter.description}</em></p> <p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p> <p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} alt={frontmatter.image.alt} width="500"/> <img src={frontmatter.image.url} alt={frontmatter.image.alt} width="500" />
<slot/> <slot />
</BaseLayout> </BaseLayout>

View file

@ -1,8 +1,8 @@
--- ---
import "../styles/global.css" import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro" import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "About Me" const pageTitle = "About Me";
const identity = { const identity = {
firstName: "Ruidy", firstName: "Ruidy",
@ -10,7 +10,7 @@ const identity = {
occupation: "Software Developer", occupation: "Software Developer",
location: "Germany", location: "Germany",
interests: ["Astro", "Web Development", "Learning in Public"], interests: ["Astro", "Web Development", "Learning in Public"],
} };
const skills = [ const skills = [
"HTML", "HTML",
@ -21,12 +21,12 @@ const skills = [
"Node.js", "Node.js",
"Git", "Git",
"Astro", "Astro",
] ];
const happy = true const happy = true;
const finished = true const finished = true;
const goal = 3 const goal = 3;
const skillColor = "navy" const skillColor = "navy";
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
@ -36,28 +36,32 @@ const skillColor = "navy"
<h2>A few things about me:</h2> <h2>A few things about me:</h2>
<ul> <ul>
<li> I'm {identity.firstName}. </li> <li>I'm {identity.firstName}.</li>
<li>I'm {identity.age} years old.</li> <li>I'm {identity.age} years old.</li>
<li>I'm a {identity.occupation} in {identity.location}.</li> <li>I'm a {identity.occupation} in {identity.location}.</li>
<li>I'm interested in {identity.interests.join(", ")}.</li> <li>I'm interested in {identity.interests.join(", ")}.</li>
</ul> </ul>
<p> My skills are:</p> <p>My skills are:</p>
<ul> <ul>
{skills.map((skill) => ( {skills.map((skill) => <li class="skill">{skill}</li>)}
<li class="skill">{skill}</li>
))}
</ul> </ul>
{happy && <p>I am happy to be learning Astro!</p>} {happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>} {finished && <p>I finished this tutorial!</p>}
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>} {
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
)
}
</BaseLayout> </BaseLayout>
<style define:vars={{skillColor }}> <style define:vars={{ skillColor }}>
h1 { h1 {
color: purple; color: purple;
font-size: 4rem; font-size: 4rem;

View file

@ -1,18 +1,23 @@
--- ---
import "../styles/global.css" import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro" import BaseLayout from "../layouts/BaseLayout.astro";
import BLogPost from "../components/BLogPost.astro" import BLogPost from "../components/BLogPost.astro";
const pageTitle = "Blog posts" const pageTitle = "Blog posts";
const allPosts = Object.values(import.meta.glob("./posts/*.md",{eager:true})) const allPosts = Object.values(
import.meta.glob("./posts/*.md", { eager: true }),
);
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<p>This is a list of my blog posts.</p>
<p>This is a list of my blog posts.</p> <ul>
{
<ul> allPosts.map((post: any) => (
{allPosts.map((post:any )=> <BLogPost url={post.url} title={post.frontmatter.title}/>)} <BLogPost url={post.url} title={post.frontmatter.title} />
</ul> ))
}
</ul>
</BaseLayout> </BaseLayout>

View file

@ -1,9 +1,9 @@
--- ---
import BaseLayout from "../layouts/BaseLayout.astro" import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Orbital Orbit" const pageTitle = "Orbital Orbit";
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2> <h2>My awesome blog subtitle</h2>
</BaseLayout> </BaseLayout>

View file

@ -1,27 +1,35 @@
--- ---
import BLogPost from "../../components/BLogPost.astro"; import BLogPost from "../../components/BLogPost.astro";
import BaseLayout from "../../layouts/BaseLayout.astro" import BaseLayout from "../../layouts/BaseLayout.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = Object.values(import.meta.glob('../posts/*.md', { eager: true })); const posts = Object.values(
import.meta.glob("../posts/*.md", { eager: true }),
);
return [ return [
{params: {tag: "astro"}, props: {posts }}, { params: { tag: "astro" }, props: { posts } },
{ params: { tag: "successes" }, props:{ posts} }, { params: { tag: "successes" }, props: { posts } },
{ params: { tag: "community" } , props:{ posts} }, { params: { tag: "community" }, props: { posts } },
{ params: { tag: "blogging" }, props:{ posts} }, { params: { tag: "blogging" }, props: { posts } },
{ params: { tag: "setbacks" }, props:{ posts} }, { params: { tag: "setbacks" }, props: { posts } },
{ params: { tag: "learning in public" }, props:{ posts} }, { params: { tag: "learning in public" }, props: { posts } },
] ];
} }
const { tag } = Astro.params const { tag } = Astro.params;
const { posts } = Astro.props const { posts } = Astro.props;
const filteredPosts = posts.filter((post:any) => post.frontmatter.tags?.includes(tag)) const filteredPosts = posts.filter((post: any) =>
post.frontmatter.tags?.includes(tag),
);
--- ---
<BaseLayout pageTitle={`Posts tagged with ${tag}`}> <BaseLayout pageTitle={`Posts tagged with ${tag}`}>
<p>Posts tagged with {tag}</p> <p>Posts tagged with {tag}</p>
<ul> <ul>
{filteredPosts.map((post:any )=> <BLogPost url={post.url} title={post.frontmatter.title}/>)} {
filteredPosts.map((post: any) => (
<BLogPost url={post.url} title={post.frontmatter.title} />
))
}
</ul> </ul>
</BaseLayout> </BaseLayout>