Git Product home page Git Product logo

contented's Introduction

Contented

Contented is a prose bundler for your documentation with pipeline driven authoring-oriented workflow to encourage developers authoring within its contextual Git repository.

With a headless design of 1 config file contented.config.mjs, developers can start writing their markdown content and preview it on their localhost contented generate --watch. Choosing convention over configuration reduces HTML/UI clutter, allowing developers to focus on authoring.

Authored content can be continuously delivered (CD) into a hosted static site (e.g., GitHub Pages/Netlify/Vercel) for preview contented generate. As code drift, so does documentation; this allows each pull request to have an accompanying sharable preview of the documentation. With CD, it effectively shift-left your documentation workflow and checks it is compilable and presentable.

By encouraging authoring next to the source (in the same git repo), developers can contextually document changes as they develop. All domain-specific changes will go into the main branch with one Git Pull Request.

With contented build, you can compile your prose into sources index.js and *.json. That output into ./dist to npm publish them into any registry of your choice, for you can easily npm i @your-scope/your-npm-package and use the processed content on any of your downstream sites. Easily pulling up-to-date content and prose from individual domain-specific repositories and re-presented. Think microservices, but for your prose!

Motivation

If you don’t make it easy to get something done (authoring), nobody will go out of their way to get it done perfectly every time. Turn it into a GitOps workflow and give people the necessary tools and power to get it done perfectly every single time — everyone will get it done, as now there is no other way else to get it done. An efficient workflow naturally satisfies.

Just Another SSG?

This is not a static site generator. This is a prose processor workflow with a built-in static site generator. The outcome we're trying to achieve is this @contentedjs/contented-example/dist

See Contented Limitations

Powered By

Getting Started

Your docs can be anywhere as long as contented is configured to pick them up.

repo/
├─ packages/**
├─ docs/
│  ├─ 01-Title 1/*.md
│  ├─ 02-Title 2/*.md
│  ├─ 03-Title 3/
│  │  ├─ 01-Subtitle 1/*.md
│  │  ├─ 02-overview.md
│  │  └─ 03-faq.md
│  └─ package.json
├─ contented.config.mjs
├─ package.json
└─ README.md

package.json

{
  "name": "@contentedjs/contented-example",
  "version": "0.0.0",
  "private": false,
  "files": ["dist"],
  "main": "dist/index.js",
  "scripts": {
    "write": "contented generate --watch",
    "generate": "contented generate",
    "build": "contented build"
  },
  "devDependencies": {
    "@contentedjs/contented": "latest"
  }
}

contented.config.mjs

/** @type {import('@contentedjs/contented').ContentedConfig} */
export default {
  preview: {
    url: 'https://contented.fuxing.dev',
    name: 'Contented',
    github: {
      url: 'https://github.com/fuxingloh/contented',
    },
  },
  processor: {
    pipelines: [
      {
        type: 'Docs',
        pattern: 'docs/**/*.md',
        processor: 'md',
        fields: {
          title: {
            type: 'string',
            required: true,
            resolve: (s) => s ?? 'Contented',
          },
          description: {
            type: 'string',
          },
          tags: {
            type: 'string[]',
          },
        },
        transform: (file) => {
          file.path = file.path.replaceAll(/^\/docs\/?/g, '/');
          file.sections = file.sections.slice(1);
          return file;
        },
      },
    ],
  },
};

Examples

contented's People

Contributors

cwkang1998 avatar dependabot[bot] avatar fuxingloh avatar joeldavidw avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

contented's Issues

`#` should not be sanitized by `Pipeline.prefix`

What would you like to be added:

While [api](../03-api) is sanitized as [api](../api), # should not be sanitized by Pipeline.prefix. To allow deep linking of content sections. Keeping # intact.

- `[content](../03-content#header)` parsed as `[content](../content-header)`
+ `[content](../03-content#header)` parsed as `[content](../content#header)`

`contented-preview`: GitHub Edit Page

What would you like to be added:

Supply a link "Edit on GitHub" where the content can be automatically resolved.

Why is this needed:

For editing QOL.

`contented-action`, a github action for reporting changes in contented build

What would you like to be added:

For end-to-end "shift left authoring" to work, we need to embed "contented" into our CI/CD workflow. Other than generating a preview of the markup website, we also need to highlight to reviewers what pages have changed. Which sources/files were changed.

Why is this needed:

Shift-left excellency.

Header with link in it does not render properly

What happened:

When doing something like:

## [A header that's a link](./something.md)

The header does not render on contented write.

If however you do a combination of links and text in the header like so:

## Half a [header](something.md)

The text half render correctly, but the link will only appear on hover.

A visual example which is also reproduced below:

---
title: Lorem 1
---

## This is a heading that is not a link

## [This is a heading that is a link](http://tempore-serpens.net/temperatvirentem)

## Half a link [here:](http://tempore-serpens.net/temperatvirentem)
## [Another: ](http://tempore-serpens.net/temperatvirentem), after a link

## There is headings above this title that is a link that is not shown.

[Normal link seems to work](http://tempore-serpens.net/temperatvirentem)

Screenshot 2023-01-11 at 3 03 45 PM

What you expected to happen:

The heading to render as expected, with the link shown in header style if possible.

How to reproduce it (as minimally and precisely as possible):

https://github.com/cwkang1998/contented-bug-linked-heading

Anything else we need to know?:

contented-preview overflow page jumping issue

What happened:

Page navigation (left side) jumps when content overflow, it should stay the same position regardless of content overflow.

What you expected to happen:

Not to jump!

How to reproduce it (as minimally and precisely as possible):

https://contented.dev

Anything else we need to know?:

It's annoying.

/triage accepted
/area contented-preview

`contented-pipeline-md` to support parsing images

What would you like to be added:

As per title, we should think about supporting parsing image in packages/contented-pipeline-md — supporting them properly in the true Contented way — the Git way.

Why is this needed:

Although contented started out as "Contented is a Markdown-based authoring workflow & processor that encourage developer authoring within its contextual Git repository." Where content is mostly text or diagrams that are easily managed in a Git repository in a single file. However, our uses cases are expanding where we need to support more complex content types such as images.

Using image within Markdown although popular is hard to manage in a Git repository. It is hard to track changes and diffs. You can't easily see the changes in a PR. It is also hard to manage the image assets in a Git repository.

Contented Presentation Mode

What would you like to be added:

As Contented is an excellent Markdown-based authoring workflow that allows developers to focus on writing and maintaining documentation, it would be beneficial to have a Presentation Mode to improve the way we share and present our authored content.

I propose a new feature called "Contented Presentation Mode" which allows users to easily toggle between presentation and reading modes. This feature should enable users to pick existing prose from their domain-specific repositories for presentation purposes.

Key features of the Contented Presentation Mode:

  • Toggle presentation mode: A simple user interface to switch between reading (linear) and presentation modes (slides).
  • Pick existing prose: A mechanism to select existing Markdown content from the repositories and add them to the presentation deck that you can use for later presentations. (Using localstorage, to keep it simple)
  • Seamless navigation: Intuitive navigation controls for easy traversal between the presentation slides.
  • Export options: Export the presentation to popular formats like PDF or HTML.
  • Customizable presentation templates: A set of built-in presentation templates and the ability to create custom templates to match the organization's branding and style. (This is not important)

Why is this needed:

Contented Presentation Mode will not only enhance the authoring experience but also facilitate better sharing and presentation of the authored content.

Contented Plugin Directives

What would you like to be added:

Contented is a powerful Markdown-based authoring workflow, but it currently lacks the ability to integrate custom content rendering easily. Additionally, it would be beneficial to have a built-in feature to pull images from a Content Delivery Network (CDN) like GitHub assets to optimize loading times and improve the overall user experience.

I propose a new feature called "Contented Plugin Directives" that allows developers to create and use a plugin-like system to render lightweight content, enhancing the Markdown content in a more interactive and visually appealing way.

Example below.

```[github-snippet]
https://github.com/BirthdayResearch/contented/blob/04e05562b4df341aa3bf9862fb2716e55a6c18d0/packages/contented-pipeline-md/src/MarkdownPipeline.ts#L33-L37
```

Throw helpful error if `pipeline.collection[0]` is undefined

What would you like to be added:

  • Throw helpful error if pipeline.collection[0] is undefined
    image
  • E.g. "The xxxxx could not be found. Did you forget to yyyyy?" or "Failed to resolve path to zzzzz"

Why is this needed:

  • Devs can fix the missing configs faster

`contented-extra`

What would you like to be added:

  • Parse js/ts documentations into Markdown into HTML
  • Parse jest documentations/comments into Markdown into HTML (Better DX, instead of parsing markdown into jest)
  • Parse GRPC documentations/comments into Markdown into HTM

Why is this needed:

Contextual documentations.

/triage accepted
/area contented-processor

`contented` reload plugin for NextJS

What would you like to be added:

NextJS addon to automatically reload/rebuild contented dist.

Why is this needed:

While contented-preview has this feature included, for users that want to build a custom website without utilizing contented-preview would have a hard time configuring "auto refreshed live-preview" of the markdown website.

Provide a way to link to other pages

low priority


What would you like to be added:

  • Provide a way to link to other pages

Why is this needed:

  • Currently, devs have to declare links that will be transformed to
    Foo [bar](/another-page#baz)
  • However this will result in a reload of the site

Improve how mermaid is rendered on contented-preview

What would you like to be added:

Improve how mermaid is handled on contented-preview, currently it looks for "div.mermaid" and loads by replacing the div on page load. This is difficult when the site state change and you need to reload mermaid. We should keep the raw data of "div.mermaid" around so that we can reuse it when the state change.

This might not be as simple and require working on the unified plugin to keep it in data attributes.

/area contented-preview

`contented-pipeline-md` to support parsing HTML

What would you like to be added:

On Markdown, we should support <b>Bolded</b> as HTML instead of escaping it.

Debatable and might cause unnecessary complexity as it's not prose-friendly. Markdown is prose friendly where semantics are little, making writing the focus. HTML isn't.

/area contented-processor

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • bump(deps): update @eslint to v9 (major) (@eslint/js, eslint)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
.github/workflows/oss-governance-labeler.yml
  • fuxingloh/multi-labeler v4.0.0@b15a54460c38f54043fa75f7b08a0e2aa5b94b5b
.github/workflows/oss-governance-labels.yml
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • micnncim/action-label-syncer v1.3.0@3abd5ab72fda571e69fffd97bd4e0033dd5f495c
.github/workflows/release-drafter.yml
  • release-drafter/release-drafter v6.0.0@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348
.github/workflows/release.yml
  • actions/github-script v7.0.1@60a0d83039c74a4aee543508d2ffcb1c3799cdea
  • actions/checkout v4.1.3@1d96c772d19495a3b5c517cd2bc0cb401ea0529f
  • actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8
npm
example/package.json
package.json
  • @jest/globals ^29.7.0
  • esbuild ^0.20.2
  • esbuild-jest ^0.5.0
  • eslint ^8.57.0
  • husky ^9.0.11
  • jest 29.7.0
  • lint-staged ^15.2.2
  • prettier ^3.2.5
  • ts-jest 29.1.2
  • turbo ^1.13.2
packages/contented-pipeline-md/package.json
  • @jsdevtools/rehype-toc ^3.0.2
  • @sindresorhus/slugify ^2.2.1
  • hast-util-to-string ^3.0.0
  • hastscript ^9.0.0
  • js-yaml ^4.1.0
  • lodash ^4.17.21
  • mdast-util-directive ^3.0.0
  • mdast-util-to-string ^4.0.0
  • minimatch ^5.1.6
  • rehype-autolink-headings ^7.1.0
  • rehype-external-links ^3.0.0
  • rehype-parse ^9.0.0
  • rehype-slug ^6.0.0
  • rehype-stringify ^10.0.0
  • remark-directive ^3.0.0
  • remark-embed-images ^4.0.0
  • remark-frontmatter ^5.0.0
  • remark-gfm ^4.0.0
  • remark-parse ^11.0.0
  • remark-rehype ^11.1.0
  • shiki ^0.14.7
  • to-vfile ^8.0.0
  • unified ^11.0.4
  • unist-util-map ^4.0.0
  • unist-util-visit ^5.0.0
  • vfile ^6.0.1
  • @types/hast ^3.0.4
  • @types/js-yaml ^4.0.9
  • @types/lodash ^4.17.0
  • @types/mdast ^4.0.3
packages/contented-pipeline/package.json
  • @sindresorhus/slugify ^2.2.1
packages/contented-preview/package.json
  • @heroicons/react 2.1.3
  • @tailwindcss/typography 0.5.12
  • autoprefixer 10.4.19
  • clsx 2.1.1
  • mermaid 10.9.0
  • next 14.2.2
  • postcss 8.4.38
  • react 18.2.0
  • react-dom 18.2.0
  • tailwindcss 3.4.3
packages/contented-processor/package.json
  • @babel/generator ^7.24.4
  • minimatch ^5.1.6
  • @types/babel__generator ^7.6.8
  • @types/minimatch ^5.1.2
packages/contented/package.json
  • @parcel/watcher ^2.4.1
  • clipanion 3.2.1
  • debounce ^2.0.0
  • ignore-walk ^6.0.4
  • @types/debounce ^1.2.4
  • @types/ignore-walk ^4.0.3
workspace/eslint-config/package.json
  • @eslint/js ^8.57.0
  • eslint-config-prettier ^9.1.0
  • eslint-plugin-import ^2.29.1
  • eslint-plugin-no-only-tests ^3.1.0
  • eslint-plugin-simple-import-sort ^12.1.0
  • eslint-plugin-unused-imports ^3.1.0
  • typescript-eslint ^7.7.1
workspace/jest-preset/package.json
workspace/prettier-config/package.json
  • prettier-plugin-packagejson ^2.5.0
  • prettier-plugin-tailwindcss ^0.5.14
workspace/tsconfig/package.json
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

adopt alerts in GitHub Flavored Markdown

Note

Highlights information that users should take into account, even when skimming.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

What would you like to be added:

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

Why is this needed:

Admonition is a custom standard for contented, this is a well establish alternative.

(feat): Markdown table processor support

What would you like to be added:

As per title.

Why is this needed:

Useful feature to have since some data is better represented in a tabular form. For example, a glossary, schema, etc.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.