VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(fs.dev) Setup next 12 & mdx 2 with ESM

Browse source
This commit is contained in:
Joost De Cock 2021-12-10 09:56:19 +01:00
parent 1ad8c9e310
commit 02ba92b475
12 changed files with 2198 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/freesewing.dev/.eslintrc.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

9
packages/freesewing.dev/CHANGELOG.md
View file

@ -1,9 +0,0 @@
# Change log for: freesewing.dev
This is the **initial release**, and the start of this change log.
> Prior to version 2, FreeSewing was not a JavaScript project.
> As such, that history is out of scope for this change log.

3
packages/freesewing.dev/next.config.mjs Normal file
View file

@ -0,0 +1,3 @@
import config from '../freesewing.shared/config/next.mjs'
export default config

22
packages/freesewing.dev/package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "freesewing.dev",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3002",
"develop": "next dev -p 3002",
"build": "next build",
"export": "next build && next export",
"start": "next start -p 3002",
"serve": "pm2 start npm --name 'freesewing.dev' -- run start"
},
"dependencies": {
"@mdx-js/loader": "^2.0.0-rc.2",
"@mdx-js/react": "^2.0.0-rc.2",
"@mdx-js/runtime": "next",
"next": "latest",
"remark-gfm": "^3.0.1",
"remark-jargon": "^2.19.5"
},
"devDependencies": {}
}

7
packages/freesewing.dev/pages/_app.js Normal file
View file

@ -0,0 +1,7 @@
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp

69
packages/freesewing.dev/pages/index.js Normal file
View file

@ -0,0 +1,69 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}

BIN
packages/freesewing.dev/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

4
packages/freesewing.dev/public/vercel.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

116
packages/freesewing.dev/styles/Home.module.css Normal file
View file

@ -0,0 +1,116 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

16
packages/freesewing.dev/styles/globals.css Normal file
View file

@ -0,0 +1,16 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}

52
packages/freesewing.shared/config/next.mjs Normal file
View file

@ -0,0 +1,52 @@
import remarkGfm from 'remark-gfm'
import remarkJargon from 'remark-jargon'
import { jargon } from '@freesewing/i18n'
const config = {
experimental: {
externalDir: true,
esmExternals: true,
},
pageExtensions: [ 'js' ],
webpack: (config, options) => {
// Fixes npm packages that depend on node modules
if (!options.isServer) {
config.resolve.fallback.fs = false
config.resolve.fallback.child_process = false
}
// Prevent symlink loops
config.resolve.symlinks = false
// MDX support
config.module.rules.push({
test: /\.md?$/,
use: [
options.defaultLoaders.babel,
{
loader: '@mdx-js/loader',
//providerImportSource: '@mdx-js/react',
options: {
remarkPlugins: [
remarkGfm,
[remarkJargon, { jargon } ],
]
}
}
]
})
// Fix for nextjs bug #17806
config.module.rules.push({
test: /index.mjs$/,
type: "javascript/auto",
resolve: {
fullySpecified: false
}
})
return config
}
}
export default config

1984
yarn.lock
View file

File diff suppressed because it is too large Load diff