diff --git a/package.json b/package.json index b9f65f0..2bb0338 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.3.3", "@types/react-slick": "^0.23.4", + "@types/react-syntax-highlighter": "^13.5.2", "@types/react-tabs": "^2.3.2", "@types/react-typing-animation": "^1.6.2", "bootstrap": "^4.6.0", @@ -23,12 +24,15 @@ "react-animate-on-scroll": "^2.1.5", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", + "react-markdown": "^8.0.3", "react-router-dom": "^6.3.0", "react-scripts": "4.0.3", "react-slick": "^0.28.1", "react-snapshot": "^1.3.0", + "react-syntax-highlighter": "^15.5.0", "react-tabs": "^3.2.2", "react-typing-animation": "^1.6.2", + "remarkable": "^2.0.1", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, diff --git a/public/blog-images/example-blog-content.png b/public/blog-images/example-blog-content.png new file mode 100644 index 0000000..16c61e8 Binary files /dev/null and b/public/blog-images/example-blog-content.png differ diff --git a/public/blog-images/example-blog-list.png b/public/blog-images/example-blog-list.png new file mode 100644 index 0000000..be1caa1 Binary files /dev/null and b/public/blog-images/example-blog-list.png differ diff --git a/src/Main.tsx b/src/Main.tsx index ab9f9ca..a0ac266 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -2,12 +2,14 @@ import React from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import Blog from "./pages/Blog"; +import SingleBlog from "./pages/SingleBlog"; const Main = () => { return ( } path='/'/> - } path='/blog'/> + } path='/blogs'/> + } path='/blog'/> ); } diff --git a/src/components/blog-card/BlogCard.css b/src/components/blog-card/BlogCard.css new file mode 100644 index 0000000..2248be6 --- /dev/null +++ b/src/components/blog-card/BlogCard.css @@ -0,0 +1,36 @@ + +@media only screen and (max-width: 768px) { + .blog-card { + margin-top: 100px; + } +} + +.blog-card { + padding: 10px; +} + +.blog-card-img { + background-color: #FFFFFF; + padding: 20px; + width: 100%; + height: 100%; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.blog-card-info { + padding-bottom: 5px; + padding-top: 10px; +} + +.blog-card-int { + border-radius: 10px; + background-color: #1a1a1e; + transition: 1s; +} + +.blog-card-int:hover { + transform: translateY(-5px); + transition: .5s; + cursor: pointer; +} diff --git a/src/components/blog-card/BlogCard.tsx b/src/components/blog-card/BlogCard.tsx new file mode 100644 index 0000000..5ed2004 --- /dev/null +++ b/src/components/blog-card/BlogCard.tsx @@ -0,0 +1,19 @@ +import ScrollAnimation from "react-animate-on-scroll"; +import React from "react"; +import Job from "../../types/Job"; +import "./BlogCard.css"; +import Blog from "../../types/Blog"; + +export default function BlogCard(props: {style?: any, className?: string, blog: Blog, num: number}){ + return ( + +
{window.location.href="/blog?id="+props.num}} className={"blog-card-int"}> + {/**/} +
+

{props.blog.title}

+

{props.blog.date.toLocaleDateString()}

+
+
+
+ ); +} diff --git a/src/components/blogs/Blogs.css b/src/components/blogs/Blogs.css new file mode 100644 index 0000000..481e2ef --- /dev/null +++ b/src/components/blogs/Blogs.css @@ -0,0 +1,24 @@ +.react-tabs__tab--selected { + transition: 1s; + border-top: 1px #00AA00 solid; +} + +.tab-btn { + background-color: #121212; + transition: 1s; + + + border-bottom: 1px #FFFFFF solid; +} + +.btn-beg { + border-bottom-left-radius: 10px; + border-top-left-radius: 10px; + border-left: 1px #FFFFFF solid; +} + +.btn-end { + border-bottom-right-radius: 10px; + border-top-right-radius: 10px; + border-right: 1px #FFFFFF solid; +} diff --git a/src/components/blogs/Blogs.tsx b/src/components/blogs/Blogs.tsx new file mode 100644 index 0000000..08e51a5 --- /dev/null +++ b/src/components/blogs/Blogs.tsx @@ -0,0 +1,22 @@ +import React, {useState} from "react"; +import "./Blogs.css"; +import BlogCard from "../blog-card/BlogCard"; +import {AllBlogs} from "../../static/data/Blogs"; + +export default function Blogs() { + + let blogId = 0; + + return ( +
+
+ {AllBlogs.reverse().map((blog, i) => { + blogId++; + if(!blog.private) { + return + } + })} +
+
+ ) +} diff --git a/src/components/social-bar/SocialBar.tsx b/src/components/social-bar/SocialBar.tsx index c6b01b5..879ac85 100644 --- a/src/components/social-bar/SocialBar.tsx +++ b/src/components/social-bar/SocialBar.tsx @@ -23,6 +23,10 @@ export default function SocialBar(props: {style: any}) {
window.location.href="mailto:nickorlow@nickorlow.com"} className={"mail-icon icon"} viewBox="0 0 100 100" width="100px" height="100px">
+ +
+ Read My Blog +
); } diff --git a/src/declaration.d.ts b/src/declaration.d.ts new file mode 100644 index 0000000..5172a75 --- /dev/null +++ b/src/declaration.d.ts @@ -0,0 +1 @@ +declare module '*.md' \ No newline at end of file diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index 33ae32b..f051097 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -1,11 +1,14 @@ import React, {useState} from 'react'; import './Home.css'; +import Blogs from "../components/blogs/Blogs"; function Blog() { return ( -
+

Blog

+ Return Home +
); } diff --git a/src/pages/Home.css b/src/pages/Home.css index ccb7da1..e30c786 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -1,3 +1,7 @@ +img[alt=cavcash-newsroom] { + width: 49.5% +} + .App { text-align: center; background-color: black; diff --git a/src/pages/SingleBlog.tsx b/src/pages/SingleBlog.tsx new file mode 100644 index 0000000..2bbe92c --- /dev/null +++ b/src/pages/SingleBlog.tsx @@ -0,0 +1,62 @@ +import React, {useEffect, useState} from 'react'; +import './Home.css'; +import ReactMarkdown from 'react-markdown' +import {AllBlogs} from "../static/data/Blogs"; +import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter' +import {a11yDark as theme} from "react-syntax-highlighter/dist/esm/styles/prism"; + +function SingleBlog() { + + const [blog, setBlog] = useState(''); + const [blogId, setBlogId] = useState(0); + + useEffect(()=> { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + setBlogId(parseInt(urlParams.get('id') || '')); + }, []) + + fetch(AllBlogs[blogId].mdfile) + .then(response => { + return response.text() + }) + .then(text => { + setBlog(text) + }) + + return ( +
+

{AllBlogs[blogId].title}

+

{AllBlogs[blogId].date.toLocaleDateString()}

+

Return Home | All Blogs

+
+
+ + ) : ( + + {children} + + ) + } + }} + > + {blog} + +
+
+
+ ); +} + +export default SingleBlog; diff --git a/src/static/data/Blogs.ts b/src/static/data/Blogs.ts new file mode 100644 index 0000000..86a3731 --- /dev/null +++ b/src/static/data/Blogs.ts @@ -0,0 +1,32 @@ +import VrboImage from "../images/vrbo-logo-min.png"; +import Blog from "../../types/Blog"; +import CSMD from "./blogs/c-sharp-c-assignment.md"; +import TAB from "./blogs/there-is-a-blog.md"; + +const CSharpBlog: Blog = { + title: "Doing C assignments in C#", + date: new Date(2022, 2, 18, 14, 15, 0), + image: VrboImage, + mdfile: CSMD, + private: false +} + +const TestBlog: Blog = { + title: "There's a Blog!", + date: new Date(), + image: VrboImage, + mdfile: TAB, + private: false +} + +const PrivateBlog: Blog = { + title: "This blog can only be accessed via the direct URI", + date: new Date(), + image: VrboImage, + mdfile: TAB, + private: true +} + + +export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog]; + diff --git a/src/static/data/Hobbies.ts b/src/static/data/Hobbies.ts index 2031a5c..769a0b7 100644 --- a/src/static/data/Hobbies.ts +++ b/src/static/data/Hobbies.ts @@ -4,7 +4,7 @@ const RunningHobby: InfoCardProps = { title: "Running", description: "I started running cross country in 7th grade after wanting to beat my friend in the mile. I kept running all the way through to my senior year of high school. I made varsity my sophomore year. Today, I just run with friends casually along with other physical activity like lifting, biking, and kayaking.", listTitle: "Personal Records", - list:["1600 - 4:34", "3200 - 10:11", "5K XC - 16:42"], + list:["1600 - 4:34", "3200 - 10:11", "5K XC - 16:43"], link: "https://tx.milesplit.com/athletes/7325388-nicholas-orlowsky/stats", linkTitle: "Milesplit Profile", listClassName: "col-12" @@ -14,7 +14,7 @@ const Lifting: InfoCardProps = { title: "Lifting", description: "Once I was done with cross country, I was so used to working out everyday, I just couldn't stop. I started lifting as a break from my 6 years and 10,000 miles of running and really really liked it.", listTitle: "Personal Records", - list:["Bench - 235lbs", "Squat - 345lbs", "Deadlift - 345lbs (I think)"], + list:["Bench - 255lbs (Done at the Home Depot's HQ in Atlanta, GA)", "Squat - 345lbs", "Deadlift - 345lbs"], listClassName: "col-12" } diff --git a/src/static/data/blogs/c-sharp-c-assignment.md b/src/static/data/blogs/c-sharp-c-assignment.md index 9759468..689fa5a 100644 --- a/src/static/data/blogs/c-sharp-c-assignment.md +++ b/src/static/data/blogs/c-sharp-c-assignment.md @@ -1,4 +1,3 @@ -# Doing C assignments in C# Thanks to Arpan Dhatt for doing most of the work on this (his blog here: [https://arpan.one/posts/messing-with-gradescope/](https://arpan.one/posts/messing-with-gradescope/)) @@ -11,25 +10,18 @@ This makes running assignments in a docker container where the runtime is not al The better solution is to use .NET's (experimental) AOT compilation feature (formerly called CoreRT). C# has had a number of attempts at an AOT compiler such as : -- List -- LLD2CPP built by Unity + - [AOT](https://www.mono-project.com/docs/advanced/aot/) by Mono + - LLD2CPP built by Unity + - [Ready2Run](https://docs.microsoft.com/en-us/dotnet/core/deploying/ready-to-run) by Microsoft -We'll be using the official AOT compilation built by Microsoft. In order to use it, all you have to do is add the following to your `nuget.config`: -```xaml +We'll be using the official Ready2Run AOT compilation built by Microsoft. In order to use it, all you have to do is add the following to your `nuget.config`: +```xml ``` and then install the package: `Microsoft.DotNet.ILCompiler`. After doing that if you run the command: `dotnet publish -r [Runtime] -c [Config]` and after waiting a considerable amount of time, you'll have a full-fledged C# application compiled directly to your target runtime's bytecode! Compiling my simple Hello, Wold test to linux-x64 (`dotnet publish -r linux-x64 -c Release`) and adding it to my project files should let me run it using the same method Arpan used in his blog. -But running that command gives this beautiful error: -`Cross-OS native compilation is not supported. https://github.com/dotnet/corert/issues/5458 [.../CSharpAOTCompilation/CSharpAOTCompilation/CSharpAOTCompilation.csproj]` - -This (unfortunately) means that I need to either find a Linux machine to run this on or spin up a docker container to compile it for me. Luckily, I'm pretty good with docker and was able to spin this Dockerfile up relatively quickly that allows for this compilation: -```dockerfile - -``` - After doing that, we can follow the instructions followed by Arpan and viola! C# runs on Gradescope! I don't recommend this but it was fun to do and I needed stuff to write in a blog. @@ -39,7 +31,7 @@ I don't recommend this but it was fun to do and I needed stuff to write in a blo C# actually has many lower level features people don't expect it to have. Some of these include pointers and direct memory management. Pointers can be enabled by encasing your code in an unsafe code block. Example (Written by [Microsoft](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/unsafe-code)) -```c# +```csharp // Normal pointer to an object. int[] a = new int[5] { 10, 20, 30, 40, 50 }; @@ -68,4 +60,4 @@ unsafe } ``` -In .NET 6, the `NativeMemory` class was introduced which you can read about here: [](). It allows for malloc-like memory allocation and freeing which can be important for performance (and is also generally just better than letting a garbage garbage collector do your +In .NET 6, the `NativeMemory` class was introduced which you can read about [here](https://docs.microsoft.com/en-us/dotnet/api/system.runtime.interopservices.nativememory.alloc?view=net-6.0). It allows for malloc-like memory allocation and freeing which can be important for high-performance workloads. diff --git a/src/static/data/blogs/there-is-a-blog.md b/src/static/data/blogs/there-is-a-blog.md new file mode 100644 index 0000000..87e4ff5 --- /dev/null +++ b/src/static/data/blogs/there-is-a-blog.md @@ -0,0 +1,80 @@ +My Website now has a blog! I've always wanted to write a blog and I've been keeping a collection of writings in Google Docs that I'll eventually move over here. + +In this blog, I'm going to discuss how I built this blog and the differences it has with the other blogs I've built. As a point of comparison to this blog, I'm going +to be using the [CavCash Newsroom](https://cavcash.com/newsroom) which I also built. + +## How I built this blog + +This blog has no real backend. Blogs are written in Markdown files that are hosted with this website, which itself is a React webapp. I then have a file that adds metadata +to the blogs such as a title and a date. The metadata file looks like this: +```typescript +import BlogImage from "../images/blog-img-min.png"; +import Blog from "../../types/Blog"; +import CSMD from "./blogs/c-sharp-c-assignment.md"; +import TAB from "./blogs/there-is-a-blog.md"; + +const CSharpBlog: Blog = { + title: "Doing C assignments in C#", + date: new Date(2022, 2, 18, 14, 15, 0), + image: BlogImage, + mdfile: CSMD, + private: false +} + +const TestBlog: Blog = { + title: "There's a Blog!", + date: new Date(2022, 7, 6, 12, 0, 0), + image: BlogImage, + mdfile: TAB, + private: false +} + +const PrivateBlog: Blog = { + title: "This blog can only be accessed via the direct URI", + date: new Date(2022, 7, 6, 12, 0, 0), + image: BlogImage, + mdfile: TAB, + private: true +} + + +export const AllBlogs: Blog[] = [CSharpBlog, PrivateBlog, TestBlog]; +``` +This metadata then gets converted into a list and whenever you view a blog, it fetches the associated markdown file and parses it to show you here. + +I decided to add an option to hide some blogs from the 'All blogs' page (Notice how you don't see [This Blog](http://localhost:3000/blog?id=1) there?) +It's intended to be used so I can host things like Privacy Policies and Terms of Services for apps I write without cluttering up my blog. + +You may have noticed that there's an unused Image option. This option would provide a thumbnail, but I decided to remove them for now in favor of a cleaner look. + +## How I built the CavCash Newsroom + +The CavCash Newsroom does have a backend. The backend is a part of the larger CavCashAPI which also manages the rest of the backend code for CavCash. +It simply stores blog details in a MongoDB collection and returns them to the React frontend. It also supports 'private' blogs, however, it filters +out the private blogs in the backend which makes it harder to find a private blog. An entry for a CavCash Newsroom entry looks like this: +```json +{ + "_id" : ObjectId("60ecc0b23eae899e4e46616f"), + "BlogID" : NumberInt(3), + "Title" : "CavCash acquires Apple Inc", + "Author" : "nickorlow", + "CreatedDate" : ISODate("2021-07-12T22:22:41.000+0000"), + "HideBlog": false, + "Content" : "*AUSTIN, TX* - CavCash Inc has finalized a deal to buy Apple Inc (NASDAQ: AAPL) for 3.3 trillion dollars. This marks the 3rd 'FAANG' company CavCash has acquired, with the others being Google and Amazon. CavCash CEO Nicholas Orlowsky has been quoted as saying: \"We are pleased to welcome Apple to the CavCash family.\"\n\nApple CEO Tim Cook was enthused about the deal, expressing excitement for Apple's integration into the overall CavCash ecosystem. Tim will remain CEO of Apple for at least the next two years. \n\nSome have expressed antitrust concerns about CavCash becoming a monopoly.\"\n", + "CoverImage" : "data:image/jpeg;base64,/9j/4AAQS...GMvWWXtB1/9k=" +} +``` + +This blog looks like the following: + +![cavcash-newsroom](/blog-images/example-blog-list.png) +![cavcash-newsroom](/blog-images/example-blog-content.png) + +_Screenshot of CavCash Newsroom_ + +## Comparison of CavCash Newsroom and this Blog + +CavCash Newsroom needed to be able to be published to without pushing new code to the frontend. We also already had an API written for other things that I could just add +blog functionality to, so I chose to write it with a C# backend and a React frontend. The CavCash Newsroom also has some features not present in this blog such as author information and cover images. These features were left out because I am the only author on this blog, and I decided that cover images wouldn't be necessary. + +This blog does not have a backend api associated with it and using a blog API seemed like more trouble than building the feature myself. In order to ship blogs quickly and not create unnecessary complexities in my codebase, I decided to just have markdown files that were included in the frontend as my blogs. As I write more blogs this may prove to be a poor idea for performance but that's a bridge I can cross when I get there (Maybe build my own [NWS](https://nws.nickorlow.com) Blogging service?). diff --git a/src/types/Blog.ts b/src/types/Blog.ts new file mode 100644 index 0000000..1ceca86 --- /dev/null +++ b/src/types/Blog.ts @@ -0,0 +1,7 @@ +export default interface Blog { + title: string, + date: Date + image: string, + mdfile: string, + private: boolean +}