takerofnotes/takerofnotes-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

barebones setup

Browse Source
This commit is contained in:
nicwands
2026-03-18 15:53:54 -04:00
parent d71274609d
commit cc641be16f
20 changed files with 47 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/+Head.vue
View File

@@ -1,9 +1,7 @@
<!-- https://vike.dev/Head -->
<template>
<link rel="icon" :href="logoUrl" />
<link rel="icon" href="/assets/favicon.png" />
</template>
<script setup lang="ts">
import logoUrl from '../assets/logo.svg'
</script>
<script setup lang="ts"></script>

29
pages/+Layout.vue
View File

@@ -2,22 +2,11 @@
<template>
<div class="layout">
<Sidebar>
<Logo />
<Link href="/"> Welcome </Link>
<Link href="/todo"> Todo </Link>
<Link href="/star-wars"> Data Fetching </Link>
</Sidebar>
<Content><slot /></Content>
<slot />
</div>
</template>
<script lang="ts" setup>
import Content from '../components/Content.vue'
import Link from '../components/Link.vue'
import Logo from '../components/Logo.vue'
import Sidebar from '../components/Sidebar.vue'
</script>
<script lang="ts" setup></script>
<style>
body {
@@ -35,15 +24,13 @@ a {
<style scoped>
.layout {
display: flex;
max-width: 900px;
margin: auto;
}
.content {
padding: 20px;
padding-bottom: 50px;
min-height: 100vh;
flex-grow: 1;
justify-content: center;
align-items: center;
height: 100vh;
background: #131313;
color: #ebebeb;
}
/* Page Transition Animation */
#page-content {
opacity: 1;

24
pages/index/+Page.vue
View File

@@ -1,12 +1,20 @@
<template>
<h1>My Vike app</h1>
<p>This page is:</p>
<ul>
<li>Rendered to HTML.</li>
<li>Interactive. <Counter /></li>
</ul>
<main class="splash">
<svg-wordmark />
</main>
</template>
<script setup lang="ts">
import Counter from '../../components/Counter.vue'
<script setup>
import SvgWordmark from '@/components/svg/Wordmark.vue'
</script>
<style>
main.splash {
.svg-wordmark {
width: 70%;
height: auto;
margin: auto;
display: block;
}
}
</style>

15
pages/star-wars/@id/+Page.vue
View File

@@ -1,15 +0,0 @@
<template>
<h1>{{ movie.title }}</h1>
Release Date: {{ movie.release_date }}
<br />
Director: {{ movie.director }}
<br />
Producer: {{ movie.producer }}
</template>
<script lang="ts" setup>
import { useData } from 'vike-vue/useData'
import type { Data } from './+data.js'
const { movie } = useData<Data>()
</script>

33
pages/star-wars/@id/+data.ts
View File

@@ -1,33 +0,0 @@
// https://vike.dev/data
import type { PageContextServer } from 'vike/types'
import { useConfig } from 'vike-vue/useConfig'
import type { MovieDetails } from '../types.js'
export type Data = Awaited<ReturnType<typeof data>>
export async function data(pageContext: PageContextServer) {
// https://vike.dev/useConfig
const config = useConfig()
const response = await fetch(
`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`,
)
let movie = (await response.json()) as MovieDetails
config({
// Set <title>
title: movie.title,
})
// We remove data we don't need because the data is passed to
// the client; we should minimize what is sent over the network.
movie = minimize(movie)
return { movie }
}
function minimize(movie: MovieDetails): MovieDetails {
const { id, title, release_date, director, producer } = movie
return { id, title, release_date, director, producer }
}

23
pages/star-wars/index/+Page.vue
View File

@@ -1,23 +0,0 @@
<template>
<h1>Star Wars Movies</h1>
<ol>
<li v-for="item in movies" :key="item.id">
<a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{
item.release_date
}})
</li>
</ol>
<p>
Source:
<a href="https://brillout.github.io/star-wars"
>brillout.github.io/star-wars</a
>.
</p>
</template>
<script lang="ts" setup>
import { useData } from 'vike-vue/useData'
import type { Data } from './+data.js'
const { movies } = useData<Data>()
</script>

34
pages/star-wars/index/+data.ts
View File

@@ -1,34 +0,0 @@
// https://vike.dev/data
import { useConfig } from 'vike-vue/useConfig'
import type { Movie, MovieDetails } from '../types.js'
export type Data = Awaited<ReturnType<typeof data>>
export async function data() {
// https://vike.dev/useConfig
const config = useConfig()
const response = await fetch(
'https://brillout.github.io/star-wars/api/films.json',
)
const moviesData = (await response.json()) as MovieDetails[]
config({
// Set <title>
title: `${moviesData.length} Star Wars Movies`,
})
// We remove data we don't need because the data is passed to the client; we should
// minimize what is sent over the network.
const movies = minimize(moviesData)
return { movies }
}
function minimize(movies: MovieDetails[]): Movie[] {
return movies.map((movie) => {
const { title, release_date, id } = movie
return { title, release_date, id }
})
}

10
pages/star-wars/types.ts
View File

@@ -1,10 +0,0 @@
export type Movie = {
id: string
title: string
release_date: string
}
export type MovieDetails = Movie & {
director: string
producer: string
}

10
pages/todo/+Page.vue
View File

@@ -1,10 +0,0 @@
<template>
<div>
<h1>To-do List</h1>
<TodoList />
</div>
</template>
<script lang="ts" setup>
import TodoList from './TodoList.vue'
</script>

15
pages/todo/+data.ts
View File

@@ -1,15 +0,0 @@
// https://vike.dev/data
import type { PageContextServer } from 'vike/types'
export type Data = Awaited<ReturnType<typeof data>>
export async function data(_pageContext: PageContextServer) {
// NOTE: This +data hook is only for demonstration — it doesn't actually retrieve data from a database.
// Go to https://vike.dev/new and select a database to scaffold an app with a persisted to-do list.
const todoItemsInitial = [
{ text: 'Buy milk' },
{ text: 'Buy strawberries' },
]
return { todoItemsInitial }
}

30
pages/todo/TodoList.vue
View File

@@ -1,30 +0,0 @@
<template>
<ul>
<li v-for="(item, index) in todoItems" :key="index">
{{ item.text }}
</li>
<li>
<form @submit.prevent="submitNewTodo()">
<input v-model="newTodo" type="text" />
<button type="submit">Add to-do</button>
</form>
</li>
</ul>
</template>
<script lang="ts" setup>
import type { Data } from './+data'
import { useData } from 'vike-vue/useData'
import { ref } from 'vue'
const { todoItemsInitial } = useData<Data>()
const todoItems = ref<{ text: string }[]>(todoItemsInitial)
const newTodo = ref('')
const submitNewTodo = async () => {
const text = newTodo.value
todoItems.value.push({ text })
newTodo.value = ''
}
</script>