-
Notifications
You must be signed in to change notification settings - Fork 19
Custom navigation
This page describes how to customize the parts of LingView that allow visitors to navigate your website.
After changing any of the .jsx files described below, you'll need to rebuild your LingView site before they take effect. You can rebuild by running the npm run quick-build command in your terminal from within your LingView directory. If your LingView site is on GitHub and you're using GitHub Actions, your site will automatically be rebuilt when you make changes; just wait a minute or two for the rebuild to complete.
Visitors to any LingView site can choose their language using the dropdown menu at the bottom right of the page. This setting affects most of the text on the site, including the tabs in the top navigation bar, but it doesn't affect individual ELAN or FLEx documents.
To change what languages are available, or to edit any translated piece of text, edit the jsx/App/locale/LocaleConstants.jsx file.
If you don't want to translate a particular piece of text, you can omit it for some of the languages. In this case, LingView will "fall back" to one of the remaining languages when a user asks to view the page in the missing language.
Go to jsx/App. Inside here, there's a file for each of the customizable pages (AboutPage.jsx, GlossaryPage.jsx, LandingPage.jsx, Search.jsx), along with a few other files that you should ignore for now. Open up the file for the page you want to change.
Notice the content of the Glossary page is repeated three times, once per language that users can use to navigate your page. Each language has an HTML <div> element, and then the content goes inside there. Leave the outer <div> alone, but edit what's inside it however you want to.
Generally, you should make the same edit three times, once per language. But if you're making a large change and you aren't ready to translate your work yet, there's another option: delete the languages that aren't ready. In this case, LingView will "fall back" to one of the remaining languages when a user asks to view the page in the missing language.
Pro tip: Google Translate is actually pretty good at translating HTML. To translate your About page, try pasting the entire jsx file into Google Translate to get started, then make changes to the result where necessary.
If you don't want an About or Glossary page, follow these instructions to remove it from your site.
Open the jsx/App/Header.jsx file. You'll see a section like this:
<div id="navLinks">
<NavLink to="/search">
<TranslatableText dictionary={navBarSearchText} />
</NavLink>
<NavLink to="/about">
<TranslatableText dictionary={navBarAboutText} />
</NavLink>
<NavLink to="/glossary">
<TranslatableText dictionary={navBarGlossaryText} />
</NavLink>
<NavLink to="/index">
<TranslatableText dictionary={navBarIndexText} />
</NavLink>
</div>Each three-line NavLink in that section creates a different tab in the navigation bar at the top of your webpage. To hide a tab, delete its NavLink. For example, to hide the about page, delete these three lines:
<NavLink to="/about">
<TranslatableText dictionary={navBarAboutText} />
</NavLink>You can also re-order tabs by reordering their NavLinks.
When you delete a NavLink, it removes the tab so nobody can click on it. But people can still see the tab's content by typing its url directly. If you want to prevent this, you can delete that page's Route later in the same file, in addition to deleting its NavLink.
To change the title that appears at the top left of your LingView website, open jsx/App/locale/LocaleConstants.jsx and replace the current title "LingView: ELAN and FLEx Web Display" with your desired title, such as the corpus being displayed on your LingView site. When changing the English text, make sure to also update the Spanish and French title text listed below it.
You can use the same method to change other text that appears in the top navigation bar or elsewhere on your site.
To change the title that appears in your browser tab, open index.html and replace the text in <title>LingView</title> with your desired title.
The logo that appears in your browser tab is called a "favicon". To change it, first create an appropriate image file: 16x16 pixels and stored in GIF, PNG, or ICO file format. There are several free favicon image generators on the web, although I can't vouch for any of them. Then replace the current images/favicon.ico file with your own file, and name your file favicon.ico.
LingView's color scheme, fonts, and many aspects of layout are determined by the css/main.css file. Be careful when editing this file, because you could break the website's layout and make parts of it unusable. That said, changing colors is pretty safe, so feel free to make experimental changes wherever you see an rgb value or a color.
Your browser's "Inspect" tool is a convenient way to make experimental changes. When you're happy with the result, make those same changes in css/main.css to publish.