Skip to content

Commit

Permalink
feat(docs): Improve directory structure pages by adding links (fix: #…
Browse files Browse the repository at this point in the history
  • Loading branch information
rstoenescu committed Jan 3, 2023
1 parent 69872e8 commit 585a05b
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 90 deletions.
77 changes: 46 additions & 31 deletions docs/src/components/DocTree.vue
@@ -1,46 +1,61 @@
<template lang="pug">
q-tree.doc-tree(:nodes="nodes" node-key="id" children-key="c" default-expand-all dense)
template("v-slot:default-header"="prop")
.row.items-center.no-wrap
.doc-tree__label.text-weight-bold.text-no-wrap
doc-link(v-if="prop.node.r" :to="prop.node.r") {{ prop.node.l }}
template(v-else) {{ prop.node.l }}
.doc-tree__explanation.text-grey.q-ml-sm(v-if="prop.node.e") # {{ prop.node.e }}
</template>
<template>
<q-tree
class="doc-tree"
:nodes="nodes"
node-key="id"
children-key="c"
default-expand-all
dense
>
<template v-slot:default-header="prop">
<div class="row items-center no-wrap">
<div class="doc-tree__label text-weight-bold text-no-wrap">{{ prop.node.l }}</div>

<q-btn
v-if="prop.node.url"
class="doc-tree__btn q-ml-xs"
size="9px"
color="brand-primary"
:icon="mdiLaunch"
unelevated
dense
:href="prop.node.url"
target="_blank"
@click.stop
/>

<script>
export default {
name: 'DocTree',
<div class="doc-tree__explanation text-grey q-ml-sm" v-if="prop.node.e"># {{ prop.node.e }}</div>
</div>
</template>
</q-tree>
</template>

props: {
def: Object
},
<script setup>
import { mdiLaunch } from '@quasar/extras/mdi-v6'
setup (props) {
let id = 0
const addId = node => {
node.id = id++
if (node.c !== void 0) {
node.l += '/'
node.c.forEach(addId)
}
return node
}
const props = defineProps({
def: Object
})
return {
nodes: [addId(props.def)]
}
let id = 0
const addId = node => {
node.id = id++
if (node.c !== void 0) {
node.l += '/'
node.c.forEach(addId)
}
return node
}
const nodes = [addId(props.def)]
</script>

<style lang="sass">
.doc-tree
&__label
font-size: .9em
&__btn .q-icon
font-size: 12px
&__explanation
font-size: .7em
& .q-icon
font-size: 0.9em
margin-top: -2px
</style>
53 changes: 27 additions & 26 deletions docs/src/pages/quasar-cli-vite/directory-structure.md
Expand Up @@ -5,24 +5,24 @@ scope:
tree:
l: '.'
c: [
{ l: 'public', e: 'Pure static assets (directly copied)', r: '/quasar-cli-vite/handling-assets#static-assets-public' },
{ l: 'public', e: 'Pure static assets (directly copied)', url: '/quasar-cli-vite/handling-assets#static-assets-public' },
{ l: 'src',
c: [
{ l: 'assets/', e: 'Dynamic assets (processed by Vite)', r: '/quasar-cli-vite/handling-assets#regular-assets-src-assets' },
{ l: 'components/', e: '.vue components used in pages & layouts', r: '/start/how-to-use-vue#vue-single-file-components-sfc-' },
{ l: 'assets/', e: 'Dynamic assets (processed by Vite)', url: '/quasar-cli-vite/handling-assets#regular-assets-src-assets' },
{ l: 'components/', e: '.vue components used in pages & layouts', url: '/start/how-to-use-vue#vue-single-file-components-sfc-' },
{ l: 'css',
e: 'CSS/Sass/... files for your app',
c: [
{ l: 'app.sass' },
{ l: 'quasar.variables.sass', e: 'Quasar Sass variables for you to tweak', r: '/style/sass-scss-variables#introduction' }
{ l: 'quasar.variables.sass', e: 'Quasar Sass variables for you to tweak', url: '/style/sass-scss-variables' }
]
},
{ l: 'layouts/', e: 'Layout .vue files', r: '/layout/layout' },
{ l: 'layouts/', e: 'Layout .vue files', url: '/layout/layout' },
{ l: 'pages/', e: 'Page .vue files' },
{ l: 'boot/', e: 'Boot files (app initialization code)', r: '/quasar-cli-vite/boot-files' },
{ l: 'boot/', e: 'Boot files (app initialization code)', url: '/quasar-cli-vite/boot-files' },
{ l: 'router',
e: 'Vue Router',
r: '/quasar-cli-vite/routing',
url: '/quasar-cli-vite/routing',
c: [
{ l: 'index.js', e: 'Vue Router definition' },
{ l: 'routes.js', e: 'App Routes definitions' }
Expand All @@ -31,7 +31,7 @@ scope:
{
l: 'stores',
e: 'Pinia Stores (if not using Vuex)',
r: '/quasar-cli-vite/state-management-with-pinia',
url: '/quasar-cli-vite/state-management-with-pinia',
c: [
{ l: 'index.js', e: 'Pinia initialization' },
{ l: '<store>', e: 'Pinia stores...' },
Expand All @@ -41,22 +41,23 @@ scope:
{
l: 'store',
e: 'Vuex Store (if not using Pinia)',
r: '/quasar-cli-vite/state-management-with-vuex',
url: '/quasar-cli-vite/state-management-with-vuex',
c: [
{ l: 'index.js', e: 'Vuex Store definition' },
{ l: '<folder>', e: 'Vuex Store Module...' },
{ l: '<folder>', e: 'Vuex Store Module...' }
]
},
{ l: 'App.vue', e: 'Root Vue component of your App', r: 'https://vuejs.org/guide/essentials/application.html' },
{ l: 'index.template.html', e: 'Template for index.html' },
{ l: 'App.vue', e: 'Root Vue component of your App' }
]
},
{ l: 'src-ssr/', e: 'SSR specific code (like production Node webserver)', r: '/quasar-cli-vite/developing-ssr/introduction' },
{ l: 'src-pwa/', e: 'PWA specific code (like Service Worker)', r: '/quasar-cli-vite/developing-pwa/introduction' },
{ l: 'src-cordova/', e: 'Cordova generated folder used to create Mobile Apps', r: '/quasar-cli-vite/developing-cordova-apps/introduction' },
{ l: 'src-electron/', e: 'Electron specific code (like "main" thread)', r: '/quasar-cli-vite/developing-electron-apps/introduction' },
{ l: 'src-bex/', e: 'BEX (browser extension) specific code (like "main" thread)', r: '/quasar-cli-vite/developing-browser-extensions/introduction' },
{ l: 'index.html', e: 'Template for index.html' },
{ l: 'src-ssr/', e: 'SSR specific code (like production Node webserver)', url: '/quasar-cli-vite/developing-ssr/introduction' },
{ l: 'src-pwa/', e: 'PWA specific code (like Service Worker)', url: '/quasar-cli-vite/developing-pwa/introduction' },
{ l: 'src-capacitor/', e: 'Capacitor generated folder used to create Mobile Apps', url: '/quasar-cli-vite/developing-capacitor-apps/introduction' },
{ l: 'src-cordova/', e: 'Cordova generated folder used to create Mobile Apps', url: '/quasar-cli-vite/developing-cordova-apps/introduction' },
{ l: 'src-electron/', e: 'Electron specific code (like "main" thread)', url: '/quasar-cli-vite/developing-electron-apps/introduction' },
{ l: 'src-bex/', e: 'BEX (browser extension) specific code (like "main" thread)', url: '/quasar-cli-vite/developing-browser-extensions/introduction' },
{ l: 'dist',
e: 'Where production builds go',
c: [
Expand All @@ -66,16 +67,16 @@ scope:
{ l: '...' }
]
},
{ l: 'quasar.config.js', e: 'Quasar App Config file', r: '/quasar-cli-vite/quasar-config-js' },
{ l: '.gitignore', e: 'GIT ignore paths', r: 'https://git-scm.com/docs/gitignore' },
{ l: '.editorconfig', e: 'EditorConfig file', r: 'https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig' },
{ l: '.eslintignore', e: 'ESLint ignore paths', r: 'https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file' },
{ l: '.eslintrc.js', e: 'ESLint config', r: 'https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files' },
{ l: 'postcss.config.js', e: 'PostCSS config', r: 'https://github.com/postcss/postcss' },
{ l: 'jsconfig.json', e: 'Editor config (if not using TypeScript)', r: 'https://code.visualstudio.com/docs/languages/jsconfig' },
{ l: 'tsconfig.json', e: 'TypeScript config', r: 'https://www.typescriptlang.org/docs/handbook/tsconfig-json.html' },
{ l: 'package.json', e: 'npm scripts and dependencies', r: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json' },
{ l: 'README.md', e: 'Readme for your website/App', r: 'https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes' }
{ l: 'quasar.config.js', e: 'Quasar App Config file', url: '/quasar-cli-vite/quasar-config-js' },
{ l: '.gitignore', e: 'GIT ignore paths', url: 'https://git-scm.com/docs/gitignore' },
{ l: '.editorconfig', e: 'EditorConfig file', url: 'https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig' },
{ l: '.eslintignore', e: 'ESLint ignore paths', url: 'https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file' },
{ l: '.eslintrc.js', e: 'ESLint config', url: 'https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files' },
{ l: 'postcss.config.js', e: 'PostCSS config', url: 'https://github.com/postcss/postcss' },
{ l: 'jsconfig.json', e: 'Editor config (if not using TypeScript)', url: 'https://code.visualstudio.com/docs/languages/jsconfig' },
{ l: 'tsconfig.json', e: 'TypeScript config', url: 'https://www.typescriptlang.org/docs/handbook/tsconfig-json.html' },
{ l: 'package.json', e: 'npm scripts and dependencies', url: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json' },
{ l: 'README.md', e: 'Readme for your website/App', url: 'https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes' }
]
---
This is the structure of a project with all modes installed. There's no reason to be intimidated though!
Expand Down
64 changes: 31 additions & 33 deletions docs/src/pages/quasar-cli-webpack/directory-structure.md
Expand Up @@ -5,26 +5,24 @@ scope:
tree:
l: '.'
c: [
{ l: 'public', e: 'Pure static assets (directly copied)', r: '/quasar-cli-webpack/handling-assets#static-assets-public' },
{
l: 'src',
{ l: 'public', e: 'Pure static assets (directly copied)', url: '/quasar-cli-webpack/handling-assets#static-assets-public' },
{ l: 'src',
c: [
{ l: 'assets/', e: 'Dynamic assets (processed by Webpack)', r: '/quasar-cli-webpack/handling-assets#regular-assets-src-assets' },
{ l: 'components/', e: '.vue components used in pages & layouts', r: '/start/how-to-use-vue#vue-single-file-components-sfc-' },
{
l: 'css',
{ l: 'assets/', e: 'Dynamic assets (processed by Vite)', url: '/quasar-cli-webpack/handling-assets#regular-assets-src-assets' },
{ l: 'components/', e: '.vue components used in pages & layouts', url: '/start/how-to-use-vue#vue-single-file-components-sfc-' },
{ l: 'css',
e: 'CSS/Sass/... files for your app',
c: [
{ l: 'app.sass' },
{ l: 'quasar.variables.sass', e: 'Quasar Sass variables for you to tweak', r: '/style/sass-scss-variables#introduction' }
{ l: 'quasar.variables.sass', e: 'Quasar Sass variables for you to tweak', url: '/style/sass-scss-variables' }
]
},
{ l: 'layouts/', e: 'Layout .vue files', r: '/layout/layout' },
{ l: 'layouts/', e: 'Layout .vue files', url: '/layout/layout' },
{ l: 'pages/', e: 'Page .vue files' },
{ l: 'boot/', e: 'Boot files (app initialization code)', r: '/quasar-cli-webpack/boot-files' },
{ l: 'boot/', e: 'Boot files (app initialization code)', url: '/quasar-cli-webpack/boot-files' },
{ l: 'router',
e: 'Vue Router',
r: '/quasar-cli-webpack/routing',
url: '/quasar-cli-webpack/routing',
c: [
{ l: 'index.js', e: 'Vue Router definition' },
{ l: 'routes.js', e: 'App Routes definitions' }
Expand All @@ -33,7 +31,7 @@ scope:
{
l: 'stores',
e: 'Pinia Stores (if not using Vuex)',
r: '/quasar-cli-webpack/state-management-with-pinia',
url: '/quasar-cli-webpack/state-management-with-pinia',
c: [
{ l: 'index.js', e: 'Pinia initialization' },
{ l: '<store>', e: 'Pinia stores...' },
Expand All @@ -43,22 +41,23 @@ scope:
{
l: 'store',
e: 'Vuex Store (if not using Pinia)',
r: '/quasar-cli-webpack/state-management-with-vuex',
url: '/quasar-cli-webpack/state-management-with-vuex',
c: [
{ l: 'index.js', e: 'Vuex Store definition' },
{ l: '<folder>', e: 'Vuex Store Module..' },
{ l: '<folder>', e: 'Vuex Store Module..' }
{ l: '<folder>', e: 'Vuex Store Module...' },
{ l: '<folder>', e: 'Vuex Store Module...' }
]
},
{ l: 'App.vue', e: 'Root Vue component of your App', r: 'https://vuejs.org/guide/essentials/application.html' },
{ l: 'index.template.html', e: 'Template for index.html' }
{ l: 'App.vue', e: 'Root Vue component of your App' }
]
},
{ l: 'src-ssr/', e: 'SSR specific code (like production Node webserver)', r: '/quasar-cli-webpack/developing-ssr/introduction' },
{ l: 'src-pwa/', e: 'PWA specific code (like Service Worker)', r: '/quasar-cli-webpack/developing-spa/introduction' },
{ l: 'src-cordova/', e: 'Cordova generated folder used to create Mobile Apps', r: '/quasar-cli-webpack/developing-cordova-apps/introduction' },
{ l: 'src-electron/', e: 'Electron specific code (like "main" thread)', r: '/quasar-cli-webpack/developing-electron-apps/introduction' },
{ l: 'src-bex/', e: 'BEX (browser extension) specific code (like "main" thread)', r: '/quasar-cli-webpack/developing-browser-extensions/introduction' },
{ l: 'index.html', e: 'Template for index.html' },
{ l: 'src-ssr/', e: 'SSR specific code (like production Node webserver)', url: '/quasar-cli-webpack/developing-ssr/introduction' },
{ l: 'src-pwa/', e: 'PWA specific code (like Service Worker)', url: '/quasar-cli-webpack/developing-pwa/introduction' },
{ l: 'src-capacitor/', e: 'Capacitor generated folder used to create Mobile Apps', url: '/quasar-cli-webpack/developing-capacitor-apps/introduction' },
{ l: 'src-cordova/', e: 'Cordova generated folder used to create Mobile Apps', url: '/quasar-cli-webpack/developing-cordova-apps/introduction' },
{ l: 'src-electron/', e: 'Electron specific code (like "main" thread)', url: '/quasar-cli-webpack/developing-electron-apps/introduction' },
{ l: 'src-bex/', e: 'BEX (browser extension) specific code (like "main" thread)', url: '/quasar-cli-webpack/developing-browser-extensions/introduction' },
{ l: 'dist',
e: 'Where production builds go',
c: [
Expand All @@ -68,17 +67,16 @@ scope:
{ l: '...' }
]
},
{ l: 'quasar.config.js', e: 'Quasar App Config file', r: 'quasar-cli-webpack/quasar-config-js' },
{ l: 'babel.config.js', e: 'Babeljs config', r: 'https://babeljs.io/docs/en/configuration' },
{ l: '.editorconfig', e: 'EditorConfig file', r: 'https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig' },
{ l: '.eslintignore', e: 'ESLint ignore paths', r: 'https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file' },
{ l: '.eslintrc.js', e: 'ESLint config', r: 'https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files' },
{ l: '.postcssrc.js', e: 'PostCSS config', r: 'https://github.com/postcss/postcss' },
{ l: 'jsconfig.json', e: 'Editor config (if not using TypeScript)', r: 'https://code.visualstudio.com/docs/languages/jsconfig' },
{ l: 'tsconfig.json', e: 'TypeScript config', r: 'https://www.typescriptlang.org/docs/handbook/tsconfig-json.html' },
{ l: '.gitignore', e: 'GIT ignore paths', r: 'https://git-scm.com/docs/gitignore' },
{ l: 'package.json', e: 'npm scripts and dependencies', r: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json' },
{ l: 'README.md', e: 'Readme for your website/App', r: 'https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes' }
{ l: 'quasar.config.js', e: 'Quasar App Config file', url: '/quasar-cli-webpack/quasar-config-js' },
{ l: '.gitignore', e: 'GIT ignore paths', url: 'https://git-scm.com/docs/gitignore' },
{ l: '.editorconfig', e: 'EditorConfig file', url: 'https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig' },
{ l: '.eslintignore', e: 'ESLint ignore paths', url: 'https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file' },
{ l: '.eslintrc.js', e: 'ESLint config', url: 'https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files' },
{ l: 'postcss.config.js', e: 'PostCSS config', url: 'https://github.com/postcss/postcss' },
{ l: 'jsconfig.json', e: 'Editor config (if not using TypeScript)', url: 'https://code.visualstudio.com/docs/languages/jsconfig' },
{ l: 'tsconfig.json', e: 'TypeScript config', url: 'https://www.typescriptlang.org/docs/handbook/tsconfig-json.html' },
{ l: 'package.json', e: 'npm scripts and dependencies', url: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json' },
{ l: 'README.md', e: 'Readme for your website/App', url: 'https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes' }
]
---
This is the structure of a project with all modes installed. There's no reason to be intimidated though!
Expand Down

0 comments on commit 585a05b

Please sign in to comment.