Fixes mobile scroll for docs pages and improves setup

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.
 

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}

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

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",