` 태그를 담당합니다. Blog 라는 Text를 누르면 기존 타 사이트와 마찬가지로 index 페이지로 이동하도록 만들었고
354 |
355 | `Section` 부분은 List를 사용해서 저희가 `main.swift` 에 등록한 Section들을 모두 보여주게 만들었습니다.
356 |
357 | 그리고 기존 디자인에 맞춰서 코드를 넣어주고 `styles.css` 에서 style 관련 css 코드를 넣어주었습니다.
358 |
359 | 그렇게 하면 이렇게 디자인 했던 것처럼 결과 값을 받아보실 수 있습니다.
360 |
361 | ` 태그의 역할을 하고, 저희는 copyright 부분중에 Jihoonahn 이라고 적힌 부분을 눌렀을 때 깃허브로 이동시키고 싶으니 이렇게 `Paragraph` 내부에 `Text` 와 `Link` 를 넣어줍니다.
403 |
404 | 이렇게 되면 `"Copyright © "` 부분을 눌렀을 때는 링크로 이동하지 않지만, `Jihoonahn` 을 눌렀을때만 이동을 하게 됩니다.
405 |
406 | 마찬가지로 기존 디자인에 맞춰서 코드를 넣어주고 `styles.css` 에서 style 관련 css 코드를 넣어주었습니다.
407 |
408 | ) throws -> HTML {
416 | HTML(
417 | .lang(context.site.language),
418 | .head(for: index, on: context.site, stylesheetPaths: []),
419 | .body {
420 | // Index Page
421 | }
422 | )
423 | }
424 | ```
425 |
426 | 기존의 `HTMLFactory` 에서 index부분 부터 한번 작업을 해보도록하겠습니다.
427 |
428 | Index의 Page부분을 만들기 위해서 `Pages` 폴더에서 `IndexPage.swift` 파일을 만들었습니다.
429 |
430 | ```swift
431 | struct IndexPage: Component {
432 | var context: PublishingContext
433 |
434 | var body: Component {
435 | ComponentGroup {
436 | HeaderComponent(context: context)
437 | FooterComponent()
438 | }
439 | }
440 | }
441 | ```
442 |
443 | 여러개의 Component가 동시에 들어가기 때문에 `ComponentGroup` 로 묶어 두고 기존에 만들어둔 Header와 Footer을 넣어둡니다.
444 |
445 | 그리고 `Layouts` 폴더에 `PostsLayout.swift` 란 파일을 만들어서
446 |
447 | ```swift
448 | struct PostsLayout: Component
449 | ```
450 |
451 | `PostsLayout` 이라는 Component를 만들고
452 |
453 | 다시 IndexPage로 돌아가서
454 |
455 | ```swift
456 | struct IndexPage: Component {
457 | var context: PublishingContext
458 |
459 | var body: Component {
460 | ComponentGroup {
461 | HeaderComponent(context: context)
462 | PostsLayout()
463 | FooterComponent()
464 | }
465 | }
466 | }
467 | ```
468 | 이런식으로 `PostsLayout` 도 추가로 넣어둡니다.
469 |
470 | 그리고 `IndexPage` 를 `HTMLFactory` 의 `makeIndexHTML` method에 넣어줍니다.
471 |
472 | ```swift
473 | func makeIndexHTML(for index: Index, context: PublishingContext) throws -> HTML {
474 | HTML(
475 | .lang(context.site.language),
476 | .head(for: index, on: context.site),
477 | .body {
478 | IndexPage(context: context)
479 | }
480 | )
481 | }
482 | ```
483 |
484 | 그럼 이제 Index 부분을 완성하기 위해서 `PostsLayout` 부분을 채워볼까요?
485 |
486 | Posts 같은 경우
487 |
488 |
505 | ```
506 | 이런 방식으로 기존의 Plot의 `ElementDefinitions` 부분을 참고하여 확장하시면 됩니다.
507 |
508 | 이제 `PostsLayout` 을 제작해보겠습니다.
509 |
510 | ```swift
511 | let items: [Item]
512 | ```
513 |
514 | - `items` 는 Post들을 가져오는 역할을 합니다.
515 |
516 | 이 프로퍼티를 추가해주고 `IndexPage.swift` 를 수정해줍니다.
517 |
518 | ```swift
519 | struct IndexPage: Component {
520 | var context: PublishingContext
521 |
522 | var body: Component {
523 | ComponentGroup {
524 | HeaderComponent(context: context)
525 | PostsLayout(items: context.allItems(sortedBy: \.date))
526 | FooterComponent()
527 | }
528 | }
529 | }
530 | ```
531 |
532 | 이런 식으로 Context의 모든 Item을 들고오면서 날짜 순서대로 정렬이 되도록 해뒀습니다.
533 |
534 | 다시 `PostsLayout` 부분으로 돌아가서
535 |
536 | ```swift
537 | struct PostsLayout: Component {
538 | let items: [Item]
539 |
540 | var body: Component {
541 | Section {
542 | Div {
543 | List(items) { item in
544 | Article {
545 | Link(url: item.path.absoluteString) {
546 | Paragraph(item.tags.map{ $0.string }.joined(separator: ", "))
547 | .class("posts-tag")
548 | H3(item.title)
549 | .class("posts-title")
550 | Paragraph(item.description)
551 | .class("posts-description")
552 | }
553 | .class("posts-link")
554 | }
555 | .class("posts-article")
556 | }
557 | .class("posts-list")
558 | }
559 | .class("site-posts-inner")
560 | }
561 | .class("site-posts")
562 | }
563 | }
564 | ```
565 |
566 | `items` 값을 `List()`로 보여줄 수 있도록 제작하고 `styles.css` 에 css 코드를 넣어주면 됩니다.
567 |
568 | , context: Publish.PublishingContext) throws -> HTML {
578 | HTML(
579 | .lang(context.site.language),
580 | .head(for: section, on: context.site),
581 | .body {
582 | // Section Code
583 | }
584 | )
585 | }
586 | ```
587 |
588 | `HTMLFactory` 부분에서 `makeSectionHTML` 메서드에 Section 코드를 추가하면 됩니다.
589 |
590 |
591 | ```swift
592 | struct SectionPage: Component
593 | ```
594 |
595 | `Pages/Section/SectionPage.swift` 파일에 SectionPage라는 Component를 만들고
596 |
597 | ```swift
598 | var section: Publish.Section
599 | var context: PublishingContext
600 | ```
601 |
602 | Example의 `section` 과 `Context` 를 가져와 줍니다.
603 |
604 | ```swift
605 | struct SectionPage: Component {
606 | var section: Publish.Section
607 | var context: PublishingContext
608 |
609 | var body: Component {
610 | switch section.path.string {
611 | case Example.SectionID.blog.rawValue:
612 | return IndexPage(context: context)
613 | case Example.SectionID.about.rawValue:
614 | // About Page
615 | default: return Div()
616 | }
617 | }
618 | }
619 | ```
620 |
621 | 이렇게 section의 path가 `blog`이면 `IndexPage`를 보여주게 하고 `about` 이라면 `AboutPage`를 보여주게 만듭니다.
622 |
623 | ```swift
624 | struct AboutPage: Component {
625 | var context: PublishingContext
626 |
627 | var body: Component {
628 | ComponentGroup {
629 | HeaderComponent(context: context)
630 | Div {
631 | Image("/images/AboutPageImage.svg")
632 | H2("Publish Example")
633 | Paragraph("Jihoonahn’s Blog Example")
634 | }
635 | .class("site-about")
636 | FooterComponent()
637 | }
638 | }
639 | }
640 | ```
641 |
642 | 그리고 `SectionPage`에 넣어둘 `AboutPage`가 필요하기 때문에 간단하게 제작하고,
643 |
644 | ```swift
645 | struct SectionPage: Component {
646 | var section: Publish.Section
647 | var context: PublishingContext
648 |
649 | var body: Component {
650 | switch section.path.string {
651 | case Example.SectionID.blog.rawValue:
652 | return IndexPage(context: context)
653 | case Example.SectionID.about.rawValue:
654 | return AboutPage(context: context)
655 | default: return Div()
656 | }
657 | }
658 | }
659 | ```
660 | 이렇게 넣어두면
661 |
662 | , context: PublishingContext) throws -> HTML {
672 | HTML(
673 | .lang(context.site.language),
674 | .head(for: item, on: context.site),
675 | .body {
676 | /// Post
677 | }
678 | )
679 | }
680 | ```
681 |
682 | 이곳에 `post` 들의 item을 가져올 수 있습니다.
683 |
684 | ```swift
685 | struct PostLayout: Component
686 | ```
687 |
688 | `Layouts/PostLayout.swift` 에서 위 Index와 비슷하게 `PostLayout` 이라는 Component를 만들어주겠습니다.
689 |
690 | 그리고 `PostLayout` 부분에서 Item 내용을 가져오기 위해서
691 |
692 | ```swift
693 | var item: Item
694 | var context: PublishingContext
695 | ```
696 | - `item` 프로퍼티를 통해서 가져올 수 있도록 하였습니다.
697 | - `context`는 tag의 url을 가져오기 위해서 사용하였습니다.
698 |
699 |
700 | ```swift
701 | struct PostLayout: Component {
702 | var item: Item
703 | var context: PublishingContext
704 |
705 | var body: Component {
706 | Section {
707 | Article {
708 | Div {
709 | for tag in item.tags {
710 | Link(tag.string, url: context.site.url(for: tag))
711 | .class("post-tag")
712 | }
713 | H2(item.title)
714 | .class("post-title")
715 | Paragraph(DateFormatter.time.string(from: item.date))
716 | .class("post-date")
717 | }
718 | .class("site-post-header")
719 | Div {
720 | Div {
721 | Node.contentBody(item.body)
722 | }
723 | }
724 | .class("site-post-content")
725 | }
726 | .class("site-post-article")
727 | }
728 | .class("site-post")
729 | }
730 | }
731 | ```
732 |
733 | 디자인 대로 구축한 `PostLayout` 코드입니다.
734 |
735 | ```swift
736 | for tag in item.tags {
737 | Link(tag.string, url: context.site.url(for: tag))
738 | .class("post-tag")
739 | }
740 | ```
741 | item에 있는 tag들을 가져와서 눌렀을때 Tag에 관련된 Post를 찾을 수 있는 페이지로 이동시킵니다.
742 |
743 | ```swift
744 | Node.contentBody(item.body)
745 | ```
746 | 그리고 저희가 `Content` 파일에 markdown으로 추가한 내용을 볼 수 있도록 `Node` 의 `contentBody` 메서드를 사용해주시면 됩니다.
747 |
748 | ```swift
749 | struct PostPage: Component {
750 | var item: Item
751 | var context: PublishingContext
752 |
753 | var body: Component {
754 | ComponentGroup {
755 | HeaderComponent(context: context)
756 | PostLayout(item: item, context: context)
757 | FooterComponent()
758 | }
759 | }
760 | }
761 | ```
762 |
763 | 그리고 `PostLayout`을 만들었으니, `PostPage` 에 `PostLayout`을 가져와주시면 됩니다.
764 |
765 | ```swift
766 | func makeItemHTML(for item: Item, context: PublishingContext) throws -> HTML {
767 | HTML(
768 | .lang(context.site.language),
769 | .head(for: item, on: context.site),
770 | .body {
771 | PostPage(item: item, context: context)
772 | }
773 | )
774 | }
775 | ```
776 |
777 | 다시 `HTMLFactory` 부분으로 돌아가서 `PostPage` 부분을 body에 넣어주시면
778 |
779 | ) throws -> HTML {
789 | HTML(
790 | .lang(context.site.language),
791 | .head(for: page, on: context.site),
792 | .body {
793 | page.body
794 | }
795 | )
796 | }
797 | ```
798 |
799 | `page.body` 만 보이게 해뒀습니다.
800 |
801 | ### Tag List
802 |
803 | 그 다음은 `TagList` 입니다. Post에 있는 모든 Tag들을 한번에 가져와서 볼 수 있게 하는 역할을 합니다.
804 |
805 | ```swift
806 | func makeTagListHTML(for page: Publish.TagListPage, context: PublishingContext) throws -> HTML? {
807 | HTML(
808 | .lang(context.site.language),
809 | .head(for: page, on: context.site),
810 | .body {
811 | // TagList Code
812 | }
813 | )
814 | }
815 | ```
816 | `HTMLFactory` 부분에서 `makeTagListHTML` 에서 처리할 수 있습니다.
817 |
818 |
819 | ```swift
820 | struct TagListPage: Component
821 | ```
822 |
823 | 먼저 `TagListPage` 에서 마찬가지로 Component를 생성하고
824 |
825 | ```swift
826 | let tags: Set
827 | ```
828 |
829 | `TagListPage`에서는 `Publish.TagListPage`에 있는 모든 태그를 들고 올 수 있게 `Set` 타입을 사용합니다.
830 |
831 | ```swift
832 | struct TagListPage: Component {
833 | let tags: [Tag]
834 | let context: PublishingContext
835 |
836 | var body: Component {
837 | ComponentGroup {
838 | HeaderComponent(context: context)
839 | List(tags) { tag in
840 | ListItem {
841 | Link(tag.string, url: context.site.url(for: tag))
842 | }
843 | .class("site-tag")
844 | }
845 | .class("site-tagList")
846 | FooterComponent()
847 | }
848 | }
849 | }
850 | ```
851 | 그리고 `tags` 를 List에 넣어서 보여주고 `styles.css` 에서 간단한 css 코드만 추가해주었습니다.
852 |
853 | ```swift
854 | func makeTagListHTML(for page: Publish.TagListPage, context: PublishingContext) throws -> HTML? {
855 | HTML(
856 | .lang(context.site.language),
857 | .head(for: page, on: context.site),
858 | .body {
859 | TagListPage(tags: page.tags, context: context)
860 | }
861 | )
862 | }
863 | ```
864 |
865 | 다시 `HTMLFactory` 코드로 돌아와서 `TagListPage`를 넣어줍니다.
866 |
867 | ) throws -> HTML? {
877 | HTML(
878 | .lang(context.site.language),
879 | .head(for: page, on: context.site),
880 | .body {
881 | // Tag Details Code
882 | }
883 | )
884 | }
885 | ```
886 |
887 | `HTMLFactory`에서 마지막 하나 남은 메서드인 `makeTagDetailsHTML` 에서 작업을 하실 수 있습니다.
888 |
889 |
890 | ```swift
891 | struct TagDetailPage: Component
892 | ```
893 |
894 | `TagDetailPage`라는 Component를 선언하고
895 |
896 | ```swift
897 | let items: [Item]
898 | let selectedTag: Tag
899 | ```
900 |
901 | - `items`: Tag에 포함된 post들을 가져옵니다.
902 | - `selectedTag`: 선택된 Tag의 정보를 알려줍니다.
903 |
904 | 위의 프로퍼티들을 추가해주시고
905 |
906 | ```swift
907 | struct TagDetailsPage: Component {
908 | let items: [Item]
909 | let context: PublishingContext
910 | let selectedTag: Tag
911 |
912 | var body: Component {
913 | ComponentGroup {
914 | HeaderComponent(context: context)
915 | Div {
916 | H2(selectedTag.string)
917 | PostsLayout(items: items)
918 | }
919 | .class("site-tagDetails")
920 | FooterComponent()
921 | }
922 | }
923 | }
924 | ```
925 |
926 | 기존의 `PostsLayout` 을 가져오는 방식으로 간단하게 처리하고
927 |
928 | ```swift
929 | func makeTagDetailsHTML(for page: Publish.TagDetailsPage, context: PublishingContext) throws -> HTML? {
930 | HTML(
931 | .lang(context.site.language),
932 | .head(for: page, on: context.site),
933 | .body {
934 | TagDetailsPage(
935 | items: context.items(
936 | taggedWith: page.tag,
937 | sortedBy: \.date
938 | ),
939 | context: context,
940 | selectedTag: page.tag
941 | )
942 | }
943 | )
944 | }
945 | ```
946 |
947 | 이렇게 `HTMLFactory`의 `makeTagDetailsHTML`에 넣어주시면 되는데,
948 |
949 | ```swift
950 | items: context.items(
951 | taggedWith: page.tag,
952 | sortedBy: \.date
953 | ),
954 | ```
955 | `items`를 가져오는 부분을 보면 context의 items를 가져오는데 `page.tag`가 포함되어 있는 `item` 만 가져오게 해준다라고 생각하시면 될것 같습니다.
956 |
957 |
33 | ```
34 | - repository: 프로젝트 Repository
35 | - branch: 배포할 Branch
36 | - useSSH: SSH 키를 사용하는지 여부
37 |
38 |
39 | ```swift
40 | .deploy(using: .git("git@ios.github.com:jihoonahn/ExamplePublish", branch: "gh-pages"))
41 | ```
42 |
43 | 저는 ssh키를 여러개를 사용하는 관계로 그냥 git으로 작성 하였습니다.
44 |
45 | 그리고 Website 부분에서
46 |
47 | ```swift
48 | struct Example: Website {
49 | enum SectionID: String, WebsiteSectionID {
50 | case blog
51 | case about
52 | var name: String {
53 | switch self {
54 | case .blog: return "Blog"
55 | case .about: return "About"
56 | }
57 | }
58 | }
59 |
60 | struct ItemMetadata: WebsiteItemMetadata {
61 | // Add any site-specific metadata that you want to use here.
62 | }
63 |
64 | // Update these properties to configure your website:
65 | var url = URL(string: /* URL 값 입력 */ )!
66 | var name = "Example"
67 | var description = "A description of Part"
68 | var language: Language { .english }
69 | var imagePath: Path? { nil }
70 | }
71 | ```
72 |
73 | URL 값을 입력해줍니다.
74 |
75 | ```swift
76 | var url = URL(string: "https://jihoonahn.github.io/")!
77 | ```
78 |
79 | Publish CLI를 보게 되면
80 |
81 | ```
82 | Publish Command Line Interface
83 | ------------------------------
84 | Interact with the Publish static site generator from
85 | the command line, to create new websites, or to generate
86 | and deploy existing ones.
87 |
88 | Available commands:
89 |
90 | - new: Set up a new website in the current folder.
91 | - generate: Generate the website in the current folder.
92 | - run: Generate and run a localhost server on default port 8000
93 | for the website in the current folder. Use the "-p"
94 | or "--port" option for customizing the default port.
95 | - deploy: Generate and deploy the website in the current
96 | folder, according to its deployment method.
97 | ```
98 |
99 | 이런식으로 deploy 관련 커맨드가 있습니다.
100 |
101 | ```swift
102 | $ publish generate
103 | $ publish deploy
104 | ```
105 |
106 | 이렇게 명령어를 순차적으로 작성하게 되면,
107 |
108 | {
183 | Configure ({
184 | switch $0 {
185 | case .baseProject:
186 | return [
187 | // Write Configuration Method
188 | ]
189 | }
190 | })
191 | }
192 | }
193 | ```
194 |
195 | `XCConfigTarget`을 지정하고 body 프로퍼티에서 Configuration Method를 관리해줄수 있도록 만들었습니다.
196 |
197 | ```swift
198 | var body: some XCConfigOf {
199 | Configure ({
200 | switch $0 {
201 | case .A:
202 | return [
203 | .debug(into: $0, name: .dev)
204 | .release(into: $0, name: .prod)
205 | ]
206 | }
207 | })
208 | }
209 | ```
210 |
211 | 이렇게 추가하고
212 |
213 | ```swift
214 | struct BaseProject: Module {
215 | let config = AppConfiguration()
216 |
217 | var body: Module {
218 | Project {
219 | // Target
220 | }
221 | .settings(
222 | .settings(
223 | configurations: config.configure(into: .baseProject)
224 | )
225 | )
226 | }
227 | }
228 | ```
229 |
230 | settings 부분에서 configurations를 추가하면 보기 좋게 관리 할수 있도록 만들었습니다.
231 |
232 | ## 고민했던 부분
233 |
234 | 플러그인 개발을 진행하면서 이런 부분은 고민을 많이 했습니다.
235 |
236 | - Templates 제공 때 어떻게 제공하는게 좋을지
237 | - Moduler Architecture 부분까지 제공을 할지
238 |
239 | 위 두가지 고민이 저에게 가장 큰 고민이였습니다.
240 |
241 | ### Templates 제공 때 어떻게 제공하는게 좋을지
242 |
243 | 이 부분은 생각보다 고민시간이 많이 걸렸습니다. 기존 대부분의 Templates 처럼 그냥 `Project.swift` 랑 `Workspace.swift` 파일을 생성하게 만들려고 했지만, `ProjectDescriptionHelpers` 부분에 초점을 두게 되었습니다.
244 |
245 | 실질적으로 `Module` 부분은 Project를 Description 해주는 부분이라고 생각이 들었습니다.
246 |
247 | ```swift
248 | struct BaseFeature: Module {
249 | var body: some Module {
250 | Project {
251 | /// Target Code
252 | }
253 | .organizationName("")
254 | .package {
255 | /// Package Code
256 | }
257 | }
258 | }
259 | ```
260 |
261 | 사실상 Project는 `Project.swift` 라는 부분에서 하는 역할은
262 |
263 | ```swift
264 | let project = BaseFeature().module()
265 | ```
266 |
267 | 생성에 관련된 코드는 이 부분이 하고 있기 때문에 프로젝트 생성을 했을때 `Project.swift` 보다는 `ProjectDescriptionHelper` 에 생성되는게 더 의미가 맞겠다라고 생각을 해서
268 |
269 | Project Template를 생성해주면
270 |
271 | ```
272 | .
273 | ├── Projects
274 | │ └── App
275 | │ └── Project.swift //<- Project.swift file Generate
276 | ├── Tuist
277 | │ ├── ProjectDescriptionHelpers
278 | │ └── Projects
279 | │ └── DemoProject.swift //<- DemoProject.swift file Generate
280 | │ ├── Dependencies.swift
281 | │ ├── Config.swift
282 | │ └── Package.swift
283 | └── [README.md](http://readme.md/)
284 | ```
285 |
286 | 이렇게 생성이 되며
287 |
288 | Workspace도 마찬가지로 Template를 생성해주면
289 |
290 | ```
291 | .
292 | ├── Projects
293 | │ └── App
294 | │ └── Workspace.swift //<- Workspace.swift file Generate
295 | ├── Tuist
296 | │ ├── ProjectDescriptionHelpers
297 | │ └── Workspace
298 | │ └── DemoApp.swift //<- DemoApp.swift file Generate
299 | │ ├── Dependencies.swift
300 | │ ├── Config.swift
301 | │ └── Package.swift
302 | └── README.md
303 | ```
304 |
305 | 이렇게 생성되게 만들어뒀습니다.
306 |
307 | ### Moduler Architecture 부분까지 제공을 할지
308 |
309 | 이부분은 기존에 또다른 플러그인인 [microfeature](https://github.com/jihoonahn/microfeature) 플러그인을 만들어보며 또 다른 플러그인으로 제공을 하게되면
310 |
311 | microfeature plugin 코드중
312 |
313 | ```swift
314 | struct ExampleModule: Module {
315 | var body: some Module {
316 | Project {
317 | Microfeature {
318 | Example(name: typeName)
319 | Interface(name: typeName)
320 | Sources(name: typeName)
321 | Testing(name: typeName)
322 | UnitTests(name: typeName)
323 | UITests(name: typeName)
324 | }
325 | }
326 | }
327 | }
328 | ```
329 |
330 | 이렇게 Microfeature라는 Method로 감싸야되는 상황이 나오게 됬습니다.
331 |
332 | ```swift
333 | public func Microfeature(@TargetBuilder content: () -> [Target]) -> [Target] {
334 | return content()
335 | }
336 | ```
337 |
338 | Microfeature 플러그인을 제작할때 TuistUI를 가져올수 없기 때문에 발생하는 사소한 부분이였기 때문에 플러그인으로 가져오는건 비 효율적이라고 생각이 들었고,
339 |
340 | **TuistUI 내부에서 Moduler Architecture를 넣어둔다면?**
341 |
342 | 이부분은 또 다른 모듈을 관리하는 Architecture가 나올수 있다는 것을 가정하에 제외하게 되었습니다. (TuistUI가 Modular Architecture 하나로만 제한되는 상황을 방지하기 위함입니다.)
343 |
344 | ## 향후 개발 계획
345 |
346 | 현재는 넘어가서 전역 후 [DesignTuist](https://github.com/jihoonme/designtuist) 에서 TuistUI 플러그인을 사용하며, 필요한 부분과 개선할 부분을 찾아볼 생각이고
347 |
348 | 추가적으로 이런 부분 추가하면 좋겠다 생각되시는 부분은 [issue](https://github.com/jihoonme/tuistui/issues)로 남겨주시면 열심히 추가해보겠습니다!
349 |
350 | [https://github.com/jihoonme/tuistui](https://github.com/jihoonme/tuistui)
351 |
--------------------------------------------------------------------------------
/Content/blog/universal-framework.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Universal Framework
3 | date: 2023-4-2 18:30
4 | tags: Swift, Framework
5 | description: Universal Framework에 대한 공부
6 | postImage: https://github.com/jihoonahn/blog/assets/68891494/0467f741-a648-48b0-bbb5-1daa24fd9280
7 | ---
8 |
9 | ## Universal Framework (범용 프레임워크)
10 | 디바이스와 시뮬레이터에서 사용가능하도록 범용적으로 프레임워크를 만드는 것입니다. VIDEO
10 |
11 | **본 영상은 WWDC 19이며 SwiftUI 소개되는 부분에서 시작이됩니다.**
12 |
13 | 2019년 애플의 WWDC에서 처음 소개된 SwiftUI 는 모든 애플 운영체제용 앱을 개발하는데 있어서 완전히 새로운 방법을 제공합니다.
14 |
15 | SwiftUI의 기본적인 목적은 앱 개발을 더 쉽고 폭발적인 생산성을 내면서 동시에 소프트웨어를 개발할 때 일반적으로 발생하는 버그들을 줄이는 것입니다. VIDEO
10 |
11 | 이번 제 4회 와글와글 iOS에서 블로깅하는 방법에 대해서 발표를 했고, 이에 대한 회고 입니다.
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/icons/copy.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/icons/github.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/icons/rss-solid.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/Resources/static/images/about.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
9 |
10 |
14 |
15 |
--------------------------------------------------------------------------------
/Resources/static/images/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/Resources/static/scripts/docsearch.js:
--------------------------------------------------------------------------------
1 | docsearch({
2 | container: '#docsearch',
3 | appId: '3FO4WHQGGO',
4 | indexName: 'blog',
5 | apiKey: 'f45f471cd92d448f891637e486f50362',
6 | debug: true
7 | });
8 |
--------------------------------------------------------------------------------
/Sources/Components/Common/BasicScripts.swift:
--------------------------------------------------------------------------------
1 | import Plot
2 |
3 | struct BasicScripts: Component {
4 | var body: Component {
5 | Script(
6 | .raw("""
7 | (function(){
8 | function attachEvent(selector, event, fn) {
9 | const matches = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
10 | if (matches && matches.length) {
11 | matches.forEach((elem) => {
12 | elem.addEventListener(event, (e) => fn(e, elem), false);
13 | });
14 | }
15 | }
16 |
17 | window.onload = function() {
18 | var host = window.location.host;
19 | var pathname = window.location.pathname;
20 | let lastKnownInnerWidth = window.innerWidth;
21 | let ticking = true;
22 |
23 | attachEvent('#mobileNavButton', 'click', function() {
24 | document.body.classList.toggle('overflow-hidden');
25 | document.getElementById('blogNavScreen')?.classList.toggle('hidden');
26 | document.getElementById('mobileNavButton')?.classList.toggle('expanded');
27 | });
28 |
29 | attachEvent('.copyPost', 'click', function() {
30 | var tempInput = document.createElement("input");
31 | tempInput.value = host + pathname;
32 | document.body.appendChild(tempInput);
33 | tempInput.select();
34 | tempInput.setSelectionRange(0, 99999);
35 | document.execCommand("copy");
36 | document.body.removeChild(tempInput);
37 | });
38 |
39 | function applyHeaderStylesOnResize() {
40 | if (lastKnownInnerWidth<768) {
41 | document.body.classList.remove('overflow-hidden');
42 | document.getElementById('blogNavScreen')?.classList.add('hidden');
43 | document.getElementById('mobileNavButton')?.classList.remove('expanded');
44 | }
45 | }
46 |
47 | applyHeaderStylesOnResize();
48 | window.addEventListener('resize', applyHeaderStylesOnResize);
49 | };
50 |
51 | window.onpageshow = function() {
52 | document.body.classList.remove('overflow-hidden');
53 | document.getElementById('header nav')?.classList.add('hidden');
54 | };
55 | })();
56 | """)
57 | )
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/Sources/Components/Footer.swift:
--------------------------------------------------------------------------------
1 | struct Footer: Component {
2 | let context: PublishingContext
3 |
4 | var body: Component {
5 | Plot.Footer {
6 | Div {
7 | Div {
8 | Div {
9 | Paragraph {
10 | Text("Copyright © ")
11 | Link("Jihoonahn", url: "https://github.com/jihoonahn")
12 | .class("text-stone-700")
13 | }
14 | .class("text-stone-600 my-0")
15 | }
16 | Div {
17 | Paragraph {
18 | Text("Made with Swift")
19 | }
20 | .class("text-stone-600 my-0")
21 | }
22 | }
23 | .class("text-sm mx-3 my-auto p-2")
24 | Div {
25 | List(context.site.socialMediaLinks) { socialMediaLink in
26 | ListItem {
27 | Link(url: socialMediaLink.url) {
28 | Image(socialMediaLink.icon)
29 | .class("w-full h-auto rounded-none")
30 | }
31 | }
32 | .class("text-center w-4 h-4")
33 | }
34 | .class("inline-flex gap-4 list-none")
35 | }
36 | .class("mx-2")
37 | }
38 | .class("flex flex-wrap justify-between p-1 mx-auto max-w-4xl")
39 | }
40 | .class("bg-blog-c-footer relative")
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/Sources/Components/Head.swift:
--------------------------------------------------------------------------------
1 | extension Node where Context == HTML.DocumentContext {
2 | public static func head(for page: Location, context: PublishingContext) -> Node {
3 | let site = context.site
4 | var title = page.title
5 |
6 | if title.isEmpty {
7 | title = site.name
8 | }
9 |
10 | var description = page.description
11 |
12 | if description.isEmpty {
13 | description = site.description
14 | }
15 |
16 | return .head(
17 | .encoding(.utf8),
18 | .siteName(site.name),
19 | .url(site.url(for: page)),
20 | .title(title),
21 | .description(description),
22 | .twitterCardType(page.imagePath == nil ? .summary : .summaryLargeImage),
23 | .link(
24 | .rel(.stylesheet),
25 | .href("https://cdn.jsdelivr.net/npm/@docsearch/css@3")
26 | ),
27 | .stylesheet("/styles.css"),
28 | .viewport(.accordingToDevice),
29 | .unwrap(site.favicon, { .favicon($0) }),
30 | .unwrap(Path.defaultForRSSFeed, { path in
31 | let title = "Subscribe to \(site.name)"
32 | return .rssFeedLink(path.absoluteString, title: title)
33 | }),
34 | .unwrap(page.imagePath ?? site.imagePath, { path in
35 | let url = site.url(for: path)
36 | return .socialImageLink(url)
37 | })
38 | )
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/Sources/Components/Header.swift:
--------------------------------------------------------------------------------
1 | struct Header: Component {
2 | var context: PublishingContext
3 |
4 | var body: Component {
5 | Plot.Header {
6 | Div {
7 | Div {
8 | Link(url: "/") {
9 | Image("/static/images/icon.svg")
10 | .class("max-h-11 my-0")
11 | }
12 | .class("flex items-center h-blog-nav")
13 | Div {
14 | Div {
15 | Div()
16 | .id("docsearch")
17 | .class("blogDocsearch")
18 | }
19 | .class("flex items-center pl-4")
20 | Button {
21 | Span {
22 | Span().class("transition duration-200 top-0 left-0 absolute w-full h-0.5 bg-blog-c-nav-text ease translate-x-0 translate-y-0 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-0 group-[.expanded]:top-1.5")
23 | Span().class("transition duration-200 top-1.5 left-0 absolute w-full h-0.5 bg-blog-c-nav-text ease translate-x-0 translate-y-0 group-[.expanded]:opacity-0")
24 | Span().class("transition duration-200 top-3 left-0 absolute w-full h-0.5 bg-blog-c-nav-text ease translate-x-0 translate-y-0 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-0 group-[.expanded]:top-1.5")
25 | }
26 | .class("relative h-4 w-4 overflow-hidden")
27 | }
28 | .id("mobileNavButton")
29 | .accessibilityLabel("Mobile navigation")
30 | .class("cursor-pointer flex w-10 h-blog-nav items-center justify-center group md:hidden")
31 | }
32 | .class("flex justify-end items-center grow")
33 | Navigation {
34 | List(Blog.SectionID.allCases) { sectionID in
35 | Link(
36 | context.sections[sectionID].title,
37 | url: context.sections[sectionID].path.absoluteString
38 | )
39 | .class("blogNavItem blogNavBarMenuLink block py-0 px-3 text-xs leading-calc-blog-nav")
40 | }
41 | .class("flex list-none m-0")
42 | }
43 | .id("blogNav")
44 | .class("hidden md:flex")
45 | }
46 | .class("flex justify-between mx-auto my-0 max-w-3xl")
47 | Div {
48 | Div {
49 | Navigation {
50 | List(Blog.SectionID.allCases) { sectionID in
51 | Link(
52 | context.sections[sectionID].title,
53 | url: context.sections[sectionID].path.absoluteString
54 | )
55 | .class("blogNavItem block py-3 blogNavBarMenuLink border-b border-zinc-500 border-solid")
56 | }
57 | .class("list-none m-0")
58 | }
59 | .class("inline")
60 | Div {
61 | List(context.site.socialMediaLinks) { socialMediaLink in
62 | Link(url: socialMediaLink.url) {
63 | Image(socialMediaLink.icon)
64 | .class("w-6 h-6 rounded-none")
65 | }
66 | .class("text-center w-6 h-6")
67 | }
68 | .class("flex justify-center gap-4 list-none")
69 | }
70 | .class("mt-4 w-full")
71 | }
72 | .class("my-0 mx-auto max-w-[288px] pt-6 pb-24")
73 | }
74 | .id("blogNavScreen")
75 | .class("hidden h-screen")
76 | }
77 | .class("pl-6 pr-4")
78 | Script(.src("https://cdn.jsdelivr.net/npm/@docsearch/js@3"))
79 | Script(
80 | .type("text/javascript"),
81 | .src("/static/scripts/docsearch.js")
82 | )
83 | }
84 | .id("header")
85 | .class("relative md:fixed top-0 left-0 w-full z-20 bg-blog-c-nav backdrop-saturate-125 backdrop-blur-xl")
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/Sources/Components/Pagination.swift:
--------------------------------------------------------------------------------
1 | struct Pagination: Component {
2 | let activePage: Int
3 | let numberOfPages: Int
4 | let pageURL: (_ pageNumber: Int) -> String
5 | let isDemo: Bool
6 |
7 | public init(activePage: Int, numberOfPages: Int, pageURL: @escaping (Int) -> String, isDemo: Bool = false) {
8 | self.activePage = activePage
9 | self.numberOfPages = numberOfPages
10 | self.pageURL = pageURL
11 | self.isDemo = isDemo
12 | }
13 |
14 | var body: Component {
15 | Navigation {
16 | Div {
17 | Div {
18 | previewLink()
19 | }
20 | .class("blogPagination")
21 | Div {
22 | Text("\(activePage) / \(numberOfPages)")
23 | }
24 | .class("flex-1-0 text-center")
25 | Div {
26 | nextLink()
27 | }
28 | .class("blogPagination")
29 | }
30 | .class("flex relative px-4 items-center max-w-xs mx-auto my-0")
31 | }
32 | .id("pagination")
33 | .class("mt-16 mb-8")
34 | .accessibilityLabel("pagination number")
35 | }
36 |
37 | func generatePageURL(_ num: Int) -> String {
38 | if isDemo {
39 | return "#"
40 | } else {
41 | return pageURL(num)
42 | }
43 | }
44 |
45 | func previewLink() -> Component {
46 | let link: String
47 | if activePage == 1 {
48 | link = "#"
49 | } else {
50 | link = generatePageURL(activePage - 1)
51 | }
52 | let pageLink: Component = Link(url: link) {
53 | Image("/static/icons/arrow-left.svg")
54 | .class("h-4 w-4 p-0")
55 | }
56 | .class("flex h-9 w-9 items-center justify-center")
57 | return pageLink
58 | }
59 |
60 | func nextLink() -> Component {
61 | let link: String
62 | if activePage == numberOfPages {
63 | link = "#"
64 | } else {
65 | link = generatePageURL(activePage + 1)
66 | }
67 | let pageLink: Component = Link(url: link) {
68 | Image("/static/icons/arrow-right.svg")
69 | .class("h-4 w-4 p-0")
70 | }
71 | .class("flex h-9 w-9 items-center justify-center")
72 | return pageLink
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/Sources/Components/PreviewPost.swift:
--------------------------------------------------------------------------------
1 | struct PreviewPost: Component {
2 | var context: PublishingContext
3 | var item: Item
4 |
5 | var body: Component {
6 | Div {
7 | let items = context.allItems(sortedBy: \.date)
8 | let index = items.firstIndex(of: item) ?? 0
9 | let last = items.endIndex - 1
10 | Div {
11 | if index != 0 {
12 | Link(url: items[index - 1].path.absoluteString) {
13 | Div {
14 | Paragraph("Preview Post")
15 | .class("text-gray-500 m-0.5")
16 | H3(items[index-1].title)
17 | .class("text-black text-2xl font-medium m-0.5")
18 | }
19 | .class("flex-1 flex flex-col leading-none min-w-0 items-start")
20 | }
21 | .class("flex cursor-pointer rounded-[10px] bg-blog-c-preview-page w-full h-full p-4 min-h-[4.2rem] items-center")
22 | }
23 | }
24 | .class("min-w-0 flex-1 mt-4 md:mt-0")
25 | Div {
26 | if index < last {
27 | Link(url: items[index + 1].path.absoluteString) {
28 | Div {
29 | Paragraph("Next Post")
30 | .class("text-gray-500 m-0.5")
31 | H3(items[index + 1].title)
32 | .class("text-black text-2xl font-medium m-0.5")
33 | }
34 | .class("flex-1 flex flex-col leading-none min-w-0 items-end")
35 | }
36 | .class("flex cursor-pointer bg-blog-c-preview-page w-full h-full rounded-[10px] p-4 flex-row-reverse items-center min-h-[4.2rem]")
37 | }
38 | }
39 | .class("min-w-0 flex-1 mt-4 md:mt-0 md:ml-8")
40 | }
41 | .class("flex flex-col-reverse px-4 mt-11 mb-4 max-w-3xl mx-auto md:flex-row md:px-0")
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/Sources/Datas/Constants.swift:
--------------------------------------------------------------------------------
1 | struct Constants {
2 | static let numberOfItemsPerIndexPage: Int = 9
3 | static let numberOfItemsPerTagsPage: Int = 9
4 | }
5 |
--------------------------------------------------------------------------------
/Sources/Datas/SocialMediaLink.swift:
--------------------------------------------------------------------------------
1 | import Foundation
2 |
3 | struct SocialMediaLink {
4 | let title: String
5 | let url: String
6 | let icon: String
7 | }
8 |
9 | extension SocialMediaLink {
10 | static var linkedIn: SocialMediaLink {
11 | SocialMediaLink(
12 | title: "LinkedIn",
13 | url: "https://www.linkedin.com/in/ahnjihoon/",
14 | icon: "/static/icons/linkedin.svg"
15 | )
16 | }
17 | static var github: SocialMediaLink {
18 | SocialMediaLink(
19 | title: "GitHub",
20 | url: "https://github.com/jihoonahn",
21 | icon: "/static/icons/github.svg"
22 | )
23 | }
24 | static var rss: SocialMediaLink {
25 | SocialMediaLink(
26 | title: "Rss",
27 | url: "https://blog.jihoon.me/feed.rss",
28 | icon: "/static/icons/rss-solid.svg")
29 | }
30 | static var email: SocialMediaLink {
31 | SocialMediaLink(
32 | title: "Email",
33 | url: "mailto:jihoonahn.dev@gmail.com",
34 | icon: "/static/icons/envelope-solid.svg"
35 | )
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/Sources/Layouts/ArchiveLayout.swift:
--------------------------------------------------------------------------------
1 | struct ArchiveLayout: Component {
2 | let items: [Item]
3 | let context: PublishingContext
4 |
5 | var body: Component {
6 | Div {
7 | List(items) { item in
8 | Link(url: item.path.absoluteString) {
9 | Figure {
10 | Image(item.metadata.postImage)
11 | .class("m-0")
12 | }
13 | .class("my-auto border border-gray-200 rounded-lg md:rounded-2xl overflow-hidden self-start w-[30%] md:w-[350px]")
14 | Div {
15 | Paragraph(item.tags.map{ $0.string }.joined(separator: ", "))
16 | .class("text-blog-c-tag-text text-xs md:text-sm text-black m-0 break-all")
17 | H3(item.title)
18 | .class("text-black text-base md:text-heading-3 mb-2 mt-2 break-all")
19 | Time(DateFormatter.time.string(from: item.date))
20 | .class("text-sm md:text-base font-light text-blog-c-time-text")
21 | }
22 | .class("ml-3 md:ml-4 lg:ml-6")
23 | }
24 | .class("flex justify-start px-0 py-8 items-center border-t border-solid border-gray-300")
25 | }
26 | .class("m-0 list-none")
27 | }
28 | .class("border-b border-solid border-gray-300 md:w-[43rem]")
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/Sources/Layouts/BaseLayout.swift:
--------------------------------------------------------------------------------
1 | struct BaseLayout: HTMLConvertable {
2 | var location: Location
3 | var context: PublishingContext
4 | var component: () -> Component
5 |
6 | public init(
7 | for location: Location,
8 | context: PublishingContext,
9 | component: @escaping () -> Component
10 | ) {
11 | self.location = location
12 | self.context = context
13 | self.component = component
14 | }
15 |
16 | func build() -> HTML {
17 | HTML(
18 | .lang(context.site.language),
19 | .head(for: location, context: context),
20 | .body {
21 | Header(context: context)
22 | Main {
23 | component()
24 | }
25 | .id("main")
26 | .class("relative z-10 flex flex-1 flex-col min-h-screen pt-3 md:pt-20 pb-14")
27 | Footer(context: context)
28 | BasicScripts()
29 | }
30 | )
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/Sources/Layouts/PageLayout.swift:
--------------------------------------------------------------------------------
1 | struct PageLayout: Component {
2 | let title: String
3 | let component: () -> Component
4 |
5 | public init(
6 | title: String,
7 | component: @escaping () -> Component
8 | ) {
9 | self.title = title
10 | self.component = component
11 | }
12 |
13 | var body: Component {
14 | Section {
15 | H1(title)
16 | .id("pageTitle")
17 | .class("text-heading-2 font-semibold")
18 | component()
19 | }
20 | .class("px-4 sm:px-8 max-w-3xl mx-auto")
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/Sources/Layouts/PostLayout.swift:
--------------------------------------------------------------------------------
1 | struct PostLayout: Component {
2 | var item: Item
3 | var context: PublishingContext
4 |
5 | var body: Component {
6 | Section {
7 | Article {
8 | Div {
9 | Div {
10 | Div {
11 | Time(DateFormatter.time.string(from: item.date))
12 | .class("font-semibold text-gray-500 text-sm")
13 | }
14 | }
15 | .class("component md:w-[654px]")
16 | Div {
17 | Div {
18 | H1(item.title)
19 | .class("m-0 leading-normal font-semibold text-heading-2 md:text-heading-1")
20 | }
21 | }
22 | .class("component my-0 md:w-[654px]")
23 | Div {
24 | Div {
25 | Text(item.description)
26 | }
27 | .class("text-lg md:text-2xl mx-auto")
28 | }
29 | .class("component mt-5 mb-0 md:w-[654px]")
30 | }
31 | Figure {
32 | Div {
33 | Image(item.metadata.postImage)
34 | .class("my-0")
35 | }
36 | }
37 | .class("component rounded-xl border border-gray-200 overflow-hidden min-w-[85%] lg:min-w-[320px]")
38 | Div {
39 | Div {
40 | Node.contentBody(item.body)
41 | }
42 | }
43 | .class("mx-auto w-[85%] text-left mt-8 md:w-[700px]")
44 | Div {
45 | Div {
46 | Div {
47 | List(item.tags) { tag in
48 | ListItem {
49 | Link(tag.string, url: context.site.url(for: tag))
50 | .class("block my-1 px-1.5 py-2 bg-neutral-900 text-white rounded-lg transition duration-200 ease-in-out hover:bg-zinc-300 hover:text-black")
51 | }
52 | .class("inline-block mr-1.5")
53 | }
54 | .class("m-0")
55 | }
56 | Button {
57 | Image("/static/icons/copy.svg")
58 | .class("my-0")
59 | }
60 | .accessibilityLabel("link share")
61 | .class("copyPost m-1 w-9 h-9 p-1.5 bg-blog-c-button rounded-full hover:bg-gray-300 transition duration-200 ease-in-out")
62 | }
63 | .class("flex justify-between mt-6")
64 | }
65 | .class("mx-auto w-[85%] text-left mt-8 md:w-[700px]")
66 | PreviewPost(context: context, item: item)
67 | Script(
68 | .src("https://utteranc.es/client.js"),
69 | .repo("jihoonahn/blog"),
70 | .issue_term("pathname"),
71 | .label("comments"),
72 | .theme("github-light"),
73 | .crossorigin("anonymous"),
74 | .async()
75 | )
76 | }
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/Sources/Layouts/PostsLayout.swift:
--------------------------------------------------------------------------------
1 | struct PostsLayout: Component {
2 | let items: [Item]
3 | let context: PublishingContext
4 |
5 | var body: Component {
6 | Div {
7 | List(items) { item in
8 | Article {
9 | Link(url: item.path.absoluteString) {
10 | Div {
11 | Figure {
12 | Image(item.metadata.postImage)
13 | .class("m-0 transition duration-300 ease-in-out group-hover:scale-105")
14 | }
15 | .class("h-full object-cover w-auto md:w-[43rem]")
16 | }
17 | .class("block border border-gray-200 rounded-3xl overflow-hidden")
18 | Div {
19 | Paragraph(item.tags.map{ $0.string }.joined(separator: ", "))
20 | .class("text-blog-c-tag-text text-xs md:text-sm my-1")
21 | H3(item.title)
22 | .class("text-heading-4 md:text-heading-3 font-semibold text-black my-3")
23 | Time(DateFormatter.time.string(from: item.date))
24 | .class("text-sm md:text-base font-light text-blog-c-time-text")
25 | }
26 | .class("p-4")
27 | }
28 | .class("group")
29 | }
30 | }
31 | .class("flex max-w-screen-md flex-col m-0 gap-y-4 list-none md:gap-y-6 lg:gap-y-8")
32 | }
33 | .class("flex flex-col items-center gap-20")
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/Sources/Pages/404.swift:
--------------------------------------------------------------------------------
1 | struct ErrorPage: Component {
2 | var body: Component {
3 | Section {
4 | Div {
5 | Div {
6 | H2 {
7 | Span {
8 | Text("404")
9 | }
10 | .class("text-blog-c-brand-blue")
11 | }
12 | .class("mb-8 font-bold text-9xl")
13 | Paragraph("Sorry, we couldn't find this page.")
14 | .class("text-3xl font-semibold md:text-3xl")
15 | Link(url: "/") {
16 | Text("Back to homepage")
17 | }
18 | .class("inline-flex cursor-pointer justify-center rounded-full p-5 text-gray-500 text-center border-2 ml-4")
19 | }
20 | .class("max-w-md text-center")
21 | }
22 | .class("flex items-center container flex-col justify-center mx-auto my-8 px-5")
23 | }
24 | .class("flex items-center h-full p-16")
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/Sources/Pages/About.swift:
--------------------------------------------------------------------------------
1 | struct AboutPage: Component {
2 | var body: Component {
3 | PageLayout(title: "About") {
4 | Div {
5 | Image("/static/images/about.svg")
6 | Paragraph {
7 | Text("This blog is created using ")
8 | Link("Publish", url: "https://github.com/JohnSundell/Publish")
9 | .class("text-blog-c-brand-blue")
10 | Text(" and ")
11 | Link("Tailwind CSS", url: "https://tailwindcss.com/")
12 | .class("text-blog-c-brand-blue")
13 | Text(".")
14 | }
15 | .class("text-center")
16 |
17 | Paragraph("""
18 | I am a junior developer who started iOS development in 2021. During this time, I worked with small and large teams on the project. I am interested in various architectures and technologies while developing iOS.
19 | """)
20 | .class("font-light")
21 |
22 | Paragraph {
23 | Text("You can contact me via ")
24 | Link("Email", url: "mailto:jihoonahn.dev@gmail.com")
25 | .class("text-blog-c-brand-blue")
26 | Text(" and ")
27 | Link("LinkedIn", url: "https://www.linkedin.com/in/ahnjihoon/")
28 | .class("text-blog-c-brand-blue")
29 | Text(".")
30 | }
31 | }
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/Sources/Pages/HTMLFactory.swift:
--------------------------------------------------------------------------------
1 | struct BlogHTMLFactory: HTMLFactory {
2 | typealias Site = Blog
3 |
4 | @HTMLBuilder
5 | func makeIndexHTML(
6 | for index: Publish.Index,
7 | context: Publish.PublishingContext
8 | ) throws -> HTML {
9 | BaseLayout(for: index, context: context) {
10 | IndexPage(pageNumber: 1, context: context)
11 | }
12 | }
13 |
14 | @HTMLBuilder
15 | func makeSectionHTML(
16 | for section: Publish.Section,
17 | context: Publish.PublishingContext
18 | ) throws -> HTML {
19 | BaseLayout(for: section, context: context) {
20 | SectionPage(section: section, context: context)
21 | }
22 | }
23 |
24 | @HTMLBuilder
25 | func makeItemHTML(
26 | for item: Publish.Item,
27 | context: Publish.PublishingContext
28 | ) throws -> HTML {
29 | BaseLayout(for: item, context: context) {
30 | PostPage(item: item, context: context)
31 | }
32 | }
33 |
34 | @HTMLBuilder
35 | func makePageHTML(
36 | for page: Publish.Page,
37 | context: Publish.PublishingContext
38 | ) throws -> HTML {
39 | BaseLayout(for: page, context: context) {
40 | PagePage(page: page, context: context)
41 | }
42 | }
43 |
44 | @HTMLBuilder
45 | func makeTagListHTML(
46 | for page: Publish.TagListPage,
47 | context: Publish.PublishingContext
48 | ) throws -> HTML? {
49 | BaseLayout(for: page, context: context) {
50 | TagListPage(tags: page.tags, context: context)
51 | }
52 | }
53 |
54 | @HTMLBuilder
55 | func makeTagDetailsHTML(
56 | for page: Publish.TagDetailsPage,
57 | context: Publish.PublishingContext
58 | ) throws -> HTML? {
59 | BaseLayout(for: page, context: context) {
60 | TagDetailsPage(
61 | items: context.items(
62 | taggedWith: page.tag,
63 | sortedBy: \.date
64 | ),
65 | context: context,
66 | selectedTag: page.tag,
67 | pageNumber: 1
68 | )
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/Sources/Pages/Index.swift:
--------------------------------------------------------------------------------
1 | struct IndexPage: Component {
2 | let pageNumber: Int
3 | let context: PublishingContext
4 |
5 | var body: Component {
6 | Section {
7 | PostsLayout(items: context.paginatedItems[pageNumber-1], context: context)
8 | Pagination(activePage: pageNumber, numberOfPages: context.paginatedItems.count) { num in
9 | context.index.paginatedPath(pageIndex: num - 1).absoluteString
10 | }
11 | }
12 | .class("px-4 sm:px-8 max-w-3xl mx-auto")
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/Sources/Pages/Page/Page.swift:
--------------------------------------------------------------------------------
1 | struct PagePage: Component {
2 | let page: Page
3 | let context: PublishingContext
4 |
5 | var body: Component {
6 | switch page.path.string {
7 | case "404":
8 | return ErrorPage()
9 | default:
10 | return page.body
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/Sources/Pages/Post/Post.swift:
--------------------------------------------------------------------------------
1 | struct PostPage: Component {
2 | var item: Item
3 | var context: PublishingContext
4 |
5 | var body: Component {
6 | PostLayout(item: item, context: context)
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/Sources/Pages/Sections/Section.swift:
--------------------------------------------------------------------------------
1 | struct SectionPage: Component {
2 | var section: Publish.Section
3 | var context: PublishingContext
4 |
5 | var body: Component {
6 | switch section.path.string {
7 | case Blog.SectionID.blog.rawValue:
8 | return IndexPage(pageNumber: 1, context: context)
9 | case Blog.SectionID.about.rawValue:
10 | return AboutPage()
11 | default: return Div()
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/Sources/Pages/Tags/TagDetails.swift:
--------------------------------------------------------------------------------
1 | struct TagDetailsPage: Component {
2 | let items: [Item]
3 | let context: PublishingContext
4 | let selectedTag: Tag
5 | let pageNumber: Int
6 |
7 | var body: Component {
8 | PageLayout(title: selectedTag.string) {
9 | ComponentGroup {
10 | ArchiveLayout(
11 | items: items,
12 | context: context
13 | )
14 | if items.count > Constants.numberOfItemsPerTagsPage || pageNumber > 1 {
15 | Pagination(activePage: pageNumber, numberOfPages: context.paginatedItems(for: selectedTag).count) { num in
16 | context.site.paginatedPath(for: selectedTag, pageIndex: num - 1).absoluteString
17 | }
18 | }
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/Sources/Pages/Tags/TagList.swift:
--------------------------------------------------------------------------------
1 | struct TagListPage: Component {
2 | let tags: Set
3 | let context: PublishingContext
4 |
5 | var body: Component {
6 | PageLayout(title: "Tag") {
7 | ComponentGroup {
8 | Paragraph("A collection of \(tags.count) tags.")
9 | .class("text-gray-700")
10 | List(tags) { tag in
11 | ListItem {
12 | Link(tag.string, url: context.site.url(for: tag))
13 | .class("p-2.5 border-2 border-stone-600 bg-white rounded-lg text-black transition duration-200 ease-in-out hover:bg-black hover:text-white")
14 | }
15 | .class("inline-block mx-1 my-3")
16 | }
17 | .class("mx-0")
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/Sources/Styles/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | html {
7 | @apply font-sans;
8 | display: block;
9 | }
10 | body {
11 | @apply bg-blog-c-bg;
12 | width: 100%;
13 | min-height: 100vh;
14 | line-height: 24px;
15 | font-size: 16px;
16 | }
17 |
18 | h1 {
19 | font-size: 2em;
20 | margin: 0.67em 0;
21 | }
22 |
23 | h2 {
24 | display: block;
25 | font-size: 1.5em;
26 | margin-block-start: 0.83em;
27 | margin-block-end: 0.83em;
28 | margin-inline-start: 0px;
29 | margin-inline-end: 0px;
30 | font-weight: bold;
31 | }
32 |
33 | h3 {
34 | display: block;
35 | font-size: 1.25em;
36 | margin-block-start: 1.45em;
37 | margin-block-end: 1.45em;
38 | margin-inline-start: 0px;
39 | margin-inline-end: 0px;
40 | font-weight: bold;
41 | }
42 |
43 | h4 {
44 | display: block;
45 | margin-block-start: 1.33em;
46 | margin-block-end: 1.33em;
47 | margin-inline-start: 0px;
48 | margin-inline-end: 0px;
49 | font-weight: bold;
50 | }
51 |
52 | ol {
53 | list-style: decimal;
54 | margin: 0 1em 0 1em;
55 | }
56 |
57 | ul {
58 | display: block;
59 | list-style-type: disc;
60 | margin-block-start: 1em;
61 | margin-block-end: 1em;
62 | margin-inline-start: 1em;
63 | margin-inline-end: 0px;
64 | }
65 |
66 | li {
67 | display: list-item;
68 | text-align: -webkit-match-parent;
69 | }
70 |
71 | img,
72 | video {
73 | max-width: 100%;
74 | height: auto;
75 | margin: 0.25rem 0;
76 | border-radius: 10px;
77 | }
78 | iframe {
79 | @apply h-52 sm:h-80 md:h-96;
80 | width: 100%;
81 | }
82 |
83 | a {
84 | color: #5364FF;
85 | }
86 |
87 | p {
88 | display: block;
89 | margin-block-start: 1em;
90 | margin-block-end: 1em;
91 | margin-inline-start: 0px;
92 | margin-inline-end: 0px;
93 | }
94 |
95 | div {
96 | display: block;
97 | }
98 |
99 | blockquote {
100 | color: #373953;
101 | border-left: 5px solid #333;
102 | padding: 0 1em;
103 | margin-top: 2em;
104 | margin-bottom: 2em;
105 | border-radius: 5px;
106 | }
107 |
108 | code {
109 | margin: 0;
110 | background-color: #6E768166;
111 | padding: 0.2em 0.4em;
112 | font-size: 95%;
113 | white-space: break-spaces;
114 | border-radius: 6px;
115 | line-break: anywhere;
116 | }
117 |
118 | pre {
119 | margin-bottom: 1.5em;
120 | background-color: rgba(34, 37, 41, 1);
121 | padding: 16px 0;
122 | border-radius: 8px;
123 | }
124 |
125 | pre code {
126 | font-family: monospace;
127 | display: block;
128 | padding: 0 20px;
129 | color: rgba(215, 215, 215, 1);
130 | background-color: rgba(34, 37, 41, 1);
131 | line-height: 1.4em;
132 | font-size: 0.95em;
133 | overflow-x: auto;
134 | white-space: pre;
135 | -webkit-overflow-scrolling: touch;
136 | }
137 |
138 | pre code .keyword {
139 | color: rgba(253, 71, 88, 1);
140 | }
141 |
142 | pre code .type {
143 | color: rgba(255, 219, 146, 1);
144 | }
145 |
146 | pre code .call {
147 | color: rgba(158, 241, 221, 1);
148 | }
149 |
150 | pre code .property {
151 | color: rgba(111, 185, 87, 1);
152 | }
153 |
154 | pre code .number {
155 | color: rgba(247, 247, 255, 1);
156 | }
157 |
158 | pre code .string {
159 | color: rgba(253, 244, 255, 1);
160 | }
161 |
162 | pre code .comment {
163 | color: rgba(107, 102, 107, 1);
164 | }
165 |
166 | pre code .dotAccess {
167 | color: rgba(158, 241, 221, 1);
168 | }
169 |
170 | pre code .preprocessing {
171 | color: #C77C49;
172 | }
173 |
174 | .blogMobileNav {
175 | height: 100vh;
176 | }
177 |
178 | .utterances {
179 | border-radius: 10px;
180 | background: #f6f8fa;
181 | max-width: 768px;
182 | }
183 |
184 | .utterances-frame {
185 | padding-left: 1rem;
186 | padding-right: 1rem;
187 | }
188 |
189 | .component {
190 | @apply text-center w-[85%] my-6 md:my-8 lg:my-11 mx-auto overflow-auto lg:w-[980px];
191 | }
192 |
193 | .blogNavBarMenuLink {
194 | @apply text-blog-c-nav-text hover:text-blog-c-brand-blue;
195 | transition: color .25s;
196 | white-space: nowrap;
197 | }
198 |
199 | .blogPagination {
200 | @apply rounded-full bg-blog-c-pagination-button hover:bg-blog-c-pagination-button-hover;
201 | transition: 250ms background-color linear,250ms color linear,250ms opacity linear;
202 | }
203 |
204 | .blogDocsearch .DocSearch-Button {
205 | background: transparent;
206 | }
207 |
208 | .blogDocsearch .DocSearch {
209 | --docsearch-primary-color: '#5364FF';
210 | --docsearch-highlight-color: '#5364FF';
211 | --docsearch-text-color: '#213547';
212 | --docsearch-muted-color: '#000000';
213 | --docsearch-searchbox-shadow: none;
214 | --docsearch-searchbox-focus-background: transparent;
215 | --docsearch-key-gradient: transparent;
216 | --docsearch-key-shadow: none;
217 | --docsearch-modal-background: '#F9F9F9';
218 | --docsearch-footer-background: '#FFFFFF';
219 | }
220 |
221 | .blogDocsearch .DocSearch-Button-Keys {
222 | display: none;
223 | }
224 |
225 | .blogDocsearch .DocSearch-Button-Placeholder {
226 | @apply text-xs hover:text-blog-c-brand-blue;
227 | font-weight: 500;
228 | padding: 0 0 0 6px;
229 | }
230 |
231 | .blogDocsearch .DocSearch-Search-Icon {
232 | @apply md:mr-1.5 md:w-3.5 md:h-3.5;
233 | top: 1px;
234 | }
235 | }
236 |
--------------------------------------------------------------------------------
/Sources/Theme.swift:
--------------------------------------------------------------------------------
1 | extension Publish.Theme where Site == Blog {
2 | static var blog: Self {
3 | Theme(htmlFactory: BlogHTMLFactory())
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/Sources/Utils/Foundation/Array.swift:
--------------------------------------------------------------------------------
1 | extension Array {
2 | func chunked(into size: Int) -> [[Element]] {
3 | return stride(from: 0, to: count, by: size).map {
4 | Array(self[$0 ..< Swift.min($0 + size, count)])
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/Sources/Utils/Foundation/DateFormatter.swift:
--------------------------------------------------------------------------------
1 | extension DateFormatter {
2 | static var time: DateFormatter = {
3 | let formatter = DateFormatter()
4 | formatter.dateStyle = .long
5 | formatter.dateFormat = "yyyy년 MM월 dd일"
6 | return formatter
7 | }()
8 | }
9 |
--------------------------------------------------------------------------------
/Sources/Utils/HTML/HTMLBuilder.swift:
--------------------------------------------------------------------------------
1 | @resultBuilder
2 | struct HTMLBuilder {
3 | @inlinable
4 | static func buildBlock(_ content: Content) -> HTML {
5 | content.build()
6 | }
7 | @inlinable
8 | static func buildOptional(_ wrapped: H?) -> HTML? {
9 | wrapped?.build()
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/Sources/Utils/HTML/HTMLConvertable.swift:
--------------------------------------------------------------------------------
1 | protocol HTMLConvertable {
2 | func build() -> HTML
3 | }
4 |
5 | extension HTML: HTMLConvertable {
6 | func build() -> HTML {
7 | return self
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/Sources/Utils/Import/Import.swift:
--------------------------------------------------------------------------------
1 | @_exported import Foundation
2 | @_exported import Plot
3 | @_exported import Publish
4 | @_exported import ShellOut
5 | @_exported import Splash
6 | @_exported import Ink
7 |
--------------------------------------------------------------------------------
/Sources/Utils/Pagination/Blog+paginatedPath.swift:
--------------------------------------------------------------------------------
1 | extension Blog {
2 | func paginatedPath(for tag: Tag, pageIndex: Int) -> Path {
3 | guard pageIndex != 0 else { return self.path(for: tag) }
4 | return self.path(for: tag).appendingComponent("\(pageIndex + 1)")
5 | }
6 |
7 | func paginatedTagListPath(pageIndex: Int) -> Path {
8 | guard pageIndex != 0 else { return tagListPath }
9 | return tagListPath.appendingComponent("\(pageIndex + 1)")
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/Sources/Utils/Pagination/Index+paginatedPath.swift:
--------------------------------------------------------------------------------
1 | extension Index {
2 | func paginatedPath(pageIndex: Int) -> Path {
3 | guard pageIndex != 0 else { return path }
4 | return path.appendingComponent("\(pageIndex + 1)")
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/Sources/Utils/Pagination/PublishingContext+allPaginatedItems.swift:
--------------------------------------------------------------------------------
1 | extension PublishingContext where Site == Blog {
2 | var paginatedItems: [[Item]] {
3 | allItems(sortedBy: \.date, order: .descending).chunked(into: Constants.numberOfItemsPerIndexPage)
4 | }
5 |
6 | func paginatedItems(for tag: Tag) -> [[Item]] {
7 | items(taggedWith: tag, sortedBy: \.date, order: .descending).chunked(into: Constants.numberOfItemsPerTagsPage)
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/Sources/Utils/Plot/BodyContext.swift:
--------------------------------------------------------------------------------
1 | extension Node where Context == HTML.BodyContext {
2 | static func nodeTime(_ nodes: Node...) -> Node {
3 | .element(named: "time", nodes: nodes)
4 | }
5 | static func figure(_ nodes: Node...) -> Node {
6 | .element(named: "figure", nodes: nodes)
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/Sources/Utils/Plot/ElementDefinitions.swift:
--------------------------------------------------------------------------------
1 | extension ElementDefinitions {
2 | enum Main: ElementDefinition { public static var wrapper = Node.main }
3 | enum Section: ElementDefinition { public static var wrapper = Node.section }
4 | enum ASide: ElementDefinition { public static var wrapper = Node.aside }
5 | enum Figure: ElementDefinition { public static var wrapper = Node.figure }
6 | }
7 |
8 | typealias Main = ElementComponent
9 | typealias Section = ElementComponent
10 | typealias ASide = ElementComponent
11 | typealias Figure = ElementComponent
12 |
--------------------------------------------------------------------------------
/Sources/Utils/Plot/Script.swift:
--------------------------------------------------------------------------------
1 | struct Script: Component {
2 | // MARK: - Properties
3 | let nodes: [Node]
4 |
5 | // MARK: - Initalizer
6 | init(_ nodes: Node...) {
7 | self.nodes = nodes
8 | }
9 |
10 | var body: Component {
11 | Node.script(nodes.node)
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/Sources/Utils/Plot/SourceContext.swift:
--------------------------------------------------------------------------------
1 | extension Node where Context: HTMLSourceContext {
2 | static func crossorigin(_ text: String) -> Node {
3 | .attribute(named: "crossorigin",value: text)
4 | }
5 | static func issue_term(_ text: String) -> Node {
6 | .attribute(named: "issue-term",value: text)
7 | }
8 | static func label(_ text: String) -> Node {
9 | .attribute(named: "label",value: text)
10 | }
11 | static func repo(_ text: String) -> Node {
12 | .attribute(named: "repo",value: text)
13 | }
14 | static func theme(_ text: String) -> Node {
15 | .attribute(named: "theme",value: text)
16 | }
17 | static func type(_ type: String) -> Node {
18 | .attribute(named: "type",value: type)
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/Sources/Utils/Plot/Time.swift:
--------------------------------------------------------------------------------
1 | struct Time: Component {
2 | // MARK: - Properties
3 | let text: String
4 |
5 | // MARK: - Initalizer
6 | init(_ text: String) {
7 | self.text = text
8 | }
9 |
10 | var body: Component {
11 | Node.nodeTime(.text(text))
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/Sources/Utils/Publish/PublishingStep/404Error.swift:
--------------------------------------------------------------------------------
1 | import Publish
2 |
3 | extension PublishingStep {
4 | static func move404File() -> Self {
5 | let stepName = "Move 404 file for Blog Pages"
6 |
7 | return step(named: stepName) { context in
8 | guard let orig404Page = context.pages["404"] else {
9 | throw PublishingError(stepName: stepName,
10 | infoMessage: "Unable to find 404 page")
11 | }
12 |
13 | let orig404File = try context.outputFile(at: "\(orig404Page.path)/index.html")
14 | try orig404File.rename(to: "404")
15 |
16 | guard
17 | let orig404Folder = orig404File.parent,
18 | let outputFolder = orig404Folder.parent,
19 | let rootFolder = outputFolder.parent
20 | else {
21 | throw PublishingError(stepName: stepName,
22 | infoMessage: "Unable find root, output and 404 folders")
23 | }
24 | try context.copyFileToOutput(from: "\(orig404File.path(relativeTo: rootFolder))")
25 | try orig404Folder.delete()
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/Sources/Utils/Publish/PublishingStep/CodeBlock.swift:
--------------------------------------------------------------------------------
1 | extension PublishingStep where Site == Blog {
2 | static func codeBlock(_ classPrefix: String = "") -> Self {
3 | step(named: "CodeBlock") { step in
4 | step.markdownParser.addModifier(
5 | .codeBlock(HTMLOutputFormat(classPrefix: classPrefix))
6 | )
7 | }
8 | }
9 | }
10 |
11 | extension Modifier {
12 | static func codeBlock(_ format: HTMLOutputFormat = HTMLOutputFormat()) -> Self {
13 | let highlighter = SyntaxHighlighter(format: format)
14 |
15 | return Modifier(target: .codeBlocks) { html, markdown in
16 | var markdown = markdown.dropFirst("```".count)
17 |
18 | guard !markdown.hasPrefix("no-highlight") else {
19 | return html
20 | }
21 |
22 | markdown = markdown
23 | .drop(while: { !$0.isNewline })
24 | .dropFirst()
25 | .dropLast("\n```".count)
26 |
27 | let highlighted = highlighter.highlight(String(markdown))
28 | return "" + highlighted + "\n