Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/382449 )
Change subject: New: render pages
......................................................................
New: render pages
Styling will come in T173330. A common component for header, footer, and
last modified will come in T173326.
Bug: T173328
Change-Id: Ib2eeedf4b1f8f73837af332329738c7a3f7c24b3
---
A src/common/components/header-level/header-level.tsx
A src/common/components/section/section.tsx
M src/common/pages/home.tsx
M src/common/pages/wiki.tsx
4 files changed, 89 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/49/382449/1
diff --git a/src/common/components/header-level/header-level.tsx
b/src/common/components/header-level/header-level.tsx
new file mode 100644
index 0000000..6b5ba24
--- /dev/null
+++ b/src/common/components/header-level/header-level.tsx
@@ -0,0 +1,26 @@
+import { h } from "preact";
+import { ChildrenProps, ClassProps, classOf } from "../preact-utils";
+
+export default function HeaderLevel({
+ level,
+ children,
+ ...props
+}: { level: number } & ChildrenProps & ClassProps): JSX.Element {
+ const classes = classOf("HeaderLevel", props.class);
+ switch (level) {
+ case 0:
+ return <div class={classes}>{children}</div>;
+ case 1:
+ return <h1 class={classes}>{children}</h1>;
+ case 2:
+ return <h2 class={classes}>{children}</h2>;
+ case 3:
+ return <h3 class={classes}>{children}</h3>;
+ case 4:
+ return <h4 class={classes}>{children}</h4>;
+ case 5:
+ return <h5 class={classes}>{children}</h5>;
+ default:
+ return <h6 class={classes}>{children}</h6>;
+ }
+}
diff --git a/src/common/components/section/section.tsx
b/src/common/components/section/section.tsx
new file mode 100644
index 0000000..8b466d8
--- /dev/null
+++ b/src/common/components/section/section.tsx
@@ -0,0 +1,22 @@
+import { h } from "preact";
+import { PageSection } from "../../models/page/page";
+import HeaderLevel from "../header-level/header-level";
+
+export interface Props {
+ section: PageSection;
+}
+
+export default function Section({ section }: Props): JSX.Element {
+ return (
+ <section class="Section">
+ <HeaderLevel class="Section-title" level={section.level}>
+ <div dangerouslySetInnerHTML={{ __html: section.titleHTML }} />
+ </HeaderLevel>
+
+ <div
+ className="Section-body"
+ dangerouslySetInnerHTML={{ __html: section.contentHTML }}
+ />
+ </section>
+ );
+}
diff --git a/src/common/pages/home.tsx b/src/common/pages/home.tsx
index 7ca4a95..bb478eb 100644
--- a/src/common/pages/home.tsx
+++ b/src/common/pages/home.tsx
@@ -26,13 +26,25 @@
},
{
title: "Bill_&_Ted's_Excellent_Adventure",
- text: "With two paragraphs"
+ text: "With two paragraphs, unencoded path, and styled title"
}
];
const testPages = [
{
title: "Ice_cream",
text: "A normal article"
+ },
+ {
+ title: "Cake_(disambiguation)",
+ text: "Disambiguation"
+ },
+ {
+ title: "Cheese_cake",
+ text: "Redirect"
+ },
+ {
+ title: "Carrot cake",
+ text: "Encoding redirect"
}
];
return (
diff --git a/src/common/pages/wiki.tsx b/src/common/pages/wiki.tsx
index af7e8d6..9044499 100644
--- a/src/common/pages/wiki.tsx
+++ b/src/common/pages/wiki.tsx
@@ -1,7 +1,12 @@
import { h } from "preact";
import App from "../components/app/app";
+import Content from "../components/content/content";
+import { Page as PageModel } from "../models/page/page";
import { PageTitleID, PageTitlePath } from "../models/page/title";
+import Page from "../components/page/page";
import { RouteParams } from "../routers/route";
+import { requestPage } from "../data-clients/page-data-client";
+import Section from "../components/section/section";
export interface Params extends RouteParams {
/**
@@ -12,10 +17,30 @@
}
export interface Props {
- title: string;
+ page: PageModel;
}
export const getInitialProps = ({ title }: Params): Promise<Props> =>
- Promise.resolve({ title });
+ requestPage({ titlePath: title }).then(page => ({ page }));
-export const Component = ({ title }: Props): JSX.Element => <App>{title}</App>;
+export const Component = ({ page }: Props): JSX.Element => (
+ <App>
+ <Page
+ title={<Title page={page} />}
+ subtitle={page.descriptionText}
+ footer={<Footer page={page} />}
+ >
+ {page.sections.map(section => <Section section={section} />)}
+ </Page>
+ </App>
+);
+
+const Title = ({ page }: Props) => (
+ <Content>
+ <h1 dangerouslySetInnerHTML={{ __html: page.titleHTML }} />
+ </Content>
+);
+
+const Footer = ({ page }: Props) => (
+ <span>Last updated {page.lastModified.toLocaleString("en-GB")}</span>
+);
--
To view, visit https://gerrit.wikimedia.org/r/382449
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib2eeedf4b1f8f73837af332329738c7a3f7c24b3
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
