From 8bc3949e9a92e8555a652bfac9faa70354521c56 Mon Sep 17 00:00:00 2001
From: Mark Holmes <github@markholmes.org>
Date: Mon, 5 Sep 2022 12:57:35 -0700
Subject: [PATCH] Fixes mobile scroll for docs pages and improves setup

---
 README.md                    | 12 +++++++++---
 lib/ash_hq_web/pages/docs.ex |  8 ++++----
 lib/mix/tasks/import.ex      | 15 +++++++++++++++
 mix.exs                      |  2 +-
 4 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 lib/mix/tasks/import.ex

diff --git a/README.md b/README.md
index 7ead46e..4239e35 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,16 @@
 # AshHq
 
-Getting started is a standard phoenix/ash/postgres application.
+## Getting Started
 
-To get data imported from the various projects that are currently seeded (see the seeds.ex file), once you've set up and created the data base, go into iex and run `AshHq.Docs.Importer.import()`.
+1. Fork and clone this repository.
+2. Set up the project by running `mix do deps.get, deps.compile, setup` (the import may take a while).
+3. Install the frontend assets by running `npm i --prefix assets`.
+4. Run the server with `iex -S mix phx.server`
+5. Open [http://localhost:4000](http://localhost:4000)
 
-The liveview part is not very conventional, I was focused on speed when I first wrote it, and it (as things always do) evolved from something far more simple. The truly complicated part is that the docs are *not* static content like you would typically see for documentation. They are all stored in a database, because they can all be full-text searched using postgres. Eventually it would make sense to serve the individual doc pages from a CDN or something like that. The interesting pages in that regard is the `Docs` page. We do quite a bit of work to make sure that we are only loading the html that will be served for the exact document we are seeing.
+## A Bit of History
+
+The liveview part is not very conventional, I was focused on speed when I first wrote it, and it (as things always do) evolved from something far more simple. The truly complicated part is that the docs are _not_ static content like you would typically see for documentation. They are all stored in a database, because they can all be full-text searched using postgres. Eventually it would make sense to serve the individual doc pages from a CDN or something like that. The interesting pages in that regard is the `Docs` page. We do quite a bit of work to make sure that we are only loading the html that will be served for the exact document we are seeing.
 
 The magic of search is done via `AshHq.Docs.Extensions.Search`, which modifies resources to make them full text searchable using postgres, amongst other things. See `lib/ash_hq/docs/extensions/search/transformers/add_search_structure.ex` for more.
 
diff --git a/lib/ash_hq_web/pages/docs.ex b/lib/ash_hq_web/pages/docs.ex
index a1bdbdf..f01e45c 100644
--- a/lib/ash_hq_web/pages/docs.ex
+++ b/lib/ash_hq_web/pages/docs.ex
@@ -35,7 +35,7 @@ defmodule AshHqWeb.Pages.Docs do
   def render(assigns) do
     ~F"""
     <div class="grid content-start overflow-hidden h-screen pb-12">
-      <div class="xl:hidden flex flex-row justify-start space-x-12 items-center border-b border-t border-gray-600 py-3 mb-12">
+      <div class="xl:hidden flex flex-row justify-start space-x-12 items-center border-b border-t border-gray-600 py-3">
         <button class="dark:hover:text-gray-600" phx-click={show_sidebar()}>
           <Heroicons.Outline.MenuIcon class="w-8 h-8 ml-4" />
         </button>
@@ -81,7 +81,7 @@ defmodule AshHqWeb.Pages.Docs do
           />
         </div>
       </span>
-      <div class="grow w-full overflow-hidden flex flex-row h-full justify-center space-x-12 bg-white dark:bg-primary-black">
+      <div class="grow w-full overflow-hidden flex flex-row h-full justify-center md:space-x-12 bg-white dark:bg-primary-black">
         <DocSidebar
           id="sidebar"
           class="hidden xl:block mt-10"
@@ -102,10 +102,10 @@ defmodule AshHqWeb.Pages.Docs do
         />
         <div
           id="docs-window"
-          class="w-full prose prose-xl max-w-6xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible pr-8 mt-14"
+          class="w-full prose prose-xl max-w-6xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto"
           phx-hook="Docs"
         >
-          <div id="module-docs" class="w-full nav-anchor text-black dark:text-white relative">
+          <div id="module-docs" class="w-full nav-anchor text-black dark:text-white relative py-4 md:py-auto">
             {#if @module}
               <h2>{@module.name}{render_source_code_link(assigns, @module, @library, @library_version)}</h2>
             {/if}
diff --git a/lib/mix/tasks/import.ex b/lib/mix/tasks/import.ex
new file mode 100644
index 0000000..ee5b4f6
--- /dev/null
+++ b/lib/mix/tasks/import.ex
@@ -0,0 +1,15 @@
+defmodule Mix.Tasks.Import do
+  @shortdoc "Seeds the database with documentation."
+  @moduledoc @shortdoc
+  @requirements ["app.start"]
+
+  use Mix.Task
+  alias AshHq.Docs.Importer
+
+  @impl Mix.Task
+  def run(_args) do
+    IO.puts("Beginning documentation import.")
+    Importer.import()
+    IO.puts("Import complete.")
+  end
+end
diff --git a/mix.exs b/mix.exs
index 58e805e..6a8fcb9 100644
--- a/mix.exs
+++ b/mix.exs
@@ -100,7 +100,7 @@ defmodule AshHq.MixProject do
   # See the documentation for `Mix` for more info on aliases.
   defp aliases do
     [
-      seed: ["run priv/repo/seeds.exs"],
+      seed: ["run priv/repo/seeds.exs", "import"],
       setup: ["ash_postgres.create", "ash_postgres.migrate", "seed"],
       reset: ["drop", "setup"],
       credo: "credo --strict",