sdocs-dev 1.0.0

package/public/css/tokens.css

@@ -0,0 +1,112 @@
+:root {
+  --bg:            #F7F5F2;
+  --bg-surface:    #F1EDE8;
+  --bg-panel:      #EDE8E2;
+  --bg-panel-deep: #E7E2DB;
+  --bg-input:      #FFFFFF;
+  --bg-hover:      #E8E3DD;
+  --bg-active:     #E2DDD6;
+
+  --border:        #D4CFC9;
+  --border-subtle: #DDD9D3;
+  --border-strong: #C5BFB8;
+
+  --text:          #1C1917;
+  --text-2:        #57534E;
+  --text-3:        #A8A29E;
+  --text-inv:      #FAFAF9;
+
+  --accent:        #2563EB;
+  --accent-light:  #EEF2FF;
+  --accent-text:   #1D4ED8;
+
+  --radius-sm:     4px;
+  --radius:        6px;
+  --radius-md:     8px;
+  --radius-lg:     10px;
+
+  --shadow-sm:     0 1px 2px rgba(28,25,23,.06);
+  --shadow:        0 2px 6px rgba(28,25,23,.08), 0 1px 2px rgba(28,25,23,.04);
+  --shadow-md:     0 4px 12px rgba(28,25,23,.10), 0 2px 4px rgba(28,25,23,.06);
+
+  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;
+
+  --md-h2-border:       #EDE8E2;
+  --md-toc-border:      #E7E2DB;
+  --md-pre-border:      #E7E2DB;
+  --md-bq-bg:           #F7F5F2;
+  --md-hr-border:       #EDE8E2;
+  --md-table-border:    #E2DDD6;
+  --md-table-header-bg: #F4F1ED;
+  --md-table-even-bg:   #FAFAF8;
+  --md-copy-btn-border: rgba(0,0,0,0.12);
+  --md-copy-btn-hover:  rgba(0,0,0,0.05);
+}
+
+/* ═══════════════════════════════════════════════════
+   DARK THEME
+═══════════════════════════════════════════════════ */
+html[data-theme="dark"] {
+  --bg:            #1C1A17;
+  --bg-surface:    #252320;
+  --bg-panel:      #211F1D;
+  --bg-panel-deep: #1A1816;
+  --bg-input:      #2C2926;
+  --bg-hover:      #32302C;
+  --bg-active:     #3A3733;
+
+  --border:        #3D3935;
+  --border-subtle: #332F2B;
+  --border-strong: #4A453F;
+
+  --text:          #E7E5E2;
+  --text-2:        #A8A29E;
+  --text-3:        #6B6560;
+  --text-inv:      #1C1917;
+
+  --accent:        #3B82F6;
+  --accent-light:  #1E293B;
+  --accent-text:   #60A5FA;
+
+  --shadow-sm:     0 1px 2px rgba(0,0,0,.20);
+  --shadow:        0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
+  --shadow-md:     0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.20);
+
+  --md-h2-border:       #3D3935;
+  --md-toc-border:      #3D3935;
+  --md-pre-border:      #3D3935;
+  --md-bq-bg:           #252320;
+  --md-hr-border:       #3D3935;
+  --md-table-border:    #3D3935;
+  --md-table-header-bg: #2C2926;
+  --md-table-even-bg:   #242220;
+  --md-copy-btn-border: rgba(255,255,255,0.12);
+  --md-copy-btn-hover:  rgba(255,255,255,0.06);
+}
+html[data-theme="dark"] :is(#rendered, #write) {
+  --md-color:       #e7e5e2;
+  --md-code-bg:     #1a1816;
+  --md-code-color:  #b8a99a;
+  --md-pre-bg:      #1a1816;
+  --md-link-color:  #60a5fa;
+  --md-bq-color:    #a8a29e;
+}
+html[data-theme="dark"] .control-row select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* Theme transitions */
+body,
+#left,
+#right,
+#export-panel,
+#statusbar,
+#content-area,
+#left-toolbar,
+#right-header,
+#export-panel-header,
+.panel-header,
+.sub-header,
+#raw {
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}

package/public/css/write.css

@@ -0,0 +1,128 @@
+/* ═══════════════════════════════════════════════════
+   WRITE MODE
+═══════════════════════════════════════════════════ */
+
+/* ── Write div ── */
+#write {
+  display: none;
+  outline: none;
+  min-height: 100%;
+  cursor: text;
+}
+#write:empty::before {
+  content: 'Start typing\2026';
+  color: var(--text-3);
+  pointer-events: none;
+}
+
+/* ── Write toolbar ── */
+#write-toolbar {
+  display: none;
+  align-items: center;
+  gap: 2px;
+  height: 0;
+  opacity: 0;
+  padding: 0 12px;
+  background: var(--bg);
+  border-bottom: 1px solid transparent;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: height .3s cubic-bezier(.4,0,.2,1),
+              opacity .22s ease,
+              border-color .3s ease,
+              padding .3s cubic-bezier(.4,0,.2,1);
+}
+body.write-mode #write-toolbar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 34px;
+  opacity: 1;
+  border-bottom-color: var(--border-subtle);
+  padding: 0 12px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+body.write-mode #write-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+.write-tb-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  width: 28px;
+  height: 26px;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: var(--text-2);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  padding: 0;
+  font-size: 12px;
+  font-family: var(--font-ui);
+  font-weight: 600;
+  transition: color .12s, background .12s;
+}
+.write-tb-btn:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+.write-tb-btn.active {
+  color: var(--text);
+  background: var(--bg-input);
+  box-shadow: var(--shadow-sm);
+}
+.write-tb-btn code {
+  font-size: 11px;
+  font-family: 'JetBrains Mono', monospace;
+  background: none;
+  padding: 0;
+  color: inherit;
+}
+
+.write-tb-sep {
+  width: 1px;
+  height: 16px;
+  background: var(--border);
+  margin: 6px 0;
+  flex-shrink: 0;
+}
+
+/* ── Tooltips ── */
+.write-tb-btn[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 3px 8px;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .15s ease;
+}
+.write-tb-btn[data-tip]:hover::after {
+  opacity: 1;
+}
+
+/* ── Visibility rules ── */
+body.write-mode #write {
+  display: block;
+}
+body.write-mode #rendered {
+  display: none;
+}
+body.write-mode #raw {
+  display: none;
+}

package/public/default.md

@@ -0,0 +1,129 @@
+---
+styles:
+  fontFamily: "Inter"
+  baseFontSize: 16
+  lineHeight: 1.75
+  headers: { fontFamily: "inherit", scale: 1, marginBottom: 0.4 }
+  h1: { fontSize: 2.1, fontWeight: 700 }
+  h2: { fontSize: 1.55, fontWeight: 600 }
+  h3: { fontSize: 1.2, fontWeight: 600 }
+  h4: { fontSize: 1, fontWeight: 600 }
+  p: { lineHeight: 1.75, marginBottom: 1.1 }
+  link: { color: "#2563eb", decoration: "underline" }
+  code: { font: "JetBrains Mono", background: "#f4f1ed", color: "#6b21a8" }
+  blockquote: { borderColor: "#2563eb", borderWidth: 3, fontSize: 1, color: "#6b6560" }
+  list: { spacing: 0.3, indent: 1.6 }
+---
+# Say hello to SmallDocs: A markdown-first replacement for Word & GDocs
+
+If you're working with agents, a document written in markdown is <ins>officially</ins>* 407 times more useful than a document locked inside a `.docx` or `.gdoc` file format. Because of this, I believe Word and GDocs' days are numbered. (*I am the official.)
+
+However, all is not well. While markdown is great for agents, it's a bit annoying for humans. Quickly and elegantly reading a `.md` file requires you to open your code editor and enter "preview" mode. Sharing a markdown file requires you to actually send the file to someone. They then have to download it and find the least annoying way to read it.
+
+SmallDocs is an [open source](https://github.com/JoshInLisbon/SDocs) attempt at something different. It lets you (or your agent) easily, elegantly and privately **read**, **share**, **format** and **export** `.md` files.
+
+Reading a `.md` file in SmallDocs feels just like this (you're reading markdown right now). And creating a SmallDoc for a `.md` file (+ automatically opening your browser to read it) is as simple as:
+
+```
+# npm i sdocs-dev
+sdoc README.md
+```
+
+## How SmallDocs work
+
+### Formatting
+
+SDocs adds basic styling to markdown files. You write your content in regular markdown and the styles live in a metadata block at the top of the file.
+
+That metadata block is called [YAML front matter](https://jekyllrb.com/docs/front-matter/). It's a convention that started with [Jekyll](https://jekyllrb.com/) (the static site generator) back in 2008 and has since been adopted by [Hugo](https://gohugo.io/), [Gatsby](https://www.gatsbyjs.com/), [Obsidian](https://obsidian.md/), and most of the markdown ecosystem. It looks like a block of key-value pairs between two `---` lines at the top of your file:
+
+```yaml
+---
+title: My Document
+author: Someone
+---
+```
+
+SDocs uses a `styles:` key with CSS properties written beneath it in YAML:
+
+```yaml
+---
+styles:
+  fontFamily: Lora
+  baseFontSize: 17
+  color: "#1a1a2e"
+  h1: { fontSize: 2.3, color: "#c0392b", fontWeight: 700 }
+  p: { lineHeight: 1.9, marginBottom: 1.2 }
+---
+```
+
+(Click "**Raw**" — top left — to see the front matter for this file. See all available properties [here](https://sdocs.dev) or by running `npm i sdocs-dev; sdoc schema`.)
+
+When a `Styled .md` file is rendered in the SmallDocs interface the specified styles are applied. If a plain `.md` file is rendered the default styles are applied.
+
+### URLs
+
+The URL format for SmallDocs is:
+
+```
+https://sdocs.dev/#md={compressed & encoded .md}
+```
+
+Your entire document (content and styles) lives in the URL hash.
+
+To keep URLs as short as possible, SmallDocs compresses your markdown using [deflate](https://en.wikipedia.org/wiki/Deflate) (a standard compression algorithm built into every browser) and then encodes the result with [base64url](https://en.wikipedia.org/wiki/Base64#URL_applications) (a URL-safe variant of base64 that avoids characters like `+`, `/`, and `=` which would otherwise need percent-encoding).
+
+The `mode` parameter controls which view opens. Valid values are `read` (clean reading view, style panel hidden), `style` (style panel visible), and `raw` (raw markdown editor). When sharing a link for someone to read, use `mode=read`:
+
+```
+https://sdocs.dev/#md=...&mode=read
+```
+
+You can also link directly to a section using the `sec` parameter. Click any heading's link icon to copy its section URL:
+
+```
+https://sdocs.dev/#md=...&sec=url-formatting
+```
+
+The `sec` value is the heading text slugified (lowercased, spaces become hyphens, special characters stripped). The page will scroll to that section on load.
+
+### Privacy
+
+Your document never hits the SDocs server. This layer of privacy is built into how HTTP works. The hash fragment (everything after the `#` in a URL) is never sent to the server by the browser. It always stays entirely client-side:
+
+> "The fragment is not sent to the server when the URI is requested; it is processed by the client" - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment)
+
+The [sdocs.dev](https://sdocs.dev) site is purely a rendering space. JavaScript reads `window.location.hash`, decompresses and decodes the content, and renders your `.md` locally. The server is about 60 lines of Node.js that serves static files — no database, no logging, no analytics.
+
+### Auto-save
+
+Because the URL includes your full document and dynamically updates via JavaScript, every change you make is instantly preserved in the URL. This works when you're offline.
+
+### Drag & drop
+
+Drag any `.md` file onto the editor to SmallDoc it instantly.
+
+### Exports
+
+SmallDocs can export your document in four formats:
+
+- **Raw .md** — your markdown content with all front matter stripped. Plain markdown, compatible with anything.
+- **PDF** — a styled PDF generated from the rendered view via the browser's print engine.
+- **Word (.docx)** — a styled Word document generated from the rendered HTML.
+- **Styled .md** — your markdown with the `styles:` front matter block included. This is the format SmallDocs reads back in, so your formatting is preserved.
+
+### Small opinionated things
+
+SmallDocs has opinions. We do some things which might not work for everyone but hopefully make the general `.md` experience better for most.
+
+We welcome your opinions. Raise an issue on GitHub or make a pull request if you want something to change.
+
+#### Collapsed headers
+
+SmallDocs loads with all headers collapsed. This is done because it makes it easy to get an overview of the whole document.
+
+If you expand a parent, all of its children expand too.
+
+#### Copy & paste
+
+Every header has its own copy and paste button. This copies its content and all of its children's content. At the moment this is the fastest way to get SmallDoc content into your agent's context, but we're looking for novel ideas to make this better.