feat: single-page landing site

fdm-monster · Nov 15, 2022 · 77f2952 · 77f2952
1 parent 25fdc81
commit 77f2952
Show file tree

Hide file tree

Showing 20 changed files with 904 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FDM Monster</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "fdm-monster-site",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mdi/font": "5.9.55",
+    "roboto-fontface": "*",
+    "vue": "^3.2.38",
+    "vuetify": "^3.0.0",
+    "webfontloader": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.3",
+    "typescript": "^4.0.0",
+    "vite": "^3.0.9",
+    "vite-plugin-vuetify": "^1.0.0-alpha.12",
+    "vue-tsc": "^1.0.9"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+    <v-main>
+      <HelloWorld />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
diff --git a/src/assets/logo2.svg b/src/assets/logo2.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="d-flex align-center text-center fill-height">
+      <v-img
+        contain
+        height="300"
+        src="src/assets/logo.svg"
+      />
+
+      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+
+      <h1 class="text-h2 font-weight-bold">FDM-Monster</h1>
+
+
+      <div class="mt-4 text-body-2">Are you ready to scale up your 3D Print farm using OctoPrint instances?</div>
+
+      <div class="py-14" />
+
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="auto">
+          <v-btn
+            href="https://discord.com/invite/mwA8uP8CMc"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-view-dashboard"
+              size="large"
+              start
+            />
+
+            Our Discord
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            color="primary"
+            href="https://github.com/fdm-monster/fdm-monster"
+            min-width="228"
+            rel="noopener noreferrer"
+            size="x-large"
+            target="_blank"
+            variant="flat"
+          >
+            <v-icon
+              icon="mdi-speedometer"
+              size="large"
+              start
+            />
+
+            Get your copy
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            href="https://octoprint.org/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-account-group"
+              size="large"
+              start
+            />
+
+            OctoPrint Community
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  //
+</script>
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,23 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+import vuetify from './plugins/vuetify'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app
+  .use(vuetify)
+  .mount('#app')
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -0,0 +1,12 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+import { loadFonts } from './webfontloader'
+
+export function registerPlugins () {
+  loadFonts()
+}
+
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
@@ -0,0 +1,27 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+    themes: {
+      dark: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})
diff --git a/src/plugins/webfontloader.ts b/src/plugins/webfontloader.ts
@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.ts
+ *
+ * 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'],
+    },
+  })
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vuetify"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,36 @@
+// Plugins
+import vue from '@vitejs/plugin-vue'
+import vuetify from 'vite-plugin-vuetify'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    vuetify({
+      autoImport: true,
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})