Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add sidebar component #509

Merged
merged 13 commits into from
Aug 10, 2024
Merged

Add sidebar component #509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1686cf3
Add sidebar
Ajotah98 Jul 25, 2024
1933fa7
Erase redundant CSS
Ajotah98 Jul 25, 2024
b209334
remove formatting changes that are unrelated to the new sidebar feature
lovasoa Jul 28, 2024
2a5eb46
refactor class
lovasoa Jul 28, 2024
c452a21
fix layouts page
lovasoa Jul 28, 2024
25d4ac5
Merge branch 'lovasoa:main' into main
Ajotah98 Jul 31, 2024
9d80385
Add inline to merge funcionality of menu-items
Ajotah98 Aug 7, 2024
cd39c2c
Add .gitattributes to make SQL files show on languages statistics
Ajotah98 Aug 8, 2024
ce2ef70
#1 Merge conflict solving
Ajotah98 Aug 8, 2024
e9f02e7
Merge conflict solving 1
Ajotah98 Aug 8, 2024
d73631e
Merge branch 'main' of https://github.com/Ajotah98/SQLpage
Ajotah98 Aug 8, 2024
8f01dca
Merge conflict: merged menu-items
Ajotah98 Aug 9, 2024
03df43c
Merge remote-tracking branch 'upstream/main'
Ajotah98 Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.sql linguist-detectable=true
263 changes: 148 additions & 115 deletions sqlpage/templates/shell.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px" {{#if class}}class="{{class}}"{{/if}}>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px" {{#if class}}class="{{class}}" {{/if}}>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<title>{{default title "SQLPage"}}</title>
<link rel="icon" href="{{#if favicon}}{{favicon}}{{else}}{{static_path 'favicon.svg'}}{{/if}}">
{{#if manifest}}
Expand All @@ -23,15 +23,22 @@
font-weight: normal;
font-style: normal;
}

:root {
--tblr-font-sans-serif: 'LocalFont', Arial, sans-serif;
}
</style>
{{else}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
<style>:root { --tblr-font-sans-serif: '{{font}}', Arial, sans-serif;}</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
<style>
:root {
--tblr-font-sans-serif: '{{font}}',
Arial,
sans-serif;
}
</style>
{{/if}}
{{/if}}

Expand All @@ -46,9 +53,8 @@
<script src="{{this}}" type="module" defer nonce="{{@../csp_nonce}}"></script>
{{/if}}
{{/each}}

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="{{description}}"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{{description}}" />
{{#if norobot}}
<meta name="robots" content="noindex,nofollow">
{{/if}}
Expand All @@ -59,120 +65,147 @@
{{#if rss}}
<link rel="alternate" type="application/rss+xml" title="{{title}}" href="{{rss}}">
{{/if}}
<meta name="generator" content="SQLPage"/>

<meta name="generator" content="SQLPage" />
{{#if social_image}}
<meta property="og:image" content="{{social_image}}"/>
<meta property="og:image" content="{{social_image}}" />
{{/if}}
</head>

<body class="layout-{{default layout 'boxed'}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
<div class="page">
{{#if (or (or title (or icon image)) menu_item)}}
<header id="sqlpage_header">
<nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
<div class="container-fluid gap-2 flex-nowrap justify-content-start" style="min-width:0">
<a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">
{{#if image}}
<img src="{{image}}" alt="{{title}}" width="32" height="32"
class="navbar-brand-image">
{{/if}}
{{#if icon}}
{{~icon_img icon~}}
{{/if}}
</a>
{{#if title}}<h1 class="mb-0 fs-2 text-truncate flex-grow-1"><a href="{{#if link}}{{link}}{{else}}/{{/if}}">{{title}}</a></h1>{{/if}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
{{~#each (to_array menu_item)~}}
{{~#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}}
{{~#with (parse_json this)}}
{{#if (or (or this.title this.icon) this.image)}}
<li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
<a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
{{~#if this.submenu}} data-bs-toggle="dropdown" data-bs-auto-close="outside" {{/if~}}
role="button"
>
{{~#if this.image~}}
<span {{~#if this.title}} class="me-1"{{/if}}>
{{~#if (eq this.size 'sm')}}
<img width=16 height=16 src="{{this.image}}">
{{~else~}}
<img width=24 height=24 src="{{this.image}}">
{{~/if~}}
</span>
{{!-- Partial for menu_items to not duplicate logic --}}
{{#*inline "menu-items"}}
<ul class="navbar-nav {{#if sidebar}}pt-lg-3{{else}}ms-auto{{/if}}">
{{~#each (to_array menu_item)~}}
{{~#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}}
{{~#with (parse_json this)}}
{{#if (or (or this.title this.icon) this.image)}}
<li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
<a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
{{~#if this.submenu}} data-bs-toggle="dropdown" data-bs-auto-close="outside" {{/if~}}
role="button"
>
{{~#if this.image~}}
<span {{~#if this.title}} class="me-1"{{/if}}>
{{~#if (eq this.size 'sm')}}
<img width=16 height=16 src="{{this.image}}">
{{~else~}}
<img width=24 height=24 src="{{this.image}}">
{{~/if~}}
{{#if this.icon}}
{{#if this.title}}<span class="me-1">{{/if}}
{{~icon_img this.icon~}}
{{#if this.title}}</span>{{/if}}
{{/if}}
{{~this.title~}}
</a>
{{~#if this.submenu~}}
<div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
{{~#each this.submenu~}}
{{#if (or (or this.title this.icon) this.image)}}
<a class="dropdown-item" href="{{this.link}}">
{{~#if this.image~}}
<span {{~#if this.title}} class="me-1"{{/if}}>
{{~#if (eq ../this.size 'sm')}}
<img width=16 height=16 src="{{this.image}}">
{{~else~}}
<img width=24 height=24 src="{{this.image}}">
{{~/if~}}
</span>
</span>
{{~/if~}}
{{#if this.icon}}
{{#if this.title}}<span class="me-1">{{/if}}
{{~icon_img this.icon~}}
{{#if this.title}}</span>{{/if}}
{{/if}}
{{~this.title~}}
</a>
{{~#if this.submenu~}}
<div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
{{~#each this.submenu~}}
{{#if (or (or this.title this.icon) this.image)}}
<a class="dropdown-item" href="{{this.link}}">
{{~#if this.image~}}
<span {{~#if this.title}} class="me-1"{{/if}}>
{{~#if (eq ../this.size 'sm')}}
<img width=16 height=16 src="{{this.image}}">
{{~else~}}
<img width=24 height=24 src="{{this.image}}">
{{~/if~}}
{{#if this.icon}}
{{#if this.title}}<span class="me-1">{{/if}}
{{~icon_img this.icon~}}
{{#if this.title}}</span>{{/if}}
{{/if}}
{{~this.title~}}
</a>
</span>
{{~/if~}}
{{~/each~}}
</div>
{{/if}}
</li>
{{#if this.icon}}
{{#if this.title}}<span class="me-1">{{/if}}
{{~icon_img this.icon~}}
{{#if this.title}}</span>{{/if}}
{{/if}}
{{~this.title~}}
</a>
{{~/if~}}
{{~/each~}}
</div>
{{/if}}
{{/with}}
{{~else}}
{{~#if (gt (len this) 0)~}}
<li class="nav-item">
<a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
</li>
{{~/if~}}
{{~/if~}}
{{~/each}}
</ul>
{{#if search_target}}
<form class="d-flex" role="search" action="{{search_target}}">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_value}}">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
{{/if}}
</div>
</nav>
</header>
</li>
{{/if}}
{{/with}}
{{~else}}
{{~#if (gt (len this) 0)~}}
<li class="nav-item">
<a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
</li>
{{~/if~}}
{{~/if~}}
{{~/each}}
</ul>
{{#if search_target}}
<form class="d-flex" role="search" action="{{search_target}}">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_value}}">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
{{/if}}
<main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3 {{#if fixed_top_menu}} mt-5{{#unless (eq layout 'boxed')}} pt-5{{/unless}}{{/if}}" id="sqlpage_main_wrapper">
{{~#each_row~}}{{~/each_row~}}
</main>
</div>
<footer class="w-100 text-center fs-6 my-2 text-secondary" id="sqlpage_footer">
{{#if footer}}
{{{markdown footer}}}
{{else}}
<!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
{{/inline}}

<body class="layout-{{#if sidebar}}fluid{{else}}{{default layout 'boxed'}}{{/if}}" {{#if theme}}data-bs-theme="{{theme}}" {{/if}}>
<div class="page">
{{#if (or (or title (or icon image)) menu_item)}}
<header id="sqlpage_header"></header>
{{#if sidebar}}
<aside class="navbar navbar-vertical navbar-expand-lg" {{#if sidebar-theme}}data-bs-theme="dark" {{/if}}>
<div class="container-fluid">
<button class="navbar-toggler collapsed" type="button" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark">
<a style="text-decoration: none" href="{{#if link}}{{link}}{{else}}/{{/if}}">
{{#if image}}
<img src="{{image}}" alt="{{title}}" height="32" class="navbar-brand-image">
{{/if}}
{{#if icon}}
{{~icon_img icon~}}
{{/if}}
<span class="pe-2 pe-lg-0 align-middle">{{title}}</span>
</a>
</h1>
<div class="navbar-collapse collapse" id="sidebar-menu">
{{> menu-items menu_item=menu_item}}
</div>
</div>
</aside>
{{else}}
<nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
<div class="container-fluid gap-2 flex-nowrap justify-content-start" style="min-width:0">
<a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">
{{#if image}}
<img src="{{image}}" alt="{{title}}" width="32" height="32" class="navbar-brand-image">
{{/if}}
{{#if icon}}
{{~icon_img icon~}}
{{/if}}
</a>
{{#if title}}<h1 class="mb-0 fs-2 text-truncate flex-grow-1"><a href="{{#if link}}{{link}}{{else}}/{{/if}}">{{title}}</a></h1>{{/if}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
{{> menu-items menu_item=menu_item}}
</div>
</div>
</nav>
{{/if}}
</footer>
{{/if}}
<div class="page-wrapper">
<main class="page-body container-xl pt-3 px-md-5 px-sm-3 {{#if fixed_top_menu}}mt-5{{#unless (eq layout 'boxed')}}pt-5{{/unless}}{{/if}}" id="sqlpage_main_wrapper">
{{~#each_row~}}{{~/each_row~}}
</main>
</div>
<footer class="w-100 text-center fs-6 my-2 text-secondary" id="sqlpage_footer">
{{#if footer}}
{{{markdown footer}}}
{{else}}
<!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
Built with <a class="text-reset" href="https://sql.ophir.dev"
title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
{{/if}}
</footer>
</div>
</body>
</html>
</html>