search

denoland / doc_website

Archived. New version at https://github.com/denoland/docland
https://doc.deno.land/
MIT License
194 stars 42 forks source link

How to convert json file to doc website #130

Open davisjohndavis3 opened 4 years ago

davisjohndavis3 commented 4 years ago

I have created a JSON format file for a particular module in my Deno project using "deno doc --Json > sample.json". This creates a sample.json file of the module. Then I cloned and setup the doc_website in my local.

But I am confused how to use sample.json file in doc_website. I am stuck with where to add this file in doc_wesite folder structure.

Thanks in advance.

lucacasonato commented 4 years ago

I think you are looking for #77. This has not been implemented yet. For now you can take a look at ddoc, is a version of the doc website that runs on your local machine in a webview (with offline support).

davisjohndavis3 commented 4 years ago

I think you are looking for #77. This has not been implemented yet. For now you can take a look at ddoc, is a version of the doc website that runs on your local machine in a webview (with offline support).

@lucacasonato I hosted it in vercel and get a url for this. But by default it displaying the deno doc. So how can I create a deno doc for my own project using the deno doc_website project. Because I need to host this and link this output doc UI in our readme.

gseok commented 2 years ago

@davisjohndavis3 I have same problem (confused... my extract 'sample.json' how to show up locally?) and I solve that simple fixing code.

my solution is follow steps. (1). clone "doc_website" code (git clone https://github.com/denoland/doc_website) (2). create folder and file 'pages/mydoc/sample.tsx'

(3). write code in sample.tsx (actually we don't need entrypoint and name -> because we already have sample.json)

import { useRouter } from "next/router";
import { Documentation } from "../../components/MyDocumentation";

const Page = () => {
  const { query } = useRouter();
  const version = query.version ?? "stable";

  return (
    <Documentation
      entrypoint={""}
      name={`openapi@${version}`}
    />
  );
};

export default Page;

(4) create myDocumentation component in components/MyDocumentation.tsx

import React, { useReducer, useEffect } from "react";
import Head from "next/head";
import useSWR from "swr";
import { DocsData } from "../util/data";
import { SinglePage } from "./SinglePage";
import jsDocJson from '../assets/data.json'; // !! data.json is same file your "sample.json"

export const Documentation = ({
  entrypoint,
  name,
}: {
  entrypoint: string;
  name: string;
}) => {
  const [loadCount, forceReload] = useReducer((i) => ++i, 0);
  const { data } = useSWR<DocsData, string>(
    [entrypoint, loadCount],
    () => {
      const docsData = {
        timestamp: '',
        nodes: jsDocJson,
      } as DocsData;
      return docsData;
    },
    {
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
      refreshWhenHidden: false,
      refreshWhenOffline: false,
    }
  );
  const runtimeBuiltinsData = data;

  return (
    <>
      <Head>
        <title>{name} - deno doc</title>
        <meta
          name="description"
          content={`Automatically generated documentation for ${name}.`}
        />
      </Head>
      <SinglePage
        forceReload={forceReload}
        entrypoint={entrypoint}
        data={data}
        runtimeBuiltinsData={runtimeBuiltinsData}
      />
    </>
  );
};

(5) npm run dev (local develop mode next.js project(doc_website) running!) (6) access browser (http://localhost:3000/mydoc/sample), you can see your sample doc~!!!!!

Add Tip

bartlomieju commented 2 years ago

FYI new doc website is being worked on that will allow to easily deploy it yourself. Expect announcement in the coming weeks.

gseok commented 2 years ago

@bartlomieju oh! nice news! I expect coming week's announcement.