Add docs and about pages in demo website

Signed-off-by: Parajuli Kiran <[email protected]>
kiranparajuli589 · Nov 13, 2023 · 71bb83a · 71bb83a
1 parent 7b3860b
commit 71bb83a
Show file tree

Hide file tree

Showing 10 changed files with 350 additions and 43 deletions.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,14 +1,12 @@
 <template>
 	<div id="mdp">
 		<TheAppBar />
-		<MarkdownParser />
-		<div class="py-6" />
+		<router-view />
 		<TheFooter />
 	</div>
 </template>
 <script setup>
 import TheAppBar from "./components/TheAppBar"
-import MarkdownParser from "./components/MarkdownParser"
 import TheFooter from "./components/TheFooter"
 import { onMounted } from "vue"
 import useTheme from "./composables/theme"

diff --git a/demo/src/components/TheAppBar.vue b/demo/src/components/TheAppBar.vue
@@ -1,10 +1,17 @@
 <template>
 	<nav>
-		<img class="logo" :src="logo" alt="Logo">
-		<h1>HtmlMark</h1>
+		<div class="nav-brand">
+			<img class="logo" :src="logo" alt="Logo">
+			<h2>
+				<router-link to="/">HtmlMark</router-link>
+			</h2>
+		</div>
 		<div class="nav-actions">
+			<router-link class="nav-link" to="/">Home</router-link>
+			<router-link class="nav-link" to="/demo">Demo</router-link>
+			<router-link class="nav-link" to="/about">About</router-link>
 			<a href="https://github.com/kiranparajuli589/htmlmark"
-				 target="_blank" title="GitHub Repository" class="give-a-star"
+				 target="_blank" title="GitHub Repository" class="nav-link"
 			>
 				Give a 🌟
 			</a>

diff --git a/demo/src/components/TheFooter.vue b/demo/src/components/TheFooter.vue
@@ -3,9 +3,3 @@
 		Made with <span class="heart">&hearts;</span> by <a href="https://github.com/kiranparajuli589">@kiranparajuli589</a>
 	</footer>
 </template>
-<style scoped>
-footer {
-	position: fixed;
-	bottom: 0;
-}
-</style>
diff --git a/demo/src/main.js b/demo/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from "vue"
 import { createPinia } from "pinia"
-
+import router from "./router"
 import App from "./App"
 
 import "./styles/app.scss"
@@ -10,5 +10,5 @@ import 'highlight.js/styles/atom-one-dark.css';
 const app = createApp(App)
 
 app.use(createPinia())
-
+app.use(router)
 app.mount("#app")
diff --git a/demo/src/router.js b/demo/src/router.js
@@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+
+const routes = [
+	{ path: '/', component: () => import("@/views/Home") },
+	{ path: '/about', component: () => import("@/views/About") },
+	{ path: '/demo', component: () => import("@/views/Demo") },
+]
+
+const router = createRouter({
+	// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+	history: createWebHashHistory(),
+	routes, // short for `routes: routes`
+})
+
+export default router
diff --git a/demo/src/styles/main.scss b/demo/src/styles/main.scss
@@ -3,6 +3,15 @@ main {
 	.subtitle {
 		padding-left: .5rem;
 	}
+	.options {
+		padding-inline: .5rem;
+		padding-bottom: 1rem;
+		.title {
+			font-size: 1rem;
+			font-weight: bold;
+			margin-bottom: .5rem;
+		}
+	}
 	#converter {
 		padding-inline: .5rem;
 		display: flex;

diff --git a/demo/src/styles/nav.scss b/demo/src/styles/nav.scss
@@ -4,6 +4,14 @@ nav {
 	align-items: center;
 	padding: 0.2rem .5rem;
 	background-color: #ffc1073b;
+	.nav-brand {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		h2 > a {
+			text-decoration: none;
+		}
+	}
 	.logo {
 		width: 5rem;
 		height: auto;
@@ -23,19 +31,16 @@ nav {
 			background: #fff;
 			cursor: pointer;
 		}
-		.give-a-star {
+		.nav-link {
 			text-decoration: none;
 			color: #000;
 			outline: 1px solid #000;
 			padding: .3rem;
 			border-radius: 2px;
 			background: #fff;
-			&::before {
-				position: absolute;
-				content: "";
-				width: 0;
-				height: 0;
-				animation: width 1s ease-in-out;
+			&:hover {
+				background: #000;
+				color: #fff;
 			}
 		}
 	}
@@ -50,10 +55,16 @@ body[dark] {
 			filter: invert(1);
 		}
 
-		.theme, .give-a-star {
+		.theme, .nav-link {
 			background: #1a1a1a;
 			border-color: whitesmoke;
 			color: white;
 		}
+		.nav-link {
+			&:hover {
+				background: #fff;
+				color: #000;
+			}
+		}
 	}
 }
diff --git a/demo/src/views/About.vue b/demo/src/views/About.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="about">
+		<h1>About</h1>
+		<div class="hr" />
+		<div>
+			<p><strong>Name:</strong> HtmlMark</p>
+			<p><strong>Version:</strong> 0.2.0</p>
+			<p><strong>Description</strong> A very lightweight markdown parser.</p>
+			<p><strong>Homepage:</strong> <a href="https://kiranparajuli589.github.io/htmlmark/">https://kiranparajuli589.github.io/htmlmark/</a></p>
+			<p><strong>Github:</strong> <a href="https://github.com/kiranparajuli589/htmlmark">https://github.com/kiranparajuli589/htmlmark</a></p>
+			<p><strong>Issues:</strong> <a href="https://github.com/kiranparajuli589/htmlmark/issues">https://github.com/kiranparajuli589/htmlmark/issues</a></p>
+			<p><strong>NPM:</strong> <a href="https://www.npmjs.com/package/htmlmark">https://www.npmjs.com/package/htmlmark</a></p>
+			<p><strong>Author:</strong> <a href="https://kiranparajuli.com.np">Kiran Parajuli</a></p>
+			<p><strong>License:</strong> GPL-3.0</p>
+		</div>
+	</div>
+</template>
+<style scoped lang="scss">
+.about {
+	padding: 2rem;
+	max-width: 700px;
+	margin: 0 auto;
+	height: calc(100vh - 55px - 28px);
+	.hr {
+		height: 2px;
+		background-color: #ccc;
+		margin: .2rem 0 1rem 0
+	}
+	strong {
+		font-weight: 600;
+	}
+}
+</style>
diff --git a/demo/src/components/MarkdownParser.vue → demo/src/views/Demo.vue b/demo/src/components/MarkdownParser.vue → demo/src/views/Demo.vue
@@ -2,31 +2,51 @@
 	<main>
 		<p class="subtitle">A very lightweight markdown parser.</p>
 		<br>
+		<div class="options">
+			<div class="title">Configuration Options</div>
+			<label for="code-highlighter">
+				<input type="checkbox"
+							 id="code-highlighter"
+							 v-model="useCodeHighlighter"
+							 @change="prepareParser"
+				/>
+				Enable Code Highlighter
+			</label>
+
+			<label for="use-link-refs">
+				<input type="checkbox"
+							 id="use-link-refs"
+							 v-model="useLinkRefs"
+							 @change="prepareParser"
+				/>
+				Use Link References
+			</label>
+
+			<label for="indent-select">
+				<select id="indent-select" v-model="indentSize"
+								@change="prepareParser"
+				>
+					<option value="2">2</option>
+					<option value="4">4</option>
+					<option value="8">8</option>
+				</select>
+				Indent Size
+			</label>
+			<label for="tab-select">
+				<select id="tab-select" v-model="tabSize"
+								@change="prepareParser"
+				>
+					<option value="2">2</option>
+					<option value="4">4</option>
+					<option value="8">8</option>
+				</select>
+				Indent Size
+			</label>
+		</div>
 		<div id="converter">
 			<div class="markdown">
 				<div class="head">
 					<div class="section-title">Markdown Input:</div>
-					<div class="options">
-						<label for="code-highlighter">
-							<input type="checkbox"
-								id="code-highlighter"
-								v-model="useCodeHighlighter"
-								@change="prepareParser"
-							/>
-							Enable Code Highlighter
-						</label>
-
-						<label for="indent-select">
-							<select id="indent-select" v-model="indentSize"
-								@change="prepareParser"
-							>
-								<option value="2">2</option>
-								<option value="4">4</option>
-								<option value="8">8</option>
-							</select>
-							Indent Size
-						</label>
-					</div>
 					<button class="clear" title="Clear Input"
 									@click="clearInput"
 					>
@@ -74,7 +94,9 @@ const timeTaken = ref(0)
 const lexerData = ref({})
 const choice = ref("preview")
 const indentSize = ref(4)
+const tabSize = ref(4)
 const useCodeHighlighter = ref(false)
+const useLinkRefs = ref(true)
 const mdp = ref(null)
 
 /**
@@ -112,6 +134,8 @@ const prepareParser = () => {
 	mdp.value = new MDP({
 		indent: indentSize.value,
 		highlightFn: useCodeHighlighter.value ? highlightFn : null,
+		useLinkRefs: useLinkRefs.value,
+		tabSize: tabSize.value,
 	})
 	const inputValue = document.getElementById("md-input").value
 	if (inputValue) {