Merge pull request #2 from arcestia/add-local-blog

add local blog & clean up

posts/2018/2018-03-27-New-Blog.md

@@ -0,0 +1,10 @@
+---
+title: New Blog
+updated: 2018-03-27 23:39
+tags: blogging
+---
+
+# New blog
+Hallo sebelumnya blog template ini saya pakai untuk domain [callmejeff.me](https://callmejeff.me) dan karena domain akan expired jadi saya pakai kembali untuk domain [arcestia.com](https://arcestia.com).
+
+Semoga blog ini gak mati kayak yang sebelumnya.

posts/2018/2018-04-12-Startup-gagal-lagi.md

@@ -0,0 +1,10 @@
+---
+title: Startup Gagal? Kenapa?
+updated: 2018-04-12 01:50
+tags: startup,life-story
+---
+
+# Startup Gagal?
+Kegagalan dalam membuat startup bukan yang pertama kalinya bagi saya, untuk kedua kalinya gagal adalah hal yang membuat saya akan berpikir lebih keras lagi kedepannya. Problematika dalam awal-awal membentuk startup sangatlah keras, tak bisa dipungkiri banyak yang berguguran di tahun pertama. Pesaingan yang keras, Berkompetisi untuk mendapatkan seed funding (dana awal). Maupun setelahnya dengan angel investor hingga ke pra seri A ataupun seri A di tahun ke 2 atau ke 3. Selain itu sebuah Tim di dalam startup dituntut untuk kreatif dan berinovasi terus menurus agar apa yang dikerjakan terus bisa berkembang seiringnya perubahan kebutuhan dan minat di masyarakat atau pasar itu sendiri.
+
+Tidak ada kata terlalu mudah untuk berkarya, selama ada waktu gunakan terus untuk berkarya.

posts/2019/2019-05-10-new-chapter-begin-now.md

@@ -0,0 +1,30 @@
+---
+title: New Chapter Begin Now!
+updated: 2019-05-10 02:20
+tags: life-story
+---
+
+# Hidup Baru, Manusia Baru!
+
+Rabu, 8 Mei 2019 aku mendapatkan kabar bahwa Hasil Ujian A2 untuk Bahasa Jerman di Goethe Institute ku tertanya "Nicht Verstanden" alias tidak lulus. Itu artinya proses pembelajaranku selama 9 bulan ini ada yang tidak beres. Aku harus bisa berubah sepenuhnya, tidak hanya dari 1 atau 2 aspek saja. Tetapi secara total, mulai dari cara hidup, pola aktifitas, hingga metode pembelajaran.
+
+Beberapa tahun lalu saya pernah buat sebuah paper tentang metode efektifitas metode belajar sesuai dengan kepribadian seseorang. Karena ada orang yang mudah belajar secara visual, ada juga Kinestetik maupun secara auditory. Dan juga ada beberapa teknik yang digunakan sesuai dengan 3 golongan tersebut, oke tapi gak usah bahas itu. (btw ternyata paper itu unpublished, nanti kalau sempat di update lagi.)
+
+## Why now?
+
+Semua ini dilatar belakangi oleh beberapa kejadian selama minggu ini. Salah satunya diatas, tapi paling semua bermula dari Senin, 6 Mei 2019. Diriku kaget terbangun karena ada suara marah-marah dan nangis diluar. Ketika keluar saya mendapati Tante ku bicara sambil nada marah dan nangis ke Nenekku. Pendek kata akhirnya dia menceritakan tentang masalah dia dengan suami dan keluarganya..
+
+Singkat kata aku pernah publish semua yang diceritakan diweb lain dengan nama pena yang anonymouslah pokoknya. Intinya aja dia pokoknya dimanfaatkan oleh suaminya dan keluarga suaminya. Intinya keluarga ini mau hidup enaknya. Foya-foya terus padahal duit gak ada, ya mereka tinggal ngutang bayarpun kagak. Dst..
+
+Hari ini, 10 Mei 2019 nanti pagi sekitar jam 10 aku akan menemani Tanteku untuk kesana menjemput kedua Anaknya. Dan inilah kenapa semua kehidupanku akan berubah dan dirumah akan jadi banyak orang. Artinya ada perubahan dan penyesuaian lagi.
+
+## A New Chapter Begin.
+
+Kejadian diatas mendorongku bahwa Tuhan sungguh baik sekali kepadaku, Ia selalu mau menolong diriku Hambanya yang hina dan tak berdaya ini. Siapakah aku? Tapi akhirnya aku mengerti bahwa ini adalah kesempatan bahwa aku harus bisa buktikan aku layak, aku pantas. Pantas dan siap diberikan kekuasaan lebih lagi dari yang sekarang oleh Tuhan..
+
+walah.. jadi terlalu emosional begini deh. Tapi pada akhirnya kita harus selalu bergerak maju bukan mundur. Walaupun Jalan yang kita lewati itu gelap tetaplah percaya akan ada Terang diujung nanti. Yuk gunakan tagar #GoingForward #LetsMoveOn dan Jangan Lupa #IndonesiaMenulis. Ayo mulai ceritakan suaramu melalui tulisan-tulisan karena menulis itu menyenangkan loh.
+
+Jumat, 10 Mei 2019 <br>
+Laurensius Jeffrey
+
+Salam tulis #IndonesiaMenulis

posts/2020/2020-10-01-Adding-comments-via-utterances.md

@@ -0,0 +1,12 @@
+---
+title: Adding Comments (via Utterances)
+updated: 2020-10-01 00:00
+tags: blogging,features
+---
+
+
+I've gone back and forth about whether or not to have comments on the site. Most of all, I've liked having absolutely no server or external scripts on the site, and not having to moderate comments that are publicly facing on the site.
+
+I couldn't keep ignoring how awesome [Utterances](https://utteranc.es/ "Utterances") looks, an [open source project](https://github.com/utterance/utterances "open source project") by [Jeremy Danyow](https://github.com/jdanyow "Jeremy Danyow"). Not only does it look absolutely fantastic, but it took me about 15 minutes to set up completely on my Gatsby site.
+
+I made a [comments](https://github.com/arcestia/comments "comments") repo to host all the issues and responses. Connecting to the Utterances GitHub app is required to leave a comment through the site, though you can also comment directly through GitHub if the issue exists. I imagine spam and obnoxious comments will be much more rare through this system, and people will actually be able to participate in discussions and leave helpful comments once again.

posts/2023/2023-12-14-My-New-Adventure-Will-Begin-in-2024.md

@@ -0,0 +1,15 @@
+---
+title: My New Adventure Will Begin in 2024
+updated: 2023-12-14 00:00
+tags: blogging,life-story
+---
+
+As the new year approaches, I am thrilled to embark on a significant new chapter in my life: "My New Adventure Will Begin in 2024". This isn't just a change in the calendar; it's a transformative journey, a leap into a realm of new possibilities and experiences. The year 2024 marks the beginning of a journey that is not just about exploring the world but also about personal growth and pushing boundaries.
+
+One key aspect of this adventure is the integration of my personal brand, Skiddle.id. This brand represents my passion for creativity, innovation, and connecting with people on a deeper level. Skiddle.id is not just a brand; it's a reflection of my philosophy and approach to life. Through Skiddle.id, I aim to share insights, stories, and experiences that resonate with and inspire others.
+
+As I document this journey, I'll be sharing the highs and lows, the learnings, and the unforgettable moments through the lens of Skiddle.id. This adventure is an opportunity to not just explore new horizons but also to showcase what Skiddle.id stands for – creativity, adventure, and personal development.
+
+I invite you to join me in this journey, to share your thoughts, experiences, and insights. Your contributions are not just valuable but essential in shaping this adventure. Together, let's make this journey one of discovery, inspiration, and growth.
+
+Here's to a new adventure, a year of endless possibilities, and the exciting journey that 2024 promises to be, all under the banner of Skiddle.id!

posts/2024/2024-02-21-Guides-To-Git-For-Beginner.md

@@ -0,0 +1,45 @@
+---
+title: Guides To Git For Beginner
+updated: 2024-02-21 00:00
+tags: guides
+---
+
+## Introduction
+
+Welcome to the beginner's guide to Git! In this guide, we will cover the basics of Git and how to get started with version control in your projects.
+
+## What is Git?
+
+Git is a distributed version control system that allows multiple people to collaborate on a project while keeping track of changes made to the codebase. It provides a way to manage and track different versions of your code, making it easier to work on projects with others and revert to previous versions if needed.
+
+## Installation
+
+To get started with Git, you'll need to install it on your machine. Here are the steps to install Git:
+
+1. Visit the official Git website at [https://git-scm.com/](https://git-scm.com/) and download the appropriate version for your operating system.
+2. Run the installer and follow the on-screen instructions to complete the installation process.
+3. Once the installation is complete, open a terminal or command prompt and type `git --version` to verify that Git has been installed successfully.
+
+## Basic Git Commands
+
+Git provides a set of commands that you can use to interact with your code repository. Here are some of the basic Git commands you'll need to know:
+
+- `git init`: Initializes a new Git repository in your project directory.
+- `git add <file>`: Adds a file to the staging area, ready to be committed.
+- `git commit -m "<message>"`: Commits the changes in the staging area to the repository with a descriptive message.
+- `git status`: Shows the current status of your repository, including any changes that have been made.
+- `git log`: Displays a log of all the commits that have been made in the repository.
+
+## Branching and Merging
+
+One of the powerful features of Git is the ability to create branches, which allow you to work on different features or bug fixes without affecting the main codebase. Here's how you can create and merge branches in Git:
+
+- `git branch <branch-name>`: Creates a new branch with the specified name.
+- `git checkout <branch-name>`: Switches to the specified branch.
+- `git merge <branch-name>`: Merges the changes from the specified branch into the current branch.
+
+## Conclusion
+
+Congratulations! You now have a basic understanding of Git and how to get started with version control in your projects. Remember to practice using Git regularly to become more comfortable with its commands and workflows.
+
+Happy coding!

src/app/components/link.tsx

@@ -8,7 +8,7 @@ export function Link({
   children: React.ReactNode
 }) {
   return (
-    <a className="text-500 underline" href={href}>
+    <a className="text-500" href={href}>
       {children}
     </a>
   )

src/app/root.tsx

@@ -17,12 +17,14 @@ import { faRss } from '@fortawesome/free-solid-svg-icons'
 import tailwindStyles from './tailwind.css'
 import themeStyles from './styles/theme.css'
 import homeStyles from './styles/home.css'
+import blogStyles from './styles/blog.css'
 import { ThemeSwitcher } from './components/theme-switcher'
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: tailwindStyles },
   { rel: 'stylesheet', href: themeStyles },
   { rel: 'stylesheet', href: homeStyles },
+  { rel: 'stylesheet', href: blogStyles },
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
   {
@@ -86,6 +88,24 @@ export default function App() {
         <main className="flex-1">
           <Outlet />
         </main>
+        <footer className="bg-neutral-100 dark:bg-neutral-800 py-8">
+          <div className="container mx-auto px-4">
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2 text-sm text-neutral-600 dark:text-neutral-400">
+              <span>&copy; {new Date().getFullYear()} Laurensius Jeffrey Chandra</span>
+              <span className="hidden sm:inline">•</span>
+              <span>
+                Built with{' '}
+                <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" className="text-accent-blue hover:underline">
+                  React
+                </a>
+                {' '}and{' '}
+                <a href="https://atproto.com/" target="_blank" rel="noopener noreferrer" className="text-accent-blue hover:underline">
+                  AT Protocol
+                </a>
+              </span>
+            </div>
+          </div>
+        </footer>
         <ScrollRestoration />
         <Scripts />
       </body>

src/app/routes/_index.tsx

@@ -3,21 +3,25 @@ import {json, MetaFunction} from '@remix-run/node'
 import {useLoaderData, NavLink, Link} from '@remix-run/react'
 import {getProfile} from '../../atproto'
 import {AppBskyActorDefs} from '@atproto/api'
-import { ThemeSwitcher } from '../components/theme-switcher';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBluesky, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';
-import { faRss } from '@fortawesome/free-solid-svg-icons';
-import { socialLinks } from '../../data/social-links';
-import { projects } from '../../data/projects';
-import { getPosts } from '../../atproto';
-import { externalLinks } from '../../data/external-links';
-import { fetchMediumFeed } from '../../utils/fetchMediumFeed';
-import { TypingText } from '../components/typing-text';
+import { ThemeSwitcher } from '../components/theme-switcher'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBluesky, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons'
+import { faRss } from '@fortawesome/free-solid-svg-icons'
+import { socialLinks } from '../../data/social-links'
+import { projects } from '../../data/projects'
+import { getPosts } from '../../atproto'
+import { externalLinks } from '../../data/external-links'
+import { fetchMediumFeed } from '../../utils/fetchMediumFeed'
+import { TypingText } from '../components/typing-text'
+import { getLocalPosts } from '../../utils/getLocalPosts'
 
 export const loader = async () => {
-  const profile = await getProfile()
-  const posts = await getPosts(undefined);
-  const mediumLinks = await fetchMediumFeed();
+  const [profile, posts, mediumLinks, localPosts] = await Promise.all([
+    getProfile(),
+    getPosts(undefined),
+    fetchMediumFeed(),
+    getLocalPosts()
+  ])
 
   // Filter out draft posts
   const postsFiltered = posts
@@ -28,24 +32,29 @@ export const loader = async () => {
       url: `/posts/${post.rkey}`,
       date: post.createdAt,
       rkey: post.rkey,
-    }));
+    }))
 
   // Combine all writing items and sort by date
   const allItems = [
     ...postsFiltered,
+    ...localPosts.map(post => ({
+      ...post,
+      url: `/blog/${post.year}/${post.slug}`,
+      type: 'local'
+    })),
     ...externalLinks,
     ...mediumLinks
-  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
   // Get only the latest 5 items
-  const latestWritings = allItems.slice(0, 5);
+  const latestWritings = allItems.slice(0, 5)
 
   return json({ profile, latestWritings })
 }
 
 export const meta: MetaFunction = () => {
   return [
-    {title: "It's Skiddle! 👋"},
+    {title: "It's Skiddle! "},
     {
       name: 'description',
       content: 'javascript, ATProto, decentralized social media',
@@ -113,6 +122,8 @@ export default function Index() {
             <div className="posts newspaper">
               {latestWritings.map((writing, index) => {
                 const isNew = index === 0;
+                const isExternal = writing.type === 'external';
+                const isLocal = writing.type === 'local';
                 const date = new Date(writing.date);
                 const formattedDate = date.toLocaleDateString('en-US', { 
                   year: 'numeric',
@@ -128,6 +139,9 @@ export default function Index() {
                         {isNew && <div className="new-post-pill">New!</div>}
                       </time>
                     </div>
+                    <p className="text-secondary text-sm italic">
+                      {isExternal ? writing.source : isLocal ? 'Local Blog' : 'Atprotoblog'}
+                    </p>
                   </Link>
                 );
               })}
@@ -193,13 +207,6 @@ export default function Index() {
             ))}
           </div>
         </section>
-        <footer className="bg-neutral-100 dark:bg-neutral-800 py-6">
-          <div className="container mx-auto px-4">
-            <p className="text-center text-neutral-600 dark:text-neutral-400">
-              2023 Skiddle's Blog. All rights reserved.
-            </p>
-          </div>
-        </footer>
       </main>
     </div>
   )