How do add a static page in DSpace 7

[Seun Adewoye]

Can anyone please help me with steps required to add a static page in DSpace 7. 

Thank you

[Mariusz]

I join the question.

[Mark H. Wood]

This might help:

https://stackoverflow.com/questions/53416871/routing-to-static-html-page-in-angular-6

--
Mark H. Wood
Lead Technology Analyst

University Library
Indiana University - Purdue University Indianapolis
755 W. Michigan Street
Indianapolis, IN 46202
317-274-0749
www.ulib.iupui.edu

[DSpace Community]

Hi,

There are several ways to add static HTML pages easily.

1) Easiest option is to just add it under "src/assets", e.g. "src/assets/mypage.html".  This requires rebuilding the UI, and the static page will be available at "[dspace.ui.url]/assets/mypage.html".
2) Another option is as Mark Wood notes, adding a new "assets" configuration to angular.json in this section: https://github.com/DSpace/dspace-angular/blob/main/angular.json#L44-L47  For example to add a "/static" path update it to be (only the last "assets" entry is new):

"assets": [
  "src/assets",
  "src/robots.txt",

  "src/static",
],

Then, rebuild your UI again.  After that you can add any static pages you want under the "src/static/" folder (you'd need to create this folder) and they will be available under "[dspace.ui.url]/static"

Tim

[Mariusz]

Hi,

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. ;)

Thank you.

Mariusz

[Mark H. Wood]

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

[Mariusz]

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

[Carolyn Sullivan]

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. 

[Carolyn Sullivan]

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!

[Darryl....@usask.ca]

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

[Carolyn Sullivan]

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.

[Darryl....@usask.ca]

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

[Carolyn Sullivan]

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. 

[Darryl....@usask.ca]

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

[Carolyn Sullivan]

@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 with the Collapse/Accordion in the new version, and the tabs don't open when clicked.

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.

[Darryl....@usask.ca]

I think you are correct, the normal jquery libraries are not loaded, or are not loaded in such a way that the functions are available to you as they would be in a more traditional web application.  Google turned up some suggestions on getting jquery into Angular apps, but I'm wondering if there might be an easier way.

Accordions/collapse are definitely in the frontend -- when logged in, the right side nav menu has collapsible menu elements, and the Health page has a very typical looking accordion section.  So the functionality is already there for sure.

If you look at, for example, src/app/health-page/health-info/health-info.component.html DSpace seems to be using ngb-accordion to implement accordions rather than the typical jquery/Bootstrap accordions.  ngb-accordion appears elsewhere in the code as well. Perhaps you could use that as a starting point?

- Darryl

[Darryl....@usask.ca]

Carolyn, I couldn't help myself; had to try this out.

Here's a working example I created based on the code in the DSpace Health page components.  The stuff in the ngbPanelHeader DIVs could be simpler, but the button makes the entire header clickable and the SPANs provide a visual indicator of whether the section is expanded or not.  It could easily be just the title of the section, but this is how the DSpace elements were done so it matches the rest of the site.

I just dropped this into one of my components and it seemed to work fine:

  <ngb-accordion #acc="ngbAccordion" activeIds="panel1">

    <ngb-panel id="panel1">
      <ng-template ngbPanelHeader>
        <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('panel1')">
          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded('panel1')"
                  aria-controls="collapsePanels">
            Section 1
          </button>
          <div class="text-right d-flex">
            <div class="ml-3 d-inline-block">
              <span *ngIf="acc.isExpanded('panel1')" class="fas fa-chevron-up fa-fw"></span>
              <span *ngIf="!acc.isExpanded('panel1')" class="fas fa-chevron-down fa-fw"></span>
            </div>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        Content for section 1
      </ng-template>
    </ngb-panel>

    <ngb-panel id="panel2">
      <ng-template ngbPanelHeader>
        <div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('panel2')">
          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded('panel2')"
                  aria-controls="collapsePanels">
            Section 2
          </button>
          <div class="text-right d-flex">
            <div class="ml-3 d-inline-block">
              <span *ngIf="acc.isExpanded('panel2')" class="fas fa-chevron-up fa-fw"></span>
              <span *ngIf="!acc.isExpanded('panel2')" class="fas fa-chevron-down fa-fw"></span>
            </div>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        Content for section 2
      </ng-template>
    </ngb-panel>
  </ngb-accordion>

[Lrellis D'erth]

Oh goodness!  I hadn't checked out the health page.  So smart. Thanks, Darryl, you are an absolute delight, this is EXACTLY what I needed!  

--
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 dspace-communi...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com.

[Arta Seyedian]

Hi all,

Do any of you have a way to add a non-expandable "About" link on the navbar in DSpace 8.0? I tried @Darryl's method above and unfortunately, while it didn't give me any dev errors, it also didn't work. 

Thank you,

Arta