├── vercel.json
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── images
    │   ├── logo.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── apple-touch-icon.png
    │   ├── mstile-150x150.png
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-256x256.png
    │   ├── android-chrome-512x512.png
    │   ├── site.webmanifest
    │   └── safari-pinned-tab.svg
    ├── fonts
    │   ├── MonoLisaVariableItalic.woff2
    │   └── MonoLisaVariableNormal.woff2
    └── browserconfig.xml
├── .eslintrc.json
├── postcss.config.js
├── jsconfig.json
├── components
    ├── Bottom.js
    ├── Layout.js
    ├── MarkdownPreview.js
    ├── MarkdownEditor.js
    └── Top.js
├── .gitignore
├── tailwind.config.js
├── next.config.js
├── package.json
├── README.md
├── markdown
    └── sample.md
├── pages
    ├── index.js
    └── _app.js
└── styles
    └── globals.css


/vercel.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/logo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/favicon-16x16.png


--------------------------------------------------------------------------------
/public/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/favicon-32x32.png


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": ".",
4 |     "paths": {
5 |       "@/*": ["./*"]
6 |     }
7 |   }
8 | }


--------------------------------------------------------------------------------
/public/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/images/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/mstile-150x150.png


--------------------------------------------------------------------------------
/public/fonts/MonoLisaVariableItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/fonts/MonoLisaVariableItalic.woff2


--------------------------------------------------------------------------------
/public/fonts/MonoLisaVariableNormal.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/fonts/MonoLisaVariableNormal.woff2


--------------------------------------------------------------------------------
/public/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/images/android-chrome-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/android-chrome-256x256.png


--------------------------------------------------------------------------------
/public/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Owned-Operated/markdowneditor/HEAD/public/images/android-chrome-512x512.png


--------------------------------------------------------------------------------
/components/Bottom.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | export default function Bottom() {
 5 | 
 6 | 	return (
 7 | 		<footer aria-labelledby="footer-heading">
 8 | 		</footer>
 9 | 	)
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # next.js
 7 | /.next/
 8 | 
 9 | # misc
10 | .DS_Store
11 | *.pem
12 | 
13 | # local env files
14 | .env
15 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import Top from './Top'
 2 | import Bottom from './Bottom'
 3 | 
 4 | export default function Layout({ children }) {
 5 |   return (
 6 |     <>
 7 |       <Top />
 8 |       <main>{children}</main>
 9 |       <Bottom />
10 |     </>
11 |   )
12 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	darkMode: ["class"],
 3 | 	content: [
 4 | 		"./pages/**/*.{js,ts,jsx,tsx}",
 5 | 		"./components/**/*.{js,ts,jsx,tsx}",
 6 | 	],
 7 | 	plugins: [
 8 | 		require('@tailwindcss/typography'),
 9 | 		require('@tailwindcss/aspect-ratio')
10 | 	],
11 | }


--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/images/mstile-150x150.png"/>
 6 |             <TileColor>#00aba9</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const result = require('dotenv').config()
 2 | 
 3 | module.exports = {
 4 | 	reactStrictMode: false,
 5 | 	webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
 6 | 		config.module.rules.push({
 7 | 			test: /\.md$/,
 8 | 			use: 'raw-loader',
 9 | 		})
10 | 		return config
11 | 	}
12 | }


--------------------------------------------------------------------------------
/components/MarkdownPreview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import * as marked from 'marked'
 3 | 
 4 | function MarkdownPreview({ content }) {
 5 | 	return (
 6 | 		<div
 7 | 			dangerouslySetInnerHTML={{ __html: marked.parse(content) }}
 8 | 			className="w-1/2 h-full p-6 md:px-10 md:py-8 bg-slate-100 overflow-y-auto dark:bg-slate-700 dark:text-slate-200 markdown-preview"
 9 | 		/>
10 | 	)
11 | }
12 | 
13 | export default MarkdownPreview


--------------------------------------------------------------------------------
/components/MarkdownEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function MarkdownEditor({ value, onChange }) {
 4 | 	return (
 5 | 		<textarea
 6 | 			value={value}
 7 | 			onChange={(e) => onChange(e.target.value)}
 8 | 			rows={30}
 9 | 			className="w-1/2 h-full p-6 md:px-10 md:py-8 border-r border-slate-300 resize-none dark:border-slate-600 dark:bg-slate-600 dark:text-slate-300 focus:outline-none font-mono"
10 | 		/>
11 | 	)
12 | }
13 | 
14 | export default MarkdownEditor


--------------------------------------------------------------------------------
/public/images/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "",
 3 |     "short_name": "",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/images/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/images/android-chrome-256x256.png",
12 |             "sizes": "256x256",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#ffffff",
17 |     "background_color": "#ffffff",
18 |     "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "markdowneditor.org",
 3 | 	"private": true,
 4 | 	"scripts": {
 5 | 		"dev": "next dev",
 6 | 		"build": "next build",
 7 | 		"start": "next start",
 8 | 		"lint": "next lint"
 9 | 	},
10 | 	"dependencies": {
11 | 		"@tailwindcss/aspect-ratio": "^0.4.2",
12 | 		"@tailwindcss/typography": "^0.5.9",
13 | 		"dotenv": "^16.3.1",
14 | 		"gray-matter": "^4.0.3",
15 | 		"marked": "^9.0.3",
16 | 		"next": "^13.4.7",
17 | 		"next-plausible": "^3.11.1",
18 | 		"react": "^18.2.0",
19 | 		"react-dom": "^18.2.0",
20 | 		"tailwind-merge": "^1.14.0",
21 | 		"tailwindcss-animate": "^1.0.6"
22 | 	},
23 | 	"devDependencies": {
24 | 		"autoprefixer": "^10.4.2",
25 | 		"eslint": "^8.7.0",
26 | 		"eslint-config-next": "^12.0.4",
27 | 		"postcss": "^8.4.5",
28 | 		"raw-loader": "^4.0.2",
29 | 		"tailwindcss": "^3.0.15"
30 | 	}
31 | }
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MarkdownEditor.org
 2 | 
 3 | ## Overview
 4 | 
 5 | [**MarkdownEditor.org**](https://markdowneditor.org) is your reliable online platform for real-time Markdown editing and previewing. Whether you're documenting a project, drafting a blog post, or simply learning Markdown, our editor provides a live, interactive environment to see your Markdown transformed into HTML in real-time.
 6 | 
 7 | ## Features
 8 | 
 9 | - **Live Markdown Preview**: As you type, see your Markdown instantly rendered into HTML.
10 | - **Lightweight & Fast**: Built for performance, ensuring a smooth editing experience without lag.
11 | 
12 | ## How to Use
13 | 
14 | 1. Visit [MarkdownEditor.org](https://markdowneditor.org/)
15 | 2. Start typing or paste your Markdown text in the editor.
16 | 3. Witness your Markdown being rendered into HTML in real-time on the right pane.
17 | ## Feedback & Contributions
18 | 
19 | We strive to offer the best Markdown editing experience. Your feedback and contributions are invaluable to us. If you have any suggestions, feature requests, or found a bug, please:
20 | 
21 | - [Create an Issue](https://github.com/markdowneditor/markdowneditor/issues) or
22 | - [Submit a Pull Request](https://github.com/markdowneditor/markdowneditor/pulls)
23 | 
24 | Let's make MarkdownEditor.org the most user-friendly Markdown editor together!


--------------------------------------------------------------------------------
/markdown/sample.md:
--------------------------------------------------------------------------------
 1 | # Welcome to Markdown Editor
 2 | 
 3 | The markdown code below showcases various markdown features. Enjoy!
 4 | 
 5 | # Header 1
 6 | ## Header 2
 7 | ### Header 3
 8 | #### Header 4
 9 | ##### Header 5
10 | ###### Header 6
11 | 
12 | ## Emphasis
13 | 
14 | **Bold Text**
15 | 
16 | *Italic Text*
17 | 
18 | ~~Strikethrough~~
19 | 
20 | ## Lists
21 | 
22 | ### Unordered
23 | - Item 1
24 | - Item 2
25 |   - Subitem 2.1
26 |   - Subitem 2.2
27 | 
28 | ### Ordered
29 | 1. First Item
30 | 2. Second Item
31 | 3. Third Item
32 | 
33 | ## Links
34 | [Google](http://www.google.com)
35 | 
36 | ## Images
37 | ![Markdown Logo](https://markdowneditor.org/images/favicon-32x32.png)
38 | 
39 | ## Blockquotes
40 | > This is a blockquote. 
41 | 
42 | ## Horizontal Line
43 | ---
44 | 
45 | ## Code
46 | 
47 | Inline `code` has `back-ticks around` it.
48 | 
49 | ```javascript
50 | var s = "JavaScript syntax highlighting"
51 | alert(s)
52 | ```
53 | 
54 | ```python
55 | s = "Python syntax highlighting"
56 | print(s)
57 | ```
58 | 
59 | ## Tables
60 | 
61 | | Header 1 | Header 2 | Header 3 |
62 | |----------|----------|----------|
63 | | Row1Col1 | Row1Col2 | Row1Col3 |
64 | | Row2Col1 | Row2Col2 | Row2Col3 |
65 | | Row3Col1 | Row3Col2 | Row3Col3 |
66 | 
67 | ## Checkboxes
68 | - [x] Task 1
69 | - [ ] Task 2
70 | - [ ] Task 3
71 | 
72 | Enjoy writing in Markdown!


--------------------------------------------------------------------------------
/public/images/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M143 2057 c-51 -10 -102 -52 -124 -101 -17 -39 -19 -77 -19 -671 0
13 | -411 4 -643 11 -668 13 -49 66 -102 115 -117 28 -8 347 -10 1175 -8 l1135 3
14 | 43 28 c27 18 50 44 62 70 18 40 19 75 19 682 0 604 -1 642 -19 681 -20 43 -68
15 | 86 -111 99 -33 11 -2238 12 -2287 2z m490 -388 c12 -14 36 -42 54 -63 18 -21
16 | 63 -78 100 -127 37 -49 70 -88 73 -88 3 0 60 68 127 152 l122 153 120 -1 c67
17 | 0 121 -2 122 -5 0 -3 1 -191 2 -418 2 -406 2 -412 -18 -413 -115 -4 -209 -3
18 | -216 2 -6 3 -10 102 -10 239 0 200 -2 232 -14 219 -7 -8 -63 -76 -123 -152
19 | l-110 -137 -120 150 c-66 82 -122 144 -124 137 -2 -6 -4 -112 -3 -234 1 -195
20 | -1 -223 -14 -224 -21 -1 -203 -1 -218 0 -17 1 -19 827 -3 833 6 2 60 3 121 3
21 | 107 0 112 -1 132 -26z m1386 -177 c0 -111 2 -206 5 -210 2 -4 56 -7 119 -7 78
22 | 1 114 -2 109 -10 -9 -14 -353 -415 -357 -415 -2 0 -60 66 -130 148 -70 81
23 | -148 171 -173 201 -26 29 -50 59 -54 65 -5 9 25 12 113 11 l119 0 1 50 c0 27
24 | 0 119 -1 203 0 84 1 156 4 160 2 4 58 7 124 7 l121 0 0 -203z"/>
25 | </g>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import MarkdownEditor from '@/components/MarkdownEditor'
 3 | import MarkdownPreview from '@/components/MarkdownPreview'
 4 | import defaultMarkdown from '@/markdown/sample.md'
 5 | 
 6 | export default function Home() {
 7 | 
 8 |     const [markdownContent, setMarkdownContent] = useState(defaultMarkdown)
 9 | 
10 |     useEffect(() => {
11 |         const savedMarkdown = localStorage.getItem('savedMarkdown')
12 |         if (savedMarkdown) {
13 |             setMarkdownContent(savedMarkdown)
14 |         }
15 |     }, [])
16 | 
17 |     const handleEditorChange = (newContent) => {
18 |         setMarkdownContent(newContent)
19 |         localStorage.setItem('savedMarkdown', newContent)
20 |     }
21 | 
22 |     const wordCount = markdownContent.split(/\s+/).filter(Boolean).length
23 |     const lineCount = markdownContent.split(/\n+/).filter(Boolean).length
24 |     const charCount = markdownContent.length
25 |     const fileSize = new Blob([markdownContent]).size
26 | 
27 |     return (
28 |         <>
29 |             <div className="flex flex-col h-screen relative">
30 |                 <div className="flex-grow flex">
31 |                     <MarkdownEditor value={markdownContent} onChange={handleEditorChange} />
32 |                     <MarkdownPreview content={markdownContent} />
33 |                 </div>
34 |                 <div className="fixed font-['MonoLisa'] text-xs bottom-0 left-0 right-0 px-3 py-1 text-slate-700 bg-slate-200 border-t border-slate-200 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-400">
35 |                     <span className="mr-6"><strong>{wordCount}</strong> words</span>
36 |                     <span className="mr-6"><strong>{lineCount}</strong> lines</span>
37 |                     <span className="mr-6"><strong>{charCount}</strong> characters</span>
38 |                     <span><strong>{fileSize} bytes</strong></span>
39 |                 </div>
40 |             </div>
41 |         </>
42 |     )
43 | }


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 | 	main h1 {
 7 | 		@apply text-3xl mb-2 font-semibold
 8 | 	}
 9 | 	main h2 {
10 | 		@apply text-2xl mb-2 font-semibold
11 | 	}
12 | 	main h3 {
13 | 		@apply text-xl mb-2 font-semibold
14 | 	}
15 | 	main h4 {
16 | 		@apply text-lg mb-2 font-semibold
17 | 	}
18 | 	main h5 {
19 | 		@apply text-base mb-2 font-semibold
20 | 	}
21 | 	main h6 {
22 | 		@apply text-sm mb-2 font-semibold
23 | 	}
24 | 	main h6 + h2,
25 | 	main blockquote + h2,
26 | 	main hr + h2,
27 | 	main pre + h2,
28 | 	main table + h2 {
29 | 		@apply mt-8
30 | 	}
31 | 	main p {
32 | 		@apply text-base mb-6
33 | 	}
34 | 	main p + p {
35 | 		@apply -mt-4
36 | 	}
37 | 	main a, main a:visited {
38 | 		@apply underline
39 | 	}
40 | 	main ol {
41 | 		@apply text-base mb-6 list-decimal list-outside pl-4
42 | 	}
43 | 	main ul {
44 | 		@apply text-base mb-6 list-disc list-outside pl-4
45 | 	}
46 | 	main ul ul {
47 | 		@apply mt-3 mb-0
48 | 	}
49 | 	main li {
50 | 		@apply text-base pb-3
51 | 	}
52 | 	main hr {
53 | 		@apply mb-4 border-current
54 | 	}
55 | 	main pre {
56 | 		@apply font-['MonoLisa'] bg-white text-xs rounded-sm border border-slate-200 px-2 py-2 dark:bg-slate-600 dark:border-slate-600 dark:text-slate-300 mb-4
57 | 	}
58 | 	main code {
59 | 		@apply font-['MonoLisa'] text-xs dark:text-slate-300
60 | 	}
61 | 	main table {
62 | 		@apply table-auto mb-4 border border-current
63 | 	}
64 | 	main th,
65 | 	main td {
66 | 		@apply px-2 py-2 border border-current
67 | 	}
68 | 	main blockquote {
69 | 		@apply pl-3 border-l-4 border-current italic
70 | 	}
71 | }
72 | 
73 | @font-face {
74 | 	font-family: 'MonoLisa';
75 | 	src: url('/fonts/MonoLisaVariableNormal.woff2') format('woff2');
76 | 	font-weight: normal;
77 | 	font-style: normal;
78 | }
79 | 
80 | @font-face {
81 | 	font-family: 'MonoLisa';
82 | 	src: url('/fonts/MonoLisaVariableItalic.woff2') format('woff2');
83 | 	font-weight: normal;
84 | 	font-style: italic;
85 | }
86 | 
87 | .logo {
88 | 	font-feature-settings: "ss02";
89 | 	font-style: italic;
90 | }
91 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import Layout from '../components/Layout'
 3 | import { useRouter } from 'next/router'
 4 | import Head from 'next/head'
 5 | import PlausibleProvider from 'next-plausible'
 6 | import '@/styles/globals.css'
 7 | 
 8 | export default function App({ Component, pageProps }) {
 9 | 
10 | 	const router = useRouter()
11 | 	
12 | 	useEffect(() => {
13 | 		const handleRouteChange = () => {
14 | 			const script = document.getElementById('Aljs')
15 | 			if (script) {
16 | 				script.remove()
17 | 			}
18 | 			const newScript = document.createElement('script')
19 | 				newScript.src = 'https://aljs.log.dance/al.js'
20 | 				newScript.id = 'Aljs'
21 | 				newScript.dataset.site = 'markdowneditor'
22 | 			document.body.appendChild(newScript)
23 | 		}
24 | 		
25 | 		// Call on component mount
26 | 		handleRouteChange()
27 | 		router.events.on('routeChangeComplete', handleRouteChange)
28 | 		
29 | 		// clean up the event listener when the component unmounts
30 | 		return () => {
31 | 			router.events.off('routeChangeComplete', handleRouteChange)
32 | 		}
33 | 	}, [router.events])
34 | 	
35 | 	return (
36 | 		<PlausibleProvider domain="markdowneditor.org">
37 | 		<Head>
38 | 			<title>{pageProps.title}</title>
39 | 			{pageProps.metaTags &&
40 | 				pageProps.metaTags.map((tag, index) => (
41 | 					<meta {...{ [tag.attribute]: tag.value, content: tag.content }} key={index} />
42 | 				))
43 | 			}
44 | 			<link rel="alternate" href={typeof window !== 'undefined' && `${window.location.origin}${window.location.pathname}`} hrefLang="x-default" />
45 | 			<link rel="canonical" href={typeof window !== 'undefined' && `${window.location.origin}${window.location.pathname}`} key="canonical" />
46 | 			
47 | 			<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"/>
48 | 			<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
49 | 			<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
50 | 			<link rel="manifest" href="/images/site.webmanifest"/>
51 | 			<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5"/>
52 | 			<meta name="msapplication-TileColor" content="#00aba9"/>
53 | 			<meta name="theme-color" content="#ffffff"/>
54 | 		</Head>
55 | 		<div className="min-h-full bg-slate-50 dark:bg-slate-900">
56 | 			<Layout>
57 | 				<Component {...pageProps} />
58 | 			</Layout>
59 | 		</div>
60 | 		</PlausibleProvider>
61 | 	)
62 | }


--------------------------------------------------------------------------------
/components/Top.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useContext } from 'react'
  2 | import { useRouter } from 'next/router'
  3 | import Link from 'next/link'
  4 | 
  5 | export default function Top() {
  6 | 
  7 | 	const router = useRouter()
  8 | 	const [theme, setTheme] = useState('system')
  9 | 
 10 | 	const getSystemTheme = () => {
 11 | 	    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 12 | 	        return 'dark'
 13 | 	    }
 14 | 	    return 'light'
 15 | 	}
 16 | 	
 17 | 	useEffect(() => {
 18 | 	    const storedTheme = localStorage.getItem('theme')
 19 | 	    if (storedTheme) {
 20 | 	        setTheme(storedTheme)
 21 | 	    } else {
 22 | 	        setTheme(getSystemTheme())
 23 | 	    }
 24 | 	}, [])
 25 | 	
 26 | 	useEffect(() => {
 27 | 	    if (theme === 'dark') {
 28 | 	        document.body.classList.add('dark')
 29 | 	    } else {
 30 | 	        document.body.classList.remove('dark')
 31 | 	    }
 32 | 	}, [theme])
 33 | 	
 34 | 	const toggleTheme = () => {
 35 | 	    if (theme === 'light' || theme === 'system') {
 36 | 	        setTheme('dark')
 37 | 	        localStorage.setItem('theme', 'dark')
 38 | 	        document.body.classList.add('dark')
 39 | 	    } else {
 40 | 	        setTheme('light')
 41 | 	        localStorage.setItem('theme', 'light')
 42 | 	        document.body.classList.remove('dark')
 43 | 	    }
 44 | 	}
 45 | 	
 46 | 	return (
 47 | 		<>
 48 | 		<div>
 49 | 		  	<nav className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 font-bold font-system">
 50 | 				<div className="mx-auto w-full px-6 md:px-9">
 51 | 					<div className="flex h-16 items-center justify-between">
 52 | 						<div className="flex items-center w-full">
 53 | 							<Link href="/" className="flex-shrink-0 normal-case" onClick={(e) => {e.preventDefault();window.location.href = '/';}}>
 54 | 								<div className="flex">
 55 | 									<span className="flex">
 56 | 										<svg className="logo text-slate-800 italic dark:text-slate-200 max-w-none mr-3 mt-1" fill="none" height="46" width="46" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg">
 57 | 											<path 
 58 | 											 	fill="currentColor"
 59 | 											 	stroke="currentColor" 
 60 | 				            					d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"
 61 | 												className="stroke-current"
 62 | 											/>
 63 | 										</svg>
 64 | 									</span>
 65 | 									<h1 className="logo hidden lg:block flex py-4 text-lg leading-5 font-semibold mr-12 font-['MonoLisa'] dark:text-slate-300">Markdown Editor</h1>
 66 | 								</div>
 67 | 							</Link>
 68 | 						</div>
 69 | 						<div>
 70 | 							<div className="ml-4 flex items-center md:ml-6 whitespace-nowrap">
 71 | 								<Link href="https://github.com/Owned-Operated/markdowneditor" className="text-slate-400 mr-4">
 72 | 									<svg enable-background="new 0 0 32 32" height="24px" viewBox="0 0 32 32" width="24px">
 73 | 										<path clip-rule="evenodd" d="M16.003,0C7.17,0,0.008,7.162,0.008,15.997  c0,7.067,4.582,13.063,10.94,15.179c0.8,0.146,1.052-0.328,1.052-0.752c0-0.38,0.008-1.442,0-2.777  c-4.449,0.967-5.371-2.107-5.371-2.107c-0.727-1.848-1.775-2.34-1.775-2.34c-1.452-0.992,0.109-0.973,0.109-0.973  c1.605,0.113,2.451,1.649,2.451,1.649c1.427,2.443,3.743,1.737,4.654,1.329c0.146-1.034,0.56-1.739,1.017-2.139  c-3.552-0.404-7.286-1.776-7.286-7.906c0-1.747,0.623-3.174,1.646-4.292C7.28,10.464,6.73,8.837,7.602,6.634  c0,0,1.343-0.43,4.398,1.641c1.276-0.355,2.645-0.532,4.005-0.538c1.359,0.006,2.727,0.183,4.005,0.538  c3.055-2.07,4.396-1.641,4.396-1.641c0.872,2.203,0.323,3.83,0.159,4.234c1.023,1.118,1.644,2.545,1.644,4.292  c0,6.146-3.74,7.498-7.304,7.893C19.479,23.548,20,24.508,20,26c0,2,0,3.902,0,4.428c0,0.428,0.258,0.901,1.07,0.746  C27.422,29.055,32,23.062,32,15.997C32,7.162,24.838,0,16.003,0z" className="fill-current" fill-rule="evenodd"/><g/><g/><g/><g/><g/><g/>
 74 | 									</svg>
 75 | 								</Link>
 76 | 								<button onClick={toggleTheme} className="focus:outline-none">
 77 | 									{theme === 'light' ? (
 78 | 										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-slate-400">
 79 | 										    <circle cx="12" cy="12" r="5" className="fill-current"/>
 80 | 										    <path d="M21,13H20a1,1,0,0,1,0-2h1a1,1,0,0,1,0,2Z" className="fill-current"/>
 81 | 										    <path d="M4,13H3a1,1,0,0,1,0-2H4a1,1,0,0,1,0,2Z" className="fill-current"/>
 82 | 										    <path d="M17.66,7.34A1,1,0,0,1,17,7.05a1,1,0,0,1,0-1.41l.71-.71a1,1,0,1,1,1.41,1.41l-.71.71A1,1,0,0,1,17.66,7.34Z" className="fill-current"/>
 83 | 										    <path d="M5.64,19.36a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.41L5.64,17a1,1,0,0,1,1.41,1.41l-.71.71A1,1,0,0,1,5.64,19.36Z" className="fill-current"/>
 84 | 										    <path d="M12,5a1,1,0,0,1-1-1V3a1,1,0,0,1,2,0V4A1,1,0,0,1,12,5Z" className="fill-current"/>
 85 | 										    <path d="M12,22a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v1A1,1,0,0,1,12,22Z" className="fill-current"/>
 86 | 										    <path d="M6.34,7.34a1,1,0,0,1-.7-.29l-.71-.71A1,1,0,0,1,6.34,4.93l.71.71a1,1,0,0,1,0,1.41A1,1,0,0,1,6.34,7.34Z" className="fill-current"/>
 87 | 										    <path d="M18.36,19.36a1,1,0,0,1-.7-.29L17,18.36A1,1,0,0,1,18.36,17l.71.71a1,1,0,0,1,0,1.41A1,1,0,0,1,18.36,19.36Z" className="fill-current"/>
 88 | 										</svg>
 89 | 									) : (
 90 | 										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-slate-400">
 91 | 											<path d="M20.21,15.32A8.56,8.56,0,1,1,11.29,3.5a.5.5,0,0,1,.51.28.49.49,0,0,1-.09.57A6.46,6.46,0,0,0,9.8,9a6.57,6.57,0,0,0,9.71,5.72.52.52,0,0,1,.58.07A.52.52,0,0,1,20.21,15.32Z" className="fill-current"/>
 92 | 										</svg>
 93 | 									)}
 94 | 								</button>
 95 | 							</div>
 96 | 						</div>
 97 | 					</div>
 98 | 				</div>
 99 | 			</nav>
100 | 		</div>
101 | 		</>
102 | 	)
103 | }


--------------------------------------------------------------------------------