https://github.com/pgilbertschmitt/ts-gilly-bio
Recreation of portfolio site, using full-stack TypeScript - NestJS, React, Mongo, Docker
https://github.com/pgilbertschmitt/ts-gilly-bio
Last synced: 2 months ago
JSON representation
Recreation of portfolio site, using full-stack TypeScript - NestJS, React, Mongo, Docker
- Host: GitHub
- URL: https://github.com/pgilbertschmitt/ts-gilly-bio
- Owner: PGilbertSchmitt
- Created: 2019-03-19T16:36:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:56:48.000Z (over 2 years ago)
- Last Synced: 2025-01-17T14:36:17.376Z (4 months ago)
- Language: TypeScript
- Size: 3.46 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gilly's Bio 2.0
## A new truck stop on the Information Superhighway
I wanted to rebuild my portfolio site, so sue me
### Important technologies used:
- React/~~Redux/Saga~~
- Thanks to some advice from John Haugeland, I've removed my dependencies on Redux, and now I feel free as a bird
- NestJS (Because ExpressJS is so blasé)
- Docker (Yeah? And?)
- TypeScript (They say it allows you to peer into the hearts of mortal men)
### Motivation
Indefinite WIP
### Notes
#### Styles
I use `sass-loader` -> `css-loader` -> `style-loader` to add my styles. However, since I'm also using TypeScript with strictness turned to 11, the styles need typings for the components to be aware of the correct class names. What I've done feels messy and not as minimal as I would have hoped, but it's good enough for me until I figure out a cleaner system. Essentially, all `*.scss` files in _src/styles/_ are paired with a `*.scss.d.ts` type definition file. The only things that need to be in here are an export of all class names as enpty string variables (using **camelCase** instead of **kebab-case**). The loaders will handle the rest. Example:
```SCSS
// @styles/my_styles.scss
.my-class {
width: 5px;
.my-other-class {
background-color: blue;
}
}
```
```TS
// @styles/my_styles.scss.d.ts
export const myClass: string;
export const myOtherClass: string;
```
This way, they can easily be imported and the compiler won't complain:
```TSX
// @comp/my_component.tsx
import styles from '@styles/my_styles.scss';
export const Thing: SFC = () => (
)
//...
```