Address comments
continuous-integration/drone/push Build was killed
Details
continuous-integration/drone/push Build was killed
Details
This commit is contained in:
parent
28bb2ab917
commit
9d33a5b834
|
@ -2,14 +2,63 @@
|
||||||
|
|
||||||
All pages are a separate React component in our repository, under the [pages](../pages) folder. This is a [special directory](https://nextjs.org/docs/tag/v11.0.0/basic-features/pages) used by Next.js which maps a React component exported from this directory to a page on a url.
|
All pages are a separate React component in our repository, under the [pages](../pages) folder. This is a [special directory](https://nextjs.org/docs/tag/v11.0.0/basic-features/pages) used by Next.js which maps a React component exported from this directory to a page on a url.
|
||||||
|
|
||||||
The React component exported by these files are wrapped by the [`App` component](../pages/_app.tsx). This lets us reuse code in between pages which makes it a good place to render the [navbar](../components/Navbar.tsx), [footer](../components/Footer.tsx), [background shapes](../components/ShapesBackground.tsx), and the general css layout of a page.
|
The React components exported by these files are wrapped by the [`App` component](../pages/_app.tsx). This lets us reuse code in between pages which makes it a good place to render the [navbar](../components/Navbar.tsx), [footer](../components/Footer.tsx), [background shapes](../components/ShapesBackground.tsx), and the general CSS layout of a page.
|
||||||
|
|
||||||
|
## Title
|
||||||
|
|
||||||
|
We use a custom [`Title` component](../components/Title.tsx) to set the title on our pages. This is a very simple component and is just a wrapper around the Next.js [`Head` component](https://nextjs.org/docs/tag/v11.0.0/api-reference/next/head). It also automatically prefixes each title with "CSC - University of Waterloo". Look at the [code](../components/Title.tsx) for more details.
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Title } from "@/components/Title"
|
||||||
|
|
||||||
|
function FooPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title>Title in the tab</Title>
|
||||||
|
<div>Content of the page</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// The page's content will be "Content of the page"
|
||||||
|
// The title of the page (as shown at the top of the browser in the tab) is "CSC - University of Waterloo - Title in the tab"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example 2
|
||||||
|
|
||||||
|
You can also pass in an array of strings, and the [`Title` component](../components/Title.tsx) will automatically join them with " - ".
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Title } from "@/components/Title"
|
||||||
|
|
||||||
|
function FooPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Title>{["Foo", "Bar", "Baz"]}</Title>
|
||||||
|
<div>Content of the page</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// The page's content will be "Content of the page"
|
||||||
|
// The title of the page (as shown at the top of the browser in the tab) is "CSC - University of Waterloo - Foo - Bar - Baz"
|
||||||
|
```
|
||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
|
|
||||||
Most pages are wrapped with the [`DefaultLayout`](../components/DefaultLayout.tsx) component which limits the page width and adds the necessary margins and paddings. However, some pages need to override these default styles to accomodate for their specific design. For example:
|
Most pages are wrapped with the [`DefaultLayout`](../components/DefaultLayout.tsx) component which limits the page width and adds the necessary margins and paddings. However, some pages need to override these default styles to accomodate for their specific design. For example:
|
||||||
|
|
||||||
- The [home page](../pages/index.tsx) is wider than all the other pages.
|
- The [home page](../pages/index.tsx) is wider than all the other pages.
|
||||||
- The [about us](../pages/about/index.tsx) needs the entire screen width to properly render the bubbles.
|
- The [about us](../pages/about/index.tsx) needs the entire screen width to properly render the [bubbles](../components/Bubble.tsx).
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="static/bubbles-example.png" alt="bubble on about page" />
|
||||||
|
<figcaption>
|
||||||
|
The bubble component on the About us page
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
We have an opt-in model for using a custom layout for pages. This is enabled by the static `Layout` function on a React component for a page.
|
We have an opt-in model for using a custom layout for pages. This is enabled by the static `Layout` function on a React component for a page.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue