mirror of
https://github.com/marp-team/marp.git
synced 2024-09-11 10:35:38 +03:00
Merge pull request #100 from marp-team/upgrade-dependencies
Upgrade dependent packages to the latest
This commit is contained in:
commit
57fc5c6ea1
@ -19,7 +19,7 @@ module.exports = {
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:import/typescript',
|
||||
'prettier/@typescript-eslint',
|
||||
'prettier',
|
||||
],
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
|
19
package.json
19
package.json
@ -35,18 +35,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/recommended": "^1.0.1",
|
||||
"@types/node": "^14.14.7",
|
||||
"@typescript-eslint/eslint-plugin": "^4.7.0",
|
||||
"@typescript-eslint/parser": "^4.7.0",
|
||||
"eslint": "^7.13.0",
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"eslint-import-resolver-typescript": "^2.3.0",
|
||||
"@types/node": "~14.14.43",
|
||||
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
||||
"@typescript-eslint/parser": "^4.22.0",
|
||||
"eslint": "^7.25.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-import-resolver-typescript": "^2.4.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"lerna": "^3.22.1",
|
||||
"lerna": "^4.0.0",
|
||||
"prettier": "^2.1.2",
|
||||
"typescript": "~4.0.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"webpack": "^5.0.0"
|
||||
"typescript": "^4.2.4"
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ module.exports = {
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:jsx-a11y/recommended',
|
||||
'prettier/react',
|
||||
'prettier',
|
||||
],
|
||||
rules: {
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
|
@ -8,7 +8,7 @@ module.exports = {
|
||||
'styled-jsx': {
|
||||
plugins: [
|
||||
[
|
||||
'styled-jsx-plugin-postcss',
|
||||
require.resolve('styled-jsx-plugin-postcss'),
|
||||
{ path: path.resolve(__dirname, './postcss.config.js') },
|
||||
],
|
||||
],
|
||||
|
@ -1,7 +1,10 @@
|
||||
import classNames from 'classnames'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
export type ButtonProps = {
|
||||
children?: ReactNode
|
||||
color?: 'primary'
|
||||
href?: string
|
||||
outline?: boolean
|
||||
[key: string]: unknown
|
||||
}
|
||||
@ -50,10 +53,10 @@ export const Button = ({
|
||||
@apply bg-background duration-150;
|
||||
}
|
||||
.button:hover:active {
|
||||
@apply outline-none shadow-outline bg-gray-300 duration-0;
|
||||
@apply outline-none ring bg-gray-300 duration-0;
|
||||
}
|
||||
.button:focus {
|
||||
@apply outline-none shadow-outline;
|
||||
@apply outline-none ring;
|
||||
}
|
||||
|
||||
/* Primary color */
|
||||
|
@ -27,7 +27,7 @@ export const Typography: React.FC = ({ children }) => (
|
||||
@apply relative font-bold text-sm text-gray-600 mt-6 mb-4;
|
||||
}
|
||||
.typography :global(.anchor-link) {
|
||||
@apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-no-wrap my-auto bg-no-repeat bg-left hidden;
|
||||
@apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-nowrap my-auto bg-no-repeat bg-left hidden;
|
||||
|
||||
background-size: 1rem 1rem;
|
||||
background-image: url('https://icongr.am/octicons/link.svg?color=718096');
|
||||
|
@ -33,7 +33,7 @@ export const Breadcrumb = ({ breadcrumbs }: BreadcrumbProps) => (
|
||||
@apply absolute inset-0 flex items-center justify-end;
|
||||
}
|
||||
ol {
|
||||
@apply flex-1 inline-flex flex-no-wrap whitespace-no-wrap;
|
||||
@apply flex-1 inline-flex flex-nowrap whitespace-nowrap;
|
||||
}
|
||||
li {
|
||||
@apply block;
|
||||
|
@ -63,7 +63,7 @@ export const Navigation = ({
|
||||
@apply bg-gray-300 duration-0;
|
||||
}
|
||||
.page-link:focus-visible {
|
||||
@apply shadow-outline;
|
||||
@apply ring;
|
||||
}
|
||||
|
||||
.page-link.active {
|
||||
|
@ -95,6 +95,7 @@ export const Mobile: React.FC<LayoutProps> = ({
|
||||
allowOutsideClick: () => true,
|
||||
escapeDeactivates: false,
|
||||
initialFocus: '#docs-nav',
|
||||
fallbackFocus: '#docs-nav-toggle',
|
||||
}}
|
||||
>
|
||||
<nav
|
||||
@ -125,6 +126,7 @@ export const Mobile: React.FC<LayoutProps> = ({
|
||||
<nav className="docs-topbar">
|
||||
<button
|
||||
className="docs-btn w-8 h-8 m-1 relative z-20"
|
||||
id="docs-nav-toggle"
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-controls="docs-nav"
|
||||
@ -174,7 +176,7 @@ export const Mobile: React.FC<LayoutProps> = ({
|
||||
@apply bg-gray-300 outline-none;
|
||||
}
|
||||
.docs-btn:focus-visible {
|
||||
@apply shadow-outline;
|
||||
@apply ring;
|
||||
}
|
||||
|
||||
#docs-nav {
|
||||
|
@ -106,7 +106,7 @@ const Card: React.FC<CardProps> = ({
|
||||
}
|
||||
.card-link:hover:active,
|
||||
.card-link:focus {
|
||||
@apply shadow-outline outline-none duration-0;
|
||||
@apply ring outline-none duration-0;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
@ -137,7 +137,7 @@ const Card: React.FC<CardProps> = ({
|
||||
export const GetStarted = () => (
|
||||
<>
|
||||
<span id="get-started" className="named-anchor" />
|
||||
<div className="get-started clearfix">
|
||||
<div className="get-started flow-root">
|
||||
<section className="container mx-auto py-10 px-8 lg:px-16">
|
||||
<h3 className="font-bold text-center text-2xl sm:text-3xl">
|
||||
<mark>Tools and integrations</mark>
|
||||
|
@ -1,11 +1,12 @@
|
||||
// Based on Marpit PostCSS rem plugin
|
||||
// https://github.com/marp-team/marpit/blob/main/src/postcss/root/rem.js
|
||||
|
||||
const { plugin } = require('postcss')
|
||||
const rootFontSizeCustomProp = '--root-font-size'
|
||||
const skipParsingMatcher = /("[^"]*"|'[^']*'|(?:attr|url|var)\([^)]*\))/g
|
||||
|
||||
module.exports = plugin('marp-rem', () => (css) =>
|
||||
module.exports = () => ({
|
||||
postcssPlugin: 'marp-rem',
|
||||
Once: (css) =>
|
||||
css.walkDecls((decl) => {
|
||||
if (decl.prop === rootFontSizeCustomProp) return
|
||||
|
||||
@ -20,5 +21,7 @@ module.exports = plugin('marp-rem', () => (css) =>
|
||||
)
|
||||
})
|
||||
.join('')
|
||||
})
|
||||
)
|
||||
}),
|
||||
})
|
||||
|
||||
module.exports.postcss = true
|
||||
|
@ -2,6 +2,12 @@ const path = require('path')
|
||||
const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
||||
enabled: !!process.env.ANALYZE,
|
||||
})
|
||||
const withTM = require('next-transpile-modules')([
|
||||
'unist-util-remove-position',
|
||||
'unist-util-visit',
|
||||
'unist-util-is',
|
||||
'hast-util-whitespace',
|
||||
])
|
||||
const { devDependencies } = require('./package.json')
|
||||
|
||||
// Build test function to ignore devDependencies in client build
|
||||
@ -18,13 +24,17 @@ const testToignoreDevDependenciesInClient = (id) =>
|
||||
const env = { BUILD_YEAR: new Date().getFullYear().toString() }
|
||||
if (process.env.URL) env.NEXT_PUBLIC_HOST = process.env.URL // for Netlify's deploy preview
|
||||
|
||||
module.exports = withBundleAnalyzer({
|
||||
module.exports = withBundleAnalyzer(
|
||||
withTM({
|
||||
env,
|
||||
experimental: {
|
||||
optimizeFonts: true,
|
||||
},
|
||||
future: {
|
||||
webpack5: true,
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
config.module.rules.push({ test: /\.md$/, use: 'raw-loader' })
|
||||
config.module.rules.push({ test: /\.md$/, type: 'asset/source' })
|
||||
config.module.rules.push({
|
||||
test: /\.ya?ml$/,
|
||||
type: 'json',
|
||||
@ -41,4 +51,5 @@ module.exports = withBundleAnalyzer({
|
||||
|
||||
return config
|
||||
},
|
||||
})
|
||||
})
|
||||
)
|
||||
|
@ -11,44 +11,46 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"body-scroll-lock": "^3.1.5",
|
||||
"classnames": "^2.2.6",
|
||||
"focus-trap-react": "^8.1.1",
|
||||
"classnames": "^2.3.1",
|
||||
"focus-trap-react": "^8.5.0",
|
||||
"focus-visible": "^5.2.0",
|
||||
"hast-util-sanitize": "^3.0.1",
|
||||
"next": "^10.0.6",
|
||||
"next": "^10.1.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"prism-react-renderer": "^1.1.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"prism-react-renderer": "^1.2.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"remark-react": "^8.0.0",
|
||||
"use-media": "^1.4.0",
|
||||
"wicg-inert": "^3.1.0",
|
||||
"wicg-inert": "^3.1.1",
|
||||
"wil-react-sticky": "^1.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@marp-team/marp-core": "^1.5.0",
|
||||
"@next/bundle-analyzer": "^10.0.3",
|
||||
"@types/classnames": "^2.2.11",
|
||||
"@types/react": "^16.9.56",
|
||||
"@types/resize-observer-browser": "^0.1.4",
|
||||
"@marp-team/marp-core": "^2.0.1",
|
||||
"@next/bundle-analyzer": "^10.1.3",
|
||||
"@types/classnames": "^2.3.1",
|
||||
"@types/react": "^17.0.4",
|
||||
"@types/resize-observer-browser": "^0.1.5",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"dot-prop": "^6.0.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-react": "^7.23.2",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"gray-matter": "^4.0.2",
|
||||
"hast-util-whitespace": "^1.0.4",
|
||||
"gray-matter": "^4.0.3",
|
||||
"hast-util-whitespace": "^2.0.0",
|
||||
"next-transpile-modules": "^6.4.1",
|
||||
"null-loader": "^4.0.1",
|
||||
"postcss-flexbugs-fixes": "^4.2.1",
|
||||
"postcss": "^8.2.13",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"remark-parse": "^9.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
"styled-jsx-plugin-postcss": "^3.0.2",
|
||||
"tailwindcss": "^1.9.6",
|
||||
"unified": "^9.2.0",
|
||||
"unist-util-remove-position": "^3.0.0",
|
||||
"unist-util-visit": "^2.0.3",
|
||||
"styled-jsx-plugin-postcss": "^4.0.1",
|
||||
"tailwindcss": "^2.1.2",
|
||||
"unified": "^9.2.1",
|
||||
"unist-util-remove-position": "^4.0.0",
|
||||
"unist-util-visit": "^3.0.0",
|
||||
"yaml-loader": "^0.6.0"
|
||||
}
|
||||
}
|
||||
|
@ -10,10 +10,10 @@ import { parse, parseMatter, renderToReact } from 'utils/markdown'
|
||||
const toJSON = (obj: any) => JSON.parse(JSON.stringify(obj))
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
const ctx = require.context('blog', false, /\.md$/)
|
||||
const ctx = require.context('blog', false, /^.[\\/][^\\/]*\.md$/)
|
||||
const mdMetas = await Promise.all(
|
||||
ctx.keys().map((id) => {
|
||||
const { default: md } = ctx(id)
|
||||
const md = ctx(id)
|
||||
const { data, excerpt } = parseMatter(md)
|
||||
|
||||
return (async () => ({
|
||||
@ -121,7 +121,7 @@ const Blog = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => (
|
||||
@apply shadow-lg bg-white;
|
||||
}
|
||||
.article-container-link:hover:active {
|
||||
@apply shadow-outline bg-white outline-none duration-0;
|
||||
@apply ring bg-white outline-none duration-0;
|
||||
}
|
||||
.article-container-link:hover + * .read-more {
|
||||
@apply text-marp-brand;
|
||||
@ -129,7 +129,7 @@ const Blog = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => (
|
||||
}
|
||||
|
||||
.article-container-link:focus {
|
||||
@apply shadow-outline bg-white outline-none duration-0;
|
||||
@apply ring bg-white outline-none duration-0;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
|
@ -1,24 +1,28 @@
|
||||
const {
|
||||
colors: { black, current, gray, transparent, white },
|
||||
fontFamily,
|
||||
} = require('tailwindcss/defaultTheme')
|
||||
const { fontFamily } = require('tailwindcss/defaultTheme')
|
||||
|
||||
const gray = {
|
||||
100: '#f7fafc',
|
||||
200: '#edf2f7',
|
||||
300: '#e2e8f0',
|
||||
400: '#cbd5e0',
|
||||
500: '#a0aec0',
|
||||
600: '#718096',
|
||||
700: '#4a5568',
|
||||
800: '#2d3748',
|
||||
900: '#1a202c',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true, // ok
|
||||
purgeLayersByDefault: true,
|
||||
defaultLineHeights: true,
|
||||
standardFontWeights: true,
|
||||
},
|
||||
plugins: [],
|
||||
purge: ['@(components|pages|utils)/**/*.[jt]s?(x)'],
|
||||
theme: {
|
||||
borderColor: (theme) => ({ ...theme('colors'), DEFAULT: gray[300] }),
|
||||
colors: {
|
||||
black,
|
||||
current,
|
||||
black: '#000',
|
||||
current: 'currentColor',
|
||||
gray,
|
||||
transparent,
|
||||
white,
|
||||
transparent: 'transparent',
|
||||
white: '#fff',
|
||||
background: '#f8f8f8',
|
||||
foreground: gray[800],
|
||||
marp: {
|
||||
@ -37,6 +41,12 @@ module.exports = {
|
||||
sans: ['Inter', ...fontFamily.sans],
|
||||
rounded: ['Quicksand', 'Avenir', 'Century Gothic', ...fontFamily.sans],
|
||||
},
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
},
|
||||
extend: { transitionDuration: { 0: '0s' } },
|
||||
},
|
||||
variants: { transitionDuration: ['responsive', 'hover'] },
|
||||
|
@ -1,5 +1,5 @@
|
||||
import whitespace from 'hast-util-whitespace'
|
||||
import visit from 'unist-util-visit'
|
||||
import { whitespace } from 'hast-util-whitespace'
|
||||
import { visit } from 'unist-util-visit'
|
||||
|
||||
// Based on remark-unwrap-images
|
||||
// https://github.com/remarkjs/remark-unwrap-images/blob/main/index.js
|
||||
|
@ -1,7 +1,7 @@
|
||||
import remarkParse from 'remark-parse'
|
||||
import remarkSlug from 'remark-slug'
|
||||
import unified from 'unified'
|
||||
import removePosition from 'unist-util-remove-position'
|
||||
import { removePosition } from 'unist-util-remove-position'
|
||||
import { imageParagraphToFigure } from './image-paragrpah-to-figure'
|
||||
|
||||
let parser: unified.Processor | undefined
|
||||
|
Loading…
Reference in New Issue
Block a user