Skip to content

Commit

Permalink
Merge pull request #1576 from NickSto/custom-navbars
Browse files Browse the repository at this point in the history 
Customizable navbars
  • Loading branch information
@NickSto
NickSto authored Aug 11, 2022
2 parents 35d9049 + 2fc480e commit 158703c
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 41 deletions.
52 changes: 52 additions & 0 deletions navbars.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"global": {
"left": [
{ "label": "News", "relativeTo": "subsite", "target": "news/" },
{ "label": "Events", "relativeTo": "subsite", "target": "events/" }
],
"right": [
{
"label": "Support",
"contents": [
{ "label": "Get started", "target": "/get-started/" },
{ "label": "Training", "target": "/learn/" },
{ "label": "FAQ", "target": "/support/" },
{ "label": "Galaxy Help Forum", "target": "https://help.galaxyproject.org/" }
]
},
{
"label": "Community",
"contents": [
{ "label": "The Galaxy Community", "target": "/community/" },
{ "label": "Blog", "target": "/blog/" },
{ "label": "Working Groups", "target": "/community/wg/" },
{ "label": "Governance", "target": "/community/governance/" },
{ "label": "How to contribute", "target": "/community/contributing/" },
{ "label": "Galaxy Mentor Network", "target": "https://galaxy-mentor-network.netlify.app/" },
{ "label": "Code of Conduct", "target": "/community/coc/" }
]
},
{
"label": "About",
"contents": [
{ "label": "Platforms", "target": "/use/" },
{ "label": "Careers", "target": "/careers/" },
{ "label": "Stats", "target": "/galaxy-project/statistics/" },
{ "label": "Mailing lists", "target": "/mailing-lists" },
{ "label": "Publications", "target": "/publication-library/" },
{ "label": "Citing Galaxy", "target": "/citing-galaxy/" },
{ "label": "Branding", "target": "/images/galaxy-logos/" }
]
},
{
"label": "Projects",
"contents": [
{ "label": "COVID-19", "target": "/projects/covid19/" },
{ "label": "Monkeypox", "target": "/projects/mpxv/" },
{ "label": "VGP", "target": "/projects/vgp/" }
]
},
{ "label": "@jxtx", "target": "/jxtx/" }
]
}
}
96 changes: 55 additions & 41 deletions src/components/NavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,15 @@
<p>{{ subsiteName }}</p>
</b-navbar-brand>
<b-navbar-nav id="subsite-items">
<b-nav-item-dropdown id="subsite-select" v-if="false && subsiteName" text="Regions">
<b-nav-item-dropdown id="subsite-select" v-if="false" text="Regions">
<b-dropdown-item v-for="link of subsiteLinks" :key="link.key" :to="link.path">
{{ link.name }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item :to="`${pathPrefix}/news/`">News</b-nav-item>
<b-nav-item :to="`${pathPrefix}/events/`">Events</b-nav-item>
<NavBarItem v-for="item of customContent.left" :key="item.key" :item="item" />
</b-navbar-nav>
<b-navbar-nav id="global-items" class="ml-auto">
<b-nav-item-dropdown text="Support">
<b-dropdown-item to="/get-started/">Get started</b-dropdown-item>
<b-dropdown-item to="/learn/">Training</b-dropdown-item>
<b-dropdown-item to="/support/">FAQ</b-dropdown-item>
<b-dropdown-item href="https://help.galaxyproject.org/">Galaxy Help Forum</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Community">
<b-dropdown-item to="/community/">The Galaxy Community</b-dropdown-item>
<b-dropdown-item to="/blog/">Blog</b-dropdown-item>
<b-dropdown-item to="/community/wg/">Working Groups</b-dropdown-item>
<b-dropdown-item to="/community/governance/">Governance</b-dropdown-item>
<b-dropdown-item to="/community/contributing/">How to contribute</b-dropdown-item>
<b-dropdown-item href="https://galaxy-mentor-network.netlify.app/"
>Galaxy Mentor Network</b-dropdown-item
>
<b-dropdown-item to="/community/coc/">Code of Conduct</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="About">
<b-dropdown-item to="/use/">Platforms</b-dropdown-item>
<b-dropdown-item to="/careers/">Careers</b-dropdown-item>
<b-dropdown-item to="/galaxy-project/statistics/">Stats</b-dropdown-item>
<b-dropdown-item to="/mailing-lists">Mailing lists</b-dropdown-item>
<b-dropdown-item to="/publication-library/">Publications</b-dropdown-item>
<b-dropdown-item to="/citing-galaxy/">Citing Galaxy</b-dropdown-item>
<b-dropdown-item to="/images/galaxy-logos/">Branding</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Projects">
<b-dropdown-item to="/projects/covid19/">COVID-19</b-dropdown-item>
<b-dropdown-item to="/projects/mpxv/">Monkeypox</b-dropdown-item>
<b-dropdown-item to="/projects/vgp/">VGP</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item to="/jxtx/">@jxtx</b-nav-item>
<NavBarItem v-for="item of customContent.right" :key="item.key" :item="item" />
</b-navbar-nav>
<b-navbar-nav id="global-tools" class="ml-2">
<b-nav-form id="search" action="/search/" method="get">
Expand All @@ -67,28 +35,41 @@
</template>

<script>
import { rmPrefix } from "~/lib/utils.js";
import NavBarItem from "@/components/NavBarItem";
import { rmPrefix, matchesPrefixes } from "~/lib/utils.js";
import { getRootSubsite } from "~/lib/site.js";
import CONFIG from "~/../config.json";
import NAVBARS from "~/../navbars.json";
const ROOT_SUBSITE = getRootSubsite();
const REPO_URL = "https://github.com/galaxyproject/galaxy-hub";
const EDIT_PATH = "tree/master/content";
export default {
props: {
subsite: { type: String, required: false, default: ROOT_SUBSITE },
},
components: {
NavBarItem,
},
data() {
let pathPrefix;
if (!this.subsite || this.subsite === ROOT_SUBSITE) {
pathPrefix = "";
} else {
pathPrefix = `/${this.subsite}`;
}
return {
rootSubsite: ROOT_SUBSITE,
pathPrefix,
};
},
computed: {
pathPrefix() {
if (!this.subsite || this.subsite === ROOT_SUBSITE) {
return "";
customContent() {
let rawContent;
if (this.subsite && NAVBARS[this.subsite]) {
rawContent = NAVBARS[this.subsite];
} else {
return `/${this.subsite}`;
rawContent = NAVBARS[ROOT_SUBSITE];
}
return parseCustomContent(rawContent, this.pathPrefix);
},
subsiteName() {
let nameRaw = CONFIG.subsites.all[this.subsite]?.name;
Expand Down Expand Up @@ -166,6 +147,39 @@ export default {
},
},
};
/** Turn the raw, human-friendly navbar definition into a structure more easily used in the template. */
function parseCustomContent(rawContent, pathPrefix) {
let content = {};
for (let part of ["left", "right"]) {
content[part] = [];
for (let rawItem of rawContent[part] || []) {
let item = parseCustomItem(rawItem, pathPrefix);
content[part].push(item);
}
}
return content;
}
function parseCustomItem(rawItem, pathPrefix) {
let item = {};
if (rawItem.target) {
item.type = "link";
item.label = rawItem.label;
if (rawItem.relativeTo === "subsite" && pathPrefix !== undefined) {
item.to = `${pathPrefix}/${rawItem.target}`;
} else if (matchesPrefixes(rawItem.target, ["https://", "http://", "mailto:", "ftp:"])) {
item.href = rawItem.target;
} else {
item.to = rawItem.target;
}
item.key = `${item.type}:${rawItem.relativeTo}:${rawItem.target}`;
} else if (rawItem.contents) {
item.type = "dropdown";
item.label = rawItem.label;
item.contents = rawItem.contents.map((subitem) => parseCustomItem(subitem, pathPrefix));
item.key = `${item.type}:` + item.contents.map((subitem) => subitem.key).join(":");
}
return item;
}
function getPath(page) {
if (page) {
for (let child of Object.values(page)) {
Expand Down
22 changes: 22 additions & 0 deletions src/components/NavBarItem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<template>
<b-nav-item v-if="item.type === 'link' && item.to" :to="item.to">{{ item.label }}</b-nav-item>
<b-nav-item v-else-if="item.type === 'link' && item.href" :href="item.href">{{ item.label }}</b-nav-item>
<b-nav-item-dropdown v-else-if="item.type === 'dropdown'" :text="item.label">
<template v-for="subitem of item.contents">
<b-dropdown-item v-if="subitem.to" :to="subitem.to" :key="subitem.key">
{{ subitem.label }}
</b-dropdown-item>
<b-dropdown-item v-else-if="subitem.href" :href="subitem.href" :key="subitem.key">
{{ subitem.label }}
</b-dropdown-item>
</template>
</b-nav-item-dropdown>
</template>

<script>
export default {
props: {
item: { type: Object, required: true },
},
};
</script>

0 comments on commit 158703c

Please sign in to comment.