Replaced web folder
This commit is contained in:
parent
061a9d9bc6
commit
8e433c3250
GPG key ID:
955C0660072F691F
29 changed files with 1895 additions and 5193 deletions
21
web/src/App.vue
Normal file
21
web/src/App.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png" />
|
||||
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
BIN
web/src/assets/logo.png
Normal file
BIN
web/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
65
web/src/components/HelloWorld.vue
Normal file
65
web/src/components/HelloWorld.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
let test = ref("yeet")
|
||||
|
||||
fetch("/api/users").then(
|
||||
res => {
|
||||
if (!res.ok) return Promise.reject()
|
||||
|
||||
return res.json()
|
||||
}
|
||||
).then(
|
||||
json => test.value = json
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<p>{{ test }}</p>
|
||||
|
||||
<p>
|
||||
Recommended IDE setup:
|
||||
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
|
||||
</p>
|
||||
|
||||
<p>See <code>README.md</code> for more information.</p>
|
||||
|
||||
<p>
|
||||
<a href="https://vitejs.dev/guide/features.html" target="_blank">
|
||||
Vite Docs
|
||||
</a>
|
||||
|
|
||||
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
|
||||
</p>
|
||||
|
||||
<button type="button" @click="count++">count is: {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test hot module replacement.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eee;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
color: #304455;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script lang="ts">
|
||||
|
||||
console.log("sup");
|
||||
let movies = [];
|
||||
|
||||
fetch("/api/movies").then(res => res.json()).then(res => {
|
||||
movies = res;
|
||||
console.log(movies);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each movies as { id, name, year }, i}
|
||||
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
|
||||
{i + 1}: {name} - {year}
|
||||
</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script lang="ts">
|
||||
let count = 0;
|
||||
|
||||
function add() {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
function subtract() {
|
||||
count -= 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="svelte" class="counter">
|
||||
<button on:click={subtract}>-</button>
|
||||
<pre>{ count }</pre>
|
||||
<button on:click={add}>+</button>
|
||||
</div>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
---
|
||||
<article>
|
||||
<div class="banner">
|
||||
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<Markdown>
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ ├── robots.txt
|
||||
│ └── favicon.ico
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Tour.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.
|
||||
</Markdown>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>👀 Want to learn more?</h2>
|
||||
<p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<style>
|
||||
article {
|
||||
padding-top: 2em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
section {
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.banner {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
background: var(--color-light);
|
||||
padding: 1em 1.5em;
|
||||
padding-left: 0.75em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--color-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
.tree {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
code:not(.tree) {
|
||||
padding: 0.125em;
|
||||
margin: 0 -0.125em;
|
||||
}
|
||||
</style>
|
||||
8
web/src/env.d.ts
vendored
Normal file
8
web/src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<h1>huh</h1>
|
||||
<p>lol</p>
|
||||
<MirageTest />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
9
web/src/main.ts
Normal file
9
web/src/main.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { makeServer } from "./server"
|
||||
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
makeServer()
|
||||
}
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
import { createServer } from "miragejs"
|
||||
|
||||
createServer({
|
||||
routes() {
|
||||
this.namespace = "api"
|
||||
|
||||
this.get("/movies", () => {
|
||||
return {
|
||||
movies: [
|
||||
{ id: 1, name: "Inception", year: 2010 },
|
||||
{ id: 2, name: "Interstellar", year: 2014 },
|
||||
{ id: 3, name: "Dunkirk", year: 2017 },
|
||||
],
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
---
|
||||
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<ul id="nav-bar">
|
||||
<li class="nav-bar-item"><a href="/home">Home</a></li>
|
||||
<li class="nav-bar-item"><a href="/blog">Blog</a></li>
|
||||
<li class="nav-bar-item"><a href="/microblog">Microblog</a></li>
|
||||
<li class="nav-bar-item"><a href="/devlogs">Devlogs</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
ul#nav-bar {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
ul#nav-bar li {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li.nav-bar-item a {
|
||||
display: block;
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
li.nav-bar-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li.nav-bar-item a:hover {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
1
web/src/server.d.ts
vendored
Normal file
1
web/src/server.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
declare module 'server';
|
||||
27
web/src/server.js
Normal file
27
web/src/server.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// src/server.js
|
||||
import { createServer, Model } from "miragejs"
|
||||
|
||||
export function makeServer({ environment = "development" } = {}) {
|
||||
let server = createServer({
|
||||
environment,
|
||||
|
||||
models: {
|
||||
user: Model,
|
||||
},
|
||||
|
||||
seeds(server) {
|
||||
server.create("user", { name: "Bob" })
|
||||
server.create("user", { name: "Alice" })
|
||||
},
|
||||
|
||||
routes() {
|
||||
this.namespace = "api"
|
||||
|
||||
this.get("/users", (schema) => {
|
||||
return schema.users.all()
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return server
|
||||
}
|
||||
Reference in a new issue