Layout update (#30)

* docs: remove docs folder

* docs: add README

* v0.4.0

* chore(release): 0.4.1

* > Gitignore updated at 2023-08-09 16:39:41

* chore(release): 0.4.2

* add exports-to-package-json and update scripts

* chore(release): 0.4.3

* fix: add-exports-to-package-json

* chore(release): 0.4.4

* fix: typo

* chore(release): 0.4.5

* fix: scrolling problem in layout by using afterNavigate()

* docs: add Paging

* chore(release): 0.4.6

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.6](https://github.com/themesberg/flowbite-svelte-blocks/compare/v0.4.5...v0.4.6) (2023-08-11)
+
+
+### Bug Fixes
+
+* scrolling problem in layout by using afterNavigate() ([673354b](https://github.com/themesberg/flowbite-svelte-blocks/commit/673354b67b17e9ecd3eb0b5b0e0ff67aea4d46a4))
+
 ### [0.4.5](https://github.com/themesberg/flowbite-svelte-blocks/compare/v0.4.4...v0.4.5) (2023-08-10)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte-blocks",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Flowbite blocks components for Svelte",
   "author": {
     "name": "Shinichi Okada",

src/routes/+layout.js

@@ -0,0 +1,10 @@
+/** @type {import('./$types').LayoutLoad} */
+export const load = async ({ fetch }) => {
+  try {
+    const response = await fetch('/api');
+
+    return { posts: await response.json() };
+  } catch (error) {
+    console.error(`Error in load function for /: ${error}`);
+  }
+};

src/routes/+layout.svelte

@@ -36,8 +36,6 @@
   let divClass = 'w-full ml-auto lg:block lg:w-auto order-1 lg:order-none';
   let ulClass =
     'flex flex-col py-3 my-4 lg:flex-row lg:my-0 text-sm font-medium text-gray-900 dark:text-gray-300 gap-4';
-  let btnClass =
-    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2 ml-2';
 </script>
 
 <div class="flex flex-col min-h-screen bg-white dark:bg-gray-900">

src/routes/+page.server.ts

@@ -11,7 +11,7 @@ export const load = async ({ fetch }) => {
     const npm = await fetch(`https://api.npmjs.org/downloads/point/2020-01-01:${today}/flowbite-svelte-blocks`).then(json);
     const discord = await fetch('https://discord.com/api/v9/invites/4eeurUVvTy?with_counts=true&with_expiration=true').then(json);
 
-    // console.log('from page.server: ', discord)
+    // console.log('from page.server: ', posts)
     return { posts, github, npm, discord };
   } catch (error) {
     console.error(`Error in load function for /: ${error}`);

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { MetaTag } from './utils';
   import {
     AdvancedTable,
@@ -23,8 +23,8 @@
     CrudUpdateModal,
     Cta,
     DashboardFooter,
-    DashboardNavbar,
-    DropdownFilter,
+    Navbar,
+    Filter,
     FacetedSearchDrawerSection,
     FacetedSearchModalSection,
     Faqsection,
@@ -40,11 +40,9 @@
     Popupsection,
     Portfoliosection,
     Pricingsection,
-    ProjectPortfolioSection,
     RegisterFormsection,
     RelatedArticle,
     ResetPasswordFormsection,
-    Schedulesection,
     SideNavigation,
     SocialProofsection,
     Teamsection,
@@ -104,8 +102,8 @@
             <CrudUpdateModal />
             <Cta />
             <DashboardFooter />
-            <DashboardNavbar />
-            <DropdownFilter />
+            <Navbar />
+            <Filter />
             <FacetedSearchDrawerSection />
             <FacetedSearchModalSection />
             <Faqsection />
@@ -121,11 +119,9 @@
             <Popupsection />
             <Portfoliosection />
             <Pricingsection />
-            <ProjectPortfolioSection />
             <RegisterFormsection />
             <RelatedArticle />
             <ResetPasswordFormsection />
-            <Schedulesection />
             <SideNavigation />
             <SocialProofsection />
             <Teamsection />

src/routes/application/+page.md

@@ -21,10 +21,10 @@ description: Get started with a collection of free and premium Tailwind CSS UI c
     CrudUpdateForm,
     CrudUpdateModal,
     DashboardFooter,
-    DashboardNavbar,
-    DropdownFilter,
     FacetedSearchDrawerSection,
     FacetedSearchModalSection,
+    Filter,
+    Navbar,
     SideNavigation,
     TableFooter,
     TableHeader
@@ -34,7 +34,6 @@ description: Get started with a collection of free and premium Tailwind CSS UI c
 <section class="pb-8 bg-white dark:bg-gray-900 lg:pb-24" id="components">
   <div class="px-4 mx-auto max-w-8xl lg:text-center">
     <div class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-2 xl:grid-cols-3">
-      <TableHeader />
       <AdvancedTable />
       <CrudCreateDrawer />
       <CrudCreateForm />
@@ -48,12 +47,13 @@ description: Get started with a collection of free and premium Tailwind CSS UI c
       <CrudUpdateForm />
       <CrudUpdateModal />
       <DashboardFooter />
-      <DashboardNavbar />
-      <DropdownFilter />
+      <Navbar />
+      <Filter />
       <FacetedSearchDrawerSection />
       <FacetedSearchModalSection />
       <SideNavigation />
       <TableFooter />
+      <TableHeader />
     </div>
   </div>
 </section>

src/routes/application/[slug]/+page.js

@@ -1,8 +1,12 @@
+/** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
   const post = await import(`../${params.slug}.md`);
+  const { title, dir } = post.metadata;
   const content = post.default;
 
   return {
-    content
+    content,
+    title,
+    dir
   };
 }

src/routes/application/[slug]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
   export let data: PageData;
-  // console.log('data: ', data);
 </script>
 
 <svelte:component this={data.content} />

src/routes/layouts/+page.svelte

@@ -8,6 +8,7 @@
 <script>
   import MetaTag from '../utils/MetaTag.svelte';
   import SectionHeader from '../utils/SectionHeader.svelte';
+  import Paging from '../utils/Paging.svelte';
 
   export let /** @type {string} */ title;
   export let /** @type {string} */ breadcrumb_title;
@@ -26,6 +27,7 @@
 <SectionHeader category={dir} {breadcrumb_title} {title} {description} />
 <div id="mainContent" class="px-4 mx-auto max-w-8xl py-10">
   <slot />
+  <Paging />
 </div>
 
 

src/routes/marketing/+page.md

@@ -15,6 +15,8 @@ description: Get started with a large collection of free and premium UI componen
     Contentsection,
     CookieConsentsection,
     Cta,
+    CustomerLogos,
+    EventSchedule,
     Faqsection,
     Featuresection,
     Footersection,
@@ -26,11 +28,10 @@ description: Get started with a large collection of free and premium UI componen
     Page404section,
     Page500section,
     Popupsection,
+    Portfoliosection,
     Pricingsection,
-    ProjectPortfolioSection,
     RegisterFormsection,
     ResetPasswordFormsection,
-    Schedulesection,
     SocialProofsection,
     Teamsection,
     Testimonialsection,
@@ -41,29 +42,30 @@ description: Get started with a large collection of free and premium UI componen
 <section class="pb-8 bg-white dark:bg-gray-900 lg:pb-24" id="components">
   <div class="px-4 mx-auto max-w-8xl lg:px-4 lg:text-center">
     <div class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-2 xl:grid-cols-3">
+      <Page404section />
+      <Page500section />
       <AccountRecoverysection />
       <Bannersection />
       <Blogsection />
       <ContactFormsection />
       <Contentsection />
       <CookieConsentsection />
       <Cta />
-      <Herosection />
+      <CustomerLogos />
+      <EventSchedule />
       <Faqsection />
       <Featuresection />
       <Footersection />
       <Headersection />
+      <Herosection />
       <LoginFormsection />
       <Maintenancesection />
       <Newslettersection />
-      <Page404section />
-      <Page500section />
       <Popupsection />
+      <Portfoliosection />
       <Pricingsection />
-      <ProjectPortfolioSection />
       <RegisterFormsection />
       <ResetPasswordFormsection />
-      <Schedulesection />
       <SocialProofsection />
       <Teamsection />
       <Testimonialsection />

src/routes/marketing/[slug]/+page.js

@@ -1,3 +1,4 @@
+/** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
   const post = await import(`../${params.slug}.md`);
   const { title, dir } = post.metadata;

src/routes/publisher/[slug]/+page.js

@@ -1,8 +1,11 @@
 export async function load({ params }) {
   const post = await import(`../${params.slug}.md`);
+  const { title, dir } = post.metadata;
   const content = post.default;
 
   return {
-    content
+    content,
+    title,
+    dir
   };
 }

src/routes/sections/index.ts

@@ -12,8 +12,8 @@ export { default as CrudUpdateDrawer } from './application/CrudUpdateDrawer.svel
 export { default as CrudUpdateForm } from './application/CrudUpdateForm.svelte';
 export { default as CrudUpdateModal } from './application/CrudUpdateModal.svelte';
 export { default as DashboardFooter } from './application/DashboardFooter.svelte';
-export { default as DashboardNavbar } from './application/DashboardNavbar.svelte';
-export { default as DropdownFilter } from './application/DropdownFilter.svelte';
+export { default as Navbar } from './application/Navbar.svelte';
+export { default as Filter } from './application/Filter.svelte';
 export { default as FacetedSearchDrawerSection } from './application/FacetedSearchDrawerSection.svelte';
 export { default as FacetedSearchModalSection } from './application/FacetedSearchModalSection.svelte';
 export { default as SideNavigation } from './application/SideNavigation.svelte';
@@ -28,7 +28,8 @@ export { default as ContactFormsection } from './marketing/ContactFormsection.sv
 export { default as Contentsection } from './marketing/Contentsection.svelte';
 export { default as CookieConsentsection } from './marketing/CookieConsentsection.svelte';
 export { default as Cta } from './marketing/Cta.svelte';
-export { default as CustomerLogo } from './marketing/CustomerLogo.svelte';
+export { default as CustomerLogos } from './marketing/CustomerLogos.svelte';
+export { default as EventSchedule } from './marketing/EventSchedule.svelte';
 export { default as Faqsection } from './marketing/Faqsection.svelte';
 export { default as Featuresection } from './marketing/Feature.svelte';
 export { default as Footersection } from './marketing/Footersection.svelte';
@@ -42,10 +43,8 @@ export { default as Page500section } from './marketing/Page500section.svelte';
 export { default as Popupsection } from './marketing/Popupsection.svelte';
 export { default as Portfoliosection } from './marketing/Portfoliosection.svelte';
 export { default as Pricingsection } from './marketing/Pricing.svelte';
-export { default as ProjectPortfolioSection } from './marketing/ProjectPortfolioSection.svelte';
 export { default as RegisterFormsection } from './marketing/RegisterFormsection.svelte';
 export { default as ResetPasswordFormsection } from './marketing/ResetPasswordFormsection.svelte';
-export { default as Schedulesection } from './marketing/Schedulesection.svelte';
 export { default as SocialProofsection } from './marketing/SocialProofsection.svelte';
 export { default as Teamsection } from './marketing/Teamsection.svelte';
 export { default as Testimonialsection } from './marketing/Testimonialsection.svelte';

src/routes/sections/marketing/Schedulesection.svelte → src/routes/sections/marketing/EventSchedule.svelte

@@ -6,10 +6,7 @@
   >
     <div class="text-left">
       <h2 class="flex items-center text-base font-medium text-gray-900 dark:text-white">
-        Event Schedule <span
-          class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 rounded-lg dark:bg-gray-600 dark:text-blue-400 border border-blue-400 ml-2"
-          >New</span
-        >
+        Event Schedule
       </h2>
       <p class="text-sm text-gray-500 dark:text-gray-400">1 free component</p>
     </div>

src/routes/utils/Paging.svelte

@@ -10,16 +10,20 @@
     url,
     params: { slug }
   } = $page;
-
-  console.log(data.posts)
-
+  // two kinds of data. One from src/routes/+layout.js with posts
+  // one from src/routes/applications(marketing, examples, publisher)/[slug]/+page.js content, title, dir
+  // console.log('data.dir: ',data.dir)
+  // console.log('data: ',data)
+  
   const components = Object.values(data.posts)
     .flatMap(identity)
     // .filter((x) => x.meta.dir === data.dir)
     .filter((x) => x.meta && x.meta.dir === data.dir)
-    .map(({ path, meta }) => ({ path, name: meta.component_title }));
+    .map(({ path, meta }) => ({ path, name: meta.breadcrumb_title }));
+  // console.log('components: ', components )
 
   const index = components.findIndex((x) => x.path === '/' + slug);
+  // console.log('index: ', index)
 
   function sibling(next: boolean) {
     const i = next ? index + 1 : index - 1,
@@ -47,6 +51,7 @@
       </div>
       {#if index < components.length - 1}
         {@const { name, href } = sibling(true)}
+
         <PaginationItem {href} class="flex items-center gap-2.5 hover:text-primary-700 dark: dark:hover:text-primary-700">
           {name}
           <ArrowRight />

src/routes/utils/fetchPost.ts

@@ -19,7 +19,7 @@ const sortByList = (order: string[]) => (a: [string, any], b: [string, any]) =>
 
 export const fetchMarkdownPosts = async () => {
   const applicationFiles = import.meta.glob<Mdsvex>('/src/routes/application/*.md');
-  const exampleFiles = import.meta.glob<Mdsvex>('/src/routes/examples/*.md');
+  const exampleFiles = import.meta.glob<Mdsvex>('/src/routes/example/*.md');
   const marketingFiles = import.meta.glob<Mdsvex>('/src/routes/marketing/*.md');
   const publisherFiles = import.meta.glob<Mdsvex>('/src/routes/publisher/*.md');