Skip to content

Commit

Permalink
chore: basic doc setup completed (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
rjoydip authored Sep 6, 2024
1 parent e7a3937 commit c5ce107
Show file tree
Hide file tree
Showing 16 changed files with 134 additions and 463 deletions.
3 changes: 2 additions & 1 deletion docs/_config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ const markdown = {
const site = lume(
{
location: new URL("https://lume.land"),
},
},
{ markdown },
);

site
.ignore("scripts")
.copy("static", ".")
.use(toc())
.use(codeHighlight({
languages: {
vento: ventoLang,
Expand Down
4 changes: 3 additions & 1 deletion docs/_data.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,6 @@ metas:
image: /avatar.jpg
color: "#141b1f"
icon: /apple-touch-icon.png
generator: true
generator: true

layout: landing.vto
11 changes: 11 additions & 0 deletions docs/_includes/layouts/apps.vto
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
layout: ./base.vto
page_css: apps.css
---
<div class="apps">
<header class="apps-body">
<div class="apps-content">
{{ content |> md }}
</div>
</header>
</div>
20 changes: 0 additions & 20 deletions docs/_includes/layouts/base.vto
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,13 @@
{{ /if }}

<script src="/main.js" type="module"></script>

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/[email protected]/dist/style.css"
integrity="sha256-brWyd+lKlaU/B5Lhqd/FUXyZQu4rVmbFRsP2E8S2CLw="
crossorigin="anonymous">
</head>
<body>
{{ include "templates/navbar.vto" }}
<div>
{{ content }}
</div>
{{ include "templates/footer.vto" }}

<script
src="https://cdn.jsdelivr.net/npm/@docsearch/[email protected]/dist/umd/index.js"
integrity="sha256-7XYP2JLQrbyOqBKrAn8sT3l8PG/v2j6C3A5EyBDp9to="
crossorigin="anonymous" defer></script>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
Expand All @@ -74,15 +63,6 @@
mediaMatch(mediaQuery).addEventListener("change", (event) => {
storeTheme(event.matches);
});

docsearch({
appId: "O7U42EOTRQ",
apiKey: "bcb89a19824e0100724bc16011dea6f8",
indexName: "oifc",
container: document.getElementById("search"),
debug: false
});
}, false);
</script>
</body>
</html>
30 changes: 16 additions & 14 deletions docs/_includes/layouts/landing.vto
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,26 @@ page_css: landing.css
<img src="/icons/arrow-right.svg" inline>
</a>
</div>
</div>

<div class="landing-badges">
<lume-shield data-name="denoland/lume"></lume-shield>
{{ for badge of badges }}
<lume-shield data-name="{{ badge.name }}" data-url="{{ badge.url }}" data-version="{{ badge.version }}" data-color="{{ badge.color }}" data-skip-nudd></lume-shield>
{{ /for }}
</div>
{{ for badge of badges }}
<lume-shield data-name="{{ badge.name }}" data-url="{{ badge.url }}" data-version="{{ badge.version }}" data-color="{{ badge.color }}" data-skip-nudd></lume-shield>
{{ /for }}
</div>
</header>

<section class="landing-usage">
{{ for block of usage }}
<div class="landing-usage-text">
<h2>{{ block.title }}</h2>
{{ block.description |> md }}
</div>
<div class="landing-usage-code">
{{ block.code |> md }}
</div>
{{ /for }}
{{ for block of usage }}
<div class="landing-usage-text">
<h2>{{ block.title }}</h2>
{{ block.description |> md }}
</div>
<div class="landing-usage-code">
{{ block.code |> md }}
</div>
{{ /for }}
</section>

<section class="landing-contribute">
Expand All @@ -68,7 +70,7 @@ page_css: landing.css
{{ for contributor of contribute.contributors }}
<li>
<a href="{{ contributor.url }}" title="{{ contributor.name }}">
<img src="{{ contributor.img }}" srcset="{{ contributor.img }}, {{ contributor.img |> replace(".webp", "@2x.webp") }} 2x" height="100" width="100" alt="{{ contributor.name }}">
<img src="{{ contributor.img }}" srcset="{{ contributor.img }}, {{ contributor.img |> replace(".jpg", "@2x.jpg") }} 2x" height="100" width="100" alt="{{ contributor.name }}">
</a>
</li>
{{ /for }}
Expand Down
59 changes: 31 additions & 28 deletions docs/_includes/styles/components/footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,52 +7,55 @@
max-width: var(--max-width);
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
text-align: center;
padding: 0 var(--margin);
}
.footer-copyright {
margin: 0;
padding: var(--row-gap-0) 0;

& a {
color: currentColor;
}
}
.footer-left {
margin: 0;
padding: var(--row-gap-0) 0;
}
.footer-middle {
margin: 0;
}

.footer-links {
margin: 0;
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
.footer-links {
margin: 0;
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;

& svg {
display: block;
width: 20px;
height: 20px;
fill: currentColor;
}
& svg {
display: block;
width: 20px;
height: 20px;
fill: currentColor;
}

& a {
text-decoration: none;
font: var(--text-caption-bold);
display: flex;
align-items: center;
column-gap: 10px;
padding: 10px;
border-radius: var(--border-radius-small);
color: currentColor;
white-space: nowrap;
& a {
text-decoration: none;
font: var(--text-caption-bold);
display: flex;
align-items: center;
column-gap: 10px;
padding: 10px;
border-radius: var(--border-radius-small);
color: currentColor;
white-space: nowrap;

&:hover {
color: var(--color-foreground);
background: var(--color-background-2);
}
&:hover {
color: var(--color-foreground);
background: var(--color-background-2);
}
}
}
26 changes: 13 additions & 13 deletions docs/_includes/templates/navbar.vto
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,8 @@
</div>

<div class="navbar-right">
<div class="navbar-search" id="search">Search</div>
{{# <div class="navbar-search" id="search">Search</div> #}}
<ul class="navbar-links">
<li>
<a
class="button-theme"
id="switch-theme"
title="Toggle light & dark theme"
aria-label="auto"
aria-live="polite"
>
<span class="is-light"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M120 40v-8a8 8 0 0 1 16 0v8a8 8 0 0 1-16 0m8 24a64 64 0 1 0 64 64a64.07 64.07 0 0 0-64-64m-69.66 5.66a8 8 0 0 0 11.32-11.32l-8-8a8 8 0 0 0-11.32 11.32Zm0 116.68l-8 8a8 8 0 0 0 11.32 11.32l8-8a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l8-8a8 8 0 0 0-11.32-11.32l-8 8A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l8 8a8 8 0 0 0 11.32-11.32ZM40 120h-8a8 8 0 0 0 0 16h8a8 8 0 0 0 0-16m88 88a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-8a8 8 0 0 0-8-8m96-88h-8a8 8 0 0 0 0 16h8a8 8 0 0 0 0-16"/></svg></span>
<span class="is-dark"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"/></svg></span>
</a>
</li>
<li>
<a href="https://github.com/rjoydip">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="30" stroke-dashoffset="30" d="M12 4C13.6683 4 14.6122 4.39991 15 4.5C15.5255 4.07463 16.9375 3 18.5 3C18.8438 4 18.7863 5.21921 18.5 6C19.25 7 19.5 8 19.5 9.5C19.5 11.6875 19.017 13.0822 18 14C16.983 14.9178 15.8887 15.3749 14.5 15.5C15.1506 16.038 15 17.3743 15 18C15 18.7256 15 21 15 21M12 4C10.3317 4 9.38784 4.39991 9 4.5C8.47455 4.07463 7.0625 3 5.5 3C5.15625 4 5.21371 5.21921 5.5 6C4.75 7 4.5 8 4.5 9.5C4.5 11.6875 4.98301 13.0822 6 14C7.01699 14.9178 8.1113 15.3749 9.5 15.5C8.84944 16.038 9 17.3743 9 18C9 18.7256 9 21 9 21"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="30;0"/></path><path stroke-dasharray="10" stroke-dashoffset="10" d="M9 19C7.59375 19 6.15625 18.4375 5.3125 17.8125C4.46875 17.1875 4.21875 16.1562 3 15.5"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="10;0"/></path></g></svg>
Expand All @@ -37,6 +25,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="currentColor" fill-opacity="0"><circle cx="9" cy="12" r="1.5"><animate fill="freeze" attributeName="fill-opacity" begin="1.2s" dur="0.4s" values="0;1"/></circle><circle cx="15" cy="12" r="1.5"><animate fill="freeze" attributeName="fill-opacity" begin="1.4s" dur="0.4s" values="0;1"/></circle></g><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="30" stroke-dashoffset="30" d="M15.5 17.5L16.5 19.5C16.5 19.5 20.671 18.172 22 16C22 15 22.53 7.853 19 5.5C17.5 4.5 15 4 15 4L14 6H12M8.52799 17.5L7.52799 19.5C7.52799 19.5 3.35699 18.172 2.02799 16C2.02799 15 1.49799 7.853 5.02799 5.5C6.52799 4.5 9.02799 4 9.02799 4L10.028 6H12.028"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="30;60"/></path><path stroke-dasharray="16" stroke-dashoffset="16" d="M5.5 16C10.5 18.5 13.5 18.5 18.5 16"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.4s" values="16;0"/></path></g></svg>
</a>
</li>
<li>
<a
class="button-theme"
id="switch-theme"
title="Toggle light & dark theme"
aria-label="auto"
aria-live="polite"
>
<span class="is-light"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M120 40v-8a8 8 0 0 1 16 0v8a8 8 0 0 1-16 0m8 24a64 64 0 1 0 64 64a64.07 64.07 0 0 0-64-64m-69.66 5.66a8 8 0 0 0 11.32-11.32l-8-8a8 8 0 0 0-11.32 11.32Zm0 116.68l-8 8a8 8 0 0 0 11.32 11.32l8-8a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l8-8a8 8 0 0 0-11.32-11.32l-8 8A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l8 8a8 8 0 0 0 11.32-11.32ZM40 120h-8a8 8 0 0 0 0 16h8a8 8 0 0 0 0-16m88 88a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-8a8 8 0 0 0-8-8m96-88h-8a8 8 0 0 0 0 16h8a8 8 0 0 0 0-16"/></svg></span>
<span class="is-dark"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"/></svg></span>
</a>
</li>
</ul>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions docs/deno.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"imports": {
"@std/fs": "jsr:@std/fs@^1.0.2",
"@std/path": "jsr:@std/path@^1.0.3",
"@mdit/plugin-alert": "npm:@mdit/plugin-alert@^0.13.1",
"empathic": "npm:empathic@^1.0.0",
"lume/": "https://deno.land/x/[email protected]/",
"lume_markdown_plugins/": "https://deno.land/x/[email protected]/",
"vento/": "https://deno.land/x/[email protected]/"
Expand Down
19 changes: 19 additions & 0 deletions docs/scripts/readme/copy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { existsSync, expandGlob } from "@std/fs";
import { join, parse } from "@std/path";
import { appsNS, getRoot } from "../utils.ts";

const root = getRoot()
const docPath = join('docs', 'doc')

for await (const file of await Array.fromAsync(expandGlob("**/*.md", {
root: join(root, appsNS),
exclude: ["**/node_modules/**"],
includeDirs: false
}))) {
const { path } = file;
const { dir } = parse(path)
const dist = !dir.includes(appsNS) ? join(root, docPath, appsNS) : dir.replace(appsNS, join(docPath, appsNS))
if (!existsSync(dist)) await Deno.mkdir(dist, { recursive: true })
await Deno.copyFile(path, join(dist, 'index.md'))
}
console.log("Copied and renamed markdown file")
8 changes: 8 additions & 0 deletions docs/scripts/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { dirname, resolve } from "@std/path";
import { up } from 'npm:empathic/find';

export const appsNS = 'apps'
export const getRoot = () => {
const cwd = resolve(Deno.cwd())
return dirname(up("LICENSE", { cwd }) || cwd)
}
Loading

0 comments on commit c5ce107

Please sign in to comment.