I mentioned to it by mistake.

firebase.json

@@ -1,7 +1,11 @@
 {
   "hosting": {
     "public": "dist/musil",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
     "rewrites": [
       {
         "source": "/**/n/**",
@@ -21,7 +25,8 @@
     "predeploy": [
       "npm --prefix \"$RESOURCE_DIR\" run lint",
       "npm --prefix \"$RESOURCE_DIR\" run build"
-    ]
+    ],
+    "source": "functions"
   },
   "storage": {
     "rules": "storage.rules"

firestore.rules

@@ -2,18 +2,20 @@ rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
     match /articles/{articleId} {
-      allow read: if true;
-      allow create: if request.auth.uid != null;
-      allow update: if request.auth.uid == resource.data.uid && resource.data.uid == request.resource.data.uid;
+      allow read: if resource.data.isPublic == true || request.auth.uid == resource.data.uid;
+      allow create: if request.auth.uid == request.resource.data.uid;
+      allow update: if request.auth.uid == resource.data.uid && request.resource.data.uid == resource.data.uid;
       allow delete: if request.auth.uid == resource.data.uid;
     }
     match /users/{userId} {
       allow read: if true;
-      allow write: if request.auth.uid == userId;
-    }
-    match /users/{userId}/likedArticles/{articleId} {
-      allow read: if true;
-      allow write: if request.auth.uid == userId;
+      allow create: if request.auth.uid == request.resource.data.uid;
+      allow update: if request.auth.uid == resource.data.uid && request.resource.data.uid == resource.data.uid;
+      allow delete: if request.auth.uid == resource.data.uid;
+      match /likedArticles/{articleId} {
+        allow read: if true;
+        allow write: if request.auth.uid == userId;
+      }
     }
   }
 }

functions/.gitignore

@@ -7,3 +7,8 @@ typings/
 
 node_modules/
 lib/
+.runtimeconfig.json
+
+firebase-debug.log
+firestore-debug.log
+ui-debug.log

src/app/app.module.ts

@@ -15,9 +15,16 @@ import {
 import { FooterComponent } from './footer/footer.component';
 import { AngularFireModule } from '@angular/fire';
 import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
-import { AngularFirestoreModule } from '@angular/fire/firestore';
+import {
+  AngularFirestoreModule,
+  SETTINGS as FIRESTORE_SETTINGS,
+} from '@angular/fire/firestore';
 import { AngularFireStorageModule } from '@angular/fire/storage';
-import { AngularFireFunctionsModule, REGION } from '@angular/fire/functions';
+import {
+  AngularFireFunctionsModule,
+  REGION,
+  ORIGIN,
+} from '@angular/fire/functions';
 import { AngularFireAuthModule } from '@angular/fire/auth';
 import { environment } from '../environments/environment';
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
@@ -75,6 +82,14 @@ import { MatPaginatorIntlJaModule } from './mat-paginator-intl-ja/mat-paginator-
     { provide: REGION, useValue: 'asia-northeast1' },
     { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 4000 } },
     { provide: MatPaginatorIntl, useClass: MatPaginatorIntlJaModule },
+    // {
+    //   provide: ORIGIN,
+    //   useValue: environment.production ? undefined : 'http://localhost:5001',
+    // },
+    // {
+    //   provide: FIRESTORE_SETTINGS,
+    //   useValue: environment.production ? {} : { host: 'localhost:8080', ssl: false },
+    // },
   ],
   bootstrap: [AppComponent],
 })

src/app/footer/footer.component.html

@@ -10,5 +10,8 @@
       >お問い合わせ(TwitterDM)<mat-icon>open_in_new</mat-icon></a
     >
   </div>
-  <p class="copyright">&copy; 2020 MusiL by komura</p>
+  <p class="copyright">
+    &copy; 2020 MusiL by
+    <a href="https://twitter.com/komura_c">komura</a>
+  </p>
 </footer>

src/app/footer/footer.component.scss

@@ -1,3 +1,5 @@
+@import 'mixins';
+
 .footer {
   background-color: inherit;
   padding: 16px 0 32px;
@@ -8,6 +10,9 @@
     a {
       margin: 0 8px 8px;
       text-align: center;
+      @include sp {
+        font-size: 14px;
+      }
     }
   }
 }
@@ -17,4 +22,7 @@ mat-icon {
 .copyright {
   text-align: center;
   margin: 8px 0px;
+  @include sp {
+    font-size: 14px;
+  }
 }

src/app/mypage/liked-articles/liked-articles.component.ts

@@ -14,7 +14,7 @@ export class LikedArticlesComponent implements OnInit {
   articles$: Observable<
     ArticleWithAuthor[]
   > = this.articleService
-    .getMyLikedArticles(this.userService.mypageUser.uid)
+    .getMyLikedArticles(this.userService.mypageUser?.uid)
     .pipe(
       take(1),
       tap(() => {

src/app/mypage/my-articles/my-articles.component.ts

@@ -14,7 +14,7 @@ export class MyArticlesComponent implements OnInit {
   articles$: Observable<
     ArticleWithAuthor[]
   > = this.articleService
-    .getMyArticlesPublic(this.userService.mypageUser.uid)
+    .getMyArticlesPublic(this.userService.mypageUser?.uid)
     .pipe(
       take(1),
       tap(() => {

src/app/mypage/mypage.module.ts

@@ -15,13 +15,15 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MyArticlesComponent } from './my-articles/my-articles.component';
 import { LikedArticlesComponent } from './liked-articles/liked-articles.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { StringToLinkPipe } from '../pipes/string-to-link.pipe';
 
 @NgModule({
   declarations: [
     MypageComponent,
     NoteComponent,
     MyArticlesComponent,
     LikedArticlesComponent,
+    StringToLinkPipe,
   ],
   imports: [
     CommonModule,

src/app/mypage/mypage/mypage.component.html

@@ -22,7 +22,7 @@ <h2 class="mypage__user-name">{{ user.userName }}</h2>
         <p class="mypage__user-screen-name">@{{ user.screenName }}</p>
         <p
           class="mypage__user-description"
-          [innerHTML]="stringToLink(user.description)"
+          [innerHTML]="user.description | stringToLink"
         ></p>
         <a
           mat-flat-button
@@ -33,6 +33,7 @@ <h2 class="mypage__user-name">{{ user.userName }}</h2>
           class="mypage__twitter"
           target="_blank"
           rel="noopener noreferrer"
+          *ngIf="user.uid !== authService.uid"
         >
           <mat-icon
             ><img src="/assets/icons/twitter-logo-white.png" alt="Twitterロゴ"

src/app/mypage/mypage/mypage.component.scss

@@ -21,23 +21,39 @@
     height: 120px;
     border-radius: 50%;
     margin: 16px 0px;
+    @include sp {
+      width: 100px;
+      height: 100px;
+    }
   }
   &__user-name {
     font-size: 20px;
     font-weight: bold;
     margin: 0 0 8px;
+    @include sp {
+      font-size: 18px;
+    }
   }
   &__user-screen-name {
     font-size: 16px;
     margin: 0 0 8px;
+    @include sp {
+      font-size: 14px;
+    }
   }
   &__user-description {
     font-size: 16px;
     margin: 0 0 16px;
+    @include sp {
+      font-size: 14px;
+    }
   }
   &__twitter {
     text-decoration: none;
     background-color: $color-twitter;
+    @include sp {
+      font-size: 14px;
+    }
   }
   &__menu {
     max-width: 600px;
@@ -51,9 +67,15 @@
 
 .edit-profile {
   margin-left: auto;
+  @include sp {
+    font-size: 14px;
+  }
 }
 
 .mat-tab-link {
   font-size: 16px;
   text-decoration: none;
+  @include sp {
+    font-size: 14px;
+  }
 }

src/app/mypage/mypage/mypage.component.ts

@@ -1,12 +1,18 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {
+  ActivatedRoute,
+  Router,
+  NavigationEnd,
+  NavigationStart,
+} from '@angular/router';
 import { UserData } from 'functions/src/interfaces/user';
 import { Observable } from 'rxjs';
 import { map, switchMap, tap, take } from 'rxjs/operators';
 import { AuthService } from 'src/app/services/auth.service';
 import { LoadingService } from 'src/app/services/loading.service';
 import { UserService } from 'src/app/services/user.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { ScrollService } from 'src/app/services/scroll.service';
 
 @Component({
   selector: 'app-mypage',
@@ -46,24 +52,23 @@ export class MypageComponent implements OnInit {
   isLoading = true;
 
   constructor(
+    private router: Router,
     private route: ActivatedRoute,
     private userService: UserService,
     private loadingService: LoadingService,
     private seoService: SeoService,
-    public authService: AuthService
+    public authService: AuthService,
+    private scrollService: ScrollService
   ) {
     this.loadingService.toggleLoading(true);
+    this.router.events.forEach((event) => {
+      if (event instanceof NavigationStart) {
+        this.scrollService.saveScrollPosition('mypage');
+      }
+      if (event instanceof NavigationEnd) {
+        this.scrollService.restoreScrollPosition('mypage');
+      }
+    });
   }
-
-  stringToLink(description: string): string {
-    const linkReg = new RegExp(
-      /(http(s)?:\/\/[a-zA-Z0-9-.!'()*;/?:@&=+$,%#]+)/gi
-    );
-    const toATag =
-      "<a href='$1' target='_blank' rel='noopener noreferrer'>$1</a>";
-    const link = description.replace(linkReg, toATag);
-    return link;
-  }
-
   ngOnInit(): void {}
 }

src/app/mypage/note/note.component.html

@@ -178,7 +178,7 @@ <h1 class="note-header__title">{{ article.title }}</h1>
             >
             <p
               class="note-footer__user-description"
-              [innerHTML]="stringToLink(article.author.description)"
+              [innerHTML]="article.author.description | stringToLink"
             ></p>
             <a
               mat-flat-button
@@ -190,6 +190,7 @@ <h1 class="note-header__title">{{ article.title }}</h1>
               class="note-footer__twitter"
               target="_blank"
               rel="noopener noreferrer"
+              *ngIf="article.author.uid !== authService.uid"
             >
               <mat-icon
                 ><img

src/app/mypage/note/note.component.scss

@@ -139,15 +139,25 @@
     height: 80px;
     border-radius: 50%;
     max-width: 80px;
+    @include sp {
+      width: 60px;
+      height: 60px;
+    }
   }
   &__user-name {
     display: block;
     font-weight: bold;
     font-size: 18px;
     margin-bottom: 8px;
+    @include sp {
+      font-size: 16px;
+    }
   }
   &__user-description {
     margin: 0 0 8px 0;
+    @include sp {
+      font-size: 14px;
+    }
   }
   &__twitter {
     .mat-icon {

src/app/mypage/note/note.component.ts

@@ -124,7 +124,7 @@ export class NoteComponent implements OnInit, OnDestroy {
       const rectTop = document.getElementById(id).getBoundingClientRect().top;
       const position = window.pageYOffset;
       const top = rectTop + position - this.headerHeight;
-      window.scrollTo({
+      window.scroll({
         top,
         behavior: 'smooth',
       });
@@ -147,20 +147,6 @@ export class NoteComponent implements OnInit, OnDestroy {
     }, 100);
   }
 
-  stringToLink(description: string): string {
-    const linkReg = new RegExp(
-      /(http(s)?:\/\/[a-zA-Z0-9-.!'()*;/?:@&=+$,%#]+)/gi
-    );
-    if (linkReg.test(description)) {
-      const toATag =
-        "<a href='$1' target='_blank' rel='noopener noreferrer'>$1</a>";
-      const link = description.replace(linkReg, toATag);
-      return link;
-    } else {
-      return description;
-    }
-  }
-
   clickedLike(articleId: string) {
     if (this.authService.uid && !this.isLiked) {
       this.likeService.likeArticle(articleId, this.authService.uid);

src/app/notes/create/create.component.html

@@ -1,7 +1,7 @@
 <div class="editor">
   <form class="editor__form" [formGroup]="form">
     <div class="editor__header">
-      <mat-form-field class="editor__title">
+      <mat-form-field class="editor__title" color="accent">
         <input
           type="text"
           formControlName="title"
@@ -30,7 +30,10 @@
       <app-editor [parentForm]="form"></app-editor>
     </div>
     <div class="editor__buttons">
-      <mat-slide-toggle class="public-option" formControlName="isPublic"
+      <mat-slide-toggle
+        class="public-option"
+        formControlName="isPublic"
+        color="primary"
         >公開</mat-slide-toggle
       >
       <button type="button" class="cancel-button" mat-button (click)="cancel()">

src/app/notes/tag-form/tag-form.component.html

@@ -1,5 +1,5 @@
 <div [formGroup]="parentForm">
-  <mat-form-field class="tag-form">
+  <mat-form-field class="tag-form" color="accent">
     <mat-chip-list #chipList aria-label="タグセレクション">
       <mat-chip
         *ngFor="let tag of tags"