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

BIN
assets/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 B

67
assets/logo.svg
View File

@@ -1,67 +0,0 @@
<svg class="hammer" width="41.217" height="41.217" version="1.1" viewBox="-50 -50 41.217 41.217" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask111">
<rect x="-19.21" y="-25.7" width="46.217" height="41.217" fill="url(#linearGradient115)"/>
</mask>
<linearGradient id="linearGradient115" x1="-25.395" x2="-25.395" y1="-9.3005" y2="-18.03" gradientTransform="matrix(1.0589 0 0 .94436 30.79 24.3)" gradientUnits="userSpaceOnUse">
<stop offset="0"/>
<stop stop-color="#fff" offset="1"/>
</linearGradient>
</defs>
<g transform="translate(-33.29,-24.3)" mask="url(#mask111)">
<g stroke-linecap="round" stroke-linejoin="round">
<path d="m-8.511-10.449 1.126 4.064 2.707-2.765z" fill="#ababab"/>
<path d="m-2.273-24.496-6.238 14.047 3.833 1.299 6.238-14.048z" fill="#949494"/>
<path d="m-2.273-24.496 3.465-1.204.368 2.502z" fill="#ababab"/>
<path d="m17.511 4.674-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
</g>
<g stroke="#878787">
<path d="m-9.045 20.369-1.169 2.634" stroke-width="9.6"/>
<path d="m-12.418 23.191c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.709 5.493 1.862s2.326 2.132 1.087 2.238c-1.24.106-3.643-.709-5.494-1.862" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m-11.248 20.557c1.851 1.153 4.254 1.968 5.493 1.862 1.24-.106.764-1.085-1.086-2.238-1.851-1.153-4.254-1.968-5.494-1.862-1.239.106-.764 1.085 1.087 2.238" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g stroke-linecap="round" stroke-linejoin="round">
<path d="m-16.71-9.748 8.199-.701 1.126 4.064-8.199.701z" fill="#949494"/>
<path d="m23.749-9.373-6.238 14.047-22.189-13.824 6.238-14.048z" fill="#757575"/>
<path d="m10.271-16.073 3.751 3.534c.062.058.083.156.052.238l-1.95 5.128c-.046.121-.18.153-.268.065l-1.024-1.03c-.095-.096-.242-.048-.275.091l-.516 2.152c-.034.145-.191.19-.284.082 0 0-.606-.696-.606-.696-.094-.108-.25-.063-.285.082l-.803 3.384c-.05.212-.317.178-.336-.043l-.014-.147s.058-9.892.058-9.892c.001-.165.165-.253.277-.148l1.077 1.009c.101.095.25.034.274-.111l.597-3.587c.025-.146.174-.206.275-.111z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
</g>
<g stroke="#808080">
<path d="m-8.362 18.833-.39.878" stroke-width="9.1"/>
<path d="m-10.956 19.899c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.708 5.493 1.861s2.326 2.132 1.087 2.238c-1.24.106-3.643-.708-5.494-1.861" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
<path d="m-10.566 19.021c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.494-1.861c-1.239.106-.764 1.085 1.087 2.238" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
</g>
<path d="m-16.71-9.748 8.199-.701 6.238-14.047-8.199.701z" fill="#757575" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m-1.754 3.951-6.511 14.662" stroke="#91512b" stroke-width="8.6"/>
<g stroke-linecap="round" stroke-linejoin="round">
<path d="m-10.468 18.801c-1.851-1.153-2.327-2.132-1.087-2.238 1.239-.106 3.643.709 5.493 1.862 1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.862" fill="#91512b"/>
<path d="m-3.958 4.139c1.851 1.153 4.254 1.968 5.494 1.862 1.239-.106.764-1.086-1.087-2.239s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#91512b"/>
<path d="m1.192-25.7.368 2.502 22.189 13.825-.368-2.503z" fill="#949494"/>
<path d="m-10.472-23.795 8.199-.701 3.465-1.204-8.199.701z" fill="#949494"/>
</g>
<g stroke="#6e6e6e">
<path d="m-.487 1.097-1.17 2.634" stroke-width="9.1"/>
<path d="m-3.86 3.92c-1.851-1.153-2.326-2.132-1.087-2.238s3.643.708 5.493 1.861c1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.861" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
<path d="m-2.691 1.286c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
</g>
<g stroke-linecap="round" stroke-linejoin="round">
<path d="m18.269 6.236-3.465 1.204 2.707-2.766z" fill="#ababab"/>
<path d="m14.804 7.44-8.199.701-22.189-13.825 8.199-.701z" fill="#757575"/>
<path d="m-16.71-9.748 1.126 4.064-.367-2.502z" fill="#ababab"/>
<path d="m24.507-7.812-6.238 14.048-.758-1.562 6.238-14.047z" fill="#949494"/>
<path d="m-10.472-23.795-6.238 14.047.759 1.562 6.237-14.048z" fill="#949494"/>
<path d="m24.507-7.812-1.126-4.064.368 2.503z" fill="#ababab"/>
<path d="m23.381-11.876-8.199.701-22.189-13.824 8.199-.701z" fill="#757575"/>
<path d="m-10.472-23.795 3.465-1.204-2.707 2.765z" fill="#ababab"/>
<path d="m18.269 6.236-8.199.701-3.465 1.204 8.199-.701z" fill="#949494"/>
<path d="m-15.951-8.186.367 2.502 22.189 13.825-.367-2.503z" fill="#949494"/>
<path d="m18.269 6.236-8.199.701 6.238-14.048 8.199-.701z" fill="#757575"/>
<path d="m-9.714-22.234-6.237 14.048 22.189 13.824 6.237-14.047z" fill="#757575"/>
<path d="m2.545-12.79-4.583-1.659c-.076-.027-.156.008-.195.085 0 0-2.463 4.808-2.463 4.808-.058.114-.005.263.107.298l1.296.416c.122.039.171.21.093.321 0 0-1.205 1.722-1.205 1.722-.081.116-.024.294.105.325l.827.196c.128.031.186.209.104.325 0 0-1.899 2.701-1.899 2.701-.118.169.056.41.22.304l.11-.07 6.849-5.661c.115-.095.083-.304-.054-.354l-1.312-.48c-.123-.045-.165-.224-.078-.331 0 0 2.157-2.615 2.157-2.615.087-.106.045-.286-.079-.331z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
<path d="m24.507-7.812-8.199.701-1.126-4.064 8.199-.701z" fill="#949494"/>
<path d="m15.182-11.175-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
<path d="m10.07 6.937-3.465 1.204-.367-2.503z" fill="#ababab"/>
<path d="m16.308-7.111-6.238 14.048-3.832-1.299 6.237-14.047z" fill="#949494"/>
<path d="m16.308-7.111-1.126-4.064-2.707 2.766z" fill="#ababab"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

25
components/Content.vue
View File

@@ -1,25 +0,0 @@
<template>
<div id="page-container">
<div
id="page-content"
style="padding: 20px; padding-bottom: 50px; min-height: 100vh"
>
<slot />
</div>
</div>
</template>
<style>
/* Page Transition Animation */
body.page-transition #page-content {
opacity: 0;
}
</style>
<style scoped>
/* Page Transition Animation */
#page-content {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
</style>

11
components/Counter.vue
View File

@@ -1,11 +0,0 @@
<template>
<button type="button" @click="state.count++">
Counter {{ state.count }}
</button>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const state = reactive({ count: 0 })
</script>

27
components/Link.vue
View File

@@ -1,27 +0,0 @@
<template>
<a :class="{ active: isActive }">
<slot />
</a>
</template>
<script lang="ts" setup>
import { usePageContext } from 'vike-vue/usePageContext'
import { computed, useAttrs } from 'vue'
const pageContext = usePageContext()
const { href } = useAttrs()
const isActive = computed(() => {
const { urlPathname } = pageContext
return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
})
</script>
<style scoped>
a {
padding: 2px 10px;
margin-left: -10px;
}
a.active {
background-color: #eee;
}
</style>

7
components/Logo.vue
View File

@@ -1,7 +0,0 @@
<template>
<div style="margin-top: 20px; margin-bottom: 10px">
<a href="/">
<img src="../assets/logo.svg" height="64" width="64" />
</a>
</div>
</template>

15
components/Sidebar.vue
View File

@@ -1,15 +0,0 @@
<template>
<div
id="sidebar"
style="
padding: 20px;
flex-shrink: 0;
display: flex;
flex-direction: column;
line-height: 1.8em;
border-right: 2px solid #eee;
"
>
<slot />
</div>
</template>

15
components/svg/Wordmark.vue Normal file
View File

File diff suppressed because one or more lines are too long

6
pages/+Head.vue
View File

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

29
pages/+Layout.vue
View File

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

24
pages/index/+Page.vue
View File

@@ -1,12 +1,20 @@
<template> <template>
<h1>My Vike app</h1> <main class="splash">
<p>This page is:</p> <svg-wordmark />
<ul> </main>
<li>Rendered to HTML.</li>
<li>Interactive. <Counter /></li>
</ul>
</template> </template>
<script setup lang="ts"> <script setup>
import Counter from '../../components/Counter.vue' import SvgWordmark from '@/components/svg/Wordmark.vue'
</script> </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>

6
vite.config.ts
View File

@@ -1,7 +1,13 @@
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vike from 'vike/plugin' import vike from 'vike/plugin'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
export default defineConfig({ export default defineConfig({
plugins: [vike(), vue()], plugins: [vike(), vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./', import.meta.url)),
},
},
}) })