Skip to content

Commit

Permalink
feat: setup new layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jessy-BAER
Jessy-BAER committed Feb 26, 2023
1 parent 1f1cae7 commit a6d116c
Show file tree
Hide file tree
Showing 16 changed files with 999 additions and 2,817 deletions.
849 changes: 849 additions & 0 deletions _data/companies_using_jhipster.json
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions _data/header_items.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[
{ "link": "/docs", "pageId": "docs", "content": "Docs" },
{ "link": "/docs", "pageId": "marketplace", "content": "Marketplace" },
{ "link": "/docs", "pageId": "jdl_studio", "content": "JDL Studio" },
{ "link": "/docs", "pageId": "jhipster_online", "content": "Jhipster Online" },
{ "link": "/team", "pageId": "team", "content": "Team" },
{ "link": "/docs", "pageId": "english", "content": "English <i class=\"fa fa-language\" ></i>" }
]
4 changes: 2 additions & 2 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer class="bg-gray-900">
<footer class="bg-white dark:bg-gray-900">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex h-16 flex-1 items-center justify-between">
<div class="text-gray-400 text-sm font-medium">
<div class="text-gray-600 dark:text-gray-400 text-sm font-medium">
© JHipster 2013-2023. All rights reserved.
</div>
</div>
Expand Down
191 changes: 75 additions & 116 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="sticky top-0 z-50 bg-gray-900">
<nav class="sticky top-0 z-50 bg-white dark:bg-gray-900" x-data="{ open: false }">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex h-16 flex-1 items-center justify-between">
<div class="flex-shrink-0">
Expand All @@ -7,89 +7,74 @@
<img
class="h-8 w-100"
src="{{ site.url }}/assets/images/logo/logo-jhipster.svg"
alt="Jhipster logo"
/>
alt="Jhipster logo" />
</a>
</div>

<div class="-mr-2 hidden md:flex">
<div class="ml-10 flex items-baseline space-x-2">
<a
href="{{ site.url }}/docs"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
{% if page.id == "docs" %}
aria-current="page"
{% endif %}
>Docs</a
>
<a
href="#"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
>Marketplace
</a>
<a
href="https://start.jhipster.tech/jdl-studio/"
target="_blank"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
>JDL Studio</a
>
<a
href="#"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
>Jhipster Online</a
>
<a
href="{{ site.url }}/team"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
{% if page.id == "team" %}
{% for header_item in site.data.header_items %}
<a
href="{{ site.url }}{{header_item.link}}"
class="MainMenuItem text-gray-600 dark:text-white px-3 py-2 rounded-md text-sm font-medium"
{% if page.id == header_item.pageId %}
aria-current="page"
{% endif %}
>Team</a
>
<a
href="{{ site.url }}/cn{{page.url}}"
class="MainMenuItem text-white px-3 py-2 rounded-md text-sm font-medium"
>English <i class="fa fa-language" ></i></a
>
{% endif %}>{{ header_item.content }}
</a>
{% endfor %}
<div>
<a
href="https://github.com/jhipster/generator-jhipster"
target="_blank"
rel="noopener"
class="text-white px-2 py-2 "
><i class="fa fa-github"></i></a
>
<a
href="https://www.youtube.com/c/JHipsterDevelopersAssociation"
target="_blank"
rel="noopener"
class="text-white px-2 py-2"
><i class="fa fa-youtube"></i></a
>
href="https://github.com/jhipster/generator-jhipster"
target="_blank"
rel="noopener"
class="text-gray-600 dark:text-white px-2 py-2 ">
<i class="fa fa-github"></i>
</a>
<a
rel="noopener"
class="text-white px-2 py-2"
><i class="fa fa-search"></i></a
>
href="https://www.youtube.com/c/JHipsterDevelopersAssociation"
target="_blank"
rel="noopener"
class="text-gray-600 dark:text-white px-2 py-2">
<i class="fa fa-youtube"></i>
</a>
<a rel="noopener" class="text-gray-600 dark:text-white px-2 py-2">
<i class="fa fa-search"></i>
</a>
</div>
<div>
<div class="flex">
<button
type="submit"
class="inline-flex justify-center rounded-md border border-transparent bg-brand-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
x-data="{
toggle: () => {
if (localStorage.theme === 'dark') {
localStorage.theme = 'light';
document.documentElement.classList.remove('dark');
} else {
localStorage.theme = 'dark';
document.documentElement.classList.add('dark');
}
},
}"
@click="toggle"
class="inline-flex justify-center rounded-md border border-transparent bg-brand-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
light/dark
</button>
</div>
<div>
<button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-brand-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
Get Started
</button>
</div>
</div>
</div>
<!-- Mobile menu button -->
<div class="-mr-2 flex md:hidden">
<div class="-mr-2 flex md:hidden" >
<button
type="button"
class="inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
aria-controls="mobile-menu"
aria-expanded="false"
>
@click="open = !open"
>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg
Expand All @@ -98,13 +83,11 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
aria-hidden="true">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg
Expand All @@ -113,79 +96,55 @@
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
aria-hidden="true">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>

<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="md:hidden" id="mobile-menu" x-show="open">
<div class="space-y-1 px-2 pt-1 pb-2 sm:px-3">
<a
href="#"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
aria-current="page"
>Docs</a
>
<a
href="#"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
>Marketplace</a
>
<a
href="https://start.jhipster.tech/jdl-studio/"
target="_blank"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
>JDL Studio</a
>
<a
href="#"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
>Jhipster Online</a
>
<a
href="#"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
>Team</a
>
<a
href="{{ site.url }}/cn{{page.url}}"
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium"
>English</a
>
<div class="flex">

{% for header_item in site.data.header_items %}
<a
href="{{ site.url }}{{header_item.link}}"
class="MainMenuItem text-gray-600 dark:text-white px-3 py-2 rounded-md text-base font-medium block"
{% if page.id == header_item.pageId %}
aria-current="page"
{% endif %}>{{ header_item.content }}
</a>
{% endfor %}
<div>
<a
href="https://github.com/jhipster/generator-jhipster"
target="_blank"
rel="noopener"
class="bg-gray-900 text-white px-3 py-2 rounded-md text-base font-medium"
>g</a
>
class="text-gray-600 dark:text-white px-2 py-2 ">
<i class="fa fa-github"></i>
</a>
<a
href="https://www.youtube.com/c/JHipsterDevelopersAssociation"
target="_blank"
rel="noopener"
class="bg-gray-900 text-white px-3 py-2 rounded-md text-base font-medium"
>y</a
>
class="text-gray-600 dark:text-white px-2 py-2">
<i class="fa fa-youtube"></i>
</a>
<a rel="noopener" class="text-gray-600 dark:text-white px-2 py-2">
<i class="fa fa-search"></i>
</a>
</div>
<div class="flex">
<button
type="submit"
class="flex-1 justify-center rounded-md border border-transparent bg-brand-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
>
<button type="submit" class="flex-1 justify-center rounded-md border border-transparent bg-brand-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
Get Started
</button>
</div>
</div>
</div>
<hr class="border-gray-700" />
</nav>
<hr class="border-gray-100 dark:border-gray-700" />
</nav>
29 changes: 27 additions & 2 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@

<!-- Font -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

<!-- Favicon with QHD -->
<link
rel="icon"
Expand All @@ -67,16 +68,40 @@
href="/images/logo/favicon-16x16.ico"
sizes="16x16"
/>

<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>

<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
</head>

<body>
<body class="h-screen">
<!-- Header -->
{% include header.html %}
<div class="bg-gray-900 shadow mx-auto h-screen">{{ content }}</div>
<div class="bg-gray-50 dark:bg-gray-900 mx-auto content-area">
{{ content }}
</div>
<!-- Footer -->
{% include footer.html %}

<!-- Javascript Libs -->
<script
src="https://kit.fontawesome.com/30a6a6999e.js"
crossorigin="anonymous"
></script>
<!-- <script src="//unpkg.com/alpinejs" defer></script> -->

<script type="text/javascript" src="{{ site.url }}/lib/js/ace.js"></script>
Expand Down
8 changes: 7 additions & 1 deletion assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@

@import "tailwindcss/utilities";

@layer utilities {
.content-area {
min-height: calc(100vh - theme(spacing.32));
}
}

@layer components {
.MainMenuItem {
position: relative;
}

.MainMenuItem:hover::after {
.MainMenuItem:hover:not([aria-current="page"])::after {
opacity: 1;
width: 2rem;
color: theme("colors.white");
Expand Down
Loading

0 comments on commit a6d116c

Please sign in to comment.