diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6d4c0aa --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# 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 diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..22a1505 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d642209 --- /dev/null +++ b/.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" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6df4d77 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.inlayHints.parameterNames.enabled": "all" +} \ No newline at end of file diff --git a/README.md b/README.md index a533c11..961e54e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,55 @@ -# creator +# Astro Starter Kit: Basics -A browser based intro creation tool \ No newline at end of file +``` +npm create astro@latest -- --template basics +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) + + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ └── Card.astro +│ ├── layouts/ +│ │ └── Layout.astro +│ └── 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:3000` | +| `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). diff --git a/astro.config.ts b/astro.config.ts new file mode 100644 index 0000000..3c518bb --- /dev/null +++ b/astro.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from "astro/config"; +import UnoCSS from "unocss/astro"; + +import react from "@astrojs/react"; + +// https://astro.build/config +export default defineConfig({ + integrations: [UnoCSS({ + injectReset: true + }), react()] +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..5c8dbdc --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "creator", + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/react": "^2.1.1", + "@types/react": "^18.0.21", + "@types/react-dom": "^18.0.6", + "@unom/style": "^0.2.14", + "astro": "^2.3.0", + "motion": "^10.15.5", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "@jasikpark/astro-svg-loader": "^0.1.0", + "@unocss/postcss": "^0.51.4", + "@unocss/preset-mini": "^0.51.4", + "@unocss/reset": "^0.51.4", + "postcss-preset-env": "^8.3.1", + "unocss": "^0.51.4" + } +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..6e2c775 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,10 @@ +module.exports = { + plugins: { + "@unocss/postcss": {}, + "postcss-preset-env": { + features: { + "nesting-rules": true, + }, + }, + }, +}; diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..f157bd1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/src/components/Cards/Highlight.astro b/src/components/Cards/Highlight.astro new file mode 100644 index 0000000..95a34fd --- /dev/null +++ b/src/components/Cards/Highlight.astro @@ -0,0 +1,39 @@ +--- +export interface Props { + title: string; + description: string; +} + +const { title, description } = Astro.props; +--- + +
+
+ +
+

{title}

+

{description}

+
+ + diff --git a/src/components/Icons/Highlights/HighlightsIcon.astro b/src/components/Icons/Highlights/HighlightsIcon.astro new file mode 100644 index 0000000..c8119b7 --- /dev/null +++ b/src/components/Icons/Highlights/HighlightsIcon.astro @@ -0,0 +1,21 @@ +--- +import SVG from "@jasikpark/astro-svg-loader"; + +type IconName = "resolution" | "smooth" | "local"; + +export interface Props { + name: IconName; +} + +const { name } = Astro.props; + +const icons: Record> = { + resolution: import("./Icon_Resolution.svg?raw"), + smooth: import("./Icon_Smooth.svg?raw"), + local: import("./Icon_Local.svg?raw"), +}; + +const iconSrc = icons[name]; +--- + + diff --git a/src/components/Icons/Highlights/Icon_Local.svg b/src/components/Icons/Highlights/Icon_Local.svg new file mode 100644 index 0000000..abbf1bd --- /dev/null +++ b/src/components/Icons/Highlights/Icon_Local.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Icons/Highlights/Icon_Resolution.svg b/src/components/Icons/Highlights/Icon_Resolution.svg new file mode 100644 index 0000000..9a4d085 --- /dev/null +++ b/src/components/Icons/Highlights/Icon_Resolution.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icons/Highlights/Icon_Smooth.svg b/src/components/Icons/Highlights/Icon_Smooth.svg new file mode 100644 index 0000000..61161d9 --- /dev/null +++ b/src/components/Icons/Highlights/Icon_Smooth.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Layout/Footer.astro b/src/components/Layout/Footer.astro new file mode 100644 index 0000000..35d48a4 --- /dev/null +++ b/src/components/Layout/Footer.astro @@ -0,0 +1,70 @@ +--- +type NavigationItem = { + path: string; + label: string; +}; + +type NavigationGroup = { + title: string; + items: Array; +}; + +const tree: Array = [ + { + title: "Overview", + items: [ + { + path: "/", + label: "Landing", + }, + { + path: "/blog", + label: "Blog", + }, + { + path: "/contact", + label: "Contact", + }, + ], + }, + { + title: "Legal", + items: [ + { path: "/legal/imprint", label: "Imprint" }, + { + path: "/legal/privacy-policy", + label: "Privacy Policy", + }, + ], + }, +]; +--- + +
+
+ { + tree.map((group) => ( +
+

{group.title}

+
+ {group.items.map((item) => ( + {item.label} + ))} +
+
+ )) + } +
+
+ + diff --git a/src/components/Layout/Header.astro b/src/components/Layout/Header.astro new file mode 100644 index 0000000..5d31ee8 --- /dev/null +++ b/src/components/Layout/Header.astro @@ -0,0 +1,48 @@ +--- +import Logo from "components/Logo.astro"; +--- + +
+
+ + +
+
+ + diff --git a/src/components/Logo.astro b/src/components/Logo.astro new file mode 100644 index 0000000..eb5be22 --- /dev/null +++ b/src/components/Logo.astro @@ -0,0 +1,42 @@ + + + diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..f964fe0 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..8174e25 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,116 @@ +--- +import Header from "components/Layout/Header.astro"; +import Footer from "components/Layout/Footer.astro"; + +export interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + +
+ +