Skip to content

Commit

Permalink
Adding latest updates and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tnylea
tnylea committed Oct 6, 2024
1 parent 05cf50e commit 1675094
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 42 deletions.
6 changes: 6 additions & 0 deletions collections/themes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"name" : "Anchor",
"cover" : "https://cdn.devdojo.com/images/august2024/wave-anchor-theme.jpeg",
"download" : "https://github.com/thedevdojo/wave/tree/main/resources/themes/anchor",
"preview" : "/wave/demo?theme=anchor",
"slug" : "anchor",
"description": "Anchor is the default theme available. This theme is clean with a sidebar app layout design.",
"repo" : "https://github.com/thedevdojo/wave",
Expand All @@ -12,6 +13,7 @@
"name" : "Blank",
"cover" : "https://cdn.devdojo.com/images/august2024/blank.jpeg",
"download" : "https://github.com/thedevdojo/blank/archive/refs/heads/main.zip",
"preview" : "/wave/demo?theme=blank",
"slug" : "blank",
"description": "This is a minimal blank theme that can be used to easily modify. It also contains a sidebar app layout.",
"repo" : "https://github.com/thedevdojo/wave",
Expand All @@ -21,6 +23,7 @@
"name" : "Cove",
"cover" : "https://cdn.devdojo.com/images/august2024/cove-cover.jpeg",
"download" : "https://github.com/thedevdojo/cove/archive/refs/heads/main.zip",
"preview" : "/wave/demo?theme=cove",
"slug" : "cove",
"description": "This blue colored theme is a good template for showcasing your SaaS. Top bar app layout",
"repo" : "https://github.com/thedevdojo/wave",
Expand All @@ -30,6 +33,7 @@
"name" : "Drift",
"cover" : "https://cdn.devdojo.com/images/september2024/drift-theme.jpeg",
"download" : "/wave/download/drift",
"preview" : "/wave/demo?theme=drift",
"slug" : "drift",
"description": "A clean and modern theme with a beautiful horizontal menu dashboard.",
"repo" : "https://github.com/thedevdojo/wave",
Expand All @@ -39,6 +43,7 @@
"name" : "Example",
"cover" : "https://raw.githubusercontent.com/thedevdojo/example/main/theme.jpg",
"download" : "https://github.com/thedevdojo/example/archive/refs/heads/main.zip",
"preview" : "https://github.com/thedevdojo/example/archive/refs/heads/main.zip",
"slug" : "example",
"description": "This is a simple starting point example theme.",
"repo" : "https://github.com/thedevdojo/wave",
Expand All @@ -48,6 +53,7 @@
"name" : "Fusion",
"cover" : "https://cdn.devdojo.com/images/september2024/fusion-cover.jpeg",
"download" : "/wave/download/fusion",
"preview" : "/wave/demo?theme=fusion",
"slug" : "fusion",
"description": "A modern and minimal dark theme for wave.",
"repo" : "https://github.com/thedevdojo/wave",
Expand Down
16 changes: 1 addition & 15 deletions includes/headerbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,4 @@
<header
x-data="{ themeOpen: false, menuOpen: false, theme: 'anchor', themeImage: 'anchor', collapsed: false, isTouchDevice: false }"
x-init="
iframe_src = demo_url + '?theme=' + theme;
$watch('theme', function(value){
iframe_src = demo_url + '?theme=' + theme;
themeOpen=false;
setTimeout(function(){
themeLoading=false;
}, 1500);
});
isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
"
class="relative z-[999999] ease-out duration-300" :class="{ '-mt-11' : collapsed }">
<header class="relative z-[999999] ease-out duration-300" :class="{ '-mt-11' : collapsed }">

<div x-show="themeOpen || menuOpen" x-on:click="menuOpen=false; themeOpen=false;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-20 bg-black/20 backdrop-blur" x-cloak></div>

Expand Down
34 changes: 33 additions & 1 deletion layouts/plain.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,39 @@
{tailwindcss}

</head>
<body class="w-screen overflow-hidden h-dvh" x-data="{ themeLoading:false, iframe_src: 'about:blank', demo_url: 'https://wavev3.devdojo.com', headerBarClasses: 'px-0' }">
<body class="w-screen overflow-hidden h-dvh"
x-data="{ themeOpen: false, menuOpen: false, theme: 'anchor', themeImage: 'anchor', collapsed: false, isTouchDevice: false, themeLoading:false, iframe_src: 'about:blank', demo_url: 'https://wavev3.devdojo.com', headerBarClasses: 'px-0' }"
x-init="
window.addEventListener('load', function() {
// Get the URL's query parameters
let urlParams = new URLSearchParams(window.location.search);
// console.log(urlParams);
// Get the value of the 'theme' parameter
let themeValue = urlParams.get('theme');
if(themeValue){
theme=themeValue;
}
iframe_src = demo_url + '?theme=' + theme;
// setTimeout(function(){
// $refs.iframe.contentWindow.location.reload(true);
// }, 2000);
isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
});
$watch('theme', function(value){
iframe_src = demo_url + '?theme=' + theme;
themeOpen=false;
setTimeout(function(){
themeLoading=false;
}, 1500);
});
">
{slot}
</body>
</html>
2 changes: 1 addition & 1 deletion pages/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<include src="headerbar.html"></include>

<iframe :src="iframe_src" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe>
<iframe id="iframe" x-ref="iframe" :src="iframe_src" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe>

<!-- <iframe src="https://wave.test" border="0" class="relative z-10 flex-1 w-screen bg-white h-100"></iframe> -->

Expand Down
1 change: 0 additions & 1 deletion pages/templates.html
View file

This file was deleted.

62 changes: 38 additions & 24 deletions pages/themes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ <h1 class="text-3xl font-bold sm:text-4xl text-neutral-950 dark:text-neutral-100
<div class="grid items-center justify-center w-full h-auto grid-cols-1 gap-6 mx-auto max-w-7xl sm:grid-cols-2 lg:grid-cols-3 md:gap-10">

<ForEach collection="themes" as="theme">
<div x-data @click="window.open('{theme.download}', '_blank')"
class="flex w-full overflow-hidden transition-all duration-75 ease-out border rounded-md cursor-pointer opacity-95 border-neutral-200/80 dark:border-neutral-800 sm:rounded-xl sm:shadow-sm group hover:opacity-100">
<div x-data
class="flex w-full overflow-hidden transition-all duration-75 ease-out border rounded-md opacity-95 border-neutral-200/80 dark:border-neutral-800 sm:rounded-xl sm:shadow-sm hover:opacity-100">
<div class="flex flex-col">
<div class="relative overflow-hidden">
<img src="{theme.cover}" class="w-full relative z-10 group-hover:scale-[1.02] transition-all ease-out duration-300 overflow-hidden h-auto">
<If condition="theme.access == 'pro'">
<span class="inline-flex absolute top-0 right-0 mr-2 mt-2 z-20 items-center gap-x-1.5 py-0.5 bg-blue-600 text-xs/5 text-white font-medium px-2 rounded-md">
<svg class="w-3 h-3 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
<span>Pro</span>
</span>
</If>
</div>
<div class="relative">
<div @click="window.open('{theme.preview}', '_blank')" class="relative w-full cursor-pointer group">
<div class="relative overflow-hidden">
<img src="{theme.cover}" class="w-full relative z-10 group-hover:scale-[1.02] transition-all ease-out duration-300 overflow-hidden h-auto">
<If condition="theme.access == 'pro'">
<span class="inline-flex absolute top-0 right-0 mr-2 mt-2 z-20 items-center gap-x-1.5 py-0.5 bg-blue-600 text-xs/5 text-white font-medium px-2 rounded-md">
<svg class="w-3 h-3 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/></svg>
<span>Pro</span>
</span>
</If>
</div>
<div class="flex items-center w-full p-5">

<div class="relative flex flex-col items-start justify-start h-auto space-y-2">
<h3 class="relative flex items-center -mt-px text-lg font-semibold leading-none text-neutral-800 dark:text-neutral-200 dark:group-hover:text-neutral-100 group-hover:text-neutral-900">
<span>{theme.name}</span>
Expand All @@ -34,19 +34,33 @@ <h3 class="relative flex items-center -mt-px text-lg font-semibold leading-none
<p class="text-sm text-black/60 dark:text-white/60 dark:group-hover:text-white/80 group-hover:text-black/80">{theme.description}</p>
</div>
</div>
</div>
<div class="relative">


<div class="flex justify-center p-3 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800">
<If condition="theme.slug != 'anchor'">
<button class="inline-flex z-10 justify-center px-3.5 py-2.5 w-full text-sm font-semibold text-white bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 hover:bg-white rounded-lg shadow-lg group hover:bg-black">
<span>Download {theme.name} Theme</span>
</button>
</If>
<If condition="theme.slug == 'anchor'">
<div class="px-3.5 py-2.5 w-full text-sm font-semibold text-center bg-white dark:bg-neutral-900 rounded-lg border dark:text-neutral-400 border-neutral-300 dark:border-neutral-700 border-dashed">
Default Theme Available in Wave
</div>
</If>
<div class="flex justify-center px-2.5 py-2 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800">
<div class="relative flex items-center w-full space-x-2">
<If condition="theme.slug != 'anchor'">
<button @click="window.open('{theme.download}', '_blank')" class="z-10 inline-flex justify-center items-center space-x-1.5 w-full px-3 py-2 text-sm font-semibold text-white rounded-md shadow-lg group bg-neutral-900 hover:bg-black">
<span>Download</span>
</button>
</If>
<If condition="theme.slug == 'anchor'">
<div class="flex items-center justify-center w-full px-3 py-2 text-sm font-semibold text-center bg-white border border-dashed rounded-md dark:bg-neutral-900 dark:text-neutral-400 border-neutral-300 dark:border-neutral-700">
<span>Default Theme</span>
</div>
</If>
<If condition="theme.slug != 'example'">
<button @click="window.open('{theme.preview}', '_blank')" class="flex items-center justify-center w-full group px-3 py-2 border border-neutral-200/60 space-x-1.5 text-sm font-medium text-center duration-300 ease-out rounded-md bg-white text-neutral-800">
<span class="duration-300 ease-out">Preview</span>
</button>
</If>
<If condition="theme.slug == 'example'">
<div class="flex items-center justify-center w-full group cursor-not-allowed px-3 py-2 border border-neutral-200/60 space-x-1.5 text-sm font-medium text-center duration-300 ease-out rounded-md bg-neutral-100 text-neutral-800">
<span class="duration-300 ease-out">No Preview</span>
</div>
</If>
</div>
</div>

</div>
Expand Down

0 comments on commit 1675094

Please sign in to comment.