Websites in OrgPad

Created by Pavel Klavík

Support for custom domains

For the future.

✅ Website

Single table in PostgresDB.

• id - Random UUID.
• name - Chosen by the owner.
• owner - UUID of owner.
• creation_date
• val - Arbitrary JSON.

✅ /w/<website-name>

Arbitrary name chosen by website owner. Letters, numbers, -, _.

✅ Routing

Bidi for routing between client and server.

✅ Handler for website

1. Load website data from DB.
2. Lookup the page name within data.
3. Decide what is displayed and send the information to the client.
   • Menu at the top.
   • Which website is loaded.

Add simple CSS so it becomes mobile friendly according to Google

Add canonical URLs

https://yoast.com/what-is-a-canonical-url/

Or add some quick editor

SEO

There should be a single H1 tag, so we should probably shift unit titles to H2,H3,H4

✅ Routing

Mapping of page-ids to their page-names, further suffixes should be possible.

Editor for these websites

Create them directly in REPL maybe.

✅ Pages

Each page has some id (random UUID) and  some short-link or URL.

✅ Some of them may have submenu

Further levels not possible at the moment.

We can use the same format as for the top level.

✅ We need support for multiple menus within one website

For example, these menus might be in multiple languages.

Or we want to display some specific menu for a part of the opened website.

✅ Top level pages/links

A sequence of maps, each describing a single top item:

• :menu-item/id - Random UUID.
• :menu-item/label - Text displayed.
• :menu-item/short-link - When within OrgPad,
• :menu-item/url - For external URLs.
• :menu-item/children - Not nil when there are some children.

✅ Material-ui Menu component probably

✅ /w/<website-name>/<page-name>

Just for landing page can be fixed

✅ Menu described by data

Each item will link to something.

• Links for some OrgPage (short-link).
• External links.

✅ Simple CSS rendering

✅ Rendering of menu on the client

We have some data which describe the menu. We will render React component from it.

✅ External websites in menu

Should lead to external URLs immediately

Detect when the screen is too small and to switch to sandwich rendering (for mobile)

Responsively.

✅ Loading of data over WS

✅ A link to the same OrgPage using URL fragments, but opened differently, will not reload the data

https://www.rfc-editor.org/rfc/rfc3986#section-3.5

• when fragment changes and is contained in the OrgPage, there is no loading - just refocus (if setup in the fragment description)
• uses parts of the paths/ presentation infrastructure

TODO:

• isn't supported in embedded OrgPages currently
• can probably be refactored/ better integrated
• support in static sites/ perhaps screenshots
• No support for hidden stuff currently, but basic preparations done

✅ Static HTML

This is served for all the routes, pretty much same.

✅ /s/<UUID encoded in base64>

generate further links for these initial setups

Loads short link but doesn't refocus camera for some reason.

Přihlášený

Se zavřeným postranním panelem - Sandwich, logo, search, profilovka

S otevřeným postranním panelem - Křížek, logo, profilovka

✅ Displaying correct metadata in static HTML

Odhlášený

Se zavřeným postranním panelem - Sandwich, logo, search, tlačítko pro vstup

S otevřeným postranním panelem - Křížek, logo, tlačítko pro vstup

~ This is exactly what one can do in each step of a presentation

We want to reuse this code.

There are big similarities but the integration could be much better. Probably could do fragments for each presentation step and just link these from the presentation/ path.

✅ How should OrgPage open at the beginning

1. What is opened.
2. What is visible on the camera.
3. Ability to hide some stuff.

Přihlášený

Se zavřeným postranním panelem - Sandwich, logo, profilovka

S otevřeným postranním panelem - Křížek, logo, profilovka

Přihlášený

Se zavřeným postranním panelem - Sandwich, logo, profilovka

S otevřeným postranním panelem - Křížek, logo, profilovka

Dashboard

Administrace

Minipanel

Website

Settings

Odhlášený

Se zavřeným postranním panelem - Sandwich, logo, tlačítko pro vstup

S otevřeným postranním panelem - Křížek, logo, tlačítko pro vstup

Přihlášený

Se zavřeným postranním panelem - Sandwich, logo, profilovka

S otevřeným postranním panelem - Křížek, logo, profilovka

OrgPage

Přihlášený

Se zavřeným postranním panelem - Sandwich

S otevřeným postranním panelem - Křížek, logo, profilovka

Odhlášený

Se zavřeným postranním panelem - Sandwich

S otevřeným postranním panelem - Křížek, logo, tlačítko pro vstup

Nice to have

Dialogy

• zohledňují velikost obrazovky
• Mají volitelně navrchu logo

focus při searchi v dashboardu (přechod do OrgPage -> vymazat active)

don't download tinymce on websites?

back doesn't seem to work?

Unknown website ?

;; Split into mini-side-panel? Decide one level up whether small screen?

vrtění se buněk bez obrázku a bez obsahu

dashboard microscopic scroll-bar on small screen (at least in dev-tools)

side scroll in checkout