Thank you all so much for your responses! This is super helpful in terms of learning more about customize the interface, and gives me some direction for issues I need to be aware of (like figuring out an alternative to tweaking code outside the theme). One more question: My institution, uOttawa, is fully bilingual, which means all the text needs to be translated to both French and English. I think that means that material like the text on the home-news.component.html page needs to be defined in the i18n page, but part of me balks at the idea of adding 1000-word definitions for labels... is there any other dynamic/Angular way of doing this, or is this, in fact, the way it's done?
Thanks, Carolyn. On Monday, October 2, 2023 at 2:00:52 PM UTC-4 [email protected] wrote: > Our implementation looks very similar to Mark's. We created 2 additional > components in the app/info directory of our theme, one for an About > component and one for a Guidelines component. I started by just copying one > of the existing "feedback" or "privacy" directories (I forget which one I > used, but either will work) then changed the filename names, content, > selectors etc. I modified lazy-theme.module.ts in my theme folder to > import my 2 new components. This seems to mimic what Mark did according to > that diff in Slack. > > Where Mark and I differ is how I added those 2 components to DSpace. We > wanted an About menu at the start of the nav bar with a dropdown for our > About and Guidelines pages, and wanted the URLs to be like the Feedback URL > (/info/feedback) i.e. /info/about and /info/guidelines. To do this I > modified the core /src/app/info/info-routing.module.ts and imported my 2 > components there and added this right below the existing FEEDBACK_PATH > path (around line 20) > > { > path: 'about', > component: AboutComponent, > resolve: { breadcrumb: I18nBreadcrumbResolver }, > data: { title: 'info.about.title', breadcrumbKey: 'info.about' }, > }, > { > path: 'guidelines', > component: GuidelinesComponent, > resolve: { breadcrumb: I18nBreadcrumbResolver }, > data: { title: 'info.guidelines.title', breadcrumbKey: > 'info.guidelines' }, > } > > To add my About menu and the dropdown options (this may not be needed for > 7.6 as I think there have been some additional themable components added > related to the nav bar; I did this in 7.4 initially) I added this section > to /src/app/menu.resolver.ts at about line 96 (i.e I inserted these as > the very first entries in the menuList array in createPublicMenu, right > before the existing Communities and Collections element) > > /* About */ > { > id: `about_about`, > parentID: 'about', > active: false, > visible: true, > model: { > type: MenuItemType.LINK, > text: `info.about.title`, > link: `/info/about` > } as LinkMenuItemModel > }, > { > id: `about_guidelines`, > parentID: 'about', > active: false, > visible: true, > model: { > type: MenuItemType.LINK, > text: `info.guidelines.title`, > link: `/info/guidelines` > } as LinkMenuItemModel > }, > { > id: 'about', > active: false, > visible: true, > index: 0, > model: { > type: MenuItemType.TEXT, > text: 'menu.section.about' > } as TextMenuItemModel, > }, > > > I don't like having to modify code outside of the theme, but I was in a > bit of a rush to get this working. I think 7.6 made some additional nav > related stuff themable so I might be able to undo that last modification. > I haven't actually investigated that yet. > > - Darryl > > > On Monday, October 2, 2023 at 9:51:09 AM UTC-6 Carolyn Sullivan wrote: > >> Oh wait, I see Mark has helpfully shared his code in the DSpace Slack: >> https://dspace-org.slack.com/archives/C3TTSEB1V/p1694715563285319 >> >> The changes aren't working in my repo so far, but this gives me a good >> starting point--thanks Mark! >> >> On Monday, October 2, 2023 at 9:43:43 AM UTC-4 Carolyn Sullivan wrote: >> >>> Hello, >>> >>> Thank you for opening this thread. I have the same problem as Mariusz >>> originally did, and was wondering if anyone could offer some more specific >>> recommendations regarding Mark Wood's solution. >>> >>> On our repository, we added an additional link to the navbar menu like >>> so: >>> >>> <li ngbDropdown class="nav-item d-flex align-items-center"> >>> <a class="nav-link " role="button" data-toggle="dropdown" >>> aria-expanded="false" ngbDropdownToggle> About </a> >>> <div ngbDropdownMenu class="m-0 border-top-0 ng-trigger >>> ng-trigger-slide shadow-none" id="customDrop"> >>> <a ngbDropdownItem style="color: #207698" >>> href="assets/about/uo-research.html">UO-Research</a> >>> <a ngbDropdownItem style="color: #207698" >>> href="assets/about/policies.html">Policies</a> >>> <a ngbDropdownItem style="color: #207698" >>> href="assets/about/faq.html">FAQ</a> >>> </div> >>> </li> >>> >>> To use this structure but have it link to a view with the DSpace >>> header/footer and text content sandwiched between, would we then create a >>> component in our custom/app folder, and then use a routing >>> module/routerlink to get to that component view instead of using the static >>> link here (https://angular.io/tutorial/tour-of-heroes/toh-pt5)? Is >>> that the simplest way of doing it? >>> >>> Thanks, >>> Carolyn. >>> >>> >>> On Friday, June 10, 2022 at 8:39:52 AM UTC-4 Mariusz wrote: >>> >>>> It enlightened me and I have done it in the meantime. I just doubled >>>> the privacy component accordingly. Managed to. It works. But thanks for >>>> any >>>> suggestions. >>>> >>>> Regards >>>> Mariusz >>>> >>>> piątek, 10 czerwca 2022 o 14:25:27 UTC+2 [email protected] napisał(a): >>>> >>>>> On Fri, Jun 10, 2022 at 02:35:00AM -0700, Mariusz wrote: >>>>> > It works, but how can I make static pages look like the rest. I >>>>> would like >>>>> > a page with static content that looks like other pages in my >>>>> repository. I >>>>> > have already created my own theme. I would like to have additional >>>>> (themed) >>>>> > pages with my permanent content, as now they have info/privacy >>>>> (Privacy >>>>> > Statement) or info/end-user-agreement (End User Agreement) . Pages >>>>> with my >>>>> > own info. I don't know if I'm explaining well. ;) >>>>> >>>>> So, I think you are saying that you want a page with all of the common >>>>> DSpace decorations, behaviors and styling, but with static content in >>>>> the middle. That does not sound like a static page, but a dynamic >>>>> page with fixed main content. I think that, to do this, you would >>>>> just write a component whose HTML template file contains no >>>>> placeholders and whose Typescript file contains no behaviors. Use the >>>>> theme's styling classes so that the rendering of your component tracks >>>>> changes to the theme. >>>>> >>>>> The "page" is assembled by Angular in the browser, and the stuff in >>>>> the middle that changes as you navigate is just one part of the >>>>> assembly. https://en.wikipedia.org/wiki/Single-page_application >>>>> >>>>> -- >>>>> Mark H. Wood >>>>> Lead Technology Analyst >>>>> >>>>> University Library >>>>> Indiana University - Purdue University Indianapolis >>>>> 755 W. Michigan Street >>>>> Indianapolis, IN 46202 >>>>> 317-274-0749 <(317)%20274-0749> >>>>> www.ulib.iupui.edu >>>>> >>>> -- All messages to this mailing list should adhere to the Code of Conduct: https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx --- You received this message because you are subscribed to the Google Groups "DSpace Community" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-community/4d3e014d-2b63-45f9-8324-d6b2cdb3dd90n%40googlegroups.com.
