diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 06efdeb..52159c7 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -12,14 +12,8 @@ const links = [ { label: 'Genie Framework', icon: 'i-heroicons-square-3-stack-3d', - to: '/framework/', + to: '/framework', children: [ - { - label: 'Guides', - to: '/framework/guides/', - icon: 'i-heroicons-book-open-20-solid', - description: '', - }, { label: 'Genie.jl', to: '/framework/genie.jl', @@ -37,6 +31,12 @@ const links = [ to: '/framework/searchlight.jl', icon: 'i-heroicons-circle-stack-20-solid', description: '', + }, + { + label: 'Guides', + to: '/framework/guides/', + icon: 'i-heroicons-book-open-20-solid', + description: '', } ] }, { diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 751dbae..5d25375 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -7,7 +7,8 @@ const nav = inject>('navigation') let navigation = nav; if (root == 'framework') { const pkg = route.path.split('/').filter(Boolean)[1]; - navigation = computed(() => nav!.value[1].children.find(item => item._path.startsWith('/framework/'+pkg))?.children || []) +// navigation = computed(() => nav!.value[1].children.find(item => item._path.startsWith('/framework/'+pkg))?.children || []) + navigation = computed(() => nav!.value[1].children || []) } else if (root == 'tutorials') { navigation = computed(() => nav.value.filter(item => item._path.startsWith('/tutorials'))) } else if (root == 'geniebuilder') { @@ -64,8 +65,8 @@ const links = computed(() => [toc?.bottom?.edit && { diff --git a/content/2.framework/0.index.md b/content/2.framework/0.index.md index 175326c..6b0fe97 100644 --- a/content/2.framework/0.index.md +++ b/content/2.framework/0.index.md @@ -1,6 +1,5 @@ --- -title: "Genie Framework" -redirect: /framework/guides/ +title: "Framework introduction" --- # Welcome to Genie Framework! @@ -10,14 +9,13 @@ Genie is a powerful full-stack web framework for the Julia programming language, -Genie Framework has three main components: Genie, Stipple and SearchLight. +Genie Framework has three main components: Genie, Stipple, SearchLight and Genie Builder. **[Genie.jl](/framework/genie.jl/docs/)** provides backend and frontend tools, so that you can build **full stack web apps** and APIs around your Julia code. For **real-time interactivity** and a rich UI, like what's needed in a **dashboard**, **[Stipple.jl](/framework/stipple.jl/docs/)** provides a reactive UI layer. -For **database persistence**, Genie's ORM, **[SearchLight.jl](/framework/searchlight.jl)**, can be added at any time. - +For **database persistence**, Genie's ORM, **[SearchLight.jl](/framework/searchlight.jl/docs)**, can be added at any time. ## Getting started @@ -54,7 +52,7 @@ using GenieFramework @genietools @app begin - @out name = "Genie" + @in name = "Genie" end function ui() diff --git a/content/2.framework/1.guides/0.index.md b/content/2.framework/1.guides/0.index.md deleted file mode 100644 index 6b0fe97..0000000 --- a/content/2.framework/1.guides/0.index.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: "Framework introduction" ---- - -# Welcome to Genie Framework! - -Genie is a powerful full-stack web framework for the Julia programming language, perfect for building interactive UIs, APIs, and production-grade web apps. It offers a simple, low-code approach that makes web development accessible to Julia users, even those with no prior web development experience. - - - - -Genie Framework has three main components: Genie, Stipple, SearchLight and Genie Builder. - -**[Genie.jl](/framework/genie.jl/docs/)** provides backend and frontend tools, so that you can build **full stack web apps** and APIs around your Julia code. - -For **real-time interactivity** and a rich UI, like what's needed in a **dashboard**, **[Stipple.jl](/framework/stipple.jl/docs/)** provides a reactive UI layer. - -For **database persistence**, Genie's ORM, **[SearchLight.jl](/framework/searchlight.jl/docs)**, can be added at any time. - - -## Getting started - -Let's create your first Genie app in a few quick steps: - -1. Open your terminal and create a new folder for your project: - -```bash -mkdir MyGenieApp -cd MyGenieApp -``` - -2. In your project folder, start Julia with the current project activated: - -```bash -julia --project -``` - -3. In the Julia REPL, enter `Pkg` mode by typing ], then install `GenieFramework.jl`: - -```julia -pkg> add GenieFramework -``` - -This command installs `Genie.jl`, `Stipple.jl` and its dependencies in your project. - -4. Create a file named app.jl file with the following content: - -```julia -module App - -using GenieFramework -@genietools - -@app begin - @in name = "Genie" -end - -function ui() - [ - h1("My First Genie App") - input("Enter your name", :name) - p("Hello {{message}}!") - ] -end - -@page("/", ui) -end -``` - -Using the `Stipple.jl` API, this code defines an interactive dashboard application with a reactive message. - -5. Exit `Pkg` mode by pressing backspace. Then, in the Julia REPL, load and run your app: - -```julia -using GenieFramework -Genie.loadapp() -up() -``` - -6. Open a web browser and go to http://localhost:8000. You should see your "Hello, Genie!" message. - -That's it! You've created, set up, and run your first Genie application. Read the documentation of each package to continue building your app. - -To build an interactive **dashboard** with `Stipple.jl`, check out the [First dashboard](/framework/stipple.jl/guides/first-dashboard) guide and the [Component gallery](/framework/stipple.jl/docs/component-gallery). To build a multipage app, head over to the [Multipage apps](/docs/guides/multipage-apps) guide. - -To serve a static webpage with `Genie.jl` see [Creating web pages](/framework/genie.jl/guides/creating-web-pages) guide, and check out the [API](/framework/genie.jl/guides/creating-an-api) to learn to work with web APIs. - - diff --git a/content/2.framework/1.guides/_dir.yml b/content/2.framework/1.guides/_dir.yml deleted file mode 100644 index e945492..0000000 --- a/content/2.framework/1.guides/_dir.yml +++ /dev/null @@ -1 +0,0 @@ -title: Guides diff --git a/content/2.framework/5.guides/0.index.md b/content/2.framework/5.guides/0.index.md new file mode 100644 index 0000000..b5de865 --- /dev/null +++ b/content/2.framework/5.guides/0.index.md @@ -0,0 +1,4 @@ +--- +redirect: /framework/guides/deployments/deploying-genie-apps +--- + diff --git a/content/2.framework/1.guides/1.workflows/1.Importing-code.md b/content/2.framework/5.guides/1.workflows/1.Importing-code.md similarity index 100% rename from content/2.framework/1.guides/1.workflows/1.Importing-code.md rename to content/2.framework/5.guides/1.workflows/1.Importing-code.md diff --git a/content/2.framework/1.guides/1.workflows/4.Controlling-load-order.md b/content/2.framework/5.guides/1.workflows/4.Controlling-load-order.md similarity index 100% rename from content/2.framework/1.guides/1.workflows/4.Controlling-load-order.md rename to content/2.framework/5.guides/1.workflows/4.Controlling-load-order.md diff --git a/content/2.framework/1.guides/2.deployments/1.deploying-genie-apps.md b/content/2.framework/5.guides/2.deployments/1.deploying-genie-apps.md similarity index 100% rename from content/2.framework/1.guides/2.deployments/1.deploying-genie-apps.md rename to content/2.framework/5.guides/2.deployments/1.deploying-genie-apps.md diff --git a/content/2.framework/1.guides/2.deployments/6.NGINX-reverse-proxy.md b/content/2.framework/5.guides/2.deployments/6.NGINX-reverse-proxy.md similarity index 100% rename from content/2.framework/1.guides/2.deployments/6.NGINX-reverse-proxy.md rename to content/2.framework/5.guides/2.deployments/6.NGINX-reverse-proxy.md diff --git a/content/2.framework/1.guides/2.deployments/99.Deploying-to-AWS.md b/content/2.framework/5.guides/2.deployments/99.Deploying-to-AWS.md similarity index 100% rename from content/2.framework/1.guides/2.deployments/99.Deploying-to-AWS.md rename to content/2.framework/5.guides/2.deployments/99.Deploying-to-AWS.md diff --git a/content/2.framework/5.guides/_dir.yml b/content/2.framework/5.guides/_dir.yml new file mode 100644 index 0000000..ec943dd --- /dev/null +++ b/content/2.framework/5.guides/_dir.yml @@ -0,0 +1,2 @@ +title: Framework guides +redirect: /framework/guides/deployments/deploying-genie-apps