redid it in astro

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.pnpmfile.cjs

@@ -0,0 +1,24 @@
+// .pnpmfile.cjs
+module.exports = {
+  hooks: {
+    readPackage(pkg) {
+      if (
+        pkg.name === "axios" ||
+        pkg.dependencies?.axios ||
+        pkg.devDependencies?.axios ||
+        pkg.peerDependencies?.axios ){
+        throw new Error(
+          `❌ BLOCKED: ${pkg.name} depends on axios`
+        );
+      }
+      if (pkg.dependencies) {
+        for (const dep of Object.keys(pkg.dependencies)) {
+          if (dep === "axios") {
+            throw new Error(`Blocked axios in ${pkg.name}`);
+          }
+        }
+      }
+      return pkg;
+    }
+  }
+};

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── 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.
+
+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.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

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

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^6.0.8"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/Footer.astro

@@ -0,0 +1,24 @@
+---
+const platform = "github";
+const username = "withastro";
+
+import Social from './Social.astro';
+---
+
+<footer>
+  <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
+
+  <Social platform="twitter" username="astrodotbuild" />
+  <Social platform="github" username="withastro" />
+  <Social platform="youtube" username="astrodotbuild" />
+</footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+</style>
+
+

src/components/Header.astro

@@ -0,0 +1,15 @@
+---
+import Menu from '../components/Menu.astro';
+import Navigation from '../components/Navigation.astro';
+---
+
+
+<header>
+    <nav>
+        <div>
+            <Menu />
+        </div>
+        <Navigation />
+    </nav>
+</header>
+        

src/components/Menu.astro

@@ -0,0 +1,5 @@
+---
+---
+<button aria-expanded="false" aria-controls="main-menu" class="menu">
+  Menu
+</button>

src/components/Navigation.astro

@@ -0,0 +1,7 @@
+---
+---
+<div id="main-menu" class="nav-links">
+<a href="/">Home</a>
+<a href="/about/">About</a>
+<a href="/blog/">Blog</a>
+</div>

src/components/Social.astro

@@ -0,0 +1,13 @@
+---
+const { platform, username } = Astro.props;
+---
+<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
+
+<style>
+  a {
+    padding: 0.5rem 1rem;
+    color: white;
+    background-color: #4c1d95;
+    text-decoration: none;
+  }
+</style>

src/layouts/BaseLayout.astro

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

src/layouts/MarkdownPostLayout.astro

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

src/pages/about.astro

@@ -0,0 +1,63 @@
+---
+
+
+import BaseLayout from '../layouts/BaseLayout.astro';
+import "../styles/global.css";
+
+const pageTitle = "About Me";
+
+const identity = {
+  firstName: "Sarah",
+  country: "Canada",
+  occupation: "Technical Writer",
+  hobbies: ["photography", "birdwatching", "baseball"],
+};
+
+const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+const happy = true;
+const finished = false;
+const goal = 3;
+const skillColor = "crimson";
+const fontWeight = "bold";
+const textCase = "uppercase";
+---
+<BaseLayout pageTitle={pageTitle}>
+		<style define:vars={{skillColor,fontWeight, textCase}}>
+      h1 {
+        color: purple;
+        font-size: 4rem;
+
+      }
+      .skill {
+    	color: var(--skillColor);
+    	font-weight: var(--fontWeight);
+    	text-transform: var(--textCase);
+  	}
+    </style>
+
+		<h2>... and my new Astro site!</h2>
+
+		<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
+
+		<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
+
+		<p>Here are a few facts about me:</p>
+		<ul>
+		  <li>My name is {identity.firstName}.</li>
+		  <li>I live in {identity.country} and I work as a {identity.occupation}.</li>
+		  {identity.hobbies.length >= 2 &&
+		    <li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
+		  }
+		</ul>
+		<p>My skills are:</p>
+		<ul>
+		  {skills.map((skill) => <li class="skill">{skill}</li>)}
+		</ul>
+
+		{happy && <p>I am happy to be learning Astro!</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>}
+</BaseLayout>
+

src/pages/blog.astro

@@ -0,0 +1,19 @@
+---
+
+
+import "../styles/global.css";
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+
+     <BaseLayout pageTitle={'Blog'} >
+        <div>
+            <h2>My Astro Learning Blog</h2>
+        <p>This is where I will post about my journey learning Astro.</p>
+        <ul>
+            <li><a href="/posts/post-1/">Post 1</a></li>
+            <li><a href="/posts/post-2/">Post 2</a></li>
+            <li><a href="/posts/post-3/">Post 3</a></li>
+        </ul>
+        </div>
+    </BaseLayout>

src/pages/index.astro

@@ -0,0 +1,7 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = "Home Page";
+---
+<BaseLayout pageTitle={pageTitle}>
+  <h2>My awesome blog subtitle</h2>
+</BaseLayout>

src/pages/posts/post-1.md

@@ -0,0 +1,26 @@
+---
+layout: '../../layouts/MarkdownPostLayout.astro'
+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/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["astro", "blogging", "learning in public"]
+---
+
+
+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.

src/pages/posts/post-2.md

@@ -0,0 +1,11 @@
+---
+title: My Second Blog Post
+author: Astro Learner
+description: "After learning some Astro, I couldn't stop!"
+image:
+    url: "https://docs.astro.build/assets/arc.webp"
+    alt: "The Astro logo on a dark background with a purple gradient arc."
+pubDate: 2022-07-08
+tags: ["astro", "blogging", "learning in public", "successes"]
+---
+After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

src/pages/posts/post-3.md

@@ -0,0 +1,11 @@
+---
+title: My Third Blog Post
+author: Astro Learner
+description: "I had some challenges, but asking in the community really helped!"
+image:
+    url: "https://docs.astro.build/assets/rays.webp"
+    alt: "The Astro logo on a dark background with rainbow rays."
+pubDate: 2022-07-15
+tags: ["astro", "learning in public", "setbacks", "community"]
+---
+It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!

src/scripts/menu.js

@@ -0,0 +1,6 @@
+const menu = document.querySelector('.menu');
+
+menu?.addEventListener('click', () => {
+  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+  menu.setAttribute('aria-expanded', `${!isExpanded}`);
+});

src/styles/global.css

@@ -0,0 +1,74 @@
+html {
+  background-color: #f1f5f9;
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 80ch;
+  padding: 1rem;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 1rem 0;
+  font-size: 2.5rem;
+}
+
+/* nav styles */
+.menu {
+  background-color: #0d0950;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
+}
+:has(.menu[aria-expanded="true"]) .nav-links {
+  display: unset;
+}
+.nav-links {
+  width: 100%;
+  display: none;
+  margin: 0;
+}
+
+.nav-links a {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #0d0950;
+}
+
+.nav-links a:hover,
+.nav-links a:focus {
+  background-color: #ff9776;
+}
+
+@media screen and (min-width: 636px) {
+  .nav-links {
+    margin-left: 5em;
+    display: block;
+    position: static;
+    width: auto;
+    background: none;
+  }
+
+  .nav-links a {
+    display: inline-block;
+    padding: 15px 20px;
+  }
+  .menu {
+    display: none;
+  }
+}
+

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

whatIsVfpmedia.txt

@@ -0,0 +1,54 @@
+vfp media is a service built for artists and makers by artists and makers. Our goal is to support artists in their mission to make their
+artistic endeavors viable and profitable. We support artists and makers by providing ecommerce, and portfolios for 10 dollars + per month.
+
+at vfp media, we Believe Art is for Humans and should be made by humans. We are strongly against the use of AI in digital art, and 3d art as well, 
+we encourage the use of making things by hand or using
+non AI technology to produce products, which is why we have a vetting process designed to make sure artists are and continue to create using
+their own creative genius. we go through every step to make sure art is protected, using nightshade to poision models and monitor suspicious traffic
+to find potential AI artist users. the more real artists we have the better we can seperate the legitamite artists from the prompters using every
+piece of data possible to weaponize it against AI.
+
+One of the main reasons to create this website was to help make artists independant of third party platforms. in the age of AI creating a website
+is now easier than ever. however not everyone has the time or wants to dedicate themselves to learning how web technology works. artists are then
+forced to outsource it to other companies who provide all in one solutions and make it easy and attractive such that they can take everything away, 
+etsy will nickel and dime you for just hosting products on your website. at vfpmedia, we only ask that you use modern compression using webpng, and keep your 
+inventory less than a few hundred products, videos are fine too. just keep them under a minute, and use webm.
+
+etsy, square and shopify will also charge 20+ dollars for something that a simple payment processing api can be down in a few hours by someone whos done this 
+several times before. word press is a complicated solution and can possibly work as a free option using woo commerce,
+however vfpmedia has technology already in use that can be retrofitted and redesigned 
+to fit most ecommerce, portfolio, and blogging situations, that are much faster and uses more modern technology than wordpress.
+as someone who has breifly worked in wordpress there is no shortage of jobs asking for page speed requirements. our solution is lightweight, clean and responsive.   
+
+how does this service work?
+
+first if you have a website, you give us your website, and domain name, and we work with you to migrate it to our personal webservers. you only help us pay the rent and
+keep our lights on to run the business. our goal is to use the profits and reinvest the into advertising to grow into a community of real artists to be enjoyed by
+real people. we will most likely convert your website to run on node.js, but if you insist on keeping the original website technology, and just use our service as managed
+hosting we may need to give you special provisions for that which would increase the cost, or potentially give you a private server also increasing your costs. the costs
+would be negated if you used node.js, and used the xxx.vfpmedia.com subdomain as this reduces the amount of complexity we deal with.
+
+once your site is migrated, we simply make sure it stays running for as long as you keep paying for it. we will have a ticket system to which you can email to 
+vfpmedia@airmail.cc if you have any issues or need help. Expect a timely response within 24 hours and in the case of wanting us to build new features for your 
+store or leave issues related to the node.js store vfpmedia@airmail.cc is a valid place as well. and in the future a matrix chat will be added for vfpmedia 
+clients and workers.
+
+if you don't have a website, a basic blog, portfolio, ecommerce,website will be provided for you at no cost, and a free subdomain of your choosing.
+(i.e. artistnamehere.vfpmedia.com) at this time we are only working with artists we know in meat space in Kansas. we will set you up with stripe, and you will then
+be able to take payments online with your store, as long as you update inventory. (website dashboard and hosting dashboard in the works..)
+so long as you pay use 10 dollars per month your web presence and store will be there. much like shopify or any other hosting service. website customization will be 
+you. we recommend using qwen or gemma AI to help you design elements if possible. should you need our help with design, we can help at 25/hr though since i am one person
+i would easily be booked and would probably hire it out to a fiverr person or you could as well.
+
+we may eventually  provide customization of the website with a builder, but were betting the AI future will make websites easy to make and thus we want artists to feel
+free to experiment with their websites and share hosting with us much like we would share rent together.
+
+Status: ALPHA;
+
+Roadmap.
+
+We hope you'll join us.
+
+are you tired of Etsy fees and costly store fees and paying almost 100 dollars per month just to keep your business alive on the internet? work with us, and we'll let
+you do what you do best. creating content that enriches the lives of others while not being bled out like pig for your money. all you have to do is send us an email 
+and we'll send you updates about VFP media.