diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 29 | ||||
| -rw-r--r-- | src/assets/logo.png | bin | 0 -> 6849 bytes | |||
| -rw-r--r-- | src/assets/logo.svg | 1 | ||||
| -rw-r--r-- | src/components/MainPage.vue | 131 | ||||
| -rw-r--r-- | src/main.js | 10 | ||||
| -rw-r--r-- | src/plugins/vuetify.js | 11 | ||||
| -rw-r--r-- | src/plugins/webfontloader.js | 17 |
7 files changed, 199 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..88ad076 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,29 @@ +<template> + <v-app> + <v-main> + <v-app-bar> + <template v-slot:prepend> + <v-app-bar-nav-icon></v-app-bar-nav-icon> + </template> + <v-app-bar-title>Otonashi</v-app-bar-title> + </v-app-bar> + <MainPage /> + </v-main> + </v-app> +</template> + +<script> +import MainPage from "./components/MainPage.vue"; + +export default { + name: "App", + + components: { + MainPage, + }, + + data: () => ({ + // + }), +}; +</script> diff --git a/src/assets/logo.png b/src/assets/logo.png Binary files differnew file mode 100644 index 0000000..f3d2503 --- /dev/null +++ b/src/assets/logo.png diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..145b6d1 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ +<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg> diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue new file mode 100644 index 0000000..4694510 --- /dev/null +++ b/src/components/MainPage.vue @@ -0,0 +1,131 @@ +<template> + <v-container> + <v-row class="text-center"> + <v-col cols="12"> + <v-img + :src="require('../assets/logo.svg')" + class="my-3" + contain + height="200" + /> + </v-col> + + <v-col class="mb-4"> + <h1 class="display-2 font-weight-bold mb-3"> + Welcome to the Vuetify 3 Beta + </h1> + + <p class="subheading font-weight-regular"> + For help and collaboration with other Vuetify developers, + <br />please join our online + <a href="https://community.vuetifyjs.com" target="_blank" + >Discord Community</a + > + </p> + </v-col> + + <v-col class="mb-5" cols="12"> + <h2 class="headline font-weight-bold mb-5">What's next?</h2> + + <v-row justify="center"> + <v-btn + v-for="(next, i) in whatsNext" + :key="i" + :href="next.href" + class="subheading mx-3" + target="_blank" + > + {{ next.text }} + </v-btn> + </v-row> + </v-col> + + <v-col class="mb-5" cols="12"> + <h2 class="headline font-weight-bold mb-5">Important Links</h2> + + <v-row justify="center"> + <a + v-for="(link, i) in importantLinks" + :key="i" + :href="link.href" + class="subheading mx-3" + target="_blank" + > + {{ link.text }} + </a> + </v-row> + </v-col> + + <v-col class="mb-5" cols="12"> + <h2 class="headline font-weight-bold mb-5">Ecosystem</h2> + + <v-row justify="center"> + <a + v-for="(eco, i) in ecosystem" + :key="i" + :href="eco.href" + class="subheading mx-3" + target="_blank" + > + {{ eco.text }} + </a> + </v-row> + </v-col> + </v-row> + </v-container> +</template> + +<script> +export default { + name: "MainPage", + + data: () => ({ + ecosystem: [ + { + text: "vuetify-loader", + href: "https://github.com/vuetifyjs/vuetify-loader", + }, + { + text: "github", + href: "https://github.com/vuetifyjs/vuetify", + }, + { + text: "awesome-vuetify", + href: "https://github.com/vuetifyjs/awesome-vuetify", + }, + ], + importantLinks: [ + { + text: "Chat", + href: "https://community.vuetifyjs.com", + }, + { + text: "Made with Vuetify", + href: "https://madewithvuejs.com/vuetify", + }, + { + text: "Twitter", + href: "https://twitter.com/vuetifyjs", + }, + { + text: "Articles", + href: "https://medium.com/vuetify", + }, + ], + whatsNext: [ + { + text: "Explore components", + href: "https://vuetifyjs.com", + }, + { + text: "Roadmap", + href: "https://vuetifyjs.com/introduction/roadmap/", + }, + { + text: "Frequently Asked Questions", + href: "https://vuetifyjs.com/getting-started/frequently-asked-questions", + }, + ], + }), +}; +</script> diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..04189aa --- /dev/null +++ b/src/main.js @@ -0,0 +1,10 @@ +import { createApp } from "vue"; +import App from "./App.vue"; +import vuetify from "./plugins/vuetify"; +import { loadFonts } from "./plugins/webfontloader"; + +loadFonts(); + +const app = createApp(App); + +app.use(vuetify).mount("#app"); diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js new file mode 100644 index 0000000..2cb3bef --- /dev/null +++ b/src/plugins/vuetify.js @@ -0,0 +1,11 @@ +// Styles +import "@mdi/font/css/materialdesignicons.css"; +import "vuetify/styles"; +import * as components from "vuetify/components"; +import * as directives from "vuetify/directives"; + +// Vuetify +import { createVuetify } from "vuetify"; + +export default createVuetify({ components, directives }); +// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides diff --git a/src/plugins/webfontloader.js b/src/plugins/webfontloader.js new file mode 100644 index 0000000..e86aa7d --- /dev/null +++ b/src/plugins/webfontloader.js @@ -0,0 +1,17 @@ +/** + * plugins/webfontloader.js + * + * webfontloader documentation: https://github.com/typekit/webfontloader + */ + +export async function loadFonts() { + const webFontLoader = await import( + /* webpackChunkName: "webfontloader" */ "webfontloader" + ); + + webFontLoader.load({ + google: { + families: ["Roboto:100,300,400,500,700,900&display=swap"], + }, + }); +} |
