Skip to content

Commit

Permalink
refactor: use layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanspagel
hanspagel committed Sep 10, 2024
1 parent 77fec40 commit 09aab05
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 150 deletions.
148 changes: 148 additions & 0 deletions resources/views/layout.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!doctype html>
<html>

<head>
<title>{{ Scalar::pageTitle() }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@if (config('scalar.configuration.theme') === 'laravel')
<style>
/* basic theme */
.light-mode {
--scalar-color-1: #2a2f45;
--scalar-color-2: #757575;
--scalar-color-3: #8e8e8e;
--scalar-color-accent: #eb4432;
--scalar-background-1: #fff;
--scalar-background-2: #f9f9fc;
--scalar-background-3: #e7e7e7;
--scalar-background-accent: transparent;
--scalar-border-color: rgba(0, 0, 0, 0.1);
}
.dark-mode {
--scalar-color-1: rgba(231, 232, 242, 1);
--scalar-color-2: rgba(181, 181, 189, 1);
--scalar-color-3: rgba(181, 181, 189, .66);
--scalar-color-accent: #ff2c20;
--scalar-background-1: #171923;
--scalar-background-2: #252a37;
--scalar-background-3: #343b4c;
--scalar-background-accent: transparent;
--scalar-border-color: rgba(255, 255, 255, 0.1);
}
/* Document header */
.light-mode .t-doc__header {
--header-background-1: var(--scalar-background-1);
--header-border-color: var(--scalar-border-color);
--header-color-1: var(--scalar-color-1);
--header-color-2: var(--scalar-color-2);
--header-background-toggle: var(--scalar-color-3);
--header-call-to-action-color: var(--scalar-color-accent);
}
.dark-mode .t-doc__header {
--header-background-1: var(--scalar-background-1);
--header-border-color: var(--scalar-border-color);
--header-color-1: var(--scalar-color-1);
--header-color-2: var(--scalar-color-2);
--header-background-toggle: var(--scalar-color-3);
--header-call-to-action-color: var(--scalar-color-accent);
}
/* Document Sidebar */
.light-mode .t-doc__sidebar {
--sidebar-background-1: #f9f9fc;
--sidebar-item-hover-color: currentColor;
--sidebar-item-hover-background: var(--scalar-background-2);
--sidebar-item-active-background: var(--scalar-background-accent);
--sidebar-border-color: var(--sidebar-background-1);
--sidebar-color-1: var(--scalar-color-1);
--sidebar-color-2: var(--scalar-color-2);
--sidebar-color-active: var(--scalar-color-accent);
--sidebar-search-background: transparent;
--sidebar-search-border-color: var(--scalar-border-color);
--sidebar-search--color: var(--scalar-color-3);
}
.dark-mode .t-doc__sidebar {
--sidebar-background-1: #14151e;
--sidebar-item-hover-color: currentColor;
--sidebar-item-hover-background: var(--scalar-background-2);
--sidebar-item-active-background: var(--scalar-background-accent);
--sidebar-border-color: --sidebar-background-1;
--sidebar-color-1: var(--scalar-color-1);
--sidebar-color-2: var(--scalar-color-2);
--sidebar-color-active: var(--scalar-color-accent);
--sidebar-search-background: transparent;
--sidebar-search-border-color: var(--scalar-border-color);
--sidebar-search--color: var(--scalar-color-3);
}
/* advanced */
.light-mode {
--scalar-button-1: rgb(49 53 56);
--scalar-button-1-color: #fff;
--scalar-button-1-hover: rgb(28 31 33);
--scalar-color-green: #069061;
--scalar-color-red: #ef0006;
--scalar-color-yellow: #edbe20;
--scalar-color-blue: #0082d0;
--scalar-color-orange: #fb892c;
--scalar-color-purple: #5203d1;
--scalar-scrollbar-color: rgba(0, 0, 0, 0.18);
--scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);
}
.dark-mode {
--scalar-button-1: #f6f6f6;
--scalar-button-1-color: #000;
--scalar-button-1-hover: #e7e7e7;
--scalar-color-green: #C3E88D;
--scalar-color-red: #dc1b19;
--scalar-color-yellow: #ffc90d;
--scalar-color-blue: #82AAFF;
--scalar-color-orange: #FFCB8B;
--scalar-color-purple: #b191f9;
--scalar-scrollbar-color: rgba(255, 255, 255, 0.24);
--scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);
}
/* custom theme */
.sidebar-indent-nested .sidebar-heading.active_page:not(.sidebar-group-item__folder):before {
content: "";
position: absolute;
top: 11px;
left: 7px;
width: 0.5rem;
height: 0.5rem;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGZpbGw9IiNGRjJEMjAiIGQ9Im00IDAgMy40NjQgMnY0TDQgOCAuNTM2IDZWMnoiLz48L3N2Zz4=) no-repeat center;
}
.references-rendered .markdown a,
.download-cta {
text-decoration: underline !important;
text-decoration-color: var(--scalar-color-accent) !important;
}
.t-doc__header .header-item-logo {
height: 32px
}
</style>
@endif
</head>

<body>
@yield('content')
</body>

</html>
154 changes: 4 additions & 150 deletions resources/views/reference.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,158 +1,12 @@
<!doctype html>
<html>
@extends('scalar::layout')

<head>
<title>Scalar API Reference</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@if (config('scalar.configuration.theme') === 'laravel')
<style>
/* basic theme */
.light-mode {
--scalar-color-1: #2a2f45;
--scalar-color-2: #757575;
--scalar-color-3: #8e8e8e;
--scalar-color-accent: #eb4432;
--scalar-background-1: #fff;
--scalar-background-2: #f9f9fc;
--scalar-background-3: #e7e7e7;
--scalar-background-accent: transparent;
--scalar-border-color: rgba(0, 0, 0, 0.1);
}
.dark-mode {
--scalar-color-1: rgba(231, 232, 242, 1);
--scalar-color-2: rgba(181, 181, 189, 1);
--scalar-color-3: rgba(181, 181, 189, .66);
--scalar-color-accent: #ff2c20;
--scalar-background-1: #171923;
--scalar-background-2: #252a37;
--scalar-background-3: #343b4c;
--scalar-background-accent: transparent;
--scalar-border-color: rgba(255, 255, 255, 0.1);
}
/* Document header */
.light-mode .t-doc__header {
--header-background-1: var(--scalar-background-1);
--header-border-color: var(--scalar-border-color);
--header-color-1: var(--scalar-color-1);
--header-color-2: var(--scalar-color-2);
--header-background-toggle: var(--scalar-color-3);
--header-call-to-action-color: var(--scalar-color-accent);
}
.dark-mode .t-doc__header {
--header-background-1: var(--scalar-background-1);
--header-border-color: var(--scalar-border-color);
--header-color-1: var(--scalar-color-1);
--header-color-2: var(--scalar-color-2);
--header-background-toggle: var(--scalar-color-3);
--header-call-to-action-color: var(--scalar-color-accent);
}
/* Document Sidebar */
.light-mode .t-doc__sidebar {
--sidebar-background-1: #f9f9fc;
--sidebar-item-hover-color: currentColor;
--sidebar-item-hover-background: var(--scalar-background-2);
--sidebar-item-active-background: var(--scalar-background-accent);
--sidebar-border-color: var(--sidebar-background-1);
--sidebar-color-1: var(--scalar-color-1);
--sidebar-color-2: var(--scalar-color-2);
--sidebar-color-active: var(--scalar-color-accent);
--sidebar-search-background: transparent;
--sidebar-search-border-color: var(--scalar-border-color);
--sidebar-search--color: var(--scalar-color-3);
}
.dark-mode .t-doc__sidebar {
--sidebar-background-1: #14151e;
--sidebar-item-hover-color: currentColor;
--sidebar-item-hover-background: var(--scalar-background-2);
--sidebar-item-active-background: var(--scalar-background-accent);
--sidebar-border-color: --sidebar-background-1;
--sidebar-color-1: var(--scalar-color-1);
--sidebar-color-2: var(--scalar-color-2);
--sidebar-color-active: var(--scalar-color-accent);
--sidebar-search-background: transparent;
--sidebar-search-border-color: var(--scalar-border-color);
--sidebar-search--color: var(--scalar-color-3);
}
/* advanced */
.light-mode {
--scalar-button-1: rgb(49 53 56);
--scalar-button-1-color: #fff;
--scalar-button-1-hover: rgb(28 31 33);
--scalar-color-green: #069061;
--scalar-color-red: #ef0006;
--scalar-color-yellow: #edbe20;
--scalar-color-blue: #0082d0;
--scalar-color-orange: #fb892c;
--scalar-color-purple: #5203d1;
--scalar-scrollbar-color: rgba(0, 0, 0, 0.18);
--scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);
}
.dark-mode {
--scalar-button-1: #f6f6f6;
--scalar-button-1-color: #000;
--scalar-button-1-hover: #e7e7e7;
--scalar-color-green: #C3E88D;
--scalar-color-red: #dc1b19;
--scalar-color-yellow: #ffc90d;
--scalar-color-blue: #82AAFF;
--scalar-color-orange: #FFCB8B;
--scalar-color-purple: #b191f9;
--scalar-scrollbar-color: rgba(255, 255, 255, 0.24);
--scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);
}
/* custom theme */
.sidebar-indent-nested .sidebar-heading.active_page:not(.sidebar-group-item__folder):before {
content: "";
position: absolute;
top: 11px;
left: 7px;
width: 0.5rem;
height: 0.5rem;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGZpbGw9IiNGRjJEMjAiIGQ9Im00IDAgMy40NjQgMnY0TDQgOCAuNTM2IDZWMnoiLz48L3N2Zz4=) no-repeat center;
}
.references-rendered .markdown a,
.download-cta {
text-decoration: underline !important;
text-decoration-color: var(--scalar-color-accent) !important;
}
.t-doc__header .header-item-logo {
height: 32px
}
</style>
@endif
</head>

<body>
@section('content')
<script id="api-reference" data-url="{{ Scalar::url() }}"></script>

<!-- Optional: You can set a full configuration object like this: -->
<script>
var configuration = {!! Scalar::configuration() !!}
document.getElementById('api-reference').dataset.configuration =
JSON.stringify(configuration)
JSON.stringify({!! Scalar::configuration() !!})
</script>

<script src="{{ Scalar::cdn() }}"></script>
</body>

</html>
@endsection
8 changes: 8 additions & 0 deletions src/Scalar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@

class Scalar
{
public static function pageTitle()
{
return config(
'scalar.configuration.metaData.title',
config('app.name').' API Reference'
);
}

public static function url()
{
return config('scalar.url');
Expand Down

0 comments on commit 09aab05

Please sign in to comment.