Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
74 lines (69 sloc) 3.23 KB
import React from 'react'
import Link from 'next/link'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { getAbsoluteURL } from 'utils/utils'
interface MainLayoutProps {
title: string
description: string
image?: string
const MainLayout: React.FunctionComponent<MainLayoutProps> = ({ children, title, description, image }) => {
const fullTitle = `${title} - Playwright Community 🎭`
const router = useRouter()
if (!image) {
const searchParams = new URLSearchParams()
searchParams.set("path", router.pathname)
image = `/api/thumbnail?${searchParams}`
const fullImageURL = getAbsoluteURL(image)
return (
<meta name="title" content={fullTitle} />
<meta name="description" content={description} />
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎭</text></svg>" />
<meta property="og:title" content={fullTitle} />
<meta property="og:type" content="website" />
<meta property="og:description" content={description} />
<meta name="twitter:card" content="summary" />
<meta property="og:image" content={fullImageURL} />
<meta name="twitter:image" content={fullImageURL} />
<meta property="twitter:title" content={fullTitle} />
<meta property="twitter:description" content={description} />
<nav className="w-full py-4 px-3 shadow" style={{ backgroundColor: "#169de0" }}>
<div className="w-full container mx-auto items-center justify-between">
<ul className="flex items-center justify-between font-bold text-sm text-white uppercase no-underline">
<Link href="/">
<a className="hover:text-gray-200">
Playwright Community 🎭
<span className="float-right">
<a className="hover:text-gray-200 hover:underspan px-5 hidden md:inline" href="">Try Playwright</a>
<a className="hover:text-gray-200 hover:underspan float-right" href="">Playwright on GitHub</a>
<div className="container mx-auto p-3">
<footer className="w-full border-t bg-white py-4">
<div className="w-full container mx-auto flex flex-col items-center">
<a href="" className="ml-1">
Max Schmitt
export default MainLayout