chore(#150): add WIP components

druxt · Aug 22, 2021 · 803dd81 · 803dd81
1 parent 400d833
commit 803dd81
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 2 deletions.
diff --git a/docs/components/app/Header.vue b/docs/components/app/Header.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="w-full navbar">
+    <div class="flex-none">
+      <label for="sidebar" class="btn btn-square btn-ghost">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="inline-block w-6 h-6 stroke-current"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          ></path>
+        </svg>
+      </label>
+    </div>
+    <AppLogo class="flex-none h-8 mr-3" />
+    <div class="flex-1 px-2 mx-2">
+      <span class="text-lg font-bold">{{ title }}</span>
+    </div>
+    <div class="flex-none hidden lg:block">
+      <AppMenu class="horizontal" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/docs/components/app/Logo.vue b/docs/components/app/Logo.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    viewBox="0 0 452 342"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#3498DB"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
diff --git a/docs/components/app/Menu.vue b/docs/components/app/Menu.vue
@@ -0,0 +1,8 @@
+<template>
+  <ul class="menu">
+    <slot name="title" />
+    <li v-for="item of $store.state.menu" :key="item.path">
+      <NuxtLink class="rounded-btn" :to="item.path" v-text="item.title" />
+    </li>
+  </ul>
+</template>
diff --git a/docs/components/app/Sidebar.vue b/docs/components/app/Sidebar.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="p-4 overflow-y-auto w-80 bg-base-100">
+    <AppMenu>
+      <li slot="title" class="menu-title">
+        <span>Navigation</span>
+      </li>
+    </AppMenu>
+  </div>
+</template>
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <AppHeader title="DruxtJS" />
+    <div class="shadow bg-base-200 drawer h-screen">
+      <input id="sidebar" type="checkbox" class="drawer-toggle" />
+
+      <div class="flex flex-col drawer-content">
+        <Nuxt />
+      </div>
+      <div class="drawer-side">
+        <label for="sidebar" class="drawer-overlay"></label>
+        <AppSidebar />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/pages/api/_.vue b/docs/pages/api/_.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtContent :document="document" />
+  <NuxtContent class="container mx-auto" :document="document" />
 </template>
 
 <script>
@@ -17,4 +17,4 @@ export default {
     }
   },
 }
-</script>
+</script>
diff --git a/docs/pages/api/index.vue b/docs/pages/api/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>API</div>
+</template>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="bg-gray-100 border-b text-center">
+      <div class="container mx-auto py-15">
+        <AppLogo class="w-1/4 mx-auto" />
+        <h1 class="text-6xl my-10" v-text="title" />
+        <h2 class="text-3xl my-5" v-text="slogan" />
+        <button class="btn btn-primary btn-lg">Get started</button>
+      </div>
+    </div>
+
+    <div class="container flex flex-col lg:flex-row mx-auto my-10">
+      <div
+        v-for="(block, index) of blocks"
+        :key="index"
+        class="flex-1 h-32 card"
+      >
+        <h4 class="text-2xl mb-3" v-text="block.title" />
+        <p class="text-lg" v-text="block.content" />
+      </div>
+    </div>
+
+    <div class="bg-neutral p-4 text-neutral-content">
+      <blockquote class="container mx-auto text-2xl" v-text="quote" />
+    </div>
+
+    <div>
+      <h3>Title</h3>
+      <p>Text</p>
+    </div>
+
+    <div>
+      <h3>Title</h3>
+      <p>Text</p>
+    </div>
+
+    <div>
+      <h3>Title</h3>
+      <p>Text</p>
+    </div>
+
+    <div>
+      <h3>Title</h3>
+      <p>Text</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    title: "DruxtJS",
+    slogan:
+      "A Bridge between frameworks, Nuxt.js in the front, Drupal in the back.",
+    blocks: [
+      {
+        title: "Simplicity first",
+        content:
+          "The Druxt component connects Nuxt.js to your Drupal JSON:API.",
+      },
+      {
+        title: "Community built",
+        content: "Built by the community, for the community.",
+      },
+      {
+        title: "Decoupled Drupal sites",
+        content:
+          "The Site module brings decoupled Vue.js theming system to Drupal.",
+      },
+    ],
+    quote:
+      "DruxtJS provides an easy connection between a Drupal JSON:API backend and Nuxt.js frontend application.",
+  }),
+};
+</script>
diff --git a/docs/store/state.js b/docs/store/state.js
@@ -0,0 +1,9 @@
+export default () => ({
+  menu: [{
+    title: 'Home',
+    path: '/',
+  }, {
+    title: 'API',
+    path: '/api',
+  }]
+})