mirror of
https://github.com/estruyf/vscode-front-matter.git
synced 2026-08-07 01:13:08 +02:00
Docs site added
This commit is contained in:
Elio Struyf
@@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface ILogoProps {
|
||||
className: string;
|
||||
}
|
||||
|
||||
export const Logo: React.FunctionComponent<ILogoProps> = ({className}: React.PropsWithChildren<ILogoProps>) => {
|
||||
return (
|
||||
<svg className={className || ""} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="currentcolor"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="currentcolor"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="currentcolor"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="currentcolor"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="currentcolor"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="currentcolor" strokeMiterlimit="10" strokeWidth="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="currentcolor"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="currentcolor"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="currentcolor"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="currentcolor"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="currentcolor"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="currentcolor"/></svg>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './Logo';
|
||||
@@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface ILinkProps {}
|
||||
|
||||
export const Link: React.FunctionComponent<ILinkProps> = (props: React.PropsWithChildren<ILinkProps>) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import Head from 'next/head';
|
||||
import * as React from 'react';
|
||||
|
||||
export interface IDescriptionProps {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const Description: React.FunctionComponent<IDescriptionProps> = ({value}: React.PropsWithChildren<IDescriptionProps>) => {
|
||||
return (
|
||||
<Head>
|
||||
<meta name="description" content={value} />
|
||||
<meta property="og:description" content={value} />
|
||||
<meta property="twitter:description" content={value} />
|
||||
</Head>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
import * as React from 'react';
|
||||
import { publicUrl } from '../../lib/publicUrl';
|
||||
|
||||
export interface IOtherMetaProps {
|
||||
image: string;
|
||||
type?: "website" | "article";
|
||||
}
|
||||
|
||||
export const OtherMeta: React.FunctionComponent<IOtherMetaProps> = ({ image, type }: React.PropsWithChildren<IOtherMetaProps>) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Head>
|
||||
<link rel="canonical" href={`${publicUrl()}${router?.asPath || ""}`} />
|
||||
|
||||
<meta property="og:type" content={type || "website"} />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
|
||||
<meta property="twitter:url" content={`${publicUrl()}${router?.asPath || ""}`} />
|
||||
<meta property="og:url" content={`${publicUrl()}${router?.asPath || ""}`} />
|
||||
|
||||
<meta property="og:image" content={`${publicUrl()}/${image}`} />
|
||||
<meta property="twitter:image" content={`${publicUrl()}/${image}`} />
|
||||
</Head>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import Head from 'next/head';
|
||||
import { Extension } from '../../constants/extension';
|
||||
|
||||
export interface ITitleProps {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const Title: React.FunctionComponent<ITitleProps> = ({value}: React.PropsWithChildren<ITitleProps>) => {
|
||||
return (
|
||||
<Head>
|
||||
<title>{value} | {Extension.name}</title>
|
||||
<meta name="title" content={`${value} | ${Extension.name}`} />
|
||||
<meta property="og:title" content={`${value} | ${Extension.name}`} />
|
||||
<meta property="twitter:title" content={`${value} | ${Extension.name}`} />
|
||||
</Head>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './Description';
|
||||
export * from './OtherMeta';
|
||||
export * from './Title';
|
||||
@@ -0,0 +1,49 @@
|
||||
import * as React from 'react';
|
||||
import { navigation } from '../../constants/navigation';
|
||||
import { Logo } from '../Images';
|
||||
import Link from 'next/Link';
|
||||
import { Extension } from '../../constants/extension';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export interface INavigationProps {}
|
||||
|
||||
export const Navigation: React.FunctionComponent<INavigationProps> = (props: React.PropsWithChildren<INavigationProps>) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
|
||||
<div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
|
||||
<div className="flex items-center">
|
||||
<Link href="/">
|
||||
<a title={Extension.name}>
|
||||
<span className="sr-only">{Extension.name}</span>
|
||||
<Logo className={`text-whisper-500 h-12 w-auto`} />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-10 space-x-4">
|
||||
<div className="hidden ml-10 space-x-8 lg:block">
|
||||
{navigation.main.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
{navigation.social.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
|
||||
<span className="sr-only">{link.name}</span>
|
||||
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
|
||||
{navigation.main.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './Navigation';
|
||||
@@ -0,0 +1,45 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Extension } from '../../constants/extension';
|
||||
|
||||
export interface ICTAProps {}
|
||||
|
||||
export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
|
||||
<div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
|
||||
<div className={`my-4 sm:my-5 lg:my-6`}>
|
||||
<h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
|
||||
<span className="md:block">{strings(`cta_title`)}</span>{' '}
|
||||
<span className="text-teal-500 md:block">{Extension.name}</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{strings(`cta_description`)}
|
||||
</p>
|
||||
|
||||
<div className="mt-10 max-w-sm mx-auto sm:max-w-none">
|
||||
<div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
|
||||
<a href={Extension.extensionLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
|
||||
{strings(`cta_button_primary`)}
|
||||
</a>
|
||||
<a href={`/docs`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
|
||||
{strings(`cta_button_secondary`)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:mx-auto sm:max-w-3xl sm:px-6">
|
||||
<div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
|
||||
<div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
|
||||
<img className={`w-full lg:h-full lg:w-auto lg:max-w-none`} src={`/assets/site-preview.png`} alt={`Site preview`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { features } from '../../constants/features';
|
||||
import { CheckIcon } from '@heroicons/react/outline';
|
||||
|
||||
export interface IFeaturesProps {}
|
||||
|
||||
export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.PropsWithChildren<IFeaturesProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={``}>
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-extrabold">{strings(`features_title`)}</h2>
|
||||
<p className="mt-4 text-lg text-whisper-700">
|
||||
{strings(`features_description`)}
|
||||
</p>
|
||||
</div>
|
||||
<dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative">
|
||||
<dt>
|
||||
<CheckIcon className="absolute h-6 w-6 text-teal-500" aria-hidden="true" />
|
||||
<p className="ml-9 text-lg leading-6 font-medium text-whisper-500">{strings(feature.name)}</p>
|
||||
</dt>
|
||||
<dd className="mt-2 ml-9 text-base text-whisper-800">{strings(feature.description)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react';
|
||||
import { Extension } from '../../constants/extension';
|
||||
import { navigation } from '../../constants/navigation';
|
||||
|
||||
export interface IFooterProps {}
|
||||
|
||||
export const Footer: React.FunctionComponent<IFooterProps> = (props: React.PropsWithChildren<IFooterProps>) => {
|
||||
return (
|
||||
<footer className="bg-vulcan-600">
|
||||
<div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
|
||||
<nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
|
||||
{navigation.main.map((item) => (
|
||||
<div key={item.name} className="px-5 py-2">
|
||||
<a href={item.href} title={item.title} className="text-base text-gray-400 hover:text-gray-500">
|
||||
{item.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
<div className="mt-8 flex justify-center space-x-6">
|
||||
<a href="https://visitorbadge.io/status?path=https%3A%2F%2Ffrontmatter.codes" title={`Daily Front Matter visitors`}>
|
||||
<img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes&countColor=%23060A15&labelColor=%23060A15" />
|
||||
</a>
|
||||
|
||||
{navigation.social.map((item) => (
|
||||
<a key={item.name} title={item.title} href={item.href} className="text-gray-400 hover:text-gray-500" rel={`noopener noreferrer`}>
|
||||
<span className="sr-only">{item.name}</span>
|
||||
<item.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-8 text-center text-base text-whisper-900">© 2021 {Extension.name}. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export interface IGeneratorsProps {}
|
||||
|
||||
export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: React.PropsWithChildren<IGeneratorsProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="bg-whisper-100">
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
|
||||
{strings(`generators_title`)}
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/11ty.svg" alt="11ty" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/docusaurus.svg" alt="Docusaurus" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/gatsby.svg" alt="Gatsby" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/hugo.svg" alt="Hugo" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/jekyll.svg" alt="Jekyll" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/nextjs.svg" alt="Next.js" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from 'react';
|
||||
import { Navigation } from '../Navigation';
|
||||
import { Footer } from './Footer';
|
||||
|
||||
export interface ILayoutProps {}
|
||||
|
||||
export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
|
||||
return (
|
||||
<div className={`flex flex-col h-screen`}>
|
||||
<header>
|
||||
<Navigation />
|
||||
</header>
|
||||
|
||||
<main className={`flex-grow`}>
|
||||
{props.children}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface IPageProps {}
|
||||
|
||||
export const Page: React.FunctionComponent<IPageProps> = (props: React.PropsWithChildren<IPageProps>) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user