Déplacer «Sections supplémentaires» depuis Paramètres vers Pages

assets/scripts/components/screens/AtelierPages.svelte

@@ -8,16 +8,20 @@
     pages: any[] | undefined
     showArticles: boolean | undefined
     currentRepository: ScribouilliGitRepo
-    conflict: ScribouilliState["conflict"]
+    conflict: ScribouilliState['conflict']
+    blogEnabled: boolean
+    onBlogToggle: (activated: boolean) => void
   }
 
   let {
     buildStatus,
     pages,
     showArticles,
     currentRepository,
-    conflict
-  }: Props = $props();
+    conflict,
+    blogEnabled,
+    onBlogToggle,
+  }: Props = $props()
 </script>
 
 <ListContenu
@@ -30,6 +34,8 @@
   newContentButtonText="Nouvelle page"
   allowModification={true}
   {conflict}
+  {blogEnabled}
+  {onBlogToggle}
 />
 
 <style lang="scss">

assets/scripts/components/screens/Settings.svelte

@@ -8,7 +8,6 @@
     buildStatus: any
     theme: any
     deleteRepositoryUrl: any
-    blogEnabled: any
     showArticles: boolean | undefined
     currentRepository: any
   }
@@ -17,10 +16,9 @@
     buildStatus,
     theme = $bindable(),
     deleteRepositoryUrl,
-    blogEnabled = $bindable(),
     showArticles,
-    currentRepository
-  }: Props = $props();
+    currentRepository,
+  }: Props = $props()
 
   let notification = $state('')
 
@@ -55,16 +53,6 @@
     theme.css = e.target.value
   }
 
-  // @ts-ignore
-  const toggleBlog = e => {
-    dispatch('toggle-blog', { activated: e.target.checked })
-    if (e.target.checked) {
-      notification = 'Une section « Articles » a été ajoutée dans le menu'
-    } else {
-      notification = 'Les articles ont été masqués sur votre site'
-    }
-  }
-
   const mesCouleurs = [
     {
       id: 'vertBooteille',
@@ -110,19 +98,6 @@
 
     <div id="notifications">{notification}</div>
 
-    <div class="wrapper white-zone">
-      <h3>Sections supplémentaires</h3>
-
-      <label>
-        <input
-          type="checkbox"
-          bind:checked={blogEnabled}
-          onchange={toggleBlog}
-        />
-        Ajouter une page articles
-      </label>
-    </div>
-
     <div class="wrapper white-zone">
       <div>
         <h3>Couleur principale</h3>

assets/scripts/components/screens/intern/ListContenu.svelte

@@ -3,8 +3,8 @@
   import Skeleton from '../../Skeleton.svelte'
   import { makePageFrontMatter } from '../../../utils.ts'
   import ScribouilliGitRepo from '../../../scribouilliGitRepo.ts'
-  import type { FileContenu } from '../../../types/atelier.ts';
-  
+  import type { FileContenu } from '../../../types/atelier.ts'
+
   interface Props {
     buildStatus: any
     listContenu?: FileContenu[]
@@ -14,7 +14,9 @@
     showArticles: boolean | undefined
     currentRepository: ScribouilliGitRepo
     allowModification: boolean
-    conflict: ScribouilliState["conflict"]
+    conflict: ScribouilliState['conflict']
+    blogEnabled?: boolean
+    onBlogToggle?: (activated: boolean) => void
   }
 
   let {
@@ -26,16 +28,18 @@
     showArticles,
     currentRepository,
     allowModification,
-    conflict
-  }: Props = $props();
+    conflict,
+    blogEnabled,
+    onBlogToggle,
+  }: Props = $props()
 
   let repoName = $derived(currentRepository.repoName)
-  let account = $derived(currentRepository.owner) 
+  let account = $derived(currentRepository.owner)
   let modification = $state(false)
 
   const gitAgent = store.state.gitAgent
 
-  if(!gitAgent){
+  if (!gitAgent) {
     throw new TypeError('gitAgent is undefined')
   }
 
@@ -60,14 +64,16 @@
         )
       }
 
-      await gitAgent.commit(
-        'Changements menu',
-      )
+      await gitAgent.commit('Changements menu')
 
       await gitAgent.safePush()
     }
     modification = !modification
   }
+
+  const toggleBlog = (e: { target: EventTarget | null }) => {
+    onBlogToggle!((e.target as HTMLInputElement).checked)
+  }
 </script>
 
 <Skeleton {currentRepository} {buildStatus} {showArticles} {conflict}>
@@ -113,7 +119,9 @@
                 </div>
               {:else}
                 <a
-                  href="{atelierPrefix}?path={encodeURIComponent(contenu.path)}&repoName={repoName}&account={account}"
+                  href="{atelierPrefix}?path={encodeURIComponent(
+                    contenu.path,
+                  )}&repoName={repoName}&account={account}"
                 >
                   Modifier</a
                 >
@@ -132,6 +140,25 @@
         {/if}
       </div>
     </div>
+
+    {#if onBlogToggle}
+      <div class="wrapper white-zone">
+        <h3>Articles</h3>
+
+        <p>
+          Ajoute un lien "Articles" dans le menu. Celui-ci permet de créer et
+          lister une série de pages.
+        </p>
+
+        <button class="btn btn__medium" onclick={toggleBlog}>
+          {#if blogEnabled}
+            Enlever le lien "Articles" (~ 2min)
+          {:else}
+            Ajouter le lien "Articles" (~ 2min)
+          {/if}
+        </button>
+      </div>
+    {/if}
   </section>
 </Skeleton>
 
@@ -212,4 +239,8 @@
       margin: 0.2em 0;
     }
   }
+
+  .white-zone {
+    margin-top: 3rem;
+  }
 </style>

assets/scripts/routes/atelier-list-pages.ts

@@ -1,21 +1,77 @@
 import { replaceComponent } from '../routeComponentLifeCycle.svelte'
 import { setCurrentRepositoryFromQuerystring } from '../actions/current-repository.ts'
 import AtelierPages from '../components/screens/AtelierPages.svelte'
-import { showArticles } from '../actions/article'
+import { blogIndex, showArticles } from '../actions/article'
 import { Context } from 'page'
 import type { ScribouilliState } from '../store.ts'
+import { writeFileAndCommit, deleteFileAndCommit } from '../actions/file'
+import {
+  getCurrentRepoPages,
+  getCurrentRepoArticles,
+} from '../actions/current-repository.ts'
+import { handleErrors } from '../utils.ts'
+
+const blogMdContent = `---
+layout: page
+title: Articles
+permalink: /articles/
+blog_index: true
+---
+<aside>
+  S'abonner via le <a href="{{ '/feed.xml' | relative_url }}">flux RSS</a>
+  (<a href="https://flus.fr/carnet/a-quoi-servent-les-flux.html">c'est quoi ?</a>)
+</aside>
+
+{% for post in site.posts %}
+<article class="blog-item">
+  <h2>
+    {{ post.title }}
+  </h2>
+
+  <a href="{{post.url | relative_url}}"> Lire l'article <span aria-hidden="true">➞</span></a>
+</article>
+<hr />
+{% endfor %}
+`
 
 const mapStateToProps = (state: ScribouilliState) => {
-  if (!state.currentRepository) {
+  const blogFile = blogIndex(state)
+
+  const { currentRepository, gitAgent } = state
+  if (!gitAgent) {
+    throw new TypeError('gitAgent is undefined')
+  }
+  if (!currentRepository) {
     throw new TypeError('currentRepository is undefined')
   }
 
   return {
     pages: state.pages,
     buildStatus: state.buildStatus,
-    currentRepository: state.currentRepository,
+    currentRepository: currentRepository,
     showArticles: showArticles(state),
     conflict: state.conflict,
+    blogEnabled: blogFile !== undefined,
+    onBlogToggle: async (activated: boolean): Promise<void> => {
+      try {
+        if (activated) {
+          await writeFileAndCommit(
+            'blog.md',
+            blogMdContent,
+            'Activation du blog',
+          )
+        } else {
+          const blogPath = blogIndex(state) as string
+          await deleteFileAndCommit(blogPath, 'Désactivation du blog')
+        }
+        await getCurrentRepoArticles()
+        await getCurrentRepoPages()
+
+        gitAgent.safePush()
+      } catch (msg: any) {
+        handleErrors(msg)
+      }
+    },
   }
 }
 

assets/scripts/routes/settings.ts

@@ -3,47 +3,17 @@ import { replaceComponent } from '../routeComponentLifeCycle.svelte'
 import store, { type ScribouilliState } from '../store'
 import {
   getCurrentRepoPages,
-  getCurrentRepoArticles,
   setCurrentRepositoryFromQuerystring,
   saveCustomCSS,
 } from '../actions/current-repository.ts'
 import { handleErrors } from '../utils'
 import Settings from '../components/screens/Settings.svelte'
-import { writeFileAndCommit, deleteFileAndCommit } from '../actions/file'
-import { blogIndex, showArticles } from '../actions/article'
+import { showArticles } from '../actions/article'
 import { Context } from 'page'
 
-const blogMdContent = `---
-layout: page
-title: Articles
-permalink: /articles/
-blog_index: true
----
-<aside>
-  S'abonner via le <a href="{{ '/feed.xml' | relative_url }}">flux RSS</a>
-  (<a href="https://flus.fr/carnet/a-quoi-servent-les-flux.html">c'est quoi ?</a>)
-</aside>
-
-{% for post in site.posts %}
-<article class="blog-item">
-  <h2>
-    {{ post.title }}
-  </h2>
-
-  <a href="{{post.url | relative_url}}"> Lire l'article <span aria-hidden="true">➞</span></a>
-</article>
-<hr />
-{% endfor %}
-`
-
 function mapStateToProps(state: ScribouilliState) {
-  const blogFile = blogIndex(state)
   // TODO: this should probably be `state` not `store.state`
-  const { currentRepository, gitAgent } = store.state
-
-  if (!gitAgent) {
-    throw new TypeError('gitAgent is undefined')
-  }
+  const { currentRepository } = store.state
 
   if (!currentRepository) {
     throw new TypeError('currentRepository is undefined')
@@ -53,32 +23,11 @@ function mapStateToProps(state: ScribouilliState) {
     buildStatus: state.buildStatus,
     theme: state.theme,
     deleteRepositoryUrl: `${currentRepository.publicRepositoryURL}/settings#danger-zone`,
-    blogEnabled: blogFile !== undefined,
     showArticles: showArticles(state),
     currentRepository: state.currentRepository,
     onUpdateTheme: (theme: { css: string }): void => {
       saveCustomCSS(theme.css).catch(handleErrors)
     },
-    onToggleBlog: async (activated: boolean): Promise<void> => {
-      try {
-        if (activated) {
-          await writeFileAndCommit(
-            'blog.md',
-            blogMdContent,
-            'Activation du blog',
-          )
-        } else {
-          await deleteFileAndCommit('blog.md', 'Désactivation du blog')
-        }
-        await getCurrentRepoArticles()
-        await getCurrentRepoPages()
-
-        gitAgent.safePush()
-      } catch (msg) {
-        //@ts-ignore
-        handleErrors(msg)
-      }
-    },
   }
 }