Skip to content

Commit

Permalink
chore(#150): update API components
Browse files Browse the repository at this point in the history
  • Loading branch information
Decipher committed Aug 28, 2021
1 parent 5a8b523 commit 629bb1b
Show file tree
Hide file tree
Showing 10 changed files with 174 additions and 36 deletions.
39 changes: 36 additions & 3 deletions docs/components/app/Header.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="w-full navbar bg-neutral text-neutral-content">
<div class="flex-none">
<div class="flex-none" :class="{ 'lg:hidden': $route.path !== '/' }">
<label for="sidebar" class="btn btn-square btn-ghost">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -17,12 +17,20 @@
</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" />
<ul class="horizontal menu">
<li v-for="(link, key) of links" :key="key">
<component
:is="link.component"
class="rounded-btn"
v-bind="link.props"
v-text="link.text"
/>
</li>
</ul>
</div>
</div>
</template>
Expand All @@ -35,5 +43,30 @@ export default {
required: true,
},
},
data: () => ({
links: [
{
component: "NuxtLink",
text: "Home",
props: { to: "/" },
},
{
component: "NuxtLink",
text: "API",
props: { to: "/api" },
},
// TODO: Add guide.
// TODO: Add external icon.
{
component: "a",
text: "GitHub",
props: {
href: "https://github.com/druxt/druxt.js",
target: "_blank",
},
},
],
}),
};
</script>
27 changes: 22 additions & 5 deletions docs/components/app/Sidebar.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
<template>
<div class="p-4 overflow-y-auto w-80 bg-base-100">
<div class="px-1 pt-20 overflow-y-auto w-80 bg-base-100">
<!-- Main menu -->
<AppMenu class="mb-5">
<li slot="title" class="menu-title">
<span>Navigation</span>
</li>
</AppMenu>

<ul class="menu">
<!-- Recent/Pinned documents -->
<ul v-if="$store.state.recent.length" class="mb-5 menu">
<li slot="title" class="menu-title">
<span>Modules</span>
<span>Recent documents</span>
</li>
<li v-for="module of $store.state.modules" :key="module">
<NuxtLink class="rounded-btn" :to="`/api/packages/${module}`" v-text="module" />
<li v-for="(item, key) of $store.state.recent" :key="key">
<NuxtLink class="rounded-btn" :to="item.to" v-text="item.text" />
</li>
</ul>

<!-- API menu -->
<ul class="mb-5 menu">
<li slot="title" class="menu-title">
<span>API documents</span>
</li>
<li>
<NuxtLink class="rounded-btn" to="/api/packages">Packages</NuxtLink>
<!-- <ul class="menu">
<li v-for="module of $store.state.modules" :key="module">
<NuxtLink class="rounded-btn" :to="`/api/packages/${module}`" v-text="module" />
</li>
</ul> -->
</li>
</ul>
</div>
Expand Down
8 changes: 6 additions & 2 deletions docs/layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<template>
<div>
<AppHeader class="absolute z-100" title="DruxtJS" />
<AppHeader class="absolute z-50 h-20" title="DruxtJS" />

<div class="shadow bg-base-200 drawer h-screen pt-15">
<div
class="shadow bg-base-200 drawer h-screen pt-20"
:class="{ 'drawer-mobile': $route.path !== '/' }"
>
<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 />
Expand Down
1 change: 1 addition & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@nuxt/content": "^1.14.0",
"@tailwindcss/typography": "^0.4.1",
"core-js": "^3.16.2",
"daisyui": "^1.13.2",
"nuxt": "^2.15.8"
Expand Down
7 changes: 7 additions & 0 deletions docs/pages/api.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<div class="container mx-auto my-20 px-5">
<h1 class="text-4xl border-b mb-10">API Documentation</h1>

<NuxtChild />
</div>
</template>
49 changes: 39 additions & 10 deletions docs/pages/api/_.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,60 @@
<template>
<div class="container mx-auto my-20">
<NuxtContent v-if="document" :document="document" />
<div>
<!-- TODO: Add link to GitHub -->
<div class="card shadow bg-white mb-10">
<div class="card-body">
<span class="mb-3 text-lg font-mono">{{ dir }}</span>
<h2 class="mb-5 text-3xl">{{ title }}</h2>

<div v-else>
<div v-for="item of response" :key="item.path">
<NuxtLink :to="item.path" v-text="item.slug" />
<div>
<!-- TODO: Link to module page? -->
<div v-if="module" class="badge badge-primary">{{ module }}</div>
<!-- TODO: Add file type badge; Component, Mixin, etc -->
</div>
</div>
</div>

<NuxtContent
v-if="document"
class="
prose prose-green prose-sm
sm:prose sm:prose-green
lg:prose-lg
xl:prose-xl
"
:document="document"
/>
</div>
</template>

<script>
export default {
async asyncData({ $content, params, error }) {
name: "AppApiDocument",
async asyncData({ $content, error, params, store, route }) {
let response;
try {
response = await $content("api/", params.pathMatch || "index").fetch();
const path =
params.pathMatch + (params.pathMatch.endsWith("/") ? "index" : "");
response = await $content("api/", path).fetch();
if (Array.isArray(response)) {
response = await $content("api/", params.pathMatch + "/index").fetch();
}
} catch (e) {
return error({ message: "Document not found" });
}
return { response };
store.commit("addRecent", { text: response.title, to: route.path });
return { document: response };
},
computed: {
document: ({ response }) =>
!Array.isArray(response) ? response : undefined,
module: ({ document }) => document.dir.split("/packages/")[1],
dir: ({ document }) => document.dir.replace("/api/", "/src/"),
title: ({ document }) => document.title,
},
};
</script>
14 changes: 3 additions & 11 deletions docs/pages/api/index.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
<template>
<div class="container mx-auto my-20">
<h1 class="text-4xl border-b-3 mb-10">API Documentation</h1>
<div>
<h2 class="text-2xl border-b mb-10">Table of contents</h2>

<h2 class="text-2xl">Modules</h2>
<ul class="menu">
<li
v-for="module of $store.state.modules"
:key="module"
>
<NuxtLink :to="`/api/packages/${module}`" v-text="module" />
</li>
</ul>
<!-- TODO: Add table of contents menu -->
</div>
</template>
14 changes: 14 additions & 0 deletions docs/pages/api/packages.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<div>
<h2 class="text-2xl border-b mb-10">Modules</h2>

<ul class="menu">
<li
v-for="module of $store.state.modules"
:key="module"
>
<NuxtLink :to="`/api/packages/${module}/`" v-text="module" />
</li>
</ul>
</div>
</template>
15 changes: 10 additions & 5 deletions docs/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
module.exports = {
purge: [],
mode: 'jit',
purge: [
'./components/**/*.{js,jsx,ts,tsx,vue}',
'./pages/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
Expand All @@ -9,17 +13,18 @@ module.exports = {
},
plugins: [
require('daisyui'),
require('@tailwindcss/typography'),
],
daisyui: {
themes: [
{
druxt: {
'primary': '#3498DB', /* Primary color */
'primary-focus': '#2F495E', /* Primary color - focused */
'primary': '#53b0eb', /* Primary color */
'primary-focus': '#0678be', /* Primary color - focused */
'primary-content': '#ffffff', /* Foreground content color to use on primary color */

'secondary': '#108775', /* Secondary color */
'secondary-focus': '#2F495E', /* Secondary color - focused */
'secondary': '#41b883', /* Secondary color */
'secondary-focus': '#3b8070', /* Secondary color - focused */
'secondary-content': '#ffffff', /* Foreground content color to use on secondary color */

'accent': '#37cdbe', /* Accent color */
Expand Down
36 changes: 36 additions & 0 deletions docs/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1822,6 +1822,20 @@ __metadata:
languageName: node
linkType: hard

"@tailwindcss/typography@npm:^0.4.1":
version: 0.4.1
resolution: "@tailwindcss/typography@npm:0.4.1"
dependencies:
lodash.castarray: ^4.4.0
lodash.isplainobject: ^4.0.6
lodash.merge: ^4.6.2
lodash.uniq: ^4.5.0
peerDependencies:
tailwindcss: ">=2.0.0"
checksum: d234509964f59389d00ccc0529b033a5aa670a93149a48520cd2088d102b894cc746146052ea844a926bbea4b16904f5f6b2874399511bf78d55631bdb88ac68
languageName: node
linkType: hard

"@tootallnate/once@npm:1":
version: 1.1.2
resolution: "@tootallnate/once@npm:1.1.2"
Expand Down Expand Up @@ -4959,6 +4973,7 @@ __metadata:
dependencies:
"@nuxt/content": ^1.14.0
"@nuxtjs/tailwindcss": ^4.2.1
"@tailwindcss/typography": ^0.4.1
core-js: ^3.16.2
daisyui: ^1.13.2
nuxt: ^2.15.8
Expand Down Expand Up @@ -7521,13 +7536,27 @@ fsevents@~2.3.2:
languageName: node
linkType: hard

"lodash.castarray@npm:^4.4.0":
version: 4.4.0
resolution: "lodash.castarray@npm:4.4.0"
checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
languageName: node
linkType: hard

"lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
checksum: a3f527d22c548f43ae31c861ada88b2637eb48ac6aa3eb56e82d44917971b8aa96fbb37aa60efea674dc4ee8c42074f90f7b1f772e9db375435f6c83a19b3bc6
languageName: node
linkType: hard

"lodash.isplainobject@npm:^4.0.6":
version: 4.0.6
resolution: "lodash.isplainobject@npm:4.0.6"
checksum: 29c6351f281e0d9a1d58f1a4c8f4400924b4c79f18dfc4613624d7d54784df07efaff97c1ff2659f3e085ecf4fff493300adc4837553104cef2634110b0d5337
languageName: node
linkType: hard

"lodash.kebabcase@npm:^4.1.1":
version: 4.1.1
resolution: "lodash.kebabcase@npm:4.1.1"
Expand All @@ -7542,6 +7571,13 @@ fsevents@~2.3.2:
languageName: node
linkType: hard

"lodash.merge@npm:^4.6.2":
version: 4.6.2
resolution: "lodash.merge@npm:4.6.2"
checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
languageName: node
linkType: hard

"lodash.template@npm:^4.5.0":
version: 4.5.0
resolution: "lodash.template@npm:4.5.0"
Expand Down

0 comments on commit 629bb1b

Please sign in to comment.