website/_includes/layouts/base.tsx

export default function({ title, description, children, comp, metas, links, author, date }) {
  return (
    <html lang="en-CA">
      <head>
        <title>{title}</title>
        <meta charSet="utf-8"/>
        <meta name="description" content={description}/>
        <meta name="author" content="Foster Hangdaan"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="color-scheme" content="dark light"/>
        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/>
        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/>
        {Array.isArray(metas) && metas.length > 0 &&
          metas.map(m => <meta name={m.name} content={m.content}/>)
        }
        <link rel="stylesheet" href="/styles/main.css"/>
        <link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" />
        <link rel="icon" type="image/png" href="/icons/tabicon-32.png" sizes="32x32" />
        <link rel="icon" type="image/png" href="/icons/tabicon-96.png" sizes="96x96" />
        <link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" />
        <link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" />
        {Array.isArray(links) && links.length > 0 &&
          links.map(l => <link rel={l.rel} href={l.href} type={l.type} title={l.title}/>)
        }
      </head>
      <body>
        { comp.navbar() }
        { comp.header({title, description, author, date}) }
        <main>{children}</main>
        { comp.footer() }
      </body>
    </html>
  );
}
Display date on header along with author 2023-08-05 17:47:37 -04:00			`export default function({ title, description, children, comp, metas, links, author, date }) {`
Add home page and main layout 2023-07-23 16:44:56 -04:00			`return (`
Update html metadata - Add global `lang` attribute - Add metadata: `author`, `color-scheme` and `theme-color`. 2023-08-04 16:14:14 -04:00			`<html lang="en-CA">`
Add home page and main layout 2023-07-23 16:44:56 -04:00			`<head>`
Remove heading and subheading metadata We just use `title` and `description` now. 2023-08-03 18:31:28 -04:00			`<title>{title}</title>`
Update html metadata - Add global `lang` attribute - Add metadata: `author`, `color-scheme` and `theme-color`. 2023-08-04 16:14:14 -04:00			`<meta charSet="utf-8"/>`
Remove heading and subheading metadata We just use `title` and `description` now. 2023-08-03 18:31:28 -04:00			`<meta name="description" content={description}/>`
Update html metadata - Add global `lang` attribute - Add metadata: `author`, `color-scheme` and `theme-color`. 2023-08-04 16:14:14 -04:00			`<meta name="author" content="Foster Hangdaan"/>`
Set viewport meta tag 2023-07-23 21:50:39 -04:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0"/>`
Update html metadata - Add global `lang` attribute - Add metadata: `author`, `color-scheme` and `theme-color`. 2023-08-04 16:14:14 -04:00			`<meta name="color-scheme" content="dark light"/>`
			`<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/>`
			`<meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/>`
Accept meta and links data in base layout This allows you to add custom `<meta/>` and `<links/>` tags inside the document's `<head>`. 2023-08-05 12:20:31 -04:00			`{Array.isArray(metas) && metas.length > 0 &&`
			`metas.map(m => <meta name={m.name} content={m.content}/>)`
			`}`
Fix link of stylesheet Use an absolute path so that it always starts at the root of the project. 2023-07-26 09:08:26 -04:00			`<link rel="stylesheet" href="/styles/main.css"/>`
Add tab icons 2023-08-01 21:56:56 -04:00			`<link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" />`
			`<link rel="icon" type="image/png" href="/icons/tabicon-32.png" sizes="32x32" />`
			`<link rel="icon" type="image/png" href="/icons/tabicon-96.png" sizes="96x96" />`
			`<link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" />`
			`<link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" />`
Accept meta and links data in base layout This allows you to add custom `<meta/>` and `<links/>` tags inside the document's `<head>`. 2023-08-05 12:20:31 -04:00			`{Array.isArray(links) && links.length > 0 &&`
			`links.map(l => <link rel={l.rel} href={l.href} type={l.type} title={l.title}/>)`
			`}`
Add home page and main layout 2023-07-23 16:44:56 -04:00			`</head>`
			`<body>`
Under the hood changes to container styles Previously, the entire main content was fitted inside one element. Now, each section and container handle their own paddings and margins. This allows for more flexibility as to how each container can be styled. 2023-07-26 22:31:46 -04:00			`{ comp.navbar() }`
Display date on header along with author 2023-08-05 17:47:37 -04:00			`{ comp.header({title, description, author, date}) }`
Wrap content inside `main` element 2023-08-03 18:33:45 -04:00			`<main>{children}</main>`
Add footer component 2023-07-26 23:04:30 -04:00			`{ comp.footer() }`
Add home page and main layout 2023-07-23 16:44:56 -04:00			`</body>`
			`</html>`
			`);`
			`}`