Readme local storage (octokatherine#92)

Co-authored-by: Saurabh Chaturvedi <[email protected]>

components/EditorColumn.js

@@ -37,16 +37,24 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
     <div className="w-1/2 px-3 full-screen">
       <h3 className="border-transparent text-emerald-500 whitespace-nowrap px-1 border-b-2 font-medium text-sm focus:outline-none">
         {t('editor-column-editor')}
-        <button
-          onClick={toggleTheme}
-          aria-label="Color Mode"
-          className="toggle-dark-mode focus:outline-none transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none"
-        >
-          <img className="w-auto h-8 mr-2" src={toggleState.img} />
-        </button>
+        {focusedSectionSlug != 'noEdit' ? (
+          <button
+            onClick={toggleTheme}
+            aria-label="Color Mode"
+            className="toggle-dark-mode focus:outline-none transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none"
+          >
+            <img className="w-auto h-8 mr-2" src={toggleState.img} />
+          </button>
+        ) : (
+          <button />
+        )}
       </h3>
 
-      {focusedSectionSlug ? (
+      {focusedSectionSlug == 'noEdit' ? (
+        <p className="font-sm text-emerald-500 max-w-[28rem] text-center mx-auto mt-10">
+          {t('editor-select')}
+        </p>
+      ) : (
         <Editor
           wrapperClassName="rounded-sm border border-gray-500"
           className="full-screen" // By default, it fully fits with its parent
@@ -62,10 +70,6 @@ export const EditorColumn = ({ focusedSectionSlug, templates, setTemplates }) =>
             lineNumbers: false,
           }}
         />
-      ) : (
-        <p className="font-sm text-emerald-500 max-w-[28rem] text-center mx-auto mt-10">
-          {t('editor-select')}
-        </p>
       )}
     </div>
   )

components/PreviewColumn.js

@@ -6,6 +6,7 @@ import { useTranslation } from 'next-i18next'
 const gfm = require('remark-gfm')
 export const PreviewColumn = ({ selectedSectionSlugs, getTemplate }) => {
   const [selectedTab, setSelectedTab] = useState('rendered')
+  selectedSectionSlugs = [...new Set(selectedSectionSlugs)]
   const markdown = selectedSectionSlugs.reduce((acc, section) => {
     const template = getTemplate(section)
     return `${acc}${template.markdown}`

components/SectionsColumn.js

@@ -16,6 +16,7 @@ import {
 
 import { SortableItem } from './SortableItem'
 import { useTranslation } from 'next-i18next'
+import { useEffect, useState } from 'react'
 
 export const SectionsColumn = ({
   selectedSectionSlugs,
@@ -33,12 +34,48 @@ export const SectionsColumn = ({
     })
   )
 
+  const [pageRefreshed, setpageRefreshed] = useState(false)
+  const [addAction, setAddAction] = useState(false)
+  const [currentSlugList, setCurrentSlugList] = useState([])
+  const [slugsFromPreviousSession, setSlugsFromPreviousSession] = useState([])
+
+  useEffect(() => {
+    var slugsFromPreviousSession =
+      localStorage.getItem('current-slug-list') == null
+        ? 'title-and-description'
+        : localStorage.getItem('current-slug-list')
+    setSlugsFromPreviousSession(slugsFromPreviousSession)
+    if (slugsFromPreviousSession.length > 0) {
+      setpageRefreshed(true)
+      let slugList = []
+
+      var hasMultipleSlugsFromPrevSession = slugsFromPreviousSession.indexOf(',') > -1
+      hasMultipleSlugsFromPrevSession
+        ? (slugList = slugsFromPreviousSession.split(','))
+        : slugList.push(slugsFromPreviousSession)
+      slugList.forEach(function (entry) {
+        setSectionSlugs((prev) => prev.filter((s) => s != entry))
+      })
+      setCurrentSlugList(slugList)
+      setSelectedSectionSlugs(slugList)
+      setFocusedSectionSlug(currentSlugList[0])
+      localStorage.setItem('current-focused-slug', slugList[0])
+    }
+  }, [])
+
   const onAddSection = (e, section) => {
+    localStorage.setItem('current-focused-slug', section)
+    setpageRefreshed(false)
+    setAddAction(true)
     setSectionSlugs((prev) => prev.filter((s) => s !== section))
     setSelectedSectionSlugs((prev) => [...prev, section])
-    setFocusedSectionSlug(section)
+    setFocusedSectionSlug(localStorage.getItem('current-focused-slug'))
   }
 
+  useEffect(() => {
+    localStorage.setItem('current-slug-list', selectedSectionSlugs)
+  }, [selectedSectionSlugs])
+
   const handleDragEnd = (event) => {
     const { active, over } = event
     if (active.id !== over.id) {
@@ -56,18 +93,23 @@ export const SectionsColumn = ({
     setSelectedSectionSlugs((prev) => prev.filter((s) => s !== sectionSlug))
     setSectionSlugs((prev) => [...prev, sectionSlug])
     setFocusedSectionSlug(null)
+    localStorage.setItem('current-focused-slug', 'noEdit')
   }
 
+  useEffect(() => {
+    setFocusedSectionSlug(localStorage.getItem('current-focused-slug'))
+  }, [focusedSectionSlug])
+
   const { t } = useTranslation('editor')
 
-  const alphabetizedSectionSlugs = sectionSlugs.sort()
+  let alphabetizedSectionSlugs = sectionSlugs.sort()
 
   return (
     <div className="sections w-80">
-      <h3 className="border-transparent text-emerald-500 whitespace-nowrap px-1 border-b-2 font-medium text-sm focus:outline-none">
+      <h3 className="px-1 text-sm font-medium border-b-2 border-transparent text-emerald-500 whitespace-nowrap focus:outline-none">
         {t('section-column-section')}
       </h3>
-      <div className="full-screen overflow-y-scroll px-3 pr-4">
+      <div className="px-3 pr-4 overflow-y-scroll full-screen">
         {selectedSectionSlugs.length > 0 && (
           <h4 className="mb-3 text-xs leading-6 text-gray-900">{t('section-column-click-edit')}</h4>
         )}
@@ -78,17 +120,22 @@ export const SectionsColumn = ({
             onDragEnd={handleDragEnd}
             modifiers={[restrictToVerticalAxis]}
           >
-            <SortableContext items={selectedSectionSlugs} strategy={verticalListSortingStrategy}>
-              {selectedSectionSlugs.map((s) => (
-                <SortableItem
-                  key={s}
-                  id={s}
-                  section={getTemplate(s)}
-                  focusedSectionSlug={focusedSectionSlug}
-                  setFocusedSectionSlug={setFocusedSectionSlug}
-                  onDeleteSection={onDeleteSection}
-                />
-              ))}
+            <SortableContext items={selectedSectionSlugs}>
+              {
+                (pageRefreshed || addAction
+                  ? (selectedSectionSlugs = [...new Set(selectedSectionSlugs)])
+                  : ' ',
+                selectedSectionSlugs.map((s) => (
+                  <SortableItem
+                    key={s}
+                    id={s}
+                    section={getTemplate(s)}
+                    focusedSectionSlug={focusedSectionSlug}
+                    setFocusedSectionSlug={setFocusedSectionSlug}
+                    onDeleteSection={onDeleteSection}
+                  />
+                )))
+              }
             </SortableContext>
           </DndContext>
         </ul>
@@ -98,19 +145,34 @@ export const SectionsColumn = ({
           </h4>
         )}
         <ul className="mb-12 space-y-3">
-          {alphabetizedSectionSlugs.map((s) => (
-            <li key={s}>
-              <button
-                className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 w-full h-full flex items-center py-2 pl-3 pr-6 bg-white rounded-md shadow cursor-pointer block"
-                type="button"
-                onClick={(e) => onAddSection(e, s)}
-              >
-                <span>{getTemplate(s).name}</span>
-              </button>
-            </li>
-          ))}
+          {
+            (pageRefreshed && slugsFromPreviousSession.indexOf('title-and-description') == -1
+              ? sectionSlugs.push('title-and-description')
+              : ' ',
+            (alphabetizedSectionSlugs = sectionSlugs.sort()),
+            pageRefreshed || addAction
+              ? (alphabetizedSectionSlugs = [...new Set(alphabetizedSectionSlugs)])
+              : ' ',
+            alphabetizedSectionSlugs.map((s) => (
+              <li key={s}>
+                <button
+                  className="flex items-center block w-full h-full py-2 pl-3 pr-6 bg-white rounded-md shadow cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
+                  type="button"
+                  onClick={(e) => onAddSection(e, s)}
+                >
+                  <span>{getTemplate(s).name}</span>
+                </button>
+              </li>
+            )))
+          }
         </ul>
       </div>
     </div>
   )
 }
+
+function removeByIndex(array, index) {
+  return array.filter(function (el, i) {
+    return index !== i
+  })
+}

components/SortableItem.js

@@ -10,6 +10,7 @@ export function SortableItem(props) {
   }
 
   const onClickSection = () => {
+    localStorage.setItem('current-focused-slug', props.id)
     props.setFocusedSectionSlug(props.id)
   }
 

data/section-templates-en_EN.js

@@ -214,11 +214,23 @@ Add badges from somewhere like: [shields.io](https://shields.io/)
   },
   {
     slug: 'authors',
-    name: 'Authors and Acknowledgement',
+    name: 'Authors',
     markdown: `
-## Authors and Acknowledgement
+## Authors
 
-- [@katherinepeterson](https://www.github.com/katherinepeterson) for development and design.
+- [@katherinepeterson](https://www.github.com/katherinepeterson)
+
+  `,
+  },
+  {
+    slug: 'acknowledgement',
+    name: 'Acknowledgements',
+    markdown: `
+## Acknowledgements
+
+ - [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
+ - [Awesome README](https://github.com/matiassingers/awesome-readme)
+ - [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
 
   `,
   },

pages/editor.js

@@ -25,23 +25,32 @@ export default function Editor({ sectionTemplate }) {
   }
 
   useEffect(() => {
-    const section = 'title-and-description'
-    setSectionSlugs((prev) => prev.filter((s) => s !== section))
-    setSelectedSectionSlugs((prev) => [...prev, section])
-    setFocusedSectionSlug(section)
+    setFocusedSectionSlug(null)
   }, [])
 
   useEffect(() => {
     setIsMobile(/Mobi|Android/i.test(navigator.userAgent))
   }, [])
 
+  useEffect(() => {
+    let currentSlugList = localStorage.getItem('current-slug-list')
+    if (
+      currentSlugList.indexOf('title-and-description') == -1 &&
+      selectedSectionSlugs.indexOf('title-and-description') > -1
+    ) {
+      selectedSectionSlugs.splice(selectedSectionSlugs.indexOf('title-and-description'), 1)
+    }
+    setFocusedSectionSlug(localStorage.getItem('current-slug-list').split(',')[0])
+    localStorage.setItem('current-slug-list', selectedSectionSlugs)
+  }, [selectedSectionSlugs])
+
   return (
     <>
       {isMobile ? (
         <div className="p-3">
           <div className="bg-white shadow rounded-lg mt-2.5">
             <div className="px-4 py-5 sm:p-6">
-              <h3 className="max-w-full text-lg text-center font-medium leading-6 text-gray-900">
+              <h3 className="max-w-full text-lg font-medium leading-6 text-center text-gray-900">
                 {t('editor-desktop-optimized')}
               </h3>
               <div className="max-w-full mt-2 text-sm text-center text-gray-500">

public/locales/tur/common.json

@@ -13,4 +13,4 @@
   "italian": "İtalyanca",
   "turkish": "Türkçe",
   "translation-error": "Hatalı Çeviri?"
-}
+}