From aa21a29dfcc782fa0d30c5fd7668fe82f223c3c3 Mon Sep 17 00:00:00 2001
From: lstoeferle <48953604+lstoeferle@users.noreply.github.com>
Date: Fri, 26 Feb 2021 10:05:10 +0100
Subject: [PATCH] Added more sections to the demo

---
 src/App.vue                               | 24 +++---------
 src/components/CompositionSection.vue     | 24 ++++++++++++
 src/components/EnvSection.vue             | 42 +++++++++++++++++++++
 src/components/FeatureSection.vue         | 30 +++++++++++++++
 src/components/HeroSection.vue            | 31 ++++++++++++++++
 src/components/MyComponent.vue            | 31 ----------------
 src/components/shared/ButtonPrimary.vue   |  7 ++++
 src/components/shared/ButtonSecondary.vue |  7 ++++
 src/components/shared/Feature.vue         | 45 +++++++++++++++++++++++
 src/components/shared/Heading1.vue        |  7 ++++
 src/components/shared/Heading2.vue        |  7 ++++
 src/components/shared/Heading3.vue        |  7 ++++
 src/shims-tsx.d.ts                        |  4 ++
 tailwind.config.js                        |  6 +++
 tsconfig.json                             | 37 +++++++++++++++++++
 vite.config.js                            |  1 +
 16 files changed, 260 insertions(+), 50 deletions(-)
 create mode 100644 src/components/CompositionSection.vue
 create mode 100644 src/components/EnvSection.vue
 create mode 100644 src/components/FeatureSection.vue
 create mode 100644 src/components/HeroSection.vue
 delete mode 100644 src/components/MyComponent.vue
 create mode 100644 src/components/shared/ButtonPrimary.vue
 create mode 100644 src/components/shared/ButtonSecondary.vue
 create mode 100644 src/components/shared/Feature.vue
 create mode 100644 src/components/shared/Heading1.vue
 create mode 100644 src/components/shared/Heading2.vue
 create mode 100644 src/components/shared/Heading3.vue
 create mode 100644 tailwind.config.js
 create mode 100644 tsconfig.json

diff --git a/src/App.vue b/src/App.vue
index a056648..20e0746 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,8 @@
 <template>
-  <div id="app" class="pt-15 flex flex-col items-center">
-    <img alt="Vue logo" src="@/assets/logo.svg" width="200" />
-    <MyComponent />
-    <p class="mt-8">
-      {{ timestamp }}
-    </p>
+  <div id="app" class="pt-15 flex flex-col items-center dark:bg-gray-800">
+    <HeroSection />
+    <FeatureSection />
+    <EnvSection />
+    <CompositionSection />
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue-demi";
-import { useTimestamp } from "@vueuse/core";
-
-export default defineComponent({
-  name: "App",
-  setup: () => {
-    const { timestamp } = useTimestamp();
-    return { timestamp };
-  },
-});
-</script>
diff --git a/src/components/CompositionSection.vue b/src/components/CompositionSection.vue
new file mode 100644
index 0000000..3c5d4a3
--- /dev/null
+++ b/src/components/CompositionSection.vue
@@ -0,0 +1,24 @@
+<template>
+  <section
+    class="flex flex-col items-center text-gray-600 body-font container px-5 py-12 mx-auto"
+  >
+    <Heading2> Composition API </Heading2>
+    <p class="mt-8 dark:text-gray-400">
+      Switch to the dark side
+      <ButtonPrimary class="ml-4" @click.native="toggle">Toggle</ButtonPrimary>
+    </p>
+  </section>
+</template>
+
+<script lang="ts">
+import { useDark, useToggle } from "@vueuse/core";
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "CompositionSection",
+  setup: () => {
+    const toggle = useToggle(useDark());
+    return { toggle };
+  },
+});
+</script>
diff --git a/src/components/EnvSection.vue b/src/components/EnvSection.vue
new file mode 100644
index 0000000..f6eb9d4
--- /dev/null
+++ b/src/components/EnvSection.vue
@@ -0,0 +1,42 @@
+<template>
+  <section
+    class="flex flex-col items-center text-gray-600body-font container px-5 py-12 mx-auto"
+  >
+    <Heading2> Environment Variables </Heading2>
+    <p class="dark:text-gray-400">
+      To learn more about env variablels in Vite click
+      <a
+        class="text-purple-500"
+        target="_blank"
+        href="https://vitejs.dev/guide/env-and-mode.html"
+        >here</a
+      >
+    </p>
+    <div class="flex flex-row items-center mt-8">
+      <select
+        v-model="selectedKey"
+        class="bg-purple-500 text-white rounded-lg p-2 focus:outline-none"
+      >
+        <option v-for="key in Object.keys(env)" :key="key" :value="key">
+          {{ key }}
+        </option>
+      </select>
+      <p class="ml-8 dark:text-white">
+        {{ env[selectedKey] }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "EnvComponent",
+  setup: () => {
+    const env = import.meta.env;
+    const selectedKey = ref(Object.keys(env)[0] || "");
+    return { env, selectedKey };
+  },
+});
+</script>
diff --git a/src/components/FeatureSection.vue b/src/components/FeatureSection.vue
new file mode 100644
index 0000000..bfc7130
--- /dev/null
+++ b/src/components/FeatureSection.vue
@@ -0,0 +1,30 @@
+<template>
+  <section class="text-gray-600 body-font container px-5 py-12 mx-auto">
+    <div class="flex flex-col text-center w-full mb-8">
+      <Heading2> Installed Vite plugins </Heading2>
+    </div>
+    <div class="flex flex-wrap -m-4">
+      <div class="pr-4 py-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-vue2"
+          text="Vue 2 support for Vite"
+          url="https://github.com/underfin/vite-plugin-vue2"
+        />
+      </div>
+      <div class="p-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-components"
+          text="On demand components auto importing for Vite"
+          url="https://github.com/antfu/vite-plugin-components"
+        />
+      </div>
+      <div class="pl-4 py-4 md:w-1/3">
+        <Feature
+          title="vite-plugin-windicss"
+          text="Windi CSS for Vit"
+          url="https://github.com/windicss/vite-plugin-windicss"
+        />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
new file mode 100644
index 0000000..c9f99f1
--- /dev/null
+++ b/src/components/HeroSection.vue
@@ -0,0 +1,31 @@
+<template>
+  <section
+    class="text-gray-600 body-fontcontainer mx-auto flex py-12 md:flex-row flex-col items-center"
+  >
+    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <img
+        class="object-cover object-center rounded"
+        alt="Vite logo"
+        src="@/assets/logo.svg"
+      />
+    </div>
+    <div
+      class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center"
+    >
+      <Heading1> Vite - Vue 2 example </Heading1>
+      <p class="mb-8 leading-relaxed dark:text-gray-400">
+        This example project shows how to speed up your Vue 2 application with
+        the next generation frontend tooling Vite.
+      </p>
+      <div class="flex justify-center">
+        <a href="https://vitejs.dev/guide/" target="_blank">
+          <ButtonPrimary> Vite docs </ButtonPrimary>
+        </a>
+
+        <a href="https://vuejs.org/v2/guide/" target="_blank">
+          <ButtonSecondary> Vue docs </ButtonSecondary>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/MyComponent.vue b/src/components/MyComponent.vue
deleted file mode 100644
index e79c707..0000000
--- a/src/components/MyComponent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col items-center">
-    <h1 class="mt-8 mb-4 text-4xl font-bold">Hello Vite!</h1>
-    <p>Welcome to your Vite Vue2 App</p>
-
-    <h2 class="mt-8 mb-4 text-2xl font-semibold">Installed Vite plugins</h2>
-    <ul class="list-disc">
-      <li>
-        <a href="https://github.com/underfin/vite-plugin-vue2" target="_blank">
-          vite-plugin-vue2
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/antfu/vite-plugin-components"
-          target="_blank"
-        >
-          vite-plugin-components
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/windicss/vite-plugin-windicss"
-          target="_blank"
-        >
-          vite-plugin-windicss
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/src/components/shared/ButtonPrimary.vue b/src/components/shared/ButtonPrimary.vue
new file mode 100644
index 0000000..5b81f06
--- /dev/null
+++ b/src/components/shared/ButtonPrimary.vue
@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/src/components/shared/ButtonSecondary.vue b/src/components/shared/ButtonSecondary.vue
new file mode 100644
index 0000000..b5b8040
--- /dev/null
+++ b/src/components/shared/ButtonSecondary.vue
@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/src/components/shared/Feature.vue b/src/components/shared/Feature.vue
new file mode 100644
index 0000000..2a2e274
--- /dev/null
+++ b/src/components/shared/Feature.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="flex rounded-lg h-full bg-gray-100 p-8 flex-col items dark:bg-gray-700"
+  >
+    <Heading3>
+      {{ title }}
+    </Heading3>
+
+    <div class="flex flex-col flex-grow">
+      <p class="flex-grow leading-relaxed text-base dark:text-gray-400">
+        {{ text }}
+      </p>
+      <a
+        :href="url"
+        target="_blank"
+        class="mt-3 text-indigo-500 inline-flex items-center"
+        >Learn More
+        <svg
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          class="w-4 h-4 ml-2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M5 12h14M12 5l7 7-7 7"></path>
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "Feature",
+  props: {
+    title: { type: String, required: true },
+    text: { type: String, required: true },
+    url: { type: String, required: true },
+  },
+});
+</script>
diff --git a/src/components/shared/Heading1.vue b/src/components/shared/Heading1.vue
new file mode 100644
index 0000000..349048f
--- /dev/null
+++ b/src/components/shared/Heading1.vue
@@ -0,0 +1,7 @@
+<template>
+  <h1
+    class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h1>
+</template>
diff --git a/src/components/shared/Heading2.vue b/src/components/shared/Heading2.vue
new file mode 100644
index 0000000..a75a80c
--- /dev/null
+++ b/src/components/shared/Heading2.vue
@@ -0,0 +1,7 @@
+<template>
+  <h2
+    class="sm:text-3xl text-2xl font-medium title-font text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h2>
+</template>
diff --git a/src/components/shared/Heading3.vue b/src/components/shared/Heading3.vue
new file mode 100644
index 0000000..da0e4ac
--- /dev/null
+++ b/src/components/shared/Heading3.vue
@@ -0,0 +1,7 @@
+<template>
+  <h3
+    class="sm:text-xl text-lg font-medium title-font text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
index 2bcdf9f..4f05b19 100644
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
@@ -10,4 +10,8 @@ declare global {
       [elem: string]: any;
     }
   }
+
+  interface ImportMeta {
+    env: Record<any, string>;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..af0f4d3
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  darkMode: "class", // or 'media'
+  theme: {},
+  variants: {},
+  plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..2ff7543
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
index 659cf12..2166313 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,6 +9,7 @@ const config = defineConfig({
     alias: {
       "@": `${path.resolve(__dirname, "src")}`,
     },
+    dedupe: ["vue-demi"],
   },
 
   build: {