Merge pull request #8 from jazzominy/posts

Posts
jazzominy · May 25, 2024 · 6c7aa18 · 6c7aa18
2 parents adba117 + e5514cf
commit 6c7aa18
Show file tree

Hide file tree

Showing 39 changed files with 1,405 additions and 334 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,11 +1,13 @@
+permalink: /:year/:month/:day/:title/
 defaults:
   - scope:
       path: ""
       type: "posts"
     values:
       layout: "post"
-      permalink: "/:title/"
   - scope:
       path: ""
     values:
-      layout: default
+      layout: default
+include:
+  - tags
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -6,7 +6,7 @@
 - name: Tags
   url: /tags/
   icon: fa-tags
-- name: Archive
+- name: Posts
   url: /archive/
   icon: fa-archive
 - name: About

diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html
@@ -0,0 +1,6 @@
+<nav class="breadcrumb" aria-label="Breadcrumb">
+	<span><a href="/">Home</a></span>
+	{% if page.title != "Home" %}
+		<span class="page-title">{{page.title}}</span>
+	{% endif %}
+</nav>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,13 +1,16 @@
 <aside id="sidebar" aria-label="sidebar">
-    <img class="pic" alt="" width="250" height="250" src="https://avatars.githubusercontent.com/u/1888304?v=4">
-    <nav>
+    <img class="pic" alt="Jasmine Hirpara" width="230" height="230" src="/assets/img/jh.jpg">
+    <div class="name">Jasmine Hirpara</div>
+	<nav>
 		<ul>
 			{% for item in site.data.navigation %}
 			<li>
 				<a href="{{ item.url }}"
 					class="{% if page.url == item.url %}active{% endif %}">
+					{% if page.url == item.url %}<span class="angle">&lt;</span>{% endif %}
 					<i class="fa-fw fas {{ item.icon }}"></i>
 					{{ item.name }}
+					{% if page.url == item.url %}<span class="angle">/&gt;</span>{% endif %}
 				</a>
 			</li>
 			{% endfor %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,23 +2,22 @@
 <html>
 	<head>
 		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="Jasmine Hirpara's personal website.">
+		<meta name="author" content="Jasmine Hirpara">
 		<title>{{ page.title }}</title>
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
-		<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 		<style>
 			body {
-				font-family: "Segoe UI", sans-serif;
-				text-shadow: 0 1px 3px rgba(0,0,0,.5);
 				background: repeating-linear-gradient(35deg, #263238, #263238 2px, #5588aa1a 0, #5588aa1a 4px);
-				background-color: #263238;
+				background-color: #253237;
 			}
-		  </style>
+		</style>
 		<link rel="stylesheet" href="/assets/css/style.css">
 	</head>
 
 	<body>
+		{% include breadcrumb.html %}
 		{% include sidebar.html %}
 		<main>
 			{{ content }}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,7 +2,15 @@
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
-<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
-
-{{ content }}
+<article class="post">
+    <header class="post-header">
+        <h1>{{ page.title }}</h1>
+        <i class="fa-solid fa-calendar-days"></i>
+        <time datetime="{{ page.date | date_to_string }}">
+            {{ page.date | date_to_string }} - {{ page.author }}
+        </time>
+    </header>
+    <div class="post-content">
+        {{ content }}
+    </div>
+</article>
diff --git a/_layouts/tag.html b/_layouts/tag.html
@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+<h2 class="tag-title">Posts related to {{ page.tag }}</h2>
+
+<ul>
+    {% for post in site.posts %}
+        {% if post.tags contains page.tag %}
+            <li>
+                <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
+                <p>{{ post.excerpt }}</p>
+            </li>
+        {% endif %}
+    {% endfor %}
+</ul>
diff --git a/_plugins/tag_generator.rb b/_plugins/tag_generator.rb
@@ -0,0 +1,34 @@
+module Jekyll
+    class TagGenerator < Generator
+        def generate(site)
+            # Exit if not in production mode
+            return unless ENV['JEKYLL_ENV'] == 'production'
+
+            tags = {}
+
+            # Iterate through all posts
+            site.posts.docs.each do |post|
+                post.data['tags'].each do |tag|
+                    # Add the post to the corresponding tag
+                    tags[tag] ||= []
+                    tags[tag] << post
+                end
+            end
+
+            # Create a markdown file for each tag
+            tags.each do |tag, posts|
+                # slugify the tag
+                tag_dir = tag.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
+                # create a new directory if it doesn't exist
+                Dir.mkdir(File.join(site.source, "tags", "#{tag_dir}")) unless File.directory?(File.join(site.source, "tags", "#{tag_dir}"))
+                File.open(File.join(site.source, "tags", "#{tag_dir}", "index.md"), "w") do |file|
+                    file.puts "---"
+                    file.puts "layout: tag"
+                    file.puts "title: \"Tag: #{tag}\""
+                    file.puts "tag: #{tag}"
+                    file.puts "---"
+                end
+            end
+        end
+    end
+end
diff --git a/_posts/2016/11/16/2016-11-16-react-form.md b/_posts/2016/11/16/2016-11-16-react-form.md
@@ -0,0 +1,103 @@
+---
+author: Jasmine Hirpara
+title: ReactJS Form Component
+excerpt: A reusable reactjs From component which renders the fields described in the configuration object in a form tag
+tags: [reactjs component]
+---
+
+## Form component built using ReactJS
+
+This is not a blog post but a copy of readme file from my <a href="https://github.com/jazzominy/react-form" target="_blank">repository</a>. This is a reusable From component which renders the fields described in the `config` object in a form tag. Here is a sample `config` object
+
+```javascript
+config = {
+    id: "info",
+    name: "info",
+    label: "Form header",
+    fields: [{
+        label: "Greeting",
+        value: "Hello",
+        type: "text"
+    },
+    {
+        label: "Password",
+        value: "Hello",
+        type: "password"
+    },
+    {
+        label: "Fruits",
+        options: options,
+        type: "select",
+        selected: "c"
+    },
+    {
+        label: "Fruits",
+        values: radios,
+        type: "radio",
+        selectedValue: "c"
+    },
+    {
+        label: "Fruits",
+        values: checkboxes,
+        type: "checkbox",
+        selectedValue: ["a","c"]
+    },
+    {
+        value: "Submit",
+        type: "submit"
+    }],
+    onSubmit: function (fieldMap) {
+        console.log("Form submitted");
+    },
+    action: "/abc"
+}
+```
+
+Bootstrap is used to style and layout the form.
+
+### Usage
+
+    ReactDOM.render(<RForm config={config} />,document.getElementById('root'));
+
+### `config` object
+
+This prop specifies which how a form is to be rendered. It have these properties `id`, `name`, `label`, `fields`, `onSubmit` and `action`
+
+##### `id`
+
+Holds the value of `id` property of the form
+
+##### `name`
+
+Holds the value of `name` property of the form
+
+##### `fields`
+
+The `fields` property is of type array and holds the configuration for the fields to be rendered. Each object in this array looks like this
+
+    {
+        id: "", /*This property is required and used when retrieving data when submitting form*/
+        label: "Field Label", /*The label for the field*/
+        value: "Hello", /*field value that is initially displayed*/
+        type: "text" /*type of the field (text|select|radio|checkbox|submit)*/
+    }
+
+##### `onSubmit`
+
+The handler function that is called when the form is submitted. This function is called with 2 parameters:
+
+* `fieldMap` - a map of field `id` as the key and the value as value of respective fields. In case if the field `id` is not specified, the key is constructed from field `type` and `label` as `type_label`
+
+* `form` - reference to the form
+
+##### `action`
+
+Specifies the destination url where the form is to be submitted
+
+#### Creating the build
+
+To run the sample, build script must be executed. Make sure [grunt](http://gruntjs.com) and [bower](https://bower.io) are installed. Run the command `npm run build`. Once the commands run successfully, launch `index.html` in `sample` folder. The minified precompiled versions of the `app.js` and `form.js` are also created in `sample/js` folder
+
+### Validation
+
+For integrated Bootstrap Validator, check validation branch