tempblade/creator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Enrico Bühler 2023-04-20 12:08:05 +02:00
parent 4c79041548
commit d08e40c76e
24 changed files with 4836 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.gitignore vendored Normal file
View File

@ -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

4
.vscode/extensions.json vendored Normal file
View File

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

11
.vscode/launch.json vendored Normal file
View File

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

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"typescript.inlayHints.parameterNames.enabled": "all"
}

56
README.md
View File

@ -1,3 +1,55 @@
# creator # Astro Starter Kit: Basics
A browser based intro creation tool ```
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).

11
astro.config.ts Normal file
View File

@ -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()]
});

30
package.json Normal file
View File

@ -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"
}
}

10
postcss.config.cjs Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
plugins: {
"@unocss/postcss": {},
"postcss-preset-env": {
features: {
"nesting-rules": true,
},
},
},
};

9
public/favicon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

39
src/components/Cards/Highlight.astro Normal file
View File

@ -0,0 +1,39 @@
---
export interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<div class="container">
<div class="icon-container mb-8">
<slot name="icon" />
</div>
<h3 class="mb-2">{title}</h3>
<p>{description}</p>
</div>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
& p {
max-width: 300px;
line-height: 1.1;
text-align: center;
}
& .icon-container {
& svg {
height: 100%;
width: 100%;
}
}
}
</style>

21
src/components/Icons/Highlights/HighlightsIcon.astro Normal file
View File

@ -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<IconName, Promise<typeof import("*.svg")>> = {
resolution: import("./Icon_Resolution.svg?raw"),
smooth: import("./Icon_Smooth.svg?raw"),
local: import("./Icon_Local.svg?raw"),
};
const iconSrc = icons[name];
---
<SVG src={iconSrc} aria-label={name} />

4
src/components/Icons/Highlights/Icon_Local.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="66.5" cy="66.5" r="66.5" fill="#D9D9D9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M75 64.8956L90 53V75.3636L66.5 94L43 75.3636V53L56 63.3095L56 0H75L75 64.8956Z" fill="#161616"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

23
src/components/Icons/Highlights/Icon_Resolution.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:luminosity">
<rect x="0.00012207" y="59.0001" width="59" height="59" fill="white"/>
<rect x="59.0001" y="6.10352e-05" width="59" height="59" fill="#2D2D2D"/>
<rect x="59.0001" y="59.0001" width="59" height="59" fill="#737373"/>
</g>
<g style="mix-blend-mode:luminosity">
<rect y="29.5" width="29.5" height="29.5" fill="white"/>
<rect x="29.5" width="29.5" height="29.5" fill="#2D2D2D"/>
<rect x="29.5" y="29.5" width="29.5" height="29.5" fill="#737373"/>
</g>
<g style="mix-blend-mode:luminosity">
<rect y="15" width="15" height="15" fill="white"/>
<rect x="15" width="15" height="15" fill="#2D2D2D"/>
<rect x="15" y="15" width="15" height="15" fill="#737373"/>
</g>
<g style="mix-blend-mode:luminosity">
<rect y="7.5" width="7.5" height="7.5" fill="white"/>
<rect x="7.5" width="7.5" height="7.5" fill="#2D2D2D"/>
<rect x="7.5" y="7.5" width="7.5" height="7.5" fill="#737373"/>
<rect width="7.5" height="7.5" fill="#828282"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
src/components/Icons/Highlights/Icon_Smooth.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="66.5" cy="40" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.4"/>
<ellipse cx="66.5" cy="94" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.58"/>
<circle cx="67" cy="68" r="39" fill="#D9D9D9" fill-opacity="0.4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

70
src/components/Layout/Footer.astro Normal file
View File

@ -0,0 +1,70 @@
---
type NavigationItem = {
path: string;
label: string;
};
type NavigationGroup = {
title: string;
items: Array<NavigationItem>;
};
const tree: Array<NavigationGroup> = [
{
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",
},
],
},
];
---
<footer class="py-4">
<div class="m-auto flex flex-row flex-wrap gap-12 inner-container">
{
tree.map((group) => (
<div>
<h3 class="mb-2">{group.title}</h3>
<div class="flex flex-col">
{group.items.map((item) => (
<a href={item.path}>{item.label}</a>
))}
</div>
</div>
))
}
</div>
</footer>
<style>
footer {
background-color: var(--color-neutral-accent);
& .inner-container {
max-width: var(--content-max-width);
margin: auto;
padding: var(--padding-main);
}
}
</style>

48
src/components/Layout/Header.astro Normal file
View File

@ -0,0 +1,48 @@
---
import Logo from "components/Logo.astro";
---
<header id="main-header">
<div class="inner-container">
<Logo />
<button id="get-started-button" class="button">Get Started</button>
</div>
</header>
<script>
import { animate } from "motion";
import { ease } from "@unom/style";
const getStartedButton = document.getElementById("get-started-button");
const header = document.getElementById("main-header");
if (header) {
animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
}
if (getStartedButton) {
animate(
getStartedButton,
{ scale: [0, 1] },
{ ...ease.quart(0.6).out, delay: 0 }
);
}
</script>
<style lang="postcss">
header {
position: fixed;
width: 100%;
top: 2rem;
z-index: 99;
& .inner-container {
display: flex;
justify-content: space-between;
flex-direction: row;
border-radius: 100px;
margin: auto;
max-width: var(--content-max-width);
padding: var(--padding-main);
background-color: var(--color-neutral-accent);
}
}
</style>

42
src/components/Logo.astro Normal file
View File

@ -0,0 +1,42 @@
<a id="logo" class="block" href="/">
<h1 class="text-4xl leading-8 font-bold">
<span>p</span><span>l</span><span>a</span><span>y</span>
</h1>
</a>
<style>
a {
display: block;
overflow: visible;
}
h1 {
display: block;
padding: 4px;
margin-bottom: 0.25rem;
background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content;
&:hover {
-webkit-text-stroke: 1px #eee;
}
& span {
display: inline-block;
}
}
</style>
<script>
import { animate, stagger } from "motion";
import { ease } from "@unom/style";
const logoText = document.querySelectorAll("#logo h1")[0];
console.log(logoText);
animate(
logoText.children as any,
{ y: [-30, 0], opacity: [0, 1] },
{ ...ease.quint(0.7).out, delay: stagger(0.1) }
);
</script>

1
src/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="astro/client" />

116
src/layouts/Layout.astro Normal file
View File

@ -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;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<Header />
<slot />
<Footer />
</body>
</html>
<style is:global>
:root {
--font-main: "Gilroy", system-ui, sans-serif;
--font-size-s: 0.8rem;
--font-size-m: 1rem;
--font-size-l: 1.2rem;
--font-size-xl: 2.5rem;
--font-size-xxl: 3rem;
--color-neutral: #222;
--color-neutral-accent: #333;
--color-main: #eee;
--padding-main: 24px 48px;
--content-max-width: 1600px;
}
html {
font-family: system-ui, sans-serif;
color: var(--color-main);
background-color: var(--color-neutral);
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
h1 {
font-weight: 800;
font-size: var(--font-size-xxl);
}
h2 {
font-weight: 700;
font-size: var(--font-size-xl);
}
h3 {
font-weight: 600;
font-size: var(--font-size-l);
}
h4,
h5,
h6 {
font-weight: 500;
font-size: var(--font-size-m);
}
p {
max-width: 600px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-main);
line-height: 1;
}
p,
li,
button,
a {
font-family: var(--font-main);
}
.button {
background-color: #563795;
padding: 0.75rem 1.25rem;
border-radius: 30px;
transition: filter 0.1s linear;
font-weight: 600;
&:hover {
filter: brightness(0.8);
}
}
.default-section {
max-width: var(--content-max-width);
padding: var(--padding-main);
margin: auto;
}
</style>

78
src/pages/index.astro Normal file
View File

@ -0,0 +1,78 @@
---
import Layout from "layouts/Layout.astro";
import SectionHighlights from "sections/Start/Highlights.astro";
---
<Layout title="play by tempblade">
<main>
<section class="default-section" id="header">
<div class="heading-container">
<h1 class="my-4 font-bold">
Motion Graphics made easy, <br /> for free!
</h1>
<p>
Thats right! Create an intro, outro or other motion graphic elements
right in your browser for free. How is this possible? Through the
power of open source software!
</p>
</div>
<div class="illustration-container">
<svg viewBox="0 0 1000 1000">
<circle cx="500" cy="500" r="300"></circle>
</svg>
</div>
</section>
<SectionHighlights />
</main>
<script>
import { animate, stagger } from "motion";
import { ease } from "@unom/style";
const headingContainer = document.querySelectorAll(
"#header .heading-container"
)[0];
console.log(headingContainer);
animate(
headingContainer.children as any,
{ y: [50, 0], opacity: [0, 1] },
{ ...ease.quart(0.6).out, delay: stagger(0.1) }
);
window.sessionStorage.setItem("did_animation_run", "1");
</script>
<style>
#header {
height: 100vh;
display: flex;
flex-direction: column;
width: 100%;
& .heading-container {
display: flex;
flex-direction: column;
justify-content: center;
}
& .illustration-container {
width: 100%;
height: 100%;
& svg {
width: 100%;
height: 100%;
}
}
}
@screen 2xl {
#header {
flex-direction: row;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
}
</style>
</Layout>

40
src/sections/Start/Highlights.astro Normal file
View File

@ -0,0 +1,40 @@
---
import HighlightCard from "components/Cards/Highlight.astro";
import HighlightIcon from "components/Icons/Highlights/HighlightsIcon.astro";
---
<section class="default-section">
<HighlightCard
title="Local"
description="Unleash the power of any machine rocking a modern browser"
>
<HighlightIcon slot="icon" name="local" />
</HighlightCard>
<HighlightCard
title="Resolution"
description="Experience high fidelity motion graphics like never before"
>
<HighlightIcon slot="icon" name="resolution" />
</HighlightCard>
<HighlightCard
title="Smooth"
description="Our Animations range from 24-60FPS"
>
<HighlightIcon slot="icon" name="smooth" />
</HighlightCard>
</section>
<style>
section {
display: flex;
gap: 1rem;
flex-direction: column;
justify-content: space-around;
}
@screen l {
section {
flex-direction: row;
}
}
</style>

8
tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"jsx": "react-jsx",
"baseUrl": "src",
"jsxImportSource": "react"
}
}

16
uno.config.ts Normal file
View File

@ -0,0 +1,16 @@
import { defineConfig } from "unocss";
import presetMini from "@unocss/preset-mini";
export default defineConfig({
presets: [presetMini()],
theme: {
breakpoints: {
s: "576px",
m: "768px",
l: "992px",
xl: "1200px",
"2xl": "1400px",
"3xl": "1600px",
},
},
});

4172
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff