Commit 153dd0da authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Clement Ho

Speed up menu loading

parent 2c019292
Pipeline #79419093 passed with stages
in 14 minutes and 26 seconds
......@@ -89,4 +89,7 @@ public/
/static/contents/
#Heroku build pack files
.heroku/
\ No newline at end of file
.heroku/
# GitLab specific
content_tree.json
......@@ -98,6 +98,7 @@
<script>
import subMenu from '../components/sub_menu.vue';
import menuSection from '../components/menu_section.vue';
import contentTree from '../content_tree.json'; // eslint-disable-line import/no-unresolved
export default {
components: {
......@@ -106,7 +107,7 @@ export default {
},
data() {
return {
contentTree: null,
contentTree,
};
},
computed: {
......@@ -126,17 +127,6 @@ export default {
}, 0);
});
},
created() {
this.$axios
.$get(`/contents/contentTree.json`)
.then(treeResult => {
this.contentTree = treeResult;
})
.catch(e => {
// eslint-disable-next-line
console.log('Err : ', e);
});
},
};
</script>
......
......@@ -47,24 +47,16 @@ export function getContentList(dirName) {
return componentInfos;
}
export default function() {
// This iterates over all component frontmatter files and creates .json files out of it, which are then loaded by the UI
this.extendBuild((config, { isClient }) => {
// As we only do static we also only need to prepare it for the client
if (!isClient) {
return;
}
export function writeContentTree(baseDirectory) {
const treeObj = {};
const directories = fs.readdirSync(path.resolve(baseDirectory, 'contents'));
const treeObj = {};
const directories = fs.readdirSync(path.resolve(__dirname, '../contents/'));
directories.forEach(dir => {
treeObj[dir] = getContentList(dir);
});
fs.writeFileSync(
path.resolve(__dirname, '../static/contents/contentTree.json'),
JSON.stringify(treeObj),
);
directories.forEach(dir => {
treeObj[dir] = getContentList(dir);
});
fs.writeFileSync(
path.resolve(baseDirectory, 'content_tree.json'),
JSON.stringify(treeObj, null, 2),
);
}
import glob from 'glob';
import path from 'path';
import { getContentList } from './modules/content_preparer';
import { getContentList, writeContentTree } from './modules/content_preparer';
const routes = [
...getContentList('components').map(c => `components/${c.id}`),
......@@ -81,7 +81,6 @@ module.exports = {
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
'~/modules/content_preparer',
'@gitlab/nuxt-edit-this-page',
],
......@@ -177,4 +176,14 @@ module.exports = {
}
},
},
// see https://nuxtjs.org/api/configuration-hooks
hooks: {
build: {
before(builder) {
const { srcDir } = builder.nuxt.options;
writeContentTree(srcDir);
},
},
},
};
......@@ -305,6 +305,8 @@
</template>
<script>
import contentTree from '../../content_tree.json'; // eslint-disable-line import/no-unresolved
const statusIcons = {
upcoming: '🚫',
'in-progress': '',
......@@ -316,20 +318,9 @@ const statusIcons = {
export default {
data() {
return {
contentTree: null,
contentTree,
};
},
created() {
this.$axios
.$get(`/contents/contentTree.json`)
.then(treeResult => {
this.contentTree = treeResult;
})
.catch(e => {
// eslint-disable-next-line
console.log('Err : ', e);
});
},
methods: {
getStatusIcon(status) {
return statusIcons[status];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment