Giter VIP home page Giter VIP logo

impresso-frontend's Introduction

Impresso website

Where are pages stored on Github?

Jekyll collection folder in this Github repo
current home index
new home index_
pages /pages
lab post /_labs
blog posts /_posts
people /_posts
partners /_posts
events /_posts

Setting up development environment with Jekyll

This website uses Jekyll 3.9.3. In terminal, browse to local site directory, then use the following commands:

bundle install
bundle exec jekyll serve

Your local site resides here now: localhost:4000

Details on setting up your GitHub Pages site locally with Jekyll

Setting up development environment with Docker

How to add an item to the Timeline

To add a new event to the timeline on the homepage, follow these steps:

  1. Create a new Markdown file in the _events directory with a filename following the format YYYY-MM-DD-short-slug.md. For example, 2027-01-01-new-event.md. Use the earliest date of the event in the filename, as it is just being used to sort filenames in the directory. Note: Jekyll would not render the file if the date in the filename is in the future, so you can safely create the file even if the event is not scheduled yet. If you want the event to be displayed as a separate page, don't forget to add the date field to the front matter!

  2. In the newly created Markdown file, add the following front matter at the beginning of the file:

---
title: 'Event Title'
date: YYYY-MM-DD # Publication date of the event, optional if date in the filename refers to past date
start_date: YYYY-MM-DD # Start date of the event
end_date: YYYY-MM-DD # End date of the event
human_date: Month Year # Human-readable date, e.g., January 2027
---

Replace 'Event Title' with the actual title of the event, set the start_date and end_date to the appropriate dates in the format YYYY-MM-DD. The human_date is a human-readable date, e.g., January 2027 and it will be the only label displayed in the timeline. Adjust the human_date to reflect the month and year of the event. For example, for an event titled "New Event" scheduled for one unspecified day in January 2027, the front matter would look like:

---
title: 'New Event'
date: 2023-11-29
start_date: 2027-01-01
end_date: 2027-30-01
human_date: Second or third week of January 2027
---

If there is a blogpost associated with the event, add the link to the blogpost field in the front matter using the relative path to the blogpost. For example, if the blogpost md file is located at _posts/2027-01-01-new-event.md, add the proper url to the front matter, following the permalink: /:categories/:year/:month/:day/:title:output_ext pattern. For example, the front matter would look like this:

---
title: 'New Event'
date: 2023-11-29
start_date: 2027-01-01
end_date: 2027-30-01
human_date: Second or third week of January 2027
+blogpost: /news/2027/01/01/new-event.html
---

How to add an announcement and link to a blogpost

Announceents are displayed on the homepage. To add a new announcement, create a new Markdown file in the _announcements directory with a filename following the format YYYY-MM-DD-short-slug.md. For example, 2027-01-01-new-announcement.md. Use the date of the announcement in the filename, as it is just being used to sort filenames in the directory. Note: Jekyll would not render the file if the date in the filename is in the future, so you can safely create the file even if the announcement is not scheduled yet. If you want to link the announcement irectly with a blogpost, use the blogpost field in the front matter using the relative path to the blogpost. For example, if the blogpost md file is located at _posts/2027-01-01-new-event.md, add the proper url to the front matter, following the permalink: /:categories/:year/:month/:day/:title:output_ext pattern. For example, the front matter would look like this:

---
title: New announcement
blogpost: /news/2027/01/01/new-event.html
---

How to add a page, its list of seealso pages, and link to it from the menu

Create the page in the pages directory. The filename should be the same as the title of the page, with dashes instead of spaces. For example, if the page title is "About the Project", the filename should be about-the-project.md. Add the permalink to the front matter to the page:

---
title: 'About the Project'
permalink: /about-the-project/
---

Then add an entry to the menu in the _data/navigation.yml file:

- title: About the Project
  url: /about-the-project/

The page frontmatter can contain the seealso table of links - the links being the exact permalink of the page to link to:

---
title: 'About the Project'
permalink: /about-the-project/
+ seealso:
+   - /project/objectives/
+   - /project/design/
---

If you need to add a page inside a subdirectory, for example, `/project/objectives/`, you need to add the `parentUrl` to the front matter of the page:

```diff
---
title: 'Objectives'
permalink: /project/objectives/
+ parentUrl: /project/
---

The folder structure of the pages directory should in principle reflect the menu structure. For example, the page /project/objectives/ should be located in the pages/project/objectives.md file. Note: the permalink will tell eventually Jekyll to generate the page at the specified URL, even if the page is located in a subdirectory.

How to add a blogpost

Create a new Markdown file in the _posts directory with a filename following the format YYYY-MM-DD-short-slug.md. For example, 2027-01-01-new-event.md. Use the date of the event in the filename, as it is just being used to sort filenames in the directory. Note: Jekyll would not render the file if the date in the filename is in the future, so you can safely create the file even if the event is not scheduled yet. If you want the event to be displayed as a separate page, don't forget to add the date field to the front matter!

In the newly created Markdown file, add the following front matter at the beginning of the file:

---
title: 'Blogpost Title'
date: YYYY-MM-DD # Publication date of the blogpost, optional if date in the filename refers to past date
---

To add a cover figure, add the images to the /assets/images directory and add the figure field to the front matter:

---
title: 'Blogpost Title'
date: YYYY-MM-DD # Publication date of the blogpost, optional if date in the filename refers to past date
+ figure:
+   - src: figure1.png
+     alt: 'Figure 1'
+     caption: 'Figure 1: Caption of the figure'
---

impresso-frontend's People

Contributors

bunoute avatar danieleguido avatar dependabot[bot] avatar e-maud avatar elgohr avatar paulschroeder avatar theorm avatar tvanbeek avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

impresso-frontend's Issues

More standard "loading" indicator

The yellow color in the header for indicating loading of data is not "standard" enough to be understood by the user. There should at least be a standard small circling item in the header to make it clear.

add `/newspapers` page

Basic gallery view:

  • redefine design; include @PaulSchroeder 's newspapers timeline
  • show very first issue for each newspaper
  • show basic info for each newspaper
  • add link - > go to search page, filtered by the selected newspaper

`search` page: fix timeline interactions

clean the layout of the timeline

  • the zoomed area always visible, reduce its height
  • fix tooltip translations and number format (add n. of articles:) )
  • add tooltip on the overview timeline as well

Generic `ListComponent` needed

Create a vue component linked to a "generic" middle-layer API service:

  • a basic search field, using the q param;
  • a list of items, according to the response.data;
  • a pagination component, using the response.info

Will be used for instance for the topics, the entities or for the list of newspaper titles.

Histogram needs legend about what is counted

The graph should specify what it actually counts: issues or articles. Maybe the tooltip could say that.
Instead of "count: 49090" => "article count: 49090" or just "articles: 49090" if you want it short.

image

Add feedback button website (LWI)

An idea from Lars to ensure a steady flow of feedback as soon as the interface goes live:

They had a very good experience with the Feedback button on cvce.eu. The idea would be to place it visibly on the interface so that users have a low threshold to report problems, irritation, confusion etc. back to us as soon as the interface is launched. Ideally it connects directly to the Github Issues as well.
What do you think?

We could combine this with a dedicated email [email protected]

/article page add missing info

  • display topics
  • display named entities
  • underlined mentions (will be html spans in region text)
  • make similar topics lighter: no iiif due to bad perf, just basic metadata, the title, the excerpt, entities and common/overlapping topics

add /topic page

  • display list of words and basic info
  • display list of words as a simple word cloud
  • display list of topic in the left column
  • add searh capabilities in the left column

ensure feathers-jwt cookie has been set

Not sure, but authentication on the frontend doesn't create the feathers-jwt cookie.

feathers-jwt cookie contains the authentication JWT and affects all /iiif endpoints. If no authorisation header is being sent, the iiif service of the Impresso Middle Layer proxies to the safest endpoint (creative common).

Blue hover color in article mode conflicts with blue selection color and is misleading

The blue hover color conflicts with the selection color of a search article. When you load a large page and have the mouse in the middle of the page, you might think that the article with the mouse on it is the selected article, (especially if the real article is not visibe in the viewport). I think the hover coloring scheme must be different from the article selection color.
The screen shot illustrates how the left article of https://impresso-project.ch/dev/#/issue/GDL-1902-05-12-a/page/GDL-1902-05-12-a-p0002/article/GDL-1902-05-12-a-i0013 is highlighted by mouse over whereas the real article would be the one on the right.

image

`search`: clean facets look and feel

Clean facets layout:

  • reducing font size and smallcaps the labels;
  • add the relevant informations in the facet items;
  • use the correct number format according to the language;
  • add the "reset" button only when a facet has been selected;
  • the search / clear buttons should appear only when we actually do something with the filter.

Article view in text mode does not jump to article

When pressing the view button in the result list, I expect the viewer (in Text mode) to jump to the article of interest.

image

However, this only happens in Image mode. In Text mode, I end up at the beginning of the page (I suspect):
image

I would expect to end up here:
image

check the proposal for an enriched search field

@tvanbeek @PaulSchroeder try out the branch proposal/input-search

Inspired by vue-tags-input, the aim of this style-only proposal is to integrate the search filters inside the search box.
I think this cans solve the problem of having people use the filter edit feature to perform a new search. In this branch, the filters look like segments of the search input field - which actually reflects the search mechanism.

Of course, filter functions like edit or remove have not been integrated :)....

Layout: remove `font family` declarations

Remove all font-family declarations in the frontend app: basic font family for the body element along with small-caps, serif and sans-serif CSS classes should go in typekit directly.
This way we can easily switch between font families.

add `/saved-queries` page

  • list of user's saved query
  • click on searchquery lead you to the search
  • enable save query in search page

issue viewer: layout improvements for region overlays

Following feedbacks

  • click event listener (and go to the article)
  • bug on dragend event listener, replicate the click event

It is very hard to drag the page up and down. If I click somewhere to move the image and release, I am sent to whichever article I just clicked on. The only option is to find space which has not been OLRed which is hard.

  • add a switch to toggle all regions borders
  • fix style of article selected: different from hovered article
  • fix style of article selected: border instead of background (check visibility)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.