Compare commits
54 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f46419f800 | ||
|
|
94a89be841 | ||
|
|
00224e99a0 | ||
|
|
cfd6eb6fb3 | ||
|
|
701c5ccb9e | ||
|
|
bf797df982 | ||
|
|
0f710ffefb | ||
|
|
2a87f08287 | ||
|
|
c27c5885b1 | ||
|
|
e5771b0fc9 | ||
|
|
c9a5232d43 | ||
|
|
266faf9081 | ||
|
|
cdf3dc7f2e | ||
|
|
1bcfa9d9f0 | ||
|
|
d2dd4aed37 | ||
|
|
6eea02622a | ||
|
|
395b5da765 | ||
|
|
635f033193 | ||
|
|
14b100ea20 | ||
|
|
693cc3611c | ||
|
|
a9591e1a56 | ||
|
|
7a702f09a0 | ||
|
|
04ccdbb646 | ||
|
|
b2e661d9e3 | ||
|
|
d2161ff46c | ||
|
|
8e699db62d | ||
|
|
25201e6859 | ||
|
|
c1c14b814c | ||
|
|
001a49b34e | ||
|
|
08fcf7cf15 | ||
|
|
78db3d0b96 | ||
|
|
ed460fde4f | ||
|
|
1471203b68 | ||
|
|
53093ba459 | ||
|
|
f873961439 | ||
|
|
5146bd04df | ||
|
|
9247884a5b | ||
|
|
e159a6239c | ||
|
|
626cc773f4 | ||
|
|
1e26329d38 | ||
|
|
58e0b4bde5 | ||
|
|
b072b920fd | ||
|
|
2758c94434 | ||
|
|
83c086879d | ||
|
|
0429eaa9ed | ||
|
|
73c35e3b44 | ||
|
|
089f21ca72 | ||
|
|
0efdb019a0 | ||
|
|
57623378fb | ||
|
|
27566da617 | ||
|
|
c429113394 | ||
|
|
2e12942e22 | ||
|
|
fa5b698571 | ||
|
|
4237569390 |
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: "{{name}}"
|
||||
slug: "/{{kebabCase name}}/"
|
||||
description:
|
||||
title:
|
||||
slug:
|
||||
description:
|
||||
date: 2019-08-22T15:20:28.000Z
|
||||
lastmod: 2019-08-22T15:20:28.000Z
|
||||
weight: 1
|
||||
type: documentation
|
||||
---
|
||||
|
||||
16
.vscode/settings.json
vendored
@@ -8,26 +8,10 @@
|
||||
},
|
||||
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
|
||||
"typescript.tsc.autoDetect": "off",
|
||||
"frontMatter.content.folders": [
|
||||
{
|
||||
"title": "documentation",
|
||||
"fsPath": "/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
|
||||
"paths": [
|
||||
"/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
|
||||
"\\Users\\eliostruyf\\nodejs\\vscode\\vscode-front-matter\\docs\\content\\docs"
|
||||
]
|
||||
}
|
||||
],
|
||||
"eliostruyf.writingstyleguide.terms.isDisabled": true,
|
||||
"eliostruyf.writingstyleguide.biasFree.isDisabled": true,
|
||||
"exportall.config.folderListener": [
|
||||
"/src/pagesView/state/atom",
|
||||
"/src/pagesView/state/selectors"
|
||||
],
|
||||
"frontMatter.content.pageFolders": [
|
||||
{
|
||||
"title": "documentation",
|
||||
"path": "[[workspace]]/docs/content/docs"
|
||||
}
|
||||
]
|
||||
}
|
||||
16
CHANGELOG.md
@@ -1,6 +1,20 @@
|
||||
# Change Log
|
||||
|
||||
## [3.1.0] - (Upcoming release)
|
||||
## [4.0.0] - 2021-09-22 - [Release Notes](https://beta.frontmatter.codes/updates/v4_0_0)
|
||||
|
||||
- [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
|
||||
- [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter
|
||||
- [#103](https://github.com/estruyf/vscode-front-matter/issues/103): Added title and description field to the metadata section
|
||||
- [#104](https://github.com/estruyf/vscode-front-matter/issues/104): Allow to set images in front matter from the metadata panel section
|
||||
- [#105](https://github.com/estruyf/vscode-front-matter/issues/105): Content Type support with backwards compatibility
|
||||
- [#106](https://github.com/estruyf/vscode-front-matter/issues/106): Introduction of team level settings for Front Matter
|
||||
- [#107](https://github.com/estruyf/vscode-front-matter/issues/107): Number field support added in content type fields
|
||||
- [#108](https://github.com/estruyf/vscode-front-matter/issues/108): Choice field support added in content type fields
|
||||
- [#109](https://github.com/estruyf/vscode-front-matter/issues/109): JSON Config script added to automate the JSON schema
|
||||
- [#111](https://github.com/estruyf/vscode-front-matter/issues/111): Insert media into the markdown contents
|
||||
- [#112](https://github.com/estruyf/vscode-front-matter/issues/112): Add snippet support for media insertion
|
||||
|
||||
## [3.1.0] - 2021-09-10
|
||||
|
||||
- BETA version available at: [beta.frontmatter.codes](https://beta.frontmatter.codes)
|
||||
- [#72](https://github.com/estruyf/vscode-front-matter/issues/72): Media view on the dashboard
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<h2 align="center">Front Matter BETA is an essential Visual Studio Code extension when you want to manage the markdown pages of your static sites.</h2>
|
||||
<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>
|
||||
|
||||
<h2 align="center">This is the BETA version of Front Matter. If you were looking for the main version, check it out at <a href="https://frontmatter.codes">frontmatter.codes</a></h2>
|
||||
|
||||
@@ -28,6 +28,10 @@
|
||||
</a>
|
||||
</h2>
|
||||
|
||||

|
||||
|
||||
## What is Front Matter?
|
||||
|
||||
Front Matter BETA is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.
|
||||
|
||||
The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
|
||||
@@ -41,11 +45,15 @@ Our main extension features are:
|
||||
- and many more
|
||||
|
||||
<p align="center">
|
||||
<img src="./assets/v2.5.0/site-preview.png" alt="Site preview" style="display: inline-block" />
|
||||
<img src="./assets/v4.0.0/preview.png" alt="Site preview" style="display: inline-block" />
|
||||
</p>
|
||||
|
||||
> If you see something missing in your article creation flow, please feel free to reach out.
|
||||
|
||||
**Version 4**
|
||||
|
||||
Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
|
||||
|
||||
**Version 3**
|
||||
|
||||
In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.
|
||||
@@ -60,6 +68,28 @@ In version v2 we released the re-designed sidebar panel with improved SEO suppor
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Installation
|
||||
|
||||
You can get the extension via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
|
||||
|
||||
> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).
|
||||
|
||||
### Beta version
|
||||
|
||||
If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
|
||||
|
||||
> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
|
||||
|
||||
## Documentation
|
||||
|
||||
<h2 align="center">
|
||||
<a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
|
||||
Check out the extension documentation at beta.frontmatter.codes
|
||||
|
||||
34
README.md
@@ -4,7 +4,7 @@
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<h2 align="center">Front Matter is an essential Visual Studio Code extension when you want to manage the markdown pages of your static sites.</h2>
|
||||
<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
|
||||
@@ -26,6 +26,10 @@
|
||||
</a>
|
||||
</h2>
|
||||
|
||||

|
||||
|
||||
## What is Front Matter?
|
||||
|
||||
Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.
|
||||
|
||||
The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
|
||||
@@ -39,11 +43,15 @@ Our main extension features are:
|
||||
- and many more
|
||||
|
||||
<p align="center">
|
||||
<img src="./assets/v2.5.0/site-preview.png" alt="Site preview" style="display: inline-block" />
|
||||
<img src="./assets/v4.0.0/preview.png" alt="Site preview" style="display: inline-block" />
|
||||
</p>
|
||||
|
||||
> If you see something missing in your article creation flow, please feel free to reach out.
|
||||
|
||||
**Version 4**
|
||||
|
||||
Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
|
||||
|
||||
**Version 3**
|
||||
|
||||
In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.
|
||||
@@ -58,6 +66,28 @@ In version v2 we released the re-designed sidebar panel with improved SEO suppor
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Installation
|
||||
|
||||
You can get the extension via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
|
||||
|
||||
> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).
|
||||
|
||||
### Beta version
|
||||
|
||||
If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
|
||||
|
||||
> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
|
||||
|
||||
## Documentation
|
||||
|
||||
<h2 align="center">
|
||||
<a href="https://frontmatter.codes" title="Documentation @ frontmatter.codes">
|
||||
Check out the extension documentation at frontmatter.codes
|
||||
|
||||
BIN
assets/frontmatter-mag-min.png
Normal file
|
After Width: | Height: | Size: 107 KiB |
@@ -50,6 +50,15 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.frontmatter.media_selection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.spinner,
|
||||
.spinner:before,
|
||||
.spinner:after {
|
||||
@@ -428,6 +437,67 @@ input:checked + .field__toggle__slider:before {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.metadata_field__textarea, .metadata_field__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.metadata_field__limit {
|
||||
color: var(--vscode-inputValidation-warningBorder);
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.metadata_field__number {
|
||||
border: 1px solid var(--vscode-inputValidation-infoBorder) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.metadata_field__choice {
|
||||
border: 1px solid var(--vscode-inputValidation-infoBorder) !important;
|
||||
outline: none !important;
|
||||
width: 100%;
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
color: var(--vscode-input-foreground);
|
||||
background-color: var(--vscode-input-background);
|
||||
}
|
||||
|
||||
.metadata_field__choice::placeholde {
|
||||
color: var(--vscode-input-placeholderForeground);
|
||||
}
|
||||
|
||||
.metadata_field__datetime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.metadata_field__datetime > .react-datepicker-wrapper {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.metadata_field__datetime > button {
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
background-color: var(--vscode-button-secondaryBackground);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.metadata_field__preview_image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 16rem;
|
||||
}
|
||||
|
||||
.metadata_field__preview_image__remove {
|
||||
background-color: var(--vscode-inputValidation-errorBackground);
|
||||
color: var(--vscode-inputValidation-errorForeground);
|
||||
}
|
||||
|
||||
.metadata_field__preview_image__remove:hover {
|
||||
background-color: var(--vscode-inputValidation-errorBackground);
|
||||
color: var(--vscode-inputValidation-errorForeground);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
/* File list */
|
||||
.file_list vscode-label {
|
||||
border-bottom: 1px solid var(--vscode-foreground);
|
||||
@@ -506,4 +576,22 @@ input:checked + .field__toggle__slider:before {
|
||||
|
||||
.sponsor a > span {
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
/* Timepicker */
|
||||
.react-datepicker button:hover {
|
||||
background-color: none !important;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
transform: translate3d(15px, 0px, 0px) !important;
|
||||
}
|
||||
|
||||
.react-datepicker-time__input {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.react-datepicker-time__input input {
|
||||
border: 1px solid #aeaeae !important;
|
||||
}
|
||||
BIN
assets/v4.0.0/banner-v2.png
Normal file
|
After Width: | Height: | Size: 437 KiB |
BIN
assets/v4.0.0/preview.png
Normal file
|
After Width: | Height: | Size: 128 KiB |
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
34
docs/.gitignore
vendored
@@ -1,34 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
@@ -1,34 +0,0 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
@@ -1,59 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import * as React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
|
||||
export interface IMarkdownProps {
|
||||
content: string | undefined;
|
||||
}
|
||||
|
||||
export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: React.PropsWithChildren<IMarkdownProps>) => {
|
||||
|
||||
const getTitle = (props: any) => {
|
||||
const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
|
||||
return title;
|
||||
};
|
||||
|
||||
const generateId = (props: any) => {
|
||||
const title = getTitle(props);
|
||||
return title.toLowerCase().replace(/\s/g, '-');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const elms = document.querySelectorAll('blockquote > p > strong');
|
||||
for (let i = 0; i < elms.length; i++) {
|
||||
const elm = elms[i];
|
||||
if (elm.textContent?.toLowerCase() === "important") {
|
||||
elm.parentElement?.parentElement?.classList.add('important');
|
||||
}
|
||||
}
|
||||
}, ['']);
|
||||
|
||||
if (!content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`markdown`}>
|
||||
{/* eslint-disable react/no-children-prop */}
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
a: ({node, ...props}) => {
|
||||
const url = props?.href || "";
|
||||
const vscodeUrl = props && (props as any)["data-vscode"] ? (props as any)["data-vscode"] : "";
|
||||
const title = getTitle(props);
|
||||
if (vscodeUrl) {
|
||||
return <Link key={vscodeUrl as string} href={vscodeUrl as string}><a title={title}>{title}</a></Link>;
|
||||
}
|
||||
return <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
|
||||
},
|
||||
h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),
|
||||
h2: ({node, ...props}) => (<h2 id={generateId(props)}>{getTitle(props)}</h2>),
|
||||
h3: ({node, ...props}) => (<h3 id={generateId(props)}>{getTitle(props)}</h3>),
|
||||
}}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
children={content} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { PageFrontMatter } from '../../models/PageFrontMatter';
|
||||
import { PageInfo } from './PageInfo';
|
||||
import { Sidebar } from './Sidebar';
|
||||
|
||||
export interface IPageProps {
|
||||
items: PageFrontMatter[];
|
||||
page: PageFrontMatter | undefined;
|
||||
}
|
||||
|
||||
export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
|
||||
return (
|
||||
<div className={`mb-6 py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
|
||||
<div className={`lg:flex`}>
|
||||
|
||||
<div className={`h-screen sticky top-16 lg:block hidden lg:w-60 xl:w-72`}>
|
||||
<Sidebar items={items} />
|
||||
</div>
|
||||
|
||||
<div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible`}>
|
||||
{children}
|
||||
|
||||
<PageInfo page={page} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { format, parseJSON } from 'date-fns';
|
||||
import * as React from 'react';
|
||||
import { Extension } from '../../constants/extension';
|
||||
import { PageFrontMatter } from '../../models/PageFrontMatter';
|
||||
|
||||
export interface IPageInfoProps {
|
||||
page: PageFrontMatter | undefined;
|
||||
}
|
||||
|
||||
export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page}: React.PropsWithChildren<IPageInfoProps>) => {
|
||||
|
||||
if (!page) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const date = parseJSON(page.date);
|
||||
|
||||
return (
|
||||
<div className={`mt-16`}>
|
||||
{
|
||||
date && (
|
||||
<div className="text-base">
|
||||
<span>Last updated on</span>{` `}<span>{format(date, `MMM dd, yyyy`)}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="mt-2 text-sm">
|
||||
<p>Did you spot an issue in our documentation, or want to contribute? Edit this page on <a className={`text-teal-500 hover:text-teal-900`} href={`${Extension.githubLink}/edit/main/docs/content/docs/${page.fileName}.md`} target="_blank" rel={`noopener noreferrer`}>Github</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { PageFrontMatter } from '../../models/PageFrontMatter';
|
||||
import { Link } from '../Link/Link';
|
||||
import { Section } from '../Link/Section';
|
||||
|
||||
export interface ISidebarProps {
|
||||
items: PageFrontMatter[];
|
||||
}
|
||||
|
||||
export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items }: React.PropsWithChildren<ISidebarProps>) => {
|
||||
|
||||
const sorted = items?.sort((a, b) => { return (a.weight || 99) - (b.weight || 99); }) || [];
|
||||
|
||||
const getLinks = (item: PageFrontMatter) => {
|
||||
const { content } = item;
|
||||
const links = Array.from(content.matchAll(/^## (.*$)/gim));
|
||||
|
||||
if (!links || links.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className={`mt-2 space-y-2`}>
|
||||
{links.map((link, index) => (
|
||||
<li key={index}>
|
||||
<Link title={link[1]} link={`/docs/${item.slug}#${link[1].toLowerCase().replace(/\s/g, '-')}`} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav role={`navigation`} className={`space-y-8`}>
|
||||
{sorted.map((item, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Section title={item.title} link={`/docs/${item.slug !== "index" ? item.slug : ''}`} />
|
||||
|
||||
{getLinks(item)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Logo';
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface ILinkProps {
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export const Link: React.FunctionComponent<ILinkProps> = ({title, link}: React.PropsWithChildren<ILinkProps>) => {
|
||||
return (
|
||||
<a className="transition-colors duration-200 relative block text-whisper-500 hover:text-teal-900"
|
||||
href={link}>
|
||||
{title}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import * as React from 'react';
|
||||
|
||||
export interface ISectionProps {
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export const Section: React.FunctionComponent<ISectionProps> = ({title, link}: React.PropsWithChildren<ISectionProps>) => {
|
||||
|
||||
return (
|
||||
<Link href={link}>
|
||||
<a className={`mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm text-whisper-900 hover:text-teal-900`} title={title}>
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './Description';
|
||||
export * from './OtherMeta';
|
||||
export * from './Title';
|
||||
@@ -1,73 +0,0 @@
|
||||
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';
|
||||
import { Searchbox } from '../Page/Searchbox';
|
||||
import { isProduction } from '../../helpers/isProduction';
|
||||
|
||||
export interface INavigationProps {}
|
||||
|
||||
export const Navigation: React.FunctionComponent<INavigationProps> = (props: React.PropsWithChildren<INavigationProps>) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
!isProduction() ? (
|
||||
<div className={`bg-yellow-500 text-center py-2 px-4`}>
|
||||
<a href={`https://frontmatter.codes`} title={`Go to main release documentation`} className={`text-base font-medium text-vulcan-500 hover:text-vulcan-900`}>
|
||||
You are currently viewing the BETA version of Front Matter documentation. Click on the banner to go to the main release documentation.
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
<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="space-x-4">
|
||||
<div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
|
||||
{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>
|
||||
))}
|
||||
|
||||
<Searchbox />
|
||||
</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>
|
||||
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
|
||||
{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>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Navigation';
|
||||
@@ -1,47 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Extension } from '../../constants/extension';
|
||||
import { isProduction } from '../../helpers/isProduction';
|
||||
|
||||
export interface ICTAProps {}
|
||||
|
||||
export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="px-4 sm:px-0 py-8 overflow-hidden 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 lg:text-5xl xl:text-6xl tracking-tight font-extrabold sm:leading-none">
|
||||
<span className="text-teal-500 md:block">{Extension.name}</span>{' '}
|
||||
<span className="block">{strings(`cta_title`)}</span>
|
||||
<span className={`sr-only`}>{strings(`cta_title_sr`)}</span>
|
||||
</h1>
|
||||
|
||||
<h2 className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{strings(`cta_description`)}
|
||||
</h2>
|
||||
|
||||
<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={isProduction() ? Extension.installLink : Extension.installBetaLink} 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`}>
|
||||
{isProduction() ? strings(`cta_button_primary`) : strings(`cta_button_beta_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={`Front Matter - Headless CMS - Live page preview`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,51 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { features } from '../../constants/features';
|
||||
import { CheckIcon } from '@heroicons/react/outline';
|
||||
import Link from 'next/link';
|
||||
import { Extension } from '../../constants/extension';
|
||||
|
||||
export interface IFeaturesProps {}
|
||||
|
||||
export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.PropsWithChildren<IFeaturesProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={`bg-whisper-500 text-vulcan-500`}>
|
||||
<div className="max-w-7xl mx-auto py-12 sm:py-16 px-4 sm:px-6 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-vulcan-300">
|
||||
{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-800" aria-hidden="true" />
|
||||
<p className="ml-9 text-lg leading-6 font-medium text-vulcan-320">{strings(feature.name)}</p>
|
||||
</dt>
|
||||
<dd className="mt-2 ml-9 text-base text-vulcan-100">{strings(feature.description)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
|
||||
<div className="mt-6 flex flex-col justify-center items-center">
|
||||
<p className={`text-xl tracking-tight font-bold sm:leading-none text-vulcan-50`}>
|
||||
{strings(`features_cta_title`)}
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<Link href={Extension.featureLink} >
|
||||
<a className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
|
||||
target={`_blank`}
|
||||
rel={`noopener noreferrer`}>
|
||||
{strings(`features_cta_button`)}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
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`} rel={`noopener noreferrer`}>
|
||||
<img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes&countColor=%23060A15&labelColor=%23060A15" alt={`Visitors`} />
|
||||
</a>
|
||||
|
||||
<a href={Extension.extensionLink} title={`Extension installs`} rel={`noopener noreferrer`}>
|
||||
<img src={`https://vsmarketplacebadge.apphb.com/installs-short/eliostruyf.vscode-front-matter.svg?style=for-the-badge&color=060A15&labelColor=060A15`} alt={`Installations of the extension`} />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
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-12 sm:py-16 px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
|
||||
{strings(`generators_title`)}
|
||||
</h2>
|
||||
|
||||
<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 className="mt-6 flex justify-center">
|
||||
<p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>
|
||||
{strings(`generators_more`)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export interface IHeroProps {
|
||||
view: "left" | "right";
|
||||
title: string;
|
||||
description: string | JSX.Element;
|
||||
imgSrc: string;
|
||||
imgAlt: string;
|
||||
link?: string;
|
||||
linkText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Hero: React.FunctionComponent<IHeroProps> = ({view, title, description, imgSrc, imgAlt, link, linkText, className}: React.PropsWithChildren<IHeroProps>) => {
|
||||
|
||||
return (
|
||||
<div className={`overflow-hidden lg:relative`}>
|
||||
<div className={`${className || ""} px-4 sm:px-6 xl:px-0 py-12 sm:py-16 lg:relative lg:mx-auto lg:max-w-7xl lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24`}>
|
||||
<div className={`max-w-3xl mx-auto lg:py-48 lg:max-w-none lg:mx-0 lg:px-0 ${view === "left" ? `lg:col-start-2` : `lg:col-start-1`}`}>
|
||||
<div>
|
||||
<h2 className="text-3xl lg:text-3xl xl:text-4xl tracking-tight font-extrabold sm:leading-none">
|
||||
{title}
|
||||
</h2>
|
||||
{
|
||||
typeof description === 'string' ? (
|
||||
<p className="my-6 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{description}
|
||||
</p>
|
||||
) : (
|
||||
{...description}
|
||||
)
|
||||
}
|
||||
{
|
||||
link && linkText && (
|
||||
<Link href={link} >
|
||||
<a className={`inline-block 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`}>
|
||||
{linkText}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`sm:mx-auto sm:max-w-3xl sm:px-6 lg:px-0 lg:mx-0 lg:max-w-none mt-12 sm:mt-16 lg:mt-0 ${view === "left" ? `lg:col-start-1` : `lg:col-start-2`}`}>
|
||||
<div className={`${view === "left" ? `lg:pr-6 lg:-ml-16` : `lg:pl-6 lg:-mr-16`} lg:px-0 lg:m-0 lg:relative lg:h-full`}>
|
||||
<img className={`w-full rounded-xl lg:absolute lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:right-0` : `lg:left-0`}`}
|
||||
src={imgSrc}
|
||||
alt={imgAlt} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Navigation } from '../Navigation';
|
||||
import { Footer } from './Footer';
|
||||
import { Sponsors } from './Sponsors';
|
||||
|
||||
export interface ILayoutProps {}
|
||||
|
||||
export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
|
||||
return (
|
||||
<div className={`flex flex-col h-screen`}>
|
||||
<header className={`lg:sticky lg:top-0 z-50 bg-vulcan-500 bg-opacity-80 backdrop-blur-lg`}>
|
||||
<Navigation />
|
||||
</header>
|
||||
|
||||
<main className={`flex-grow`}>
|
||||
{props.children}
|
||||
</main>
|
||||
|
||||
<Sponsors />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import * as React from 'react';
|
||||
// const docsearch = require('@docsearch/js');
|
||||
// import { useEffect } from 'react';
|
||||
import { DocSearch } from '@docsearch/react';
|
||||
|
||||
export interface ISearchboxProps {}
|
||||
|
||||
export const Searchbox: React.FunctionComponent<ISearchboxProps> = (props: React.PropsWithChildren<ISearchboxProps>) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DocSearch
|
||||
apiKey={process.env.NEXT_PUBLIC_AGOLIA_APIKEY || ""}
|
||||
indexName={process.env.NEXT_PUBLIC_AGOLIA_INDEX || ""}
|
||||
appId={process.env.NEXT_PUBLIC_AGOLIA_APPID || ""}
|
||||
disableUserPersonalization={true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export interface ISponsorsProps {}
|
||||
|
||||
export const Sponsors: React.FunctionComponent<ISponsorsProps> = (props: React.PropsWithChildren<ISponsorsProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="bg-vulcan-600">
|
||||
<div className="max-w-7xl mx-auto pt-12 px-4 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-sm font-semibold uppercase text-whisper-900 tracking-wide">
|
||||
{strings(`sponsors_title`)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<a target={`_blank`} rel={`noopener noreferrer`} href={`https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss`} title={`Powered by Vercel`} className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/sponsors/powered-by-vercel.svg" alt="Vercel" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface ITestimonialProps {}
|
||||
|
||||
export const Testimonial: React.FunctionComponent<ITestimonialProps> = (props: React.PropsWithChildren<ITestimonialProps>) => {
|
||||
return (
|
||||
null
|
||||
);
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
export * from './CTA';
|
||||
export * from './Features';
|
||||
export * from './Footer';
|
||||
export * from './Generators';
|
||||
export * from './Hero';
|
||||
export * from './Layout';
|
||||
export * from './Sponsors';
|
||||
export * from './Testimonial';
|
||||
@@ -1,16 +0,0 @@
|
||||
export const Extension = {
|
||||
name: `Front Matter`,
|
||||
home: `The CMS running in VS Code for your static sites`,
|
||||
description: `Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.`,
|
||||
|
||||
githubLink: "https://github.com/estruyf/vscode-front-matter",
|
||||
issueLink: "https://github.com/estruyf/vscode-front-matter/issues",
|
||||
sponsorLink: "https://github.com/sponsors/estruyf",
|
||||
extensionLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter",
|
||||
extensionBetaLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta",
|
||||
reviewLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details",
|
||||
installLink: "vscode:extension/eliostruyf.vscode-front-matter",
|
||||
installBetaLink: "vscode:extension/eliostruyf.vscode-front-matter-beta",
|
||||
showcaseLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase%3A+",
|
||||
featureLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=feature_request.md&title=Enhancement%3A+"
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
|
||||
|
||||
export const features = [
|
||||
{
|
||||
name: `feature_title_1`,
|
||||
description: `feature_description_1`,
|
||||
},
|
||||
{
|
||||
name: `feature_title_2`,
|
||||
description: `feature_description_2`,
|
||||
},
|
||||
{
|
||||
name: `feature_title_3`,
|
||||
description: `feature_description_3`,
|
||||
},
|
||||
{
|
||||
name: `feature_title_4`,
|
||||
description: `feature_description_4`,
|
||||
},
|
||||
{
|
||||
name: `feature_title_5`,
|
||||
description: `feature_description_5`,
|
||||
},
|
||||
{
|
||||
name: `feature_title_6`,
|
||||
description: `feature_description_6`,
|
||||
}
|
||||
];
|
||||
@@ -1,43 +0,0 @@
|
||||
import { HeartIcon, StarIcon } from "@heroicons/react/outline";
|
||||
import React from "react";
|
||||
import { Extension } from "./extension";
|
||||
|
||||
export const navigation = {
|
||||
main: [
|
||||
{ name: 'Documentation', title: '', href: '/docs' },
|
||||
{ name: 'Showcase', href: '/showcase' },
|
||||
{ name: 'Changelog', href: '/changelog' },
|
||||
],
|
||||
social: [
|
||||
{
|
||||
name: 'GitHub',
|
||||
title: 'Check out our GitHub repository',
|
||||
href: Extension.githubLink,
|
||||
icon: (props: any) => (
|
||||
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
},
|
||||
{
|
||||
name: 'Become a sponsor',
|
||||
title: 'Become a sponsor, and get mentioned',
|
||||
href: Extension.sponsorLink,
|
||||
icon: (props: any) => (
|
||||
<HeartIcon {...props} />
|
||||
)
|
||||
},
|
||||
{
|
||||
name: 'Review',
|
||||
title: 'Write a review on the marketplace',
|
||||
href: Extension.reviewLink,
|
||||
icon: (props: any) => (
|
||||
<StarIcon {...props} />
|
||||
)
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -1,244 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
## [3.1.0] - (Upcoming release)
|
||||
|
||||
- BETA version available at: [beta.frontmatter.codes](https://beta.frontmatter.codes)
|
||||
- [#72](https://github.com/estruyf/vscode-front-matter/issues/72): Media view on the dashboard
|
||||
- [#73](https://github.com/estruyf/vscode-front-matter/issues/73): List view option for the dashboard
|
||||
- [#77](https://github.com/estruyf/vscode-front-matter/issues/77): Dashboard grouping pages functionality integrated
|
||||
- [#81](https://github.com/estruyf/vscode-front-matter/issues/81): Optimizing the content folders to use a new setting to simplify configuration
|
||||
- [#87](https://github.com/estruyf/vscode-front-matter/issues/87): Fix issue with autofocus and command palette
|
||||
- [#88](https://github.com/estruyf/vscode-front-matter/issues/88): Fix issue with search sorting
|
||||
- [#89](https://github.com/estruyf/vscode-front-matter/issues/89): Clear filter, sorting, and grouping button added
|
||||
- [#90](https://github.com/estruyf/vscode-front-matter/issues/90): Refactoring to use Recoil state management
|
||||
- [#91](https://github.com/estruyf/vscode-front-matter/issues/91): Support image previews from content folders
|
||||
- [#98](https://github.com/estruyf/vscode-front-matter/issues/98): Add drag and drop support for media upload in a folder
|
||||
|
||||
## [3.0.2] - 2021-08-31
|
||||
|
||||
- [#82](https://github.com/estruyf/vscode-front-matter/issues/82): Hide the register and unregister commands from the command palette
|
||||
|
||||
## [3.0.1] - 2021-08-30
|
||||
|
||||
- [#79](https://github.com/estruyf/vscode-front-matter/issues/79): Fix scrollbar not visible on the welcome screen
|
||||
|
||||
## [3.0.0] - 2021-08-27
|
||||
|
||||
- [#61](https://github.com/estruyf/vscode-front-matter/issues/61): List of recently modified files
|
||||
- [#64](https://github.com/estruyf/vscode-front-matter/issues/64): Publish toggle for easier publishing an article
|
||||
- [#65](https://github.com/estruyf/vscode-front-matter/issues/65): Aggregate articles in draft
|
||||
- [#66](https://github.com/estruyf/vscode-front-matter/issues/66): New dashboard webview on which you can manage all your content
|
||||
- [#69](https://github.com/estruyf/vscode-front-matter/issues/69): Welcome screen for getting started
|
||||
|
||||
## [2.5.1] - 2020-08-23
|
||||
|
||||
- Fix typo in the `package.json` file for the preview command
|
||||
|
||||
## [2.5.0] - 2020-08-19
|
||||
|
||||
- Moved the center layout button to the other actions section
|
||||
- [#60](https://github.com/estruyf/vscode-front-matter/issues/60): Added the ability to open a site preview in VS Code
|
||||
|
||||
## [2.4.1] - 2020-08-16
|
||||
|
||||
- Better editor highlighting functionality
|
||||
|
||||
## [2.4.0] - 2020-08-16
|
||||
|
||||
- [#21](https://github.com/estruyf/vscode-front-matter/issues/21): Folding provider for Front Matter implemented
|
||||
- [#55](https://github.com/estruyf/vscode-front-matter/issues/55): Highlight Front Matter in Markdown files
|
||||
- [#56](https://github.com/estruyf/vscode-front-matter/issues/56): Action to collapse all Front Matter panel sections at once
|
||||
- [#57](https://github.com/estruyf/vscode-front-matter/issues/57): New action added to provide better writing settings (only for Markdown files)
|
||||
- [#58](https://github.com/estruyf/vscode-front-matter/issues/58): Sections remember their previous state (folded/unfolded)
|
||||
- [#59](https://github.com/estruyf/vscode-front-matter/issues/59): Center layout view toggle action added
|
||||
|
||||
## [2.3.0] - 2020-08-10
|
||||
|
||||
- Refactoring and showing other actions in the base view
|
||||
- Show `BaseView` in Front Matter panel when switching to `welcome` tab
|
||||
- [#31](https://github.com/estruyf/vscode-front-matter/issues/31): Automatically update the last modification date of the file when performing changes
|
||||
- [#53](https://github.com/estruyf/vscode-front-matter/issues/53): Create current Markdown file as template
|
||||
|
||||
## [2.2.0] - 2020-08-06
|
||||
|
||||
- [#28](https://github.com/estruyf/vscode-front-matter/issues/28): Align the file its name with the article slug
|
||||
- [#47](https://github.com/estruyf/vscode-front-matter/issues/47): Fix when table shows only value `0`
|
||||
- [#48](https://github.com/estruyf/vscode-front-matter/issues/48): Added new folder registration message + notification helper
|
||||
- [#49](https://github.com/estruyf/vscode-front-matter/issues/49): New initialize project command
|
||||
- [#50](https://github.com/estruyf/vscode-front-matter/issues/50): Fix in the table rendering of rows
|
||||
- [#51](https://github.com/estruyf/vscode-front-matter/issues/51): Panel actions base view enhanced to show project actions and information
|
||||
|
||||
## [2.1.0] - 2020-08-04
|
||||
|
||||
- [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command
|
||||
- [#45](https://github.com/estruyf/vscode-front-matter/issues/45): WSL support added
|
||||
- [#46](https://github.com/estruyf/vscode-front-matter/issues/46): Make the tag pickers render in full width
|
||||
|
||||
## [2.0.1] - 2020-07-27
|
||||
|
||||
- [#42](https://github.com/estruyf/vscode-front-matter/issues/42): Small enhancement to the table layout
|
||||
- [#43](https://github.com/estruyf/vscode-front-matter/issues/43): Fix for collapsible sections and taxonomy picker
|
||||
|
||||
## [2.0.0] - 2020-07-23
|
||||
|
||||
- Redesigned sidebar panel
|
||||
- Sidebar background styling match the VSCode defined sidebar color
|
||||
- Added support for `mdx` files
|
||||
- Added support for `enter` press in the combobox
|
||||
- [#41](https://github.com/estruyf/vscode-front-matter/issues/41): Word count implementation + extra details
|
||||
- [#40](https://github.com/estruyf/vscode-front-matter/issues/40): Added checks for the keyword usage in title, description, slug, and content
|
||||
|
||||
## [1.18.0] - 2020-07-20
|
||||
|
||||
- Updated README
|
||||
|
||||
## [1.17.1] - 2020-06-28
|
||||
|
||||
- [#34](https://github.com/estruyf/vscode-front-matter/issues/34): Fix that last modification date does not update the publication date
|
||||
- [#38](https://github.com/estruyf/vscode-front-matter/issues/38): Update the last modification date on new page creation from the template
|
||||
|
||||
## [1.17.0] - 2020-06-14
|
||||
|
||||
- [#36](https://github.com/estruyf/vscode-front-matter/issues/36): Add the option to change the Front Matter its description field
|
||||
|
||||
## [1.16.1] - 2020-05-27
|
||||
|
||||
- Fix for Node.js v14.16.0
|
||||
|
||||
## [1.16.0] - 2020-05-04
|
||||
|
||||
- Add all front matter properties as an argument for custom scripts
|
||||
|
||||
## [1.15.1] - 2020-05-04
|
||||
|
||||
- Add the ability to specify a custom Node path
|
||||
|
||||
## [1.15.0] - 2020-05-04
|
||||
|
||||
- Added the ability to add your own custom scripts as panel actions.
|
||||
|
||||
## [1.14.0] - 2020-03-19
|
||||
|
||||
- New links added to the Front Matter panel to reveal the file and folder.
|
||||
|
||||
## [1.13.0] - 2020-02-26
|
||||
|
||||
- Implemented links to quickly open the extension settings + issue from the FrontMatter view panel
|
||||
- Added button to update the modified time in the FrontMatter view panel
|
||||
|
||||
## [1.12.1] - 2020-02-13
|
||||
|
||||
- Fix Front Matter SVG
|
||||
|
||||
## [1.12.0] - 2020-01-26
|
||||
|
||||
- [#29](https://github.com/estruyf/vscode-front-matter/issues/29): Open file after creating it from the template
|
||||
|
||||
## [1.11.1] - 2020-12-10
|
||||
|
||||
- [#26](https://github.com/estruyf/vscode-front-matter/issues/26): Fix for arrow selection in the dropdown.
|
||||
|
||||
## [1.11.0] - 2020-12-10
|
||||
|
||||
- [#25](https://github.com/estruyf/vscode-front-matter/issues/25): Moved from Material UI Autocomplete to Downshift. This gives more flexibility, and allows to focus the inputs from a VSCode command.
|
||||
- Changed the `Front Matter: Insert <tags | categories>` functionality to open in the panel, instead of using the VSCode dialogs.
|
||||
|
||||
## [1.10.0] - 2020-12-03
|
||||
|
||||
- FrontMatter panel implemented. This panel allows you to control all extension actions, but not only that. It makes adding tags and categories in a easier way to your page.
|
||||
|
||||
## [1.9.0] - 2020-11-25
|
||||
|
||||
- [#23](https://github.com/estruyf/vscode-front-matter/issues/23): Implemented the option to create and use templates for article creation (front matter will be updates as well).
|
||||
|
||||
## [1.8.0] - 2020-11-20
|
||||
|
||||
- [#22](https://github.com/estruyf/vscode-front-matter/issues/22): Allow to configure the SEO Title and Description lengths.
|
||||
|
||||
## [1.7.2] - 2020-10-30
|
||||
|
||||
- [#19](https://github.com/estruyf/vscode-front-matter/issues/19): fix for tag insertion when empty tag is used
|
||||
|
||||
## [1.7.1] - 2020-10-21
|
||||
|
||||
- Fix for title and description length check
|
||||
|
||||
## [1.7.0] - 2020-09-30
|
||||
|
||||
- [#18](https://github.com/estruyf/vscode-front-matter/issues/18): Added date and modified date field names settings to be able to change the extension its behavior
|
||||
|
||||
## [1.6.0] - 2020-09-23
|
||||
|
||||
- Syntax highlighting for Hugo shortcodes has been added
|
||||
|
||||
## [1.5.0] - 2020-09-10
|
||||
|
||||
- [#17](https://github.com/estruyf/vscode-front-matter/issues/17): Make front matter be indentation `tabSize` aware
|
||||
|
||||
## [1.4.0] - 2020-08-24
|
||||
|
||||
- Added set `lastmod` date command
|
||||
- [#16](https://github.com/estruyf/vscode-front-matter/issues/16): Fixed hardcoded length value
|
||||
|
||||
## [1.3.0] - 2020-08-22
|
||||
|
||||
- Added SEO description warning when over 140 characters is used
|
||||
|
||||
## [1.2.0] - 2020-07-03
|
||||
|
||||
- Added SEO title warning when over 60 characters is used
|
||||
|
||||
## [1.1.1] - 2020-04-07
|
||||
|
||||
- `TOML` delimiter fix
|
||||
|
||||
## [1.1.0] - 2020-03-25
|
||||
|
||||
- `TOML` support added
|
||||
|
||||
## [1.0.0] - 2020-03-25
|
||||
|
||||
- First major release
|
||||
- Fixed an issue with `null` tag/category values
|
||||
|
||||
## [0.0.10] - 2019-09-17
|
||||
|
||||
- Updated the logic to remove quotes from front matter property values
|
||||
|
||||
## [0.0.9] - 2019-09-17
|
||||
|
||||
- Added setting to specify if you want to enable/disable array indents in the front matter of your article
|
||||
- Remove quotes on date strings
|
||||
|
||||
## [0.0.8] - 2019-09-04
|
||||
|
||||
- Added command to generate a clean article slug
|
||||
|
||||
## [0.0.7] - 2019-08-28
|
||||
|
||||
- Added command to remap tags or categories in all posts: `Front Matter: Remap tag/category in all articles`
|
||||
|
||||
## [0.0.6] - 2019-08-28
|
||||
|
||||
- Updated `package.json` file to include preview label
|
||||
- Added the status bar item to quickly view and update the draft status of an article
|
||||
|
||||
## [0.0.5] - 2019-08-27
|
||||
|
||||
- Updated title, description and logo
|
||||
|
||||
## [0.0.4] - 2019-08-26
|
||||
|
||||
- Added set date command
|
||||
|
||||
## [0.0.3] - 2019-08-26
|
||||
|
||||
- Support added for `*.markdown` files
|
||||
|
||||
## [0.0.2] - 2019-08-26
|
||||
|
||||
- Updated extension to bundle the project output
|
||||
|
||||
## [0.0.1] - 2019-08-26
|
||||
|
||||
- Initial beta version
|
||||
@@ -1,128 +0,0 @@
|
||||
---
|
||||
title: Commands
|
||||
slug: commands
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 6
|
||||
---
|
||||
|
||||
# Commands
|
||||
|
||||
Front Matter actions are also available as commands. In this section of the documentation all commands will be explained.
|
||||
|
||||

|
||||
|
||||
## Using commands
|
||||
|
||||
- Start by opening the command prompt:
|
||||
- Windows: ⇧+ctrl+P
|
||||
- Mac: ⇧+⌘+P
|
||||
- Use one of the following commands
|
||||
|
||||
## Available commands
|
||||
|
||||
### Initialize project
|
||||
|
||||
This command will initialize the project with a template folder and an article template. It makes it easier to get you started with the extension and creating your content.
|
||||
|
||||
ID: `frontMatter.init`
|
||||
|
||||
### Open dashboard
|
||||
|
||||
Opens the dashboard with your Markdown pages overview. If you did not yet initialize your project, the welcome screen will be shown.
|
||||
|
||||
ID: `frontMatter.dashboard`
|
||||
|
||||
### Create category
|
||||
|
||||
Creates a new category and allows you to include it into your post automatically.
|
||||
|
||||
ID: `frontMatter.createCategory`
|
||||
|
||||
### Create tag
|
||||
|
||||
Creates a new tag and allows you to include it into your post automatically.
|
||||
|
||||
ID: `frontMatter.createTag`
|
||||
|
||||
### Insert categories
|
||||
|
||||
Inserts a selected categories into the front matter of your article/post/... - When using this command, the Front Matter panel opens and focuses on the specified type.
|
||||
|
||||
ID: `frontMatter.insertCategories`
|
||||
|
||||
### Insert tags
|
||||
|
||||
Inserts a selected tags into the front matter of your article/post/... - When using this command, the Front Matter panel opens and focuses on the specified type.
|
||||
|
||||
ID: `frontMatter.insertTags`
|
||||
|
||||
### Export all tags & categories to your settings
|
||||
|
||||
Export all the already used tags & categories in your articles/posts/... to your user settings.
|
||||
|
||||
ID: `frontMatter.exportTaxonomy`
|
||||
|
||||
### Remap or remove tag/category in all articles
|
||||
|
||||
This command helps you quickly update/remap or delete a tag or category in your markdown files. The extension will ask you to select the taxonomy type (tag or category), the old taxonomy value, and the new one (leave the input field blank to remove the tag/category).
|
||||
|
||||
> **Info**: Once the remapping/deleting process completes, your VS Code settings update with all new taxonomy tags/categories.
|
||||
|
||||
ID: `frontMatter.remap`
|
||||
|
||||
### Create a template from current file
|
||||
|
||||
This command allows you to create a new template from the current open Markdown file. It will ask you for the name of the template and if you want to keep the current file its content in the template.
|
||||
|
||||
ID: `frontMatter.createTemplate`
|
||||
|
||||
### New article from template
|
||||
|
||||
With this command, you can easily create content in your project within the registered folders and provided templates.
|
||||
|
||||
> **Info**: The command will use the `frontMatter.templates.prefix` setting in order to add a prefix (default: `yyyy-MM-dd`) on the filename.
|
||||
|
||||
ID: `frontMatter.createContent`
|
||||
|
||||
### Generate slug based on article title
|
||||
|
||||
This command generates a clean slug for your article. It removes known stop words, punctuations, and special characters.
|
||||
|
||||
Example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Just a sample page with a title
|
||||
slug: sample-page-title
|
||||
---
|
||||
```
|
||||
|
||||
You can also specify a prefix and suffix, which can be added to the slug if you want. Use the following settings to do this: `frontMatter.taxonomy.slugPrefix` and `frontMatter.taxonomy.slugSuffix`.
|
||||
|
||||
By default, both prefix and suffix settings are not provided, which mean it would not add anything extra to the slug.
|
||||
|
||||
Another setting is to allow you to sync the filename with the generated slug. The setting you need to turn on enable for this is `frontMatter.taxonomy.alignFilename`.
|
||||
|
||||
> **Info**: At the moment, the extension only supports English stopwords.
|
||||
|
||||
ID: `frontMatter.generateSlug`
|
||||
|
||||
### Set current date
|
||||
|
||||
Sets/updates the current date in your Markdown file.
|
||||
|
||||
ID: `frontMatter.setDate`
|
||||
|
||||
### Set lastmod date
|
||||
|
||||
Sets/updates the current modified date in your Markdown file.
|
||||
|
||||
ID: `frontMatter.setLastModifiedDate`
|
||||
|
||||
### Preview article
|
||||
|
||||
Open the site preview of your article in VS Code.
|
||||
|
||||
ID: `frontMatter.preview`
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
title: Custom actions
|
||||
slug: custom-actions
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 5
|
||||
---
|
||||
|
||||
# Custom actions
|
||||
|
||||
Not every website is the same. That is why we want to give you the ability to extend Front Matter and you can do this by adding your custom actions to the Front Matter panel. A custom action is nothing more than a Node.js script which is referenced from within your project.
|
||||
|
||||

|
||||
|
||||
> **Sample**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)
|
||||
|
||||
## Creating a script
|
||||
|
||||
Create a folder in your project where you want to store all your custom scripts, and create a new JavaScript file. The sample content of this file looks like this:
|
||||
|
||||
```javascript
|
||||
const arguments = process.argv;
|
||||
|
||||
if (arguments && arguments.length > 0) {
|
||||
const workspaceArg = arguments[2]; // The workspace path
|
||||
const fileArg = arguments[3]; // The file path
|
||||
const frontMatterArg = arguments[4]; // Front matter data
|
||||
|
||||
console.log(`The content returned for your notification.`);
|
||||
}
|
||||
```
|
||||
|
||||
> **Info**: The sample script can be found here [sample-script.js](https://github.com/estruyf/vscode-front-matter/blob/HEAD/sample/script-sample.js)
|
||||
|
||||
The current workspace-, file-path, and front matter data will be passed as a arguments. Like you can see in the above sample script, you can fetch these argument values as follows:
|
||||
|
||||
- `arguments[2]`: The workspace path
|
||||
- `arguments[3]`: The file path (Markdown file)
|
||||
- `arguments[4]`: The front matter data as object
|
||||
|
||||
In order to use this functionality, you will need to configure the `frontMatter.custom.scripts` setting for your project as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"frontMatter.custom.scripts": [{
|
||||
"title": "Generate social image",
|
||||
"script": "./scripts/social-img.js",
|
||||
"nodeBin": "~/.nvm/versions/node/v14.15.5/bin/node"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
> **Important**: When the command execution would fail when it cannot find the node command. You are able to specify your path to the node app. Command execution might for instance fail when using `nvm`. You can use the `nodeBin` property to specify the path to your node executable. **This property is optional**.
|
||||
|
||||
Once a custom action has been configured, it will appear on the Front Matter panel. The output of the script will be passed as a notification in VS Code. This output allows you to copy the output, useful when you generate additional content.
|
||||
|
||||

|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
title: Dashboard
|
||||
slug: dashboard
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 3
|
||||
---
|
||||
|
||||
# Dashboard
|
||||
|
||||
Managing your Markdown pages/media has never been easier in VS Code. With the Front Matter dashboard, you will be able to view all your pages and media.
|
||||
|
||||
On the contents view, you can **search**, **filter**, **sort** your pages and much more.
|
||||
|
||||

|
||||
|
||||
On the media view, you can quickly glance all the available media files in your project and perform quick actions like copying the relative path.
|
||||
|
||||

|
||||
|
||||
In order to start using the dashboard, you will have to let the extension know in which folder(s) it can find your pages. Be sure to follow our [getting started](/docs/getting-started) guide.
|
||||
|
||||
> **Important**: If your preview images are not loading, it might be that you need to configure the `publicFolder` where the extension can find them. For instance, in Hugo, this is the static folder. You can configure this by updating the `frontMatter.content.publicFolder` setting.
|
||||
|
||||
## Contents view
|
||||
|
||||
### Supported filters
|
||||
|
||||
- Tag filter
|
||||
- Category filter
|
||||
- Content folder (when you have multiple registered)
|
||||
|
||||
### Supported sorting
|
||||
|
||||
- Last modified
|
||||
- Filename (asc/desc)
|
||||
|
||||
## Media view
|
||||
|
||||
The media view has been created to make it easier to look at all media files available for your articles. When you click on an image, it will show a lightbox, so that it is easier to glance at small images.
|
||||
|
||||

|
||||
|
||||
### Media actions
|
||||
|
||||
On the image card, there are actions like copying the relative path or deleting the media file.
|
||||
|
||||

|
||||
|
||||
### Drag and Drop
|
||||
|
||||
On the media view, we enabled drag and drop for your media files. You can easily drop any image from your explorer/finder window into one of your folders.
|
||||
|
||||

|
||||
|
||||
## Show on startup
|
||||
|
||||
If you want, you can check on the `Open on startup?` checkbox. This setting will allow the dashboard to automatically open when you launch the project in VS Code. It will only apply to the current project, not for all of them.
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
title: Getting started
|
||||
slug: getting-started
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 2
|
||||
---
|
||||
|
||||
# Getting started
|
||||
|
||||
To get you started, you first need to install the extension in Visual Studio Code.
|
||||
|
||||
## Installation
|
||||
|
||||
You can get the extension via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
|
||||
|
||||
### Beta version
|
||||
|
||||
If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
|
||||
|
||||
- The VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
|
||||
- The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
|
||||
- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
|
||||
|
||||
> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
|
||||
|
||||
## Welcome screen
|
||||
|
||||
Once installed, Front Matter will open the **welcome screen** the first time Visual Studio Code gets reloaded.
|
||||
|
||||

|
||||
|
||||
It also supports light themes:
|
||||
|
||||

|
||||
|
||||
> **Info**: The welcome screen will also be shown when Front Matter is not yet fully configured.
|
||||
|
||||
## Required configuration
|
||||
|
||||
On the welcome screen, there are two tasks to complete before you can take full advantage of Front Matter.
|
||||
|
||||
### Step 1: Initialize the project
|
||||
|
||||
In this step, a `.templates` folder and `article.md` file template will be created in the current project.
|
||||
|
||||
The `.templates` folder, is a folder that can be used to place all sort of Markdown templates. It will be used when you want to let Front Matter generate new pages/articles/...
|
||||
|
||||
### Step 2: Register content folder(s)
|
||||
|
||||
As Front Matter is **not** created to only support one static site generator, you will be able to specify where your Markdown content lives. From the moment you register a folder, it will be used on the dashboard to show an overview of all files.
|
||||
|
||||
You can register a folder by right-clicking on a folder name in the explorer panel from Visual Studio Code and selecting **Front Matter: Register folder**.
|
||||
|
||||

|
||||
|
||||
## Enjoy using Front Matter
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
title: Introduction
|
||||
slug: ''
|
||||
description: Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 1
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.
|
||||
|
||||
The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
|
||||
|
||||

|
||||
|
||||
Our main extension features are:
|
||||
|
||||
- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort your contents.
|
||||
- Site preview within Visual Studio Code
|
||||
- SEO checks for title, description, and keywords
|
||||
- Support for custom actions/scripts
|
||||
- and many more
|
||||
|
||||

|
||||
|
||||
## Why Front Matter?
|
||||
|
||||
Initially, the Front Matter extension was created when [Elio Struyf](https://twitter.com/eliostruyf) migrated from WordPress to Hugo (Static Site Generator). To make content management more straightforward, he started to develop the Front Matter extension. He added more features regularly, and eventually, it became a headless CMS that runs within Visual Studio Code.
|
||||
|
||||
## Advantages
|
||||
|
||||
We believe that Front Matter gives you the following advantages:
|
||||
|
||||
### Speed
|
||||
|
||||
It just runs on your machine. There are no servers/websites/APIs involved in the process. Nothing can beat this.
|
||||
|
||||
### Use it within Visual Studio Code
|
||||
|
||||
You do not need to jump from tool to tool. Just use the one that you like the most, which is, of course, Visual Studio Code.
|
||||
|
||||
### Customizable
|
||||
|
||||
Almost all of the Front Matter features are customizable by the extension of its settings. These settings make sure that you can tweak it to your needs.
|
||||
|
||||
### Extensibility
|
||||
|
||||
We know that not every site is the same. That is why we allow you to add your custom scripts. These scripts will show up as actions in our panel and could take your content management to the next level.
|
||||
|
||||
> **Example**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: Markdown
|
||||
slug: markdown
|
||||
description: null
|
||||
date: '2021-08-31T05:59:58.852Z'
|
||||
lastmod: '2021-08-31T05:59:58.852Z'
|
||||
weight: 6
|
||||
---
|
||||
|
||||
# Markdown features
|
||||
|
||||
The Front Matter extension tries to make it easy to manage your Markdown pages/content. Within a Markdown page, we allow you to fold the file's Front Matter to be less distracting when writing. Also, do we highlight the Front Matter content to create a visual difference between content and metadata.
|
||||
|
||||
## Front Matter folding
|
||||
|
||||
If you want to focus on the content of your page, you have the ability to fold the Front Matter section of your page.
|
||||
|
||||

|
||||
|
||||
## Front Matter highlighting
|
||||
|
||||
The extension will automatically highlight the Front Matter of you document to create a visual difference between metadata and content.
|
||||
|
||||

|
||||
|
||||
> **Info**: If you do not want this feature, you can disable it in the extension settings -> `Highlight Front Matter` or by setting the `frontMatter.content.fmHighlight` setting to `false`.
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
title: Panel
|
||||
slug: panel
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
weight: 4
|
||||
---
|
||||
|
||||
# Panel
|
||||
|
||||
The Front Matter panel allows you to perform most of the extension actions by just a click on the button, and it shows the SEO statuses of your title, description, and more.
|
||||
|
||||
> **Info**: Initially, this panel was created to add tags and categories easily to your articles, as currently, VS Code multi-select is not optimal to use when having a lot of tags/categories.
|
||||
|
||||
To leverage most of the capabilities of the extension. SEO information and everyday actions like slug optimization, updating the date, and publish/drafting the article.
|
||||
|
||||
## Using the panel
|
||||
|
||||
Once you installed the extension, you will notice a Front Matter icon on the activity bar (by default on the left side). Clicking this icon will open the Front Matter panel.
|
||||
|
||||

|
||||
|
||||
## Global settings
|
||||
|
||||
In this section of the panel, you can modify a couple of the useful settings to have close to hand.
|
||||
|
||||

|
||||
|
||||
> **Info**: The global settings section will also be shown when you have the panel open on other types of files.
|
||||
|
||||
## SEO status
|
||||
|
||||
Search Engine Optimization or simply SEO is very important to any site. The extension shows you more information about how well your article is written.
|
||||
|
||||
Supports the following:
|
||||
|
||||
- Title and description length validation
|
||||
- Article length recommendation
|
||||
- Keyword validation on title, description, slug, and content
|
||||
- More content details
|
||||
|
||||

|
||||
|
||||
### Settings
|
||||
|
||||
In case you want to change the SEO settings, you can use the following settings:
|
||||
|
||||
- `frontMatter.taxonomy.seoTitleLength`: Specifies the optimal title length for SEO (set to `-1` to turn it off).
|
||||
- `frontMatter.taxonomy.seoDescriptionLength`: Specifies the optimal description length for SEO (set to `-1` to turn it off).
|
||||
- `frontMatter.taxonomy.seoContentLengh`: Specifies the optimal minimum length for your articles. Between 1,760 words – 2,400 is the absolute ideal article length for SEO in 2021. (set to `-1` to turn it off).
|
||||
- `frontMatter.taxonomy.seoDescriptionField`: Specifies the name of the SEO description field for your page. Default is 'description'.
|
||||
|
||||
## Actions
|
||||
|
||||
When writing articles, there are always a couple of actions you need/want to perform. In this section, we provide you the most used/requested actions like:
|
||||
|
||||
- Optimizing the slug
|
||||
- Setting the publishing date
|
||||
- Setting the modified date
|
||||
- Publish or revert to draft
|
||||
|
||||

|
||||
|
||||
> **Important**: You are able to add your own actions, more information about this you can read in our [custom actions](/docs/custom-actions) section.
|
||||
|
||||
### Settings
|
||||
|
||||
The following settings are related to these actions:
|
||||
|
||||
- `frontMatter.preview.host`: Specify the host URL (example: http://localhost:1313) to be used when opening the preview.
|
||||
- `frontMatter.taxonomy.dateField`: Specifies the date field name to use in your Front Matter. Default: `date`.
|
||||
- `frontMatter.taxonomy.modifiedField`: Specifies the modified date field name to use in your Front Matter. Default: `lastmod`.
|
||||
- `frontMatter.taxonomy.dateFormat`: Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information.
|
||||
- `frontMatter.taxonomy.slugPrefix`: Specify a prefix for the slug.
|
||||
- `frontMatter.taxonomy.slugSuffix`: Specify a suffix for the slug.
|
||||
- `frontMatter.taxonomy.alignFilename`: Align the filename with the new slug when it gets generated.
|
||||
|
||||
## Metadata
|
||||
|
||||
In the metadata section, you can
|
||||
|
||||

|
||||
|
||||
The tags and categories inputs allow you to insert known and unknown tags/categories. When an unknown tag/category gets added, it will show a `+` sign that allows you to add it to your configuration so that it will appear in the known tags/categories next time.
|
||||
|
||||
### Settings
|
||||
|
||||
- `frontMatter.panel.freeform`: Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: `true`.
|
||||
|
||||
## Recently modified
|
||||
|
||||
Navigate quickly to a recently modified file. In the recently modified section, the latest 10 modified files get shown.
|
||||
|
||||

|
||||
|
||||
> **Important**: In order to use this functionality, a registered content folder needs to be present. More information in our [getting started](/docs/getting-started) section.
|
||||
|
||||
> **Info**: The recently modified section will also be shown when you have the panel open on other types of files.
|
||||
|
||||
## Other actions
|
||||
|
||||
This section provides a couple of other useful actions, like opening the current project in your explorer/finder.
|
||||
|
||||

|
||||
|
||||
> **Info**: The `writing settings enabled / enable write settings` action allows you to make Markdown specific changes to optimize the writing of your articles. It will change settings like the `fontSize`, `lineHeight`, `wordWrap`, `lineNumbers` and more.
|
||||
|
||||
> **Info**: The other actions section will also be shown when you have the panel open on other types of files.
|
||||
@@ -1,243 +0,0 @@
|
||||
---
|
||||
title: Settings
|
||||
slug: settings
|
||||
description: null
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-09-08T07:08:17.747Z'
|
||||
weight: 7
|
||||
---
|
||||
|
||||
# Settings
|
||||
|
||||
Most of the actions are configurable to your needs. In this part of the documentation all settings are explained.
|
||||
|
||||
## Where is the data stored?
|
||||
|
||||
The extension stores all settings in the VS Code user settings file located in your project under `.vscode/settings.json`.
|
||||
|
||||
## Available settings
|
||||
|
||||
### frontMatter.content.autoUpdateDate
|
||||
|
||||
Specify if you want to automatically update the modified date of your article/page.
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
### frontMatter.content.fmHighlight
|
||||
|
||||
Specify if you want to highlight the Front Matter in the Markdown file.
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `true`
|
||||
|
||||
### frontMatter.content.pageFolders
|
||||
|
||||
This array of folders defines where the extension can find your content and create new content by running the create article command.
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `[]`
|
||||
|
||||
Sample:
|
||||
|
||||
```json
|
||||
{
|
||||
"frontMatter.content.pageFolders": [
|
||||
{
|
||||
"title": "Blog posts",
|
||||
"path": "[[workspace]]/content/posts"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> **Important**: `[[workspace]]` is a placeholder that the extension uses to replace the workspace path. The reason why we choose to use this, is because some do not keep the original folder name.
|
||||
|
||||
### frontMatter.content.publicFolder
|
||||
|
||||
Specify the folder name where all your assets are located. For instance in Hugo this is the `static` folder.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
|
||||
### frontMatter.custom.scripts
|
||||
|
||||
Specify the path to a Node.js script to execute. The current file path will be provided as an argument."
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `[]`
|
||||
|
||||
Sample:
|
||||
|
||||
```json
|
||||
{
|
||||
"frontMatter.custom.scripts": [{
|
||||
"title": "Generate social image",
|
||||
"script": "./scripts/social-img.js",
|
||||
"nodeBin": "~/.nvm/versions/node/v14.15.5/bin/node"
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
### frontMatter.dashboard.openOnStart
|
||||
|
||||
Specify if you want to open the dashboard when you start VS Code.
|
||||
|
||||
- Type: `boolean | null`
|
||||
- Default: `null`
|
||||
|
||||
### frontMatter.panel.freeform
|
||||
|
||||
Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards).
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `true`
|
||||
|
||||
### frontMatter.preview.host
|
||||
|
||||
Specify the host URL (example: http://localhost:1313) to be used when opening the preview.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
### frontMatter.preview.pathName
|
||||
|
||||
Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM`. The date will be generated based on the article its date field value.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
> **Important**: As the value will be formatted with the article's date, it will try to convert all characters you enter. In case you wan to skip some characters or all of them, you need to wrap that part between two single quotes. Example: `"'blog/'yyyy/MM"` will result in: `blog/2021/08`.
|
||||
|
||||
### frontMatter.taxonomy.dateField
|
||||
|
||||
Specifies the date field name to use in your Front Matter.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `date`
|
||||
|
||||
### frontMatter.taxonomy.modifiedField
|
||||
|
||||
Specifies the modified date field name to use in your Front Matter.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `lastmod`
|
||||
|
||||
### frontMatter.taxonomy.dateFormat
|
||||
|
||||
Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `iso`
|
||||
|
||||
### frontMatter.taxonomy.tags
|
||||
|
||||
Specifies the tags which can be used in the Front Matter.
|
||||
|
||||
- Type: `string[]`
|
||||
- Default: `[]`
|
||||
### frontMatter.taxonomy.categories
|
||||
|
||||
Specifies the categories which can be used in the Front Matter.
|
||||
|
||||
- Type: `string[]`
|
||||
- Default: `[]`
|
||||
|
||||
### frontMatter.taxonomy.slugPrefix
|
||||
|
||||
Specify a prefix for the slug.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
### frontMatter.taxonomy.slugSuffix
|
||||
|
||||
Specify a suffix for the slug.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `""`
|
||||
|
||||
### frontMatter.taxonomy.alignFilename
|
||||
|
||||
Align the filename with the new slug when it gets generated.
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
|
||||
### frontMatter.taxonomy.indentArrays
|
||||
|
||||
Specify if arrays in front matter of the markdown files are indented.
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `true`
|
||||
|
||||
### frontMatter.taxonomy.noPropertyValueQuotes
|
||||
|
||||
Specify the property names of which you want to remove the quotes in the output value. Warning: only use this when you know what you are doing. If you're going to, for instance, remove the quotes from the date property, you can add the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"frontMatter.taxonomy.noPropertyValueQuotes": ["date"]
|
||||
}
|
||||
```
|
||||
|
||||
- Type: `string[]`
|
||||
- Default: `[]`
|
||||
|
||||
### frontMatter.taxonomy.frontMatterType
|
||||
|
||||
Specify which Front Matter language you want to use. The extension supports `YAML` (default) and `TOML`.
|
||||
|
||||
- Type: `enum: YAML | TOML`
|
||||
- Default: `YAML`
|
||||
|
||||
### frontMatter.taxonomy.seoTitleLength
|
||||
|
||||
Specifies the optimal title length for SEO (set to `-1` to turn it off).
|
||||
|
||||
- Type: `number`
|
||||
- Default: `60`
|
||||
|
||||
### frontMatter.taxonomy.seoDescriptionLength
|
||||
|
||||
Specifies the optimal description length for SEO (set to `-1` to turn it off).
|
||||
|
||||
- Type: `number`
|
||||
- Default: `160`
|
||||
|
||||
### frontMatter.taxonomy.seoContentLengh
|
||||
|
||||
Specifies the optimal minimum length for your articles. Between 1,760 words – 2,400 is the absolute ideal article length for SEO in 2021. (set to `-1` to turn it off).
|
||||
|
||||
- Type: `number`
|
||||
- Default: `1760`
|
||||
|
||||
### frontMatter.taxonomy.seoDescriptionField
|
||||
|
||||
Specifies the name of the SEO description field for your page.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `description`
|
||||
|
||||
### frontMatter.templates.folder
|
||||
|
||||
Specify the folder to use for your article templates.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `.templates`
|
||||
|
||||
### frontMatter.templates.prefix
|
||||
|
||||
Specify the prefix you want to add for your new article filenames.
|
||||
|
||||
- Type: `string`
|
||||
- Default: `yyyy-MM-dd`
|
||||
|
||||
|
||||
## Deprecated settings
|
||||
|
||||
### frontMatter.content.folders
|
||||
|
||||
This setting has been deprecated since version `3.1.0` in favor of the newly introduced `frontMatter.content.pageFolders` setting.
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
title: Site preview
|
||||
slug: site-preview
|
||||
description: null
|
||||
date: '2021-08-31T08:24:02.613Z'
|
||||
lastmod: '2021-08-31T08:24:02.613Z'
|
||||
weight: 6
|
||||
---
|
||||
|
||||
# Site preview
|
||||
|
||||
The Markdown preview is not consistently delivering the same result as the one you will see on your site. The Front Matter extension provides you a way to show the actual site instead.
|
||||
|
||||

|
||||
|
||||
## Configuration
|
||||
|
||||
In order to use the site preview, you will first have to set the `frontMatter.preview.host` setting. You can set it via the `Global Settings` section in the Front Matter panel or in your `.vscode/settings.json` file.
|
||||
|
||||
For example, with Hugo, the local server spins up on `http://localhost:1313`. When you set this URL as the value of the `frontMatter.preview.host` setting. You can click on the open preview button and the site preview will be shown.
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
export const isProduction = () => process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
|
||||
@@ -1,53 +0,0 @@
|
||||
import fs from 'fs'
|
||||
import { join } from 'path'
|
||||
import matter from 'gray-matter'
|
||||
|
||||
type ContentType = "docs" | "changelog";
|
||||
|
||||
const postsDirectory = join(process.cwd(), 'content');
|
||||
|
||||
export function getPostSlugs(type: ContentType) {
|
||||
return fs.readdirSync(join(postsDirectory, type)).filter(f => f.endsWith(`.md`))
|
||||
}
|
||||
|
||||
export function getPostByFilename(type: ContentType, crntFile: string, fields: string[] = []) {
|
||||
|
||||
const realSlug = crntFile.replace(/\.md$/, '');
|
||||
const fullPath = join(postsDirectory, type, `${realSlug}.md`)
|
||||
const fileContents = fs.readFileSync(fullPath, 'utf8')
|
||||
const { data, content } = matter(fileContents)
|
||||
|
||||
const items: any = {}
|
||||
|
||||
// Ensure only the minimal needed data is exposed
|
||||
fields.forEach((field) => {
|
||||
if (field === 'content') {
|
||||
items[field] = content
|
||||
}
|
||||
|
||||
if (field === 'fileName') {
|
||||
items[field] = realSlug
|
||||
}
|
||||
|
||||
if (data[field]) {
|
||||
items[field] = data[field]
|
||||
}
|
||||
|
||||
if (field === 'slug') {
|
||||
items[field] = data['slug'] || realSlug
|
||||
}
|
||||
})
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
export function getAllPosts(type: ContentType, fields: string[] = []) {
|
||||
const fileNames = getPostSlugs(type);
|
||||
|
||||
const posts = fileNames
|
||||
.map((fileName) => getPostByFilename(type, fileName, fields))
|
||||
// sort posts by date in descending order
|
||||
.sort((post1, post2) => ((post1 as any)?.date > (post2 as any)?.date ? -1 : 1));
|
||||
|
||||
return posts
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
|
||||
|
||||
export function publicUrl() {
|
||||
if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
|
||||
return `https://frontmatter.codes`;
|
||||
} else {
|
||||
return `https://${process.env.VERCEL_URL}`;
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Extension } from "../constants/extension";
|
||||
|
||||
|
||||
export const strings = {
|
||||
// CTA
|
||||
cta_title: "Headless CMS running in VS Code",
|
||||
cta_title_sr: " that helps managing your static sites and Markdown based sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.",
|
||||
cta_description: "Why leave your editor if it can give you all power to manage your static sites? Front Matter is a headless CMS that lets you create, edit, and preview your Markdown based content straight within Visual Studio Code.",
|
||||
cta_button_primary: "Get the extension",
|
||||
cta_button_beta_primary: "Get the BETA extension",
|
||||
cta_button_secondary: "Read our docs",
|
||||
|
||||
// Generators
|
||||
generators_title: "Built for any static-site generator you might like",
|
||||
generators_more: "and many more...",
|
||||
|
||||
// Hero
|
||||
hero_title: "Bringing the CMS to your editor",
|
||||
hero_description: "Why would you leave your editor when you can perform all tasks straight from within it?",
|
||||
hero_description_second: "We at Front Matter believe that you should keep using what you like. For us, this is Visual Studio Code. Use the same editor you use to code, but with unique features to make it suitable for writing and managing your Markdown articles.",
|
||||
hero_button_primary: "Get started",
|
||||
|
||||
// Hero media
|
||||
hero_media_title: "Checking your media was never easier",
|
||||
hero_media_description: "Quickly glance all your media files straight from within VS Code. You will be able to filter by your content folders, and perform quick media actions.",
|
||||
hero_media_button_primary: "See what it can do",
|
||||
|
||||
// Testimonials
|
||||
testimonials_title: "What others are saying",
|
||||
testimonials_description: "We love Front Matter and we're excited to share it with the world.",
|
||||
|
||||
// Features
|
||||
features_title: "Features",
|
||||
features_description: "Check out our main features which help you manage your static-site",
|
||||
features_cta_title: "Missing a feature?",
|
||||
features_cta_button: "Tell us what you need",
|
||||
|
||||
// Feature
|
||||
feature_title_1: "Offline management",
|
||||
feature_description_1: "A Content Management System built to run within Visual Studio Code. No dependencies on any website or API. Write wherever you are, commit when you are online.",
|
||||
|
||||
feature_title_2: "Full site/page preview",
|
||||
feature_description_2: "Allow showing your site and page previews within Visual Studio Code without the need of opening a browser.",
|
||||
|
||||
feature_title_3: "Content dashboard",
|
||||
feature_description_3: "Our page dashboard allows you to search, filter, sort, and group all your static site pages.",
|
||||
|
||||
feature_title_4: "SEO Checks",
|
||||
feature_description_4: "Our search engine optimization checks allow you to write better articles. We show you more information about your title, description, content, keywords, and more.",
|
||||
|
||||
feature_title_5: "Use it the way you want it",
|
||||
feature_description_5: "All of the functionalities are configurable to your needs. You can define how you want to use Front Matter in your editor experience.",
|
||||
|
||||
feature_title_6: "Extensibility",
|
||||
feature_description_6: "Add your actions with our custom scripting capability. For instance, you can use a script and hook it up to the extension if you want to generate preview images. If we do not support it, you can build it and share it with us.",
|
||||
|
||||
// Sponsors
|
||||
sponsors_title: "Special thanks to our sponsor",
|
||||
|
||||
// Documentation
|
||||
documentation_title: "Documentation",
|
||||
documentation_description: `Get to know more about how you can use ${Extension.name} with our documentation.`,
|
||||
|
||||
// Showcase
|
||||
showcase_title: "Showcase",
|
||||
showcase_description: "Check out our showcase of sites using Front Matter.",
|
||||
|
||||
// Changelog
|
||||
changelog_title: "Changelog",
|
||||
changelog_description: "Check out our changelog for Front Matter.",
|
||||
changelog_page_title: `Latest updates`,
|
||||
changelog_page_description: `An overview of all updates from the ${Extension.name} extension`,
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
import { strings as enMsgs } from './en';
|
||||
|
||||
export const LOCALE_STRINGS = {
|
||||
en: { translation: enMsgs }
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import { LOCALE_STRINGS } from './localeStrings';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
i18n.use(new LanguageDetector({}, {caches:[]}))
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
fallbackLng: 'en',
|
||||
resources: {...LOCALE_STRINGS},
|
||||
// debug: process.env.NODE_ENV && process.env.NODE_ENV === 'development',
|
||||
detection: {
|
||||
order: ['cookie', 'localStorage'],
|
||||
},
|
||||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
}
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -1,10 +0,0 @@
|
||||
export interface PageFrontMatter {
|
||||
title: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
date: string;
|
||||
lastmod: string;
|
||||
content: string;
|
||||
fileName: string;
|
||||
weight?: number;
|
||||
}
|
||||
6
docs/next-env.d.ts
vendored
@@ -1,6 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@@ -1,4 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
5858
docs/package-lock.json
generated
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "frontmatter-docs",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run changelog && next dev",
|
||||
"build": "npm run changelog && npm run sitemap && next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"changelog": "node scripts/copy-changelog.js",
|
||||
"sitemap": "node scripts/generate-sitemap.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docsearch/js": "^3.0.0-alpha.40",
|
||||
"@headlessui/react": "^1.4.0",
|
||||
"@heroicons/react": "^1.0.4",
|
||||
"date-fns": "^2.23.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
"i18next": "^20.4.0",
|
||||
"i18next-browser-languagedetector": "^6.1.2",
|
||||
"next": "11.1.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-i18next": "^11.11.4",
|
||||
"react-markdown": "^7.0.1",
|
||||
"rehype-raw": "^6.1.0",
|
||||
"remark-autolink-headings": "7.0.1",
|
||||
"remark-heading-id": "1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "17.0.19",
|
||||
"autoprefixer": "^10.3.3",
|
||||
"eslint": "7.32.0",
|
||||
"eslint-config-next": "11.1.0",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"remark": "14.0.1",
|
||||
"remark-html": "14.0.1",
|
||||
"tailwindcss": "^2.2.8",
|
||||
"typescript": "4.4.2"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import '../styles/globals.css';
|
||||
import type { AppProps } from 'next/app';
|
||||
import '../locale/localization';
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
@@ -1,31 +0,0 @@
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
|
||||
static async getInitialProps(ctx: any) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en" data-theme="dark">
|
||||
<Head>
|
||||
<meta charSet="UTF-8" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
</Head>
|
||||
|
||||
<body className={`bg-vulcan-500 text-whisper-500`}>
|
||||
<Main />
|
||||
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
@@ -1,13 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
type Data = {
|
||||
name: string
|
||||
}
|
||||
|
||||
export default function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse<Data>
|
||||
) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Description, OtherMeta, Title } from '../../components/Meta';
|
||||
import { Layout } from '../../components/Page/Layout';
|
||||
import { getPostByFilename } from '../../lib/api';
|
||||
|
||||
export default function Home({ content }: any) {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title value={strings(`changelog_title`)} />
|
||||
<Description value={`changelog_description`} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 divide-y-2 divide-vulcan-200">
|
||||
<div className="pb-8 space-y-2 md:space-y-5 ">
|
||||
<h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`changelog_page_title`)}</h1>
|
||||
|
||||
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`changelog_page_description`)}</p>
|
||||
</div>
|
||||
|
||||
<div className={`changelog`}>
|
||||
{/* eslint-disable react/no-children-prop */}
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
a: ({node, ...props}) => {
|
||||
const url = props?.href || "";
|
||||
const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
|
||||
const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
|
||||
return elm;
|
||||
}
|
||||
}}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
children={content} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const changes = getPostByFilename('changelog', "CHANGELOG.md", ['content']);
|
||||
|
||||
return {
|
||||
props: { content: changes.content }
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import { getAllPosts, getPostByFilename } from '../../lib/api';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Description, OtherMeta, Title } from '../../components/Meta';
|
||||
import { Layout } from '../../components/Page/Layout';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Page } from '../../components/Docs/Page';
|
||||
import { Markdown } from '../../components/Docs/Markdown';
|
||||
|
||||
export default function Documentation({ page, pages }: any) {
|
||||
const { t: strings } = useTranslation();
|
||||
const router = useRouter();
|
||||
|
||||
if (!router.isFallback && !page?.slug) {
|
||||
return <p>Error</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title value={strings(`documentation_title`)} />
|
||||
<Description value={`documentation_description`} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<Page items={pages} page={page}>
|
||||
<Markdown content={page?.content} />
|
||||
</Page>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getStaticProps({ params }: any) {
|
||||
const pages = getAllPosts('docs', [
|
||||
'title',
|
||||
'slug',
|
||||
'description',
|
||||
'date',
|
||||
'lastmod',
|
||||
'weight',
|
||||
'content',
|
||||
'fileName'
|
||||
]);
|
||||
|
||||
const article: any = pages.find((b: any) => b.slug === params.slug);
|
||||
|
||||
const doc: any = getPostByFilename('docs', article.fileName, [
|
||||
'title',
|
||||
'slug',
|
||||
'description',
|
||||
'date',
|
||||
'lastmod',
|
||||
'weight',
|
||||
'content',
|
||||
'fileName'
|
||||
])
|
||||
|
||||
return {
|
||||
props: {
|
||||
page: {
|
||||
...doc
|
||||
},
|
||||
pages
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const pages = getAllPosts('docs', ['slug', 'fileName']);
|
||||
|
||||
return {
|
||||
paths: pages.map((page: any) => ({
|
||||
params: {
|
||||
slug: page.slug,
|
||||
fileName: page.fileName
|
||||
}
|
||||
})),
|
||||
fallback: false
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Markdown } from '../../components/Docs/Markdown';
|
||||
import { Page } from '../../components/Docs/Page';
|
||||
import { Description, OtherMeta, Title } from '../../components/Meta';
|
||||
import { Layout } from '../../components/Page/Layout';
|
||||
import { getAllPosts } from '../../lib/api';
|
||||
import { PageFrontMatter } from '../../models/PageFrontMatter';
|
||||
|
||||
export default function Home({ pages }: { pages: PageFrontMatter[] }) {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
const welcome = pages?.find(p => p.slug === "index");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title value={strings(`documentation_title`)} />
|
||||
<Description value={`documentation_description`} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<Page items={pages} page={welcome}>
|
||||
<Markdown content={welcome?.content} />
|
||||
</Page>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const pages = getAllPosts('docs', [
|
||||
'title',
|
||||
'slug',
|
||||
'description',
|
||||
'date',
|
||||
'lastmod',
|
||||
'weight',
|
||||
'content',
|
||||
'fileName'
|
||||
]);
|
||||
|
||||
return {
|
||||
props: { pages },
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { NextPage } from 'next';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Description, OtherMeta, Title } from '../components/Meta';
|
||||
import { CTA, Features, Generators, Hero, Layout } from '../components/Page';
|
||||
import { Extension } from '../constants/extension';
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title value={Extension.home} />
|
||||
<Description value={Extension.description} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<CTA />
|
||||
|
||||
<Generators />
|
||||
|
||||
<Hero
|
||||
view={"left"}
|
||||
title={strings(`hero_title`)}
|
||||
description={(
|
||||
<>
|
||||
<p className="my-6 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{strings(`hero_description`)}
|
||||
</p>
|
||||
<p className="my-6 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{strings(`hero_description_second`)}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
imgSrc={"/assets/dashboard.png"}
|
||||
imgAlt={"Front Matter CMS editor dashboard of your static site content"}
|
||||
link={`/docs/getting-started`}
|
||||
linkText={strings(`hero_button_primary`)} />
|
||||
|
||||
|
||||
<Hero
|
||||
view={"right"}
|
||||
title={strings(`hero_media_title`)}
|
||||
description={strings(`hero_media_description`)}
|
||||
imgSrc={"/assets/media.png"}
|
||||
imgAlt={"Front Matter CMS - media management was never easier in VS Code"}
|
||||
link={`/docs/dashboard`}
|
||||
linkText={strings(`hero_media_button_primary`)}
|
||||
className={`-mt-12 sm:-mt-16`} />
|
||||
|
||||
<Features />
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
@@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Description, OtherMeta, Title } from '../../components/Meta';
|
||||
import { Layout } from '../../components/Page/Layout';
|
||||
import { Extension } from '../../constants/extension';
|
||||
import showcases from '../../showcases.json';
|
||||
import Image from 'next/image';
|
||||
|
||||
const shimmer = (w: number, h: number) => `
|
||||
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="g">
|
||||
<stop stop-color="#0e131f" offset="20%" />
|
||||
<stop stop-color="#222733" offset="50%" />
|
||||
<stop stop-color="#0e131f" offset="70%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="${w}" height="${h}" fill="#333" />
|
||||
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||
</svg>`;
|
||||
|
||||
const toBase64 = (str: string) =>
|
||||
typeof window === 'undefined'
|
||||
? Buffer.from(str).toString('base64')
|
||||
: window.btoa(str);
|
||||
|
||||
const sortTitle = (a: { title: string }, b: { title: string }) => {
|
||||
if (a.title < b.title) return -1;
|
||||
if (a.title > b.title) return 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
export default function Home({ showcases }: any) {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title value={strings(`showcase_title`)} />
|
||||
<Description value={`showcase_description`} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 divide-y-2 divide-vulcan-200">
|
||||
<div className="pb-8 space-y-2 md:space-y-5 ">
|
||||
<h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`showcase_title`)}</h1>
|
||||
|
||||
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`showcase_description`)}</p>
|
||||
</div>
|
||||
|
||||
<div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8`}>
|
||||
{showcases.filter((showcase: any) => showcase.image).sort(sortTitle).map((showcase: any) => (
|
||||
<a key={showcase.title} className="group space-y-2 md:space-y-5 relative" href={showcase.link} title={showcase.title} rel={`noopener noreferrer`}>
|
||||
<figure className={`relative h-64 lg:h-[25rem] overflow-hidden grayscale group-hover:grayscale-0`}>
|
||||
<Image
|
||||
className={`w-full object-cover object-left-top`}
|
||||
src={`/showcases/${showcase.image}`}
|
||||
alt={showcase.title}
|
||||
loading={`lazy`}
|
||||
placeholder="blur"
|
||||
blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(592, 400))}`}
|
||||
width={592}
|
||||
height={400}
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<h2 className="text-3xl tracking-tight font-extrabold sm:leading-none lg:text-3xl xl:text-4xl">{showcase.title}</h2>
|
||||
|
||||
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{showcase.description}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="mt-8 text-sm">
|
||||
<p>Want to add your site to our showcase? Great, open a showcase on <a className="text-teal-500 hover:text-teal-900" href={Extension.showcaseLink} target="_blank" rel="noopener noreferrer">Github</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
return {
|
||||
props: { showcases }
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"postcss-nested": {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 1018 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
@@ -1 +0,0 @@
|
||||
<svg 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" stroke-miterlimit="10" stroke-width="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>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 13 KiB |
@@ -1,12 +0,0 @@
|
||||
<svg width="151" height="40" viewBox="0 0 151 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M89.6028 17.1428H93.5915V31.4285H89.6028V29.5713C88.1783 31.7142 86.3264 31.857 85.1868 31.857C80.7708 31.857 77.9217 28.4285 77.9217 24.2856C77.9217 19.9999 80.7708 16.7142 84.9019 16.7142C86.0415 16.7142 88.1783 16.857 89.4604 18.9999V17.1428H89.6028ZM82.1953 24.2856C82.1953 26.5713 83.7623 28.2856 86.184 28.2856C88.4632 28.2856 90.1726 26.5713 90.1726 24.2856C90.1726 21.9999 88.6057 20.2856 86.184 20.2856C83.9047 20.2856 82.1953 21.9999 82.1953 24.2856ZM101.426 20.5713V31.4285H97.4377V20.5713H95.8708V17.1428H97.4377V12.2856H101.426V17.1428H104.133V20.5713H101.426ZM113.535 20.5713C112.538 19.7142 111.683 19.5713 111.256 19.5713C110.258 19.5713 109.689 19.9999 109.689 20.7142C109.689 21.1428 109.831 21.5713 110.971 21.9999L111.968 22.2856C113.108 22.7142 114.817 23.1428 115.529 24.2856C115.957 24.857 116.242 25.7142 116.242 26.7142C116.242 27.9999 115.814 29.2856 114.675 30.2856C113.535 31.2856 112.11 31.857 110.401 31.857C107.409 31.857 105.842 30.4285 104.845 29.4285L106.982 26.9999C107.837 27.857 108.976 28.7142 110.116 28.7142C111.256 28.7142 112.11 28.1428 112.11 27.1428C112.11 26.2856 111.398 25.857 110.828 25.7142L109.974 25.4285C108.976 24.9999 107.837 24.5713 106.982 23.7142C106.27 22.9999 105.842 22.1428 105.842 20.9999C105.842 19.5713 106.555 18.4285 107.267 17.7142C108.407 16.857 109.831 16.7142 110.971 16.7142C111.968 16.7142 113.677 16.857 115.529 18.2856L113.535 20.5713ZM122.225 18.9999C123.649 16.9999 125.643 16.7142 126.783 16.7142C130.914 16.7142 133.763 19.9999 133.763 24.2856C133.763 28.5713 130.914 31.857 126.641 31.857C125.786 31.857 123.649 31.7142 122.082 29.5713V31.4285H118.236V7.42847H122.225V18.9999ZM121.797 24.2856C121.797 26.5713 123.364 28.2856 125.786 28.2856C128.065 28.2856 129.775 26.5713 129.775 24.2856C129.775 21.9999 128.208 20.2856 125.786 20.2856C123.364 20.2856 121.797 21.9999 121.797 24.2856ZM140.316 29.2856L133.478 17.1428H138.179L142.595 25.2856L146.584 17.1428H151.142L139.746 38.9999H135.188L140.316 29.2856ZM76.9245 19.5713H66.9528V23.5713H72.2236C71.3689 26.2856 69.3745 28.1428 65.6708 28.1428C61.5396 28.1428 58.5481 24.7142 58.5481 20.5713C58.5481 16.4285 61.3972 12.857 65.5283 12.857C67.8076 12.857 70.0868 13.9999 71.5113 15.857L74.7877 13.7142C72.6509 10.7142 69.2321 8.9999 65.5283 8.9999C59.2604 8.9999 54.1321 14.1428 54.1321 20.5713C54.1321 26.9999 58.9755 32.1428 65.5283 32.1428C72.0811 32.1428 76.9245 26.9999 76.9245 20.5713C77.067 20.1428 76.9245 19.857 76.9245 19.5713Z" fill="black"/>
|
||||
<path d="M35.6132 19.9999H25.6415V22.8571H32.4792C31.482 27.1428 28.3481 30.7142 24.217 32.1428L7.83488 15.7142C9.54431 10.7142 14.3877 7.14279 19.9434 7.14279C24.217 7.14279 28.0632 9.28565 30.4849 12.5714L32.6217 10.7142C29.7726 6.85707 25.2141 4.28564 19.9434 4.28564C12.5358 4.28564 6.2679 9.57136 4.70092 16.5714L23.5047 35.4285C30.3424 33.7142 35.6132 27.4285 35.6132 19.9999ZM4.27356 20.1428C4.27356 24.1428 5.84054 27.9999 8.83205 30.9999C11.8236 33.9999 15.8122 35.5714 19.6585 35.5714L4.27356 20.1428Z" fill="white"/>
|
||||
<path d="M19.9434 0C8.97453 0 0 9 0 20C0 31 8.97453 40 19.9434 40C30.9123 40 39.8868 31 39.8868 20C39.8868 9 30.9123 0 19.9434 0ZM8.83208 31.1429C5.84057 28.1429 4.27358 24.1429 4.27358 20.2857L19.8009 35.7143C15.8123 35.5714 11.8236 34.1429 8.83208 31.1429ZM23.3623 35.2857L4.70094 16.5714C6.26792 9.57143 12.5358 4.28571 19.9434 4.28571C25.2141 4.28571 29.7726 6.85714 32.6217 10.7143L30.4849 12.5714C28.0632 9.28572 24.217 7.14286 19.9434 7.14286C14.3877 7.14286 9.68679 10.7143 7.83491 15.7143L24.217 32.1429C28.3481 30.7143 31.4821 27.1429 32.4792 22.8571H25.6415V20H35.6132C35.6132 27.4286 30.3425 33.7143 23.3623 35.2857Z" fill="#663399"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="151" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 246 KiB |
|
Before Width: | Height: | Size: 14 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg width="105" height="65" viewBox="0 0 105 65" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.8258 16.8422H44.5875V18.4328H26.6373V30.4035H43.5171V31.9941H26.6373V45.1368H44.7934V46.7273H24.8258V16.8422ZM46.3579 16.8422H48.4576L57.7621 29.985L67.2724 16.8422L80.2081 0.147949L58.956 31.3662L69.9073 46.7273H67.7253L57.7621 32.7475L47.7577 46.7273H45.6168L56.6505 31.3662L46.3579 16.8422ZM70.6896 18.4328V16.8422H93.2098V18.4328H82.8348V46.7273H81.0233V18.4328H70.6896Z" fill="black"/>
|
||||
<path d="M0.102936 16.8423H2.36731L33.5917 64.1564L20.6881 46.7274L1.99677 19.1025L1.91443 46.7274H0.102936V16.8423Z" fill="black"/>
|
||||
<path d="M93.0273 44.6568C93.4018 44.6568 93.675 44.3664 93.675 43.9912C93.675 43.6159 93.4018 43.3255 93.0273 43.3255C92.6572 43.3255 92.3796 43.6159 92.3796 43.9912C92.3796 44.3664 92.6572 44.6568 93.0273 44.6568ZM94.8073 42.9056C94.8073 44.0135 95.596 44.7372 96.7459 44.7372C97.9708 44.7372 98.711 43.9912 98.711 42.6956V38.1344H97.724V42.6911C97.724 43.4104 97.3672 43.7946 96.7371 43.7946C96.1731 43.7946 95.7898 43.4372 95.7766 42.9056H94.8073ZM100.002 42.8475C100.072 44.0001 101.02 44.7372 102.43 44.7372C103.936 44.7372 104.879 43.9644 104.879 42.7314C104.879 41.7619 104.342 41.2258 103.038 40.9176L102.337 40.7434C101.509 40.5468 101.174 40.2832 101.174 39.8231C101.174 39.2423 101.694 38.8626 102.474 38.8626C103.214 38.8626 103.725 39.2334 103.817 39.8275H104.778C104.721 38.742 103.778 37.978 102.487 37.978C101.099 37.978 100.174 38.742 100.174 39.8901C100.174 40.8372 100.698 41.4001 101.848 41.6726L102.668 41.8736C103.509 42.0746 103.879 42.3695 103.879 42.8609C103.879 43.4327 103.298 43.8482 102.505 43.8482C101.654 43.8482 101.064 43.4595 100.98 42.8475H100.002Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,8 +0,0 @@
|
||||
<svg width="159" height="28" viewBox="0 0 159 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2734 1.04697C21.5851 1.37166 21.7525 1.80834 21.7375 2.25801V25.5407C21.7505 26.0392 21.5638 26.5222 21.2188 26.8826C20.8739 27.2441 20.3916 27.4424 19.892 27.4282C19.6119 27.4286 19.3336 27.3844 19.0675 27.2972C18.8238 27.2222 18.605 27.0827 18.4341 26.8935L3.33704 7.25495V25.7425C3.3508 26.1936 3.17747 26.6304 2.85803 26.9496C2.5386 27.2687 2.10142 27.4419 1.64987 27.4282C1.2027 27.4453 0.769538 27.2706 0.459579 26.9481C0.15121 26.6239 -0.0140199 26.1895 0.000933389 25.7425V2.41076C-0.0103954 1.91368 0.18771 1.4347 0.546941 1.09061C0.883141 0.745969 1.34859 0.557979 1.83006 0.572369C2.13309 0.570907 2.43351 0.628344 2.71459 0.741479C2.97035 0.840376 3.19477 1.00619 3.36434 1.22153L18.3959 20.9038V2.25801C18.3822 1.80688 18.5555 1.37009 18.8749 1.05094C19.1944 0.731794 19.6315 0.558619 20.0831 0.572369C20.5291 0.55591 20.9613 0.728247 21.2734 1.04697Z" fill="#2E495E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.3636 1.11213C52.6901 1.47481 52.8624 1.95027 52.8441 2.43774V17.1667C52.8753 19.0704 52.4126 20.9499 51.5009 22.6219C50.6374 24.1993 49.3544 25.5076 47.7935 26.4023C46.1761 27.3294 44.34 27.8078 42.4754 27.7879C40.594 27.8176 38.7384 27.3489 37.0972 26.4296C35.5292 25.5386 34.24 24.2298 33.3734 22.6491C32.4617 20.9771 31.999 19.0977 32.0303 17.194V2.46501C32.016 1.9658 32.2145 1.484 32.5763 1.13941C32.9446 0.77943 33.4425 0.582804 33.9577 0.593892C34.4433 0.594217 34.9082 0.791009 35.2462 1.13941C35.6041 1.47767 35.8023 1.95113 35.7923 2.44319V17.1721C35.7725 18.4296 36.0912 19.6693 36.715 20.7616C37.8914 22.8336 40.0911 24.1147 42.4754 24.1166C43.6724 24.1251 44.8508 23.8204 45.8934 23.2328C46.9452 22.6521 47.8205 21.7983 48.4269 20.7616C49.0607 19.6727 49.3854 18.4317 49.366 17.1721V2.44319C49.3483 1.95967 49.5118 1.48694 49.8246 1.11759C50.1472 0.756842 50.6129 0.557132 51.0968 0.572071C51.5773 0.561041 52.0391 0.757928 52.3636 1.11213Z" fill="#2E495E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.0553 24.4848C82.2856 24.8014 82.4064 25.1844 82.3993 25.5758C82.4195 26.0697 82.2195 26.5472 81.8533 26.8796C81.5154 27.1987 81.0679 27.3763 80.6029 27.376C80.0052 27.3986 79.4387 27.1094 79.1069 26.6123L71.643 16.6566L64.3483 26.5959C64.0197 27.1012 63.4554 27.4037 62.8522 27.3978C62.4112 27.4076 61.986 27.2337 61.6783 26.9178C61.3731 26.6368 61.199 26.2414 61.1978 25.8267C61.2063 25.3648 61.3697 24.9191 61.662 24.5611L69.5354 13.8526L61.6237 3.22598C61.3767 2.91548 61.2403 2.53157 61.2361 2.13495C61.226 1.64288 61.4242 1.16942 61.7821 0.831161C62.1201 0.482762 62.585 0.285969 63.0706 0.285645C63.3569 0.287103 63.639 0.354296 63.8951 0.48203C64.1658 0.61023 64.3975 0.807887 64.5667 1.05482L71.9433 10.9559L79.2488 1.15302C79.5713 0.654278 80.1133 0.339933 80.7067 0.307465C81.1697 0.309949 81.6101 0.508137 81.9188 0.852982C82.2543 1.15244 82.4517 1.57657 82.4648 2.02584C82.4519 2.41998 82.3185 2.80072 82.0826 3.11688L74.0672 13.7763L82.0553 24.4848Z" fill="#2E495E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.66 1.04724C110.021 1.37632 110.22 1.84651 110.206 2.33466C110.219 2.81626 110.019 3.27926 109.66 3.60026C109.29 3.9128 108.817 4.07622 108.333 4.05849H101.497V25.59C101.506 26.082 101.308 26.5552 100.951 26.8938C100.151 27.6066 98.9439 27.6066 98.1444 26.8938C97.7888 26.554 97.591 26.0816 97.5984 25.59V4.05849H90.7787C90.2935 4.07691 89.8199 3.90681 89.4574 3.58389C89.1063 3.24989 88.9171 2.78037 88.9387 2.29648C88.9232 1.82482 89.1123 1.36946 89.4574 1.04724C89.8199 0.724323 90.2935 0.554225 90.7787 0.572643H108.333C108.82 0.555074 109.295 0.724971 109.66 1.04724Z" fill="#2E495E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.021 26.7528C116.778 26.0493 115.744 25.0291 115.024 23.7961C114.81 23.4912 114.689 23.1314 114.674 22.7596C114.674 22.2784 114.886 21.8215 115.253 21.5104C115.566 21.1836 115.992 20.9884 116.444 20.9649C117.129 21.0289 117.757 21.3771 118.174 21.925C119.028 23.328 120.561 24.1748 122.204 24.1507C123.538 24.1818 124.827 23.6698 125.775 22.7323C126.732 21.8259 127.263 20.5586 127.238 19.241V2.42276C127.232 1.92592 127.441 1.45071 127.811 1.11897C128.169 0.766905 128.652 0.57077 129.155 0.573458C129.662 0.548718 130.157 0.736544 130.52 1.0917C130.867 1.44194 131.054 1.91931 131.038 2.41185V19.2683C131.053 20.7792 130.654 22.2654 129.886 23.567C129.125 24.8641 128.032 25.9354 126.719 26.671C125.343 27.4495 123.785 27.8486 122.204 27.8275C120.739 27.843 119.297 27.4723 118.021 26.7528Z" fill="#00C48D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.468 26.8573C142.946 26.2802 141.55 25.4152 140.357 24.3098C139.864 23.9324 139.569 23.3529 139.554 22.7332C139.56 22.2619 139.757 21.8131 140.1 21.4895C140.427 21.1379 140.887 20.9399 141.367 20.9439C141.771 20.9384 142.162 21.0888 142.459 21.364C143.381 22.2437 144.454 22.9513 145.626 23.4533C146.804 23.9216 148.065 24.1516 149.333 24.1298C150.778 24.1754 152.203 23.7858 153.423 23.0115C154.438 22.4416 155.074 21.3762 155.093 20.213C155.112 18.9633 154.479 17.7938 153.423 17.1253C151.889 16.2255 150.206 15.6084 148.454 15.3033C145.811 14.7578 143.786 13.8795 142.36 12.6521C140.935 11.4247 140.231 9.72267 140.231 7.55152C140.201 6.12564 140.621 4.72653 141.432 3.55288C142.257 2.38785 143.392 1.47696 144.708 0.92349C146.214 0.288888 147.836 -0.0251001 149.469 0.00156685C151.001 -0.0081566 152.522 0.252229 153.963 0.770745C155.234 1.19901 156.399 1.89263 157.381 2.80552C157.906 3.19189 158.23 3.79204 158.266 4.44207C158.266 4.90438 158.079 5.34705 157.747 5.66948C157.429 6.02434 156.973 6.22349 156.497 6.215C156.175 6.22736 155.86 6.1161 155.617 5.90406C154.821 5.15754 153.878 4.58365 152.849 4.21841C151.783 3.78905 150.646 3.5633 149.497 3.55288C148.057 3.47892 146.63 3.84833 145.407 4.61118C144.458 5.2397 143.887 6.30182 143.887 7.43968C143.887 8.57755 144.458 9.63967 145.407 10.2682C146.806 11.083 148.333 11.6548 149.923 11.9593C151.611 12.2913 153.259 12.8053 154.837 13.4922C156.027 14.0182 157.046 14.8691 157.774 15.947C158.512 17.1861 158.871 18.6142 158.806 20.0548C158.828 21.4708 158.391 22.856 157.561 24.0043C156.688 25.1884 155.514 26.1171 154.16 26.6937C152.671 27.3444 151.061 27.6717 149.437 27.6538C147.746 27.6852 146.064 27.4155 144.468 26.8573Z" fill="#00C48D"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |