@Darryl... thanks, that was definitely it :embarassed look : You're awesome :)
Potentially related issue... I'm trying to use Bootstrap 4 in my static pages for the styling, but even code I copy directly from the Bootstrap site without modifying doesn't display appropriately. For example, I'm trying to replace our vanilla javascript custom accordions on the old jsp page <https://ruor.uottawa.ca/faq.jsp> with the Collapse/Accordion <https://getbootstrap.com/docs/4.0/components/collapse/>in the new version, and the tabs don't open when clicked. [image: 101723_Bootstrap.PNG] It's like it's not connecting to the files for jquery or something still... has anyone seen anything like this? Thanks to everyone for your time and support! Carolyn. On Thursday, October 12, 2023 at 5:19:10 PM UTC-4 [email protected] wrote: > I had a look at the custom "About" component I created for our site, and > it does use translate for a header without error. > > I see that TranslateModule is imported in my theme's lazy-theme.module.ts > so I assume (and I'm no Angular developer so I'm just kinda guessing here) > that is how its made available to all the components. So I'm wondering if > you forgot to import your component in lazy-theme.module.ts and that's > maybe why it doesn't have translate available? In my lazy-theme.module.ts, > after all the existing imports I added this for my 2 components: > > import { AboutComponent } from './app/info/about/about.component'; > import { GuidelinesComponent } from > './app/info/guidelines/guidelines.component'; > > and at the end of the DECLARATIONS array I added > > const DECLARATIONS = [ > // All the default components are here > > AboutComponent, > GuidelinesComponent, > ]; > > > If you have done all that and still have the error, then I'm afraid I'm at > the edge of my Angular knowledge. Hopefully someone else can offer some > suggestions > > - Darryl > > On Thursday, October 12, 2023 at 2:01:44 PM UTC-6 Carolyn Sullivan wrote: > >> Thanks everyone! Since my institution (the University of Ottawa in >> Ontario, Canada) is a bilingual university, it's best practice for us to >> have independent views in each language--otherwise, our webpages get very >> bulky with the duplication of text. >> >> Adding the translation works fine on the home-news.component.html, but >> when I try to do something similar in my created components, ie: >> >> <div class="container"> >> <div class="row panel"> >> <div class="col-md-12"> >> <h3> >> {{ 'uoresearch.head' | translate }} >> </h3> >> <div class="panel content"> >> >> </div> >> </div> >> </div> >> </div> >> >> I end up getting >> >> error NG8004: No pipe found with name 'translate'. >> >> What could be causing this? I assume when the existing components call >> the default components (ie: import { HomePageComponent as BaseComponent >> } from '../../../../app/home-page/home-page.component';), it's linking >> to something that calls the ngx translate module, but I can't figure out >> what's going on. >> >> >> >> On Friday, October 6, 2023 at 11:46:43 AM UTC-4 [email protected] >> wrote: >> >>> Carolyn, you could just place both the English and French text in your >>> home-news.component.html file, and bypass the i18n stuff. Certainly not as >>> elegant as having it switch based on the selected language, but it is >>> easier. All the email I get from the Government of Canada just have both >>> languages like that. :) >>> >>> DSpace does seem to set the lang attribute of the html tag to the >>> selected language, so perhaps there's some fancy CSS you could do to >>> show/hide the French and English sections based on the "fr" or "en" values >>> there. I don't know if that's any less work than the i18n method, but it >>> would give the appearance of being dynamic. >>> >>> - Darryl >>> >>> On Tuesday, October 3, 2023 at 8:11:18 AM UTC-6 Carolyn Sullivan wrote: >>> >>>> 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/98e743c6-83b9-4964-8bfb-c25ab8dafea4n%40googlegroups.com.
