initial-commit
This commit is contained in:
nicwands
149
.gitignore
vendored
Normal file
149
.gitignore
vendored
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
# MacOS
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# VSCode
|
||||||
|
.vscode/
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# Cloudflare
|
||||||
|
.wrangler/
|
||||||
|
.dev.vars*
|
||||||
|
!.dev.vars.example
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Vercel
|
||||||
|
.vercel/
|
||||||
|
|
||||||
|
# Sentry Vite Plugin
|
||||||
|
.env.sentry-build-plugin
|
||||||
|
|
||||||
|
# aws-cdk
|
||||||
|
.cdk.staging
|
||||||
|
cdk.out
|
||||||
149
.prettierignore
Normal file
149
.prettierignore
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
# MacOS
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# VSCode
|
||||||
|
.vscode/
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# Cloudflare
|
||||||
|
.wrangler/
|
||||||
|
.dev.vars*
|
||||||
|
!.dev.vars.example
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Vercel
|
||||||
|
.vercel/
|
||||||
|
|
||||||
|
# Sentry Vite Plugin
|
||||||
|
.env.sentry-build-plugin
|
||||||
|
|
||||||
|
# aws-cdk
|
||||||
|
.cdk.staging
|
||||||
|
cdk.out
|
||||||
45
README.md
Normal file
45
README.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
Generated with [vike.dev/new](https://vike.dev/new) ([version 599](https://www.npmjs.com/package/create-vike/v/0.0.599)) using this command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create vike@latest --- --vue --prettier
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
- [Vike](#vike)
|
||||||
|
- [Plus files](#plus-files)
|
||||||
|
- [Routing](#routing)
|
||||||
|
- [SSR](#ssr)
|
||||||
|
- [HTML Streaming](#html-streaming)
|
||||||
|
|
||||||
|
## Vike
|
||||||
|
|
||||||
|
This app is ready to start. It's powered by [Vike](https://vike.dev) and [Vue](https://vuejs.org/guide/quick-start.html).
|
||||||
|
|
||||||
|
### Plus files
|
||||||
|
|
||||||
|
[The + files are the interface](https://vike.dev/config) between Vike and your code.
|
||||||
|
|
||||||
|
- [`+config.ts`](https://vike.dev/settings) — Settings (e.g. `<title>`)
|
||||||
|
- [`+Page.vue`](https://vike.dev/Page) — The `<Page>` component
|
||||||
|
- [`+data.ts`](https://vike.dev/data) — Fetching data (for your `<Page>` component)
|
||||||
|
- [`+Layout.vue`](https://vike.dev/Layout) — The `<Layout>` component (wraps your `<Page>` components)
|
||||||
|
- [`+Head.vue`](https://vike.dev/Head) - Sets `<head>` tags
|
||||||
|
- [`/pages/_error/+Page.vue`](https://vike.dev/error-page) — The error page (rendered when an error occurs)
|
||||||
|
- [`+onPageTransitionStart.ts`](https://vike.dev/onPageTransitionStart) and `+onPageTransitionEnd.ts` — For page transition animations
|
||||||
|
|
||||||
|
### Routing
|
||||||
|
|
||||||
|
[Vike's built-in router](https://vike.dev/routing) lets you choose between:
|
||||||
|
|
||||||
|
- [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.vue` file is located on the filesystem)
|
||||||
|
- [Route Strings](https://vike.dev/route-string)
|
||||||
|
- [Route Functions](https://vike.dev/route-function)
|
||||||
|
|
||||||
|
### SSR
|
||||||
|
|
||||||
|
SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all or specific pages.
|
||||||
|
|
||||||
|
### HTML Streaming
|
||||||
|
|
||||||
|
You can [enable/disable HTML streaming](https://vike.dev/stream) for all or specific pages.
|
||||||
67
assets/logo.svg
Normal file
67
assets/logo.svg
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
25
components/Content.vue
Normal file
25
components/Content.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<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
Normal file
11
components/Counter.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<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
Normal file
27
components/Link.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<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
Normal file
7
components/Logo.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<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
Normal file
15
components/Sidebar.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<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>
|
||||||
2392
package-lock.json
generated
Normal file
2392
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vike dev",
|
||||||
|
"build": "vike build",
|
||||||
|
"preview": "vike build && vike preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vike": "^0.4.255",
|
||||||
|
"vike-vue": "^0.9.11",
|
||||||
|
"vue": "^3.5.30"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.5",
|
||||||
|
"prettier": "^3.8.1",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"vite": "^7.3.1"
|
||||||
|
},
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
9
pages/+Head.vue
Normal file
9
pages/+Head.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<!-- https://vike.dev/Head -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<link rel="icon" :href="logoUrl" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import logoUrl from '../assets/logo.svg'
|
||||||
|
</script>
|
||||||
55
pages/+Layout.vue
Normal file
55
pages/+Layout.vue
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<!-- https://vike.dev/Layout -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
/* Page Transition Animation */
|
||||||
|
#page-content {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
body.page-transition #page-content {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
13
pages/+config.ts
Normal file
13
pages/+config.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import type { Config } from 'vike/types'
|
||||||
|
import vikeVue from 'vike-vue/config'
|
||||||
|
|
||||||
|
// Default config (can be overridden by pages)
|
||||||
|
// https://vike.dev/config
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// https://vike.dev/head-tags
|
||||||
|
title: 'My Vike App',
|
||||||
|
description: 'Demo showcasing Vike',
|
||||||
|
|
||||||
|
extends: [vikeVue],
|
||||||
|
} as Config
|
||||||
4
pages/+onPageTransitionEnd.ts
Normal file
4
pages/+onPageTransitionEnd.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export async function onPageTransitionEnd() {
|
||||||
|
console.log('Page transition end')
|
||||||
|
document.body.classList.remove('page-transition')
|
||||||
|
}
|
||||||
14
pages/+onPageTransitionStart.ts
Normal file
14
pages/+onPageTransitionStart.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
// https://vike.dev/onPageTransitionStart
|
||||||
|
|
||||||
|
import type { PageContextClient } from 'vike/types'
|
||||||
|
|
||||||
|
export async function onPageTransitionStart(
|
||||||
|
pageContext: Partial<PageContextClient>,
|
||||||
|
) {
|
||||||
|
console.log('Page transition start')
|
||||||
|
console.log(
|
||||||
|
'pageContext.isBackwardNavigation',
|
||||||
|
pageContext.isBackwardNavigation,
|
||||||
|
)
|
||||||
|
document.body.classList.add('page-transition')
|
||||||
|
}
|
||||||
17
pages/_error/+Page.vue
Normal file
17
pages/_error/+Page.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<h1>{{ heading }}</h1>
|
||||||
|
<p>{{ abortReason }}</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { usePageContext } from 'vike-vue/usePageContext'
|
||||||
|
|
||||||
|
const pageContext = usePageContext()
|
||||||
|
let { is404, abortReason } = pageContext
|
||||||
|
if (!abortReason) {
|
||||||
|
abortReason = is404
|
||||||
|
? 'This page could not be found.'
|
||||||
|
: 'Something went wrong.'
|
||||||
|
}
|
||||||
|
const heading = is404 ? 'Page Not Found' : 'Internal Error'
|
||||||
|
</script>
|
||||||
12
pages/index/+Page.vue
Normal file
12
pages/index/+Page.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<h1>My Vike app</h1>
|
||||||
|
<p>This page is:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Rendered to HTML.</li>
|
||||||
|
<li>Interactive. <Counter /></li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Counter from '../../components/Counter.vue'
|
||||||
|
</script>
|
||||||
15
pages/star-wars/@id/+Page.vue
Normal file
15
pages/star-wars/@id/+Page.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<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
Normal file
33
pages/star-wars/@id/+data.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
// 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
Normal file
23
pages/star-wars/index/+Page.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<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
Normal file
34
pages/star-wars/index/+data.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// 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
Normal file
10
pages/star-wars/types.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export type Movie = {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
release_date: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MovieDetails = Movie & {
|
||||||
|
director: string
|
||||||
|
producer: string
|
||||||
|
}
|
||||||
10
pages/todo/+Page.vue
Normal file
10
pages/todo/+Page.vue
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<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
Normal file
15
pages/todo/+data.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
// 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
Normal file
30
pages/todo/TodoList.vue
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<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>
|
||||||
11
prettier.config.js
Normal file
11
prettier.config.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* @see https://prettier.io/docs/configuration
|
||||||
|
* @type {import("prettier").Config}
|
||||||
|
*/
|
||||||
|
const config = {
|
||||||
|
tabWidth: 4,
|
||||||
|
semi: false,
|
||||||
|
singleQuote: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"strict": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "ES2022",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"noEmit": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true
|
||||||
|
},
|
||||||
|
"exclude": ["dist"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vike from 'vike/plugin'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vike(), vue()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user