Compare commits
153 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
995c6fff2b | ||
|
|
c216062537 | ||
|
|
80a27a1e5e | ||
|
|
b8f5e10f4b | ||
|
|
d8bffdcf6c | ||
|
|
71c0360523 | ||
|
|
3260c2b3e0 | ||
|
|
a523c4ab63 | ||
|
|
24f69ea819 | ||
|
|
12d816b761 | ||
|
|
0e13a3783f | ||
|
|
09e5f3aa7f | ||
|
|
5991db1a83 | ||
|
|
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 | ||
|
|
01b1b3d0ea | ||
|
|
9f2c68fd66 | ||
|
|
9f21042e58 | ||
|
|
840e6fc6fd | ||
|
|
3f237386b2 | ||
|
|
eca6e00bf2 | ||
|
|
afcccd780b | ||
|
|
239c611d3e | ||
|
|
4a2f362ed7 | ||
|
|
b040669bfb | ||
|
|
2c5a35d9b8 | ||
|
|
eade3f4799 | ||
|
|
98d8daaa7c | ||
|
|
1c227c547f | ||
|
|
167c1fafa1 | ||
|
|
edf5fc8401 | ||
|
|
3de0006651 | ||
|
|
f79d382da5 | ||
|
|
11bb0fabcd | ||
|
|
4c43eb5eeb | ||
|
|
364d6ec3f9 | ||
|
|
40646fd1b3 | ||
|
|
2769eb9b71 | ||
|
|
aa97051437 | ||
|
|
496391b048 | ||
|
|
2e743c896f | ||
|
|
3941c33b1d | ||
|
|
cdc49c09f1 | ||
|
|
fc7300ba87 | ||
|
|
d3aa51c9ed | ||
|
|
387c906af2 | ||
|
|
d04c2a96b7 | ||
|
|
797c4cd2b1 | ||
|
|
0ebc874796 | ||
|
|
0b970a73b6 | ||
|
|
065b2fef1b | ||
|
|
b5033f6b45 | ||
|
|
274b341648 | ||
|
|
c51f2a80c3 | ||
|
|
e6415a3ee9 | ||
|
|
134a5aaa0d | ||
|
|
86c609f49f | ||
|
|
bf3dec46bc | ||
|
|
2d7c9cfc05 | ||
|
|
7e705ccfd8 | ||
|
|
1680637235 | ||
|
|
3de56b94c3 | ||
|
|
1b5840b2bf | ||
|
|
b14c4c50cf | ||
|
|
1f8c2f5b1e | ||
|
|
db3a584ab9 | ||
|
|
918f914c91 | ||
|
|
9f5d180447 | ||
|
|
77e2c68810 | ||
|
|
60caf743c6 | ||
|
|
b8dee7a5c9 | ||
|
|
3b6a7e9b71 | ||
|
|
648ee34171 | ||
|
|
4a88e471f6 | ||
|
|
14a2b715e7 | ||
|
|
0c368dbe65 | ||
|
|
f0b7542d94 | ||
|
|
80cd7d3eac | ||
|
|
ef08e0a34b | ||
|
|
62a2c22ba1 | ||
|
|
1417575b98 | ||
|
|
4862810035 | ||
|
|
e1b9bad05b | ||
|
|
47f7521e93 | ||
|
|
771f86710f | ||
|
|
dc55cedb0d | ||
|
|
e93c6832e4 | ||
|
|
0f0c7f9f3d | ||
|
|
d9984ce292 | ||
|
|
c9e813effe | ||
|
|
3fea99ef24 | ||
|
|
06a3841dd3 | ||
|
|
32fb742de5 | ||
|
|
c41b7adcfd | ||
|
|
be55a2237d | ||
|
|
265f788f98 | ||
|
|
c7d3a7dcf6 | ||
|
|
e02a766070 | ||
|
|
c9dd684451 | ||
|
|
5329033b46 | ||
|
|
4bd914fdba |
11
.all-contributorsrc
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"imageSize": 100,
|
||||
"contributorsPerLine": 7,
|
||||
"contributorsSortAlphabetically": false,
|
||||
"badgeTemplate": "",
|
||||
"contributorTemplate": "",
|
||||
"types": {},
|
||||
"skipCi": "true",
|
||||
"contributors": []
|
||||
}
|
||||
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: Issue
|
||||
title: 'Issue: '
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: Enhancement
|
||||
title: 'Enhancement: '
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
|
||||
20
.github/ISSUE_TEMPLATE/showcase.md
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
name: Showcase
|
||||
about: Let us know that you are using Front Matter and we'll add you on our showcase page
|
||||
title: 'Showcase: '
|
||||
labels: 'showcase'
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Title you want to give your site**
|
||||
|
||||
Define a clear title that will be used on the showcase page. Example: `Front Matter`.
|
||||
|
||||
**Link to the site**
|
||||
|
||||
A URL to the site to add.
|
||||
|
||||
**A nice and clean description**
|
||||
|
||||
Keep it simple. Just let us know which static-site generator you used, and other frameworks.
|
||||
|
||||
71
.github/workflows/codeql-analysis.yml
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
# For most projects, this workflow file will not need changing; you simply need
|
||||
# to commit it to your repository.
|
||||
#
|
||||
# You may wish to alter this file to override the set of languages analyzed,
|
||||
# or to provide custom queries or build logic.
|
||||
#
|
||||
# ******** NOTE ********
|
||||
# We have attempted to detect the languages in your repository. Please check
|
||||
# the `language` matrix defined below to confirm you have the correct set of
|
||||
# supported CodeQL languages.
|
||||
#
|
||||
name: "CodeQL"
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
pull_request:
|
||||
# The branches below must be a subset of the branches above
|
||||
branches: [ main ]
|
||||
schedule:
|
||||
- cron: '24 14 * * 5'
|
||||
|
||||
jobs:
|
||||
analyze:
|
||||
name: Analyze
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
actions: read
|
||||
contents: read
|
||||
security-events: write
|
||||
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
language: [ 'javascript' ]
|
||||
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
|
||||
# Learn more:
|
||||
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v2
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@v1
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
# If you wish to specify custom queries, you can do so here or in a config file.
|
||||
# By default, queries listed here will override any specified in a config file.
|
||||
# Prefix the list here with "+" to use these queries and those in the config file.
|
||||
# queries: ./path/to/local/query, your-org/your-repo/queries@main
|
||||
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@v1
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# 📚 https://git.io/JvXDl
|
||||
|
||||
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
|
||||
# and modify them (or add more) to build your code if your project
|
||||
# uses a compiled language
|
||||
|
||||
#- run: |
|
||||
# make bootstrap
|
||||
# make release
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@v1
|
||||
27
.github/workflows/release-beta.yml
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
name: BETA Release
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- dev
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: "Build and release"
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
registry-url: https://registry.npmjs.org/
|
||||
|
||||
- name: Install the dependencies
|
||||
run: npm i
|
||||
|
||||
- name: Prepare BETA
|
||||
run: node scripts/beta-release.js $GITHUB_RUN_ID
|
||||
|
||||
- name: Publish
|
||||
run: npx vsce publish -p ${{ secrets.VSCE_PAT }} --baseImagesUrl https://raw.githubusercontent.com/estruyf/vscode-front-matter/dev
|
||||
|
||||
8
.github/workflows/release.yml
vendored
@@ -19,10 +19,10 @@ jobs:
|
||||
|
||||
- name: Install the dependencies
|
||||
run: npm i
|
||||
|
||||
- name: Install vsce
|
||||
run: npm i -g vsce
|
||||
|
||||
- name: Prepare MAIN release
|
||||
run: node scripts/main-release.js
|
||||
|
||||
- name: Publish
|
||||
run: vsce publish -p ${{ secrets.VSCE_PAT }}
|
||||
run: npx vsce publish -p ${{ secrets.VSCE_PAT }}
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
66
.vscode/recoil.code-snippets
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"Recoil Atom": {
|
||||
"prefix": "sq-atom",
|
||||
"body": [
|
||||
"import { atom } from 'recoil';",
|
||||
"",
|
||||
"export const ${1:CollectionId}Atom = atom({",
|
||||
" key: '${1:CollectionId}Atom',",
|
||||
" default: 1",
|
||||
"});"
|
||||
],
|
||||
"description": "Creates a new atom",
|
||||
"scope": "typescript"
|
||||
},
|
||||
"Recoil Selector (sync)": {
|
||||
"prefix": "sq-selector-sync",
|
||||
"body": [
|
||||
"import { selector } from 'recoil';",
|
||||
"",
|
||||
"export const ${1:CollectionData}Selector = selector({",
|
||||
" key: '${1:CollectionData}Selector',",
|
||||
" get: ({get}) => {",
|
||||
" return get(${1:CollectionData}Atom);",
|
||||
" }",
|
||||
"});"
|
||||
],
|
||||
"description": "Creates a new synchronous selector",
|
||||
"scope": "typescript"
|
||||
},
|
||||
"Recoil Selector (async)": {
|
||||
"prefix": "sq-selector-async",
|
||||
"body": [
|
||||
"import { selector } from 'recoil';",
|
||||
"",
|
||||
"export const ${1:CollectionData}Selector = selector({",
|
||||
" key: '${1:CollectionData}Selector',",
|
||||
" get: async ({get}) => {",
|
||||
" return await dataFetch(get(${2:CollectionIdState}));",
|
||||
" }",
|
||||
"});"
|
||||
],
|
||||
"description": "Creates a new asynchronous selector",
|
||||
"scope": "typescript"
|
||||
},
|
||||
"Recoil selectorFamily": {
|
||||
"prefix": "sq-selector-fam",
|
||||
"body": [
|
||||
"import { selectorFamily } from 'recoil';",
|
||||
"",
|
||||
"export const ${1:CollectionData}Selector = selectorFamily({",
|
||||
" key: '${1:CollectionData}Selector',",
|
||||
" get: id => async () => {",
|
||||
" return await dataFetch({id});",
|
||||
" }",
|
||||
"});"
|
||||
],
|
||||
"description": "Creates a selectorFamily (same as selector, but used to provide parameters)",
|
||||
"scope": "typescript"
|
||||
},
|
||||
"useTranslation": {
|
||||
"prefix": ["sq-translation", "useTranslation"],
|
||||
"body": "const { t: strings } = useTranslation();",
|
||||
"description": "Include the translations",
|
||||
"scope": "typescriptreact"
|
||||
}
|
||||
}
|
||||
16
.vscode/settings.json
vendored
@@ -8,16 +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
|
||||
"eliostruyf.writingstyleguide.biasFree.isDisabled": true,
|
||||
"exportall.config.folderListener": [
|
||||
"/src/pagesView/state/atom",
|
||||
"/src/pagesView/state/selectors"
|
||||
]
|
||||
}
|
||||
@@ -15,4 +15,6 @@ tailwind.config.js
|
||||
sample
|
||||
postcss.config.js
|
||||
.templates
|
||||
.github
|
||||
.github
|
||||
scripts
|
||||
.all-contributorsrc
|
||||
34
CHANGELOG.md
@@ -1,5 +1,39 @@
|
||||
# Change Log
|
||||
|
||||
## [4.0.1] - 2021-09-24
|
||||
|
||||
- [#114](https://github.com/estruyf/vscode-front-matter/issues/114): Fix for categories/tags provided as string in YAML
|
||||
- [#115](https://github.com/estruyf/vscode-front-matter/issues/115): Fix for updating added categories/tags
|
||||
- [#116](https://github.com/estruyf/vscode-front-matter/issues/116): Fix for not showing the `-1` limit on inputs
|
||||
|
||||
## [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
|
||||
- [#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
|
||||
|
||||
121
README.beta.md
Normal file
@@ -0,0 +1,121 @@
|
||||
<h1 align="center">
|
||||
<a href="https://frontmatter.codes">
|
||||
<img alt="Front Matter" src="https://frontmatter.codes/assets/frontmatter-social.png">
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
|
||||
<img src="https://vsmarketplacebadge.apphb.com/version/eliostruyf.vscode-front-matter.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
|
||||
</a>
|
||||
|
||||
<img src="https://vsmarketplacebadge.apphb.com/installs/eliostruyf.vscode-front-matter.svg" alt="Number of installs" style="display: inline-block;margin-left:10px" />
|
||||
|
||||
<img src="https://vsmarketplacebadge.apphb.com/rating/eliostruyf.vscode-front-matter.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />
|
||||
|
||||
<a href="https://www.buymeacoffee.com/zMeFRy9" title="Buy me a coffee" style="margin-left:10px">
|
||||
<img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-€%203-blue?logo=buy-me-a-coffee&style=flat" alt="Buy me a coffee" style="display: inline-block" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h2 align="center">
|
||||
<a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
|
||||
Check out the extension documentation at beta.frontmatter.codes
|
||||
</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.
|
||||
|
||||
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
|
||||
|
||||
<p align="center">
|
||||
<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.
|
||||
|
||||
**Version 2**
|
||||
|
||||
In version v2 we released the re-designed sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.
|
||||
|
||||
<p align="center" style="margin-top: 2rem;">
|
||||
<a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
|
||||
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.png?post_id=309033&theme=dark" alt="Front Matter BETA - Managing your static sites straight from within VS Code | Product Hunt" style="width: 250px; height: 40px;" />
|
||||
</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
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
## 👉 Contributors 🤘
|
||||
|
||||
<a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
|
||||
</a>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## 🖤 Sponsors
|
||||
|
||||
<p align="center">
|
||||
<a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
|
||||
<img src="assets/sponsors/powered-by-vercel.png" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<p align="center">
|
||||
<a href="https://visitorbadge.io">
|
||||
<img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
|
||||
</a>
|
||||
</p>
|
||||
70
README.md
@@ -1,10 +1,10 @@
|
||||
<h1 align="center">
|
||||
<a href="https://frontmatter.codes">
|
||||
<img alt="Front Matter" src="./assets/frontmatter-teal-128x128.png">
|
||||
<img alt="Front Matter" src="https://frontmatter.codes/assets/frontmatter-social.png">
|
||||
</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">
|
||||
@@ -21,11 +21,13 @@
|
||||
</p>
|
||||
|
||||
<h2 align="center">
|
||||
<a href="https://frontmatter.codes" title="Documenation @ frontmatter.codes">
|
||||
Check out the extension documenation at frontmatter.codes
|
||||
<a href="https://frontmatter.codes" title="Documentation @ frontmatter.codes">
|
||||
Check out the extension documentation at frontmatter.codes
|
||||
</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 +41,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.
|
||||
@@ -52,18 +58,60 @@ In version v3 we introduced the welcome and dashboard webview. The welcome view
|
||||
|
||||
In version v2 we released the re-designed sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.
|
||||
|
||||
<h2 align="center">
|
||||
<a href="https://frontmatter.codes" title="Documenation @ frontmatter.codes">
|
||||
Check out the extension documenation at frontmatter.codes
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<p align="center" style="margin-top: 2rem;">
|
||||
<a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
|
||||
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.png?post_id=309033&theme=dark" alt="Front Matter - Managing your static sites straight from within VS Code | Product Hunt" style="width: 250px; height: 40px;" />
|
||||
</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
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
## 👉 Contributors 🤘
|
||||
|
||||
<a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
|
||||
</a>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
## 🖤 Sponsors
|
||||
|
||||
<p align="center">
|
||||
<a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
|
||||
<img src="assets/sponsors/powered-by-vercel.png" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<p align="center">
|
||||
<a href="https://visitorbadge.io">
|
||||
<img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
|
||||
|
||||
BIN
assets/frontmatter-beta.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
45
assets/frontmatter-beta.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFE45E;}
|
||||
.st1{fill:none;stroke:#FFE45E;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st2{font-family:'MyriadPro-Bold';}
|
||||
.st3{font-size:8px;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M4.1,10.2H2.4V2.1h3.1V4H4.1v1.2h1.2V7H4.1V10.2z"/>
|
||||
<path class="st0" d="M10.7,10.2H8.9L8,7.3c0-0.1,0-0.1,0-0.2C7.9,7.1,7.9,7,7.8,6.8v0.6v2.9H6.1V2.1h1.8c0.8,0,1.3,0.2,1.8,0.6
|
||||
c0.5,0.5,0.8,1.2,0.8,2.1c0,1-0.4,1.6-1.1,2L10.7,10.2z M7.9,5.8L7.9,5.8c0.3,0,0.5-0.1,0.6-0.3S8.7,5,8.7,4.8c0-0.6-0.3-1-0.8-1
|
||||
l0,0V5.8z"/>
|
||||
<path class="st0" d="M16.1,6.2c0,1.2-0.2,2.3-0.7,3.1s-1.1,1.2-1.7,1.2s-1.2-0.3-1.6-0.9c-0.6-0.8-0.9-1.9-0.9-3.4
|
||||
s0.3-2.6,0.9-3.4C12.6,2.3,13,2,13.7,2c0.8,0,1.3,0.4,1.8,1.2C15.8,3.8,16.1,4.8,16.1,6.2z M14.3,6.2c0-1.4-0.2-2.2-0.7-2.2
|
||||
c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.6c0,0.7,0.1,1.2,0.2,1.6c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
|
||||
C14.2,7.3,14.3,6.9,14.3,6.2z"/>
|
||||
<path class="st0" d="M16.8,10.2V2.1h1.7l0.9,2.9c0.1,0.1,0.1,0.3,0.2,0.6c0.1,0.2,0.1,0.5,0.2,0.8L20,7c-0.1-0.7-0.1-1.3-0.2-1.8
|
||||
s-0.1-1-0.1-1.2V2.1h1.7v8.2h-1.6l-0.9-3c-0.1-0.3-0.2-0.6-0.3-0.9c-0.1-0.3-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.5
|
||||
c0,0.4,0,0.8,0,1.2v2.1h-1.7V10.2z"/>
|
||||
<path class="st0" d="M24.6,10.2h-1.7V4h-1V2.1h3.7V4h-1.1V10.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect class="st1" width="28" height="28"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M3.1,11.6H4l0.6,3c0.1,0.4,0.2,0.8,0.2,1.2C4.9,16.2,4.9,16.6,5,17c0-0.1,0-0.1,0-0.1v-0.1l0.2-0.9l0.1-0.8
|
||||
l0.1-0.5l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.2v-1v-0.9l0,0c0,0,0,0,0-0.1v0.2c0,0.2,0,0.3-0.1,0.5
|
||||
c-0.1,0.2,0,0.2-0.1,0.3L6,15.7V16l-0.6,3.3H4.7l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2l-0.3,5.2h-1
|
||||
L3.1,11.6z"/>
|
||||
<path class="st0" d="M9.4,11.6h0.8l1.6,7.5h-1l-0.3-1.5H9l-0.3,1.5h-1L9.4,11.6z M10.4,16.8l-0.3-1.2C10,14.8,9.8,13.9,9.7,13
|
||||
c0,0.5-0.1,0.9-0.2,1.4c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1L10.4,16.8L10.4,16.8z"/>
|
||||
<path class="st0" d="M11.6,11.6h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V11.6z"/>
|
||||
<path class="st0" d="M14.9,11.6h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V11.6z"/>
|
||||
<path class="st0" d="M18.8,11.6h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V11.6z"/>
|
||||
<path class="st0" d="M22.3,11.6h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6
|
||||
l1.4,3.7h-1l-1.4-3.7v3.7h-1L22.3,11.6L22.3,11.6z M23.3,14.9c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6
|
||||
c-0.1-0.2-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.3-0.2s-0.3-0.1-0.4-0.1h-0.2v2.5H23.3z"/>
|
||||
</g>
|
||||
</g>
|
||||
<text transform="matrix(1 0 0 1 5.4457 25.9479)" class="st0 st2 st3">BETA</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
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;
|
||||
}
|
||||
6
assets/powered-by-vercel.svg
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
assets/sponsors/powered-by-vercel.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
6
assets/sponsors/powered-by-vercel.svg
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 275 KiB After Width: | Height: | Size: 263 KiB |
|
Before Width: | Height: | Size: 276 KiB After Width: | Height: | Size: 265 KiB |
BIN
assets/v3.1.0/media.png
Normal file
|
After Width: | Height: | Size: 327 KiB |
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,56 +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 title = getTitle(props);
|
||||
const elm = <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
|
||||
return elm;
|
||||
},
|
||||
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,49 +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';
|
||||
|
||||
export interface INavigationProps {}
|
||||
|
||||
export const Navigation: React.FunctionComponent<INavigationProps> = (props: React.PropsWithChildren<INavigationProps>) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
|
||||
<div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
|
||||
<div className="flex items-center">
|
||||
<Link href="/">
|
||||
<a title={Extension.name}>
|
||||
<span className="sr-only">{Extension.name}</span>
|
||||
<Logo className={`text-whisper-500 h-12 w-auto`} />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-10 space-x-4">
|
||||
<div className="hidden ml-10 space-x-8 lg:block">
|
||||
{navigation.main.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
{navigation.social.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
|
||||
<span className="sr-only">{link.name}</span>
|
||||
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
|
||||
{navigation.main.map((link) => (
|
||||
<a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Navigation';
|
||||
@@ -1,45 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Extension } from '../../constants/extension';
|
||||
|
||||
export interface ICTAProps {}
|
||||
|
||||
export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="px-4 sm:px-0 pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
|
||||
<div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
|
||||
<div className={`my-4 sm:my-5 lg:my-6`}>
|
||||
<h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
|
||||
<span className="md:block">{strings(`cta_title`)}</span>{' '}
|
||||
<span className="text-teal-500 md:block">{Extension.name}</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{strings(`cta_description`)}
|
||||
</p>
|
||||
|
||||
<div className="mt-10 max-w-sm mx-auto sm:max-w-none">
|
||||
<div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
|
||||
<a href={Extension.installLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
|
||||
{strings(`cta_button_primary`)}
|
||||
</a>
|
||||
<a href={`/docs`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
|
||||
{strings(`cta_button_secondary`)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:mx-auto sm:max-w-3xl sm:px-6">
|
||||
<div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
|
||||
<div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
|
||||
<img className={`w-full lg:h-full lg:w-auto lg:max-w-none`} src={`/assets/site-preview.png`} alt={`Site preview`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { features } from '../../constants/features';
|
||||
import { CheckIcon } from '@heroicons/react/outline';
|
||||
|
||||
export interface IFeaturesProps {}
|
||||
|
||||
export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.PropsWithChildren<IFeaturesProps>) => {
|
||||
const { t: strings } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={``}>
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-extrabold">{strings(`features_title`)}</h2>
|
||||
<p className="mt-4 text-lg text-whisper-700">
|
||||
{strings(`features_description`)}
|
||||
</p>
|
||||
</div>
|
||||
<dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative">
|
||||
<dt>
|
||||
<CheckIcon className="absolute h-6 w-6 text-teal-500" aria-hidden="true" />
|
||||
<p className="ml-9 text-lg leading-6 font-medium text-whisper-500">{strings(feature.name)}</p>
|
||||
</dt>
|
||||
<dd className="mt-2 ml-9 text-base text-whisper-800">{strings(feature.description)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,36 +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`}>
|
||||
<img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes&countColor=%23060A15&labelColor=%23060A15" />
|
||||
</a>
|
||||
|
||||
{navigation.social.map((item) => (
|
||||
<a key={item.name} title={item.title} href={item.href} className="text-gray-400 hover:text-gray-500" rel={`noopener noreferrer`}>
|
||||
<span className="sr-only">{item.name}</span>
|
||||
<item.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-8 text-center text-base text-whisper-900">© 2021 {Extension.name}. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -1,43 +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-16 px-4 sm:px-6 lg:px-8">
|
||||
<p className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
|
||||
{strings(`generators_title`)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/11ty.svg" alt="11ty" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/docusaurus.svg" alt="Docusaurus" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/gatsby.svg" alt="Gatsby" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/hugo.svg" alt="Hugo" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/jekyll.svg" alt="Jekyll" />
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<img className="h-12" src="/assets/logos/nextjs.svg" alt="Next.js" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-center">
|
||||
<p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>and many more...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Navigation } from '../Navigation';
|
||||
import { Footer } from './Footer';
|
||||
|
||||
export interface ILayoutProps {}
|
||||
|
||||
export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
|
||||
return (
|
||||
<div className={`flex flex-col h-screen`}>
|
||||
<header>
|
||||
<Navigation />
|
||||
</header>
|
||||
|
||||
<main className={`flex-grow`}>
|
||||
{props.children}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
|
||||
export const Extension = {
|
||||
name: `Front Matter`,
|
||||
home: `The CMS running in VS Code`,
|
||||
description: `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.`,
|
||||
|
||||
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",
|
||||
reviewLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details",
|
||||
installLink: "vscode:extension/eliostruyf.vscode-front-matter"
|
||||
}
|
||||
@@ -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,35 +0,0 @@
|
||||
import { HeartIcon } 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: 'Sponsor us',
|
||||
title: 'Become a sponsor, and get mentioned',
|
||||
href: Extension.sponsorLink,
|
||||
icon: (props: any) => (
|
||||
<HeartIcon {...props} />
|
||||
)
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -1,230 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
## [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 documenation 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,33 +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 has never been easier in VS Code. With the Front Matter dashboard, you will be able to view all your pages and **search** through them, **filter**, **sort**, and much more.
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||
## Supported filters
|
||||
|
||||
- Tag filter
|
||||
- Category filter
|
||||
- Content folder (when you have multiple registered)
|
||||
|
||||
## Supported sorting
|
||||
|
||||
- Last modified
|
||||
- Filename (asc/desc)
|
||||
|
||||
## 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,49 +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.
|
||||
|
||||
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`
|
||||
|
||||
## 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,233 +0,0 @@
|
||||
---
|
||||
title: Settings
|
||||
slug: settings
|
||||
description:
|
||||
date: '2021-08-30T16:13:00.546Z'
|
||||
lastmod: '2021-08-30T16:13:01.763Z'
|
||||
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.folders
|
||||
|
||||
This array of folders defines where the extension can easily create new content by running the create article command.
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `[]`
|
||||
|
||||
Sample:
|
||||
|
||||
```json
|
||||
{
|
||||
"frontMatter.content.folders": [{
|
||||
"title": "Articles",
|
||||
"fsPath": "<the path to the folder>",
|
||||
"paths": ["<wsl-folder-path>"]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
### 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`
|
||||
@@ -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,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,50 +0,0 @@
|
||||
import { Extension } from "../constants/extension";
|
||||
|
||||
|
||||
export const strings = {
|
||||
// CTA
|
||||
cta_title: "Manage your static site with",
|
||||
cta_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.",
|
||||
cta_button_primary: "Get the extension",
|
||||
cta_button_secondary: "Read our docs",
|
||||
|
||||
// Generators
|
||||
generators_title: "Built for any static-site generator you might like",
|
||||
|
||||
// Features
|
||||
features_title: "Features",
|
||||
features_description: "Check out our main features which help you manage your static-site",
|
||||
|
||||
// Feature
|
||||
feature_title_1: "Manage your site within VS Code",
|
||||
feature_description_1: "A Content Management System built to run within Visual Studio Code. No dependencies on any website or API.",
|
||||
|
||||
feature_title_2: "Preview",
|
||||
feature_description_2: "Allow showing your page previews within Visual Studio Code.",
|
||||
|
||||
feature_title_3: "Page 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.",
|
||||
|
||||
// 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 static-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,
|
||||
}
|
||||
5635
docs/package-lock.json
generated
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "frontmatter-docs",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"changelog": "node scripts/copy-changelog.js",
|
||||
"dev": "npm run changelog && next dev",
|
||||
"build": "npm run changelog && next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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.0",
|
||||
"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.0",
|
||||
"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">
|
||||
<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:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
|
||||
<div className="py-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,28 +0,0 @@
|
||||
import type { NextPage } from 'next';
|
||||
import React from 'react';
|
||||
import { Description, OtherMeta, Title } from '../components/Meta';
|
||||
import { CTA } from '../components/Page/CTA';
|
||||
import { Features } from '../components/Page/Features';
|
||||
import { Generators } from '../components/Page/Generators';
|
||||
import { Layout } from '../components/Page/Layout';
|
||||
import { Extension } from '../constants/extension';
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Title value={Extension.home} />
|
||||
<Description value={Extension.description} />
|
||||
<OtherMeta image={`/assets/frontmatter-preview.png`} />
|
||||
|
||||
<Layout>
|
||||
<CTA />
|
||||
|
||||
<Generators />
|
||||
|
||||
<Features />
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
@@ -1,47 +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 showcases from '../../showcases.json';
|
||||
|
||||
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:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
|
||||
<div className="py-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).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`}>
|
||||
<img className={`w-full object-cover`} src={`/showcases/${showcase.image}`} alt={showcase.title} loading={`lazy`} />
|
||||
</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>
|
||||
</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: 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: 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 |